diff --git a/db_app/src/App.js b/db_app/src/App.js
index 8167406..4e9096b 100644
--- a/db_app/src/App.js
+++ b/db_app/src/App.js
@@ -2,6 +2,7 @@ import "./App.css";
 import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
+import Plan from "./components/Plan";
 
 
 import {
@@ -21,6 +22,7 @@ function App() {
         <Route path='/' element={<Login/>}></Route>
         <Route path='/CreateAccount' element={<CreateAccount/>}></Route>
         <Route path='/Menus' element={<Menus/>}></Route>
+        <Route path='/Plan' element={<Plan/>}></Route>
       </Routes>
     </Router>
   );
diff --git a/db_app/src/components/CreateAccount.css b/db_app/src/components/CreateAccount.css
new file mode 100644
index 0000000..05d5750
--- /dev/null
+++ b/db_app/src/components/CreateAccount.css
@@ -0,0 +1,20 @@
+.bg {
+    position:fixed;
+     height: 100vh;
+     width: 100vw;
+    }
+    
+    .logbox {
+      background-color: rgba(255, 255, 255, 0.33);
+      padding: 15px;
+      margin-top:10vh;
+      margin-bottom:10vh;
+      margin-left:20vw;
+      margin-right:20vw;
+    }
+    
+    .formbox {
+      background-color: rgba(255, 255, 255, 0.6);
+      margin:10px;
+      padding:10px;
+    }
\ No newline at end of file
diff --git a/db_app/src/components/CreateAccount.js b/db_app/src/components/CreateAccount.js
index ca38f1f..9d20f31 100644
--- a/db_app/src/components/CreateAccount.js
+++ b/db_app/src/components/CreateAccount.js
@@ -1,7 +1,7 @@
 import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import Axios from 'axios';
-import './Login.css';
+import './CreateAccount.css';
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import TextField from "@mui/material/TextField";
@@ -12,6 +12,18 @@ import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import image from "./images/main_background.jpg"
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: lightGreen[700],
+    },
+  },
+});
+
 
 function CreateAccount() {
 
@@ -51,7 +63,10 @@ function CreateAccount() {
   };
   
     return (
-      <div>
+
+      <ThemeProvider theme={theme}>
+      <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
+      <div className='logbox'>
         <Box
         sx={{  
           marginTop: 8,
@@ -63,7 +78,7 @@ function CreateAccount() {
            <Typography component="h1" variant="h5">Create Account</Typography>
        
           
-        <form onSubmit={submitHandler}>
+        <form className='formbox' onSubmit={submitHandler}>
         <TextField
             margin="normal"
             required
@@ -134,6 +149,8 @@ function CreateAccount() {
       </Box>
       
       </div>
+      </div>
+      </ThemeProvider>
   
     );
   }
diff --git a/db_app/src/components/Menus.js b/db_app/src/components/Menus.js
index 19c8c25..32fdb8c 100644
--- a/db_app/src/components/Menus.js
+++ b/db_app/src/components/Menus.js
@@ -26,7 +26,9 @@ const theme = createTheme({
     palette: {
       primary: {
         main: lightGreen[700],
+        apple: red[500],
       },
+
     },
   });
 
@@ -38,9 +40,22 @@ function Menus() {
     <ThemeProvider theme={theme}>
     <AppBar position="static">
   <Toolbar variant="dense">
-    <Button variant="h6" color="inherit" component="div">
-      Photos
+  <Button  variant="h6" color="main" position="right">
+   Home</Button> 
+    <Button variant="h6" color="main" component="div">
+      Menus
     </Button>
+    <Button  variant="h6" >
+    Past Plans</Button> 
+    <Button variant="h6" color="main" component="div" sx={{
+    ':hover': {
+      bgcolor: '#ffc6c4', // theme.palette.primary.main
+      color: 'red',
+    },
+  }}>
+        Log out
+    </Button>
+   
   </Toolbar>
 </AppBar>
 </ThemeProvider>
diff --git a/db_app/src/components/Plan.js b/db_app/src/components/Plan.js
index 2153124..d48f7a5 100644
--- a/db_app/src/components/Plan.js
+++ b/db_app/src/components/Plan.js
@@ -1,6 +1,36 @@
 import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
 
 function MyPlan() {
 
@@ -10,32 +40,33 @@ function MyPlan() {
 		 navigate('/');
 	}
 
-  const [data,setData] = useState({
-    username:"",
-    password:"",
-    email:"",
-  })
   
-  const {username,password,email} = data;
-  
-  const changeHandler = e => {
-    setData({...data,[e.target.name]:[e.target.value]});
-  }
-  
-  const submitHandler = e => {
-    e.preventDefault();
-    console.log(data);
-  }
- 
   
     return (
+        <ThemeProvider theme={theme}>  
       <div>
-        <center>
-          <h1>My plan</h1>
-        
-    
-        </center>
+         <AppBar position="static">
+  <Toolbar variant="dense">
+  <Button  variant="h6" color="main" position="right">
+   Home</Button> 
+    <Button variant="h6" color="main" component="div">
+      Menus
+    </Button>
+    <Button  variant="h6" >
+    Past Plans</Button> 
+    <Button variant="h6" color="main" component="div" sx={{
+    ':hover': {
+      bgcolor: '#ffc6c4', // theme.palette.primary.main
+      color: 'red',
+    },
+  }}>
+        Log out
+    </Button>
+   
+  </Toolbar>
+</AppBar>
       </div>
+    </ThemeProvider>
   
     );
   }