diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index 38b956b1e8..06cc0a0156 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -6,57 +6,42 @@
         <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
         <div class="usa-logo">
           <em class="usa-logo__text">
-            <a href="{{ "/" | url}}" title="{{site.title}}">Open Source Respository Metrics Website</a>
+            <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/site/index.liquid b/app/site/index.liquid
index 94b8f6b365..3dce015712 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -4,21 +4,15 @@ layout: base
 <div class="grid-container">
   <section class="home-page-description">
     <div class="description-styling">
-      <h2>Metrics & Code.JSON</h2>
+      <h2>Metrics</h2>
     </div>
-    <p>
+    <p class="home-paragraph">
       <strong>Metrics</strong> provides meaningful insights into project performance and code quality,
       empowering teams to make informed decisions. By analyzing key data points such as contributor activity,
       issue resolution times, code complexity and dependency health, Metrics transforms raw data into actionable visualizations.
       With a focus on clarity and accessibility, Metrics enables organizations to monitor progress,
       identify improvement opportunities and measure the impact of work.
     </p>
-    <p>
-      <strong>Code.JSON</strong> serves as a powerful tool for open-source project transparency and compliance.
-      Code.JSON provides a standerdized metadata format that enables dicoverability, reuse and collaboration on governemnt open-source
-      projects. Using the <a href="https://github.com/DSACMS/codejson-generator" target="_blank" rel"noopener noreferrer">code.json generator,</a> organizations can effortlessly create and validate their code.json files,
-      ensuring alignment with federal guidelines while showcasing open-source contributions to the broader community. 
-    </p>
     <p>
       {{ site.description }}
     </p>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 3cc2d31271..3bedd6c344 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -57,104 +57,7 @@ h1 {
   font-size: 1.1em;
 }
 
-.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 {
-  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;
-}
-
-.usa-nav__primary button[aria-expanded="true"] {
+.menu-btn-styling {
   background-color: #fff;
 }
 
@@ -180,6 +83,10 @@ h2 {
   margin-bottom: 0;
 }
 
+.home-paragraph {
+  font-size: 1.3rem;
+}
+
 /* Cards */
 .usa-card-group-home {
   display: flex;
@@ -691,7 +598,34 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   outline-offset: 0rem;
 }
 
-@media screen and (min-width: 768px) {
+@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 {
     height: 50px;
     width: auto;
@@ -740,8 +674,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");
     }
 }