diff --git a/web/components/skeletons/FriendsSkeleton.tsx b/web/components/skeletons/FriendsSkeleton.tsx
new file mode 100644
index 00000000..3f16b08b
--- /dev/null
+++ b/web/components/skeletons/FriendsSkeleton.tsx
@@ -0,0 +1,40 @@
+import { Card } from '../ui/Card';
+import { Skeleton } from '../ui/Skeleton';
+
+export const FriendsSkeleton = () => {
+  return (
+    <div className="p-4 md:p-6 max-w-7xl mx-auto space-y-8 min-h-screen">
+      {/* Header Skeleton */}
+      <div className="relative overflow-hidden rounded-3xl h-48 md:h-64 w-full">
+        <Skeleton className="w-full h-full" />
+      </div>
+
+      {/* Summary Cards Skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {[1, 2].map((i) => (
+          <Card key={i} className="flex items-center justify-between p-6 h-32">
+            <div>
+               <Skeleton className="w-32 h-4 mb-2" />
+               <Skeleton className="w-24 h-8" />
+            </div>
+            <Skeleton className="w-12 h-12 rounded-full" />
+          </Card>
+        ))}
+      </div>
+
+      {/* Friends Grid Skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <Card key={i} className="flex flex-col p-6 h-64">
+             <div className="flex justify-between items-start mb-4">
+                <Skeleton className="w-14 h-14 rounded-full" />
+                <Skeleton className="w-20 h-6 rounded-full" />
+             </div>
+             <Skeleton className="w-32 h-8 mb-2" />
+             <Skeleton className="w-24 h-8" />
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/Friends.tsx b/web/pages/Friends.tsx
index 039eb5db..62810544 100644
--- a/web/pages/Friends.tsx
+++ b/web/pages/Friends.tsx
@@ -1,6 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowRight, Search, TrendingDown, TrendingUp, Users } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { FriendsSkeleton } from '../components/skeletons/FriendsSkeleton';
 import { EmptyState } from '../components/ui/EmptyState';
 import { THEMES } from '../constants';
 import { useTheme } from '../contexts/ThemeContext';
@@ -119,6 +120,10 @@ export const Friends = () => {
 
   const isNeo = style === THEMES.NEOBRUTALISM;
 
+  if (loading) {
+    return <FriendsSkeleton />;
+  }
+
   return (
     <div className="p-4 md:p-6 max-w-7xl mx-auto space-y-8 min-h-screen">
       {/* Immersive Header */}