diff --git a/app/site/_includes/assets.liquid b/app/site/_includes/assets.liquid
index 736e4deab8..09e5a2cf5c 100644
--- a/app/site/_includes/assets.liquid
+++ b/app/site/_includes/assets.liquid
@@ -32,3 +32,4 @@
 
 <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/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 ef6fe74621..22a5b9b326 100644
--- a/app/site/_includes/nav.liquid
+++ b/app/site/_includes/nav.liquid
@@ -13,11 +13,6 @@
       </div>
     </div>
     <nav aria-label="Primary navigation" class="usa-nav nav-styling">
-      <button type="button" class="usa-nav__close">
-        <svg class="usa-icon--size-7 button-styling" aria-hidden="true" focusable="false" role="img">
-          <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
-        </svg>
-      </button>
       <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
         <li class="usa-nav__primary-item">
           <button
@@ -36,6 +31,11 @@
             </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>
diff --git a/app/site/_layouts/org-report.liquid b/app/site/_layouts/org-report.liquid
index ed6da2a9a5..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-org-report">
+<div class="grid-container-reports">
   {% assign organization = organizations | findObject: org %}
 
-  <div class="report_heading">
-    <h1 class=report_heading-title>
+  <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,7 +17,7 @@ layout: base
     </h1>
   </div>
 
-  <div class="report-container">
+  <div class="report_container">
     {% if organization %}
       <h2>Organization Stats</h2>
       <div class="github-information">
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 5ae892598a..94b8f6b365 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -7,12 +7,17 @@ layout: base
       <h2>Metrics & Code.JSON</h2>
     </div>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis aliquet quam ut cursus. Ut ac orci eros. 
-      Suspendisse sodales nulla id metus egestas, euismod aliquet massa laoreet. Nulla vel blandit neque, ac efficitur augue. 
-      Donec consequat pulvinar lacus, a dignissim sem rhoncus ut. Nunc eu elit dignissim, elementum nunc ut, fermentum nulla. 
-      Proin sed enim vel lorem dictum lacinia quis id justo. Vestibulum ac justo commodo, interdum nisl nec, posuere lacus. 
-      In hac habitasse platea dictumst. Aliquam quis risus at tortor placerat congue ut in mi. 
-      Praesent suscipit lectus sit amet massa.
+      <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 }}
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index 1c15419b55..e1a7a2f82d 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -20,8 +20,6 @@ layout: base
     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 %}
@@ -109,55 +107,63 @@ layout: base
         </div>
       </div>
     </div>
-
     <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">
-              <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"
+              <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>
+                <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>
-              <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>
+              <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>
-              <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>
+              <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="padding-left-05" id="filter-tags"></div>
       <div id="content-container">
