diff --git a/src/components/common/loading-states.tsx b/src/components/common/loading-states.tsx
new file mode 100644
index 0000000..1db6bb6
--- /dev/null
+++ b/src/components/common/loading-states.tsx
@@ -0,0 +1,77 @@
+import Image from "next/image";
+import { AlertTriangle, Inbox, Lock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+export function SkeletonPanel() {
+  return (
+    <div className="stagger grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+      {Array.from({ length: 8 }, (_, index) => (
+        <div key={index} className="skeleton h-24 rounded-lg border border-border/50" />
+      ))}
+    </div>
+  );
+}
+
+export function EmptyState({
+  title = "No records",
+  description,
+}: {
+  title?: string;
+  description: string;
+}) {
+  return (
+    <Card>
+      <CardContent className="flex min-h-48 flex-col items-center justify-center text-center">
+        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted/80 dark:hidden">
+          <Inbox className="h-6 w-6 text-muted-foreground" />
+        </span>
+        <Image
+          src="/art/empty-glass.jpg"
+          alt=""
+          width={112}
+          height={112}
+          className="mb-3 hidden rounded-2xl ring-1 ring-border/60 dark:block"
+        />
+        <h3 className="font-display font-semibold">{title}</h3>
+        <p className="mt-1 max-w-md text-sm text-muted-foreground">{description}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <Card>
+      <CardContent className="flex min-h-48 flex-col items-center justify-center text-center">
+        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+          <AlertTriangle className="h-6 w-6 text-destructive" />
+        </span>
+        <h3 className="font-display font-semibold">Something needs attention</h3>
+        <p className="mt-1 max-w-md text-sm text-muted-foreground">{message}</p>
+        {onRetry ? (
+          <Button className="mt-4" variant="outline" onClick={onRetry}>
+            Retry
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function PermissionDeniedState() {
+  return (
+    <Card>
+      <CardContent className="flex min-h-48 flex-col items-center justify-center text-center">
+        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-warning/10">
+          <Lock className="h-6 w-6 text-warning" />
+        </span>
+        <h3 className="font-display font-semibold">Permission required</h3>
+        <p className="mt-1 max-w-md text-sm text-muted-foreground">
+          Your current role cannot access this module. Request access from a server
+          administrator.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}