diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
new file mode 100644
index 0000000..78d96d6
--- /dev/null
+++ b/src/components/Nav.jsx
@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+import style from "./Nav.module.css";
+
+export default function Nav() {
+  return (
+    <nav className={style.nav}>
+      <Link className={style.homeLink} to="/">
+        CSMC
+      </Link>
+      <Link to="/charter">Charter</Link>
+      <Link to="/officers">Officers</Link>
+      <Link to="/tshirts">T-Shirts</Link>
+    </nav>
+  );
+}
diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css
new file mode 100644
index 0000000..18c1bae
--- /dev/null
+++ b/src/components/Nav.module.css
@@ -0,0 +1,28 @@
+.nav {
+  position: sticky;
+  top: 0;
+  display: flex;
+  width: 100%;
+  padding: 0rem 0rem;
+  justify-content: space-between;
+  align-items: center;
+  height: 4rem;
+  z-index: 1;
+  font-size: 18px;
+}
+
+@media screen and (min-width: 768px) {
+  .nav {
+    height: 6rem;
+    font-size: 25px;
+  }
+
+  .homeLink {
+    width: 60vw;
+  }
+}
+
+.nav a {
+  color: var(--color-obiesource-accent);
+  text-decoration: none;
+}
diff --git a/src/routes/charter.jsx b/src/routes/charter.jsx
index ddb7490..5381616 100644
--- a/src/routes/charter.jsx
+++ b/src/routes/charter.jsx
@@ -1,7 +1,10 @@
+import Nav from "../components/Nav";
+
 /* eslint-disable react/no-unescaped-entities */
 export default function Charter() {
   return (
     <>
+      <Nav />
       <h1>Oberlin CS Majors' Committee Charter</h1>
 
       <h2>Purpose & Responsibilities</h2>
diff --git a/src/routes/officers.jsx b/src/routes/officers.jsx
index 7716d7d..87b467f 100644
--- a/src/routes/officers.jsx
+++ b/src/routes/officers.jsx
@@ -1,3 +1,5 @@
+import Nav from "../components/Nav";
+
 export default function Officers() {
   // prettier-ignore
   const officersHtml = <>
@@ -367,9 +369,10 @@ export default function Officers() {
   );
 
   return (
-    <div>
+    <>
+      <Nav />
       {officersHtml}
       {notes}
-    </div>
+    </>
   );
 }
diff --git a/src/routes/root.jsx b/src/routes/root.jsx
index a47c0c1..d88eefb 100644
--- a/src/routes/root.jsx
+++ b/src/routes/root.jsx
@@ -1,12 +1,15 @@
+import { Link } from "react-router-dom";
 import CSMCAnimation from "../components/CSMCAnimation";
+import style from "./root.module.css";
+import Nav from "../components/Nav";
 
 export default function Root() {
   return (
-    <main>
-      <div>
-        <h1>CSMC</h1>
-      </div>
-      <CSMCAnimation />
-    </main>
+    <>
+      <Nav />
+      <main>
+        <CSMCAnimation />
+      </main>
+    </>
   );
 }
diff --git a/src/routes/root.module.css b/src/routes/root.module.css
index a607c45..e69de29 100644
--- a/src/routes/root.module.css
+++ b/src/routes/root.module.css
@@ -1,3 +0,0 @@
-.oberlin {
-  color: var(--color-oberlin-red3);
-}
diff --git a/src/routes/tshirts.jsx b/src/routes/tshirts.jsx
index 21fdf61..29a6450 100644
--- a/src/routes/tshirts.jsx
+++ b/src/routes/tshirts.jsx
@@ -1,6 +1,9 @@
+import Nav from "../components/Nav";
+
 export default function Tshirts() {
   return (
     <>
+      <Nav />
       <h1>Annual CS T-Shirt Designs</h1>
       <p>
         In the spring of each year since time untold, the students of the OCCS