@@ -169,7 +175,6 @@ layout: base
             {% 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 %}
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 5eae99a2d9..3bf561a9c1 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -52,15 +52,14 @@ h1 {
 
 .usa-nav__primary-item {
   display: flex;
-  justify-content: flex-end;
-  background-color: #fff;
+  justify-content: flex-start;
 }
 
 .usa-nav {
   display: none;
-  position: fixed;
+  position: relative;
   top: 4%;
-  right: 0;
+  right: -10%;
   background: #fff;
   z-index: 1000;
   height: fit-content;
@@ -78,36 +77,26 @@ h1 {
   height: 35%;
 }
 
-.usa-nav__close {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  cursor: pointer;
-  z-index: 1100;
-  background: none;
-  border: none;
-}
-
-.usa-nav__close svg {
-  width: 24px;
-  height: 24px;
-  fill: #000;
+.close-icon {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1%;
 }
 
 .usa-nav__submenu {
   padding: 1rem;
-  border: .5px solid #999999;
+  border-radius: 10px;
   width: fit-content;
   background-color: #fff;
   list-style: none;
   margin: 0;
   font-size: 1.5rem;
-  padding: 0 15%;
+  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: 1rem;
+  margin-bottom: .6rem;
 }
 
 .usa-nav__submenu a {
@@ -117,13 +106,27 @@ h1 {
 }
 
 .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;
 }
@@ -140,8 +143,16 @@ h1 {
   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 {
+.grid-container{
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -333,6 +344,10 @@ a.usa-link:visited {
 }
 
 /* Projects */
+#content-container {
+  margin-top: 5%;
+}
+
 .grid-container-projects {
   display: flex;
   flex-direction: column;
@@ -350,18 +365,62 @@ a.usa-link:visited {
   display: flex;
 }
 
-/* .search-and-sort {
-  display: flex;
-  justify-content: flex-end;
+.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 {
-  height: 100px; 
+.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;
 }
 
-.sort-dropdown {
+.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;
@@ -370,10 +429,6 @@ a.usa-link:visited {
 
 .container-project-template {
   display: flex;
-  /* height: fit-content; */
-  /* flex-direction: column;
-  align-items: flex-start;
-  justify-content: center; */
 }
 
 .text-container-project-template {
@@ -460,54 +515,46 @@ a.usa-link:visited {
   margin: 0;
 }
 
-.select-sort {
-  height: 35px;
-  width: fit-content;
-  margin-right: 30px;
-  padding: 0 5% 0 5%;
-}
-
 .report_heading-title {
   display: flex;
 }
 
 /* ORG REPORTS */
-.grid-container-org-report {
+.grid-container-reports {
   display: flex;
-  width: 80vw;
+  width: 80%;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
 }
 
-/* .report_heading {
-  display: flex;
-  width: 90%;
-  justify-content: center;
-} */
+.report_heading-reports {
+  margin: 0;
+}
 
-.report-container {
-  display: flex;
-  flex-direction: column;
+.report_heading-reports-title {
+  margin: 15% 0 5%;
   width: 100%;
-  align-items: center;
+  color: #000;
+}
+
+.report-link {
+  color: #000;
+}
+
+.report_container {
+  width: 95%;
 }
 
 .github-information {
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
+  margin: 2% 0;
 }
 
 .stat-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 20%;
-}
-
-.repo-stats {
-  display: flex;
-  font-size: 1.4rem;
-  margin-bottom: 0;
 }
 
 .post {
@@ -517,138 +564,118 @@ a.usa-link:visited {
   align-items: center;
 }
 
+.summary-table {
+  display: flex;
+  width: 75%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 /* This is so that augur visualizations have the buttons cropped out. */
 .firstResponsePRCrop img {
-  width: 900px;
-  height: 550px;
+  width: 500px;
+  height: 310px;
   object-fit: cover;
 }
 
-.main-tag {
-  background-color: #1a4480;
-  padding: 0.5rem;
-  font-weight: bolder;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem; /*Adjust the gap as needed */
-  border-radius: 0.25rem;
-}
-
 .graph-container {
   width: 100%;
 }
 
-/* .tools-tag {
-  background-color: green;
+.all-graphs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
 }
 
-.apis-tag {
-  background-color: #E52109;
+.all-graphs > .graph-container {
+  flex: 1 1 calc(50% - 1rem);
+  min-width: 300px;
 }
 
-.apps-tag {
-  background-color: #0076D6;
+.graph-box {
+  display: flex;
+  width: 100%;
+  height: 600px;
+  background-color: #E0EAF8;
+  /* align-items: stretch;
+  justify-content: center; */
+  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;
 }
 
-.data-tag {
-  background-color: #E66F0F;
+.graph-section-title {
+  font-size: 2rem;
+  margin: 2%;
 }
 
-.docs-tag {
-  background-color: #03C585;
+.graph-title {
+  font-size: 1.5rem;
+  margin: 3% 0 0 3%;
 }
 
-.libraries-tag {
-  background-color: #D72D79;
-} */
-
-/* .standards-tag {
-  background-color: #FFBE2F;
+.usa-button-group {
+  margin: 2% 0 -15% 3%;;
 }
 
-.icon-tag {
-  padding: 0.35rem;
-} */
-
-/* .primary-tag-group {
-  padding-top-1
-  padding-top: 0.5rem;
-} */
-
-/* .secondary-tag-group {
-  padding-y-3
-  padding-top:1.5rem;
-  padding-bottom:1.5rem;
-} */
+embed {
+  min-width: 500px;
+}
 
-/* .projects-container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
+.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;
 }
 
-.block {
+.usa-modal[aria-hidden="false"] {
   display: block;
-  width: 100%;
-} */
-
-/* .dashboard-container {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  padding-top: 5rem;
-} */
-
-/* .filters-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-top: 3.4rem;
+  opacity: 1;
 }
 
-.search-container {
-  flex:1;
-  margin-bottom: 1rem;
-  box-sizing: border-box; 
+.usa-modal--active {
+  display: block;
+  opacity: 1;
 }
 
-.search-and-sort {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 3rem;
-} */
-
-/* .sort-dropdown {
+.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;
+}
 
-/* @media screen and (max-width: 1080px) {
-  .dashboard-container {
-    flex-direction: column;
-  }
+.modal-button:hover {
+  border-radius: 30px;
+  background-color: #E7C000;
+  color: #000;
 }
 
-@media screen and (max-width: 720px) {
-  .search-and-sort {
-    flex-direction: column;
-    gap: 0;
-  }
+.modal-button:active {
+  box-shadow: none;
+}
 
-  .search-container {
-    margin-bottom: 0;
-  }
+.usa-modal__close {
+  border: none;
+  cursor: pointer;
+}
 
-  .sort-dropdown {
-    text-align: left;
-  }
-} */
\ No newline at end of file
+iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
+  outline: none;
+  outline-offset: 0rem;
+}
\ 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/projects.js b/app/src/js/projects.js
index 69bdbdc836..428a8e8897 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -504,4 +504,4 @@ document.addEventListener("DOMContentLoaded", () => {
     createProjectCards()
   })
   createProjectCards()
-})
+})
\ 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