diff --git a/app/(app)/dashboard/loading.tsx b/app/(app)/dashboard/loading.tsx
index 656e323..40800ab 100644
--- a/app/(app)/dashboard/loading.tsx
+++ b/app/(app)/dashboard/loading.tsx
@@ -1,10 +1,12 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
 export default function Loading() {
   return (
-    <div className="p-6 max-w-4xl mx-auto w-full animate-pulse">
-      <div className="h-6 w-32 bg-border rounded mb-6" />
+    <div className="p-6 max-w-4xl mx-auto w-full">
+      <Skeleton className="h-6 w-32 mb-6" />
       <div className="grid gap-3">
-        {[1, 2, 3].map(i => (
-          <div key={i} className="h-20 bg-border/50 rounded-xl" />
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-20 rounded-xl" />
         ))}
       </div>
     </div>
diff --git a/app/(app)/settings/loading.tsx b/app/(app)/settings/loading.tsx
index 07f3dd9..11488b0 100644
--- a/app/(app)/settings/loading.tsx
+++ b/app/(app)/settings/loading.tsx
@@ -1,9 +1,11 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
 export default function Loading() {
   return (
-    <div className="p-6 max-w-2xl mx-auto w-full space-y-4 animate-pulse">
-      <div className="h-6 w-28 bg-border rounded" />
-      {[1, 2, 3, 4].map(i => (
-        <div key={i} className="h-28 bg-border/50 rounded-xl" />
+    <div className="p-6 max-w-2xl mx-auto w-full space-y-4">
+      <Skeleton className="h-6 w-28" />
+      {[1, 2, 3, 4].map((i) => (
+        <Skeleton key={i} className="h-28 rounded-xl" />
       ))}
     </div>
   )