diff --git a/app/.eleventy.js b/app/.eleventy.js
index 2f4732487a..bb5510e861 100644
--- a/app/.eleventy.js
+++ b/app/.eleventy.js
@@ -71,6 +71,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy({
     "src/img": "assets/img",
+    "src/js": "src/js",
     "site/img": "assets/img",
     "site/_includes/css": "css",
     "site/_includes/js": "assets/js",
@@ -88,7 +89,7 @@ module.exports = function (eleventyConfig) {
     "stroke-width": 2,
   })
 
-  const pathPrefix = process.env.NODE_ENV === "production" ? "/metrics" : ""
+  const pathPrefix = process.env.NODE_ENV.includes("production") ? "/metrics" : ""
 
   return {
     dir: {
diff --git a/app/package.json b/app/package.json
index 843e4eb742..cacb07c4dc 100644
--- a/app/package.json
+++ b/app/package.json
@@ -8,6 +8,11 @@
     "start:eleventy": "eleventy --serve",
     "start:rollup": "rollup --config rollup.config.mjs -w",
     "start:postcss": "postcss ./src/css -d ./site/_includes/css -w",
+    "prod": "NODE_ENV=test-production run-s -l prod:*",
+    "prod:clean": "rm -rf dist",
+    "prod:rollup": "rollup --config rollup.config.mjs --bundleConfigAsCjs",
+    "prod:postcss": "postcss ./src/css -d ./site/_includes/css",
+    "prod:eleventy": "eleventy --serve",
     "build": "NODE_ENV=production run-s -l build:*",
     "build:clean": "rm -rf dist",
     "build:rollup": "rollup --config rollup.config.mjs --bundleConfigAsCjs",
diff --git a/app/postcss.config.js b/app/postcss.config.js
index 0173ea5fee..81de268979 100644
--- a/app/postcss.config.js
+++ b/app/postcss.config.js
@@ -2,7 +2,7 @@ module.exports = {
   plugins: [
     require("postcss-import"),
     require("autoprefixer"),
-    ...(process.env.NODE_ENV === "production"
+    ...(process.env.NODE_ENV.includes("production")
       ? [
           require("cssnano"),
           require("@fullhuman/postcss-purgecss")({
diff --git a/app/rollup.config.mjs b/app/rollup.config.mjs
index 05b7f3c529..627beb0670 100644
--- a/app/rollup.config.mjs
+++ b/app/rollup.config.mjs
@@ -14,7 +14,7 @@ export default [
       resolve(),
       babel(),
       commonjs(),
-      ...(process.env.NODE_ENV === "production" ? [terser()] : []),
+      ...(process.env.NODE_ENV.includes("production") ? [terser()] : []),
     ],
   },
 ]
diff --git a/app/site/_data/projects.js b/app/site/_data/projects.js
index fcf5651d3b..dbded66961 100644
--- a/app/site/_data/projects.js
+++ b/app/site/_data/projects.js
@@ -3,10 +3,10 @@ const path = require("path");
 
 module.exports = function () {
   const dataDirectory = path.join(__dirname);
-  var projects = [];
+  const projects = [];
 
   // Read the list of organization directories
-  var orgDirectories = fs.readdirSync(dataDirectory);
+  const orgDirectories = fs.readdirSync(dataDirectory);
 
   // Iterate through organization directories
   orgDirectories.forEach((orgDirectory) => {
@@ -37,7 +37,8 @@ module.exports = function () {
         }
       });
     }
+    
   });
-
-  return projects;
+  
+  return projects
 };
diff --git a/app/site/_data/site.js b/app/site/_data/site.js
index dc94bb5e9e..5d74e4ba3f 100644
--- a/app/site/_data/site.js
+++ b/app/site/_data/site.js
@@ -1,9 +1,10 @@
-const production = process.env.NODE_ENV === "production"
+const isProduction = process.env.NODE_ENV.includes("production")
+const isTest = process.env.NODE_ENV.includes("test")
 
-const host = production ? "https://dsacms.github.io" : "http://0.0.0.0:8080"
+const host = (isProduction && !isTest) ? "https://dsacms.github.io" : "http://localhost:8080"
 
 // For modifying the <base> tag
-const baseurl = production ? "/metrics" : ""
+const baseurl = isProduction ? "/metrics" : ""
 
 module.exports = {
   name: "CMS Metrics Website",
@@ -13,8 +14,8 @@ module.exports = {
   baseurl,
   url: `${host}${baseurl}`,
   domain: (host || "").replace("https://", ""),
-  production,
-  robots: production,
+  production: isProduction,
+  robots: isProduction,
   locale: "en-US",
   // TODO: Add nav elements for deployment
   nav: [{ url: "/about/", label: "About" }],
diff --git a/app/site/_includes/assets.liquid b/app/site/_includes/assets.liquid
index ddaa6be481..09e5a2cf5c 100644
--- a/app/site/_includes/assets.liquid
+++ b/app/site/_includes/assets.liquid
@@ -31,3 +31,5 @@
 <link rel="stylesheet" href="{{ site.url }}/css/style.css">
 
 <script type="module" src="{{ "/assets/js/index.js" | url}}"></script>
+<script type="module" src="{{ "/src/js/nav.js" | url}}"></script>
+<script type="module" src="{{ "/src/js/modal.js" | url}}"></script>
diff --git a/app/site/_includes/banner.liquid b/app/site/_includes/banner.liquid
index f0d72cebd2..fbfd6f2bc4 100644
--- a/app/site/_includes/banner.liquid
+++ b/app/site/_includes/banner.liquid
@@ -12,7 +12,8 @@
     </p>
   </div>
 </div>
-{% comment %} <section
+<!-- {% comment %} -->
+<section
   class="usa-banner"
   aria-label="Official website of the United States government"
 >
@@ -100,4 +101,5 @@
       </div>
     </div>
   </div>
-</section> {% endcomment %}
+</section>
+<!-- {% endcomment %} -->
diff --git a/app/site/_includes/graph-section.liquid b/app/site/_includes/graph-section.liquid
index 685f5ce053..2acf3ead46 100644
--- a/app/site/_includes/graph-section.liquid
+++ b/app/site/_includes/graph-section.liquid
@@ -1,17 +1,31 @@
-{% assign className = class | default: 'graph-container' %}
+{% assign className = class | default: 'graph-container-{{ title | slugify}}' %}
 {% assign devPath = 'site/_graphs' | append: path %}
 {% assign distPath = baseurl | append: '/assets/img/graphs' | append: path %}
 {% assign fileExtension = path | split: '.' | last %}
+{% assign modal_description = modal_description %}
 
 {% if devPath | fileExists %}
   <div class="{{ className }}">
-    <h3>{{ title }}</h3>
-    <figure>
-      {% if fileExtension == 'svg' %}
-        <embed type="image/svg+xml" src="{{ distPath }}">
-      {% else %}
-        <img src="{{ distPath }}">
-      {% endif %}
-    </figure>
+    <div class="graph-box">
+      <h3 class="graph-title">{{ title }}</h3>
+      <figure>
+        {% if fileExtension == 'svg' %}
+          <embed type="image/svg+xml" src="{{ distPath }}">
+        {% else %}
+          <img src="{{ distPath }}">
+        {% endif %}
+      </figure>
+      <div class="modal-button-styling">
+        <a
+          href="#{{ title | slugify }}-modal"
+          class="usa-button modal-button"
+          aria-controls="{{ title | slugify }}-modal"
+          data-open-modal
+        >
+          Learn More
+        </a>
+      </div>
+      {% render "modal-content", title: title, modal_description: modal_description %}
+    </div>
   </div>
 {% endif %}
diff --git a/app/site/_includes/graph-toggle.liquid b/app/site/_includes/graph-toggle.liquid
index bc693f6ed9..e3eef876dd 100644
--- a/app/site/_includes/graph-toggle.liquid
+++ b/app/site/_includes/graph-toggle.liquid
@@ -1,6 +1,7 @@
 {% assign graphName = name| append: "-graph" %}
 {% assign buttonName = name | append: "-button-" %}
 {% assign graphsCheck = true %}
+{% assign modal_description = modal_description %}
 
 {% comment %} Check for file existence of graphs {% endcomment %}
 {% for path in graphs %}
@@ -13,36 +14,49 @@
 
 {% comment %} Render components accordingly {% endcomment %}  
 {% if graphsCheck %}
-    <div class="graph-container">
-        <h3>{{ title }}</h3>
-        <ul class="usa-button-group ">
-            {% for option in options %}
-                <li class="usa-button-group__item">
+    <div class="graph-container-{{ title | slugify }}">
+        <div class="graph-box">
+            <h3 class="graph-title">{{ title }}</h3>
+            <ul class="usa-button-group">
+                {% for option in options %}
+                    <li class="usa-button-group__item">
+                    {% if forloop.first %}
+                        <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    {% else %}
+                        <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+            {% for graph in graphs %}
                 {% if forloop.first %}
-                    <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    <div class={{ graphName }} id="{{ forloop.index0 }}">
                 {% else %}
-                    <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    <div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
                 {% endif %}
-                </li>
+                {% assign graphPath = graph | strip %}
+                {% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
+                {% assign fileExtension = graphPath | split: '.' | last %}
+                <figure>
+                {% if fileExtension == 'svg' %}
+                    <embed type="image/svg+xml" src="{{ distPath }}" />
+                {% else %}
+                    <img src="{{ distPath }}"/>
+                {% endif %}
+                </figure>
+                <div class="modal-button-styling">
+                    <a
+                    href="#{{ title | slugify }}-modal"
+                    class="usa-button modal-button"
+                    aria-controls="{{ title | slugify }}-modal"
+                    data-open-modal
+                    >
+                    Learn More
+                    </a>
+                </div>
+                {% render "modal-content", title: title, modal_description: modal_description %}
+                </div>
             {% endfor %}
-        </ul>
-        {% for graph in graphs %}
-            {% if forloop.first %}
-                <div class={{ graphName }} id="{{ forloop.index0 }}">
-            {% else %}
-                <div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
-            {% endif %}
-            {% assign graphPath = graph | strip %}
-            {% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
-            {% assign fileExtension = graphPath | split: '.' | last %}
-            <figure>
-            {% if fileExtension == 'svg' %}
-                <embed type="image/svg+xml" src="{{ distPath }}" />
-            {% else %}
-                <img src="{{ distPath }}"/>
-            {% endif %}
-            </figure>
-            </div>
-        {% endfor %}
+        </div>
     </div>
 {% endif %}
\ No newline at end of file
diff --git a/app/site/_includes/modal-content.liquid b/app/site/_includes/modal-content.liquid
new file mode 100644
index 0000000000..74a422062e
--- /dev/null
+++ b/app/site/_includes/modal-content.liquid
@@ -0,0 +1,37 @@
+<div class="margin-y-3">
+  <div
+    class="usa-modal"
+    id="{{ title | slugify }}-modal"
+    aria-labelledby="{{ title | slugify }}-modal-heading"
+    aria-describedby="{{ title | slugify }}-modal-description"
+    aria-hidden="true"
+  >
+    <div class="usa-modal__content">
+      <div class="usa-modal__main">
+        <h2 class="usa-modal__heading" id="{{ title | slugify }}-modal-heading">
+          {{ title }}
+        </h2>
+        <div class="usa-prose">
+          <p id="{{ title | slugify }}-modal-description">
+            {{ modal_description }}
+          </p>
+        </div>
+        <div class="usa-modal__footer">
+          <button type="button" class="usa-button modal-button" data-close-modal>
+            Close
+          </button>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="usa-button-exit usa-modal__close"
+        aria-label="Close this window"
+        data-close-modal
+      >
+        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+          <use href="/assets/img/sprite.svg#close"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/site/_includes/nav.liquid b/app/site/_includes/nav.liquid
index 76861cd8ce..22a5b9b326 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -1,39 +1,63 @@
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--basic">
-  <div class="usa-nav-container">
-    <div class="usa-navbar">
+  <div class="usa-navigation-container">
+    <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>
-      <button type="button" class="usa-menu-btn">Menu</button>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav">
-      <button type="button" class="usa-nav__close">
-        <img src="{{"/assets/img/usa-icons/close.svg" | url}}" role="img" alt="Close">
-      </button>
-      <ul class="usa-nav__primary usa-accordion">
-        <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>
+    <nav aria-label="Primary navigation" class="usa-nav nav-styling">
+      <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
         <li class="usa-nav__primary-item">
-          <a
-            href="{{ "/projects/" | url}}"
-            class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
+          <button
+            type="button"
+            class="usa-accordion__button usa-nav__link button-styling"
+            aria-expanded="false"
+            aria-controls="basic-nav-section-one"
           >
-            <span>Projects</span>
-          </a>
+            <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>
         </li>
       </ul>
     </nav>
diff --git a/app/site/_includes/project-card.liquid b/app/site/_includes/project-card.liquid
index da545676d4..39c76be4d6 100644
--- a/app/site/_includes/project-card.liquid
+++ b/app/site/_includes/project-card.liquid
@@ -1,50 +1,57 @@
 {% capture new_link_var %}/{{ repo.owner }}/{{ repo.name }}/{% endcapture %}
-<li class="usa-card project-card tablet:grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
-  <div class="usa-card__container">
-    <div class="usa-card__header">
-      <h2 class="usa-card__heading">
-        <a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a>
-      </h2>
-    </div>
-    <div class="usa-card__body">
-      <div>{{ repo.description }}</div>
-    </div>
-    <div class="usa-card__footer">
-      <span class="star-count" style="margin-right: 15px;">
-        <svg class="usa-icon" aria-labelledby="star-count-{{repo.name}}-title" role="img">
-          <title id="github-{{repo.name}}-title"> Star Count</title>
-          {% lucide "star" %}
-        </svg>
-        <span> {{ repo.stargazers_count }} </span>
-      </span>
-      <span class="fork-count" style="margin-right: 15px;">
-        <svg class="usa-icon" aria-labelledby="fork-count-{{repo.name}}-title" role="img">
-          <title id="github-{{repo.name}}-title"> Fork Count</title>
-          {% lucide "git-fork" %}
-        </svg>
-        <span> {{ repo.forks_count }} </span>
-      </span>
-      <span class="issue-count" style="margin-right: 15px;">
-        <svg class="usa-icon" aria-labelledby="issue-count-{{ repo.name }}-title" role="img">
-          <title id="github-{{repo.name}}-title"> Issue Count</title>
-          {% lucide "circle-dot" %}
-        </svg>
-        <span> {{ repo.issues_count }} </span>
-      </span>
-      <span class="pull-request-count" style="margin-right: 15px;">
-        <svg class="usa-icon" aria-labelledby="pull-request-count-{{repo.name}}-title" role="img">
-          <title id="github-{{repo.name}}-title"> Pull Request Count</title>
-          {% lucide "git-pull-request" %}
-        </svg>
-        <span> {{ repo.pull_requests_count }} </span>
-      </span>
-      <span class="watchers-count">
-        <svg class="usa-icon" aria-labelledby="watchers-count-{{repo.name}}-title" role="img">
-          <title id="github-{{repo.name}}-title"> Watchers Count</title>
-          {% lucide "eye" %}
-        </svg>
-        <span> {{ repo.watchers_count }} </span>
-      </span>
+<li class="usa-card project-card grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
+  <div class="usa-card-outer">
+    <div class="usa-card-middle">
+      <a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">
+        <div class="usa-card__container">
+          <div class="usa-card__header">
+            <h2 class="usa-card__heading">
+              {{ repo.name }}
+              <!-- <a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a> -->
+            </h2>
+          </div>
+          <div class="usa-card__body">
+            <div>{{ repo.description }}</div>
+          </div>
+          <div class="usa-card__footer">
+            <span class="star-count" style="margin-right: 15px;">
+              <svg class="usa-icon" aria-labelledby="star-count-{{repo.name}}-title" role="img">
+                <title id="github-{{repo.name}}-title"> Star Count</title>
+                {% lucide "star" %}
+              </svg>
+              <span> {{ repo.stargazers_count }} </span>
+            </span>
+            <span class="fork-count" style="margin-right: 15px;">
+              <svg class="usa-icon" aria-labelledby="fork-count-{{repo.name}}-title" role="img">
+                <title id="github-{{repo.name}}-title"> Fork Count</title>
+                {% lucide "git-fork" %}
+              </svg>
+              <span> {{ repo.forks_count }} </span>
+            </span>
+            <span class="issue-count" style="margin-right: 15px;">
+              <svg class="usa-icon" aria-labelledby="issue-count-{{ repo.name }}-title" role="img">
+                <title id="github-{{repo.name}}-title"> Issue Count</title>
+                {% lucide "circle-dot" %}
+              </svg>
+              <span> {{ repo.issues_count }} </span>
+            </span>
+            <span class="pull-request-count" style="margin-right: 15px;">
+              <svg class="usa-icon" aria-labelledby="pull-request-count-{{repo.name}}-title" role="img">
+                <title id="github-{{repo.name}}-title"> Pull Request Count</title>
+                {% lucide "git-pull-request" %}
+              </svg>
+              <span> {{ repo.pull_requests_count }} </span>
+            </span>
+            <span class="watchers-count">
+              <svg class="usa-icon" aria-labelledby="watchers-count-{{repo.name}}-title" role="img">
+                <title id="github-{{repo.name}}-title"> Watchers Count</title>
+                {% lucide "eye" %}
+              </svg>
+              <span> {{ repo.watchers_count }} </span>
+            </span>
+          </div>
+        </div>
+      </a>
     </div>
   </div>
 </li>
diff --git a/app/site/_layouts/base.liquid b/app/site/_layouts/base.liquid
index bbf0509f17..9e97cacb6e 100644
--- a/app/site/_layouts/base.liquid
+++ b/app/site/_layouts/base.liquid
@@ -5,9 +5,16 @@
     {% include 'assets.liquid' %}
   </head>
   <body>
-    {% include 'banner.liquid' %}
-    {% include 'nav.liquid' %}
-    {{ content | raw }}
-    {% include 'footer.liquid' %}
+    <header>
+      {% include 'banner.liquid' %}
+      {% include 'nav.liquid' %}
+    </header>
+    <main>
+      {{ content | raw }}
+    </main>
+    <footer>
+      {% include 'footer.liquid' %}
+    </footer>
   </body>
+  <!-- <script type="module" src="{{ "/src/js/nav.js" | url}}"></script> -->
 </html>
diff --git a/app/site/_layouts/org-report.liquid b/app/site/_layouts/org-report.liquid
index 5835206ef8..b999e35bb3 100644
--- a/app/site/_layouts/org-report.liquid
+++ b/app/site/_layouts/org-report.liquid
@@ -2,13 +2,13 @@
 layout: base
 ---
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
-<div class="grid-container">
+<div class="grid-container-reports">
   {% assign organization = organizations | findObject: org %}
 
-  <div class="report_heading">
-    <h1>
+  <div class="report_heading report_heading-reports">
+    <h1 class=report_heading-reports-title>
       Report for
-      <a target="_blank" href="https://github.com/{{ org }}">{{ org }}</a>
+      <a target="_blank" href="https://github.com/{{ org }}" class="report-link">{{ org }}</a>
       <img
         src="{{organization.avatar_url}}"
         alt="Organization Avatar"
@@ -17,13 +17,13 @@ layout: base
     </h1>
   </div>
 
-  <div class="report-container">
+  <div class="report_container">
     {% if organization %}
       <h2>Organization Stats</h2>
       <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/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 8470dfbffb..6c973c5aae 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -17,13 +17,13 @@ layout: base
 </script>
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
 
-<div class="grid-container">
+<div class="grid-container-reports">
   {% assign project = projects | findObject: repo %}
 
-  <div class="report_heading">
-    <h1>
+  <div class="report_heading report_heading-reports">
+    <h1 class=report_heading-reports-title>
       Report for
-      <a target="_blank" href="https://github.com/{{ org }}/{{ repo }}">{{ repo }}</a>
+      <a target="_blank" href="https://github.com/{{ org }}/{{ repo }}" class="report-link">{{ repo }}</a>
     </h1>
   </div>
 
diff --git a/app/site/index.liquid b/app/site/index.liquid
index d053ecc353..94b8f6b365 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -2,57 +2,69 @@
 layout: base
 ---
 <div class="grid-container">
-  <div class="title">
-    <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo">
-    <h1>Metrics Website</h1>
-  </div>
-  <p>
-    {{ site.description }}
-  </p>
-  <ul class="usa-card-group">
+  <section class="home-page-description">
+    <div class="description-styling">
+      <h2>Metrics & Code.JSON</h2>
+    </div>
+    <p>
+      <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>
+  </section>
+  <ul class="usa-card-group-home">
     <li class="usa-card tablet:grid-col-6">
-      <div class="usa-card__container">
-        <div class="usa-card__header">
-          <h2 class="usa-card__heading">
-            <svg class="usa-icon" aria-labelledby="organizations" role="img">
-              <title id="organizations-category"> Organizations </title>
-              {% lucide "building-2" %}
-            </svg>
-            <a href="{{ "/organizations/" | url}}" class="text-no-underline"
-              >Organizations
-              <span class="chevrons-right">
-                <svg class="usa-icon usa-icon--size-2" aria-hidden="true" focusable="false" role="img">
-                  <use xlink:href= {{ "/assets/img/sprite.svg#navigate_far_next" | url }}></use>
+      <div class="usa-card-outer">
+        <div class="usa-card-middle">
+          <a href="{{ "/organizations/" | url}}" class="href-home">
+            <div class="usa-card__container">
+              <div class="home-icon-container">
+                <svg class="usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#groups"></use>
                 </svg>
-              </span>
-            </a>
-          </h2>
-        </div>
-        <div class="usa-card__body">
-          <p>View Metrics on our GitHub Organizations</p>
+              </div>
+              <div class="usa-card__header">
+                <h2 class="usa-card__heading-home">
+                  Organizations
+                </h2>
+                <div class="usa-card__body">
+                  <p>View Metrics on our GitHub Organizations</p>
+                </div>
+              </div>
+            </div>
+          </a>
         </div>
       </div>
     </li>
     <li class="usa-card tablet:grid-col-6">
-      <div class="usa-card__container">
-        <div class="usa-card__header">
-          <h2 class="usa-card__heading">
-            <svg class="usa-icon" aria-labelledby="projects" role="img">
-              <title id="projects-category"> Projects </title>
-              {% lucide "folder-git-2" %}
-            </svg>
-            <a href="{{ "/projects/" | url}}" class="text-no-underline"
-              >Projects
-              <span class="chevrons-right">
-                <svg class="usa-icon usa-icon--size-2" aria-hidden="true" focusable="false" role="img">
-                  <use xlink:href={{ "/assets/img/sprite.svg#navigate_far_next" | url }} ></use>
+      <div class="usa-card-outer">
+        <div class="usa-card-middle">
+          <a href="{{ "/projects/" | url}}" class="href-home">
+            <div class="usa-card__container">
+              <div class="home-icon-container">
+                <svg class="usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#folder_open"></use>
                 </svg>
-              </span>
-            </a>
-          </h2>
-        </div>
-        <div class="usa-card__body">
-          <p>View Metrics on our {{ projects.length }}+ Repositories</p>
+              </div>
+              <div class="usa-card__header">
+                <h2 class="usa-card__heading-home">Projects</h2>
+                <div class="usa-card__body">
+                  <p>View Metrics on our {{ projects.length }}+ Repositories</p>
+                </div>
+              </div>
+            </div>
+          </a>
         </div>
       </div>
     </li>
diff --git a/app/site/organizations.liquid b/app/site/organizations.liquid
index fddfef8e22..88d1f55c27 100644
--- a/app/site/organizations.liquid
+++ b/app/site/organizations.liquid
@@ -2,42 +2,50 @@
 layout: base
 ---
 <div class="grid-container">
+  <div class="description-styling">
+    <h2>Organizations</h2>
+  </div>
   <p>The Centers for Medicare and Medicaid Services is comprised of many GitHub Organizations.</p>
-  <ul class="usa-card-group">
+  <ul class="usa-card-group-orgs">
     {% for org in organizations %}
-      <li class="usa-card usa-card--flag desktop:grid-col-6">
-        <div class="usa-card__container">
-          <div class="usa-card__header">
-            <h2 class="usa-card__heading">
-              <a href="{{ site.baseurl }}/{{ org.name }}/" class="text-no-underline">{{ org.name }}</a>
-            </h2>
-          </div>
-          <div class="usa-card__media" style="display: flex; justify-content: center;">
-            <div class="usa-card__img" style="background-color: white; padding: 10px 0;">
-              <img
-                src="{{org.avatar_url}}"
-                alt="Organization Avatar"
-              >
-            </div>
-          </div>
-          <div class="usa-card__body">
-            <div>{{ org.description }}</div>
-          </div>
-          <div class="usa-card__footer">
-            <span class="star-count" style="margin-right: 15px;">
-              <svg class="usa-icon" aria-labelledby="star-count-{{org.name}}-title" role="img">
-                <title id="github-{{org.name}}-title"> Repo Count</title>
-                {% lucide "folder-git-2" %}
-              </svg>
-              <span> {{ org.repo_count }} </span>
-            </span>
-            <span class="fork-count" style="margin-right: 15px;">
-              <svg class="usa-icon" aria-labelledby="fork-count-{{org.name}}-title" role="img">
-                <title id="github-{{org.name}}-title"> Follower Count</title>
-                {% lucide "users-2" %}
-              </svg>
-              <span> {{ org.followers_count }} </span>
-            </span>
+      <!-- <li class="usa-card usa-card--flag desktop:grid-col-6"> -->
+      <li class="usa-card grid-col-5">
+        <div class="usa-card-outer">
+          <div class="usa-card-middle">
+            <a href="{{ site.baseurl }}/{{ org.name }}/" class="href-home">
+              <div class="usa-card__container">
+                <div class="usa-card__media" style="display: flex; justify-content: center;">
+                  <div class="usa-card__img" style="background-color: white; padding: 10px 0;">
+                    <img
+                      src="{{org.avatar_url}}"
+                      alt="Organization Avatar"
+                    >
+                  </div>
+                </div>
+                <div class="usa-card__header-orgs">
+                  <h2 class="usa-card__heading-orgs">{{ org.name }}</h2>
+                  <div class="usa-card__body">
+                    <div>{{ org.description }}</div>
+                  </div>
+                  <div class="usa-card__footer">
+                    <span class="star-count" style="margin-right: 15px;">
+                      <svg class="usa-icon" aria-labelledby="star-count-{{org.name}}-title" role="img">
+                        <title id="github-{{org.name}}-title"> Repo Count</title>
+                        {% lucide "folder-git-2" %}
+                      </svg>
+                      <span> {{ org.repo_count }} </span>
+                    </span>
+                    <span class="fork-count" style="margin-right: 15px;">
+                      <svg class="usa-icon" aria-labelledby="fork-count-{{org.name}}-title" role="img">
+                        <title id="github-{{org.name}}-title"> Follower Count</title>
+                        {% lucide "users-2" %}
+                      </svg>
+                      <span> {{ org.followers_count }} </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </a>
           </div>
         </div>
       </li>
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 1fe478168b..e1a7a2f82d 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -1,28 +1,33 @@
 ---
 layout: base
 ---
+
 <script type="module" src="{{ "/assets/js/projects.js" | url }}"></script>
 <span style="display:none;" id="metrics">
-  {{projects | json }}
+  {{ projects | json }}
 </span>
 <span style="display:none;" id="org-data">
-  {{organizations | json }}
+  {{ organizations | json }}
+</span>
+<span style="display:none;" id="site-data">
+  {{ site | json }}
 </span>
-<div class="grid-container ">
+<div class="grid-container-projects">
+  <div class="description-styling">
+    <h2>Projects</h2>
+  </div>
   <p>
     The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
     GitHub Organizations.
   </p>
-
   <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>
@@ -38,13 +43,12 @@ layout: base
           </form>
         </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>
@@ -60,13 +64,12 @@ layout: base
           </form>
         </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>
@@ -82,13 +85,12 @@ layout: base
           </form>
         </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>
@@ -105,44 +107,115 @@ layout: base
         </div>
       </div>
     </div>
-    
-    <div class="block">
-      <div class="search-and-sort">
-        <div class="search-container">
-          <label class="usa-label" for="filter-input">Search</label>
-          <div class="usa-input-group width-full maxw-none border-base-light">
-            <div class="usa-input-prefix" aria-hidden="true">
-              <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
-                <use xlink:href={{  "/assets/img/sprite.svg#search"| url }} ></use>
-              </svg>
-            </div>
-            <input class="usa-input--lg" id="filter-input" name="filter-input">
+    <div class="outer-search-block">
+      <div class="search-block">
+        <div class="search-and-sort">
+          <section aria-label="Small search component">
+            <form class="usa-search usa-search--small project-search" role="search" id="search-form">
+              <div class="search-styling">
+                <label class="usa-sr-only" for="search-input">Search</label>
+                <input
+                  class="usa-input"
+                  id="search-input"
+                  type="search"
+                  name="search-input"
+                  placeholder="Search"
+                />
+                <button class="usa-button" type="submit">
+                  <img
+                    src="{{ site.baseurl }}/assets/img/usa-icons-bg/search--white.svg"
+                    class="usa-search__submit-icon"
+                    alt="Search"
+                  />
+                </button>
+              </div>
+            </form>
+          </section>
+          <div class="sort-dropdown sort-styling">
+            <form class="usa-form sort-dropdown" id="sort-selection-form">
+              <label class="usa-label" for="sort-selection"></label>
+              <div class="sort-outer">
+                <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>
+                  <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>
+                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#filter_list"></use>
+                </svg>
+              </div>
+            </form>
+            <form class="usa-form project-search" id="sort-direction-form">
+              <label class="usa-label" for="sort-direction"></label>
+              <div class="sort-outer">
+                <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>
+                </select>
+                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
+                </svg>
+              </div>
+            </form>
           </div>
-        </div>
-        <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">
-              <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>
-          </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">
-              <option value="ascending">Ascending</option>
-              <option value="descending">Descending</option>
-            </select>
-          </form>
         </div>
+      <div class="padding-left-05" id="filter-tags"></div>
+      <div id="content-container">
+        <div id="pagination-controls" class="usa-pagination">
+          <ul class="project-card-list">
+            {% assign itemsPerPage = 10 %}
+            {% assign totalProjects = projects | size %}
+            {% assign totalPages = totalPages | divided_by: itemsPerPage | ceil %}
+            {% assign currentPage = pagination.pageNumber | default: 1 | minus: 1 %}
+            {% assign startIndex = currentPage | times: itemsPerPage %}
+            {% assign paginatedProjects = projects | slice: startIndex, itemsPerPage %}
+            {% for project in paginatedProjects %}
+              {% include "project-card.liquid" %}
+            {% endfor %}
+          </ul>
       </div>
 
-      <div class="padding-left-05" id="filter-tags"></div>
-      <div id="content-container"></div>
+      <!-- <nav aria-label="Pagination" class="usa-pagination">
+        <ul class="usa-pagination__list">
+          {% if currentPage > 0 %}
+            <li class="usa-pagination__item usa-pagination__arrow">
+              <a href="/projects/page/{{ currentPage | minus: 1 }}/" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
+                <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>
+              </a>
+            </li>
+          {% endif %}
+
+          {% for page in (1..totalPages) %}
+            <li class="usa-pagination__item usa-pagination__page-no">
+              {% assign adjustedCurrentPage = currentPage | plus: 1 %}
+              <a href="?page={{ page }}" class="usa-pagination__button {% if page == adjustedCurrentPage %}active{% endif %}" aria-label="Page {{ page }}" aria-current="{{ page }}">
+                {{ page }}
+              </a>
+            </li>
+          {% endfor %}
+
+          {% if currentPage < totalPages | minus: 1 %}
+            <li class="usa-pagination__item usa-pagination__arrow">
+              <a href="/projects/page/{{ currentPage | plus: 1 }}/" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
+                <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>
+              </a>
+            </li>
+          {% endif %}
+        </ul>
+      </nav> -->
+
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 3804896ea0..574e654d82 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -1,152 +1,749 @@
 @import "@uswds/uswds/dist/css/uswds.css";
 
+html, body {
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  display: flex;
+  min-height: 73vh;
+  justify-content: center;
+}
+
+
+/* Header */
+.usa-header {
+  align-items: center;
+  display: flex;
+  z-index: 1010;
+}
+
+.usa-navigation-container {
+  display: flex;
+  width: 90%;
+}
+
+.usa-nav-bar {
+  width: 90%;
+}
+
 .title {
+  align-items: center;
   display: flex;
-  align-items: baseline;
 }
+
+h1 {
+  color: #093f8e;
+  font-size: 1.5rem;
+  margin: 1rem 0;
+}
+
 .logo {
-  width: 120px;
-  height: 40px;
+  width: 90px;
+  height: auto;
   margin-right: 10px;
 }
-.github-information {
+
+.usa-logo {
+  font-size: 1.5em;
+  margin: 1% 0 1% 0;
+}
+
+.usa-nav__primary-item {
   display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: flex-start;
 }
-.stat-container {
+
+.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"] {
+  background-color: #fff;
+}
+
+/* Home page main */
+.grid-container{
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-/* This is so that augur visualizations have the buttons cropped out. */
-.firstResponsePRCrop img {
-  width: 900px;
-  height: 550px;
-  object-fit: cover;
+
+.home-page-description {
+  margin: 3%;
+  width: 90%;
 }
 
-.main-tag {
-  background-color: #1a4480;
-  padding: 0.5rem;
-  font-weight: bolder;
-  display: inline-flex;
+.description-styling {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+
+h2 {
+  margin-bottom: 0;
+}
+
+/* Cards */
+.usa-card-group-home {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  margin-left: -80px;
+}
+
+.usa-card-outer {
+  display: flex;
+  background-color: #043884;
+  border: none;
+  border-radius: 70px;
+  height: 20vh;
+  width: 25vw;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.usa-card-middle {
+  display: flex;
+  background-color: #5C85C1;
+  border: none;
+  border-radius: 70px;
+  height: 100%;
+  margin-left: -5px;
+  width: 98%;
+}
+
+.usa-card-middle:hover {
+  background-color: #E7C000;
+}
+
+.usa-card-outer:active {
+  box-shadow: none;
+}
+
+.href-home {
+  border: none;
+  text-decoration:none;
+  width: 98%;
+}
+
+.href-home:focus {
+  outline:none;
+}
+
+.usa-card__container {
   align-items: center;
+  background-color: #E0EAF8;
+  border: none;
+  border-radius: 70px;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  margin: 0;
+  margin-left: -5px;
+  padding: 0;
+  width: 100%;
+}
+
+.home-icon-container {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  height: 100px;
   justify-content: center;
-  gap: 0.25rem; /* Adjust the gap as needed */
-  border-radius: 0.25rem;
+  margin-left: 6%;
+  width: 100px;
 }
 
-.tools-tag {
-  background-color: green;
+.usa-card__header {
+  margin: 15% 1% 10% 5%;
+  padding: 0;
 }
 
-.apis-tag {
-  background-color: #E52109;
+.usa-card__body {
+  padding: 0;
 }
 
-.apps-tag {
-  background-color: #0076D6;
+.usa-card-heading-home {
+  font-size: 1.2em;
 }
 
-.data-tag {
-  background-color: #E66F0F;
+/* Footer */
+.usa-identifier {
+  display: flex;
+  background-color: #E0EAF8;
+  color: #000;
 }
 
-.docs-tag {
-  background-color: #03C585;
+.usa-identifier__logo-img {
+  filter: invert(1);
 }
 
-.libraries-tag {
-  background-color: #D72D79;
+.usa-identifier__identity-domain {
+  color: #000;
 }
 
-.standards-tag {
-  background-color: #FFBE2F;
+.usa-identifier__identity-disclaimer a:visited {
+  color: #494949;
 }
 
-.icon-tag {
-  padding: 0.35rem;
+.usa-identifier__required-link,
+.usa-identifier__required-link.usa-link{
+  color:#000;
+  display:inline-block;
+}
+.usa-identifier__required-link:visited,
+.usa-identifier__required-link.usa-link:visited{
+  color:#494949;
 }
 
-.primary-tag-group {
-  /* padding-top-1 */
-  padding-top: 0.5rem;
+a.usa-link {
+  color: #000;
 }
 
-.secondary-tag-group {
-  /* padding-y-3 */
-  padding-top:1.5rem;
-  padding-bottom:1.5rem;
+a.usa-link:visited {
+  color: #494949;
 }
 
-.projects-container {
-  position: relative;
+/* Orgs */
+.usa-card-group-orgs {
   display: flex;
   flex-direction: row;
-  gap: 1rem;
+  flex-wrap: wrap;
+  list-style-type:none;
+  justify-content: center;
 }
 
-.block {
-  display: block;
+.usa-card {
+  display: flex;
+  justify-content: center;
+  /* margin: 0 1% 0 1%; */
+  margin: 2%;
+}
+
+.usa-card__media {
+  align-items: center;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+  margin-left: 6%;
+  width: 100px;
+}
+
+.usa-card__img {
+  height: 100%;
   width: 100%;
+  border-radius: 50%;
+}
+
+.usa-card__header-orgs {
+  margin: 15% 1% 10% 5%;
+  padding: 0;
+}
+
+.usa-card__heading-orgs {
+  font-size: 1.2em;
+}
+
+.usa-card__footer {
+  padding-bottom: 1.5rem;
+  padding-left: 0;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+}
+
+/* Projects */
+#content-container {
+  margin-top: 5%;
+  width: 95vw;
+}
+
+.grid-container-projects {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80vw;
+}
+
+.search-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .dashboard-container {
   display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  /* padding-top: 5rem; */
+  flex-direction: column;
+  align-items: center;
+}
+
+.search-styling {
+  border: 0.25px solid #bcbcbc;
+  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;
+}
+
+.usa-input {
+  background-color: #FFF;
+  border: none;
+  border-radius: 50px;
+  z-index: 10;
+}
+
+section:active {
+  border: #E7C000;
+}
+
+.usa-search--small [type=submit], .usa-search--small .usa-search__submit {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  min-width: 4rem;
+  margin-left: -12px;
+  border-radius: 0 50px 50px 0;
+  background-color: #e0eaf8;
+}
+
+.usa-search__submit-icon {
+  filter: invert(1);
+}
+
+.select-sort {
+  height: 35px;
+  width: fit-content;
+  margin-right: 60px;
+  margin-top: 0px;
+  padding: 0 5% 0 5%;
+  border-radius: 50px;
+  border: none
+}
+
+.sort-outer {
+  display: flex;
+  background-color: #E0EAF8;
+  border: 0.25px solid #bcbcbc;
+  height: 37px;
+  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;
+  margin-left: 30px;
+  align-items: center;
+  max-width: 15rem;
+  min-width: 7rem;
+}
+
+.filter-icon {
+  margin: 0 0 0 -20%;
+}
+
+.outer-project-template {
+  height: fit-content;
+  width: 90vw;
+}
+
+.container-project-template {
+  display: flex;
+}
+
+.text-container-project-template {
+  display: flex;
+  flex-direction: column;
+  margin: 2% 1% 0 3%;
+}
+
+.header-project-template {
+  margin: 0 0 2% 0;
+}
+
+.body-project-template {
+  margin: 0;
+}
+
+.footer-project-template {
+  padding-bottom: 0;
+}
+
+.report_heading {
+  margin-left: 5%;
 }
 
 .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: column;
+  align-items: center;
+  margin: 10%;
+}
+
+.sort-styling {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.project-search {
+  padding: 0;
+  margin: 0;
+}
+
+.report_heading-title {
+  display: flex;
+}
+
+/* ORG REPORTS */
+.grid-container-reports {
+  display: flex;
+  width: 80%;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.report_heading-reports {
+  margin: 0;
+}
+
+.report_heading-reports-title {
+  margin: 15% 0 5%;
+  width: 100%;
+  color: #000;
+}
+
+.report-link {
+  color: #000;
+}
+
+.report_container {
+  width: 95%;
+}
+
+.github-information {
+  display: flex;
+  justify-content: space-around;
+  margin: 2% 0;
+}
+
+.stat-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
+}
+
+.post {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.summary-table {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* This is so that augur visualizations have the buttons cropped out. */
+.firstResponsePRCrop img {
+  width: 500px;
+  height: 310px;
+  object-fit: cover;
+}
+
+.graph-container {
+  width: 100%;
+}
+
+.all-graphs {
+  display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
-  padding-top: 3.4rem;
+  justify-content: center;
 }
 
-.search-container {
-  flex:1;
-  margin-bottom: 1rem;
-  box-sizing: border-box; 
+.all-graphs > .graph-container {
+  flex: 1 1 calc(50% - 1rem);
+  min-width: 300px;
 }
 
-.search-and-sort {
+.graph-box {
+  display: flex;
   width: 100%;
+  background-color: #E0EAF8;
+  flex-direction: column;
+  margin-bottom: 5%;
+  border-radius: 30px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.graph-section-title {
+  font-size: 2rem;
+  margin: 2%;
+}
+
+.graph-title {
+  font-size: 1.5rem;
+  margin: 3% 0 0 3%;
+}
+
+.usa-button-group {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  gap: 3rem;
+  margin: 2%
+}
+
+embed {
+  min-width: 315px;
+}
+
+.usa-modal {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 25px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
-.sort-dropdown {
+.usa-modal[aria-hidden="false"] {
+  display: block;
+  opacity: 1;
+}
+
+.usa-modal--active {
+  display: block;
+  opacity: 1;
+}
+
+.modal-button-styling {
   display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  text-align: right;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  justify-content: flex-end;
+  width: 95%;
+}
+
+.modal-button {
+  border-radius: 30px;
+  background-color: #0A3F8D;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  width: fit-content;
+}
+
+.modal-button:hover {
+  border-radius: 30px;
+  background-color: #E7C000;
+  color: #000;
+}
+
+.modal-button:active {
+  box-shadow: none;
+}
 
+.usa-modal__close {
+  border: none;
+  cursor: pointer;
 }
 
-@media screen and (max-width: 1080px) {
+iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
+  outline: none;
+  outline-offset: 0rem;
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 1.9em;
+    margin: 3% 2% 0 2%;
+  }
+
+  .logo {
+    width: 120px;
+  }
+
   .dashboard-container {
-    flex-direction: column;
+    flex-direction: row;
+    align-items: normal;
   }
-}
 
-@media screen and (max-width: 720px) {
   .search-and-sort {
-    flex-direction: column;
-    gap: 0;
+    justify-content: space-evenly;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+  }
+  
+  .sort-styling {
+    flex-direction: row;
+    margin-top: -25px;
+    justify-content: space-evenly;
+  }
+
+  #content-container {
+    width: auto;
+  }
+
+  .outer-project-template {
+    width: 60vw;
+  }
+
+  .summary-table {
+    width: 75%;
   }
 
-  .search-container {
-    margin-bottom: 0;
+  .usa-button-group {
+    margin: 2% 0 -15% 3%;;
   }
 
-  .sort-dropdown {
-    text-align: left;
+  embed {
+    min-width: 500px;
   }
+
+  .graph-box {
+    height: 600px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  
 }
\ No newline at end of file
diff --git a/app/src/js/modal.js b/app/src/js/modal.js
new file mode 100644
index 0000000000..ad96f6d4a9
--- /dev/null
+++ b/app/src/js/modal.js
@@ -0,0 +1,54 @@
+export function operateModal() {
+    const modalOpenButtons = document.querySelectorAll("[data-open-modal]");
+    const modalCloseButtons = document.querySelectorAll("[data-close-modal]");
+
+    const openModal = (id) => {
+        const modal = document.getElementById(id);
+        if(modal) {
+            modal.classList.add("usa-modal--active");
+            modal.setAttribute("aria-hidden", "false");
+            console.log("Modal is open")
+        }
+    };
+
+    const closeModal = (modal) => {
+        if(modal) {
+            modal.classList.remove("usa-modal--active");
+            modal.setAttribute("aria-hidden", "true");
+            console.log("modal is closed")
+        }
+    };
+
+    modalOpenButtons.forEach((button) => {
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const id = button.getAttribute("aria-controls");
+            openModal(id);
+        });
+    });
+
+    modalCloseButtons.forEach((button) => {
+        button.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const modal = button.closest(".usa-modal");
+            closeModal(modal);
+        });
+    });
+
+    document.addEventListener("click", (e) => {
+        const activeModal = document.querySelector(".usa-modal.usa-modal--active");
+        if(activeModal && !activeModal.contains(e.target)) {
+            closeModal(activeModal);
+        }
+    });
+
+    document.addEventListener("keydown", (e) => {
+        if(e.key === "Escape") {
+            const activeModal = document.querySelector(".usa-modal.usa-modal--active");
+            closeModal(activeModal)
+        }
+    });
+}
+
+document.addEventListener("DOMContentLoaded", operateModal)
\ No newline at end of file
diff --git a/app/src/js/nav.js b/app/src/js/nav.js
new file mode 100644
index 0000000000..afd1d4bf3d
--- /dev/null
+++ b/app/src/js/nav.js
@@ -0,0 +1,44 @@
+export function createNavigation() {
+    const toggleButton = document.querySelector(".usa-accordion__button");
+    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();
+        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"
+        );
+    }
+
+    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", (e) => {
+            e.preventDefault();
+            closeMenu();
+        })
+
+        document.addEventListener("click", (e) => {
+            if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
+                closeMenu();
+            }
+        });
+    } else {
+        console.error("Some elements are not found");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", createNavigation)
\ No newline at end of file
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 5ff15045fa..428a8e8897 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -1,16 +1,21 @@
 import { reportHeadingTemplate, projectCardTemplate } from "./templates";
 import DOMPurify from 'dompurify';
-const filterBox = document.getElementById("filter-input");
+
 const projectsData = document.getElementById('metrics').textContent;
 const orgsData = document.getElementById('org-data').textContent;
 const parsedOrgsData = JSON.parse(orgsData);
+const siteData = JSON.parse(document.getElementById('site-data').textContent);
 const parsedProjectsData = JSON.parse(projectsData);
 const filtersContainer = document.querySelector('.filters-container');
 const templateDiv = document.getElementById('content-container');
-var projects = setProjectsData(parsedProjectsData)
+const projects = setProjectsData(parsedProjectsData)
 const sortDirection = document.getElementById('sort-direction');
 const sortSelection = document.getElementById('sort-selection');
 
+let currentPage = 1;
+const itemsPerPage = 10;
+let filteredProjects = [...parsedProjectsData];
+
 
 // Hide sort direction when sort is not selected
 document.getElementById("sort-direction-form").hidden = true;
@@ -19,14 +24,14 @@ document.getElementById("sort-direction-form").hidden = true;
 createProjectCards();
 
 // Listens for selection to sort by attribute
-sortSelection.addEventListener('change', e => {
-  sortCards();
+sortSelection.addEventListener('change', () => {
   // Unhide sort direction once sort by is selected
   document.getElementById("sort-direction-form").hidden = false;
+  sortCards();
 })
 
 // Listens for sort direction to sort descending/ascending
-sortDirection.addEventListener('change', e => {
+sortDirection.addEventListener('change', () => {
   const isDescending = sortDirection.value === 'descending' ? true : false; 
   sortCards(isDescending);
 })
@@ -91,42 +96,48 @@ function getProjectsInOrg(array, value) {
   return array.filter((item) => item["owner"] === value);
 }
 
-function sortCards(descending=false) {
+function sortCards(isDescending = false) {
   const selection = sortSelection.value;
 
-  for (const org in projects) {
-    // Selected attribute of type number
-    if 
-      (
-        selection === "maturity_model_tier" || 
-        selection === "stargazers_count" || 
-        selection === 'forks_count'
-      ) {
-        sortByNumberAttribute(projects[org], selection, descending);
-      } 
-    // Selected attribute of type string
-    else if
-      (
-        selection === 'name' || 
-        selection === 'project_type' || 
-        selection === "fisma_level"
-      ) {
-        sortByStringAttribute(projects[org], selection, descending);
-      }
-    createProjectCards();
+  let targetProjects = filteredProjects || parsedOrgsData
+
+  if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
+    sortByNumberAttribute(targetProjects, selection, isDescending);
+  } else { 
+    sortByStringAttribute(targetProjects, selection, isDescending);
   }
+
+  updatePagination()
+  renderPaginatedProjects(filteredProjects)
 }
 
 function createProjectCards() {
   templateDiv.innerHTML = ''
-  for (const org in projects) {
+
+  const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({
+    ...project,
+    org: project.owner
+  }));
+  
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedProjects = allProjects.slice(startIndex, endIndex);
+
+  const groupedByOrg = paginatedProjects.reduce((acc, curr) => {
+    if(!acc[curr.org]) {
+      acc[curr.org] = []
+    }
+    acc[curr.org].push(curr);
+    return acc
+  }, {});
+
+  for (const org in groupedByOrg) {
     const orgProject = findObject(parsedOrgsData, org);
     const orgHeading = reportHeadingTemplate(orgProject);
     const projectSectionsTemplate = document.createElement('div');
     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);
@@ -136,26 +147,134 @@ function createProjectCards() {
     projectCards.className = "usa-card-group flex-align-stretch";
   
     projectSectionsTemplate.appendChild(projectCards);
-  
-    // Create all project cards for each org
-    for (const repoIndex in projects[org]) {
-      const repoData = projects[org][repoIndex];
+
+    groupedByOrg[org].forEach(repoData => {
+      repoData.baseurl = siteData.baseurl;
       const projectCard = document.createElement('li');
       projectCard.className = 'usa-card project-card tablet:grid-col-12';
       projectCard.id = repoData.name;
       projectCard.setAttribute('org-name', repoData.owner);
       projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
       projectCards.appendChild(projectCard);
-    }
+    })
   }
   updateFilters();
   updateHeadingVisibility();
+  renderPaginationControls(allProjects.length)
+}
+
+function renderPaginationControls(totalProjectsCount) {
+  const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div');
+  paginationDiv.id = 'pagination-controls';
+  paginationDiv.className = 'usa-pagination';
+  paginationDiv.innerHTML = '';
+
+  const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);
+
+  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();
+    }
+  });
+  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);
+  });
+
+  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();
+    }
+  });
+  nextItem.appendChild(nextButton);
+  paginationList.appendChild(nextItem);
+
+  paginationDiv.appendChild(paginationList);
+
+  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
   updateFilters();
+  updateFilteredProjects()
 }, filtersContainer)
 
 // Function to update filters
@@ -195,6 +314,95 @@ function updateFilters() {
   updateHeadingVisibility();
 }
 
+function updateFilteredProjects() {
+
+  const selectedFiltersObject = {
+    organization: [],
+    maturityModelTier: [],
+    fismaLevel: [],
+    projectType: []
+  }
+
+  document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
+    selectedFiltersObject.organization.push(checkbox.value);
+  });
+  document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
+    selectedFiltersObject.maturityModelTier.push(checkbox.value);
+  });
+  document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
+    selectedFiltersObject.fismaLevel.push(checkbox.value);
+  });
+  document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
+    selectedFiltersObject.projectType.push(checkbox.value);
+  });
+
+  const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))
+  filteredProjects = allProjects.filter((project) => {
+    const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org);
+    const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
+    const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
+    const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType);
+    return  matchesOrg && matchesTier && matchesFisma && matchesType;
+  });
+ 
+  updatePagination(filteredProjects);
+  renderPaginatedProjects(filteredProjects)
+  sortCards();
+}
+
+function updatePagination() {
+  const totalProjects = (filteredProjects || parsedProjectsData).length;
+  const totalPages = Math.ceil(totalProjects / itemsPerPage);
+
+  currentPage = Math.min(currentPage, totalPages || 1);
+  renderPaginationControls(totalPages);
+}
+
+function renderPaginatedProjects(projects = parsedProjectsData) {
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedProjects = projects.slice(startIndex, endIndex);
+
+  templateDiv.innerHTML = '';
+
+  const groupedByOrg = paginatedProjects.reduce((acc, curr) => {
+    if(!acc[curr.owner]) {
+      acc[curr.owner] = []
+    }
+    acc[curr.owner].push(curr);
+    return acc
+  }, {});
+
+  for (const org in groupedByOrg) {
+    const orgProject = findObject(parsedOrgsData, org);
+    const orgHeading = reportHeadingTemplate(orgProject);
+    const projectSectionsTemplate = document.createElement('div');
+    projectSectionsTemplate.className = 'project_section';
+  
+    const reportHeading = document.createElement('div');
+    reportHeading.className = "report_heading";
+    reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
+    projectSectionsTemplate.appendChild(reportHeading);
+  
+    const projectCards = document.createElement('ul');
+    projectCards.className = "usa-card-group flex-align-stretch";
+
+    groupedByOrg[org].forEach(repoData => {
+      repoData.baseurl = siteData.baseurl;
+      const projectCard = document.createElement('li');
+      projectCard.className = 'usa-card project-card tablet:grid-col-12';
+      projectCard.id = repoData.name;
+      projectCard.setAttribute('org-name', repoData.owner);
+      projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
+      projectCards.appendChild(projectCard);
+    });
+
+    projectSectionsTemplate.appendChild(projectCards);
+    templateDiv.append(projectSectionsTemplate);
+  }
+  updateHeadingVisibility();
+}
+
 // Function to add filters buttons
 function addFilterButtonGroup(selectedFiltersObject) {
   // Get filter tags div from DOM
@@ -233,12 +441,6 @@ function addFilterButtonGroup(selectedFiltersObject) {
   }, filtersButtonGroup);
 }
 
-// Function for adding a dynamic global event listener
-// Parameters:
-// - type: The type of event to listen for (e.g., 'click', 'mouseover')
-// - selector: The CSS selector to match the target elements (e.g., '.class-name')
-// - callback: The callback function to execute when the event is triggered on a matching element
-// - parent: The element to attach the event listener to; defaults to 'document' for global listening
 function addGlobalEventListener(type, selector, callback, parent = document) {
   parent.addEventListener(type, e => {
     if (e.target.matches(selector)) {
@@ -272,9 +474,8 @@ function updateHeadingVisibility() {
 
 // Function to return whether all filter criteria were met
 function checkFilterCriteria(card, selectedFiltersObject) {
-  const cardName = card.querySelector(".text-no-underline").textContent;
-  const currentProject = parsedProjectsData.find((project) => project["name"] === cardName)
-  
+  const cardName = card.querySelector(".usa-card__heading").innerText;
+  const currentProject = parsedProjectsData.find((project) => project.name === cardName)
   const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner);
   const projectMaturityModelTier = "Tier " + currentProject.maturityModelTier;
   const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
@@ -286,28 +487,21 @@ function checkFilterCriteria(card, selectedFiltersObject) {
 
 }
 
-filterBox.addEventListener("input", () => {
-  const projectSections = document.querySelectorAll(".project_section");
-  const query = filterBox.value.toLowerCase()
-
-  // Iterate through each section
-  projectSections.forEach((section) => {
-    var queryMatchCheck = false
-    const projectCards = section.querySelectorAll(".project-card")
-
-    // Performs query and hides project card accordingly
-    projectCards.forEach((card) => {
-      card.hidden = !(
-        query == "" || card.textContent.toLowerCase().includes(query)
-      )
+document.addEventListener("DOMContentLoaded", () => {
+  const searchForm = document.getElementById('search-form');
+  const searchBox = document.getElementById("search-input");
+  const projectList = document.getElementById("content-container")
+  const projectCards = projectList.getElementsByClassName("project-card")
 
-      if (!card.hidden) {
-        queryMatchCheck = true
-      }
-    })
-
-    // Hide heading if all cards under section are hidden
-    const reportHeadings = section.querySelector(".report_heading")
-    reportHeadings.hidden = !queryMatchCheck
+  searchForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+  })
+  
+  searchBox.addEventListener("input", () => {
+    const query = searchBox.value.toLowerCase();
+    filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));
+    currentPage = 1
+    createProjectCards()
   })
+  createProjectCards()
 })
\ No newline at end of file
diff --git a/app/src/js/templates.js b/app/src/js/templates.js
index 6c405721b2..266f48aed5 100644
--- a/app/src/js/templates.js
+++ b/app/src/js/templates.js
@@ -1,4 +1,4 @@
-export const reportHeadingTemplate = function(data) {       
+export const reportHeadingTemplate = function(data) {  
     return `
           <h2>
             ${ data.name }
@@ -11,57 +11,63 @@ export const reportHeadingTemplate = function(data) {
     `
 }
 
-export function projectCardTemplate(data) {
-    const baseUrl = window.location.hostname === "dsacms.github.io" ? '/metrics' : ""
-    const description = data.description !== null ? data.description : ""
-    return `
-        <div class="usa-card__container">
-            <div class="usa-card__header">
-            <h2 class="usa-card__heading">
-                <a href="${ baseUrl }/${ data.owner }/${ data.name }/" class="text-no-underline">${ data.name }</a>
-            </h2>
-            </div>
-            <div class="usa-card__body">
-            <div>${ description }</div>
-            </div>
-            <div class="usa-card__footer">
-            <span class="star-count" style="margin-right: 15px;">
-                <svg class="usa-icon" aria-labelledby="star-count-${data.name}-title" role="img">
-                title id="github-${data.name}-title"> Star Count</title>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-                </svg>
+export function projectCardTemplate(data) {  
+    const projectUrl = `${data.baseurl}/${ data.owner }/${ data.name }/`;
+    const description = data.description !== null ? data.description : "";
 
-                <span> ${ data.stargazers_count } </span>
-            </span>
-            <span class="fork-count" style="margin-right: 15px;">
-                <svg class="usa-icon" aria-labelledby="fork-count-${data.name}-title" role="img">
-                <title id="github-${data.name}-title"> Fork Count</title>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-fork"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>
-                </svg>
-                <span> ${ data.forks_count } </span>
-            </span>
-            <span class="issue-count" style="margin-right: 15px;">
-                <svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">
-                <title id="github-{{data.name}}-title"> Issue Count</title>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
-                </svg>
-                <span> ${ data.issues_count } </span>
-            </span>
-            <span class="pull-request-count" style="margin-right: 15px;">
-                <svg class="usa-icon" aria-labelledby="pull-request-count-${data.name}-title" role="img">
-                <title id="github-${data.name}-title"> Pull Request Count</title>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-pull-request"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/></svg>
-                </svg>
-                <span> ${ data.pull_requests_count } </span>
-            </span>
-            <span class="watchers-count">
-                <svg class="usa-icon" aria-labelledby="watchers-count-${data.name}-title" role="img">
-                <title id="github-${data.name}-title"> Watchers Count</title>
-                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>                </svg>
-                <span> ${ data.watchers_count } </span>
-            </span>
+    return `
+        <div class="usa-card-outer outer-project-template">
+            <div class="usa-card-middle">
+                <a href="${ projectUrl }" class="href-home">
+                    <div class="usa-card__container container-project-template">
+                        <div class="text-container-project-template">
+                            <div class="usa-card__header header-project-template">
+                                <h2 class="usa-card__heading">${ data.name }</h2>
+                            </div>
+                            <div class="body-project-template">
+                                <div>${ description }</div>
+                            </div>
+                            <div class="usa-card__footer footer-project-template">
+                                <span class="star-count" style="margin-right: 15px;">
+                                    <svg class="usa-icon" aria-labelledby="star-count-${data.name}-title" role="img">
+                                    title id="github-${data.name}-title"> Star Count</title>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+                                    </svg>
+                                    <span> ${ data.stargazers_count } </span>
+                                </span>
+                                <span class="fork-count" style="margin-right: 15px;">
+                                    <svg class="usa-icon" aria-labelledby="fork-count-${data.name}-title" role="img">
+                                    <title id="github-${data.name}-title"> Fork Count</title>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-fork"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>
+                                    </svg>
+                                    <span> ${ data.forks_count } </span>
+                                </span>
+                                <span class="issue-count" style="margin-right: 15px;">
+                                    <svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">
+                                    <title id="github-{{data.name}}-title"> Issue Count</title>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
+                                    </svg>
+                                    <span> ${ data.issues_count } </span>
+                                </span>
+                                <span class="pull-request-count" style="margin-right: 15px;">
+                                    <svg class="usa-icon" aria-labelledby="pull-request-count-${data.name}-title" role="img">
+                                    <title id="github-${data.name}-title"> Pull Request Count</title>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-pull-request"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/></svg>
+                                    </svg>
+                                    <span> ${ data.pull_requests_count } </span>
+                                </span>
+                                <span class="watchers-count">
+                                    <svg class="usa-icon" aria-labelledby="watchers-count-${data.name}-title" role="img">
+                                    <title id="github-${data.name}-title"> Watchers Count</title>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>                </svg>
+                                    <span> ${ data.watchers_count } </span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
             </div>
         </div>
     `;
-  }
-  
\ No newline at end of file
+}
+   
\ No newline at end of file
diff --git a/templates/org_report_template.md b/templates/org_report_template.md
index 6d2e04e97e..b8023ae54a 100644
--- a/templates/org_report_template.md
+++ b/templates/org_report_template.md
@@ -103,15 +103,15 @@ date_stampLastWeek: {date_stamp}
 </div>
 <div class="graph-container">
   <br>
-  <h2>Activity Graphs</h2>
+  <h2 class="graph-section-title">Activity Graphs</h2>
   <div class="all-graphs">
     <!--- Issues/PRs Status Breakdown Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_issue_gauge.svg", title: "Issues & PRs Status Breakdown" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_issue_gauge.svg", title: "Issues & PRs Status Breakdown", modal_description: "This graph provides an overview of the statuses of issues and pull requests in the organization. It categorizes them into open issues, open pull requests, and closed and merged pull requests, helping track progress and worklad distribution." %}}
     <!-- New Issues over Last 6 Months -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_new_issues_by_day_over_last_six_months.svg", title: "New Issues over Last 6 Months" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_new_issues_by_day_over_last_six_months.svg", title: "New Issues over Last 6 Months", modal_description: "These graphs illustrate the number of new contributors joining the organization over time. They show data for six-month intervals, providing insights into contributor growth and onboarding rates." %}}
     <!-- Top Committers Bar Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_top_committers.svg", title: "Top Committers" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_top_committers.svg", title: "Top Committers", modal_description: "This graph highlights the top contributors with the organizations, ranked by the number of commits they have made. It provides insights into the most active members driving developement efforts and their relative contributions to the organization's repositories." %}}
     <!-- Libyear Timeline Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_libyear_timeline.svg", title: "Dependency Libyears" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_owner}_libyear_timeline.svg", title: "Dependency Libyears", modal_description: "This timeline graph visualizes the age of dependencies in the organization in terms of 'libyears.' It highlights how up-to-date the dependencies are and the potential risk of outdated libraries." %}}
   </div>
 </div>
\ No newline at end of file
diff --git a/templates/repo_report_template.md b/templates/repo_report_template.md
index 67ee1c7cd5..f1c7047a0f 100644
--- a/templates/repo_report_template.md
+++ b/templates/repo_report_template.md
@@ -95,36 +95,44 @@ date_stampLastWeek: {date_stamp}
     </tbody>
   </table>
 </div>
-<div class="graph-container">
+<div class="graph-section">
   <br>
-  <h2>Activity Graphs</h2>
+  <h2 class="graph-section-title">Activity Graphs</h2>
   <div class="all-graphs">
     <!--- Issues/PRs Status Breakdown Graph -->
-    {{% render "graph-section"  baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/issue_gauge_{repo_name}_data.svg", title: "Issues & PRs Status Breakdown" %}}
+    {{% render "graph-section"  baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/issue_gauge_{repo_name}_data.svg", title: "Issues & PRs Status Breakdown", modal_description: "This graph provides an overview of the statuses of issues and pull requests in the repository. It categorizes them into open issues, open pull requests, and closed and merged pull requests, helping track progress and worklad distribution." %}}
     <!--- Contributor Activity Line Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/commit_sparklines_{repo_name}_data.svg", title: "Commits by Month" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/commit_sparklines_{repo_name}_data.svg", title: "Commits by Month", modal_description: "This line graph represents contributor activity over time by showing the number of commits made each month. It provides insights into trends in developement and periods of high and low activity." %}}
     <!--- First Response For Closed PR Scatterplot -->
-    {{% render "graph-section" baseurl: site.baseurl, class: "firstResponsePRCrop", path: "/{repo_owner}/{repo_name}/firstResponseForClosedPR_{repo_name}_data.png", title: "First Response For Closed PR" %}}
-    <!--- Line Complexity Graphs -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/total_line_makeup_{repo_name}_data.svg", title: "Line Complexity" %}}
+    {{% render "graph-section" baseurl: site.baseurl, class: "firstResponsePRCrop", path: "/{repo_owner}/{repo_name}/firstResponseForClosedPR_{repo_name}_data.png", title: "First Response For Closed PR", modal_description: "This scatterplot visualizes the time it takes for the first response on closed pull requests. Each point represents a pull request, helping analyze the response times and potential bottlenecks in the review process." %}}
     <!--- New Commit Contributors by Day over Last Month and Last 6 Months -->
       {{% assign optionsArray = '1 Month, 6 Month' | split: ',' %}}
       {{% assign graphsArray = '/{repo_owner}/{repo_name}/new_commit_contributors_by_day_over_last_month_{repo_name}_data.svg, /{repo_owner}/{repo_name}/new_commit_contributors_by_day_over_last_six_months_{repo_name}_data.svg' | split: ',' %}}
-      {{% render "graph-toggle", baseurl: site.baseurl, name: "new-contributors" options: optionsArray, graphs: graphsArray, title: "Number of Contributors Joining per Interval" %}}
+      {{% render "graph-toggle", baseurl: site.baseurl, name: "new-contributors" options: optionsArray, graphs: graphsArray, title: "Number of Contributors Joining per Interval", modal_description: "These graphs illustrate the number of new contributors joining the project over time. They show data for one-month and six-month intervals, providing insights into contributor growth and onboarding rates." %}}
+  </div>
+</div>
+
+<div class="graph-section">
+  <br>
+  <h2 class="graph-section-title">COCOMO Graphs</h2>
+  <div class="all-graphs">
+    <!--- Line Complexity Graphs -->
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/total_line_makeup_{repo_name}_data.svg", title: "Line Complexity", modal_description: "This graph measures the complexity of the codebase over time by analyzing the number lines, blank line and commented lines." %}}
     <!-- Languages Graphs - Summary + Predominant -->
     {{% assign optionsArray = 'Summary, Predominant' | split: ',' %}}
     {{% assign graphsArray = "/{repo_owner}/{repo_name}/language_summary_{repo_name}_data.svg, /{repo_owner}/{repo_name}/predominant_langs_{repo_name}_data.svg" | split: ',' %}}
     {{% render "graph-toggle" baseurl: site.baseurl, name:"language-information" options: optionsArray, graphs: graphsArray, title: "Language Information" %}}
     <!-- Average Issue Resolution Time -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/average_issue_resolution_time_{repo_name}_data.svg", title: "Average Issue Resolution Time" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/average_issue_resolution_time_{repo_name}_data.svg", title: "Average Issue Resolution Time", modal_description: "This graph tracks the average time taken to resolve issues in the repository. It helps identify trends in issue resolution efficiency and areas for improvement." %}}
     <!-- Libyear Timeline Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/libyear_timeline_{repo_name}_data.svg", title: "Dependency Libyears" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/libyear_timeline_{repo_name}_data.svg", title: "Dependency Libyears", modal_description: "This timeline graph visualizes the age of dependencies in the repository in terms of 'libyears.' It highlights how up-to-date the dependencies are and the potential risk of outdated libraries." %}}
     <!-- DRYness Percentages Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/DRYness_{repo_name}_data.svg", title: "DRYness Percentage Graph" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/DRYness_{repo_name}_data.svg", title: "DRYness Percentage Graph", modal_description: "This graph measures the 'Don't Repeat Yourself' (DRY) principle compliance in the repository. It calculates the percentage of duplicate versus unique code, indicating the overall efficiency of the codebase." %}}
     <!-- Cost Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_costs_{repo_name}_data.svg", title: "Estimated Costs" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_costs_{repo_name}_data.svg", title: "Estimated Costs", modal_description: "This graph provides an estimation of the developement cost and corresponding value of the project." %}}
      <!-- Time Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_time_{repo_name}_data.svg", title: "Estimated Time" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_time_{repo_name}_data.svg", title: "Estimated Time", modal_description: "This graph estimates the time required to develop the project." %}}
     <!-- Contributor Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_people_contributing_{repo_name}_data.svg", title: "Estimated Individual Contributors" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_people_contributing_{repo_name}_data.svg", title: "Estimated Individual Contributors", modal_description: "This graph visualizes the number of contributors required to complete a project, based on current scope." %}}
+  </div>
 </div>
\ No newline at end of file