diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d3b9aa5..2b54962 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,14 +2,14 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { CssBaseline } from "@mui/material";
 import React, { useState, useReducer, useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import Welcome from "./components/pages/Welcome";
-import Signup from "./components/pages/Signup";
+import Welcome from "./components/auth/WelcomePage";
+import Signup from "./components/auth/SignupPage";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import Default from "./components/pages/Default";
 import CreateModulePage from "./components/pages/CreateModulePage";
 import NotFound from "./components/pages/NotFound";
 import NotAuthorized from "./components/pages/NotAuthorized";
-import MyAccount from "./components/pages/MyAccount";
+import MyAccount from "./components/pages/MyAccountPage";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
 import AuthContext from "./contexts/AuthContext";
 import { getLocalStorageObj } from "./utils/LocalStorageUtils";
@@ -27,9 +27,9 @@ import ManageUserPage from "./components/pages/ManageUserPage";
 import MakeHelpRequestPage from "./components/pages/MakeHelpRequestPage";
 import ViewHelpRequestsPage from "./components/pages/ViewHelpRequestsPage";
 import HelpRequestPage from "./components/pages/HelpRequestPage";
-import CreatePasswordPage from "./components/pages/CreatePasswordPage";
+import CreatePasswordPage from "./components/auth/CreatePasswordPage";
 import ForgotPasswordPage from "./components/auth/forgot_password/ForgotPasswordPage";
-import CourseUnitsPage from "./components/pages/courses/CourseUnitsPage";
+import CourseViewingPage from "./components/course_viewing/CourseViewingPage";
 
 const App = (): React.ReactElement => {
   const currentUser: AuthenticatedUser | null =
@@ -132,8 +132,8 @@ const App = (): React.ReactElement => {
                 />
                 <PrivateRoute
                   exact
-                  path={Routes.COURSES_PAGE}
-                  component={CourseUnitsPage}
+                  path={Routes.COURSE_PAGE}
+                  component={CourseViewingPage}
                   allowedRoles={["Administrator", "Facilitator", "Learner"]}
                 />
                 <Route exact path="*" component={NotFound} />
diff --git a/frontend/src/components/pages/CreatePasswordPage.tsx b/frontend/src/components/auth/CreatePasswordPage.tsx
similarity index 100%
rename from frontend/src/components/pages/CreatePasswordPage.tsx
rename to frontend/src/components/auth/CreatePasswordPage.tsx
diff --git a/frontend/src/components/auth/Logout.tsx b/frontend/src/components/auth/Logout.tsx
index 49899ad..2d25dc9 100644
--- a/frontend/src/components/auth/Logout.tsx
+++ b/frontend/src/components/auth/Logout.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 
+import { Button } from "@mui/material";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
@@ -13,11 +14,7 @@ const Logout = (): React.ReactElement => {
     }
   };
 
-  return (
-    <button type="button" className="btn btn-primary" onClick={onLogOutClick}>
-      Log Out
-    </button>
-  );
+  return <Button onClick={onLogOutClick}>Log Out</Button>;
 };
 
 export default Logout;
diff --git a/frontend/src/components/auth/MyAccountButton.tsx b/frontend/src/components/auth/MyAccountButton.tsx
index 6246cb6..6f80f79 100644
--- a/frontend/src/components/auth/MyAccountButton.tsx
+++ b/frontend/src/components/auth/MyAccountButton.tsx
@@ -1,17 +1,14 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
+import { Button } from "@mui/material";
 import * as Routes from "../../constants/Routes";
 
 const MyAccountButton = (): React.ReactElement => {
   const history = useHistory();
   return (
-    <button
-      className="btn btn-primary"
-      type="button"
-      onClick={() => history.push(Routes.MY_ACCOUNT_PAGE)}
-    >
+    <Button onClick={() => history.push(Routes.MY_ACCOUNT_PAGE)}>
       My Account
-    </button>
+    </Button>
   );
 };
 
diff --git a/frontend/src/components/auth/PrivateRoute.tsx b/frontend/src/components/auth/PrivateRoute.tsx
index d88ddc2..6874124 100644
--- a/frontend/src/components/auth/PrivateRoute.tsx
+++ b/frontend/src/components/auth/PrivateRoute.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Route, Redirect } from "react-router-dom";
-
+import { Box } from "@mui/material";
 import AuthContext from "../../contexts/AuthContext";
 import {
   CREATE_PASSWORD_PAGE,
@@ -8,6 +8,7 @@ import {
   WELCOME_PAGE,
 } from "../../constants/Routes";
 import { Role } from "../../types/AuthTypes";
+import Navbar from "../common/navbar/Navbar";
 
 type PrivateRouteProps = {
   component: React.FC;
@@ -17,7 +18,7 @@ type PrivateRouteProps = {
 };
 
 const PrivateRoute: React.FC<PrivateRouteProps> = ({
-  component,
+  component: Component,
   exact,
   path,
   allowedRoles,
@@ -31,8 +32,19 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({
     ) {
       return <Redirect to={CREATE_PASSWORD_PAGE} />;
     }
+
+    const NavbarWrappedComponent: React.FC<PrivateRouteProps> = () => {
+      return (
+        <Box sx={{ height: "100vh", display: "flex", flexFlow: "column" }}>
+          <Navbar />
+          <Box sx={{ height: "100%", flexGrow: 1 }}>
+            <Component />
+          </Box>
+        </Box>
+      );
+    };
     return allowedRoles.includes(authenticatedUser.role) ? (
-      <Route path={path} exact={exact} component={component} />
+      <Route path={path} exact={exact} component={NavbarWrappedComponent} />
     ) : (
       <Redirect to={NOT_AUTHORIZED_PAGE} />
     );
diff --git a/frontend/src/components/auth/RefreshCredentials.tsx b/frontend/src/components/auth/RefreshCredentials.tsx
index abbc8ec..51ff59f 100644
--- a/frontend/src/components/auth/RefreshCredentials.tsx
+++ b/frontend/src/components/auth/RefreshCredentials.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 
+import { Button } from "@mui/material";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
@@ -13,11 +14,7 @@ const RefreshCredentials = (): React.ReactElement => {
     }
   };
 
-  return (
-    <button type="button" className="btn btn-primary" onClick={onRefreshClick}>
-      Refresh Credentials
-    </button>
-  );
+  return <Button onClick={onRefreshClick}>Refresh Credentials</Button>;
 };
 
 export default RefreshCredentials;
diff --git a/frontend/src/components/auth/ResetPassword.tsx b/frontend/src/components/auth/ResetPassword.tsx
index 5ccbca7..025ea9d 100644
--- a/frontend/src/components/auth/ResetPassword.tsx
+++ b/frontend/src/components/auth/ResetPassword.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 
+import { Button } from "@mui/material";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
@@ -13,15 +14,7 @@ const ResetPassword = (): React.ReactElement => {
     await authAPIClient.resetPassword(authenticatedUser.email);
   };
 
-  return (
-    <button
-      type="button"
-      className="btn btn-primary"
-      onClick={onResetPasswordClick}
-    >
-      Reset Password
-    </button>
-  );
+  return <Button onClick={onResetPasswordClick}>Reset Password</Button>;
 };
 
 export default ResetPassword;
diff --git a/frontend/src/components/pages/Signup.tsx b/frontend/src/components/auth/SignupPage.tsx
similarity index 98%
rename from frontend/src/components/pages/Signup.tsx
rename to frontend/src/components/auth/SignupPage.tsx
index 2a02b65..0535ffc 100644
--- a/frontend/src/components/pages/Signup.tsx
+++ b/frontend/src/components/auth/SignupPage.tsx
@@ -24,8 +24,8 @@ import { HOME_PAGE, WELCOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
 import logo from "../assets/logoColoured.png";
-import { getSignUpPath, getSignUpPrompt } from "./Welcome";
-import Login from "../auth/Login";
+import { getSignUpPath, getSignUpPrompt } from "./WelcomePage";
+import Login from "./Login";
 
 const Signup = (): React.ReactElement => {
   const { authenticatedUser } = useContext(AuthContext);
diff --git a/frontend/src/components/pages/Welcome.tsx b/frontend/src/components/auth/WelcomePage.tsx
similarity index 99%
rename from frontend/src/components/pages/Welcome.tsx
rename to frontend/src/components/auth/WelcomePage.tsx
index a2e525a..ef9e536 100644
--- a/frontend/src/components/pages/Welcome.tsx
+++ b/frontend/src/components/auth/WelcomePage.tsx
@@ -18,7 +18,7 @@ import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import background from "../assets/backgroundImage.png";
 import logo from "../assets/logoWhite.png";
-import Login from "../auth/Login";
+import Login from "./Login";
 import { Role } from "../../types/AuthTypes";
 
 export const getSignUpPrompt = (role: Role): string | undefined => {
diff --git a/frontend/src/components/common/navbar/Navbar.tsx b/frontend/src/components/common/navbar/Navbar.tsx
index dfc25d7..bf1a83f 100644
--- a/frontend/src/components/common/navbar/Navbar.tsx
+++ b/frontend/src/components/common/navbar/Navbar.tsx
@@ -8,16 +8,21 @@ import Typography from "@mui/material/Typography";
 import Badge from "@mui/material/Badge";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import Button from "@mui/material/Button/Button";
+import { Link } from "react-router-dom";
+import { useTheme } from "@mui/material";
 import NotificationsList from "../../notification/NotificationsList";
 import NotificationAPIClient from "../../../APIClients/NotificationAPIClient";
 import { useUser } from "../../../hooks/useUser";
 import { Notification } from "../../../types/NotificationTypes";
 import { useSocket } from "../../../contexts/SocketContext";
 import UserButton from "./UserButton";
+import { HOME_PAGE } from "../../../constants/Routes";
+import eafLogo from "../../assets/logoColoured.png";
 
 export default function Navbar() {
   const user = useUser();
   const socket = useSocket();
+  const theme = useTheme();
 
   const NUMBER_OF_NOTIFICATIONS_TO_LOAD = 10;
   const [notifications, setNotifications] = useState<Notification[]>([]);
@@ -78,23 +83,29 @@ export default function Navbar() {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={{ bgcolor: `${user.role}.Default` }}>
-        <Toolbar>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            sx={{ display: { xs: "none", sm: "block" } }}
-          >
-            Extend a family
-          </Typography>
+      <AppBar
+        position="sticky"
+        sx={{
+          bgcolor: theme.palette.Neutral[100],
+          borderBottom: "2px solid #EEE",
+          boxShadow: "none",
+        }}
+      >
+        <Toolbar sx={{ padding: 0, height: "40px" }}>
+          <Link to={HOME_PAGE}>
+            <img
+              src={eafLogo}
+              alt="Extend-A-Family logo"
+              style={{ height: "40px" }}
+            />
+          </Link>
           <Box sx={{ flexGrow: 1 }} />
           <Box sx={{ display: { xs: "none", md: "flex" } }}>
             <IconButton
               size="large"
               aria-label="show new notifications"
-              color="inherit"
               onClick={handleClick}
+              sx={{ color: theme.palette.Neutral[400] }}
             >
               <Badge badgeContent={numUnseenNotifications} color="error">
                 <NotificationsIcon />
diff --git a/frontend/src/components/common/navbar/UserButton.tsx b/frontend/src/components/common/navbar/UserButton.tsx
index 4a324c8..af60aa1 100644
--- a/frontend/src/components/common/navbar/UserButton.tsx
+++ b/frontend/src/components/common/navbar/UserButton.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { AccountCircle } from "@mui/icons-material";
-import { Box, IconButton, Popover } from "@mui/material";
+import { Box, IconButton, Popover, useTheme } from "@mui/material";
 import RefreshCredentials from "../../auth/RefreshCredentials";
 import ResetPassword from "../../auth/ResetPassword";
 import Logout from "../../auth/Logout";
@@ -10,6 +10,7 @@ const UserButton = () => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null,
   );
+  const theme = useTheme();
 
   const open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
@@ -27,8 +28,8 @@ const UserButton = () => {
         edge="end"
         aria-label="account of current user"
         aria-haspopup="true"
-        color="inherit"
         onClick={handleClick}
+        sx={{ color: theme.palette.Neutral[400] }}
       >
         <AccountCircle />
       </IconButton>
diff --git a/frontend/src/components/pages/courses/CourseUnitsPage.tsx b/frontend/src/components/course_viewing/CourseViewingPage.tsx
similarity index 93%
rename from frontend/src/components/pages/courses/CourseUnitsPage.tsx
rename to frontend/src/components/course_viewing/CourseViewingPage.tsx
index 891e701..85a017d 100644
--- a/frontend/src/components/pages/courses/CourseUnitsPage.tsx
+++ b/frontend/src/components/course_viewing/CourseViewingPage.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { Box, Button, Typography, useTheme } from "@mui/material";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
-import UnitSidebar from "../../courses/UnitSidebar";
-import { CourseUnit } from "../../../types/CourseTypes";
-import CourseAPIClient from "../../../APIClients/CourseAPIClient";
+import UnitSidebar from "./UnitSidebar";
+import { CourseUnit } from "../../types/CourseTypes";
+import CourseAPIClient from "../../APIClients/CourseAPIClient";
 
 export default function CourseUnitsPage() {
   const theme = useTheme();
diff --git a/frontend/src/components/courses/UnitSidebar.tsx b/frontend/src/components/course_viewing/UnitSidebar.tsx
similarity index 89%
rename from frontend/src/components/courses/UnitSidebar.tsx
rename to frontend/src/components/course_viewing/UnitSidebar.tsx
index b8e2fe5..1daf167 100644
--- a/frontend/src/components/courses/UnitSidebar.tsx
+++ b/frontend/src/components/course_viewing/UnitSidebar.tsx
@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import { CourseUnit } from "../../types/CourseTypes";
+import { useUser } from "../../hooks/useUser";
 
 interface UnitSideBarProps {
   courseUnits: CourseUnit[];
@@ -20,6 +21,7 @@ interface UnitSideBarProps {
 
 export default function UnitSidebar(props: UnitSideBarProps) {
   const theme = useTheme();
+  const user = useUser();
   const { courseUnits, handleClose, open } = props;
 
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -35,10 +37,11 @@ export default function UnitSidebar(props: UnitSideBarProps) {
     <Drawer
       sx={{
         width: "20%",
+        height: "100%",
         flexShrink: 0,
         "& .MuiDrawer-paper": {
-          width: "20%",
           boxSizing: "border-box",
+          position: "relative",
         },
         display: open ? "block" : "none",
       }}
@@ -46,7 +49,10 @@ export default function UnitSidebar(props: UnitSideBarProps) {
       anchor="left"
       open={open}
     >
-      <Box height="100%" sx={{ backgroundColor: theme.palette.Learner.Light }}>
+      <Box
+        height="100%"
+        sx={{ backgroundColor: theme.palette[user.role].Light }}
+      >
         <Box
           height="59px"
           display="flex"
@@ -93,10 +99,10 @@ export default function UnitSidebar(props: UnitSideBarProps) {
                     px: "32px",
                     backgroundColor:
                       selectedIndex === index
-                        ? theme.palette.Learner.Hover
+                        ? theme.palette[user.role].Hover
                         : "transparent",
                     "&:hover": {
-                      backgroundColor: theme.palette.Learner.Hover,
+                      backgroundColor: theme.palette[user.role].Hover,
                     },
                   }}
                   onClick={(event) => handleListItemClick(event, index)}
diff --git a/frontend/src/components/pages/Default.tsx b/frontend/src/components/pages/Default.tsx
index 7ccbdef..bc5d60e 100644
--- a/frontend/src/components/pages/Default.tsx
+++ b/frontend/src/components/pages/Default.tsx
@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
 import SampleContext from "../../contexts/SampleContext";
-import Navbar from "../common/navbar/Navbar";
 
 const TeamInfoDisplay = () => {
   const { teamName, numTerms, members, isActive } = useContext(SampleContext);
@@ -23,7 +22,6 @@ const TeamInfoDisplay = () => {
 const Default = (): React.ReactElement => {
   return (
     <div style={{ textAlign: "center" }}>
-      <Navbar />
       <h1>Default Page</h1>
       <div style={{ height: "2rem" }} />
 
diff --git a/frontend/src/components/pages/MyAccount.tsx b/frontend/src/components/pages/MyAccountPage.tsx
similarity index 100%
rename from frontend/src/components/pages/MyAccount.tsx
rename to frontend/src/components/pages/MyAccountPage.tsx
diff --git a/frontend/src/components/pages/ViewHelpRequestsPage.tsx b/frontend/src/components/pages/ViewHelpRequestsPage.tsx
index bcbd75a..625c951 100644
--- a/frontend/src/components/pages/ViewHelpRequestsPage.tsx
+++ b/frontend/src/components/pages/ViewHelpRequestsPage.tsx
@@ -15,7 +15,6 @@ import {
   Checkbox,
 } from "@mui/material";
 import TablePaginationActions from "@mui/material/TablePagination/TablePaginationActions";
-import Navbar from "../common/navbar/Navbar";
 import { useFacilitator } from "../../hooks/useUser";
 import HelpRequestAPIClient from "../../APIClients/HelpRequestAPIClient";
 import { HelpRequest } from "../../types/HelpRequestType";
@@ -71,7 +70,6 @@ const ViewHelpRequestsPage = (): React.ReactElement => {
 
   return (
     <div style={{ textAlign: "center", width: "100%", margin: "0px auto" }}>
-      <Navbar />
       <TableContainer component={Paper}>
         <Table aria-label="User grouped by role table">
           <TableHead>
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
index dffbca7..31b7c65 100644
--- a/frontend/src/constants/Routes.ts
+++ b/frontend/src/constants/Routes.ts
@@ -26,4 +26,4 @@ export const VIEW_HELP_REQUESTS_PAGE = "/help-requests";
 
 export const FORGOT_PASSWORD_PAGE = "/forgot-password";
 
-export const COURSES_PAGE = "/course";
+export const COURSE_PAGE = "/course";