diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index e4e34ec..b0e69b3 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -33,26 +33,3 @@ export default function Dashboard({ children }: { children: ReactNode }) {
     </div >
   )
 }
-
-/*
-
-      <div className="sidebar r-m-0 d-flex flex-column pt-[16px] max-w-[90px] h-[100vh] relative ">
-        <div className="logo r-flex-center pt-[13px] px-[20px] ">
-          <icons.Logo aria-label="Logo" className="scale-95" />
-        </div>
-        <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
-          <Link href="#" className="nav-item r-flex-center ">
-            <icons.HomeIcon aria-label="Home" className="nav-home scale-100" />
-          </Link>
-          <Link href="#" className="nav-item border-none r-flex-center ">
-            <icons.CompaniesIcon aria-label="Companies" className="scale-100 " width={24} height={24} />
-          </Link>
-          <Link href="#" className="nav-item r-flex-center ">
-            <icons.UserGroup aria-label="Admins" className="scale-100" width={24} height={24} />
-          </Link>
-        </div>
-      </div>
-      <div className="logout absolute bottom-[60px] left-[22px]">
-        <icons.Logout aria-label="Logout" />
-      </div>
-*/
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 7f3dbe2..627de23 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,9 +25,11 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground: #04060F;
+    --foreground: #2a2a2a;
     --background: #ffffff;
-  }
+    --cinder: #999;
+    --bluegray: --primary;
+}
 }
 
 body {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7e86cee..ba57bb2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
       <body>
         <AuthProvider>
           <QueryClientProvide>
-            <NextTopLoader color="#246BFD" shadow="0" />
+            <NextTopLoader color="#246BFD" shadow="0"  />
             {children}
           </QueryClientProvide>
         </AuthProvider>
diff --git a/src/assets/css/admin.css b/src/assets/css/admin.css
index e08f76e..bfe8d39 100644
--- a/src/assets/css/admin.css
+++ b/src/assets/css/admin.css
@@ -95,14 +95,50 @@
   width: 284px;
 }
 
+.header-desktop{
+  display: flex!important;
+}
+.mobile{
+  display: none!important;
+}
 
+@media (max-width: 640px) {
 
-@media (max-width: 1024px) {
-  .admin-infos {
-    /* justify-content: space-between; */
-    /* gap: 30px; */
+  .header, .main{
+    padding-left: 22px;
+    padding-right: 22px;
   }
-  .admin-card {
-    /* max-width: 100%; */
+  .header-desktop{
+    display: none!important;
+  }
+  .mobile{
+    display: flex!important;
+  }
+  .mobile-flex{
+    display: flex;
+  }
+  .mobile-none{
+    display: none;
+  }
+
+  .header .name{
+    padding-left: 44px;
+  }
+
+  .sidebar{
+    transition: all ease-in-out .4s;
+  }
+  .hamburger{
+    position: absolute;
+    top: 43px;
+    left: 22px;
+    transform: scale(2);
+  }
+  .hamburger.shifted{
+    left: 100px;
+  }
+  .hamburger-icon{
+    color: var(--primary);
+    border-radius: 4px;
   }
 }
\ No newline at end of file
diff --git a/src/components/admin/adminHeader.tsx b/src/components/admin/adminHeader.tsx
index c6a4faf..1a61bc1 100644
--- a/src/components/admin/adminHeader.tsx
+++ b/src/components/admin/adminHeader.tsx
@@ -12,22 +12,27 @@ export default function AdminHeader() {
 
   return (
     <>
-      <nav className="header r-flex-between px-[44px] py-[20px] ">
+      <nav className="header r-flex-between items-center px-[44px] py-[20px] ">
         <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
         <div className="r-flex-between justify-center items-center r-gap-12">
-          <Theme />
           {/* <ProfilePicture /> */}
 
-          <button type="button" className="icon-border">
+          <div className="header-desktop">
+            <Theme />
+          </div>
+          <button type="button" className="icon-border header-desktop">
             <Image src={icons.notificationsIcon} alt="Notifications" />
           </button>
           <div className="relative">
-            <DropdownMenu.Root  open={open} onOpenChange={setOpen}>
+            <DropdownMenu.Root open={open} onOpenChange={setOpen}>
               <DropdownMenu.Trigger asChild>
-                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
+                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer">
+                  <button type="button" className="icon-borderd mobile scale-120" >
+                    <Image src={icons.arrowLeft} alt="options" className={`transition-transform duration-300 ${open ? "scale-x-[-1]" : ""}`} />
+                  </button>
                   <Image src={icons.profilePicture} alt="ProfilePicture" />
-                  <button className="IconButton" aria-label="Customise options">
-                    <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/>
+                  <button className="IconButton header-desktop" aria-label="Customise options">
+                    <Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`} />
                   </button>
                 </div>
               </DropdownMenu.Trigger>
@@ -40,6 +45,9 @@ export default function AdminHeader() {
                       Profil
                     </Link>
                   </DropdownMenu.Item>
+                  {/* <DropdownMenu.Item className="DropdownMenuItem dropdown-item flex items-center content-center text-[14px] mobile">
+                      <Theme />
+                  </DropdownMenu.Item> */}
                   <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
                     <Link href="#" className="d-flex items-start r-danger ">
                       <Image src={icons.logoutRed} alt="Deconnexion" />
diff --git a/src/components/admin/sidebar.tsx b/src/components/admin/sidebar.tsx
index 89867a7..ccba6ba 100644
--- a/src/components/admin/sidebar.tsx
+++ b/src/components/admin/sidebar.tsx
@@ -4,15 +4,22 @@ import { icons } from "#/assets/icons"
 import NavItem from "./navItem";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { useState } from "react";
 
 
 export default function Sidebar() {
 
   const pathname = usePathname();
 
+  const [mobileVisible, setmobileVisible] = useState(false)
+
+  const  handleMobileVisible = ()=> {
+    setmobileVisible(!mobileVisible)
+  }
+
   return (
     <>
-      <div className="sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] ">
+      <div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] relative `}>
         <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
           <div className="logo r-flex-center px-[19px] ">
             <Image src={icons.logo} alt="Logo" className="scale-95" />
@@ -29,6 +36,12 @@ export default function Sidebar() {
           </div>
         </div>
       </div>
+      <div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
+        {/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+        </svg>
+      </div>
     </>
   )
 }
\ No newline at end of file
