diff --git a/website/components/io-card-container/index.tsx b/website/components/io-card-container/index.tsx
index 07bef83c318..420d1cee112 100644
--- a/website/components/io-card-container/index.tsx
+++ b/website/components/io-card-container/index.tsx
@@ -34,42 +34,46 @@ export default function IoCardContaianer({
           {description ? <p className={s.description}>{description}</p> : null}
         </header>
       ) : null}
-      {label || cta ? (
-        <header className={s.subHeader}>
-          {label ? <h3 className={s.label}>{label}</h3> : null}
-          {cta ? (
-            <Button
-              title={cta.text}
-              href={cta.url}
-              linkType="inbound"
-              theme={{
-                brand: 'neutral',
-                variant: 'tertiary',
-                background: theme,
-              }}
-            />
+      {cards.length ? (
+        <>
+          {label || cta ? (
+            <header className={s.subHeader}>
+              {label ? <h3 className={s.label}>{label}</h3> : null}
+              {cta ? (
+                <Button
+                  title={cta.text}
+                  href={cta.url}
+                  linkType="inbound"
+                  theme={{
+                    brand: 'neutral',
+                    variant: 'tertiary',
+                    background: theme,
+                  }}
+                />
+              ) : null}
+            </header>
           ) : null}
-        </header>
+          <ul
+            className={s.cardList}
+            style={
+              {
+                '--per-row': cardsPerRow,
+                '--length': cards.length,
+              } as React.CSSProperties
+            }
+          >
+            {cards.map((card, index) => {
+              return (
+                // Index is stable
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <IoCard {...card} />
+                </li>
+              )
+            })}
+          </ul>
+        </>
       ) : null}
-      <ul
-        className={s.cardList}
-        style={
-          {
-            '--per-row': cardsPerRow,
-            '--length': cards.length,
-          } as React.CSSProperties
-        }
-      >
-        {cards.map((card, index) => {
-          return (
-            // Index is stable
-            // eslint-disable-next-line react/no-array-index-key
-            <li key={index}>
-              <IoCard {...card} />
-            </li>
-          )
-        })}
-      </ul>
     </div>
   )
 }
diff --git a/website/components/io-usecase-sections/index.tsx b/website/components/io-usecase-section/index.tsx
similarity index 66%
rename from website/components/io-usecase-sections/index.tsx
rename to website/components/io-usecase-section/index.tsx
index f810cacd7c1..a8583d41afa 100644
--- a/website/components/io-usecase-sections/index.tsx
+++ b/website/components/io-usecase-section/index.tsx
@@ -5,31 +5,11 @@ import Image from 'next/image'
 import Button from '@hashicorp/react-button'
 import s from './style.module.css'
 
-interface IoUsecaseSectionsProps {
-  brand?: Products | 'neutral'
-  sections: [IoUsecaseSectionProps, IoUsecaseSectionProps]
-}
-
-export default function IoUseCaseSestions({
-  brand = 'neutral',
-  sections,
-}: IoUsecaseSectionsProps): React.ReactElement {
-  return (
-    <>
-      {sections.map((section, index) => {
-        // Index is stable
-        // eslint-disable-next-line react/no-array-index-key
-        return <IoUsecaseSection key={index} brand={brand} {...section} />
-      })}
-    </>
-  )
-}
-
 interface IoUsecaseSectionProps {
   brand?: Products | 'neutral'
   eyebrow: string
   heading: string
-  description: React.ReactNode
+  description: string
   media?: {
     src: string
     width: string
@@ -42,7 +22,7 @@ interface IoUsecaseSectionProps {
   }
 }
 
-function IoUsecaseSection({
+export default function IoUsecaseSection({
   brand = 'neutral',
   eyebrow,
   heading,
@@ -57,7 +37,14 @@ function IoUsecaseSection({
         <div className={s.columns}>
           <div className={s.column}>
             <h2 className={s.heading}>{heading}</h2>
-            {media ? <p className={s.description}>{description}</p> : null}
+            {media?.src ? (
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            ) : null}
             {cta ? (
               <div className={s.cta}>
                 <Button
@@ -71,11 +58,16 @@ function IoUsecaseSection({
             ) : null}
           </div>
           <div className={s.column}>
-            {media ? (
+            {media?.src ? (
               // eslint-disable-next-line jsx-a11y/alt-text
               <Image {...media} />
             ) : (
-              <div className={s.description}>{description}</div>
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
             )}
           </div>
         </div>
diff --git a/website/components/io-usecase-sections/style.module.css b/website/components/io-usecase-section/style.module.css
similarity index 100%
rename from website/components/io-usecase-sections/style.module.css
rename to website/components/io-usecase-section/style.module.css
diff --git a/website/pages/use-cases/[slug].tsx b/website/pages/use-cases/[slug].tsx
new file mode 100644
index 00000000000..cefc103f4b7
--- /dev/null
+++ b/website/pages/use-cases/[slug].tsx
@@ -0,0 +1,225 @@
+import * as React from 'react'
+import Head from 'next/head'
+import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
+import useCasesQuery from './query.graphql'
+import { renderMetaTags } from 'react-datocms'
+import IoUsecaseHero from 'components/io-usecase-hero'
+import IoUsecaseSection from 'components/io-usecase-section'
+import IoUsecaseCustomer from 'components/io-usecase-customer'
+import IoCardContainer from 'components/io-card-container'
+import IoVideoCallout from 'components/io-video-callout'
+import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
+import s from './style.module.css'
+
+export default function UseCasePage({ data }) {
+  const {
+    seo,
+    heroHeading,
+    heroDescription,
+    challengeHeading,
+    challengeDescription,
+    challengeImage,
+    challengeLink,
+    solutionHeading,
+    solutionDescription,
+    solutionImage,
+    solutionLink,
+    caseStudyImage,
+    caseStudyLogo,
+    caseStudyHeading,
+    caseStudyDescription,
+    caseStudyLink,
+    caseStudyStats,
+    cardsHeading,
+    cardsDescription,
+    tutorialCards,
+    documentationCards,
+    callToActionHeading,
+    callToActionDescription,
+    callToActionLinks,
+    videoCallout,
+  } = data
+  const _videoCallout = videoCallout[0]
+
+  return (
+    <>
+      <Head>{renderMetaTags(seo)}</Head>
+
+      <IoUsecaseHero
+        eyebrow="Common use case"
+        heading={heroHeading}
+        description={heroDescription}
+        pattern="/img/usecase-hero-pattern.svg"
+      />
+
+      <IoUsecaseSection
+        brand="vault"
+        eyebrow="Challenge"
+        heading={challengeHeading}
+        description={challengeDescription}
+        media={{
+          src: challengeImage?.url,
+          width: challengeImage?.width,
+          height: challengeImage?.height,
+          alt: challengeImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: challengeLink,
+        }}
+      />
+
+      <IoUsecaseSection
+        brand="vault"
+        eyebrow="Solution"
+        heading={solutionHeading}
+        description={solutionDescription}
+        media={{
+          src: solutionImage?.url,
+          width: solutionImage?.width,
+          height: solutionImage?.height,
+          alt: solutionImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: solutionLink,
+        }}
+      />
+
+      <IoUsecaseCustomer
+        link={caseStudyLink}
+        media={{
+          src: caseStudyImage.url,
+          width: caseStudyImage.width,
+          height: caseStudyImage.height,
+          alt: caseStudyImage.alt,
+        }}
+        logo={{
+          src: caseStudyLogo.url,
+          width: caseStudyLogo.width,
+          height: caseStudyLogo.height,
+          alt: caseStudyLogo.alt,
+        }}
+        heading={caseStudyHeading}
+        description={caseStudyDescription}
+        stats={caseStudyStats.map((stat) => {
+          return {
+            value: stat.value,
+            key: stat.label,
+          }
+        })}
+      />
+
+      <div className={s.cards}>
+        <IoCardContainer
+          heading={cardsHeading}
+          description={cardsDescription}
+          label="Tutorials"
+          cta={{
+            url: 'https://learn.hashicorp.com/vault',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={tutorialCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+
+        <IoCardContainer
+          label="Docs"
+          cta={{
+            url: '/docs',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={documentationCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+      </div>
+
+      <div className={s.callToAction}>
+        <IoUsecaseCallToAction
+          theme="light"
+          brand="vault"
+          heading={callToActionHeading}
+          description={callToActionDescription}
+          links={callToActionLinks.map((link) => {
+            return {
+              text: link.title,
+              url: link.link,
+            }
+          })}
+          pattern="/img/usecase-callout-pattern.svg"
+        />
+      </div>
+
+      {_videoCallout ? (
+        <div className={s.videoCallout}>
+          <IoVideoCallout
+            youtubeId={_videoCallout.youtubeId}
+            thumbnail={_videoCallout.thumbnail.url}
+            heading={_videoCallout.heading}
+            description={_videoCallout.description}
+            person={{
+              avatar: _videoCallout.personAvatar.url,
+              name: _videoCallout.personName,
+              description: _videoCallout.personDescription,
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export async function getStaticPaths() {
+  const { allVaultUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  return {
+    paths: allVaultUseCases.map((page) => {
+      return {
+        params: {
+          slug: page.slug,
+        },
+      }
+    }),
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const { slug } = params
+
+  const { allVaultUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  const page = allVaultUseCases.find((page) => page.slug === slug)
+
+  return {
+    props: {
+      data: page,
+    },
+  }
+}
diff --git a/website/pages/use-cases/index.tsx b/website/pages/use-cases/index.tsx
deleted file mode 100644
index 0ff6ee87824..00000000000
--- a/website/pages/use-cases/index.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import IoUsecaseHero from 'components/io-usecase-hero'
-import IoUsecaseSections from 'components/io-usecase-sections'
-import IoUsecaseCustomer from 'components/io-usecase-customer'
-import IoCardContainer from 'components/io-card-container'
-import IoVideoCallout from 'components/io-video-callout'
-import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
-import s from './style.module.css'
-import React from 'react'
-
-export default function UseCases(): React.ReactElement {
-  return (
-    <>
-      <IoUsecaseHero
-        eyebrow="Common use case"
-        heading="Credential rotation with Vault"
-        description="Eliminate long standing shared credentials and reduce risk of breach and credential leakage with automated database credential rotation"
-        pattern="/img/usecase-hero-pattern.svg"
-      />
-
-      <IoUsecaseSections
-        brand="vault"
-        sections={[
-          {
-            eyebrow: 'Challenge',
-            heading:
-              'Each database your organization uses requires credentials for application, services, and users to access or use the data.',
-            description: (
-              <p>
-                This creates potentially thousands of consumers that need access
-                to one or more databases. Safeguarding and ensuring that one of
-                these credentials isn’t leaked, or in the likelihood it is, that
-                the organization can quickly revoke access and remediate, is a
-                complex problem to solve.
-              </p>
-            ),
-            cta: {
-              text: 'Learn more',
-              link: '/',
-            },
-          },
-          {
-            eyebrow: 'Solution',
-            heading:
-              'Create, rotate, and revoke database credentials through an automated workflow and API.',
-            media: {
-              src: '/img/TEMP-customer-story.png',
-              width: '592',
-              height: '455',
-              alt: '',
-            },
-            description: (
-              <>
-                <p>
-                  This allows each application, service, or user to dynamically
-                  get unique credentials to access the database(s) as well as
-                  lease and expiration times for the credentials. This means
-                  that the credentials will expire and reduce impact of breached
-                  from leaked credentials.
-                </p>
-                <p>
-                  In a scenario where credentials are lost or stolen, the window
-                  for those credentials to be valid can be reduced to almost
-                  nothing or instant-use only. If credentials are stolen or
-                  leaked, the same automated workflow for issuance and rotation
-                  can also automatically revoke access and seal Vault and lock
-                  down from outside access.
-                </p>
-              </>
-            ),
-            cta: {
-              text: 'Learn more',
-              link: '/',
-            },
-          },
-        ]}
-      />
-
-      <IoUsecaseCustomer
-        link="/"
-        media={{
-          src: '/img/TEMP-customer-story.png',
-          width: '592',
-          height: '455',
-          alt: '',
-        }}
-        logo={{
-          src: '/img/TEMP-logo.svg',
-          width: '89',
-          height: '25',
-          alt: '',
-        }}
-        heading="Message received"
-        description="Leading global advertising platform uses HashiCorp Consul to launch new services in <1 minute by eliminating all manual operations"
-        stats={[
-          {
-            value: '150k+',
-            key: 'Tokens and credentials generated per day',
-          },
-          {
-            value: '10m+',
-            key: 'Customers served per year',
-          },
-          {
-            value: '25+',
-            key: 'Manual work hours saved per week',
-          },
-        ]}
-      />
-
-      <div className={s.cards}>
-        <IoCardContainer
-          heading="Consul in practice"
-          description="How and why users deploy Consul"
-          label="Tutorials"
-          cta={{
-            url: '/',
-            text: 'Explore all',
-          }}
-          cardsPerRow={3}
-          cards={[
-            {
-              link: {
-                url: '/',
-                type: 'inbound',
-              },
-              heading: 'Dynamic secrets: database secrets engine',
-              description:
-                'Vault can generate secrets on-demand for some systems. For example, when an app needs to access an Amazon S3 bucket, it asks Vault ...',
-            },
-          ]}
-        />
-
-        <IoCardContainer
-          label="Docs"
-          cta={{
-            url: '/',
-            text: 'Explore all',
-          }}
-          cardsPerRow={3}
-          cards={[
-            {
-              link: {
-                url: '/',
-                type: 'inbound',
-              },
-              heading: 'Dynamic secrets: database secrets engine',
-              description:
-                'Vault can generate secrets on-demand for some systems. For example, when an app needs to access an Amazon S3 bucket, it asks Vault ...',
-            },
-          ]}
-        />
-      </div>
-
-      <div className={s.callToAction}>
-        <IoUsecaseCallToAction
-          theme="light"
-          brand="vault"
-          heading="Get started HCP Vault and secrets injection into Kubernetes"
-          description="We’ve built a step-by-step guide on integrating HCP Vault and your Kubernetes cluster."
-          links={[
-            {
-              text: 'Try HCP Vault for free',
-              url: '/',
-            },
-          ]}
-          pattern="/img/usecase-callout-pattern.svg"
-        />
-      </div>
-
-      <div className={s.videoCallout}>
-        <IoVideoCallout
-          youtubeId="Y7c_twmDxQ4"
-          thumbnail="/img/TEMP-thumbnail.png"
-          heading="How Vault works"
-          description="Vault tightly controls access to secrets and encryption keys by authenticating against trusted sources of identity such as Active Directory, LDAP, Kubernetes, CloudFoundry, and cloud platforms."
-          person={{
-            name: 'Armon Dadgar',
-            description: 'Co-founder & CTO',
-            avatar: '/img/TEMP-customer-story.png',
-          }}
-        />
-      </div>
-    </>
-  )
-}
diff --git a/website/pages/use-cases/query.graphql b/website/pages/use-cases/query.graphql
new file mode 100644
index 00000000000..6b4d42f5b35
--- /dev/null
+++ b/website/pages/use-cases/query.graphql
@@ -0,0 +1,88 @@
+query UseCasesQuery {
+  allVaultUseCases {
+    seo: _seoMetaTags {
+      attributes
+      content
+      tag
+    }
+    slug
+    heroHeading
+    heroDescription
+    challengeHeading
+    challengeDescription
+    challengeImage {
+      url
+      alt
+      width
+      height
+    }
+    challengeLink
+    solutionHeading
+    solutionDescription
+    solutionImage {
+      url
+      alt
+      width
+      height
+    }
+    solutionLink
+    caseStudyImage {
+      url
+      alt
+      width
+      height
+    }
+    caseStudyLogo {
+      url
+      alt
+      width
+      height
+    }
+    caseStudyHeading
+    caseStudyDescription
+    caseStudyLink
+    caseStudyStats {
+      value
+      label
+    }
+    cardsHeading
+    cardsDescription
+    tutorialCards {
+      eyebrow
+      heading
+      description
+      link
+      products {
+        name
+      }
+    }
+    documentationCards {
+      eyebrow
+      heading
+      description
+      link
+      products {
+        name
+      }
+    }
+    callToActionHeading
+    callToActionDescription
+    callToActionLinks {
+      link
+      title
+    }
+    videoCallout {
+      youtubeId
+      heading
+      description
+      thumbnail {
+        url
+      }
+      personName
+      personDescription
+      personAvatar {
+        url
+      }
+    }
+  }
+}
diff --git a/website/pages/use-cases/style.module.css b/website/pages/use-cases/style.module.css
index cf682b6af20..c57f30bc826 100644
--- a/website/pages/use-cases/style.module.css
+++ b/website/pages/use-cases/style.module.css
@@ -5,6 +5,7 @@
 .callToAction {
   composes: container;
   margin-top: 64px;
+  margin-bottom: 64px;
 
   @media (--medium-up) {
     margin-top: 132px;