diff --git a/docs-website/adoptionStoriesIndexes.json b/docs-website/adoptionStoriesIndexes.json
new file mode 100644
index 0000000000000..3fe666ccf1c13
--- /dev/null
+++ b/docs-website/adoptionStoriesIndexes.json
@@ -0,0 +1,330 @@
+{
+  "companies": [
+    {
+      "name": "Netflix",
+      "slug": "netflix",
+      "imageUrl": "/img/logos/companies/netflix.png",
+      "imageSize": "large",
+      "link": "https://blog.datahubproject.io/how-netflix-is-collaborating-with-datahub-to-enhance-its-extensibility-a34d33f45947",
+      "linkType": "blog",
+      "tagline": "How Netflix is collaborating with DataHub to enhance its extensibility",
+      "category": "B2B & B2C",
+      "description": "<i>\"DataHub gave us the extensibility features we needed to define new entity types easily and augment existing ones. DataHub performed exceptionally well in managing our traffic load and data volume. It offers <b>a great developer experience, a well-documented taxonomy, and — very importantly — solid community support.</b>\"<br /><br /><div style='color: gray;'>— Ajoy Majumdar, Software Architect at Netflix</div></i><br />"
+    },
+    {
+      "name": "Visa",
+      "slug": "visa",
+      "imageUrl": "/img/logos/companies/visa.png",
+      "imageSize": "large",
+      "link": "https://blog.datahubproject.io/how-visa-uses-datahub-to-scale-data-governance-cace052d61c5",
+      "linkType": "blog",
+      "tagline": "How Visa uses DataHub to scale data governance",
+      "category": "Financial & Fintech",
+      "description": "<i>\"We found DataHub to provide excellent coverage for our needs. What we appreciate most about DataHub is <b>its powerful API platform.</b>\"<br /><br /><div style='color: gray;'>— Jean-Pierre Dijcks, Sr. Dir. Product Management at VISA</div></i><br />"
+    },
+    {
+      "name": "Optum",
+      "slug": "optum",
+      "imageUrl": "/img/logos/companies/optum.jpg",
+      "imageSize": "medium",
+      "link": "https://opensource.optum.com/blog/2022/03/23/data-mesh-via-datahub",
+      "linkType": "blog",
+      "tagline": "Data Mesh via DataHub",
+      "category": "And More",
+      "description": "<i>“DataHub’s event driven architecture provides us a mechanism to act on any metadata changes in real time. This allows us to perform various actions like provisioning access to a data product, notifying consumers on any schema changes that may affect their application or triggering data movement jobs to move data from source to sink platforms.”</i>"
+    },
+    {
+      "name": "Pinterest",
+      "slug": "pinterest",
+      "imageUrl": "/img/logos/companies/pinterest.png",
+      "imageSize": "small",
+      "link": "https://www.youtube.com/watch?v=YoxTg8tQSwg&feature=youtu.be",
+      "linkType": "blog",
+      "tagline": "DataHub Project at Pinterest",
+      "category": "B2B & B2C",
+      "description": "Pinterest adopted a DataHub project to enhance metadata management for its big data query platform, facilitating better data navigation and understanding."
+    },
+    {
+      "name": "Airtel",
+      "slug": "airtel",
+      "imageUrl": "/img/logos/companies/airtel.png",
+      "imageSize": "large",
+      "link": "https://www.youtube.com/watch?v=yr24mM91BN4",
+      "linkType": "video",
+      "tagline": "A transformative journey to Airtel's data mesh architecture with DataHub",
+      "category": "B2B & B2C",
+      "description": "Airtel is a leading global telecommunication provider. DataHub is the bedrock of Data Mesh at Airtel by providing the requisite governance and metadata management functionality to <b>ensure their Data Products are discoverable, addressable, trustworthy, self-describing, and secure.</b><br /><br />Get a closer look at how the Airtel team has successfully integrated DataHub to take their data mesh implementation to the next level."
+    },
+    {
+      "name": "Coursera",
+      "slug": "coursera",
+      "imageUrl": "/img/logos/companies/coursera.svg",
+      "imageSize": "small",
+      "link": "https://www.youtube.com/watch?v=bd5v4fn4d4s",
+      "linkType": "video",
+      "tagline": "Coursera's DataHub Journey",
+      "category": "B2B & B2C",
+      "description": "<i>“DataHub aligns with our needs [for] data documentation, a unified search experience, lineage information, and additional metadata. We are also very impressed with the vibrant and supportive community.”</i>"
+    },
+    {
+      "name": "Zynga",
+      "slug": "zynga",
+      "imageUrl": "/img/logos/companies/zynga.png",
+      "imageSize": "default",
+      "link": "https://www.youtube.com/watch?v=VCU3-Hd_glI",
+      "linkType": "video",
+      "tagline": "Zynga's DataHub Implementation",
+      "category": "B2B & B2C",
+      "description": "<i>“We looked around for data catalog tool, and DataHub was a clear winner.”</i> <br /> <br /> Zynga levels up data management using DataHub, highlighting its role in enhancing data management, tracing data lineage, and ensuring data quality."
+    },
+    {
+      "name": "Saxo Bank",
+      "slug": "saxo-bank",
+      "imageUrl": "/img/logos/companies/saxobank.svg",
+      "imageSize": "default",
+      "link": "https://blog.datahubproject.io/enabling-data-discovery-in-a-data-mesh-the-saxo-journey-451b06969c8f",
+      "linkType": "blog",
+      "tagline": "Enabling Data Discovery in a Data Mesh",
+      "category": "Financial & Fintech",
+      "description": "Saxo Bank adopted DataHub to enhance data quality and streamline governance, facilitating efficient data management through self-service capabilities. <br /><br />By integrating Apache Kafka and Snowflake with DataHub, the bank embraced Data Mesh principles to democratize data, support rapid growth, and improve business processes."
+    },
+    {
+      "name": "MediaMarkt Saturn",
+      "slug": "mediamarkt-saturn",
+      "imageUrl": "/img/logos/companies/mediamarkt-saturn.png",
+      "imageSize": "large",
+      "link": "https://www.youtube.com/watch?v=wsCFnElN_Wo",
+      "linkType": "video",
+      "tagline": "DataHub + MediaMarktSaturn Access Management Journey",
+      "category": "B2B & B2C",
+      "description": "Europe’s #1 consumer electronics retailer implemented DataHub for three reasons:<br /><br />1. DataHub provides an extremely <b>flexible and customizable metadata platform at scale</b>.<br />2. Open-source means lower cost to implement and removes the headache of license management.<br />3. Community-driven project which continually evolves with industry trends and best practices."
+    },
+    {
+      "name": "Adevinta",
+      "slug": "adevinta",
+      "imageUrl": "/img/logos/companies/adevinta.png",
+      "imageSize": "medium",
+      "link": "https://medium.com/@adevinta/building-the-data-catalogue-the-beginning-of-a-journey-d64e828f955c",
+      "linkType": "blog",
+      "tagline": "Building the data catalogue",
+      "category": "E-Commerce",
+      "description": "<i>“DataHub allows us to solve the data discovery problem, which was a big challenge in our organization, and now we are solving it.”</i>"
+    },
+    {
+      "name": "Wolt",
+      "slug": "wolt",
+      "imageUrl": "/img/logos/companies/wolt.png",
+      "imageSize": "default",
+      "link": "https://blog.datahubproject.io/humans-of-datahub-fredrik-sannholm-d673b1877f2b",
+      "linkType": "blog",
+      "tagline": "Wolt's DataHub Integration",
+      "category": "E-Commerce",
+      "description": "<i>“[DataHub] has made our legal team very happy with being able to keep track of our sensitive data [to answer questions like] Where’s it going? How’s it being processed? Where’s it ending up? Which third party tool or API’s are we sending it to and why? Who is responsible for this integration?”</i>"
+    },
+    {
+      "name": "Geotab",
+      "slug": "geotab",
+      "imageUrl": "/img/logos/companies/geotab.jpg",
+      "imageSize": "small",
+      "link": "https://www.youtube.com/watch?v=boyjT2OrlU4",
+      "linkType": "video",
+      "tagline": "Geotab's Experience with DataHub",
+      "category": "B2B & B2C",
+      "description": "<i>“The key evaluation metric for selecting DataHub was the approachability and technical capabilities of its leading development team.”<i><br /> <br /> Geotab’s data adoption journey explores challenges in data management, governance, and the decision to utilize DataHub for improved productivity and collaboration."
+    },
+    {
+      "name": "Hurb",
+      "slug": "hurb",
+      "imageUrl": "/img/logos/companies/hurb.png",
+      "imageSize": "medium",
+      "link": "https://blog.datahubproject.io/humans-of-datahub-patrick-franco-braz-b02b55a4c5384",
+      "linkType": "blog",
+      "tagline": "Hurb's DataHub Journey",
+      "category": "B2B & B2C",
+      "description": "<i>“The main points that drove our decision to implement DataHub were its user-friendly interface, active and receptive community, contribution opportunities, and built-in ingestion sources for our primary services.”</i><br /><br /> Hurb implemented DataHub to enhance data governance, streamline data access, and improve decision-making through a structured integration process."
+    },
+    {
+      "name": "Grofers",
+      "slug": "grofers",
+      "imageUrl": "/img/logos/companies/grofers.png",
+      "imageSize": "medium",
+      "link": "https://www.youtube.com/watch?v=m9kUYAuezFI",
+      "linkType": "video",
+      "tagline": "Grofers' Success with DataHub",
+      "category": "E-Commerce",
+      "description": "Grofers provides a closer look into how their team has leveraged DataHub as the source of truth for data governance."
+    },
+    {
+      "name": "Viasat",
+      "slug": "viasat",
+      "imageUrl": "/img/logos/companies/viasat.png",
+      "imageSize": "medium",
+      "link": "https://www.youtube.com/watch?v=2SrDAJnzkjE",
+      "linkType": "video",
+      "tagline": "Viasat's DataHub Implementation",
+      "category": "And More",
+      "description": "Viasat highlights why they chose DataHub over other open source and commercial technologies and their plans with it."
+    },
+    {
+      "name": "LinkedIn",
+      "slug": "linkedin",
+      "imageUrl": "/img/logos/companies/linkedin.svg",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Udemy",
+      "slug": "udemy",
+      "imageUrl": "/img/logos/companies/udemy.png",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "ThoughtWorks",
+      "slug": "thoughtworks",
+      "imageUrl": "/img/logos/companies/thoughtworks.png",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Expedia Group",
+      "slug": "expedia-group",
+      "imageUrl": "/img/logos/companies/expedia.svg",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Typeform",
+      "slug": "typeform",
+      "imageUrl": "/img/logos/companies/typeform.svg",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Peloton",
+      "slug": "peloton",
+      "imageUrl": "/img/logos/companies/peloton.png",
+      "imageSize": "default",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Razer",
+      "slug": "razer",
+      "imageUrl": "/img/logos/companies/razer.jpeg",
+      "imageSize": "large",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "ClassDojo",
+      "slug": "classdojo",
+      "imageUrl": "/img/logos/companies/classdojo.png",
+      "imageSize": "medium",
+      "category": "B2B & B2C"
+    },
+    {
+      "name": "Klarna",
+      "slug": "klarna",
+      "imageUrl": "/img/logos/companies/klarna.svg",
+      "imageSize": "medium",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "N26",
+      "slug": "n26",
+      "imageUrl": "/img/logos/companies/n26.svg",
+      "imageSize": "medium",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "BankSalad",
+      "slug": "banksalad",
+      "imageUrl": "/img/logos/companies/banksalad.png",
+      "imageSize": "default",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "Uphold",
+      "slug": "uphold",
+      "imageUrl": "/img/logos/companies/uphold.png",
+      "imageSize": "default",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "Stash",
+      "slug": "stash",
+      "imageUrl": "/img/logos/companies/stash.svg",
+      "imageSize": "medium",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "SumUp",
+      "slug": "sumup",
+      "imageUrl": "/img/logos/companies/sumup.png",
+      "imageSize": "medium",
+      "category": "Financial & Fintech"
+    },
+    {
+      "name": "VanMoof",
+      "slug": "vanmoof",
+      "imageUrl": "/img/logos/companies/vanmoof.png",
+      "imageSize": "small",
+      "category": "E-Commerce"
+    },
+    {
+      "name": "SpotHero",
+      "slug": "spothero",
+      "imageUrl": "/img/logos/companies/spothero.png",
+      "imageSize": "default",
+      "category": "E-Commerce"
+    },
+    {
+      "name": "hipages",
+      "slug": "hipages",
+      "imageUrl": "/img/logos/companies/hipages.png",
+      "imageSize": "medium",
+      "category": "E-Commerce"
+    },
+    {
+      "name": "Showroomprive.com",
+      "slug": "showroomprive-com",
+      "imageUrl": "/img/logos/companies/showroomprive.png",
+      "imageSize": "small",
+      "category": "E-Commerce"
+    },
+    {
+      "name": "Wikimedia Foundation",
+      "slug": "wikimedia-foundation",
+      "imageUrl": "/img/logos/companies/wikimedia-foundation.png",
+      "imageSize": "medium",
+      "category": "And More"
+    },
+    {
+      "name": "Cabify",
+      "slug": "cabify",
+      "imageUrl": "/img/logos/companies/cabify.png",
+      "imageSize": "medium",
+      "category": "And More"
+    },
+    {
+      "name": "Digital Turbine",
+      "slug": "digital-turbine",
+      "imageUrl": "/img/logos/companies/digitalturbine.svg",
+      "imageSize": "medium",
+      "category": "And More"
+    },
+    {
+      "name": "DFDS",
+      "slug": "dfds",
+      "imageUrl": "/img/logos/companies/dfds.png",
+      "imageSize": "medium",
+      "category": "And More"
+    },
+    {
+      "name": "Moloco",
+      "slug": "moloco",
+      "imageUrl": "/img/logos/companies/moloco.png",
+      "imageSize": "medium",
+      "category": "And More"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
index ab033f7b04e4b..1a40c986b3167 100644
--- a/docs-website/docusaurus.config.js
+++ b/docs-website/docusaurus.config.js
@@ -147,8 +147,8 @@ module.exports = {
               label: "YouTube",
             },
             {
-              href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi",
-              label: "Case Studies",
+              href: "/adoption-stories",
+              label: "Adoption Stories",
             },
             {
               href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvErAXMiqUYH9e63wyDaMBgg",
diff --git a/docs-website/package.json b/docs-website/package.json
index 62d1288832303..58820fbf42b21 100644
--- a/docs-website/package.json
+++ b/docs-website/package.json
@@ -48,6 +48,7 @@
     "react-dom": "18.2.0",
     "sass": "^1.43.2",
     "swc-loader": "^0.2.6",
+    "swiper": "^11.1.4",
     "uuid": "^9.0.0"
   },
   "browserslist": {
diff --git a/docs-website/sidebars.js b/docs-website/sidebars.js
index d435f00902d77..75fc1f2dcd0c5 100644
--- a/docs-website/sidebars.js
+++ b/docs-website/sidebars.js
@@ -31,7 +31,11 @@ module.exports = {
           label: "Demo",
           href: "https://demo.datahubproject.io/",
         },
-        "docs/what-is-datahub/customer-stories",
+        {
+          type: "link",
+          label: "Adoption Stories",
+          href: "/adoption-stories",
+        },
         "docs/what-is-datahub/datahub-concepts",
       ],
     },
diff --git a/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss b/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss
deleted file mode 100644
index fcd3666d03ddc..0000000000000
--- a/docs-website/src/pages/_components/CardCTAs/cardCTAs.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.flexCol {
-  display: flex;
-}
-
-.ctaCard {
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  row-gap: 1rem;
-  padding: 1rem;
-  &:hover {
-    text-decoration: none;
-    border: 1px solid var(--ifm-color-primary);
-    background-color: var(--ifm-background-surface-color);
-  }
-  margin-bottom: 1rem;
-  flex: 1;
-}
-
-.ctaHeading {
-  margin-bottom: 0;
-  display: flex;
-  align-items: center;
-}
diff --git a/docs-website/src/pages/_components/CardCTAs/index.js b/docs-website/src/pages/_components/CardCTAs/index.js
deleted file mode 100644
index dc1b148d24bcd..0000000000000
--- a/docs-website/src/pages/_components/CardCTAs/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import styles from "./cardCTAs.module.scss";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import { ArrowRightOutlined } from "@ant-design/icons";
-
-const cardsContent = [
-  {
-    label: "Data Mesh",
-    title: "Data Products, Delivered",
-    url: "https://www.acryldata.io/blog/data-products-in-datahub-everything-you-need-to-know?utm_source=datahub&utm_medium=referral&utm_content=blog",
-  },
-  {
-    label: "Data Contracts",
-    title: "Data Contracts: End-to-end Reliability in Data",
-    url: "https://www.acryldata.io/blog/data-contracts-in-datahub-combining-verifiability-with-holistic-data-management?utm_source=datahub&utm_medium=referral&utm_content=blog",
-  },
-  {
-    label: "Shift Left",
-    title: "Data Governance and Lineage Impact Analysis",
-    url: "https://www.acryldata.io/blog/the-3-must-haves-of-metadata-management-part-2?utm_source=datahub&utm_medium=referral&utm_content=blog",
-  },
-];
-
-const Card = ({ label, title, url }) => {
-  return (
-    <div className={clsx("col col--4 flex", styles.flexCol)}>
-      <a href={url} target="_blank" className={clsx("card", styles.ctaCard)}>
-        <div>
-          <strong>{label}</strong>
-          <h3 className={styles.ctaHeading}>{title}&nbsp;</h3>
-        </div>
-        <ArrowRightOutlined />
-      </a>
-    </div>
-  );
-};
-
-const CardCTAs = () =>
-  cardsContent?.length > 0 ? (
-    <div style={{ padding: "2vh 0" }}>
-      <div className="container">
-        <div className="row">
-          {cardsContent.map((props, idx) => (
-            <Card key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </div>
-  ) : null;
-
-export default CardCTAs;
diff --git a/docs-website/src/pages/_components/Hero/hero.module.scss b/docs-website/src/pages/_components/Hero/hero.module.scss
index 6e4a623f469d5..97bdceaef6936 100644
--- a/docs-website/src/pages/_components/Hero/hero.module.scss
+++ b/docs-website/src/pages/_components/Hero/hero.module.scss
@@ -42,58 +42,3 @@
     }
   }
 }
-
-.quickLinks {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  font-weight: bold;
-  margin-bottom: -2.5vh;
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-
-  > * {
-    padding: 0.5rem 1rem;
-    display: inline-block;
-
-    @media (min-width: 768px) {
-      padding: 0 1rem;
-    }
-  }
-}
-
-.quickLinksLabel {
-  display: flex;
-  align-items: center;
-  svg {
-    width: 24px;
-    height: 24px;
-    color: var(--ifm-text-color) !important;
-    margin-right: 0.5rem;
-  }
-}
-
-.quickstartContent {
-  text-align: center;
-  padding: 2rem 0;
-  height: 100%;
-  margin: 2rem 0;
-  background: #34394d;
-  border-radius: var(--ifm-card-border-radius);
-}
-
-.quickstartTitle {
-  color: #fafafa;
-}
-
-.quickstartSubtitle {
-  font-size: 1.1rem;
-  color: gray;
-}
-
-.quickstartCodeblock {
-  text-align: left;
-  padding: 0 20vh;
-}
diff --git a/docs-website/src/pages/_components/Hero/index.js b/docs-website/src/pages/_components/Hero/index.js
index 17e5d0e7f4966..12e41e2ecd176 100644
--- a/docs-website/src/pages/_components/Hero/index.js
+++ b/docs-website/src/pages/_components/Hero/index.js
@@ -7,8 +7,8 @@ import { useColorMode } from "@docusaurus/theme-common";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import styles from "./hero.module.scss";
 import CodeBlock from "@theme/CodeBlock";
-import CardCTAs from "../CardCTAs";
 import TownhallButton from "../TownhallButton";
+import { Section } from "../Section";
 
 const HeroAnnouncement = ({ message, linkUrl, linkText }) => (
   <div className={clsx("hero__alert alert alert--primary", styles.hero__alert)}>
@@ -50,33 +50,6 @@ const Hero = ({}) => {
             <TownhallButton />
           </div>
         </div>
-        <CardCTAs />
-        <div className={styles.quickstartContent}>
-          <h1 className={styles.quickstartTitle}>Get Started Now</h1>
-          <p className={styles.quickstartSubtitle}>Run the following command to get started with DataHub.</p>
-          <div className={styles.quickstartCodeblock}>
-            <CodeBlock className={"language-shell"}>
-              python3 -m pip install --upgrade pip wheel setuptools <br />
-              python3 -m pip install --upgrade acryl-datahub <br />
-              datahub docker quickstart
-            </CodeBlock>
-          </div>
-          <Link className="button button--primary button--md" to={useBaseUrl("docs/quickstart")}>
-            DataHub Quickstart Guide
-          </Link>
-          <Link className="button button--secondary button--md" to={useBaseUrl("docs/deploy/kubernetes")}>
-            Deploying With Kubernetes
-          </Link>
-        </div>
-        <div className={clsx("card", styles.quickLinks)}>
-          <div className={styles.quickLinksLabel}>
-            <QuestionCircleOutlined />
-            Learn
-          </div>
-          <Link to={useBaseUrl("docs/")}>What is DataHub?</Link>
-          <Link to={useBaseUrl("docs/architecture/architecture")}>How is DataHub architected?</Link>
-          <Link to="https://demo.datahubproject.io">See DataHub in action</Link>
-        </div>
       </div>
     </header>
   );
diff --git a/docs-website/src/pages/_components/Logos/index.js b/docs-website/src/pages/_components/Logos/index.js
index 3243617bcc40d..565f6e9a46fee 100644
--- a/docs-website/src/pages/_components/Logos/index.js
+++ b/docs-website/src/pages/_components/Logos/index.js
@@ -1,204 +1,15 @@
-import React from "react";
 import clsx from "clsx";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
 import styles from "./logos.module.scss";
+const companyIndexes = require("../../../../adoptionStoriesIndexes.json");
+const companies = companyIndexes.companies;
 
-const companiesByIndustry = [
-  {
-    name: "B2B & B2C",
-    companies: [
-      {
-        name: "LinkedIn",
-        imageUrl: "/img/logos/companies/linkedin.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "Udemy",
-        imageUrl: "/img/logos/companies/udemy.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Airtel",
-        imageUrl: "/img/logos/companies/airtel.png",
-        imageSize: "large",
-      },
-      {
-        name: "Coursera",
-        imageUrl: "/img/logos/companies/coursera.svg",
-        imageSize: "small",
-      },
-      {
-        name: "Geotab",
-        imageUrl: "/img/logos/companies/geotab.jpg",
-        imageSize: "small",
-      },
-      {
-        name: "ThoughtWorks",
-        imageUrl: "/img/logos/companies/thoughtworks.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Expedia Group",
-        imageUrl: "/img/logos/companies/expedia.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "Typeform",
-        imageUrl: "/img/logos/companies/typeform.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "Peloton",
-        imageUrl: "/img/logos/companies/peloton.png",
-        imageSize: "default",
-      },
-      {
-        name: "Zynga",
-        imageUrl: "/img/logos/companies/zynga.png",
-        imageSize: "default",
-      },
-      {
-        name: "Hurb",
-        imageUrl: "/img/logos/companies/hurb.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Razer",
-        imageUrl: "/img/logos/companies/razer.jpeg",
-        imageSize: "large",
-      },
-      {
-        name: "ClassDojo",
-        imageUrl: "/img/logos/companies/classdojo.png",
-        imageSize: "medium",
-      },
-    ],
-  },
-  {
-    name: "Financial & Fintech",
-    companies: [
-      {
-        name: "Saxo Bank",
-        imageUrl: "/img/logos/companies/saxobank.svg",
-        imageSize: "default",
-      },
-      {
-        name: "Klarna",
-        imageUrl: "/img/logos/companies/klarna.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "N26",
-        imageUrl: "/img/logos/companies/n26.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "BankSalad",
-        imageUrl: "/img/logos/companies/banksalad.png",
-        imageSize: "default",
-      },
-      {
-        name: "Uphold",
-        imageUrl: "/img/logos/companies/uphold.png",
-        imageSize: "default",
-      },
-      {
-        name: "Stash",
-        imageUrl: "/img/logos/companies/stash.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "SumUp",
-        imageUrl: "/img/logos/companies/sumup.png",
-        imageSize: "medium",
-      },
-    ],
-  },
-  {
-    name: "E-Commerce",
-    companies: [
-      {
-        name: "Adevinta",
-        imageUrl: "/img/logos/companies/adevinta.png",
-        imageSize: "medium",
-      },
-      {
-        name: "VanMoof",
-        imageUrl: "/img/logos/companies/vanmoof.png",
-        imageSize: "small",
-      },
-      {
-        name: "Grofers",
-        imageUrl: "/img/logos/companies/grofers.png",
-        imageSize: "medium",
-      },
-      {
-        name: "SpotHero",
-        imageUrl: "/img/logos/companies/spothero.png",
-        imageSize: "default",
-      },
-      {
-        name: "hipages",
-        imageUrl: "/img/logos/companies/hipages.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Wolt",
-        imageUrl: "/img/logos/companies/wolt.png",
-        imageSize: "default",
-      },
-      {
-        name: "Showroomprive.com",
-        imageUrl: "/img/logos/companies/showroomprive.png",
-        imageSize: "small",
-      },
-    ],
-  },
-  {
-    name: "And More",
-    companies: [
-      {
-        name: "Wikimedia Foundation",
-        imageUrl: "/img/logos/companies/wikimedia-foundation.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Cabify",
-        imageUrl: "/img/logos/companies/cabify.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Digital Turbine",
-        imageUrl: "/img/logos/companies/digitalturbine.svg",
-        imageSize: "medium",
-      },
-      {
-        name: "Viasat",
-        imageUrl: "/img/logos/companies/viasat.png",
-        imageSize: "medium",
-      },
-      {
-        name: "DFDS",
-        imageUrl: "/img/logos/companies/dfds.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Moloco",
-        imageUrl: "/img/logos/companies/moloco.png",
-        imageSize: "medium",
-      },
-      {
-        name: "Optum",
-        imageUrl: "/img/logos/companies/optum.jpg",
-        imageSize: "medium",
-      },
-    ],
-  },
-];
 
 const platformLogos = [
   {
@@ -315,10 +126,19 @@ const platformLogos = [
 ];
 
 export const PlatformLogos = () => (
-  <Link to={useBaseUrl("docs/metadata-ingestion#installing-plugins/")} className={styles.marquee}>
+  <Link
+    to={useBaseUrl("docs/metadata-ingestion#installing-plugins/")}
+    className={styles.marquee}
+  >
     <div>
       {[...platformLogos, ...platformLogos].map((logo, idx) => (
-        <img src={useBaseUrl(logo.imageUrl)} alt={logo.name} title={logo.name} key={idx} className={styles.platformLogo} />
+        <img
+          src={useBaseUrl(logo.imageUrl)}
+          alt={logo.name}
+          title={logo.name}
+          key={idx}
+          className={styles.platformLogo}
+        />
       ))}
     </div>
   </Link>
@@ -326,22 +146,58 @@ export const PlatformLogos = () => (
 
 export const CompanyLogos = () => (
   <div className={clsx("container", styles.companyLogoContainer)}>
-    <Tabs className="pillTabs">
-      {companiesByIndustry.map((industry, idx) => (
-        <TabItem value={`industry-${idx}`} label={industry.name} key={idx} default={idx === 0}>
-          <div className={styles.companyWrapper}>
-            {industry.companies.map((company, idx) => (
+    <Swiper
+      slidesPerView={8}
+      spaceBetween={30}
+      slidesPerGroup={6}
+      breakpoints={{
+        320: {
+          slidesPerView: 2,
+          spaceBetween: 10,
+        },
+        480: {
+          slidesPerView: 4,
+          spaceBetween: 20,
+        },
+        960: {
+          slidesPerView: 8,
+          spaceBetween: 30,
+        },
+      }}
+      pagination={{ clickable: true }}
+      modules={[Pagination]}
+      className={clsx("mySwiper", styles.companyWrapper)}
+    >
+      {companies.map((company, idx) => (
+        <SwiperSlide key={idx}>
+          {company.link ? (
+            <a
+              href={`/adoption-stories#${company.slug}`}
+            >
               <img
                 src={useBaseUrl(company.imageUrl)}
                 alt={company.name}
                 title={company.name}
-                key={idx}
-                className={clsx(styles.companyLogo, styles[company.imageSize])}
+                className={clsx(
+                  styles.companyLogo,
+                  styles.companyLogoWithLink,
+                  styles[company.imageSize]
+                )}
               />
-            ))}
-          </div>
-        </TabItem>
+            </a>
+          ) : (
+            <img
+              src={useBaseUrl(company.imageUrl)}
+              alt={company.name}
+              title={company.name}
+              className={clsx(
+                styles.companyLogo,
+                styles[company.imageSize]
+              )}
+            />
+          )}
+        </SwiperSlide>
       ))}
-    </Tabs>
+    </Swiper>
   </div>
 );
diff --git a/docs-website/src/pages/_components/Logos/logos.module.scss b/docs-website/src/pages/_components/Logos/logos.module.scss
index b20cc9a48b247..fd331bccb4556 100644
--- a/docs-website/src/pages/_components/Logos/logos.module.scss
+++ b/docs-website/src/pages/_components/Logos/logos.module.scss
@@ -1,3 +1,7 @@
+.pillTabs {
+  justify-content: center;
+}
+
 .marquee {
   width: 100%;
   overflow: hidden;
@@ -35,7 +39,6 @@
 }
 
 .companyWrapper {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -45,16 +48,25 @@
     filter: invert(1);
     mix-blend-mode: exclusion;
   }
+
+  :global {
+    .swiper-wrapper {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+      .swiper-slide {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+      }
+    }
+  }
 }
 
 .companyLogoContainer {
-  display: flex;
-  align-items: center;
   justify-content: center;
   > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     ul[role="tablist"] {
       padding: 0 1rem;
       overflow-x: auto;
@@ -79,23 +91,35 @@
   }
 }
 
+.companyLogoWithLink {
+  &:hover {
+    opacity: 1;
+    filter: grayscale(0%);
+  }
+}
+
 .companyLogo {
-  width: auto;
+  flex-shrink: 0;
+  width: 100%;
+  height: auto;
   mix-blend-mode: luminosity;
   opacity: 0.66;
-  margin: 2.5rem;
-  height: 60px;
+  filter: grayscale(100%);
 
   &.default {
-    height: 60px;
+    padding: 30px;
   }
   &.large {
-    height: 100px;
+    padding: 5px;
   }
   &.medium {
-    height: 30px;
+    padding: 15px;
   }
   &.small {
-    height: 20px;
+    padding: 10px;
   }
 }
+
+.swiper-pagination {
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/docs-website/src/pages/_components/QuickstartContent/index.js b/docs-website/src/pages/_components/QuickstartContent/index.js
new file mode 100644
index 0000000000000..8c942a6a2e440
--- /dev/null
+++ b/docs-website/src/pages/_components/QuickstartContent/index.js
@@ -0,0 +1,50 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Image from "@theme/IdealImage";
+import { useColorMode } from "@docusaurus/theme-common";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import styles from "./quickstartcontent.module.scss";
+import CodeBlock from "@theme/CodeBlock";
+import TownhallButton from "../TownhallButton";
+import { Section } from "../Section";
+
+
+const QuickstartContent = ({}) => {
+  const { colorMode } = useColorMode();
+  return (
+      <div className={clsx("container", styles.container)}>
+        <div className="hero__content">
+           <div className={styles.quickstartContent}>
+              <h1 className={styles.quickstartTitle}>Get Started Now</h1>
+              <p className={styles.quickstartSubtitle}>Run the following command to get started with DataHub.</p>
+              <div className={styles.quickstartCodeblock}>
+                <CodeBlock className={"language-shell"}>
+                  python3 -m pip install --upgrade pip wheel setuptools <br />
+                  python3 -m pip install --upgrade acryl-datahub <br />
+                  datahub docker quickstart
+                </CodeBlock>
+              </div>
+              <Link className={clsx("button button--primary button--md", styles.button)} to={useBaseUrl("docs/quickstart")}>
+                DataHub Quickstart Guide
+              </Link>
+              <Link className={clsx("button button--secondary button--md", styles.button)} to={useBaseUrl("docs/quickstart")}>
+                Deploying With Kubernetes
+              </Link>
+          </div>
+          <div className={clsx("card", styles.quickLinks)}>
+          <div className={styles.quickLinksLabel}>
+            <QuestionCircleOutlined />
+            Learn
+          </div>
+          <Link to={useBaseUrl("docs/")}>What is DataHub?</Link>
+          <Link to={useBaseUrl("docs/architecture/architecture")}>How is DataHub architected?</Link>
+          <Link to="https://demo.datahubproject.io">See DataHub in action</Link>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default QuickstartContent;
diff --git a/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss b/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss
new file mode 100644
index 0000000000000..e1badca6d2e34
--- /dev/null
+++ b/docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss
@@ -0,0 +1,67 @@
+.container {
+    margin-bottom: 2rem;
+}
+
+.button {
+    text-decoration: none;
+    margin: 0.5rem 0 0 0;
+    white-space: nowrap;
+    @media (min-width: 690px) {
+      margin: 0 0 0 0.5rem;
+    }
+}
+
+.quickstartContent {
+  text-align: center;
+  padding: 2rem 0;
+  height: 100%;
+  margin: 2rem 0;
+  background: #34394d;
+  border-radius: var(--ifm-card-border-radius);
+}
+
+.quickstartTitle {
+  color: #fafafa;
+}
+
+.quickstartSubtitle {
+  font-size: 1.1rem;
+  color: gray;
+}
+
+.quickstartCodeblock {
+  text-align: left;
+  padding: 0 20vh;
+}
+
+.quickLinks {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  font-weight: bold;
+  margin-bottom: -2.5vh;
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+
+  > * {
+    padding: 0.5rem 1rem;
+    display: inline-block;
+
+    @media (min-width: 768px) {
+      padding: 0 1rem;
+    }
+  }
+}
+
+.quickLinksLabel {
+  display: flex;
+  align-items: center;
+  svg {
+    width: 24px;
+    height: 24px;
+    color: var(--ifm-text-color) !important;
+    margin-right: 0.5rem;
+  }
+}
diff --git a/docs-website/src/pages/_components/Quotes/index.js b/docs-website/src/pages/_components/Quotes/index.js
index b66a04c2c6538..664eba0b12051 100644
--- a/docs-website/src/pages/_components/Quotes/index.js
+++ b/docs-website/src/pages/_components/Quotes/index.js
@@ -32,7 +32,7 @@ const quotesContent = [
 
 const Quote = ({ quote, company }) => {
   return (
-    <div className="col col--4">
+    <div className="col col--4" style={{ paddingLeft: "0", paddingRight: "2rem" }}>
       <div className={clsx("card", styles.quote)}>
         {quote}
         <div className={styles.companyLogoWrapper}>
diff --git a/docs-website/src/pages/_components/Quotes/quotes.module.scss b/docs-website/src/pages/_components/Quotes/quotes.module.scss
index 59573fa7a597a..3bd895c4e3b24 100644
--- a/docs-website/src/pages/_components/Quotes/quotes.module.scss
+++ b/docs-website/src/pages/_components/Quotes/quotes.module.scss
@@ -8,6 +8,7 @@
 
 .companyLogoWrapper {
   background: #fff;
+  height: 100px;
   html[data-theme="dark"] & {
     filter: invert(1);
     mix-blend-mode: exclusion;
diff --git a/docs-website/src/pages/adoption-stories/_components/LearnItemCard/index.jsx b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/index.jsx
new file mode 100644
index 0000000000000..67b94788d9780
--- /dev/null
+++ b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/index.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.scss";
+
+const LearnItemCard = React.forwardRef(({ company, isSelected }, ref) => {
+  return (
+    <div className={clsx("col col--4", styles.featureCol)} id={company.slug} ref={ref}>
+      <div className={clsx("card", styles.card, { [styles.selected]: isSelected })}>
+        <div className={styles.card_image}>
+          <img src={`/img/adoption-stories/adoption-stories-${company.slug}.png`} alt={company.name} />
+        </div>
+        <div className={clsx("card__body", styles.featureBody)}>
+          <div dangerouslySetInnerHTML={{ __html: company.description }} /></div>
+        <div className={styles.card_button}>
+          <Link className="button button--secondary button--md" href={company.link} target="_blank">
+            Discover {company.name}'s Story
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default LearnItemCard;
diff --git a/docs-website/src/pages/adoption-stories/_components/LearnItemCard/styles.module.scss b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/styles.module.scss
new file mode 100644
index 0000000000000..881e90a7d0976
--- /dev/null
+++ b/docs-website/src/pages/adoption-stories/_components/LearnItemCard/styles.module.scss
@@ -0,0 +1,66 @@
+.featureCol {
+  display: flex;
+}
+
+.card_date {
+  padding: 1rem 2rem;
+  font-size: 0.8rem;
+  font-style: italic;
+  color: gray;
+  margin-top: auto;
+}
+
+.card_feature {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.card_button {
+ padding: 1rem;
+ text-align: center;
+}
+
+.card {
+  color: var(--ifm-text-color);
+  text-decoration: none !important;
+  padding: 0rem;
+  margin-bottom: 2rem;
+  align-self: stretch;
+  flex-grow: 1;
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &.selected {
+    border-color: var(--ifm-color-primary);
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
+    scroll-margin-top: 100px; 
+  }
+    
+
+  hr {
+    margin: 0;
+  }
+}
+
+.featureHeader {
+  h2 {
+    margin-bottom: 1rem !important;
+    font-size: 1.25rem;
+  }
+  padding: 1rem 2rem;
+}
+
+.featureBody {
+  padding: 0 2rem;
+}
+
+.card_image {
+  margin: 0;
+  margin-bottom: 0.5rem;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
\ No newline at end of file
diff --git a/docs-website/src/pages/adoption-stories/index.jsx b/docs-website/src/pages/adoption-stories/index.jsx
new file mode 100644
index 0000000000000..27f4b876af20a
--- /dev/null
+++ b/docs-website/src/pages/adoption-stories/index.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from "react";
+import Layout from "@theme/Layout";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import LearnItemCard from "./_components/LearnItemCard";
+import styles from "./styles.module.scss";
+
+import customerStoriesIndexes from "../../../adoptionStoriesIndexes.json";
+
+function AdoptionStoriesListPageContent() {
+  const companies = (customerStoriesIndexes?.companies || []).filter((company) => company.link);
+  const [activeFilters, setActiveFilters] = useState([]);
+  const categories = ["B2B & B2C", "E-Commerce", "Financial & Fintech", "And More"];
+  const selectedCardRef = useRef(null);
+
+  const filteredItems = activeFilters.length
+    ? companies.filter((company) => activeFilters.includes(company.category))
+    : companies;
+
+  const handleFilterToggle = (category) => {
+    if (activeFilters.includes(category)) {
+      setActiveFilters(activeFilters.filter((filter) => filter !== category));
+    } else {
+      setActiveFilters([...new Set([...activeFilters, category])]);
+    }
+  };
+
+  useEffect(() => {
+    const selectedSlug = window.location.hash.substring(1);
+    if (selectedCardRef.current) {
+      selectedCardRef.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+    }
+  }, [selectedCardRef]);
+
+  return (
+    <Layout>
+      <header className={"hero"}>
+        <div className="container">
+          <div className="hero__content">
+            <div>
+              <h1 className="hero__title">DataHub Adoption Stories</h1>
+              <p className="hero__subtitle">Learn how the best data and AI teams are using DataHub
+              <br />
+              Check out more stories on the <a href="https://www.youtube.com/playlist?list=PLdCtLs64vZvGCKMQC2dJEZ6cUqWsREbFi" style={{ color: "black" }}>DataHub Youtube</a>.
+              </p>
+            </div>
+          </div>
+          <div className={styles.filterBar}>
+            <strong>For: </strong>
+            {categories.map((category) => (
+              <button
+                key={category}
+                className={`button button--secondary ${activeFilters.includes(category) ? "button--active" : ""}`}
+                onClick={() => handleFilterToggle(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+      <div className="container">
+        <div className="row">
+          {filteredItems.map((company) => (
+            <LearnItemCard
+              key={company.name}
+              company={company}
+              isSelected={company.slug === window.location.hash.substring(1)}
+              ref={company.slug === window.location.hash.substring(1) ? selectedCardRef : null}
+            />
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function AdoptionStoriesListPage() {
+  return (
+    <BrowserOnly>
+      {() => <AdoptionStoriesListPageContent />}
+    </BrowserOnly>
+  );
+}
diff --git a/docs-website/src/pages/adoption-stories/styles.module.scss b/docs-website/src/pages/adoption-stories/styles.module.scss
new file mode 100644
index 0000000000000..d08b48a011de0
--- /dev/null
+++ b/docs-website/src/pages/adoption-stories/styles.module.scss
@@ -0,0 +1,7 @@
+.filterBar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/docs-website/src/pages/docs/_components/CustomerCard/customercard.module.scss b/docs-website/src/pages/docs/_components/CustomerCard/customercard.module.scss
deleted file mode 100644
index 349f705d25b10..0000000000000
--- a/docs-website/src/pages/docs/_components/CustomerCard/customercard.module.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.card {
-  color: var(--ifm-hero-text-color);
-  padding: 0;
-  margin: 0rem 3rem 2rem 0rem;
-  text-decoration: none !important;
-
-  .card_button {
-     padding: 0rem 0rem 0rem 1rem;
-     text-align: right;
-  }
-
-  .card_img {
-    justify-content: center;
-    display: flex;
-    height: 250px;
-    margin: 0;
-    position: relative;
-    text-align: center;
-  }
-
-  .card_body {
-    padding: 2rem 3rem 2rem 3rem;
-
-    .card_description {
-     min-height: 20rem;
-    }
-  }
-
-  .card_overlay_text {
-      position: absolute;
-      text-align: left;
-      width: 80%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      color: white;
-
-    .card_customer {
-       font-size: 3.2rem;
-       font-weight: 800;
-       line-height: 1.2;
-
-    }
-    .card_title {
-      font-size: 1.2rem;
-      font-weight: 600;
-    }
-
-  }
-
-  img {
-    object-fit: cover;
-    filter: brightness(50%);
-  }
-
-}
diff --git a/docs-website/src/pages/docs/_components/CustomerCard/index.jsx b/docs-website/src/pages/docs/_components/CustomerCard/index.jsx
deleted file mode 100644
index 36c83226e1f73..0000000000000
--- a/docs-website/src/pages/docs/_components/CustomerCard/index.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import styles from "./customercard.module.scss";
-import Link from "@docusaurus/Link";
-
-const CustomerCard = ({ customer, title, imgUrl, description, to,}) => {
-  return (
-        <div className="col col--6">
-            <div className={clsx("card", styles.card)}>
-              <div className={styles.card_img}>
-                  <img src={imgUrl} alt={customer} />
-                  <div className={styles.card_overlay_text}>
-                    <div class={styles.card_customer}> {customer}</div>
-                    <div class={styles.card_title}> {title}</div>
-                  </div>
-              </div>
-              <div className={styles.card_body}>
-                <p class={styles.card_description}>{description}</p>
-                <div className={styles.card_button}>
-                    <Link className="button button--secondary button--md" href={to} target="_blank">
-                      Discover {customer}'s Story
-                    </Link>
-                </div>
-              </div>
-          </div>
-      </div>
-  );
-};
-
-export default CustomerCard;
diff --git a/docs-website/src/pages/docs/_components/CustomerCardSection/customercardsection.module.scss b/docs-website/src/pages/docs/_components/CustomerCardSection/customercardsection.module.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx b/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
index 27067cb3930eb..505a2810c9433 100644
--- a/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
+++ b/docs-website/src/pages/docs/_components/CustomerCardSection/index.jsx
@@ -93,4 +93,4 @@ const CustomerCardSection = () => {
   );
 };
 
-export default CustomerCardSection;
+export default CustomerCardSection;
\ No newline at end of file
diff --git a/docs-website/src/pages/index.js b/docs-website/src/pages/index.js
index 68b177d10f7af..2eed41b4ad1bd 100644
--- a/docs-website/src/pages/index.js
+++ b/docs-website/src/pages/index.js
@@ -3,13 +3,14 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import CodeBlock from "@theme/CodeBlock";
-
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import Hero from "./_components/Hero";
 import Features from "./_components/Features";
-import Quotes from "./_components/Quotes";
 import { Section, PromoSection } from "./_components/Section";
-import { PlatformLogos, CompanyLogos } from "./_components/Logos";
+import { PlatformLogos } from "./_components/Logos";
 import RoundedImage from "./_components/RoundedImage";
+import { CompanyLogos } from "./_components/Logos";
+import QuickstartContent from "./_components/QuickstartContent";
 
 const example_recipe = `
 source:
@@ -38,6 +39,18 @@ function Home() {
       description="DataHub is a data discovery application built on an extensible data catalog that helps you tame the complexity of diverse data ecosystems."
     >
       <Hero />
+      <div style={{ backgroundColor: "var(--ifm-background-surface-color)" }}>
+        <CompanyLogos />
+        <div style={{ textAlign: "center", margin: "1rem" }}>
+          <Link
+            className="button button--secondary button--md"
+            to={useBaseUrl("adoption-stories")}
+          >
+            Check Out Adoption Stories →
+          </Link>
+        </div>
+      </div>
+      <QuickstartContent />
       <Features />
       <Section>
         <div className="container">
@@ -157,10 +170,6 @@ function Home() {
           </div>
         </div>
       </Section>
-      <Section title="Trusted Across the Industry">
-        <CompanyLogos />
-        <Quotes />
-      </Section>
     </Layout>
   ) : null;
 }
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-adevinta.png b/docs-website/static/img/adoption-stories/adoption-stories-adevinta.png
new file mode 100644
index 0000000000000..6c790995843c5
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-adevinta.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-airtel.png b/docs-website/static/img/adoption-stories/adoption-stories-airtel.png
new file mode 100644
index 0000000000000..ae5ebdedd47aa
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-airtel.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-coursera.png b/docs-website/static/img/adoption-stories/adoption-stories-coursera.png
new file mode 100644
index 0000000000000..4f473874d0dc2
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-coursera.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-geotab.png b/docs-website/static/img/adoption-stories/adoption-stories-geotab.png
new file mode 100644
index 0000000000000..2b3c8a158273a
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-geotab.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-grofers.png b/docs-website/static/img/adoption-stories/adoption-stories-grofers.png
new file mode 100644
index 0000000000000..51af8a3ad69d7
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-grofers.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-hurb.png b/docs-website/static/img/adoption-stories/adoption-stories-hurb.png
new file mode 100644
index 0000000000000..b7b8bae5d8c32
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-hurb.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-mediamarkt-saturn.png b/docs-website/static/img/adoption-stories/adoption-stories-mediamarkt-saturn.png
new file mode 100644
index 0000000000000..ac2f524a7a0e7
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-mediamarkt-saturn.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-netflix.png b/docs-website/static/img/adoption-stories/adoption-stories-netflix.png
new file mode 100644
index 0000000000000..de65a4c59419b
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-netflix.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-optum.png b/docs-website/static/img/adoption-stories/adoption-stories-optum.png
new file mode 100644
index 0000000000000..051abaa96a0e0
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-optum.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-pinterest.png b/docs-website/static/img/adoption-stories/adoption-stories-pinterest.png
new file mode 100644
index 0000000000000..e005ea6d5750a
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-pinterest.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-saxo-bank.png b/docs-website/static/img/adoption-stories/adoption-stories-saxo-bank.png
new file mode 100644
index 0000000000000..333003d146cf5
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-saxo-bank.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-viasat.png b/docs-website/static/img/adoption-stories/adoption-stories-viasat.png
new file mode 100644
index 0000000000000..b6f633450296c
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-viasat.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-visa.png b/docs-website/static/img/adoption-stories/adoption-stories-visa.png
new file mode 100644
index 0000000000000..11d732faf85fe
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-visa.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-wolt.png b/docs-website/static/img/adoption-stories/adoption-stories-wolt.png
new file mode 100644
index 0000000000000..43501a1f2f6d5
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-wolt.png differ
diff --git a/docs-website/static/img/adoption-stories/adoption-stories-zynga.png b/docs-website/static/img/adoption-stories/adoption-stories-zynga.png
new file mode 100644
index 0000000000000..94ee9e9b2fb8e
Binary files /dev/null and b/docs-website/static/img/adoption-stories/adoption-stories-zynga.png differ
diff --git a/docs-website/static/img/adoption-stories/img.png b/docs-website/static/img/adoption-stories/img.png
new file mode 100644
index 0000000000000..4d4971018c398
Binary files /dev/null and b/docs-website/static/img/adoption-stories/img.png differ
diff --git a/docs-website/static/img/assets/business.jpg b/docs-website/static/img/assets/business.jpg
deleted file mode 100644
index f5a91928ee2ad..0000000000000
Binary files a/docs-website/static/img/assets/business.jpg and /dev/null differ
diff --git a/docs-website/static/img/assets/netflix.jpg b/docs-website/static/img/assets/netflix.jpg
deleted file mode 100644
index 8b555f5b63187..0000000000000
Binary files a/docs-website/static/img/assets/netflix.jpg and /dev/null differ
diff --git a/docs-website/static/img/assets/phonecall.jpg b/docs-website/static/img/assets/phonecall.jpg
deleted file mode 100644
index 87e48f2821382..0000000000000
Binary files a/docs-website/static/img/assets/phonecall.jpg and /dev/null differ
diff --git a/docs-website/static/img/assets/travel.jpg b/docs-website/static/img/assets/travel.jpg
deleted file mode 100644
index de2697f563121..0000000000000
Binary files a/docs-website/static/img/assets/travel.jpg and /dev/null differ
diff --git a/docs-website/static/img/logos/companies/pinterest.png b/docs-website/static/img/logos/companies/pinterest.png
new file mode 100644
index 0000000000000..715c8c33fd85b
Binary files /dev/null and b/docs-website/static/img/logos/companies/pinterest.png differ
diff --git a/docs-website/yarn.lock b/docs-website/yarn.lock
index a93b0e74c327d..0970a59cbc00a 100644
--- a/docs-website/yarn.lock
+++ b/docs-website/yarn.lock
@@ -1827,7 +1827,7 @@
     "@docusaurus/theme-search-algolia" "2.4.3"
     "@docusaurus/types" "2.4.3"
 
-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -9705,14 +9705,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-markdown@^8.0.6:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
@@ -10866,6 +10858,11 @@ swc-loader@^0.2.6:
   dependencies:
     "@swc/counter" "^0.1.3"
 
+swiper@^11.1.4:
+  version "11.1.4"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.4.tgz#2f8e303e8bf9e5bc40a3885fc637ae60ff27996c"
+  integrity sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==
+
 symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
diff --git a/docs/what-is-datahub/customer-stories.md b/docs/what-is-datahub/customer-stories.md
deleted file mode 100644
index 2745a8aca0d2f..0000000000000
--- a/docs/what-is-datahub/customer-stories.md
+++ /dev/null
@@ -1,17 +0,0 @@
-import CustomerCardSection from '@site/src/pages/docs/_components/CustomerCardSection';
-
-# Customer Stories
-
-Meet the DataHub users who have shared their stories with us.
-
-:::note Share Your DataHub Journey
-We're excited to hear about your experience with DataHub. Share your story with us!
-<a
-    className='button button--secondary button--md'
-    style= {{ textDecoration: 'none' }}
-    href="/customer-stories-survey">
-Share Your Story
-</a>
-:::
-
-<CustomerCardSection />