diff --git a/package-lock.json b/package-lock.json
index 58c0ebb..8d48100 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@emotion/styled": "^11.13.0",
         "@fontsource/roboto": "^5.0.14",
         "@mui/icons-material": "^5.16.6",
-        "@mui/material": "^5.16.6",
+        "@mui/material": "^5.16.7",
         "@react-spring/web": "^9.7.4",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -3354,9 +3354,9 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz",
-      "integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -3388,13 +3388,13 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz",
-      "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
+      "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/core-downloads-tracker": "^5.16.6",
-        "@mui/system": "^5.16.6",
+        "@mui/core-downloads-tracker": "^5.16.7",
+        "@mui/system": "^5.16.7",
         "@mui/types": "^7.2.15",
         "@mui/utils": "^5.16.6",
         "@popperjs/core": "^2.11.8",
@@ -3494,9 +3494,9 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz",
-      "integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==",
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
+      "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/private-theming": "^5.16.6",
diff --git a/package.json b/package.json
index 64a5f23..d12b1dd 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.0.14",
     "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.6",
+    "@mui/material": "^5.16.7",
     "@react-spring/web": "^9.7.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
diff --git a/src/App.js b/src/App.js
index 3ead7db..5656bca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,14 @@
 import logo from './logo.svg';
 import Navbar from './Components/navbar.js';
+import { ThemeContextProvider } from './themeContextProvider';
+import { darkTheme, lightTheme } from './theme'; // Import your custom theme
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
+    <ThemeContextProvider theme={lightTheme}>
       <Navbar />
-    </div>
+    </ThemeContextProvider>
   );
 }
 
diff --git a/src/Components/navbar.js b/src/Components/navbar.js
index 485fa80..c871c00 100644
--- a/src/Components/navbar.js
+++ b/src/Components/navbar.js
@@ -1,33 +1,61 @@
 import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import InputGroup from 'react-bootstrap/InputGroup';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
+import Box from '@mui/material/Box';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import { Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import IconButton from '@mui/material/IconButton';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import AssignmentIndTwoToneIcon from '@mui/icons-material/AssignmentIndTwoTone';
+import { useTheme, useMediaQuery } from '@mui/material';
+import { useThemeContext } from '../themeContextProvider';
+
+function ThemeToggleButton() {
+    const { mode, toggleTheme } = useThemeContext();
+    const theme = useTheme();
+  
+    return (
+        <IconButton onClick={toggleTheme} sx={{color: theme.palette.accent.main}}>
+            {mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+        </IconButton>
+    );
+};
 
 export default function NavbarComponent() {
+    const theme = useTheme();
+
+    const navbarBgColor = theme.palette.primary.main;
+
     return (
-        <>
-        <Navbar bg="dark" variant="dark" style={{ zIndex: 1000 }}>
-            <Container direction="horizontal">
-                <Navbar.Brand href='#home' className="mx-2"> {/* logo goes here */}</Navbar.Brand>
-                <Form className="d-flex mx-2">
-                    <InputGroup>
-                        <Form.Control
-                            placeholder="search"
-                            aria-label='search'
-                            aria-describedby='search' />
-                    </InputGroup>
-                </Form>
-                <Nav className="d-flex align-items-center">
-                    <Nav.Link href="#tasks" className="mx-2">Tasks</Nav.Link>
-                    <Nav.Link href="#schedule" className="mx-2">Schedule</Nav.Link>
-                </Nav>
-                
-            </Container>
-        </Navbar>
-        </>
+        <Box>
+            <AppBar position="fixed" sx={{
+                justifyContent: "center",
+                zIndex: (theme) => theme.zIndex.drawer + 1, 
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center',
+                backgroundColor: navbarBgColor,
+                boxShadow: 'none',
+                backdropFilter: 'blur(10px)', // Blur effect
+                WebkitBackdropFilter: 'blur(10px)', // safari compatibility
+            }}>
+                <Toolbar sx={{width: '90%', display: 'flex', justifyContent: 'space-between'}}>
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                        <Link to="/" sx={{textDecoration: 'none'}}><AssignmentIndTwoToneIcon sx={{ color: theme.palette.accent.main }}/></Link>
+                    </Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                        <Link>
+                            <Button sx={{ mx: 1, textTransform: 'none', color: theme.palette.accent.main }} disableElevation>tasks</Button>
+                        </Link>
+                        <Link>
+                            <Button sx={{ mx: 1, textTransform: 'none', color: theme.palette.accent.main }} disableElevation>schedule</Button>
+                        </Link>
+                        <ThemeToggleButton />
+                    </Box>
+                </Toolbar>
+            </AppBar>
+        </Box>
     );
 }
\ No newline at end of file
diff --git a/src/themeContextProvider.js b/src/themeContextProvider.js
new file mode 100644
index 0000000..d83af8d
--- /dev/null
+++ b/src/themeContextProvider.js
@@ -0,0 +1,28 @@
+import React, { createContext, useMemo, useState, useContext } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { lightTheme, darkTheme } from './theme';
+
+// Create a context for the theme
+const ThemeContext = createContext();
+
+export const useThemeContext = () => useContext(ThemeContext);
+
+export const ThemeContextProvider = ({ children }) => {
+    const [mode, setMode] = useState('light');
+
+    const toggleTheme = () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+    };
+
+    const theme = useMemo(() => (mode === 'light' ? createTheme(lightTheme) : createTheme(darkTheme)), [mode]);
+
+    return (
+        <ThemeContext.Provider value={{ mode, toggleTheme }}>
+            <ThemeProvider theme={theme}>
+                <CssBaseline />
+                {children}
+            </ThemeProvider>
+        </ThemeContext.Provider>
+    );
+};
\ No newline at end of file