diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index 22a5b9b326..06cc0a0156 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -4,60 +4,44 @@
     <div class="usa-nav-bar">
       <div class="title">
         <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
-        <h1>Metrics Website</h1>
-      </div>
-      <div class="usa-logo">
-        <em class="usa-logo__text">
-          <a href="{{ "/" | url}}" title="{{site.title}}">{{ site.title }}</a>
-        </em>
+        <div class="usa-logo">
+          <em class="usa-logo__text">
+            <a href="{{ "/" | url}}" title="{{site.title}}">Open Source Repository Metrics Website</a>
+          </em>
+        </div>
+        <button class="usa-menu-btn menu-btn-styling">
+          <svg
+            class="usa-icon--size-5 toggle-icon"
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+          >
+            <use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
+          </svg>
+        </button>
       </div>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav nav-styling">
-      <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
+    <nav aria-label="Primary navigation" class="usa-nav">
+      <button class="usa-nav__close">
+        <svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
+          <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
+        </svg>
+      </button>
+      <ul class="usa-nav__primary usa-accordion">
         <li class="usa-nav__primary-item">
-          <button
-            type="button"
-            class="usa-accordion__button usa-nav__link button-styling"
-            aria-expanded="false"
-            aria-controls="basic-nav-section-one"
-          >
-            <svg
-              class="usa-icon--size-7 toggle-icon"
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-            >
-              <use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
-            </svg>
-          </button>
-          <ul id="basic-nav-section-one" class="usa-nav__submenu">
-            <li class="close-icon">
-                <svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
-                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
-                </svg>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
-                <span>Home</span>
-              </a>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a
-                href="{{ "/organizations/" | url}}"
-                class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
-              >
-                <span>Organizations</span>
-              </a>
-            </li>
-            <li class="usa-nav__primary-item">
-              <a
-                href="{{ "/projects/" | url}}"
-                class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
-              >
-                <span>Projects</span>
-              </a>
-            </li>
-          </ul>
+          <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a href="{{ "/organizations/" | url}}" class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}">
+            <span>Organizations</span>
+          </a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a href="{{ "/projects/" | url}}" class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}">
+            <span>Projects</span>
+          </a>
         </li>
       </ul>
     </nav>
diff --git a/app/site/_layouts/base.liquid b/app/site/_layouts/base.liquid
index 9e97cacb6e..79e5ede758 100644
--- a/app/site/_layouts/base.liquid
+++ b/app/site/_layouts/base.liquid
@@ -16,5 +16,4 @@
       {% include 'footer.liquid' %}
     </footer>
   </body>
-  <!-- <script type="module" src="{{ "/src/js/nav.js" | url}}"></script> -->
 </html>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 574e654d82..b144451fe4 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -52,109 +52,12 @@ h1 {
   margin-right: 10px;
 }
 
