diff --git a/client/src/components/Layout.jsx b/client/src/components/Layout.jsx
index d8d717e..9d7cc9a 100644
--- a/client/src/components/Layout.jsx
+++ b/client/src/components/Layout.jsx
@@ -35,10 +35,15 @@ const Layout = () => {
   const { connected, recentDetections } = useSocket();
   const location = useLocation();
 
-  // Build navigation based on user role
-  const navigation = user?.role === 'admin' 
-    ? [...baseNavigation, ...adminNavigation]
-    : baseNavigation;
+  // Build navigation based on user role - ensure it's always an array
+  const navigation = React.useMemo(() => {
+    if (!user) {
+      return baseNavigation; // Return base navigation if user not loaded yet
+    }
+    return user.role === 'admin' 
+      ? [...baseNavigation, ...adminNavigation]
+      : baseNavigation;
+  }, [user?.role]);
 
   return (
     <div className="min-h-screen flex bg-gray-100">
@@ -86,7 +91,7 @@ const Layout = () => {
           <div className="flex-1 px-4 flex justify-between items-center">
             <div className="flex-1 flex">
               <h1 className="text-xl font-semibold text-gray-900">
-                {navigation.find(item => item.href === location.pathname)?.name || 'Drone Detection System'}
+                {navigation?.find(item => item.href === location.pathname)?.name || 'Drone Detection System'}
               </h1>
             </div>
             
@@ -166,7 +171,7 @@ const SidebarContent = () => {
       
       <div className="mt-5 flex-grow flex flex-col">
         <nav className="flex-1 px-2 space-y-1">
-          {navigation.map((item) => {
+          {Array.isArray(navigation) && navigation.map((item) => {
             const isActive = location.pathname === item.href;
             return (
               <Link