diff --git a/project-app/components/ImageGallery/ImageGallery.jsx b/project-app/components/ImageGallery/ImageGallery.jsx
index e69de29..038c02d 100644
--- a/project-app/components/ImageGallery/ImageGallery.jsx
+++ b/project-app/components/ImageGallery/ImageGallery.jsx
@@ -0,0 +1,24 @@
+import { Carousel } from 'antd';
+import React from 'react';
+import Style from './ImageGallery.module.css'
+
+const ImageGallery = () => (
+<div className={Style.imageContainer}>
+  <Carousel className={Style.Carousel} autoplay>
+        <div >
+        <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+        <div >
+            <img className={Style.imageCSS} src="https://www.belvederecl.com/wp-content/uploads/2019/05/Community-cleanup-picture.jpg"/>
+        </div>
+  </Carousel>
+  </div>
+);
+
+export default ImageGallery;
\ No newline at end of file
diff --git a/project-app/components/ImageGallery/ImageGallery.module.css b/project-app/components/ImageGallery/ImageGallery.module.css
new file mode 100644
index 0000000..b5d798f
--- /dev/null
+++ b/project-app/components/ImageGallery/ImageGallery.module.css
@@ -0,0 +1,25 @@
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+    background-color: #006C72;
+
+}
+
+.Carousel {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 350px;
+    width: 500px;
+    margin:50px 0px 100px 0px;
+    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
+}
+
+.imageCSS {
+    border-radius: 25px;
+    height: 350px;
+    width: 500px; 
+  
+}
\ No newline at end of file
diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx
index 9b0c34d..1f99393 100644
--- a/project-app/components/Landing/Landing.jsx
+++ b/project-app/components/Landing/Landing.jsx
@@ -9,7 +9,7 @@ const LandingBanner = () => {
       <div className="relative container mx-auto p-4 flex items-center justify-center z-10 h-48 w-2/4 mt-[10rem]">
         <div>
           <div className="flex flex-col justify-center items-center lg:items-start text-center">
-            <h1 className="text-6xl font-semibold text-gray-900 leading-none align-center">
+            <h1 className="text-6xl font-semibold text-gray-900 leading-none align-center mt-[5em]">
               Project Clean-Up
             </h1>
             <div className="flex flex-row items-center justify-between space-x-8 md:ml-24">
diff --git a/project-app/components/Landing/NavButton/NavButton.jsx b/project-app/components/Landing/NavButton/NavButton.jsx
index 8364f6c..1fb1f23 100644
--- a/project-app/components/Landing/NavButton/NavButton.jsx
+++ b/project-app/components/Landing/NavButton/NavButton.jsx
@@ -4,7 +4,8 @@ import React from "react";
 
 function NavButton( {buttonText}) {
     return (
-        <button className = "bg-orange-500 hover:bg-orange-700 text-black font-bold py-2 px-4 rounded">
+
+        <button className = "bg-[#FF9505] hover:bg-orange-700 text-white font-bold py-2 px-4 rounded shadow-2xl	">
         {buttonText}
         </button>
     )
diff --git a/project-app/components/Navbar/Navbar.jsx b/project-app/components/Navbar/Navbar.jsx
index dc42bd5..9693b53 100644
--- a/project-app/components/Navbar/Navbar.jsx
+++ b/project-app/components/Navbar/Navbar.jsx
@@ -27,7 +27,7 @@ const Navbar = () => {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="https://www.antgroup.com"
+              href="/about"
             >
               About Us
             </a>
diff --git a/project-app/components/OurMission/OurMission.jsx b/project-app/components/OurMission/OurMission.jsx
index e69de29..3fd4149 100644
--- a/project-app/components/OurMission/OurMission.jsx
+++ b/project-app/components/OurMission/OurMission.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Style from './OurMission.module.css'
+
+const OurMission = () => {
+  return (
+    <div className={Style.missionContainer}>
+            <div className={Style.textContainer}>
+                <h2 className={Style.missionTitle}>Our Mission</h2>
+                <p className={Style.missionParagraph}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+            </div>
+        <img className={Style.imageStyling} src="https://www.countrywidegrounds.com/wp-content/uploads/jch-optimize/ng/wp-content_uploads_2020_02_Litter-picking-and-fly-tipping-300x200.webp"/>
+    </div>
+  )
+}
+
+export default OurMission
\ No newline at end of file
diff --git a/project-app/components/OurMission/OurMission.module.css b/project-app/components/OurMission/OurMission.module.css
new file mode 100644
index 0000000..be8e34b
--- /dev/null
+++ b/project-app/components/OurMission/OurMission.module.css
@@ -0,0 +1,28 @@
+.missionTitle {
+    font-size: 50px;
+    color: #004F54;
+}
+
+.missionParagraph {
+    font-size: 20px;
+    margin-top: 15px;
+    color: #004F54;
+
+}
+
+.missionContainer {
+    margin: 2em 2em 5em 2em;
+    display: flex;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.imageStyling {
+    height: 300px;
+    width: 300px;
+    border-radius: 50%;
+    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
+}
\ No newline at end of file
diff --git a/project-app/next.config.js b/project-app/next.config.js
index 0b1b856..076ed7e 100644
--- a/project-app/next.config.js
+++ b/project-app/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  optimizeFonts: false,
+  
 };
 
 module.exports = nextConfig;
diff --git a/project-app/package-lock.json b/project-app/package-lock.json
index d16e39d..4fe73ee 100644
--- a/project-app/package-lock.json
+++ b/project-app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@fontsource/montserrat": "^4.5.11",
+        "@sefailyasoz/react-carousel": "^1.1.1",
         "antd": "^4.22.1",
         "esri-leaflet-geocoder": "^3.1.3",
         "leaflet": "^1.8.0",
@@ -490,6 +491,17 @@
       "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==",
       "dev": true
     },
+    "node_modules/@sefailyasoz/react-carousel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sefailyasoz/react-carousel/-/react-carousel-1.1.1.tgz",
+      "integrity": "sha512-cpwubrSfXReAPZjTBYDa1G2kDBql5HpksPq3hN+VnPAdlhIk+WDKdrPKktAhRQ4fsFKJIsqBgm+/nbKI+tLotw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
@@ -6010,6 +6022,12 @@
       "integrity": "sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==",
       "dev": true
     },
+    "@sefailyasoz/react-carousel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sefailyasoz/react-carousel/-/react-carousel-1.1.1.tgz",
+      "integrity": "sha512-cpwubrSfXReAPZjTBYDa1G2kDBql5HpksPq3hN+VnPAdlhIk+WDKdrPKktAhRQ4fsFKJIsqBgm+/nbKI+tLotw==",
+      "requires": {}
+    },
     "@swc/helpers": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.3.tgz",
