diff --git a/src/App.tsx b/src/App.tsx
index 371756d..2d36b0e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ import {
   SidebarUserObj,
 } from "./components/sidebar/SidebarUser";
 import MeetingDetails from "./components/meeting-details/MeetingDetails";
+import { Box } from "@mui/material";
 
 const App: React.FC = () => {
   const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
@@ -49,16 +50,22 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={Theme}>
       <Router>
-        <Sidebar users={sidebarUsers} />
         <Navbar />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route
-            path="/contacts"
-            element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
-          />
-          <Route path="/calendar" element={<Calendar />} />
-        </Routes>
+        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Box sx={{ flexGrow: 1 }}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route
+                path="/contacts"
+                element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
+              />
+              <Route path="/calendar" element={<Calendar />} />
+            </Routes>
+          </Box>
+          <Box>
+            <Sidebar users={sidebarUsers} />
+          </Box>
+        </Box>
         <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>
diff --git a/src/components/contacts/contacts-components/body-components/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
index 6d808a3..18ead7a 100644
--- a/src/components/contacts/contacts-components/body-components/UpperBody.tsx
+++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx
@@ -5,7 +5,6 @@ import VideocamIcon from "@mui/icons-material/Videocam";
 import GroupsIcon from "@mui/icons-material/Groups";
 import ContactInfo from "../../ContactInfo";
 import AddIcon from "@mui/icons-material/Add";
-import { textAlign } from "@mui/system";
 
 interface Props {
   contactInfo: ContactInfo;
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index da75841..c50a231 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -5,16 +5,16 @@ import Grid from "@mui/material/Grid";
 
 const Home: React.FC = () => {
   return (
-        <Container className="main-home">
-          <Grid container>
-            <Grid item sm={8}>
-              <MeetingsPanel />
-            </Grid>
-            <Grid item sm={4}>
-              <ShortCuts />
-            </Grid>
-          </Grid>
-        </Container>
+    <Container className="main-home">
+      <Grid container>
+        <Grid item sm={8}>
+          <MeetingsPanel />
+        </Grid>
+        <Grid item sm={4}>
+          <ShortCuts />
+        </Grid>
+      </Grid>
+    </Container>
   );
 };
 
diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index 4c4771a..eba7669 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,17 +1,21 @@
-function Meeting(props: any) {
-    return (
+interface Props {
+  meetingName: string;
+  meetingTime: string;
+}
 
-        <div className="row meeting">
-            <div className="col-12">
-                <div className="row">
-                <label>{props.meetingName}</label>
-                </div>
-                <div className="row">
-                <label>{props.meetingTime}</label>
-                </div>
-            </div>
+function Meeting(props: Props) {
+  return (
+    <div className="row meeting">
+      <div className="col-12">
+        <div className="row">
+          <label>{props.meetingName}</label>
         </div>
-    );
-  };
-  
-  export default Meeting;  
\ No newline at end of file
+        <div className="row">
+          <label>{props.meetingTime}</label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Meeting;
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 56f5042..7a310a8 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -1,19 +1,19 @@
 import Meeting from "./Meeting";
 
 const MeetingsPanel: React.FC = () => {
-    return (
-        <div className="meetings-panel">
-            <div className="row current-time">
-            <label>10:34 AM</label>
-            </div>
-            <div className="row current-date">
-            <label>Sunday, 03 Feb 2022</label>
-            </div>
+  return (
+    <div className="meetings-panel">
+      <div className="row current-time">
+        <label>10:34 AM</label>
+      </div>
+      <div className="row current-date">
+        <label>Sunday, 03 Feb 2022</label>
+      </div>
 
-            <Meeting meetingName="first meeting" meetingTime="time" />
-            <Meeting meetingName="second meeting" meetingTime="time" />
-        </div>
-    );
-  };
+      <Meeting meetingName="first meeting" meetingTime="time" />
+      <Meeting meetingName="second meeting" meetingTime="time" />
+    </div>
+  );
+};
   
-  export default MeetingsPanel;  
\ No newline at end of file
+export default MeetingsPanel;  
\ No newline at end of file
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index 2ea7277..61afba9 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -1,43 +1,43 @@
-import PeopleIcon from '@mui/icons-material/People';
-import AddIcon from '@mui/icons-material/Add';
-import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
-import CircleIcon from '@mui/icons-material/Circle';
+import PeopleIcon from "@mui/icons-material/People";
+import AddIcon from "@mui/icons-material/Add";
+import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
+import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 
 const ShortCuts: React.FC = () => {
-    return (
-        <div className="short-cuts" >
-            <Grid className="row-1" container spacing={1}>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <PeopleIcon className="icon" />
-                    </Button>
-                    <label>New Meeting</label>
-                </Grid>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <AddIcon className="icon" />
-                    </Button>
-                    <label>Join</label>
-                </Grid>
-            </Grid>
-            <Grid className="row-2" container spacing={1}>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <PhoneEnabledIcon className="icon" />
-                    </Button>
-                    <label>Call Favourites</label>
-                </Grid>
-                <Grid item sm={6}>
-                    <Button className="tile">
-                        <CircleIcon className="icon" />
-                    </Button>
-                    <label>Recordings</label>
-                </Grid>
-            </Grid>
-        </div>
-    );
-  };
+  return (
+    <div className="short-cuts" >
+      <Grid className="row-1" container spacing={1}>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <PeopleIcon className="icon" />
+          </Button>
+          <label>New Meeting</label>
+        </Grid>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <AddIcon className="icon" />
+          </Button>
+          <label>Join</label>
+        </Grid>
+      </Grid>
+      <Grid className="row-2" container spacing={1}>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <PhoneEnabledIcon className="icon" />
+          </Button>
+          <label>Call Favourites</label>
+        </Grid>
+        <Grid item sm={6}>
+          <Button className="tile">
+            <CircleIcon className="icon" />
+          </Button>
+          <label>Recordings</label>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
   
-  export default ShortCuts;
\ No newline at end of file
+export default ShortCuts;
\ No newline at end of file
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index ba95b2e..4da970e 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -1,11 +1,11 @@
 import Container from "@mui/material/Container";
 
 const Login: React.FC = () => {
-    return (
-        <Container className="login">
+  return (
+    <Container className="login">
             Login
-        </Container>
-    );
-  };
+    </Container>
+  );
+};
   
-  export default Login;
\ No newline at end of file
+export default Login;
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 08cb47b..8a544bb 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,13 +1,20 @@
-import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
+import {
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListSubheader,
+  Toolbar,
+} from "@mui/material";
 import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
 // TODO: toolbar on top of sidebar since it goes under the navbar
 
-const drawerWidth = 240;
+const drawerWidth = 200;
 
 interface Props {
-  users: SidebarUserObj[],
+  users: SidebarUserObj[];
 }
 
 const Sidebar: React.FC<Props> = ({ users }: Props) => {
@@ -15,22 +22,21 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
     <Drawer
       sx={{
         width: drawerWidth,
-        flexShrink: 0,
         "& .MuiDrawer-paper": {
           width: drawerWidth,
-          boxSizing: "border-box",
         },
       }}
       variant="permanent"
       anchor="right"
     >
+      <Toolbar />
       <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
           <GroupSelect />
         </ListSubheader>
         {users.map((user) => (
           <ListItem disablePadding key={user.id}>
-            <SidebarUser user={user} /> 
+            <SidebarUser user={user} />
           </ListItem>
         ))}
       </List>
@@ -39,4 +45,4 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
   );
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;