diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 3c7736177d33ad13db0c0fc5ae8062377babb3a8..9f2ba05e53e04abfd3e4d910d381866230bfe7f6 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-navbar toggleable="md" type="dark" variant="" fixed="top">
+    <b-navbar toggleable="lg" type="dark" variant="" fixed="top">
       <b-navbar-brand to="/" class="home-link">
         <YodaLogo />
       </b-navbar-brand>
@@ -13,6 +13,12 @@
 
       <b-collapse id="navbar-toggle-collapse" is-nav>
         <b-navbar-nav class="ml-auto">
+          <router-link class="nav-item" to="/" exact>
+            HOME
+          </router-link>
+          <router-link class="nav-item" to="/products">
+            PRODUCTS
+          </router-link>
           <router-link class="nav-item" to="/services">
             SERVICES
           </router-link>
@@ -29,6 +35,7 @@
 </template>
 <script>
 import YodaLogo from "@/assets/images/icons/Logo_P1_Yoda_Campfire-WH.svg";
+
 export default {
   name: "NavBar",
   components: {
@@ -39,8 +46,6 @@ export default {
 <style lang="scss" scoped>
 .navbar {
   background-color: $secondary-bg-color;
-  // margin-left: auto;
-  // margin-right: auto;
 
   .navbar-toggler {
     outline: none;
@@ -64,15 +69,15 @@ export default {
 
     .nav-item {
       padding: 0.5rem;
-      margin: 0 1rem;
-      width: 130px;
+      margin: 0 0.5rem;
+      // width: 120px;
       letter-spacing: 0.02rem;
       color: $secondary-text-color;
       border-top: 2px solid transparent;
       border-bottom: 2px solid transparent;
     }
 
-    .router-link-exact-active {
+    .router-link-active {
       border-bottom: 2px solid $p1-light-green;
       color: $p1-light-green;
     }
@@ -81,22 +86,22 @@ export default {
       margin-right: 0;
     }
   }
+}
 
-  @include media-breakpoint-down(sm) {
-    .home-link {
-      margin-left: 1rem;
-    }
-    .navbar-nav {
-      margin-right: 1rem;
-    }
+@include media-breakpoint-down(md) {
+  .navbar .home-link {
+    margin-left: 1rem;
   }
-  @include media-breakpoint-only(md) {
-    .home-link {
-      margin-left: 1.5rem;
-    }
-    .navbar-nav {
-      margin-right: 1.5rem;
-    }
+  .navbar .navbar-nav {
+    margin-right: 1rem;
+  }
+}
+@include media-breakpoint-only(lg) {
+  .navbar .home-link {
+    margin-left: 1.5rem;
+  }
+  .navbar .navbar-nav {
+    margin-right: 1.5rem;
   }
 }
 </style>