diff --git a/frontend/src/router.jsx b/frontend/src/router.jsx
index d5fc73a..7dac1de 100644
--- a/frontend/src/router.jsx
+++ b/frontend/src/router.jsx
@@ -1,26 +1,35 @@
 import React from 'react';
-import { createRootRoute, RouterProvider, createBrowserRouter, Link } from '@tanstack/react-router';
+import { createRootRoute, RouterProvider, createBrowserRouter } from '@tanstack/react-router';
 import LoadsList from './components/LoadsList';
 import ShippersList from './components/ShippersList';
-import VehicleMap from './components/VehicleMap';
+import ShipperDashboard from './components/ShipperDashboard';
 
 // Root layout – can later include a navbar or sidebar
 function RootLayout({ children }) {
   return (
-    <div>
-      {/* Simple header */}
-      <header className="bg-primary text-white p-3">
-        <h1 className="mb-0" style={{ fontSize: '1.5rem' }}>FreightDesk Dashboard</h1>
+    <div className="min-vh-100 bg-light">
+      {/* Navigation Header */}
+      <header className="bg-primary text-white p-3 shadow-sm">
+        <div className="container d-flex justify-content-between align-items-center">
+          <h1 className="mb-0" style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>FreightDesk Dashboard</h1>
+          <nav>
+            <ul className="nav">
+              <li className="nav-item">
+                <a className="nav-link text-white" href="/loads">Loads</a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link text-white" href="/shippers">Shippers</a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link text-white" href="/shipper-dashboard">Shipper Dashboard</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
       </header>
-      
-      {/* Navigation */}
-      <nav className="mb-4">
-        <Link href="/loads" className="nav-link">Loads</Link>
-        <Link href="/shippers" className="nav-link">Shippers</Link>
-        <Link href="/vehicles" className="nav-link">Vehicles</Link>
-      </nav>
-
-      <main>{children}</main>
+      <main className="container py-4">
+        {children}
+      </main>
     </div>
   );
 }
@@ -42,17 +51,16 @@ const shippersRoute = rootRoute.createRoute({
   component: ShippersList,
 });
 
-// Vehicle tracking page route
-const vehiclesRoute = rootRoute.createRoute({
-  path: '/vehicles',
-  component: VehicleMap,
+// Shipper Dashboard route
+const shipperDashboardRoute = rootRoute.createRoute({
+  path: '/shipper-dashboard',
+  component: ShipperDashboard,
 });
 
 // Default route – redirect to /loads
 const indexRoute = rootRoute.createRoute({
   path: '/',
   component: () => {
-    // Simple redirect component
     React.useEffect(() => {
       window.location.replace('/loads');
     }, []);
@@ -61,10 +69,10 @@ const indexRoute = rootRoute.createRoute({
 });
 
 // Build the router
-const routeTree = rootRoute.addChildren([loadsRoute, shippersRoute, vehiclesRoute, indexRoute]);
+const routeTree = rootRoute.addChildren([loadsRoute, shippersRoute, shipperDashboardRoute, indexRoute]);
 
 export const router = createBrowserRouter({ routeTree });
 
 export function AppRouter() {
   return <RouterProvider router={router} />;
-}
\ No newline at end of file
+}