diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index f20bc4e5e1..ef6fe74621 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -3,7 +3,7 @@
   <div class="usa-navigation-container">
     <div class="usa-nav-bar">
       <div class="title">
-        <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo">
+        <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
         <h1>Metrics Website</h1>
       </div>
       <div class="usa-logo">
@@ -12,17 +12,17 @@
         </em>
       </div>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav">
+    <nav aria-label="Primary navigation" class="usa-nav nav-styling">
       <button type="button" class="usa-nav__close">
-        <svg class="usa-icon--size-7" aria-hidden="true" focusable="false" role="img">
+        <svg class="usa-icon--size-7 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">
+      <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
         <li class="usa-nav__primary-item">
           <button
             type="button"
-            class="usa-accordion__button usa-nav__link"
+            class="usa-accordion__button usa-nav__link button-styling"
             aria-expanded="false"
             aria-controls="basic-nav-section-one"
           >
diff --git a/app/site/_layouts/org-report.liquid b/app/site/_layouts/org-report.liquid
index 5835206ef8..ed6da2a9a5 100644
--- a/app/site/_layouts/org-report.liquid
+++ b/app/site/_layouts/org-report.liquid
@@ -2,11 +2,11 @@
 layout: base
 ---
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
-<div class="grid-container">
+<div class="grid-container-org-report">
   {% assign organization = organizations | findObject: org %}
 
   <div class="report_heading">
-    <h1>
+    <h1 class=report_heading-title>
       Report for
       <a target="_blank" href="https://github.com/{{ org }}">{{ org }}</a>
       <img
@@ -23,7 +23,7 @@ layout: base
       <div class="github-information">
         <div class="stat-container" id="projects">
           <div class="projects-heading">
-            <h4>
+            <h4 class=repo-stats>
               <span>
                 <svg
                   class="usa-icon"
@@ -40,7 +40,7 @@ layout: base
         </div>
         <div class="stat-container" id="followers">
           <div class="followers-heading">
-            <h4>
+            <h4 class=repo-stats>
               <span>
                 <svg
                   class="usa-icon"
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 55c788ca49..1c15419b55 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -25,11 +25,11 @@ layout: base
   <div class="dashboard-container">
     <div class="filters-container">
       {% comment %} filter by organization {% endcomment %}
-      <div class="usa-accordion border-base-lighter border-2px">
-        <div class="usa-accordion__heading">
-          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
+      <div class="usa-accordion">
+        <div class="usa-accordion__heading filter-heading">
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
         </div>
-        <div id="organization-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+        <div id="organization-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
             <fieldset class="usa-fieldset" aria-labelledby="organization-filter">
               <legend class="usa-sr-only" aria-labelledby="organization-filtering"></legend>
@@ -46,11 +46,11 @@ layout: base
         </div>
       </div>
       {% comment %} filter by maturity model tier {% endcomment %}
-      <div class="usa-accordion border-base-lighter border-2px">
-        <div class="usa-accordion__heading">
-          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
+      <div class="usa-accordion">
+        <div class="usa-accordion__heading filter-heading">
+          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
         </div>
-        <div id="tier-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+        <div id="tier-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
             <fieldset class="usa-fieldset" aria-labelledby="tier-filter">
               <legend class="usa-sr-only" aria-labelledby="tier-filtering"></legend>
@@ -67,11 +67,11 @@ layout: base
         </div>
       </div>
       {% comment %} filter by fisma compliance level {% endcomment %}
-      <div class="usa-accordion border-base-lighter border-2px">
-        <div class="usa-accordion__heading">
-          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
+      <div class="usa-accordion">
+        <div class="usa-accordion__heading filter-heading">
+          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
         </div>
-        <div id="fisma-level-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+        <div id="fisma-level-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
             <fieldset class="usa-fieldset" aria-labelledby="fisma-level-filter">
               <legend class="usa-sr-only" aria-labelledby="fisma-level-filtering"></legend>
@@ -88,11 +88,11 @@ layout: base
         </div>
       </div>
       {% comment %} filter by project type {% endcomment %}
-      <div class="usa-accordion border-base-lighter border-2px">
-        <div class="usa-accordion__heading">
-          <button class="usa-accordion__button font-heading-md text-base-darker" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
+      <div class="usa-accordion">
+        <div class="usa-accordion__heading filter-heading">
+          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
         </div>
-        <div id="project-type-content" class="usa-accordion__content usa-prose border-top-1px border-base-lighter" hidden>
+        <div id="project-type-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
             <fieldset class="usa-fieldset" aria-labelledby="project-type-filter">
               <legend class="usa-sr-only" aria-labelledby="project-type-filtering"></legend>
@@ -115,7 +115,7 @@ layout: base
         <div class="search-and-sort">
 
           <section aria-label="Small search component">
