diff --git a/Front-end/src/components/Header.jsx b/Front-end/src/components/Header.jsx
index d610740..57baa7f 100644
--- a/Front-end/src/components/Header.jsx
+++ b/Front-end/src/components/Header.jsx
@@ -16,29 +16,27 @@ function Header() {
   };
 
   return (
-    <header className="bg-white shadow-md ">
-      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
-        <Link to="/" className="text-2xl font-bold text-indigo-600">
-          VigiMétéo
-        </Link>
-        <button
-          className="sm:hidden text-gray-600 hover:text-indigo-600"
-          onClick={() => setIsMenuOpen(!isMenuOpen)}
-        >
-          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-        </button>
+    <header className="bg-white shadow-md relative">
+      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center sm:grid sm:grid-cols-3">
+        {/* Logo Section */}
+        <div className="flex justify-start">
+          <Link to="/" className="text-2xl font-bold text-indigo-600">
+            VigiMétéo
+          </Link>
+        </div>
 
+        {/* Navigation Section (Centered on Desktop) */}
         <nav
           className={`${
             isMenuOpen ? "block" : "hidden"
-          } absolute  z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:w-auto sm:z-auto sm:flex sm:gap-6 sm:shadow-none`}
+          } absolute z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:flex sm:justify-center sm:shadow-none sm:bg-transparent`}
         >
-          <ul className="flex flex-col sm:flex-row gap-4 sm:gap-6 text-gray-600 p-4 sm:p-0">
+          <ul className="flex flex-col sm:flex-row gap-4 sm:gap-10 text-gray-600 p-4 sm:p-0 font-medium">
             <li>
               <Link
                 to="/"
                 onClick={() => setIsMenuOpen(false)}
-                className="text-gray-600 hover:text-indigo-600"
+                className="text-gray-600 hover:text-indigo-600 transition-colors"
               >
                 {t('header.home')}
               </Link>
@@ -47,42 +45,21 @@ function Header() {
               <Link
                 to="/about"
                 onClick={() => setIsMenuOpen(false)}
-                className="text-gray-600 hover:text-indigo-600"
+                className="text-gray-600 hover:text-indigo-600 transition-colors"
               >
                 {t('header.about')}
               </Link>
             </li>
-            {!token ? (
-              <>
-                <li className="sm:hidden">
-                  <Link
-                    to="/login"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="hover:text-indigo-600 flex items-center gap-2"
-                  >
-                    <LogIn size={20} />
-                    {t('header.login')}
-                  </Link>
-                </li>
-                <li className="sm:hidden">
-                  <Link
-                    to="/signup"
-                    onClick={() => setIsMenuOpen(false)}
-                    className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
-                  >
-                    <UserPlus size={20} />
-                    {t('header.signup')}
-                  </Link>
-                </li>
-              </>
-            ) : (
+            
+            {/* Logic for roles */}
+            {token && (
               <>
                 {user?.role === "user" ? (
                   <li>
                     <Link
                       to="/gestionObjets"
                       onClick={() => setIsMenuOpen(false)}
-                      className="text-gray-600 hover:text-indigo-600"
+                      className="text-gray-600 hover:text-indigo-600 transition-colors"
                     >
                       {t('header.visualizer')}
                     </Link>
@@ -92,17 +69,17 @@ function Header() {
                     <Link
                       to="/gestion"
                       onClick={() => setIsMenuOpen(false)}
-                      className="text-gray-600 hover:text-indigo-600"
+                      className="text-gray-600 hover:text-indigo-600 transition-colors"
                     >
                       {t('header.manage')}
                     </Link>
                   </li>
                 )}
                 {user?.role === "admin" && (
-                  <li className="relative">
+                  <li className="relative group">
                     <button
                       onClick={toggleAdminDropdown}
-                      className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none"
+                      className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none transition-colors"
                     >
                       {t('header.admin')}
                       <svg
@@ -139,7 +116,35 @@ function Header() {
                     )}
                   </li>
                 )}
+              </>
+            )}
 
+            {/* Mobile-only auth links */}
+            {!token ? (
+              <>
+                <li className="sm:hidden">
+                  <Link
+                    to="/login"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="hover:text-indigo-600 flex items-center gap-2"
+                  >
+                    <LogIn size={20} />
+                    {t('header.login')}
+                  </Link>
+                </li>
+                <li className="sm:hidden">
+                  <Link
+                    to="/signup"
+                    onClick={() => setIsMenuOpen(false)}
+                    className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg"
+                  >
+                    <UserPlus size={20} />
+                    {t('header.signup')}
+                  </Link>
+                </li>
+              </>
+            ) : (
+              <>
                 <li className="sm:hidden">
                   <Link
                     to="/profil"
@@ -156,7 +161,7 @@ function Header() {
                       logout();
                       setIsMenuOpen(false);
                     }}
-                    className="flex items-center gap-2 text-gray-600 hover:text-red-600"
+                    className="flex items-center gap-2 text-gray-600 hover:text-red-600 w-full text-left"
                   >
                     <LogOut size={20} />
                     <span>{t('header.logout')}</span>
@@ -164,48 +169,59 @@ function Header() {
                 </li>
               </>
             )}
-            <li></li>
           </ul>
         </nav>
-        {!token ? (
-          <div className="hidden sm:flex gap-4 items-center">
-            <LanguageSwitcher />
-            <Link
-              to="/login"
-              onClick={() => setIsMenuOpen(false)}
-              className="hover:text-indigo-600 flex items-center gap-2"
-            >
-              <LogIn size={20} />
-              {t('header.login')}
-            </Link>
-            <Link
-              to="/signup"
-              onClick={() => setIsMenuOpen(false)}
-              className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
-            >
-              <UserPlus size={20} />
-              {t('header.signup')}
-            </Link>
-          </div>
-        ) : (
-          <div className="hidden sm:flex items-center gap-4">
-            <LanguageSwitcher />
-            <Link
-              to="/profil"
-              onClick={() => setIsMenuOpen(false)}
-              className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
-            >
-              <User size={20} />
-            </Link>
-            <button
-              onClick={logout}
-              className="flex items-center gap-2 text-gray-600 hover:text-red-600"
-            >
-              <LogOut size={20} />
-              <span>{t('header.logout')}</span>
-            </button>
-          </div>
-        )}
+
+        {/* Auth Section (Right side) */}
+        <div className="flex justify-end items-center gap-4">
+          {!token ? (
+            <div className="hidden sm:flex gap-4 items-center">
+              <LanguageSwitcher />
+              <Link
+                to="/login"
+                className="text-gray-600 hover:text-indigo-600 flex items-center gap-2 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <LogIn size={20} />
+                {t('header.login')}
+              </Link>
+              <Link
+                to="/signup"
+                className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <UserPlus size={20} />
+                {t('header.signup')}
+              </Link>
+            </div>
+          ) : (
+            <div className="hidden sm:flex items-center gap-6">
+              <LanguageSwitcher />
+              <Link
+                to="/profil"
+                className="flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <User size={20} />
+              </Link>
+              <button
+                onClick={logout}
+                className="flex items-center gap-2 text-gray-600 hover:text-red-600 transition-colors"
+              >
+                <LogOut size={20} />
+                <span className="font-medium">{t('header.logout')}</span>
+              </button>
+            </div>
+          )}
+          
+          {/* Mobile Menu Button */}
+          <button
+            className="sm:hidden text-gray-600 hover:text-indigo-600 focus:outline-none"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
       </div>
     </header>
   );