diff --git a/src/App.css b/src/App.css
index 9ae5a98..efb9551 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,7 +23,7 @@ body {
   --background:white;
   --color: black;
   --accent: #232323;
-  --light: #f0eeeb;
+  --light: #ffffff;
   --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%) contrast(89%);
   --dark: #232323;
   --dark-accent: rgb(76, 75, 72);
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 90e0c77..e548b06 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,14 +1,48 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="{ 'dark-mode': darkMode }">
     <router-link to="/">
       <img src="@/assets/logo.svg" />
     </router-link>
-    <router-link to="/card"> Cards </router-link>
-    <router-link to="/transaction"> Transactions </router-link>
-    <router-link to="/fundingsource"> Funding </router-link>
-    <toggle-button :value="darkMode" @change="toggleDarkMode" />
-    <a href="https://lithic.com" target="_blank"> Learn More </a>
-    <a href="https://docs.lithic.com" target="_blank"> API Docs </a>
+    <div>
+      <router-link
+        to="/"
+        exact
+        class="nav-link"
+        :class="{ active: $route.path === '/' }"
+      >
+        Overview
+      </router-link>
+      <router-link
+        to="/card"
+        class="nav-link"
+        :class="{ active: $route.path === '/card' }"
+      >
+        Cards
+      </router-link>
+      <router-link
+        to="/fundingsource"
+        class="nav-link"
+        :class="{ active: $route.path === '/fundingsource' }"
+      >
+        Funding
+      </router-link>
+      <a href="https://lithic.com" target="_blank" class="nav-link"
+        >Learn More</a
+      >
+      <a href="https://docs.lithic.com" target="_blank" class="nav-link"
+        >Docs</a
+      >
+    </div>
+
+    <div class="switch-container">
+      <p :class="{ 'dark-text': darkMode }">Light</p>
+      <toggle-button
+        :value="darkMode"
+        @change="toggleDarkMode"
+        class="toggle"
+      />
+      <p :class="{ 'dark-text': !darkMode }">Dark</p>
+    </div>
   </div>
 </template>
 
@@ -21,7 +55,7 @@ export default {
     },
   },
   methods: {
-    toggleDarkMode: function () {
+    toggleDarkMode() {
       this.$store.commit("toggleDarkMode");
     },
   },
@@ -36,23 +70,24 @@ export default {
   top: 0;
   height: 56px;
   width: 100%;
-  background: var(--light, #f0eeeb);
-  padding: 0 24px;
+  padding: 0 100px;
+  background: var(--light, #ffffff);
   display: flex;
   align-items: center;
+  justify-content: space-between;
+
+  > img {
+    filter: var(--logo);
+    height: 20px;
+  }
 
-  > * {
-    font-weight: bold;
+  > div > .nav-link {
+    font-weight: 400;
     font-family: "Graphik";
     text-decoration: none;
     margin-right: 24px;
 
-    > img {
-      filter: var(--logo);
-      height: 20px;
-    }
-
-    &:nth-child(5) {
+    &:nth-child(7) {
       margin-left: auto;
     }
 
@@ -63,6 +98,26 @@ export default {
     &:hover {
       opacity: 0.7;
     }
+
+    &.active {
+      text-decoration: underline;
+    }
+  }
+
+  .switch-container {
+    display: flex;
+    align-items: center;
+    .toggle {
+      margin: 0 12px;
+    }
+    .dark-text {
+      opacity: 0.5;
+    }
+    .dark-mode {
+      .dark-text {
+        opacity: 1;
+      }
+    }
   }
 }
 </style>