diff --git a/package-lock.json b/package-lock.json
index 98d19460..14c9683f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,8 @@
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.3",
-        "@mui/icons-material": "^5.11.16",
-        "@mui/material": "^5.13.6",
+        "@mui/icons-material": "^5.14.1",
+        "@mui/material": "^5.14.2",
         "@next/font": "13.1.6",
         "@tanstack/react-query": "^4.24.10",
         "@trpc/client": "^10.16.0",
@@ -34,6 +34,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hot-toast": "^2.4.1",
+        "react-icons": "^4.10.1",
         "react-timer-hook": "^3.0.6",
         "superjson": "^1.12.3",
         "tsx": "^3.12.7",
@@ -1431,9 +1432,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1733,14 +1734,14 @@
       }
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.5.tgz",
-      "integrity": "sha512-vy3TWLQYdGNecTaufR4wDNQFV2WEg6wRPi6BVbx6q1vP3K1mbxIn1+XOqOzfYBXjFHvMx0gZAo2TgWbaqfgvAA==",
+      "version": "5.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz",
+      "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
+        "@babel/runtime": "^7.22.6",
         "@emotion/is-prop-valid": "^1.2.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.6",
+        "@mui/utils": "^5.14.1",
         "@popperjs/core": "^2.11.8",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -1770,20 +1771,20 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.13.4",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.4.tgz",
-      "integrity": "sha512-yFrMWcrlI0TqRN5jpb6Ma9iI7sGTHpytdzzL33oskFHNQ8UgrtPas33Y1K7sWAMwCrr1qbWDrOHLAQG4tAzuSw==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.2.tgz",
+      "integrity": "sha512-x+c/MgDL1t/IIy5lDbMlrDouFG5DYZbl3DP4dbbuhlpPFBnE9glYwmJEee/orVHQpOPwLxCAIWQs+2DKSaBVWQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.13.7",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.13.7.tgz",
-      "integrity": "sha512-zoVtkb9jYVUGfI7CobOdDBEAlpg3XESiO6cWqSDGwEma69+CBDIAwGpnO5truvQDJHBGSAfzFj3nObwxjkyA7Q==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.1.tgz",
+      "integrity": "sha512-xV/f26muQqtWzerzOIdGPrXoxp/OKaE2G2Wp9gnmG47mHua5Slup/tMc3fA4ZYUreGGrK6+tT81TEvt1Wsng8Q==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5"
+        "@babel/runtime": "^7.22.6"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -1804,16 +1805,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz",
-      "integrity": "sha512-/c2ZApeQm2sTYdQXjqEnldaBMBcUEiyu2VRS6bS39ZeNaAcCLBQbYocLR46R+f0S5dgpBzB0T4AsOABPOFYZ5Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@mui/base": "5.0.0-beta.5",
-        "@mui/core-downloads-tracker": "^5.13.4",
-        "@mui/system": "^5.13.6",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.2.tgz",
+      "integrity": "sha512-TgNR4/YRL11RifsnMWNhITNCkGJYVz20SCvVJBBoU5Y/KhUNSSJxjDpEB8VrnY+sUsV0NigLCkHZJglfsiS3Pw==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.8",
+        "@mui/core-downloads-tracker": "^5.14.2",
+        "@mui/system": "^5.14.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.6",
+        "@mui/utils": "^5.14.1",
         "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
@@ -1853,12 +1854,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz",
-      "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==",
+      "version": "5.13.7",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
+      "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.13.1",
+        "@babel/runtime": "^7.22.5",
+        "@mui/utils": "^5.13.7",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1910,15 +1911,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
-      "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz",
+      "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@mui/private-theming": "^5.13.1",
+        "@babel/runtime": "^7.22.6",
+        "@mui/private-theming": "^5.13.7",
         "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.6",
