diff --git a/src/components/HomePage/About/About.js b/src/components/HomePage/About/About.js
index d464df9..a808825 100644
--- a/src/components/HomePage/About/About.js
+++ b/src/components/HomePage/About/About.js
@@ -10,14 +10,18 @@ export default function About () {
   const { aboutToggle, setAboutToggle } = useGlobalContext();
   return(
     <Box className='about'>
-      <h1>About</h1>
-      <div style={{marginRight: '5%', marginLeft: '5%'}}>
+      <h1 style={{marginTop: 0, paddingTop: '5%'}}>About</h1>
+      <div style={{marginRight: '10%', marginLeft: '10%'}}>
+        <p><em>ELEET-TRACKER</em> is a service that has your future in mind. We know you are well on your way to become the best Software Engineer you can be, and we're here for you. We bring to you a service that allows you to track, record, and analyze your performance on the leetcode problems you attempt, so you can see how you stack up against the fiercest competition out there - yourself.</p>
+        <br/>
+        <br/>
+        <br/>
         <p>
-          Darwin&trade;'s history can be dated back to the late 19th Century, to our CEO Leon Must&trade;'s great-great-great-great grandfather, Charles Darwin. Since then, the tradition of greatness has been incultated with each generation - and this is where you come in. Leon Must&trade; believes in the potential of each and every one of you. Darwin&trade; is in the business of pushing humanity together to reach an intellectual higher ground, together.
+          Darwin&trade;'s history can be dated back to the late 19th Century, to our CEO Leon Must&trade;'s great-great-great-great grandfather, Charles Darwin. Since then, the tradition of greatness has been inculcated with each generation - and this is where you come in. Leon Must&trade; believes in the potential of each and every one of you. Darwin&trade; is in the business of pushing humanity together to reach an intellectual higher ground, together.
         </p>
       </div>
       <Button
-        sx={{backgroundColor: '#272727'}}
+        sx={{backgroundColor: '#272727', position: 'relative', top: '10%'}}
           variant='contained'
           type='button'
           size='large'
diff --git a/src/components/HomePage/HomeGraphs/AreaGraph.js b/src/components/HomePage/HomeGraphs/AreaGraph.js
index 2539244..71d776a 100644
--- a/src/components/HomePage/HomeGraphs/AreaGraph.js
+++ b/src/components/HomePage/HomeGraphs/AreaGraph.js
@@ -4,7 +4,12 @@ import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import moment from 'moment';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Area() {
 
@@ -17,6 +22,9 @@ export default function Area() {
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
   const [legend, setLegend]=React.useState([]);
+
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
+
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
   };
@@ -423,11 +431,22 @@ if ( graph==='totalTime'&&selection==='difficulty') {
     }
 
 return (
-  <Stack>
-     <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+  <Stack style={{height: '605px'}}>
+     <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
       <ReactEcharts option={option} />
     </Box>
+    <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+        <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+        </div>
+      </Container>
+    <Collapse in={toggleGraphMenu}>
+
     <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+    </Collapse>
 
   </Stack>
 )
diff --git a/src/components/HomePage/HomeGraphs/BarGraph.js b/src/components/HomePage/HomeGraphs/BarGraph.js
index 552063e..9346764 100644
--- a/src/components/HomePage/HomeGraphs/BarGraph.js
+++ b/src/components/HomePage/HomeGraphs/BarGraph.js
@@ -3,7 +3,14 @@ import React from "react";
 import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
+
+
 
 export default function Bar() {
   const { userProblemArray } = useGlobalContext();
@@ -15,6 +22,7 @@ export default function Bar() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const getLastDate = (x)=> {
     const now = new Date();
@@ -149,29 +157,39 @@ export default function Bar() {
     ]
   }
   return (
-    <Stack >
-      <Box sx={{ '&:hover':{boxShadow:5},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor: "#1A2027", borderRadius: 4, padding: 3}}>
+    <Stack style={{height: '605px'}}>
+      <Box sx={{ '&:hover':{boxShadow:5},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor: "#1A2027", borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
         <ReactEcharts option={option} />
       </Box>
-      <MenuBar
-        graph={graph}
-        subject= {subject}
-        selection={selection}
-        time={time}
-        range={range}
-        language={language}
-        setGraph={setGraph}
-        setSelection={setSelection}
-        handleSubject={(e) => setSubject(e.target.value)}
-        handleRange={(e) => setRange(e.target.value)}
-        handleLanguage={(e) => setLanguage(e.target.value)}
-        handleTime={(e) => setTime(e.target.value)}
-        handleGraph={(e) => setGraph(e.target.value)}
-        handleSelection={(e) => {
-          setSelection(e.target.value);
-          setSubject([]);
-        }}
-      />
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+      <div style={{display: 'flex', justifyContent: 'center'}}>
+         <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+     </div>
+      </Container>
+      <Collapse in={toggleGraphMenu}>
+        <MenuBar
+          graph={graph}
+          subject= {subject}
+          selection={selection}
+          time={time}
+          range={range}
+          language={language}
+          setGraph={setGraph}
+          setSelection={setSelection}
+          handleSubject={(e) => setSubject(e.target.value)}
+          handleRange={(e) => setRange(e.target.value)}
+          handleLanguage={(e) => setLanguage(e.target.value)}
+          handleTime={(e) => setTime(e.target.value)}
+          handleGraph={(e) => setGraph(e.target.value)}
+          handleSelection={(e) => {
+            setSelection(e.target.value);
+            setSubject([]);
+          }}
+        />
+      </Collapse>
     </Stack>
   )
 }
\ No newline at end of file
diff --git a/src/components/HomePage/HomeGraphs/DonutGraph.js b/src/components/HomePage/HomeGraphs/DonutGraph.js
index 79ff8f3..bbf2970 100644
--- a/src/components/HomePage/HomeGraphs/DonutGraph.js
+++ b/src/components/HomePage/HomeGraphs/DonutGraph.js
@@ -5,7 +5,12 @@ import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import data from  './sampleData.js';
 import axios from 'axios';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 
 export default function Donut() {
@@ -20,6 +25,7 @@ export default function Donut() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
@@ -270,11 +276,30 @@ setInput([{value:easy, name:'easy'},{value:medium,name:'medium'},{value:hard,nam
     ]
   };
 return (
-  <Stack>
-    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1, mb:2,backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
-      <ReactEcharts option={option} />
-    </Box>
-    <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
-  </Stack>
+  // <Stack>
+  //   <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1, mb:2,backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
+  //     <ReactEcharts option={option} />
+  //   </Box>
+  //   <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+  // </Stack>
+  <Stack style={{height: '605px'}}>
+  <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
+   <ReactEcharts option={option} />
+ </Box>
+ <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+     <div style={{display: 'flex', justifyContent: 'center'}}>
+     <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+     {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+     </IconButton>
+     <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+     </div>
+   </Container>
+ <Collapse in={toggleGraphMenu}>
+
+ <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+ </Collapse>
+
+</Stack>
+
 )
 }
\ No newline at end of file
diff --git a/src/components/HomePage/HomeGraphs/Graphs.js b/src/components/HomePage/HomeGraphs/Graphs.js
index ce32692..d28b2b9 100644
--- a/src/components/HomePage/HomeGraphs/Graphs.js
+++ b/src/components/HomePage/HomeGraphs/Graphs.js
@@ -9,6 +9,7 @@ import TextField from '@mui/material/TextField';
 import styled from "styled-components";
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 
 const StyledInput = styled(TextField)`
 width: 100%;
@@ -39,7 +40,7 @@ export default function Graphs() {
       <FormControl
         required
         size="small"
-        sx={{ m:1, mt:3, ml:45, width:'140px'}}
+        sx={{ m:1, mt:10, ml:45, width:'140px'}}
       >
           <StyledInput
             color="success"
@@ -68,7 +69,7 @@ export default function Graphs() {
       <FormControl
         required
         size="small"
-        sx={{ m:1, mt:3, ml:45, width:'140px'}}
+        sx={{ m:1, mt:10, ml:45, width:'140px'}}
       >
           <StyledInput
             color="success"
diff --git a/src/components/HomePage/HomeGraphs/LineGraph.js b/src/components/HomePage/HomeGraphs/LineGraph.js
index 6d93c1f..bc9613d 100644
--- a/src/components/HomePage/HomeGraphs/LineGraph.js
+++ b/src/components/HomePage/HomeGraphs/LineGraph.js
@@ -4,7 +4,12 @@ import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import moment from 'moment';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Line() {
 
@@ -17,6 +22,7 @@ export default function Line() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const getLastDate = (x)=> {
     const now = new Date();
@@ -278,10 +284,19 @@ if (graph === 'totalTime' && selection === 'difficulty') {
 
   }
   return (
-    <Stack>
-      <Box sx={{ '&:hover':{boxShadow:3},  width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+    <Stack style={{height: '605px'}}>
+      <Box sx={{ '&:hover':{boxShadow:3},  width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027',borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
         <ReactEcharts option={option} />
       </Box>
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+          <IconButton  sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+            {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+           </IconButton>
+       <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+      </div>
+      </Container>
+      <Collapse in={toggleGraphMenu}>
       <MenuBar
         graph={graph}
         setGraph={setGraph}
@@ -301,6 +316,9 @@ if (graph === 'totalTime' && selection === 'difficulty') {
           setSubject([]);
         }}
       />
+      </Collapse>
+
   </Stack>
+
   )
 };
\ No newline at end of file
diff --git a/src/components/HomePage/HomeGraphs/MenuBar.js b/src/components/HomePage/HomeGraphs/MenuBar.js
index fd6699c..593feb3 100644
--- a/src/components/HomePage/HomeGraphs/MenuBar.js
+++ b/src/components/HomePage/HomeGraphs/MenuBar.js
@@ -11,7 +11,8 @@ import styled from "styled-components";
 import RadioGroup from '@mui/material/RadioGroup';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import ListItemText from '@mui/material/ListItemText';
-
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
 
 const StyledInput = styled(TextField)`
 width: 100%;
@@ -41,6 +42,9 @@ export default function CheckboxesGroup({graph, setGraph, subject,handleSubject,
   return (
 
       <Box sx={{ display: 'flex', justifyContent: 'center',border:'2px solid #eab464', borderRadius: '5px', '&:hover':{boxShadow:5 },width:'500px', ml:4, mr:4, mt:0.1}}>
+        {/* <Container>
+         <Typography>Hi</Typography>
+        </Container> */}
         <FormControl sx={{mt:3, width:'140px'}} component="fieldset" variant="standard">
           <RadioGroup
             aria-label ledby="demo-radio-buttons-group-label"
@@ -112,10 +116,10 @@ export default function CheckboxesGroup({graph, setGraph, subject,handleSubject,
               size="small"
               select
             >
-              <MenuItem value={'read prompt'} >read prompt</MenuItem>
-              <MenuItem value={'whiteboard'} >whiteboard</MenuItem>
-              <MenuItem value={'pseudocode'} >pseudocode</MenuItem>
-              <MenuItem value={'write code'} >write code</MenuItem>
+              <MenuItem value={'read prompt'} disabled>read prompt</MenuItem>
+              <MenuItem value={'whiteboard'} disabled>whiteboard</MenuItem>
+              <MenuItem value={'pseudocode'} disabled>pseudocode</MenuItem>
+              <MenuItem value={'write code'} disabled>write code</MenuItem>
               <MenuItem value={'whole process'} >whole process</MenuItem>
             </StyledInput>
           </FormControl>
diff --git a/src/components/HomePage/HomeGraphs/PieGraph.js b/src/components/HomePage/HomeGraphs/PieGraph.js
index d848e6d..0252297 100644
--- a/src/components/HomePage/HomeGraphs/PieGraph.js
+++ b/src/components/HomePage/HomeGraphs/PieGraph.js
@@ -6,6 +6,11 @@ import MenuBar from './MenuBar.js';
 import data from  './sampleData.js';
 import axios from 'axios';
 import useGlobalContext from '../../../context/GlobalContext.js'
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Pie() {
   const { userProblemArray } = useGlobalContext();
@@ -18,6 +23,9 @@ export default function Pie() {
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
 
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
+
+
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
   };
@@ -264,13 +272,26 @@ const option = {
     }
   ]
 };
+
+
+
 return (
-  <Stack>
-    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px',  ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+  <Stack style={{height: '605px'}}>
+    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027',borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
       <ReactEcharts option={option} />
     </Box>
-    <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+        <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+        </div>
 
+      </Container>
+      <Collapse in={toggleGraphMenu}>
+      <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+      </Collapse>
   </Stack>
 )
 }
\ No newline at end of file
diff --git a/src/styles/pageLayout.css b/src/styles/pageLayout.css
index 64695c5..cfc8117 100644
--- a/src/styles/pageLayout.css
+++ b/src/styles/pageLayout.css
@@ -27,8 +27,8 @@
   bottom: 0;
   top: 0;
   margin-top: 0;
-  height: 80vh;
-  background: url('../assets/Darwin_Logo_transparent.png') no-repeat right bottom, radial-gradient(circle at 50% 50%, rgb(107, 120, 152), rgb(0, 0, 0), rgb(0, 0, 0));
+  height: 60vh;
+  background: url('../assets/Darwin_Logo_transparent.png') no-repeat center , radial-gradient(circle at 50% 50%, rgb(107, 120, 152), rgb(0, 0, 0), rgb(0, 0, 0));
   background-size: 10%, auto;
   opacity: 0.2, auto;
 }