diff --git a/apps/frontend/src/app/dashboard/api-keys/loading.tsx b/apps/frontend/src/app/dashboard/api-keys/loading.tsx
new file mode 100644
index 0000000..c5b72cd
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/api-keys/loading.tsx
@@ -0,0 +1,56 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function ApiKeysLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-28 mb-2" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+
+      <div className="mb-8 p-6 bg-gradient-to-br from-yellow-400/10 to-transparent border border-yellow-400/20 rounded-xl">
+        <div className="flex items-start gap-3">
+          <Skeleton className="h-5 w-5 rounded" />
+          <div className="flex-1">
+            <Skeleton className="h-5 w-44 mb-1" />
+            <Skeleton className="h-4 w-full" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <Skeleton className="h-11 w-44 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="space-y-4 p-6">
+          {Array.from({ length: 2 }).map((_, i) => (
+            <div key={i} className="p-6 bg-white/[0.02] border border-white/5 rounded-lg">
+              <div className="flex flex-col lg:flex-row lg:items-center gap-6">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-3">
+                    <Skeleton className="h-5 w-36" />
+                    <Skeleton className="h-5 w-20 rounded" />
+                  </div>
+                  <div className="flex items-center gap-2 mb-3">
+                    <Skeleton className="h-10 flex-1 rounded" />
+                    <Skeleton className="h-10 w-10 rounded-lg" />
+                    <Skeleton className="h-10 w-10 rounded-lg" />
+                  </div>
+                  <div className="grid sm:grid-cols-2 gap-4">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-4 w-32" />
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Skeleton className="h-9 w-20 rounded-lg" />
+                  <Skeleton className="h-9 w-9 rounded-lg" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/audit-logs/loading.tsx b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx
new file mode 100644
index 0000000..9c1d90c
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx
@@ -0,0 +1,61 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function AuditLogsLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-36 mb-2" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+
+      <div className="grid sm:grid-cols-4 gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-8 w-20 mb-1" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ))}
+      </div>
+
+      <div className="mb-6 flex flex-col sm:flex-row gap-4">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-2 w-2 rounded-full" />
+          <Skeleton className="h-4 w-36" />
+        </div>
+        <div className="flex-1" />
+        <Skeleton className="h-11 w-24 rounded-lg" />
+        <Skeleton className="h-11 w-24 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 6 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/compliance/loading.tsx b/apps/frontend/src/app/dashboard/compliance/loading.tsx
new file mode 100644
index 0000000..b600a7c
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/compliance/loading.tsx
@@ -0,0 +1,70 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function ComplianceLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-36 mb-2" />
+        <Skeleton className="h-5 w-64" />
+      </div>
+
+      <div className="grid sm:grid-cols-2 gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <Skeleton className="h-9 w-9 rounded-lg" />
+              <Skeleton className="h-4 w-28" />
+            </div>
+            <Skeleton className="h-8 w-24" />
+          </div>
+        ))}
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-6">
+        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <Skeleton className="h-6 w-44 mb-6" />
+          <div className="space-y-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Skeleton className="h-5 w-36 mb-1" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                  <Skeleton className="h-6 w-16 rounded" />
+                </div>
+              </div>
+            ))}
+          </div>
+          <Skeleton className="h-11 w-full mt-6 rounded-lg" />
+        </div>
+
+        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <Skeleton className="h-6 w-44 mb-6" />
+          <div className="space-y-6">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="pb-4 border-b border-white/5 last:border-0">
+                <div className="flex items-center justify-between mb-2">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-6 p-4 bg-green-400/10 border border-green-400/20 rounded-lg">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-5 w-5 rounded" />
+              <div className="flex-1">
+                <Skeleton className="h-5 w-36 mb-1" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/escrow/loading.tsx b/apps/frontend/src/app/dashboard/escrow/loading.tsx
new file mode 100644
index 0000000..601a52d
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/escrow/loading.tsx
@@ -0,0 +1,55 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function EscrowLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-24 mb-2" />
+        <Skeleton className="h-5 w-64" />
+      </div>
+
+      <div className="grid sm:grid-cols-3 gap-4 mb-8">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-8 w-24 mb-1" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        ))}
+      </div>
+
+      <div className="mb-6">
+        <Skeleton className="h-11 w-40 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 7 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 7 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/loading.tsx b/apps/frontend/src/app/dashboard/loading.tsx
new file mode 100644
index 0000000..f56d229
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/loading.tsx
@@ -0,0 +1,103 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function OverviewLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-32 mb-2" />
+        <Skeleton className="h-5 w-64" />
+      </div>
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-10 w-10 rounded-lg mb-4" />
+            <Skeleton className="h-8 w-32 mb-1" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ))}
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-6 mb-8">
+        <div className="lg:col-span-2 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <div className="flex items-center justify-between mb-6">
+            <Skeleton className="h-6 w-48" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+          <div className="space-y-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <Skeleton className="h-10 w-10 rounded-full" />
+                    <div>
+                      <Skeleton className="h-5 w-16 mb-1" />
+                      <Skeleton className="h-4 w-24" />
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <Skeleton className="h-5 w-24 mb-1" />
+                    <Skeleton className="h-4 w-12 ml-auto" />
+                  </div>
+                </div>
+                <Skeleton className="h-1 w-full mt-3 rounded-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <Skeleton className="h-6 w-32 mb-6" />
+          <div className="flex items-center justify-center mb-6">
+            <Skeleton className="h-40 w-40 rounded-full" />
+          </div>
+          <div className="space-y-3">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="flex items-center justify-between">
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-12" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-6 w-52" />
+            <Skeleton className="h-2 w-2 rounded-full" />
+          </div>
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5">
+                {Array.from({ length: 7 }).map((_, i) => (
+                  <th key={i} className="py-3 px-4">
+                    <Skeleton className="h-4 w-16" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 7 }).map((_, j) => (
+                    <td key={j} className="py-3 px-4">
+                      <Skeleton className="h-4 w-20" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/payments/loading.tsx b/apps/frontend/src/app/dashboard/payments/loading.tsx
new file mode 100644
index 0000000..c49342c
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/payments/loading.tsx
@@ -0,0 +1,57 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function PaymentsLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-32 mb-2" />
+        <Skeleton className="h-5 w-64" />
+      </div>
+
+      <div className="mb-6 flex flex-col sm:flex-row gap-4">
+        <Skeleton className="h-11 flex-1 rounded-lg" />
+        <Skeleton className="h-11 w-24 rounded-lg" />
+        <Skeleton className="h-11 w-24 rounded-lg" />
+      </div>
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-4 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-lg"
+          >
+            <Skeleton className="h-8 w-16 mb-1" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ))}
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 7 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 10 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 7 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/subscriptions/loading.tsx b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx
new file mode 100644
index 0000000..81fd9ec
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx
@@ -0,0 +1,55 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function SubscriptionsLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-40 mb-2" />
+        <Skeleton className="h-5 w-64" />
+      </div>
+
+      <div className="grid sm:grid-cols-3 gap-4 mb-8">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-8 w-24 mb-1" />
+            <Skeleton className="h-4 w-36" />
+          </div>
+        ))}
+      </div>
+
+      <div className="mb-6">
+        <Skeleton className="h-11 w-52 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 7 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 7 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/tokens/loading.tsx b/apps/frontend/src/app/dashboard/tokens/loading.tsx
new file mode 100644
index 0000000..3b0b5a2
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/tokens/loading.tsx
@@ -0,0 +1,43 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function TokensLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-44 mb-2" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+
+      <div className="mb-6">
+        <Skeleton className="h-11 w-32 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 4 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 6 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/treasury/loading.tsx b/apps/frontend/src/app/dashboard/treasury/loading.tsx
new file mode 100644
index 0000000..50558d1
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/treasury/loading.tsx
@@ -0,0 +1,91 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function TreasuryLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-32 mb-2" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-10 w-10 rounded-lg mb-4" />
+            <Skeleton className="h-8 w-32 mb-1" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        ))}
+      </div>
+
+      <div className="mb-8 p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+        <Skeleton className="h-6 w-36 mb-6" />
+        <div className="space-y-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="p-6 bg-white/[0.02] border border-white/5 rounded-lg">
+              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div>
+                  <Skeleton className="h-12 w-32" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-16 mb-2" />
+                  <Skeleton className="h-6 w-28 mb-1" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-24 mb-2" />
+                  <Skeleton className="h-6 w-28 mb-1" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="h-10 w-full rounded-lg" />
+                  <Skeleton className="h-10 w-full rounded-lg" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-6">
+        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <Skeleton className="h-6 w-44 mb-6" />
+          <div className="space-y-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="p-4 bg-white/[0.02] border border-white/5 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <Skeleton className="h-5 w-16 rounded" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Skeleton className="h-5 w-20" />
+                  <Skeleton className="h-4 w-28" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="p-6 bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl">
+          <Skeleton className="h-6 w-44 mb-6" />
+          <div className="space-y-6">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i}>
+                <div className="flex items-center justify-between mb-2">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+                <Skeleton className="h-2 w-full rounded-full" />
+                <div className="text-right mt-1">
+                  <Skeleton className="h-3 w-8 ml-auto" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/webhooks/loading.tsx b/apps/frontend/src/app/dashboard/webhooks/loading.tsx
new file mode 100644
index 0000000..0ac8883
--- /dev/null
+++ b/apps/frontend/src/app/dashboard/webhooks/loading.tsx
@@ -0,0 +1,55 @@
+import { Skeleton } from '@/app/components/ui/skeleton';
+
+export default function WebhooksLoading() {
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="mb-8">
+        <Skeleton className="h-9 w-32 mb-2" />
+        <Skeleton className="h-5 w-72" />
+      </div>
+
+      <div className="grid sm:grid-cols-3 gap-4 mb-8">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={i}
+            className="p-6 bg-gradient-to-br from-white/[0.05] to-transparent border border-white/10 rounded-xl"
+          >
+            <Skeleton className="h-8 w-20 mb-1" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        ))}
+      </div>
+
+      <div className="mb-6">
+        <Skeleton className="h-11 w-36 rounded-lg" />
+      </div>
+
+      <div className="bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5 rounded-xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-white/5 bg-white/[0.02]">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <th key={i} className="py-4 px-4">
+                    <Skeleton className="h-4 w-20" />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <tr key={i} className="border-b border-white/5">
+                  {Array.from({ length: 6 }).map((_, j) => (
+                    <td key={j} className="py-4 px-4">
+                      <Skeleton className="h-4 w-24" />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}