diff --git a/apps/mail/app/(routes)/mail/subscriptions/page.tsx b/apps/mail/app/(routes)/mail/subscriptions/page.tsx
index 0dbd5357d..a339548d6 100644
--- a/apps/mail/app/(routes)/mail/subscriptions/page.tsx
+++ b/apps/mail/app/(routes)/mail/subscriptions/page.tsx
@@ -18,6 +18,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { RefreshCcw, Mail, MailOpen, Search, Trash2 } from 'lucide-react';
 import { EmptyStateIcon } from '@/components/icons/empty-state-svg';
 import { SidebarToggle } from '@/components/ui/sidebar-toggle';
+import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Avatar } from '@/components/ui/avatar';
@@ -117,7 +118,7 @@ function SubscriptionItemComponent({
 export default function SubscriptionsPage() {
   const {
     subscriptions,
-    stats,
+    // stats,
     selectedIds,
     isLoading,
     isUnsubscribing,
@@ -135,18 +136,18 @@ export default function SubscriptionsPage() {
     refetch,
   } = useSubscriptions();
 
-  // const stats = {
-  //   overall: {
-  //     total: 0,
-  //     active: 0,
-  //     inactive: 0,
-  //   },
-  // };
+  const stats = {
+    overall: {
+      total: 0,
+      active: 0,
+      inactive: 0,
+    },
+  };
 
   return (
-    <div className="rounded-inherit relative z-[5] flex p-0 md:mr-1 md:mt-1">
+    <div className="rounded-inherit relative z-[5] flex p-0 md:my-1 md:mr-1">
       <div className="rounded-inherit h-full w-full overflow-hidden">
-        <div className="bg-panelLight dark:bg-panelDark mb-1 block w-full shadow-sm md:mr-[3px] md:rounded-2xl lg:flex lg:h-[calc(100dvh-8px)] lg:shadow-sm">
+        <div className="bg-panelLight dark:bg-panelDark block w-full shadow-sm md:mr-[3px] md:rounded-2xl lg:flex lg:h-[calc(100dvh-8px)] lg:shadow-sm">
           <div className="w-full md:h-[calc(100dvh-10px)]">
             <div className="relative z-[1] h-[calc(100dvh-(2px+2px))] w-full overflow-hidden pt-0">
               <div>
@@ -164,12 +165,12 @@ export default function SubscriptionsPage() {
 
                       <div className="flex gap-2">
                         <div className="relative flex-1">
-                          <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+                          <Search className="text-muted-foreground absolute left-3 top-1/2 h-3 w-3 -translate-y-1/2" />
                           <Input
                             placeholder="Search subscriptions..."
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
-                            className="pl-9"
+                            className="p-1 pl-9"
                           />
                         </div>
 
@@ -216,10 +217,7 @@ export default function SubscriptionsPage() {
                           </Button>
                         )}
                         <Button
-                          onClick={() => {
-                            // refetchThreads();
-                            refetch();
-                          }}
+                          onClick={() => refetch()}
                           variant="ghost"
                           className="md:h-fit md:px-2"
                         >
@@ -229,39 +227,39 @@ export default function SubscriptionsPage() {
                     </div>
                   </div>
                 </div>
-
-                {stats && (
-                  <div className="mb-4 grid grid-cols-3 gap-4 p-2 px-3">
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Total</CardTitle>
-                        <CardDescription className="text-2xl font-bold">
-                          {stats?.overall?.total || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Active</CardTitle>
-                        <CardDescription className="text-2xl font-bold text-green-600">
-                          {stats?.overall?.active || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Unsubscribed</CardTitle>
-                        <CardDescription className="text-2xl font-bold text-red-600">
-                          {stats?.overall?.inactive || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                  </div>
-                )}
               </div>
 
-              {/* List */}
-              <div className="h-[calc(100dvh-150px)] overflow-auto p-4">
+              {stats && (
+                <div className="mb-4 grid grid-cols-3 gap-4 p-4">
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Total</CardTitle>
+                      <CardDescription className="text-2xl font-bold">
+                        {stats?.overall?.total || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Active</CardTitle>
+                      <CardDescription className="text-2xl font-bold text-green-600">
+                        {stats?.overall?.active || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Unsubscribed</CardTitle>
+                      <CardDescription className="text-2xl font-bold text-red-600">
+                        {stats?.overall?.inactive || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                </div>
+              )}
+              <Separator className="mb-4" />
+
+              <div className="flex h-[calc(100dvh-62px)] flex-col overflow-auto p-4">
                 {isLoading ? (
                   <div className="space-y-3">
                     {[...Array(5)].map((_, i) => (
@@ -285,7 +283,7 @@ export default function SubscriptionsPage() {
                     </div>
                   </div>
                 ) : (
-                  <VList className="w-full">
+                  <VList className="w-full flex-1">
                     {subscriptions.map((subscription: SubscriptionItem) => (
                       <SubscriptionItemComponent
                         key={subscription.id}
diff --git a/apps/mail/components/icons/icons.tsx b/apps/mail/components/icons/icons.tsx
index 0a13e7c35..2be0d90a5 100644
--- a/apps/mail/components/icons/icons.tsx
+++ b/apps/mail/components/icons/icons.tsx
@@ -657,6 +657,8 @@ export const Bell = ({ className }: { className?: string }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M9.5 4.375C9.5 2.442 7.933 0.875 6 0.875C4.067 0.875 2.5 2.442 2.5 4.375V6.45634C2.5 6.80444 2.36172 7.13828 2.11558 7.38442L1.00628 8.49372C0.842187 8.65781 0.75 8.88037 0.75 9.11244V9.625C0.75 10.1082 1.14175 10.5 1.625 10.5H3.375C3.375 11.9497 4.55025 13.125 6 13.125C7.44975 13.125 8.625 11.9497 8.625 10.5H10.375C10.8582 10.5 11.25 10.1082 11.25 9.625V9.11244C11.25 8.88037 11.1578 8.65781 10.9937 8.49372L9.88442 7.38442C9.63828 7.13828 9.5 6.80444 9.5 6.45634V4.375ZM4.6875 10.5C4.6875 11.2249 5.27513 11.8125 6 11.8125C6.72487 11.8125 7.3125 11.2249 7.3125 10.5H4.6875Z"
+      fill="var(--icon-color)"
+      fillOpacity="0.5"
     />
   </svg>
 );
diff --git a/apps/mail/config/navigation.ts b/apps/mail/config/navigation.ts
index 594bf0436..4f11c41f2 100644
--- a/apps/mail/config/navigation.ts
+++ b/apps/mail/config/navigation.ts
@@ -14,6 +14,7 @@ import {
   Plane2,
   LockIcon,
   Clock,
+  Bell,
 } from '@/components/icons/icons';
 import { BellIcon, MessageSquareIcon } from 'lucide-react';
 import { m } from '@/paraglide/messages';
@@ -74,7 +75,7 @@ export const navigationConfig: Record<string, NavConfig> = {
             id: 'subscriptions',
             title: m['navigation.sidebar.subscriptions'](),
             url: '/mail/subscriptions',
-            icon: BellIcon,
+            icon: Bell,
             shortcut: 'g + s',
           },
         ],
diff --git a/apps/mail/hooks/use-subscriptions.ts b/apps/mail/hooks/use-subscriptions.ts
index a045971ce..ebf9f0fab 100644
--- a/apps/mail/hooks/use-subscriptions.ts
+++ b/apps/mail/hooks/use-subscriptions.ts
@@ -187,9 +187,65 @@ export const useSubscriptions = () => {
     setSelectedIds(new Set());
   }, []);
 
+  const subscriptions = useMemo(() => {
+    const subscriptions: SubscriptionItem[] = [
+      {
+        id: '1',
+        senderEmail: 'test@test.com',
+        senderName: 'Test',
+        senderDomain: 'test.com',
+        category: 'general',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '2',
+        senderEmail: 'test2@test.com',
+        senderName: 'Test 2',
+        senderDomain: 'test2.com',
+        category: 'newsletter',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '3',
+        senderEmail: 'test3@test.com',
+        senderName: 'Test 3',
+        senderDomain: 'test3.com',
+        category: 'promotional',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '4',
+        senderEmail: 'test4@test.com',
+        senderName: 'Test 4',
+        senderDomain: 'test4.com',
+        category: 'social',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+    ];
+
+    return subscriptions;
+  }, [filteredSubscriptions]);
+
   return {
     // Data
-    subscriptions: filteredSubscriptions,
+    // subscriptions: filteredSubscriptions,
+    subscriptions,
     stats: statsQuery.data as
       | {
           overall: {