diff --git a/src/components/pages/Landing/RenderLandingPage.jsx b/src/components/pages/Landing/RenderLandingPage.jsx
index 6be6b69a4..3f182baa4 100644
--- a/src/components/pages/Landing/RenderLandingPage.jsx
+++ b/src/components/pages/Landing/RenderLandingPage.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 // ADD IMPORTS BACK FOR GRAPHS SECTION
-// import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png';
-// import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png';
-// import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png';
+import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png';
+import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png';
+import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png';
 import HrfPhoto from '../../../styles/Images/paper-stack.jpg';
 import '../../../styles/RenderLandingPage.less';
 import { Button } from 'antd';
 import { useHistory } from 'react-router-dom';
 // for the purposes of testing PageNav
-// import PageNav from '../../common/PageNav';
+import PageNav from '../../common/PageNav';
 
 function RenderLandingPage(props) {
   const scrollToTop = () => {
@@ -17,7 +17,7 @@ function RenderLandingPage(props) {
   };
 
   const history = useHistory();
-
+  <PageNav />;
   return (
     <div className="main">
       <div className="header">
@@ -26,13 +26,30 @@ function RenderLandingPage(props) {
           <h3>
             The Asylum Office Grant Rate Tracker provides asylum seekers,
             researchers, policymakers, and the public an interactive tool to
-            explore USCIS data on Asylum Office decisions
+            explore USCIS data on Asylum Office decisions.
           </h3>
         </div>
       </div>
 
       {/* Graphs Section: Add code here for the graphs section for your first ticket */}
-      {/* <div className="graphs-section"> */}
+      <div className="graphs-section">
+        <div className="graph-item">
+          <img src={GrantRatesByOfficeImg} alt="Grant Rates by Office" />
+          <p>Search Grant Rates By Office</p>
+        </div>
+        <div className="graph-container">
+          <img
+            src={GrantRatesByNationalityImg}
+            alt="Grant Rates by Nationality"
+          />
+          <p>Search Grant Rates By Nationality</p>
+        </div>
+        <div className="graph-container">
+          <img src={GrantRatesOverTimeImg} alt="Grant Rates Over Time" />
+          <p>Search Grant Rates Over Time</p>
+        </div>
+      </div>
+
       <div className="view-more-data-btn-container">
         <Button
           type="default"
@@ -41,6 +58,13 @@ function RenderLandingPage(props) {
         >
           View the Data
         </Button>
+        <Button
+          type="default"
+          style={{ backgroundColor: '#404C4A', color: '#FFFFFF' }}
+          onClick={() => history.push('/graphs')}
+        >
+          Download the Data
+        </Button>
       </div>
 
       <div className="middle-section">
@@ -55,18 +79,55 @@ function RenderLandingPage(props) {
             through a Freedom of Information Act request. You can search for
             information on asylum grant rates by year, nationality, and asylum
             office, visualize the data with charts and heat maps, and download
-            the data set
+            the data set.
           </h3>
         </div>
       </div>
       <div>
         {/* Bottom Section: Add code here for the graphs section for your first ticket */}
-        {/* <div className="bottom-section">*/}
-        <p onClick={() => scrollToTop()} className="back-to-top">
-          Back To Top ^
-        </p>
+        <div className="bottom-section">
+          <h1>Systematic Disparity Insights</h1>
+          <div className="h2-container">
+            <div className="h2-item">
+              <h2>36%</h2>
+              <h3>
+                By the end of the Trump administration, the average asylum
+                office grant rate had fallen 36 percent from an average of 44
+                percent in fiscal year 2016 to 28 percent in fiscal year 2020.
+              </h3>
+            </div>
+            <div className="h2-item">
+              <h2>5%</h2>
+              <h3>
+                The New York asylum office grant rate dropped to 5 percent in
+                fiscal year 2020.
+              </h3>
+            </div>
+            <div className="h2-item">
+              <h2>6x Lower</h2>
+              <h3>
+                Between fiscal year 2017 and 2020, the New York asylum office’s
+                average grant rate was six times lower than the San Francisco
+                asylum office.
+              </h3>
+            </div>
+          </div>
+          <div className="view-more-data-btn-container">
+        <Button
+          type="default"
+          style={{ backgroundColor: '#404C4A', color: '#FFFFFF' }}
+          onClick={() => history.push('/graphs')}
+        >
+          Read More
+        </Button>
+      </div>
+          <p onClick={() => scrollToTop()} className="back-to-top">
+            Back To Top ^
+          </p>
+        </div>
       </div>
     </div>
   );
 }
 export default RenderLandingPage;
+
diff --git a/src/styles/RenderLandingPage.less b/src/styles/RenderLandingPage.less
index 70ee07c37..3f8db43ec 100644
--- a/src/styles/RenderLandingPage.less
+++ b/src/styles/RenderLandingPage.less
@@ -10,7 +10,7 @@
 
 .header {
     background-color: @main-color;
-    display:flex;
+    display: flex;
     text-align: center;
     width: 100%;
     height: 20vh;
@@ -27,31 +27,51 @@
     text-align: center;
     width: 100%;
     align-items: center;
+    margin-bottom: 40px;
+    font-size: 24px;
 }
 
 .header-text-container h1 {
-    font-size: 3rem;
+    font-size: 48px;
     color: @white;
     font-family: 'moneta';
 }
 
 .header-text-container h3 {
-    font-family: 'beatrice regular';
+    font-family: 'moneta';
     color: @white;
-    font-size: 1.2rem;
+    font-size: 24px;
 }
 
-// .graphs-section {
+.graphs-section {
 //  ADD THIS BACK IN WHEN YOU HAVE THE GRAPHS SECTION
-// }
+    display: flex;
+    justify-content: space-around; /* Distribute space between images */
+    align-items: flex-end; /* Align items to the bottom */
+}
+
+.graphs-section img {
+    display: block; /* Ensure images are block elements for margin */
+    margin: 0 auto; /* Center the images */
+}
+
+.graphs-section p {
+    text-align: center; /* Center the text below the image */
+    margin-top: 10px; /* Add space between the image and caption */
+    font-family: 'acumin';
+    font-size: 24px; /* Adjust the font size to be slightly larger */
+}
 
 .view-more-data-btn-container {
+    display: flex;
+    justify-content: center; /* Align buttons closer together */
+    align-items: center;
+    gap: 40px; /* Adjust this value to control spacing between buttons */
     height: 44px;
-    width: 180px;
-    margin: 0 auto;
-    text-align: center;
-    margin-bottom: 10%;
-}
+    width: 100%;
+    margin-bottom: 5%;
+    margin-top: 60px;
+  }
 
 .middle-section {
     display: flex;
@@ -75,16 +95,73 @@
     font-size: 1.4rem;
 }
 
-// .bottom-section {
+.bottom-section {
 //      ADD THIS BACK IN WHEN YOU HAVE A BOTTOM SECTION
-// }
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   margin-bottom: 40px;
+   margin-top: 130px;
+}
+
+h1 {
+    font-size: 56px;
+    font-family: 'Moneta';
+  }
+
+.h2-container {
+    display: flex;
+    justify-content: space-between; /* Align items with space between them */
+    gap: 20px; /* Adjust spacing between the h2/h3 items */
+    margin-bottom: 20px; /* Space below the container */
+    margin-top: 80px;
+  }
+
+.h2-item {
+    display: flex;
+    flex-direction: column; /* Align elements in a vertical column */
+    align-items: center; /* Center the content horizontally */
+    text-align: center; /* Ensure the text inside is centered */
+    margin-bottom: 20px; /* Add some spacing below */
+  }
+
+  .h2-item h2 {
+    margin: 0;
+    font-family: 'moneta';
+    font-size: 48px;
+  }
+  
+  .h2-item h3 {
+    margin-top: 10px; /* Add some space between the <h2> and <h3> */
+    line-height: 1.4; /* Adjust the line height for readability */
+    max-width: 300px; /* Control the width for wrapping */
+    text-align: center; /* Center the text */
+    font-family: 'acumin';
+    font-size: 1.2rem;
+  }
+
+.h2-container h2 {
+    margin: 0;
+  }
+
+  .h2-container h3 {
+    margin: 0;
+    text-align: center;
+    line-height: 1.5; /* Adjust line height for readability */
+    max-width: 500px; /* Adjust width to control text wrapping */
+  }  
 
 .back-to-top {
     width: 8%;
     font-size: 1.2rem;
     cursor: pointer;
     color: black;
-    margin: 5% auto;
+    margin: .2% auto;
+    margin-top: 20px;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .ant-space-align-center {
@@ -179,7 +256,9 @@
     }
 
     .bottom-section h1 {
-        font-size: 2rem;
+        font-family: 'moneta', sans-serif;;
+        font-size: 48px;
+        margin-bottom: 10vh;
     }
 
     .data-container {