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/NavButton/NavButton.jsx b/project-app/components/Landing/NavButton/NavButton.jsx
index 8364f6c..d92f46d 100644
--- a/project-app/components/Landing/NavButton/NavButton.jsx
+++ b/project-app/components/Landing/NavButton/NavButton.jsx
@@ -4,7 +4,7 @@ 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/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/index.js b/project-app/pages/index.js
index 218599f..5723485 100644
--- a/project-app/pages/index.js
+++ b/project-app/pages/index.js
@@ -5,6 +5,7 @@ import Navbar from "../components/Navbar/Navbar";
 import dynamic from "next/dynamic";
 import LandingBanner from "../components/Landing/Landing";
 import Weather from "../components/Weather/Weather";
+import ImageGallery from "../components/ImageGallery/ImageGallery";
 
 import Footer from "../components/Footer/Footer";
 
@@ -24,6 +25,7 @@ export default function Home() {
         <Navbar />
         <LandingBanner />
         <Stats />
+        <ImageGallery/>
         <MapWithNoSSR />
         <Weather />
         <Footer />
diff --git a/project-app/styles/Home.module.css b/project-app/styles/Home.module.css
index c551746..7981803 100644
--- a/project-app/styles/Home.module.css
+++ b/project-app/styles/Home.module.css
@@ -1,11 +1,11 @@
 .container {
   overflow: hidden;
+  
 }
 
 .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..9f9f9b9 100644
--- a/project-app/styles/globals.css
+++ b/project-app/styles/globals.css
@@ -5,6 +5,8 @@
 body{
   overflow-x: hidden;
   width: 100vw;
+  background-color: #f15100;
+
 }
 
 img {