-.usa-logo {
-  font-size: 1.5em;
-  margin: 1% 0 1% 0;
-}
-
-.usa-nav__primary-item {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.usa-nav {
-  display: none;
-  position: relative;
-  top: 4%;
-  right: -10%;
-  background: #fff;
-  z-index: 1000;
-  height: fit-content;
-}
-
-.usa-nav.is-visible {
-  display: block;
-}
-
-.nav-styling {
-  width: 5% !important;
-}
-
-.nav-styling.usa-nav.is-visible {
-  height: 35%;
-}
-
-.close-icon {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1%;
-}
-
-.usa-nav__submenu {
-  padding: 1rem;
-  border-radius: 10px;
-  width: fit-content;
-  background-color: #fff;
-  list-style: none;
-  margin: 0;
-  font-size: 1.5rem;
-  padding: 10% 15%;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
-}
-
-.usa-nav__submenu li {
-  margin-bottom: .6rem;
-}
-
-.usa-nav__submenu a {
-  text-decoration: none;
-  font-size: 1.125rem;
-  color: #000;
-}
-
-.usa-nav__submenu a.usa-current {
+.usa-logo a {
   color: #043884;
-  font-weight: bold;
-}
-
-.usa-nav__submenu a:hover {
-  color: #E7C000;
-}
-
-.usa-icon {
-  fill: #000;
-}
-
-.button-styling:hover {
-  cursor: pointer;
-}
-
-.usa-header--basic .usa-nav__primary-item > .usa-current::after, 
-.usa-header--basic .usa-nav__link:hover::after {
-  background-color: #fff
-}
-
-.usa-nav__primary-navigation button {
-  text-decoration: none;
-}
-
-.usa-nav__primary-navigation button:hover {
-  text-decoration: none !important;
-}
-
-.usa-nav__primary-navigation button:active {
-  text-decoration: none;
-}
-
-.usa-nav__primary-navigation button:focus {
-  outline: none;
-}
-
-.usa-accordion__button.usa-nav__link.button-styling::after {
-  background-color: #fff;
+  font-size: 1.1em;
 }
 
-.usa-nav__primary button[aria-expanded="true"] {
+.menu-btn-styling {
   background-color: #fff;
 }
 
@@ -691,14 +594,37 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   outline-offset: 0rem;
 }
 
-@media screen and (min-width: 768px) {
-  h1 {
-    font-size: 1.9em;
-    margin: 3% 2% 0 2%;
+@media (max-width: 767px) {
+  .usa-nav {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    background: #fff;
+    padding: 1rem;
   }
+  
+  .usa-nav.is-visible {
+    display: block;
+  }
+  
+  .usa-menu-btn {
+    display: block;
+  }
+  
+  .usa-nav__close {
+    display: block;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+}
 
+@media (min-width: 768px) {
   .logo {
-    width: 120px;
+    height: 50px;
+    width: auto;
   }
 
   .dashboard-container {
@@ -744,6 +670,27 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   }
 }
 
-@media screen and (min-width: 1024px) {
-  
+@media (min-width: 1024px) {
+  .usa-logo a{
+    font-size: 1.5em;
+  }
+
+  .usa-menu-btn,
+  .usa-nav__close {
+    display: none;
+  }
+
+  .usa-nav {
+    display: flex;
+    justify-content: flex-end;
+    width: 30% !important;
+  }
+
+  .usa-nav__primary-item {
+    display: inline-block;
+  }
+
+  .usa-nav-link {
+    text-decoration: none;
+  }
 }
\ No newline at end of file
diff --git a/app/src/js/nav.js b/app/src/js/nav.js
index afd1d4bf3d..faced794fa 100644
--- a/app/src/js/nav.js
+++ b/app/src/js/nav.js
@@ -1,43 +1,27 @@
 export function createNavigation() {
-    const toggleButton = document.querySelector(".usa-accordion__button");
+    const menuButton = document.querySelector(".usa-menu-btn");
     const closeButton = document.querySelector(".usa-nav__close");
     const menu = document.querySelector(".usa-nav");
-    const menuIcon = document.querySelector(".usa-accordion__button svg use");
 
-    function toggleMenu(e) {
-        e.preventDefault();
+    function toggleMenu() {
         const isOpen = menu.classList.toggle("is-visible");
-
-        toggleButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
-        menuIcon.setAttribute(
-            "href",
-            isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
-        );
+        menuButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
     }
 
     function closeMenu() {
-        if(menu.classList.contains("is-visible")) {
-            menu.classList.remove("is-visible");
-            toggleButton.setAttribute("aria-expanded", "false");
-            menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu");
-        }
+        menu.classList.remove("is-visible");
+        menuButton.setAttribute("aria-expanded", "false");
     }
 
-    if(toggleButton && closeButton && menu) {
-        toggleButton.addEventListener("click", toggleMenu);
-
-        closeButton.addEventListener("click", (e) => {
-            e.preventDefault();
-            closeMenu();
-        })
+    if(menuButton && closeButton && menu) {
+        menuButton.addEventListener("click", toggleMenu);
+        closeButton.addEventListener("click", closeMenu);
 
-        document.addEventListener("click", (e) => {
-            if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
-                closeMenu();
+        document.activeElement("click", (e) => {
+            if(!menu.contains(e.target) && !menuButton.contains(e.target)) {
+                closeMenu
             }
         });
-    } else {
-        console.error("Some elements are not found");
     }
 }