-            <form class="usa-search usa-search--small" role="search" id="search-form">
+            <form class="usa-search usa-search--small project-search" role="search" id="search-form">
               <label class="usa-sr-only" for="search-input">Search</label>
               <input
                 class="usa-input"
@@ -134,34 +134,10 @@ layout: base
             </form>
           </section>
 
-          <!-- <section aria-label="Small search component" class="sort-dropdown">
-            <form class="usa-form usa-search usa-search--small" id="sort-selection-form">
-              <select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
-                  <label class="usa-label" for="sort-selection">Sort by</label>
-                  <option valuer="" disabled selected>Sort By</option>
-                  <option value="name">Project Name</option>
-                  <option value="fisma_level">FISMA Compliance Level</option>
-                  <option value="project_type">Project Type</option>
-                  <option value="stargazers_count">Stars</option>
-                  <option value="maturity_model_tier">Maturity Model Tier</option>
-                  <option value="forks_count">Forks</option>
-              </select>
-              <button class="usa-button" type="submit">
-                <img
-                  src="/assets/img/usa-icons-bg/search--white.svg"
-                  class="usa-search__submit-icon"
-                  alt="Search"
-                />
-                  </button>
-            </form>
-          </section> -->
-
-
-
-          <div class="sort-dropdown">
-            <form class="usa-form" id="sort-selection-form">
-              <label class="usa-label" for="sort-selection">Sort by</label>
-              <select class="usa-select border-base-light" id="sort-selection" name="sort-selection">
+          <div class="sort-dropdown sort-styling">
+            <form class="usa-form sort-dropdown" id="sort-selection-form">
+              <label class="usa-label" for="sort-selection"></label>
+              <select class="usa-select select-sort" id="sort-selection" name="sort-selection">
                 <option valuer="" disabled selected>Sort By</option>
                 <option value="name">Project Name</option>
                 <option value="fisma_level">FISMA Compliance Level</option>
@@ -172,9 +148,9 @@ layout: base
               </select>
             </form>
 
