Fixed Filter container position

01-frontend/src/helper/NavBar.css

@@ -4,7 +4,7 @@
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     position: absolute;
     top: 0;
-    height: 3rem;
+    width: 100%;
 }
 
 /* Logo styles */

01-frontend/src/helper/NavBar.tsx

@@ -15,6 +15,7 @@ import AdbIcon from '@mui/icons-material/Adb';
 import { alpha, InputBase, styled } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
+import './navbar.css';
 
 const pages = ['Categories', 'Checkout', 'Contact'];
 const settings = ['Account', 'Orders', 'Logout'];
@@ -85,10 +86,10 @@ export default function NavBar() {
 
 
     return (
-        <AppBar sx={{bgcolor: 'green'}}>
+        <AppBar className="navbar">
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
-                    <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1, color: 'white' }} />
+                    <AdbIcon className='navbar-logo' />
                     <Typography
                         variant="h6"
                         noWrap

01-frontend/src/pages/pages.css

@@ -32,14 +32,14 @@
 .no-page-button {
   font-size: 1rem;
   padding: 12px 24px;
-  background-color: #1976d2;
+  background-color: primary;
   color: white;
   border-radius: 8px;
   transition: background-color 0.3s ease;
 }
 
 .no-page-button:hover {
-  background-color: #115293;
+  background-color: primary;
 }
 
 .cardgrid {
@@ -131,8 +131,13 @@
 }
 
 .filter-container {
-    width: 10%;
+    width: 17%;
     display: grid;
     margin-left: 20px;
     margin-right: -20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    place-self: start;
+
+
 }