diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index 9834078..c2b2d8d 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -91,27 +91,31 @@ const DashboardLayout = () => {
           <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
             <div className="xl:col-span-4 col-span-6">
               <div className="space-y-4 h-full w-full">
-                <StatCards />
+                <div id="stats">
+                  <StatCards />
+                </div>
               </div>
             </div>
-            <div className="xl:col-span-2 col-span-6 h-[500px] xl:h-[643px] 2xl:h-[510px] lg:hidden xl:block">
+            <div id="feed-xl" className="xl:col-span-2 col-span-6 h-[500px] xl:h-[643px] 2xl:h-[510px] lg:hidden xl:block">
               <div className="h-full">
                 <div className="h-full"><EventFeed /></div>
               </div>
             </div>
           </div>
           <div className="grid grid-cols-12 gap-4">
-            <div className="hidden lg:col-span-6 lg:block xl:hidden h-[740px]">
+            <div id="feed-lg" className="hidden lg:col-span-6 lg:block xl:hidden h-[740px]">
               <EventFeed />
             </div>
-            <div className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
+            <div id="products" className="col-span-12 lg:col-span-6 xl:col-span-4 h-[600px] lg:h-[740px]">
               <ProductGrid />
             </div>
-            <div className="col-span-12 xl:col-span-8 h-full w-full flex">
+            <div id="sales" className="col-span-12 xl:col-span-8 h-full w-full flex">
               <SalesChart className="w-full h-full"/>
             </div>
           </div>
-          <AircallDashboard />
+          <div id="calls">
+            <AircallDashboard />
+          </div>
         </div>
       </div>
     </ScrollProvider>
diff --git a/dashboard/src/components/dashboard/Navigation.jsx b/dashboard/src/components/dashboard/Navigation.jsx
index 2e3015f..e5820f8 100644
--- a/dashboard/src/components/dashboard/Navigation.jsx
+++ b/dashboard/src/components/dashboard/Navigation.jsx
@@ -20,25 +20,13 @@ const Navigation = () => {
   const baseSections = [
     { id: "stats", label: "Statistics" },
     {
-      id: "realtime",
-      label: "Realtime",
-      responsiveIds: ["realtime-lg", "realtime-md"],
-      order: { md: 2, default: 1 },
+      id: "feed",
+      label: "Event Feed",
+      responsiveIds: ["feed-xl", "feed-lg"],
     },
-    {
-      id: "products",
-      label: "Top Products",
-      responsiveIds: ["products-lg", "products-md"],
-      order: { md: 1, default: 2 },
-    },
-    { id: "feed", label: "Activity Feed" },
-    { id: "sales", label: "Sales Metrics" },
-    { id: "campaigns", label: "Campaigns" },
-    { id: "meta", label: "Meta Ads" },
-    { id: "analytics", label: "Analytics" },
-    { id: "behavior", label: "User Behavior" },
-    { id: "gorgias", label: "Customer Service" },
-    { id: "calls", label: "Calls" },
+    { id: "products", label: "Top Products" },
+    { id: "sales", label: "Sales Chart" },
+    { id: "calls", label: "Aircall" },
   ];
 
   const sortSections = (sections) => {