-            <form class="usa-form" id="sort-direction-form">
-              <label class="usa-label" for="sort-direction">Sort Direction</label>
-              <select class="usa-select border-base-light" id="sort-direction" name="sort-direction">
+            <form class="usa-form project-search" id="sort-direction-form">
+              <label class="usa-label" for="sort-direction"></label>
+              <select class="usa-select select-sort" id="sort-direction" name="sort-direction">
                 <option valuer="" disabled selected>Sort Direction</option>
                 <option value="ascending">Ascending</option>
                 <option value="descending">Descending</option>
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 8255086822..5eae99a2d9 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -16,6 +16,7 @@ main {
 .usa-header {
   align-items: center;
   display: flex;
+  z-index: 1010;
 }
 
 .usa-navigation-container {
@@ -56,17 +57,88 @@ h1 {
 }
 
 .usa-nav {
-  opacity: 1;
+  display: none;
+  position: fixed;
+  top: 4%;
+  right: 0;
+  background: #fff;
+  z-index: 1000;
+  height: fit-content;
+}
+
+.usa-nav.is-visible {
+  display: block;
 }
 
-.usa-nav.is-hidden {
-  opacity: 1;
+.nav-styling {
+  width: 5% !important;
+}
+
+.nav-styling.usa-nav.is-visible {
+  height: 35%;
+}
+
+.usa-nav__close {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
+  z-index: 1100;
+  background: none;
+  border: none;
+}
+
+.usa-nav__close svg {
+  width: 24px;
+  height: 24px;
+  fill: #000;
+}
+
+.usa-nav__submenu {
+  padding: 1rem;
+  border: .5px solid #999999;
+  width: fit-content;
+  background-color: #fff;
+  list-style: none;
+  margin: 0;
+  font-size: 1.5rem;
+  padding: 0 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: 1rem;
+}
+
+.usa-nav__submenu a {
+  text-decoration: none;
+  font-size: 1.125rem;
+  color: #000;
+}
+
+.usa-nav__submenu a.usa-current {
+  font-weight: bold;
 }
 
 .usa-icon {
   fill: #000;
 }
 
+.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;
+}
 
 /* Home page main */
 .grid-container {
@@ -326,35 +398,146 @@ a.usa-link:visited {
   margin-left: 5%;
 }
 
-/* .githubinformation {
+.filters-container {
+  margin-right: 5%;
+}
+
+.filter-heading {
+  border: none;
+}
+
+.filter-button {
+  display: flex;
+  background-color: #E0EAF8;
+  border-radius: 50px 50px 0 0;
+  border: none;
+  font-weight: 600; 
+  justify-content: center;
+  min-width: 215px;
+  padding: 7% 0 7% 0;
+}
+
+.filter-button:hover {
+  background-color: #ecdd90;
+}
+
+.filter-button[aria-expanded="false"] {
+  background-color: #E0EAF8;
+  border-radius: 50px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  min-width: 215px;
+}
+
+.filter-button[aria-expanded="false"]:focus {
+  outline: none;
+}
+
+.filter-button[aria-expanded="false"]:hover {
+  background-color: #ecdd90;
+}
+
+.filter-button:not([disabled]):focus {
+  outline: none;
+}
+
+.filter-content {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.search-and-sort {
   display: flex;
-  flex-direction: row;
   justify-content: space-evenly;
-} */
+}
+
+.sort-styling {
+  display: flex;
+  margin-top: -25px;
+  justify-content: space-evenly;
+}
+
+.project-search {
+  padding: 0;
+  margin: 0;
+}
+
+.select-sort {
+  height: 35px;
+  width: fit-content;
+  margin-right: 30px;
+  padding: 0 5% 0 5%;
+}
+
+.report_heading-title {
+  display: flex;
+}
 
-/* .stat-container {
+/* ORG REPORTS */
+.grid-container-org-report {
   display: flex;
+  width: 80vw;
   flex-direction: column;
   align-items: center;
+}
+
+/* .report_heading {
+  display: flex;
+  width: 90%;
+  justify-content: center;
 } */
 
+.report-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+
+.github-information {
+  display: flex;
+  justify-content: center;
+}
+
+.stat-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20%;
+}
+
+.repo-stats {
+  display: flex;
+  font-size: 1.4rem;
+  margin-bottom: 0;
+}
+
+.post {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 /* This is so that augur visualizations have the buttons cropped out. */
-/* .firstResponsePRCrop img {
+.firstResponsePRCrop img {
   width: 900px;
   height: 550px;
   object-fit: cover;
-} */
+}
 
-/* .main-tag {
+.main-tag {
   background-color: #1a4480;
   padding: 0.5rem;
   font-weight: bolder;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem; Adjust the gap as needed
+  gap: 0.25rem; /*Adjust the gap as needed */
   border-radius: 0.25rem;
-} */
+}
+
+.graph-container {
+  width: 100%;
+}
 
 /* .tools-tag {
   background-color: green;
diff --git a/app/src/js/nav.js b/app/src/js/nav.js
index 1a82c06e6e..afd1d4bf3d 100644
--- a/app/src/js/nav.js
+++ b/app/src/js/nav.js
@@ -4,24 +4,40 @@ export function createNavigation() {
     const menu = document.querySelector(".usa-nav");
     const menuIcon = document.querySelector(".usa-accordion__button svg use");
 
-    if (toggleButton && closeButton && menu) {
+    function toggleMenu(e) {
+        e.preventDefault();
+        const isOpen = menu.classList.toggle("is-visible");
 
-        toggleButton.addEventListener("click", () => {
-            const isOpen = menu.classList.toggle("is-hidden");
+        toggleButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        menuIcon.setAttribute(
+            "href",
+            isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
+        );
+    }
 
-            menuIcon.setAttribute(
-                "xlink:href",
-                isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
-            );
-        });
+    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");
+        }
+    }
+
+    if(toggleButton && closeButton && menu) {
+        toggleButton.addEventListener("click", toggleMenu);
 
-        closeButton.addEventListener("click", () => {
-            menu.classList.remove("is-hidden");
+        closeButton.addEventListener("click", (e) => {
+            e.preventDefault();
+            closeMenu();
+        })
 
-            menuIcon.setAttribute("xlink:href", "/assets/img/sprite.svg#menu");
+        document.addEventListener("click", (e) => {
+            if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
+                closeMenu();
+            }
         });
     } else {
-        console.error("One or more elements is not found")
+        console.error("Some elements are not found");
     }
 }
 
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index f9a8b53aeb..69bdbdc836 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -138,7 +138,6 @@ function createProjectCards() {
     projectSectionsTemplate.className = 'project_section';
     templateDiv.append(projectSectionsTemplate);
   
-    // Add report heading for each org
     const reportHeading = document.createElement('div');
     reportHeading.className = "report_heading";
     reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
@@ -167,54 +166,110 @@ function createProjectCards() {
 function renderPaginationControls(totalProjectsCount) {
   const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div');
   paginationDiv.id = 'pagination-controls';
-  paginationDiv.innerHTML = ''; 
+  paginationDiv.className = 'usa-pagination';
+  paginationDiv.innerHTML = '';
 
-  // Determine the total number of pages
-  // const totalProjects = Object.values(projects).flat().length; 
   const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);
 
-  // Create Previous Button
-  const prevButton = document.createElement('button');
-  prevButton.textContent = 'Previous';
-  prevButton.disabled = currentPage === 1;
+  const paginationList = document.createElement('ul');
+  paginationList.className = 'usa-pagination__list';
+
+  const prevItem = document.createElement('li');
+  prevItem.className = 'usa-pagination__item usa-pagination__arrow';
+  const prevButton = document.createElement('a');
+  prevButton.href = 'javascript:void(0);';
+  prevButton.className = 'usa-pagination__link usa-pagination__previous-page';
+  prevButton.setAttribute('aria-label', 'Previous page');
+  if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');
+  prevButton.innerHTML = `
+    <svg class="usa-icon" aria-hidden="true" role="img">
+      <use xlink:href="/assets/img/sprite.svg#navigate_before"></use>
+    </svg>
+    <span class="usa-pagination__link-text">Previous</span>
+  `;
   prevButton.addEventListener('click', () => {
     if (currentPage > 1) {
       currentPage--;
-      createProjectCards(); 
+      createProjectCards();
     }
   });
-  paginationDiv.appendChild(prevButton);
-
-  // Create Page Number Indicators
-  for (let i = 1; i <= totalPages; i++) {
-    const pageButton = document.createElement('button');
-    pageButton.textContent = i;
-    pageButton.disabled = i === currentPage; 
-    pageButton.addEventListener('click', () => {
-      currentPage = i;
-      createProjectCards(); 
-    });
-    paginationDiv.appendChild(pageButton);
-  }
+  prevItem.appendChild(prevButton);
+  paginationList.appendChild(prevItem);
+
+  const pageRange = getPageRange(currentPage, totalPages, 3);
+  pageRange.forEach((page, index) => {
+    const pageItem = document.createElement('li');
+    pageItem.className = 'usa-pagination__item';
+
+    if (page === '...') {
+      pageItem.className += ' usa-pagination__overflow';
+      pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;
+    } else {
+      pageItem.className += ' usa-pagination__page-no';
+      const pageButton = document.createElement('a');
+      pageButton.href = 'javascript:void(0);';
+      pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`;
+      pageButton.textContent = page;
+      pageButton.setAttribute('aria-label', `Page ${page}`);
+      if (page === currentPage) pageButton.setAttribute('aria-current', 'page');
+      pageButton.addEventListener('click', () => {
+        currentPage = page;
+        createProjectCards();
+      });
+      pageItem.appendChild(pageButton);
+    }
+    paginationList.appendChild(pageItem);
+  });
 
-  // Create Next Button
-  const nextButton = document.createElement('button');
-  nextButton.textContent = 'Next';
-  nextButton.disabled = currentPage === totalPages;
+  const nextItem = document.createElement('li');
+  nextItem.className = 'usa-pagination__item usa-pagination__arrow';
+  const nextButton = document.createElement('a');
+  nextButton.href = 'javascript:void(0);';
+  nextButton.className = 'usa-pagination__link usa-pagination__next-page';
+  nextButton.setAttribute('aria-label', 'Next page');
+  if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');
+  nextButton.innerHTML = `
+    <span class="usa-pagination__link-text">Next</span>
+    <svg class="usa-icon" aria-hidden="true" role="img">
+      <use xlink:href="/assets/img/sprite.svg#navigate_next"></use>
+    </svg>
+  `;
   nextButton.addEventListener('click', () => {
     if (currentPage < totalPages) {
       currentPage++;
-      createProjectCards(); // Re-render cards
+      createProjectCards();
     }
   });
-  paginationDiv.appendChild(nextButton);
+  nextItem.appendChild(nextButton);
+  paginationList.appendChild(nextItem);
+
+  paginationDiv.appendChild(paginationList);
 
-  // Append pagination controls to the DOM
   if (!document.body.contains(paginationDiv)) {
     templateDiv.parentElement.appendChild(paginationDiv);
   }
 }
 
+function getPageRange(currentPage, totalPages, visibleRange) {
+  const range = [];
+  const start = Math.max(2, currentPage - visibleRange);
+  const end = Math.min(totalPages - 1, currentPage + visibleRange);
+
+  range.push(1);
+
+  if (start > 2) range.push('...');
+
+  for (let i = start; i <= end; i++) {
+    range.push(i);
+  }
+
+  if (end < totalPages - 1) range.push('...');
+
+  if (totalPages > 1) range.push(totalPages); 
+
+  return range;
+}
+
 // Checks for Checkbox event and updates filters
 addGlobalEventListener('change', '.usa-checkbox__input', e => {
   // Can use this e.target.name to update selected filters object
diff --git a/app/src/js/templates.js b/app/src/js/templates.js
index 2e958b21da..266f48aed5 100644
--- a/app/src/js/templates.js
+++ b/app/src/js/templates.js
@@ -11,7 +11,6 @@ export const reportHeadingTemplate = function(data) {
     `
 }
 
-
 export function projectCardTemplate(data) {  
     const projectUrl = `${data.baseurl}/${ data.owner }/${ data.name }/`;
     const description = data.description !== null ? data.description : "";