fix navbar

src/components/Navbar/Navbar.jsx

   },
   {
     title: "HOME",
-    link: "/",
+    link: "/products",
     icon: <HomeIcon />
   },
   {
     title: "BEAUTY",
     link: "/products",
     icon: <BrushIcon />
-  },
-  {
-    title: "SALE",
-    link: "/products",
-    icon: <LoyaltyIcon />
   }
 ]
 
       <AppBar position="fixed"
         sx={{
           backgroundColor: {
-            xs: showHeader ? "rgba(0,0,0,0)" : "background.black",// somehow the logic for scrolling header is the same so I just gonna use showHeader state
+            xs: "background.black",
             md: "rgba(0,0,0,0.9)",
             lg: "background.black"
           },
               lg: "block"
             }
           }}>
-            <img src={logoSrc} alt="Logo"
-              style={{
-                width: 150,
-                height: 50,
-              }} />
+            <a href="/">
+              <img src={logoSrc} alt="Logo"
+                style={{
+                  width: 150,
+                  height: 50,
+                }} />
+            </a>
           </Box>
 
           {/* SIDEBAR BUTTON */}

src/components/Navbar/components/MobileNav/MobileNav.jsx

           height: 80,
         }}
       >
-        <img
-          src={logoSrc}
-          alt="Logo"
-          style={{
-            width: 150,
-            height: 50,
-          }}
-        />
+        <a href="/">
+          <img
+            src={logoSrc}
+            alt="Logo"
+            style={{
+              width: 150,
+              height: 50,
+            }}
+          />
+        </a>
+
       </Box>
 
       {/* Main Navigation */}
       <Box sx={{ width: 250 }} role="presentation">
         <List>
-          {menu.map(({title, link, icon}) => (
+          {menu.map(({ title, link, icon }) => (
             <ListItem key={title} disablePadding>
               <ListItemButton
-                onClick={()=>{window.location.href = link }}
+                onClick={() => { window.location.href = link }}
                 sx={{
                   color: "white",
                   "&:hover": {
                 }}
               >
                 {icon}
-                <ListItemText sx={{ml:2}} primary={title} />
+                <ListItemText sx={{ ml: 2 }} primary={title} />
               </ListItemButton>
             </ListItem>
           ))}

src/components/ProductList/ProductList.jsx

             }}
           />
 
-          <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+          {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
             NEW
-          </Button>
+          </Button> */}
 
           <Box sx={{ py: 5 }}>
             <Typography variant="body2" >

src/components/ProductSelected/ProductSelected.jsx

               }}
             />
 
-            <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
               NEW
-            </Button>
+            </Button> */}
 
             <Box sx={{ py: 5 }}>
               <Typography variant="body2" >