+        "@mui/utils": "^5.14.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1962,13 +1963,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz",
-      "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==",
+      "version": "5.14.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz",
+      "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
+        "@babel/runtime": "^7.22.6",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^18.2.0",
+        "@types/react-is": "^18.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -9300,6 +9301,14 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 20b087af..441b0f75 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.3",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.6",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.2",
     "@next/font": "13.1.6",
     "@tanstack/react-query": "^4.24.10",
     "@trpc/client": "^10.16.0",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 00000000..b1580173
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import styles from "../styles/Navbar.module.css";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  PeopleOutline,
+  CoPresent,
+  Settings,
+  Logout,
+} from "@mui/icons-material";
+import { signOut } from "next-auth/react";
+import { trpc } from "@/client/lib/trpc";
+
+interface NavBarProps {
+  children: React.ReactNode;
+}
+
+const NavBar = ({ children }: NavBarProps) => {
+  const { data: me } = trpc.user.getMe.useQuery();
+
+  return (
+    <React.Fragment>
+      <div className={styles.container}>
+        <div className={styles.sidebar}>
+          <Link href="/">
+            <Image
+              src="/img/compass-logo.svg"
+              alt="logo"
+              className={styles.logo}
+              width={64}
+              height={64}
+              priority
+            />
+          </Link>
+          <br />
+
+          {me && (
+            <div className={styles.linkContainer}>
+              <Link href="/students" className={styles.link}>
+                <PeopleOutline className={styles.icon} />
+                <p className={styles.linkTitle}>Students</p>
+              </Link>
+              <br />
+              <Link href="/staff" className={styles.link}>
+                <CoPresent className={styles.icon} />
+                <p className={styles.linkTitle}>Staff</p>
+              </Link>
+              <br />
+              <Link href="/settings" className={styles.link}>
+                <Settings className={styles.icon} />
+                <p className={styles.linkTitle}>Settings</p>
+              </Link>
+              <br />
+              <Link href="" className={styles.link}>
+                <Logout className={styles.icon} />
+                <p
+                  className={styles.linkTitle}
+                  onClick={() => signOut({ callbackUrl: "/" })}
+                >
+                  Logout
+                </p>
+              </Link>
+            </div>
+          )}
+        </div>
+        <div className={styles.body}>{children}</div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default NavBar;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 32b3e1dd..5b207618 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -10,6 +10,7 @@ import { QueryCache } from "@tanstack/react-query";
 import toast, { Toaster } from "react-hot-toast";
 import Head from "next/head";
 import superjson from "superjson";
+import NavBar from "@/components/NavBar";
 
 interface CustomPageProps {
   session: Session;
@@ -79,7 +80,9 @@ export default function App({
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <SessionProvider session={pageProps.session}>
-            <Component {...pageProps} showErrorToast={toast.error} />
+            <NavBar>
+              <Component {...pageProps} showErrorToast={toast.error} />
+            </NavBar>
             <Toaster position="bottom-right" />
           </SessionProvider>
         </QueryClientProvider>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 25c25a86..2d5be6b7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,7 +25,7 @@ const Home: NextPage = () => {
                 Welcome {me?.first_name} {me?.last_name}
               </h1>
               {JSON.stringify(me)}
-              <Link href="/cmDashboard">
+              <Link href="/students">
                 <p>CM Dashboard</p>
               </Link>
               <button className={styles.signOut} onClick={() => signOut()}>
@@ -46,7 +46,11 @@ const Home: NextPage = () => {
                 <div>Log in with your Google account to continue</div>
                 <button
                   className={`${styles.signIn} ${styles.bold}`}
-                  onClick={() => signIn("google")}
+                  onClick={() =>
+                    signIn("google", {
+                      callbackUrl: "/students",
+                    })
+                  }
                 >
                   Sign in with Google
                 </button>
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
new file mode 100644
index 00000000..bfc69506
--- /dev/null
+++ b/src/pages/settings.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Settings = () => {
+  return (
+    <div>
+      <p>🚧 Under Construction! 🚧</p>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/src/pages/paras/[user_id].tsx b/src/pages/staff/[user_id].tsx
similarity index 100%
rename from src/pages/paras/[user_id].tsx
rename to src/pages/staff/[user_id].tsx
diff --git a/src/pages/staff/index.tsx b/src/pages/staff/index.tsx
new file mode 100644
index 00000000..2c3f3641
--- /dev/null
+++ b/src/pages/staff/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "../../styles/Dashboard.module.css";
+import MyParas from "@/components/case_manager/MyParas";
+
+function Staff() {
+  return (
+    <div className={styles.cmContainer}>
+      <nav style={{ padding: "2%" }}></nav>
+      <main>
+        <div style={{ padding: "20px", textAlign: "center" }}>
+          <div
+            style={{
+              display: "flex",
+              alignContent: "center",
+              justifyContent: "center",
+            }}
+          >
+            <MyParas />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default Staff;
diff --git a/src/pages/cmDashboard.tsx b/src/pages/students/index.tsx
similarity index 51%
rename from src/pages/cmDashboard.tsx
rename to src/pages/students/index.tsx
index a007bae1..fa94d4d0 100644
--- a/src/pages/cmDashboard.tsx
+++ b/src/pages/students/index.tsx
@@ -1,20 +1,11 @@
 import React from "react";
-import MyStudents from "../components/case_manager/MyStudents";
-import styles from "../styles/Dashboard.module.css";
-import Image from "next/image";
+import MyStudents from "../../components/case_manager/MyStudents";
+import styles from "../../styles/Dashboard.module.css";
 
-function cmDashboard() {
+function Students() {
   return (
     <div className={styles.cmContainer}>
-      <nav style={{ padding: "2%" }}>
-        <Image
-          src="/img/compass-logo.svg"
-          alt="logo"
-          width={50}
-          height={50}
-          priority
-        />
-      </nav>
+      <nav style={{ padding: "2%" }}></nav>
       <main>
         <div style={{ padding: "20px", textAlign: "center" }}>
           <div
@@ -32,4 +23,4 @@ function cmDashboard() {
   );
 }
 
-export default cmDashboard;
+export default Students;
diff --git a/src/styles/Navbar.module.css b/src/styles/Navbar.module.css
new file mode 100644
index 00000000..4a264f7b
--- /dev/null
+++ b/src/styles/Navbar.module.css
@@ -0,0 +1,47 @@
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.sidebar {
+  flex: 2;
+  background-color: #080155;
+  min-height: 100vh;
+}
+
+.body {
+  flex: 10;
+}
+
+.linkContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.logo {
+  padding-left: 28px;
+  padding-top: 12px;
+  padding-bottom: 10px;
+}
+
+.link {
+  color: white;
+  padding-left: 30px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.linkTitle {
+  padding-left: 8px;
+}
+
+.link:hover {
+  background-color: #383473;
+}
+
+.icon {
+  color: white;
+}