diff --git a/package-lock.json b/package-lock.json
index fd9a0f2..71662cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-dom": "^18.2.0",
         "react-markdown": "^9.0.1",
         "react-player": "^2.16.0",
+        "react-responsive-carousel": "^3.2.23",
         "s": "^1.0.0",
         "update": "^0.7.4"
       },
@@ -25988,6 +25989,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -26098,6 +26110,16 @@
         "react": ">=16.6.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
diff --git a/package.json b/package.json
index b7c66c7..8c02388 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-player": "^2.16.0",
+    "react-responsive-carousel": "^3.2.23",
     "s": "^1.0.0",
     "update": "^0.7.4"
   },
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 2bc323c..3974c12 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -1,6 +1,9 @@
 import React from "react";
 import clsx from 'clsx';
 import styles from "./styles.module.css";
+import { Carousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+
 // import { library } from "@fortawesome/fontawesome-svg-core";
 // import { fab } from "@fortawesome/free-brands-svg-icons";
 
@@ -294,7 +297,7 @@ const Member = ({ idx, name,logo,link,width,height }) => (
 );
 
 const Card = ({ title, image, description, link }) => (
-  <div className="col col--4 " style={{ display: 'flex', marginBottom: "20px"}}>
+  <div className="col col--4" style={{ display: 'flex', marginBottom: "20px"}}>
     <div className="card" style={{ flex: '1' }}>
       <div className="card__image" style={{ textAlign: 'center' }}>
         <img
@@ -319,12 +322,21 @@ const Card = ({ title, image, description, link }) => (
   </div>
 );
 
-
 export default function HomepageFeatures() {
   return (
     <section className={styles.homepageContainer}>
       <div className="container" >
-        <div className="row">
+        <Carousel
+          showThumbs={false}
+          autoPlay={true}
+          useKeyboardArrows={true}
+          emulateTouch={true}
+          interval={4000}
+          infiniteLoop
+          showStatus={false}
+          showIndicators={true}
+        >
+          <div className="row">
           <Card
             title="Documentation"
             image="img/documentation.png"
@@ -342,10 +354,50 @@ export default function HomepageFeatures() {
             image="img/tutorial.png"
             description="Elevate your expertise through our training programs. Delve into our tutorials and educational resources, covering topics such as the NextGen framework, Data Science model, and more."
             link="/docs/education/"
+          />      
+          </div>
+          <div className="row"> 
+          <Card
+            title="NextGen In A Box"
+            image="img/NGIAB-logo.jpg"
+            description="Utilize NextGen In A Box (NGIAB) to locally run NextGen framework. Choose specific regions or basins for analysis, control input data, and modify confiurations, all within a containerized environment."
+            link="/docs/products/community-nextgen/nextgeninaboxDocker"
           />
+          <Card
+            title="AWS"
+            image="img/aws-logo.jpg"
+            description="Leverage the power of CIROH AWS Account to elevate your hydrological research. Get access to enterprise-level AWS cloud platform, and utilize AWS computing resources and scalable storage for your research."
+            link="/docs/services/cloudservices/aws"
+          />
+          <Card
+            title="Google Cloud"
+            image="img/google-cloud.jpg"
+            description="Explore different services and tools offered by CIROH Google Cloud. Learn how to access Google Cloud Platform (GCP) and leverage its resources for your research and projects."
+            link="/docs/services/cloudservices/google cloud"
+          />
+          </div>
+          <div className="row">
           
-          
-        </div>
+          <Card
+            title="CIROH JupyterHub"
+            image="img/jupyterhub.jpg"
+            description="Access cloud-based JupyterHub environment on Google Cloud tailored for hydrological research. Leverage computing power with both CPU and GPU capabilities for advanced computational needs."
+            link="/docs/services/cloudservices/CIROH JupyterHub"
+          />
+          <Card
+            title="Pantarhei"
+            image="img/pantarhei-logo.jpg"
+            description="Access Pantarhei, a high-performance computing (HPC) cluster, to run computationally intensive hydrological models. Utilize Pantarhei to perform large-scale simulations and data processing tasks."
+            link="/docs/services/on-prem/Pantarhei"
+          />
+          <Card
+            title="CIROH Portal"
+            image="img/ciroh-logo.jpg"
+            description="This portal enhances collaboration and innovation by providing access to interactive web apps, datasets, and learning modules, supporting CIROH and NOAA NWM researchers in advancing hydrological science."
+            link="/docs/products/tethysportal"
+          />
+          </div>
+          </Carousel>
       </div>
       <div className={clsx('hero hero--primary', styles.heroBanner)}>
           <div className="container">
@@ -621,4 +673,4 @@ export default function HomepageFeatures() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/static/img/NGIAB-logo.jpg b/static/img/NGIAB-logo.jpg
new file mode 100644
index 0000000..e6eb9f7
Binary files /dev/null and b/static/img/NGIAB-logo.jpg differ
diff --git a/static/img/aws-logo.jpg b/static/img/aws-logo.jpg
new file mode 100644
index 0000000..81f4569
Binary files /dev/null and b/static/img/aws-logo.jpg differ
diff --git a/static/img/ciroh-logo.jpg b/static/img/ciroh-logo.jpg
new file mode 100644
index 0000000..fca85f3
Binary files /dev/null and b/static/img/ciroh-logo.jpg differ
diff --git a/static/img/google-cloud.jpg b/static/img/google-cloud.jpg
new file mode 100644
index 0000000..30e3112
Binary files /dev/null and b/static/img/google-cloud.jpg differ
diff --git a/static/img/hpc-logo.jpg b/static/img/hpc-logo.jpg
new file mode 100644
index 0000000..aba656c
Binary files /dev/null and b/static/img/hpc-logo.jpg differ
diff --git a/static/img/jupyterhub.jpg b/static/img/jupyterhub.jpg
new file mode 100644
index 0000000..3925b82
Binary files /dev/null and b/static/img/jupyterhub.jpg differ
diff --git a/static/img/pantarhei-logo.jpg b/static/img/pantarhei-logo.jpg
new file mode 100644
index 0000000..a08e4d8
Binary files /dev/null and b/static/img/pantarhei-logo.jpg differ