diff --git a/frontend/src/components/Customer/CustomerMenu.tsx b/frontend/src/components/Customer/CustomerMenu.tsx
index 306555f..5a4e4b0 100644
--- a/frontend/src/components/Customer/CustomerMenu.tsx
+++ b/frontend/src/components/Customer/CustomerMenu.tsx
@@ -1,5 +1,4 @@
 import {
-  AppBar,
   Box,
   Button,
   Card,
@@ -9,39 +8,12 @@ import {
   Container,
   CssBaseline,
   Grid,
-  Toolbar,
   Typography
 } from '@mui/material';
-import RestaurantMenuTwoToneIcon from '@mui/icons-material/RestaurantMenuTwoTone';
-import { Link } from 'react-router-dom';
 import React, { useEffect } from 'react';
-
-const donutImages = {
-  'Apple Krumb': require('../../assets/apple_krumb.jpeg'),
-  'Bavarian Kreme': require('../../assets/bavarian_kreme.jpeg'),
-  Blueberry: require('../../assets/blueberry.jpeg'),
-  'Boston Kreme': require('../../assets/boston_kreme.jpeg'),
-  'Chocolate Frosted': require('../../assets/chocolate_frosted.jpeg'),
-  'Chocolate Glaze': require('../../assets/chocolate_glaze.jpeg'),
-  'Cinnamon Sugar': require('../../assets/cinnamon_sugar.jpeg'),
-  'Marble Frosted': require('../../assets/marble_frosted.jpeg'),
-  'Old Fashioned': require('../../assets/old_fashioned.jpeg'),
-  'Original Glaze': require('../../assets/original_glaze.jpeg'),
-  'Powdered Sugar': require('../../assets/powdered_sugar.jpeg'),
-  'Sour Cream': require('../../assets/sour_cream.jpeg'),
-  'Strawberry Frosted': require('../../assets/strawberry_frosted.jpeg'),
-  'Vanilla Frosted': require('../../assets/vanilla_frosted.jpeg'),
-  Coconut: require('../../assets/coconut.jpeg'),
-  Cruller: require('../../assets/cruller.jpeg'),
-  Jelly: require('../../assets/jelly.jpeg'),
-  'Chocolate Kreme': require('../../assets/chocolate_kreme.jpeg')
-};
-
-export interface Donut {
-  id: string;
-  flavor: string;
-  price: number;
-}
+import { Link } from 'react-router-dom';
+import DonutInterface from '../Dronut/Donut';
+import { donutImages } from '../Dronut/donutImages';
 
 function Copyright() {
   return (
@@ -57,7 +29,7 @@ function Copyright() {
 }
 
 function Menu() {
-  const [donuts, setDonuts] = React.useState<Array<Donut>>([]);
+  const [donuts, setDonuts] = React.useState<Array<DonutInterface>>([]);
 
   async function fetchDonuts() {
     try {
@@ -78,7 +50,7 @@ function Menu() {
         {/* End hero unit */}
         <Grid container spacing={4}>
           {donuts.map((donut) => (
-            <Grid item key={donut.id} xs={12} sm={6} md={4}>
+            <Grid item key={donut._id} xs={12} sm={6} md={4}>
               <Card
                 sx={{
                   height: '100%',
diff --git a/frontend/src/components/Drone/Drone.tsx b/frontend/src/components/Drone/Drone.tsx
new file mode 100644
index 0000000..001a962
--- /dev/null
+++ b/frontend/src/components/Drone/Drone.tsx
@@ -0,0 +1,5 @@
+export default interface DroneInterface {
+  _id: string;
+  battery_life: number;
+  critcal: false;
+}
diff --git a/frontend/src/components/Dronut/Donut.tsx b/frontend/src/components/Dronut/Donut.tsx
new file mode 100644
index 0000000..4ddc846
--- /dev/null
+++ b/frontend/src/components/Dronut/Donut.tsx
@@ -0,0 +1,5 @@
+export default interface DonutInterface {
+  _id: string;
+  flavor: string;
+  price: number;
+}
diff --git a/frontend/src/components/Dronut/donutImages.tsx b/frontend/src/components/Dronut/donutImages.tsx
new file mode 100644
index 0000000..62bd450
--- /dev/null
+++ b/frontend/src/components/Dronut/donutImages.tsx
@@ -0,0 +1,20 @@
+export var donutImages = {
+  'Apple Krumb': require('../../assets/apple_krumb.jpeg'),
+  'Bavarian Kreme': require('../../assets/bavarian_kreme.jpeg'),
+  Blueberry: require('../../assets/blueberry.jpeg'),
+  'Boston Kreme': require('../../assets/boston_kreme.jpeg'),
+  'Chocolate Frosted': require('../../assets/chocolate_frosted.jpeg'),
+  'Chocolate Glaze': require('../../assets/chocolate_glaze.jpeg'),
+  'Cinnamon Sugar': require('../../assets/cinnamon_sugar.jpeg'),
+  'Marble Frosted': require('../../assets/marble_frosted.jpeg'),
+  'Old Fashioned': require('../../assets/old_fashioned.jpeg'),
+  'Original Glaze': require('../../assets/original_glaze.jpeg'),
+  'Powdered Sugar': require('../../assets/powdered_sugar.jpeg'),
+  'Sour Cream': require('../../assets/sour_cream.jpeg'),
+  'Strawberry Frosted': require('../../assets/strawberry_frosted.jpeg'),
+  'Vanilla Frosted': require('../../assets/vanilla_frosted.jpeg'),
+  Coconut: require('../../assets/coconut.jpeg'),
+  Cruller: require('../../assets/cruller.jpeg'),
+  Jelly: require('../../assets/jelly.jpeg'),
+  'Chocolate Kreme': require('../../assets/chocolate_kreme.jpeg')
+};
diff --git a/frontend/src/components/Employee/EmployeeDashboard.tsx b/frontend/src/components/Employee/EmployeeDashboard.tsx
index be62bb4..610009a 100644
--- a/frontend/src/components/Employee/EmployeeDashboard.tsx
+++ b/frontend/src/components/Employee/EmployeeDashboard.tsx
@@ -1,46 +1,42 @@
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import MuiDrawer from '@mui/material/Drawer';
-import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import List from '@mui/material/List';
-import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import * as React from 'react';
 import { mainListItems } from './listItems';
 import Orders from './Orders';
 
-
 const drawerWidth: number = 240;
 
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => ({
-    '& .MuiDrawer-paper': {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: drawerWidth,
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== 'open'
+})(({ theme, open }) => ({
+  '& .MuiDrawer-paper': {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    boxSizing: 'border-box',
+    ...(!open && {
+      overflowX: 'hidden',
       transition: theme.transitions.create('width', {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      boxSizing: 'border-box',
-      ...(!open && {
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(7),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(9),
-        },
+        duration: theme.transitions.duration.leavingScreen
       }),
-    },
-  }),
-);
+      width: theme.spacing(7),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(9)
+      }
+    })
+  }
+}));
 
 function DashboardContent() {
   const [open, setOpen] = React.useState(true);
@@ -49,41 +45,33 @@ function DashboardContent() {
   };
 
   return (
-      <Box sx={{ display: 'flex' }}>
-        <Drawer variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              px: [1],
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </Toolbar>
-          <Divider />
-          <List component="nav">
-            {mainListItems}
-          </List>
-        </Drawer>
-        <Box
-          component="main"
+    <Box sx={{ display: 'flex' }}>
+      <Drawer variant="permanent" open={open}>
+        <Toolbar
           sx={{
-            flexGrow: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            px: [1]
           }}
         >
-          <Toolbar />
-          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-              <Grid item xs={12}>
-                <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
-                  <Orders />
-                </Paper>
-              </Grid>
-          </Container>
-        </Box>
+          <IconButton onClick={toggleDrawer}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </Toolbar>
+        <Divider />
+        <List component="nav">{mainListItems}</List>
+      </Drawer>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1
+        }}
+      >
+        <Toolbar />
+        <Orders />
       </Box>
+    </Box>
   );
 }
 
diff --git a/frontend/src/components/Employee/Orders.tsx b/frontend/src/components/Employee/Orders.tsx
index 9661aa7..6ad659f 100644
--- a/frontend/src/components/Employee/Orders.tsx
+++ b/frontend/src/components/Employee/Orders.tsx
@@ -5,28 +5,35 @@ import {
   Card,
   CardActions,
   CardContent,
-  Checkbox,
-  FormControl,
-  FormControlLabel,
   InputLabel
 } from '@mui/material';
-import { grey, red } from '@mui/material/colors';
-import { styled, Theme } from '@mui/material/styles';
-import Table from '@mui/material/Table';
+import Avatar from '@mui/material/Avatar';
+import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Theme } from '@mui/material/styles';
+import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
 import { createStyles, makeStyles } from '@mui/styles';
 import React, { useEffect } from 'react';
-import Title from './Title';
+import DonutInterface from '../Dronut/Donut';
+import DroneInterface from '../Drone/Drone';
+import { donutImages } from '../Dronut/donutImages';
 
 // TODO (rsantoni) : Improve interface with all relevant details
 
 export interface Order {
-  id: number;
+  _id: number;
   first_name: string;
   last_name: string;
-  items: string[];
+  drone: DroneInterface;
+  items: Array<DonutInterface>;
   price: number;
 }
 
@@ -34,32 +41,13 @@ export interface Order {
 //   /*TODO Funmbi --> implement order scrollable functionality */
 // }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    heading: {
-      fontSize: theme.typography.pxToRem(55),
-      fontWeight: theme.typography.fontWeightRegular
-    },
-    accordionRoot: {
-      width: '220px',
-      height: '55px',
-      flex: '1',
-      flexDirection: 'row-reverse',
-      alignItems: 'center'
-    }
-  })
-);
-// const Div = styled('div')(({ theme }) => ({
-//   ...theme.typography.button,
-//   padding: theme.spacing(1),
-// }));
 export default function Orders() {
   const [orders, setOrders] = React.useState<Array<Order>>([]);
   const [checked, setChecked] = React.useState({});
 
   function handleCompleteOrder(id) {
     console.log(id);
-    const newOrders = orders.filter((item) => item.id !== id);
+    const newOrders = orders.filter((item) => item._id !== id);
     // const oldOrder = orders.filter((item) => item.id == id);
     // const orderlength = oldOrder[0].items.length;
     // console.log(oldOrder[0].items);
@@ -78,32 +66,25 @@ export default function Orders() {
     };
     setChecked(value);
   };
-  const classes = useStyles();
 
   async function fetchOrders() {
     try {
-      console.log('fetching');
       const response = await fetch('/orders').then((res) => res.json());
       const orders: Order[] = [];
 
       await Promise.all(
         response.map(async (order) => {
-          let new_items: string[] = [];
-
-          order.items.forEach((item) => {
-            new_items.push(item.flavor);
-          });
-
           const customerResponse = await fetch(
             '/customers/' + order.customer
           ).then((res) => res.json());
-          console.log(customerResponse);
-
-          let new_order = {
-            id: 11,
+          console.log('items: ');
+          console.log(order.items);
+          let new_order: Order = {
+            _id: order._id,
             first_name: customerResponse.first_name,
             last_name: customerResponse.last_name,
-            items: new_items,
+            drone: order.drone,
+            items: order.items,
             price: order.price
           };
 
@@ -122,67 +103,110 @@ export default function Orders() {
   }, []);
 
   return (
-    <React.Fragment>
-      <Title>Recent Orders</Title>
-      <Table size="medium">
-        <TableBody>
-          {orders.map((row) => (
-            <TableRow key={row.id}>
-              <Card>
-                <CardContent>
-                  <Box
-                    bgcolor="info.main"
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      p: 1,
-                      m: 1,
-                      borderRadius: 1
-                    }}
-                  >
-                    <InputLabel>
-                      Order for {row.first_name} {row.last_name}{' '}
-                    </InputLabel>
-                    <InputLabel>Drone {row.id}</InputLabel>
-                  </Box>
-                  <FormControl>
-                    {row.items.map((donut) => (
-                      <FormControlLabel
-                        value={donut}
-                        control={
-                          <Checkbox
-                            checked={checked[donut]}
-                            onChange={handleChange}
-                          />
-                        }
-                        label={donut}
-                        labelPlacement="start"
-                      />
-                    ))}
-                  </FormControl>
-                </CardContent>
-                <CardActions>
-                  <Grid container justifyContent="flex-end">
-                    <Button
-                      color="secondary"
-                      sx={{
-                        position: 'relative',
-                        justifyContent: 'flex-end',
-                        alignItems: 'flex-end'
-                      }}
-                      variant="contained"
-                      endIcon={<SendIcon />}
-                      onClick={() => handleCompleteOrder(row.id)}
-                    >
-                      Order Packed
-                    </Button>
-                  </Grid>
-                </CardActions>
-              </Card>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </React.Fragment>
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Grid item xs={12}>
+        <Box
+          bgcolor="background"
+          display="flex"
+          sx={{
+            pb: 6
+          }}
+        >
+          <Typography
+            variant="h2"
+            align="center"
+            color="text.primary"
+            paragraph
+          >
+            Recent Orders
+          </Typography>
+        </Box>
+        <React.Fragment>
+          <Table size="medium">
+            <TableBody>
+              {orders.map((row) => (
+                <TableRow key={row._id}>
+                  <Card>
+                    <CardContent>
+                      <Box
+                        bgcolor="info.main"
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          p: 1,
+                          m: 1,
+                          borderRadius: 1
+                        }}
+                      >
+                        <InputLabel>
+                          Order for {row.first_name} {row.last_name}{' '}
+                        </InputLabel>
+                        <InputLabel>Drone Id : {row.drone._id}</InputLabel>
+                      </Box>
+                      <Grid lg={12} md={8} sm={12}>
+                        <List>
+                          {row.items.map((donut) => (
+                            <ListItem>
+                              <ListItemAvatar>
+                                <Avatar
+                                  alt={donut.flavor}
+                                  src={donutImages[donut.flavor]}
+                                />
+                              </ListItemAvatar>
+                              <ListItemText primary={donut.flavor} />
+                              <ListItemText
+                                style={{
+                                  display: 'flex',
+                                  justifyContent: 'flex-end'
+                                }}
+                                primary={'$' + donut.price}
+                              />
+                            </ListItem>
+                          ))}
+                          <ListItem>
+                            <ListItemIcon></ListItemIcon>
+                            <ListItemText primary="Total Price" />
+                            <ListItemText
+                              style={{
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                              }}
+                              primary={
+                                '$' +
+                                row.items.reduce(
+                                  (sum, donut) => sum + donut.price,
+                                  0
+                                )
+                              }
+                            />
+                          </ListItem>
+                        </List>
+                      </Grid>
+                    </CardContent>
+                    <CardActions>
+                      <Grid container justifyContent="flex-end">
+                        <Button
+                          color="secondary"
+                          sx={{
+                            position: 'relative',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-end'
+                          }}
+                          variant="contained"
+                          endIcon={<SendIcon />}
+                          onClick={() => handleCompleteOrder(row._id)}
+                        >
+                          Order Packed
+                        </Button>
+                      </Grid>
+                    </CardActions>
+                  </Card>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </React.Fragment>
+      </Grid>
+    </Container>
   );
 }
diff --git a/frontend/src/components/Home/ResponsiveAppBar.tsx b/frontend/src/components/Home/ResponsiveAppBar.tsx
index 2a49b3f..8a69837 100644
--- a/frontend/src/components/Home/ResponsiveAppBar.tsx
+++ b/frontend/src/components/Home/ResponsiveAppBar.tsx
@@ -12,17 +12,17 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import { makeStyles } from '@mui/styles';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
 
-import LandingImg from "../../assets/DronutLogo.png";
+import LandingImg from '../../assets/DronutLogo.png';
 
 const pages = ['customer', 'employee'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
 
 const useStyles = makeStyles({
   logo: {
-    maxWidth: 100,
-  },
+    maxWidth: 100
+  }
 });
 
 const ResponsiveAppBar = () => {
@@ -70,22 +70,24 @@ const ResponsiveAppBar = () => {
               anchorEl={anchorElNav}
               anchorOrigin={{
                 vertical: 'bottom',
-                horizontal: 'left',
+                horizontal: 'left'
               }}
               keepMounted
               transformOrigin={{
                 vertical: 'top',
-                horizontal: 'left',
+                horizontal: 'left'
               }}
               open={Boolean(anchorElNav)}
               onClose={handleCloseNavMenu}
               sx={{
-                display: { xs: 'block', md: 'none' },
+                display: { xs: 'block', md: 'none' }
               }}
             >
               {pages.map((page) => (
                 <MenuItem key={page} onClick={handleCloseNavMenu}>
-                  <Typography color="secondary" textAlign="center">{page}</Typography>
+                  <Typography color="secondary" textAlign="center">
+                    {page}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -100,7 +102,8 @@ const ResponsiveAppBar = () => {
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
             {pages.map((page) => (
-              <Button color="secondary"
+              <Button
+                color="secondary"
                 component={Link}
                 to={page}
                 key={page}
@@ -115,7 +118,7 @@ const ResponsiveAppBar = () => {
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                <Avatar alt="Remy Sharp" />
               </IconButton>
             </Tooltip>
             <Menu
@@ -124,12 +127,12 @@ const ResponsiveAppBar = () => {
               anchorEl={anchorElUser}
               anchorOrigin={{
                 vertical: 'top',
-                horizontal: 'right',
+                horizontal: 'right'
               }}
               keepMounted
               transformOrigin={{
                 vertical: 'top',
-                horizontal: 'right',
+                horizontal: 'right'
               }}
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}