diff --git a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a169057acde34229f9c594fd3e3de74221ed72d9
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { Grid } from '@material-ui/core';
+import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
+import { useReservations } from 'hooks/useReservations';
+
+/**
+ * Displays a list of all reservations from api.
+ * @returns rendered list of reservations.
+ */
+export const ReservationListViewer: FC = () => {
+  const reservations = useReservations();
+
+  return (
+    <div data-testid="ReservationListViewer">
+      <Grid item container>
+        {reservations.length !== 0 ? (
+          reservations.map((reservation, key) => (
+            <Reservation reservation={reservation} />
+          ))
+        ) : (
+          <h1>You do not have reservations.</h1>
+        )}
+      </Grid>
+    </div>
+  );
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index b873407c5bb6b1d874c35ef30b765c1a07720e3d..3781776d3b09935743ce01933187f8b058d0e9c0 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 
-export const useStyles = makeStyles(() => ({
+export const reservationPageStyle = makeStyles(() => ({
   root: {
     minHeight: '36vh',
     backgroundImage: `url(${'/assets/bgMED.svg'})`,
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index d4a44886327e5dd194cf5a8f12666ba3d07d9317..55b80518d51b71f700e641bfb38dc8d0af737ef5 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -1,32 +1,16 @@
 import React, { FC } from 'react';
-import {
-  Grid,
-  Typography,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Hidden,
-  Button,
-  MuiThemeProvider,
-  createMuiTheme,
-  responsiveFontSizes,
-} from '@material-ui/core';
+import { Grid, Typography, Hidden } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
 import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useReservations } from 'hooks/useReservations';
-import { useStyles } from './ReservationPage.style';
+import { reservationPageStyle } from './ReservationPage.style';
 import { ReservationDialog } from './ReservationDialog';
+import { ReservationListViewer } from './ReservationListViewer';
 
 export const ReservationPage: FC = () => {
-  const classes = useStyles();
+  const classes = reservationPageStyle();
 
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const reservations = useReservations();
 
   const handleOpen = (): void => {
     setIsOpen(true);
@@ -91,9 +75,7 @@ export const ReservationPage: FC = () => {
           <Grid item xs={8}>
             <Typography variant="h3">Your Next Reservations</Typography>
           </Grid>
-          {reservations.map((reservation, key) => (
-            <Reservation reservation={reservation} />
-          ))}
+          <ReservationListViewer />
         </Grid>
       </Grid>
     </div>