diff --git a/src/components/ui/Navigation.js b/src/components/ui/Navigation.js
index 58776fc..550cc01 100644
--- a/src/components/ui/Navigation.js
+++ b/src/components/ui/Navigation.js
@@ -5,17 +5,17 @@ import { usePathname } from "next/navigation";
 import { useSession, signOut } from "next-auth/react";
 import { useTranslation } from "@/lib/i18n";
 import LanguageSwitcher from "./LanguageSwitcher";
+import { useState } from "react";
 
 const Navigation = () => {
 	const pathname = usePathname();
 	const { data: session, status } = useSession();
 	const { t } = useTranslation();
+	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
 	const isActive = (path) => {
 		if (path === "/") return pathname === "/";
-		// Exact match for paths
 		if (pathname === path) return true;
-		// For nested paths, ensure we match the full path segment
 		if (pathname.startsWith(path + "/")) return true;
 		return false;
 	};
@@ -43,67 +43,145 @@ const Navigation = () => {
 	}
 
 	return (
-		<nav className="bg-white border-b border-gray-200">
-			<div className="max-w-6xl mx-auto px-6">
+		<nav className="bg-white border-b border-gray-200 shadow-sm">
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center justify-between h-16">
+					{/* Logo/Brand */}
 					<div className="flex items-center">
-						<Link href="/projects" className="text-xl font-bold text-gray-900">
+						<Link href="/projects" className="text-xl font-bold text-gray-900 hover:text-blue-600 transition-colors">
 							{t('navigation.projectPanel')}
 						</Link>
 					</div>
 
-					<div className="flex items-center space-x-4">
+					{/* Desktop Navigation */}
+					<div className="hidden md:flex items-center space-x-1">
 						{status === "loading" ? (
 							<div className="text-gray-500">{t('navigation.loading')}</div>
 						) : session ? (
 							<>
-								<div className="flex space-x-8">
-									{navItems.map((item) => (
-										<Link
-											key={item.href}
-											href={item.href}
-											className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-												isActive(item.href)
-													? "bg-blue-100 text-blue-700"
-													: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
-											}`}
-										>
-											{item.label}
-										</Link>
-									))}
-								</div>
-								
-								<div className="flex items-center space-x-4 ml-8 pl-8 border-l border-gray-200">
-									{/* <LanguageSwitcher /> */}
-									
-									<div className="flex items-center space-x-2">
-										<div className="text-sm">
-											<div className="font-medium text-gray-900">{session.user.name}</div>
-											{/* <div className="text-gray-500 capitalize">{t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}</div> */}
-										</div>
-									</div>
-									
-									<button
-										onClick={handleSignOut}
-										className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors"
+								{navItems.map((item) => (
+									<Link
+										key={item.href}
+										href={item.href}
+										className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+											isActive(item.href)
+												? "bg-blue-50 text-blue-700 border border-blue-200"
+												: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
+										}`}
 									>
-										{t('navigation.signOut')}
-									</button>
+										{item.label}
+									</Link>
+								))}
+							</>
+						) : null}
+					</div>
+
+					{/* Right side - User/Auth section */}
+					<div className="flex items-center space-x-4">
+						{status === "loading" ? (
+							<div className="text-blue-100">{t('navigation.loading')}</div>
+						) : session ? (
+							<>
+								{/* User Info */}
+								<div className="hidden md:flex items-center space-x-3">
+									<div className="text-right">
+										<div className="text-sm font-medium text-gray-900">{session.user.name}</div>
+										{/* <div className="text-xs text-gray-500 capitalize">
+											{t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}
+										</div> */}
+									</div>
+									{/* <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
+										<span className="text-gray-600 font-medium text-sm">
+											{session.user.name?.charAt(0).toUpperCase()}
+										</span>
+									</div> */}
 								</div>
+
+								{/* Sign Out Button */}
+								<button
+									onClick={handleSignOut}
+									className="hidden md:block bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium transition-colors"
+								>
+									{t('navigation.signOut')}
+								</button>
 							</>
 						) : (
 							<>
 								<LanguageSwitcher />
 								<Link
 									href="/auth/signin"
-									className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
+									className="bg-white hover:bg-gray-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-md"
 								>
 									{t('navigation.signIn')}
 								</Link>
 							</>
 						)}
+
+						{/* Mobile menu button */}
+						{session && (
+							<button
+								onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+								className="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors"
+							>
+								<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									{isMobileMenuOpen ? (
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+									) : (
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+									)}
+								</svg>
+							</button>
+						)}
 					</div>
 				</div>
+
+				{/* Mobile Navigation Menu */}
+				{session && isMobileMenuOpen && (
+					<div className="md:hidden mt-4 pb-4 border-t border-gray-200">
+						<div className="flex flex-col space-y-2 pt-4">
+							{navItems.map((item) => (
+								<Link
+									key={item.href}
+									href={item.href}
+									onClick={() => setIsMobileMenuOpen(false)}
+									className={`px-4 py-3 rounded-md text-sm font-medium transition-colors ${
+										isActive(item.href)
+											? "bg-blue-50 text-blue-700 border border-blue-200"
+											: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
+									}`}
+								>
+									{item.label}
+								</Link>
+							))}
+
+							{/* Mobile User Info */}
+							<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 mt-4">
+								<div className="flex items-center space-x-3">
+									<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
+										<span className="text-gray-600 font-medium text-sm">
+											{session.user.name?.charAt(0).toUpperCase()}
+										</span>
+									</div>
+									<div>
+										<div className="text-sm font-medium text-gray-900">{session.user.name}</div>
+										<div className="text-xs text-gray-500 capitalize">
+											{t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}
+										</div>
+									</div>
+								</div>
+								<button
+									onClick={() => {
+										setIsMobileMenuOpen(false);
+										handleSignOut();
+									}}
+									className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm transition-colors"
+								>
+									{t('navigation.signOut')}
+								</button>
+							</div>
+						</div>
+					</div>
+				)}
 			</div>
 		</nav>
 	);