diff --git a/src/webPages/logIn.css b/src/webPages/logIn.css
index fd55128..8a64c15 100644
--- a/src/webPages/logIn.css
+++ b/src/webPages/logIn.css
@@ -35,5 +35,8 @@
 .L5 { grid-area: L5; }
 .M5 { grid-area: M5; }
 .R5 { grid-area: R5; }
+.L7 { grid-area: L7; }
+.M7 { grid-area: M7; }
+.R7 { grid-area: R7; }
 
   
diff --git a/src/webPages/logIn.tsx b/src/webPages/logIn.tsx
index 948bbbc..3a98ac7 100644
--- a/src/webPages/logIn.tsx
+++ b/src/webPages/logIn.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { googleLogout, useGoogleLogin } from '@react-oauth/google';
@@ -5,6 +6,7 @@ import axios from 'axios';
 import "./logIn.css";
 import Button from "@mui/material/Button";
 import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
 import Typography from '@mui/material/Typography';
 
 interface User {
@@ -27,6 +29,14 @@ interface Profile {
     const navigate = useNavigate();
     const handleClick = () => navigate('/LoggedIn');
 
+    const [aboutOpen, setAboutOpen] = React.useState(false);
+    const handleAboutOpen = () => setAboutOpen(true);
+    const handleAboutClose = () => setAboutOpen(false);
+
+    const handleAbout = () => {
+        handleAboutOpen();
+    };
+
     const login = useGoogleLogin({
         onSuccess: (codeResponse) => setUser(codeResponse),
         onError: (error) => console.log('Login Failed:', error)
@@ -55,6 +65,18 @@ interface Profile {
         setProfile(null);
     };
 
+    const style = {
+        position: 'absolute' as 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 400,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
+
         return (
           <section className="layout">
             <div className="L1">
@@ -97,6 +119,22 @@ interface Profile {
                 </Button>
             </div>
 
+            <div className='M7'>
+                <Button onClick={handleAbout}>
+                    About
+                </Button>
+            </div>
+
+            <div>
+                    <Modal
+                        open={aboutOpen}
+                        onClose={handleAboutClose}
+                    >
+                        <Box sx={style}>
+                            About
+                        </Box>
+                    </Modal>
+            </div>
           </section>
         );
 
diff --git a/src/webPages/loggedIn.tsx b/src/webPages/loggedIn.tsx
index 2aff19f..189c0ba 100644
--- a/src/webPages/loggedIn.tsx
+++ b/src/webPages/loggedIn.tsx
@@ -1,6 +1,17 @@
+import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import Box from '@mui/material/Box';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+
+import DensitySmallSharpIcon from '@mui/icons-material/DensitySmallSharp';
+
 
   const LoggedIn = () => {
     const navigate = useNavigate();
@@ -8,12 +19,55 @@ import ButtonGroup from '@mui/material/ButtonGroup';
     const handleClickMech = () => navigate('/Mechanisms');
     const handleClickSettings = () => navigate('/Settings');
 
+    const [openDrawer, setOpenDrawer] = React.useState(false);
+    const toggleDrawer = (newOpenDrawer: boolean) => () => {
+      setOpenDrawer(newOpenDrawer);
+    };
+    const goHome = () => navigate('/LoggedIn');
+    const goFamily = () => navigate('/FamilyPage');
+    const goMech = () => navigate('/Mechanisms');
+    const goLogOut = () => navigate('/');
+
+    const DrawerList = (
+      <Box sx={{width: 250}} role="presentation" onClick={toggleDrawer(false)}>
+        <List>
+          <ListItem disablePadding>
+            <ListItemButton onClick={goHome}>
+              <ListItemText primary={"Home"} />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton onClick={goFamily}>
+              <ListItemText primary={"Families"} />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton onClick={goMech}>
+              <ListItemText primary={"Mechanisms"} />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton onClick={goLogOut}>
+              <ListItemText primary={"Log Out"} />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </Box>
+    );
+
     const style = {
       height: '75px',
       width: '500px',
     };
         return (
           <section className='layout'>
+
+            <div className='L1'>
+              <Button onClick={toggleDrawer(true)}>
+                <DensitySmallSharpIcon sx={{fontSize: 50}}></DensitySmallSharpIcon>
+              </Button>
+            </div>
+
             <div className="M4">
               <ButtonGroup orientation='vertical' variant='contained'>
                 <Button sx={style} onClick={handleClickFam}>
@@ -29,7 +83,16 @@ import ButtonGroup from '@mui/material/ButtonGroup';
                 </Button>
               </ButtonGroup>
             </div>
+            
+            <div>
+              <Drawer
+              open={openDrawer} onClose={toggleDrawer(false)}
+              >
+                {DrawerList}
+              </Drawer>
+            </div>
           </section>
+          
         );
 
     }