diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2dbab9d..49fe5bc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "clsx": "^1.2.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-hook-form": "^7.33.1",
@@ -5262,6 +5263,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20150,6 +20159,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a97b637..f9f749e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "clsx": "^1.2.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.33.1",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index aa069f2..826c470 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 32e1fe8..6656039 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import {useState} from 'react'
 import {useSelector} from 'react-redux'
 import Logo from '../assets/img/media/logo.png'
@@ -5,25 +6,62 @@ import Logo from '../assets/img/media/logo.png'
 const Header = () => {
   const { user } = useSelector(state => state.userReducer)
   const [open, setOpen] = useState(false)
-  const [showmenu, setShowMenu] = useState(false)
+  const [showHeader, setShowHeader] = useState(false)
   const [y, setY] = useState(0)
-  //console.log(y)
+
   window.onscroll = function() {
     let scroll = window.scrollY;
     setY(scroll)
-    if(y > Number(window.innerHeight)-200){
-      setOpen(true)
-    }
-    if(y <= 300) {
-      setOpen(false)
-    }
-    if(open === false) {
-      setShowMenu(false)
-    }
+    const fixedPoint = Number(window.innerHeight) - 144
+    y >= fixedPoint
+    ? setShowHeader(false)
+    : setShowHeader(true)
   }
   return (
     <>
-    <header className={`w-screen h-auto px-[50px] top-0 left-0 z-10 bg-white ${open?'-translate-y-[400px]':'translate-y-0'} fixed duration-300 overflow-x-hidden`}>
+    <header className={clsx('fixed top-0 left-0 w-screen translate-y-0 z-10 bg-white transition-all duration-500',{["-top-full"]: !showHeader})}>
+      <div className='flex flex-row flex-shrink-0 py-2 px-5 align-middle justify-between lg:justify-center items-center'>
+        <label className='hidden  lg:block lg:basis-1/3 outline-none group'>
+          <span className='border-black group-focus:border-b'>
+            <i className='fa-solid fa-search'></i> <input className='outline-none' type="text" placeholder="Search something"></input>
+          </span>
+        </label>
+        <p className='basis-1/3 text-5xl text-red-500 hover:text-red-700 flex items-center md:items-end justify-between md:justify-center p-1 text-center font-thin' style={{fontFamily:'didot-w02-italic,serif', fontStyle:'oblique'}}>
+        <a href=''>Adalane.</a>
+        </p> 
+        <label className='basis-1/3 text-right hidden lg:inline-block'>
+          <button className='border border-transparent hover:border-black p-2'><i className="fa-solid fa-user mr-1.5"></i> Login</button>
+        </label>
+        <div onClick={() => setOpen(!open)} className='w-16 h-16 flex lg:hidden flex-col gap-3 justify-center items-center p-2 cursor-pointer'>
+          <i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["rotate-45 translate-y-2"]: open})}></i>
+          <i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["hidden"]: open })}></i>
+          <i className={clsx('relative w-full h-1 bg-black rounded-lg transition-all opacity-90 hover:opcacity-100',{["-rotate-45 -translate-y-2"]: open})}></i>
+        </div>
+      </div>
+      <div className={clsx('w-full bg-white py-6 transition-all lg:hidden',{['h-0 hidden']: !open })}>
+        <nav className='mx-auto w-full max-w-lg'>
+          <ul className='flex flex-col gap-6 justify-center items-center'>
+          <li className='cursor-pointer capitalize'>item 01</li>
+          <li className='cursor-pointer capitalize'>item 02</li>
+          <li className='cursor-pointer capitalize'>item 03</li>
+          <li className='cursor-pointer capitalize'>item 04</li>
+          <li className='cursor-pointer capitalize'>item 05</li>
+          </ul>
+        </nav>
+      </div>
+      <div className='w-full bg-white py-6 transition-all hidden lg:block'>
+        <nav className='mx-auto w-full max-w-lg'>
+          <ul className='flex flex-row gap-12 justify-center items-center'>
+          <li className='cursor-pointer capitalize'>item 01</li>
+          <li className='cursor-pointer capitalize'>item 02</li>
+          <li className='cursor-pointer capitalize'>item 03</li>
+          <li className='cursor-pointer capitalize'>item 04</li>
+          <li className='cursor-pointer capitalize'>item 05</li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    {/* <header className={`w-screen h-auto px-[50px] top-0 left-0 z-10 bg-white ${open?'-translate-y-[400px]':'translate-y-0'} fixed duration-300 overflow-x-hidden`}>
     <div className='w-full h-[5.5rem] flex flex-col md:flex-row justify-between items-center align-middle'>
       <div className='hidden md:block'>
         <label 
@@ -35,11 +73,6 @@ const Header = () => {
       </div>
       <div className='w-full h-full text-5xl text-red-500 hover:text-red-700 flex items-center md:items-end justify-between md:justify-center p-1 text-center font-thin' style={{fontFamily:'didot-w02-italic,serif', fontStyle:'oblique'}}>
         <a href=''>Adalane.</a>
-        <div onClick={() => setShowMenu(!showmenu)} className='relative w-16 h-16 flex md:hidden flex-col gap-3 py-3 px-1 items-center justify-center rounded-xl group'>
-            <div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'rotate-45 translate-y-2':'rotate-0'} transition-all duration-300`}></div>
-            <div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'hidden':'block'} transition-all duration-300`}></div>
-            <div className={`relative w-full h-1 bg-red-500 rounded-full group-hover:cursor-pointer ${showmenu?'-rotate-45 -translate-y-2':'rotate-0'} transition-all duration-300`}></div>
-        </div>
       </div>    
       <div className='hidden md:flex flex-shrink-0 flex-row gap-8 text-gray-400 justify-end items-center'>
       <a href=''><i className="fa-solid fa-bag-shopping"></i></a>
@@ -47,15 +80,8 @@ const Header = () => {
       <i className='fas fa-bars block text-xl'></i>
       </div>
     </div> 
-    <div className={`w-screen absolute top-[5.5rem] left-0 bg-white ${showmenu?'hidden -z-10':'block z-30' }`}>
-      <nav className='flex flex-col lg:flex-row justify-center items-center gap-10 lg:gap-20 text-gray-400'>
-        <a className='hover:text-gray-500' href=''>Home</a>
-        <a className='hover:text-gray-500' href='/products'>Shop All</a>
-        <a className='hover:text-gray-500' href=''>Our Story</a>
-        <a className='hover:text-gray-500' href=''>Contact</a>
-      </nav>
-    </div> 
-    </header>
+
+    </header> */}
   </>)
 }