diff --git a/website/components/consul-enterprise-comparison/style.css b/website/components/consul-enterprise-comparison/style.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/website/components/consul-enterprise-comparison/img/consul-enterprise.svg b/website/components/enterprise-comparison/consul/img/consul-enterprise.svg
similarity index 100%
rename from website/components/consul-enterprise-comparison/img/consul-enterprise.svg
rename to website/components/enterprise-comparison/consul/img/consul-enterprise.svg
diff --git a/website/components/consul-enterprise-comparison/img/consul-oss.svg b/website/components/enterprise-comparison/consul/img/consul-oss.svg
similarity index 100%
rename from website/components/consul-enterprise-comparison/img/consul-oss.svg
rename to website/components/enterprise-comparison/consul/img/consul-oss.svg
diff --git a/website/components/consul-enterprise-comparison/index.jsx b/website/components/enterprise-comparison/consul/index.jsx
similarity index 95%
rename from website/components/consul-enterprise-comparison/index.jsx
rename to website/components/enterprise-comparison/consul/index.jsx
index ad9184e180..c32cb7a8d2 100644
--- a/website/components/consul-enterprise-comparison/index.jsx
+++ b/website/components/enterprise-comparison/consul/index.jsx
@@ -1,4 +1,4 @@
-import EnterpriseComparison from '../enterprise-comparison'
+import EnterpriseComparison from '../../enterprise-comparison'
 
 export default function ConsulEnterpriseComparison() {
   return (
diff --git a/website/layouts/use-cases/index.jsx b/website/layouts/use-cases/index.jsx
new file mode 100644
index 0000000000..ef2ce7d94d
--- /dev/null
+++ b/website/layouts/use-cases/index.jsx
@@ -0,0 +1,33 @@
+import BasicHero from '../../components/basic-hero'
+import PrefooterCTA from '../../components/prefooter-cta'
+import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
+
+export default function UseCaseLayout({ title, description, children }) {
+  return (
+    <div id="p-use-case">
+      <BasicHero
+        heading={title}
+        content={description}
+        brand="consul"
+        links={[
+          {
+            text: 'Explore HashiCorp Learn',
+            url: 'https://learn.hashicorp.com/consul',
+            type: 'outbound',
+          },
+          {
+            text: 'Explore Documentation',
+            url: '/docs',
+            type: 'inbound',
+          },
+        ]}
+      />
+      <div className="g-grid-container">
+        <h2 className="g-type-display-2 features-header">Features</h2>
+      </div>
+      {children}
+      <ConsulEnterpriseComparison />
+      <PrefooterCTA />
+    </div>
+  )
+}
diff --git a/website/layouts/use-cases/style.css b/website/layouts/use-cases/style.css
new file mode 100644
index 0000000000..24beb9f366
--- /dev/null
+++ b/website/layouts/use-cases/style.css
@@ -0,0 +1,40 @@
+#p-use-case {
+  & .features-header {
+    text-align: center;
+    margin-bottom: 0px;
+  }
+
+  /* Overriding the g-text-split component to have
+   * a header size closer to a h3 than a h2, as within
+   * the context of this page this text-split is more deeply
+   * nested within the page than we normally have it.
+   * */
+  & .g-text-split {
+    & h2 {
+      font-size: 1.5rem;
+      letter-spacing: -0.004em;
+      line-height: 1.375em;
+
+      @media (--medium-up) {
+        font-size: 1.75rem;
+        line-height: 1.321em;
+      }
+
+      @media (--large) {
+        font-size: 2rem;
+        letter-spacing: -0.006em;
+        line-height: 1.313em;
+      }
+    }
+  }
+
+  & .with-border {
+    & .g-text-split {
+      & .children {
+        border-width: 1px;
+        border-color: rgba(174, 176, 183, 0.45);
+        border-style: solid;
+      }
+    }
+  }
+}
diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx
index f878325243..66e47990d6 100644
--- a/website/pages/home/index.jsx
+++ b/website/pages/home/index.jsx
@@ -1,6 +1,6 @@
 import UseCases from '@hashicorp/react-use-cases'
 import BasicHero from '../../components/basic-hero'
-import ConsulEnterpriseComparison from '../../components/consul-enterprise-comparison'
+import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
 import PrefooterCTA from '../../components/prefooter-cta'
 import LearnCallout from '../../components/learn-callout'
 import CaseStudyCarousel from '../../components/case-study-carousel'
diff --git a/website/pages/style.css b/website/pages/style.css
index 8ce18e0b05..0da2c1c9a7 100644
--- a/website/pages/style.css
+++ b/website/pages/style.css
@@ -49,6 +49,9 @@
 @import '../components/learn-callout/style.css';
 @import '../components/case-study-carousel/style.css';
 
+/* Layouts */
+@import '../layouts/use-cases/style.css';
+
 /* Local Pages */
 @import './downloads/style.css';
 @import './community/style.css';
diff --git a/website/pages/use-cases/network-middleware-automation.jsx b/website/pages/use-cases/network-middleware-automation.jsx
new file mode 100644
index 0000000000..0971fcf256
--- /dev/null
+++ b/website/pages/use-cases/network-middleware-automation.jsx
@@ -0,0 +1,59 @@
+import UseCaseLayout from '../../layouts/use-cases'
+import TextSplitWithImage from '@hashicorp/react-text-split-with-image'
+
+export default function NetworkMiddlewareAutomationPage() {
+  return (
+    <UseCaseLayout
+      title="Network Middleware Automation"
+      description="Use Service Discovery to automate updates to complex network load balancer and firewall platforms."
+    >
+      <div className="with-border">
+        <TextSplitWithImage
+          textSplit={{
+            heading: 'Multi-region, multi-cloud',
+            content:
+              'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
+            textSide: 'left',
+            links: [
+              {
+                text: 'Learn More',
+                url:
+                  'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
+                type: 'outbound',
+              },
+            ],
+          }}
+          image={{
+            url:
+              'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
+            alt: '',
+          }}
+        />
+      </div>
+
+      <div className="with-border">
+        <TextSplitWithImage
+          textSplit={{
+            heading: 'Multi-region, multi-cloud',
+            content:
+              'Consul’s flexible architecture allows it to be deployed in any environment, in any region, on any cloud.',
+            textSide: 'right',
+            links: [
+              {
+                text: 'Learn More',
+                url:
+                  'https://learn.hashicorp.com/consul?track=datacenter-deploy#datacenter-deploy',
+                type: 'outbound',
+              },
+            ],
+          }}
+          image={{
+            url:
+              'https://www.datocms-assets.com/2885/1588822376-multi-region.png',
+            alt: '',
+          }}
+        />
+      </div>
+    </UseCaseLayout>
+  )
+}