diff --git a/project-app/package.json b/project-app/package.json
index 51576c8..c297a1a 100644
--- a/project-app/package.json
+++ b/project-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fontsource/montserrat": "^4.5.11",
+    "@sefailyasoz/react-carousel": "^1.1.1",
     "antd": "^4.22.1",
     "esri-leaflet-geocoder": "^3.1.3",
     "leaflet": "^1.8.0",
diff --git a/project-app/pages/_documents.js b/project-app/pages/_documents.js
index ee6f465..2f83836 100644
--- a/project-app/pages/_documents.js
+++ b/project-app/pages/_documents.js
@@ -1,6 +1,11 @@
 import { Html, Head, Main, NextScript } from "next/document";
 
-export default function Document() {
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+render() {
   return (
     <Html>
       <Head>
@@ -14,7 +19,11 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+
       </body>
     </Html>
-  );
+  )
+}
 }
+
+export default MyDocument;
\ No newline at end of file
diff --git a/project-app/pages/about.js b/project-app/pages/about.js
new file mode 100644
index 0000000..2b97b4c
--- /dev/null
+++ b/project-app/pages/about.js
@@ -0,0 +1,5 @@
+export default function AboutUs(){
+    return (
+        <h1>Hello</h1>
+    )
+}
\ No newline at end of file
diff --git a/project-app/pages/index.js b/project-app/pages/index.js
index 218599f..8b1a869 100644
--- a/project-app/pages/index.js
+++ b/project-app/pages/index.js
@@ -1,10 +1,13 @@
 import Head from "next/head";
 import Image from "next/image";
-import styles from "../styles/Home.module.css";
 import Navbar from "../components/Navbar/Navbar";
 import dynamic from "next/dynamic";
 import LandingBanner from "../components/Landing/Landing";
 import Weather from "../components/Weather/Weather";
+import OurMission from "../components/OurMission/OurMission.jsx"
+
+import ImageGallery from "../components/ImageGallery/ImageGallery";
+
 
 import Footer from "../components/Footer/Footer";
 
@@ -16,18 +19,23 @@ const MapWithNoSSR = dynamic(() => import("../components/Map/Map.jsx"), {
 
 export default function Home() {
   return (
-    <>
+    <div className="bg-[#E6E5E4]">
       <Head>
-        <title>Project Clean-Up|Home</title>
+        <title>Project Clean-Up | Home</title>
       </Head>
       <div className="overflow-hidden font-sans">
         <Navbar />
         <LandingBanner />
         <Stats />
+
+        <OurMission/>
+
+        <ImageGallery/>
+
         <MapWithNoSSR />
         <Weather />
         <Footer />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/project-app/styles/Home.module.css b/project-app/styles/Home.module.css
index c551746..0d40418 100644
--- a/project-app/styles/Home.module.css
+++ b/project-app/styles/Home.module.css
@@ -5,7 +5,6 @@
 .main {
   min-height: 100vh;
   padding: 4rem 0;
- 
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/project-app/styles/globals.css b/project-app/styles/globals.css
index 1b6229d..a307c72 100644
--- a/project-app/styles/globals.css
+++ b/project-app/styles/globals.css
@@ -5,6 +5,10 @@
 body{
   overflow-x: hidden;
   width: 100vw;
+
+  background-color: #f15100;
+
+
 }
 
 img {