diff --git a/app.db b/app.db
index ac293e3..41345a2 100644
Binary files a/app.db and b/app.db differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index caa2e47..9415eaa 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { Router } from "react-router-dom";
-import Layout from "./pages/Layout";
 import { useAuth0 } from "./authentication/auth0";
-// import history from "./utils/history";
 import * as createHistory from "history";
+// import history from "./utils/history";
+import MainLayout from "./layouts/MainLayout";
+import { AppRouter } from "./utils/router";
+
 export const history = createHistory.createBrowserHistory();
+
 export default function App() {
   const { loading } = useAuth0();
 
@@ -14,7 +17,9 @@ export default function App() {
 
   return (
     <Router history={history}>
-      <Layout />
+      <MainLayout>
+        <AppRouter />
+      </MainLayout>
     </Router>
   );
 }
diff --git a/client/src/pages/Layout.tsx b/client/src/layouts/MainLayout.tsx
similarity index 50%
rename from client/src/pages/Layout.tsx
rename to client/src/layouts/MainLayout.tsx
index 91c8d23..abe0847 100644
--- a/client/src/pages/Layout.tsx
+++ b/client/src/layouts/MainLayout.tsx
@@ -1,23 +1,28 @@
-import React from "react";
+import React, { FC } from "react";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { makeStyles } from "@material-ui/core/styles";
-import { AppRouter } from "../utils/router";
 import ButtonAppBar from "../components/ButtonAppBar";
 import Footer from "../components/Footer";
 
-const useStyles = makeStyles(theme => ({
+/**
+ * @function useStyles creates the css styles used in the following component.
+ */
+const useStyles = makeStyles((theme) => ({
+  // root style allow for fixed footer
   root: {
     display: "flex",
     flexDirection: "column",
-    minHeight: "100vh"
+    minHeight: "100vh",
   },
-  main: {
-    marginTop: theme.spacing(8),
-    marginBottom: theme.spacing(2)
-  }
 }));
 
-export default function Layout() {
+/**
+ * MainLayout is the principal page layout. It mainly ensure the footer is fixed
+ * to the page bottom.
+ *
+ * @param children - The encapsulated component.
+ */
+const MainLayout: FC = ({ children }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -26,8 +31,10 @@ export default function Layout() {
       </header>
       {/* <BreadCrumb /> */}
       <CssBaseline />
-      <AppRouter />
+      {children}
       <Footer />
     </div>
   );
-}
+};
+
+export default MainLayout;