diff --git a/src/app/dashboard/(overview)/loading.tsx b/src/app/dashboard/(overview)/loading.tsx
deleted file mode 100644
index 40c27b6..0000000
--- a/src/app/dashboard/(overview)/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import DashboardSkeleton from "@/app/dashboard/components/skeletons/skeletons";
-
-export default function Loading() {
-  return <DashboardSkeleton />;
-}
\ No newline at end of file
diff --git a/src/app/dashboard/components/client/nav-links/nav-link-controller.ts b/src/app/dashboard/components/client/nav-links/nav-link-controller.ts
new file mode 100644
index 0000000..b6a3aa9
--- /dev/null
+++ b/src/app/dashboard/components/client/nav-links/nav-link-controller.ts
@@ -0,0 +1,29 @@
+
+import { DocumentIcon } from '@/app/components/icons/document';
+import HomeIcon from '@/app/components/icons/home';
+import { UserIcon } from '@/app/components/icons/user';
+import { usePathname } from 'next/navigation';
+
+type LinkItem = {
+    name: string; 
+    href: string;
+    icon: (props: {className?: string}) => JSX.Element
+}
+export default function navLinkPersonalVM() {
+    const pathname = usePathname()
+    // Map of links to display in the side navigation.
+    // Depending on the size of the application, this would be stored in a database.
+    const links: LinkItem[] = [
+        { name: 'Home', href: '/dashboard', icon: HomeIcon },
+        {
+            name: 'Invoices',
+            href: '/dashboard/invoices',
+            icon: DocumentIcon,
+        },
+        { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
+    ];
+    return {
+        links,
+        isLinkActive: (link: LinkItem) => pathname === link.href
+    }
+}
\ No newline at end of file
diff --git a/src/app/dashboard/components/nav-links.tsx b/src/app/dashboard/components/client/nav-links/nav-links.tsx
similarity index 51%
rename from src/app/dashboard/components/nav-links.tsx
rename to src/app/dashboard/components/client/nav-links/nav-links.tsx
index ecfca9e..1aa6072 100644
--- a/src/app/dashboard/components/nav-links.tsx
+++ b/src/app/dashboard/components/client/nav-links/nav-links.tsx
@@ -1,25 +1,10 @@
 'use client'
-import { DocumentIcon } from '@/app/components/icons/document';
-import HomeIcon from '@/app/components/icons/home';
-import { UserIcon } from '@/app/components/icons/user';
+import navLinkPersonalVM from '@/app/dashboard/components/client/nav-links/nav-link-controller';
 import clsx from 'clsx';
 import Link from 'next/link'
-import { usePathname } from 'next/navigation';
-
-// Map of links to display in the side navigation.
-// Depending on the size of the application, this would be stored in a database.
-const links = [
-  { name: 'Home', href: '/dashboard', icon: HomeIcon },
-  {
-    name: 'Invoices',
-    href: '/dashboard/invoices',
-    icon: DocumentIcon,
-  },
-  { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
-];
 
 export default function NavLinks() {
-  const pathname = usePathname()
+  const { links, isLinkActive  } = navLinkPersonalVM()
   return (
     <>
       {links.map((link) => {
@@ -31,7 +16,7 @@ export default function NavLinks() {
             className={clsx(
               'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
               {
-                'bg-sky-100 text-blue-600': pathname === link.href,
+                'bg-sky-100 text-blue-600': isLinkActive(link),
               },
             )}
           >
diff --git a/src/app/dashboard/components/card/card-controller.ts b/src/app/dashboard/components/server/card/card-controller.ts
similarity index 100%
rename from src/app/dashboard/components/card/card-controller.ts
rename to src/app/dashboard/components/server/card/card-controller.ts
diff --git a/src/app/dashboard/components/card/card.tsx b/src/app/dashboard/components/server/card/card.tsx
similarity index 87%
rename from src/app/dashboard/components/card/card.tsx
rename to src/app/dashboard/components/server/card/card.tsx
index 5494f4f..1b22154 100644
--- a/src/app/dashboard/components/card/card.tsx
+++ b/src/app/dashboard/components/server/card/card.tsx
@@ -1,4 +1,4 @@
-import cardController from "@/app/dashboard/components/card/card-controller";
+import cardController from "@/app/dashboard/components/server/card/card-controller";
 
 
 
diff --git a/src/app/dashboard/components/cards/cards-controller.ts b/src/app/dashboard/components/server/cards/cards-controller.ts
similarity index 100%
rename from src/app/dashboard/components/cards/cards-controller.ts
rename to src/app/dashboard/components/server/cards/cards-controller.ts
diff --git a/src/app/dashboard/components/cards/cards.tsx b/src/app/dashboard/components/server/cards/cards.tsx
similarity index 76%
rename from src/app/dashboard/components/cards/cards.tsx
rename to src/app/dashboard/components/server/cards/cards.tsx
index c39a4fe..e8f74a9 100644
--- a/src/app/dashboard/components/cards/cards.tsx
+++ b/src/app/dashboard/components/server/cards/cards.tsx
@@ -1,5 +1,5 @@
-import { Card } from '@/app/dashboard/components/card/card';
-import cardsController from '@/app/dashboard/components/cards/cards-controller';
+import { Card } from '@/app/dashboard/components/server/card/card';
+import cardsController from '@/app/dashboard/components/server/cards/cards-controller';
 
 
 export default async function CardWrapper() {
diff --git a/src/app/dashboard/components/latest-invoices/latest-invoices-controller.ts b/src/app/dashboard/components/server/latest-invoices/latest-invoices-controller.ts
similarity index 100%
rename from src/app/dashboard/components/latest-invoices/latest-invoices-controller.ts
rename to src/app/dashboard/components/server/latest-invoices/latest-invoices-controller.ts
diff --git a/src/app/dashboard/components/latest-invoices/latest-invoices.tsx b/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
similarity index 97%
rename from src/app/dashboard/components/latest-invoices/latest-invoices.tsx
rename to src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
index 0db6556..dc3c7be 100644
--- a/src/app/dashboard/components/latest-invoices/latest-invoices.tsx
+++ b/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
@@ -1,4 +1,4 @@
-import latestInvoicesController from '@/app/dashboard/components/latest-invoices/latest-invoices-controller';
+import latestInvoicesController from '@/app/dashboard/components/server/latest-invoices/latest-invoices-controller';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
diff --git a/src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts b/src/app/dashboard/components/server/revenue-chart/revenue-chart-controller.ts
similarity index 100%
rename from src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts
rename to src/app/dashboard/components/server/revenue-chart/revenue-chart-controller.ts
diff --git a/src/app/dashboard/components/revenue-chart/revenue-chart.tsx b/src/app/dashboard/components/server/revenue-chart/revenue-chart.tsx
similarity index 93%
rename from src/app/dashboard/components/revenue-chart/revenue-chart.tsx
rename to src/app/dashboard/components/server/revenue-chart/revenue-chart.tsx
index 608163c..b29a7ae 100644
--- a/src/app/dashboard/components/revenue-chart/revenue-chart.tsx
+++ b/src/app/dashboard/components/server/revenue-chart/revenue-chart.tsx
@@ -1,4 +1,4 @@
-import revenueChartController from '@/app/dashboard/components/revenue-chart/revenue-chart-controller';
+import revenueChartController from '@/app/dashboard/components/server/revenue-chart/revenue-chart-controller';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 
 export default async function RevenueChart() {
diff --git a/src/app/dashboard/components/sidenav.tsx b/src/app/dashboard/components/server/sidenav.tsx
similarity index 88%
rename from src/app/dashboard/components/sidenav.tsx
rename to src/app/dashboard/components/server/sidenav.tsx
index 7cf3d44..0af5a13 100644
--- a/src/app/dashboard/components/sidenav.tsx
+++ b/src/app/dashboard/components/server/sidenav.tsx
@@ -1,4 +1,4 @@
-import NavLinks from '@/app/dashboard/components/nav-links';
+import NavLinks from '@/app/dashboard/components/client/nav-links/nav-links';
 import Link from 'next/link';
 
 export default function SideNav() {
diff --git a/src/app/dashboard/components/skeletons/skeletons.tsx b/src/app/dashboard/components/server/skeletons/skeletons.tsx
similarity index 100%
rename from src/app/dashboard/components/skeletons/skeletons.tsx
rename to src/app/dashboard/components/server/skeletons/skeletons.tsx
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index d28eae9..75b7ecb 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,4 +1,4 @@
-import SideNav from "@/app/dashboard/components/sidenav";
+import SideNav from "@/app/dashboard/components/server/sidenav";
 
  
 export default function Layout({ children }: { children: React.ReactNode }) {
diff --git a/src/app/dashboard/loading.tsx b/src/app/dashboard/loading.tsx
new file mode 100644
index 0000000..c50ad40
--- /dev/null
+++ b/src/app/dashboard/loading.tsx
@@ -0,0 +1,5 @@
+import DashboardSkeleton from "@/app/dashboard/components/server/skeletons/skeletons";
+
+export default function Loading() {
+  return <DashboardSkeleton />;
+}
\ No newline at end of file
diff --git a/src/app/dashboard/(overview)/page.tsx b/src/app/dashboard/page.tsx
similarity index 68%
rename from src/app/dashboard/(overview)/page.tsx
rename to src/app/dashboard/page.tsx
index 519d478..24fb89a 100644
--- a/src/app/dashboard/(overview)/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,7 +1,7 @@
-import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/skeletons/skeletons";
-import CardWrapper from "@/app/dashboard/components/cards/cards";
-import LatestInvoices from "@/app/dashboard/components/latest-invoices/latest-invoices";
-import RevenueChart from "@/app/dashboard/components/revenue-chart/revenue-chart";
+import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/server/skeletons/skeletons";
+import CardWrapper from "@/app/dashboard/components/server/cards/cards";
+import LatestInvoices from "@/app/dashboard/components/server/latest-invoices/latest-invoices";
+import RevenueChart from "@/app/dashboard/components/server/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 
 export default async function Dashboard() {