diff --git a/src/App.css b/src/App.css
index 9ae5a98..886c23a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,20 +14,26 @@
   font-style: normal;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   font-family: "Graphik";
 }
 
 body {
   margin: 0;
-  --background:white;
+  --background: white;
   --color: black;
   --accent: #232323;
-  --light: #f0eeeb;
-  --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%) contrast(89%);
+  --light: #ffffff;
+  --logo: invert(9%) sepia(10%) saturate(418%) hue-rotate(22deg) brightness(98%)
+    contrast(89%);
   --dark: #232323;
   --dark-accent: rgb(76, 75, 72);
   --embed: #232323;
+  --code-accent: #f4ede5;
+  --tool-tip: #faf8f7;
 }
 
 .dark {
@@ -40,38 +46,24 @@ body {
   --dark: #1b1b1a;
   --dark-accent: #3a3937;
   --embed: rgba(242, 244, 250, 0.2);
+  --code-accent: rgb(76, 75, 72);
+  --tool-tip: #4c4b48;
 }
 
 div,
-a,
-button {
+a {
   font-family: "Lato";
   font-size: 14px;
   color: var(--color, black);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  color:  var(--color, black);
-}
-
-button, .button {
-  text-decoration: none;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var(--color, black);
-  text-align: center;
-  padding: 10px 20px;
-  background-color: rgba(196, 196, 196, 0.2);
-  border: none;
-  transition: background-color 0.3s;
-  border-radius: 32px;
-  cursor: pointer;
-}
-
-button:hover, .button:hover {
-  background-color: rgba(196, 196, 196, 0.4);
-}
-
-button:active, .button:active {
-  background-color: rgba(196, 196, 196, 0.1);
 }
 
 @keyframes fadein {
diff --git a/src/assets/ApiKey.png b/src/assets/ApiKey.png
index d5977b3..77c7989 100644
Binary files a/src/assets/ApiKey.png and b/src/assets/ApiKey.png differ
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 90e0c77..396bb08 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,25 @@ export default {
   top: 0;
   height: 56px;
   width: 100%;
-  background: var(--light, #f0eeeb);
-  padding: 0 24px;
+  padding: 0 200px;
+  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;
+    border-spacing: 15px;
 
-    > img {
-      filter: var(--logo);
-      height: 20px;
-    }
-
-    &:nth-child(5) {
+    &:nth-child(7) {
       margin-left: auto;
     }
 
@@ -63,6 +99,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>
diff --git a/src/views/ApiKeyPage.vue b/src/views/ApiKeyPage.vue
index d5a59c1..f5dcf13 100644
--- a/src/views/ApiKeyPage.vue
+++ b/src/views/ApiKeyPage.vue
@@ -1,33 +1,45 @@
 <template>
   <div class="api-key">
-    <h2>Sandbox API Key</h2>
+    <h2 class="title">Sandbox API Key</h2>
     <form @submit="enterKey">
-      <div class="info">
-        Activate the Lithic API and get your Sandbox API Key from
-        <a href="https://lithic.com/account" target="_blank">
-          Lithic.com/account
-        </a>
-        or
-        <a href="https://privacy.com/account" target="_blank">
-          Privacy.com/account
-        </a>
+      <div class="section">
+        <p class="tooltip">1</p>
+        <div class="right">
+          <p class="section-text">
+            Activate the Lithic API and get your Sandbox API key from
+            <a
+              href="https://app.lithic.com/login?goto=%2Faccount"
+              target="_blank"
+              >Lithic.com/account</a
+            >
+            go to the <code>.env</code> file, assign
+            <code>VUE_APP_API_KEY</code> to the Sandbox API Key and rerun
+            <code>npm run serve</code>
+          </p>
+        </div>
       </div>
-      <img src="@/assets/ApiKey.png" />
-      <div class="info">
-        go to the <code>.env</code> file, assign
-        <code>VUE_APP_API_KEY</code>
-        to the Sandbox API Key and rerun
-        <code>npm run serve</code>
+      <hr />
+      <div class="section">
+        <p class="tooltip">2</p>
+        <div class="right">
+          <p class="section-text">
+            To access our self-hosted demo, enter your Sandbox API key below
+          </p>
+          <div class="input-container" @click="focusInput">
+            <p class="key-text">Sandbox Key</p>
+            <input
+              type="text"
+              v-model="apiKey"
+              placeholder="12345"
+              ref="input"
+              required
+            />
+          </div>
+        </div>
       </div>
-      <br />
-      <div class="info">or for quick use, enter the key below</div>
-      <input
-        required
-        v-model="apiKey"
-        placeholder="Enter a Sandbox API Key..."
-      />
-      <button>Submit</button>
+      <button type="submit">Submit &rarr;</button>
     </form>
+    <img src="../assets/apiKey.png" class="api-key-image" />
   </div>
 </template>
 
@@ -57,6 +69,9 @@ export default {
         this.$router.push("/");
       }
     },
+    focusInput() {
+      this.$refs.input.focus();
+    },
   },
 };
 </script>
@@ -64,52 +79,86 @@ export default {
 <style scoped lang="scss">
 .api-key {
   box-sizing: border-box;
-  padding: 35px;
-  max-width: 460px;
+  padding: 0 200px;
   margin: 0 auto;
-
+  .title {
+    font-size: 48px;
+  }
   form {
-    display: grid;
-    grid-template-columns: 1fr;
-    row-gap: 20px;
-
-    img {
-      outline: 5px solid #f0eeeb;
-      width: 100%;
-    }
-
-    > .info {
+    display: flex;
+    flex-direction: column;
+    .section {
+      display: grid;
+      grid-template-columns: 1fr 20fr;
       font-size: 16px;
-      line-height: 1.6;
-
-      code {
-        font-size: 14px;
-        color: var(--color, black);
-        background: var(--light, #f0eeeb);
-        padding: 4px;
-        border-radius: 4px;
+      .tooltip {
+        background: var(--tool-tip, rgb(76, 75, 72));
+        width: 38px;
+        height: 38px;
+        border-radius: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
-
-      a {
-        font-size: 16px;
-        text-decoration: none;
-        font-weight: bold;
-
-        &:hover {
-          text-decoration: underline;
+      .right {
+        margin-left: 32px;
+        .section-text {
+          line-height: 27.2px;
+          font-size: 16px;
+          code {
+            border-radius: 2px;
+            padding: 1px 4px;
+            background: var(--code-accent, rgb(76, 75, 72));
+          }
+          a {
+            color: #f05f3a;
+            text-decoration: none;
+            font-size: 16px;
+          }
+        }
+        .input-container {
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid rgba(196, 196, 196, 0.2);
+          .key-text {
+            opacity: 0.5;
+            width: 100px;
+          }
+          input {
+            border: none;
+            outline: none;
+            width: 100%;
+            margin-left: 50px;
+            background-color: transparent;
+            color: var(--color, #fff);
+          }
         }
       }
     }
-  }
 
-  input {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 10px;
+    button {
+      color: #f05f3a;
+      font-size: 16px;
+      text-decoration: underline;
+      padding: 0px;
+      background-color: transparent;
+      outline: none;
+      border: none;
+      cursor: pointer;
+      align-self: flex-end;
+      margin-top: 12px;
+    }
+    hr {
+      border: none;
+      border-top: 1px solid rgba(196, 196, 196, 0.2);
+      width: 100%;
+    }
   }
-
-  button {
+  .api-key-image {
     width: 100%;
+    margin-top: 36px;
+    object-fit: contain;
+    border-radius: 12px;
   }
 }
 </style>