diff --git a/gatsby-config.ts b/gatsby-config.ts
index dcd4bac9..bc537581 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -238,6 +238,7 @@ const cfg: GatsbyConfig = {
                                 `500`,
                                 `600`,
                                 `700`,
+                                `900`,
                             ],
                         },
                     ],
diff --git a/shared.ts b/shared.ts
index fd2dc6bd..897a1293 100644
--- a/shared.ts
+++ b/shared.ts
@@ -1,3 +1,5 @@
+import { features } from './src/components/DeploymentOptionsPage/shared';
+
 export const webinarsUrl =
     'https://try.estuary.dev/webinar-estuary101-ondemand';
 
@@ -144,3 +146,5 @@ export interface Vendor {
         };
     };
 }
+
+export type DeploymentOption = keyof typeof features;
diff --git a/src/components/ContactUs/index.tsx b/src/components/ContactUs/index.tsx
deleted file mode 100644
index aa7cc793..00000000
--- a/src/components/ContactUs/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import SectionOne from './SectionOne';
-import SectionTwo from './SectionTwo';
-import SectionThree from './SectionThree';
-
-export { SectionOne, SectionTwo, SectionThree };
diff --git a/src/components/ContactUs/SectionTwo/index.tsx b/src/components/ContactUsPage/Address/index.tsx
similarity index 95%
rename from src/components/ContactUs/SectionTwo/index.tsx
rename to src/components/ContactUsPage/Address/index.tsx
index b501371f..2a128b69 100644
--- a/src/components/ContactUs/SectionTwo/index.tsx
+++ b/src/components/ContactUsPage/Address/index.tsx
@@ -11,7 +11,7 @@ import {
     address,
 } from './styles.module.less';
 
-const SectionTwo = () => {
+const Address = () => {
     const {
         streetAddress,
         addressLocality,
@@ -39,4 +39,4 @@ const SectionTwo = () => {
     );
 };
 
-export default SectionTwo;
+export default Address;
diff --git a/src/components/ContactUs/SectionTwo/styles.module.less b/src/components/ContactUsPage/Address/styles.module.less
similarity index 100%
rename from src/components/ContactUs/SectionTwo/styles.module.less
rename to src/components/ContactUsPage/Address/styles.module.less
diff --git a/src/components/ContactUs/SectionOne/index.tsx b/src/components/ContactUsPage/FormSection/index.tsx
similarity index 93%
rename from src/components/ContactUs/SectionOne/index.tsx
rename to src/components/ContactUsPage/FormSection/index.tsx
index a530088b..5b1e5796 100644
--- a/src/components/ContactUs/SectionOne/index.tsx
+++ b/src/components/ContactUsPage/FormSection/index.tsx
@@ -7,7 +7,7 @@ import {
     redirectLink,
 } from './styles.module.less';
 
-const SectionOne = () => {
+const FormSection = () => {
     return (
         <section className={section}>
             <ContactUsForm titleHeadingLevel="h1" />
@@ -26,4 +26,4 @@ const SectionOne = () => {
     );
 };
 
-export default SectionOne;
+export default FormSection;
diff --git a/src/components/ContactUs/SectionOne/styles.module.less b/src/components/ContactUsPage/FormSection/styles.module.less
similarity index 100%
rename from src/components/ContactUs/SectionOne/styles.module.less
rename to src/components/ContactUsPage/FormSection/styles.module.less
diff --git a/src/components/ContactUs/SectionThree/index.tsx b/src/components/ContactUsPage/GetEmail/index.tsx
similarity index 93%
rename from src/components/ContactUs/SectionThree/index.tsx
rename to src/components/ContactUsPage/GetEmail/index.tsx
index dc671483..82557291 100644
--- a/src/components/ContactUs/SectionThree/index.tsx
+++ b/src/components/ContactUsPage/GetEmail/index.tsx
@@ -4,7 +4,7 @@ import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
 import { dashboardRegisterUrl } from '../../../../shared';
 import { container, title } from './styles.module.less';
 
-const SectionThree = () => {
+const GetEmail = () => {
     return (
         <section className={defaultWrapperDark}>
             <div className={container}>
@@ -21,4 +21,4 @@ const SectionThree = () => {
     );
 };
 
-export default SectionThree;
+export default GetEmail;
diff --git a/src/components/ContactUs/SectionThree/styles.module.less b/src/components/ContactUsPage/GetEmail/styles.module.less
similarity index 100%
rename from src/components/ContactUs/SectionThree/styles.module.less
rename to src/components/ContactUsPage/GetEmail/styles.module.less
diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
new file mode 100644
index 00000000..2817273a
--- /dev/null
+++ b/src/components/Container/index.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import { container, vertical } from './styles.module.less';
+
+interface ContainerProps {
+    children: ReactNode;
+    className?: string;
+    isVertical?: boolean;
+}
+
+const Container = ({ children, className, isVertical }: ContainerProps) => {
+    return (
+        <div
+            className={clsx(container, className, isVertical ? vertical : null)}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Container;
diff --git a/src/components/Container/styles.module.less b/src/components/Container/styles.module.less
new file mode 100644
index 00000000..4cc03003
--- /dev/null
+++ b/src/components/Container/styles.module.less
@@ -0,0 +1,39 @@
+@import '../../globalStyles/sections.module.less';
+
+.container {
+  .globalMaxWidth;
+  display: flex;
+  gap: 60px;
+  align-items: center;
+  justify-content: space-between;
+
+  > :nth-child(1),
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 50%;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column-reverse;
+    gap: 40px;
+
+    > :nth-child(1),
+    > :nth-child(2) {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 425px) {
+    gap: 20px;
+  }
+}
+
+.vertical {
+  flex-direction: column;
+
+  > :nth-child(1),
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 100%;
+  }
+}
diff --git a/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/index.tsx b/src/components/DeploymentOptionDetails/index.tsx
similarity index 59%
rename from src/components/Homepage/DeploymentModes/DeploymentOptionDetails/index.tsx
rename to src/components/DeploymentOptionDetails/index.tsx
index 6d6bca6c..55417e82 100644
--- a/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/index.tsx
+++ b/src/components/DeploymentOptionDetails/index.tsx
@@ -1,23 +1,29 @@
 import React from 'react';
-import KeyFeature from '../KeyFeature';
+import KeyFeature from '../Homepage/DeploymentModes/KeyFeature';
 import { wrapper } from './styles.module.less';
 
 interface DeploymentOptionDetailsProps {
     title: string;
     description: string;
     keyFeatures: string[];
+    TitleHeadingLevel?: keyof JSX.IntrinsicElements;
+    KeyFeaturesTitleHeadingLevel?: keyof JSX.IntrinsicElements;
 }
 
 const DeploymentOptionDetails = ({
     title,
     description,
     keyFeatures,
+    TitleHeadingLevel = 'h3',
+    KeyFeaturesTitleHeadingLevel = 'h4',
 }: DeploymentOptionDetailsProps) => {
     return (
         <div className={wrapper}>
-            <h3>{title}</h3>
+            <TitleHeadingLevel>{title}</TitleHeadingLevel>
             <p>{description}</p>
-            <h4>Key Features:</h4>
+            <KeyFeaturesTitleHeadingLevel>
+                Key Features:
+            </KeyFeaturesTitleHeadingLevel>
             <ul>
                 {keyFeatures.map((keyFeature, index) => (
                     <KeyFeature key={index} title={keyFeature} />
diff --git a/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less b/src/components/DeploymentOptionDetails/styles.module.less
similarity index 82%
rename from src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less
rename to src/components/DeploymentOptionDetails/styles.module.less
index 4e94f0b3..54be784e 100644
--- a/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less
+++ b/src/components/DeploymentOptionDetails/styles.module.less
@@ -4,9 +4,12 @@
   gap: 16px;
   font-size: 1rem;
 
-  h3 {
+  h2, h3 {
     font-size: 1.25rem;
     line-height: 24px;
+    color: #47506D;
+    text-transform: uppercase;
+    font-weight: 700;
   }
 
   p {
diff --git a/src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx b/src/components/DeploymentOptionDiagram/index.tsx
similarity index 81%
rename from src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx
rename to src/components/DeploymentOptionDiagram/index.tsx
index d7306b8d..0705e483 100644
--- a/src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx
+++ b/src/components/DeploymentOptionDiagram/index.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import clsx from 'clsx';
-import CloudProviderIcon from '../../../../svgs/cloud-provider-icon.svg';
-import CustomerCloudIcon from '../../../../svgs/customer-cloud-icon.svg';
-import ControlPlaneIcon from '../../../../svgs/control-plane-icon.svg';
-import VpcIcon from '../../../../svgs/vpc-icon.svg';
-import DatabaseIcon from '../../../../svgs/database-icon.svg';
-import FlowStorageIcon from '../../../../svgs/flow-storage-icon.svg';
-import UsaFlagIcon from '../../../../svgs/usa-flag-icon.svg';
-import EuropeFlagIcon from '../../../../svgs/europe-flag-icon.svg';
-import PrivateDataPlaneIcon from '../../../../svgs/private-data-plane-icon.svg';
+import CloudProviderIcon from '../../svgs/cloud-provider-icon.svg';
+import CustomerCloudIcon from '../../svgs/customer-cloud-icon.svg';
+import ControlPlaneIcon from '../../svgs/control-plane-icon.svg';
+import VpcIcon from '../../svgs/vpc-icon.svg';
+import DatabaseIcon from '../../svgs/database-icon.svg';
+import FlowStorageIcon from '../../svgs/flow-storage-icon.svg';
+import UsaFlagIcon from '../../svgs/usa-flag-icon.svg';
+import EuropeFlagIcon from '../../svgs/europe-flag-icon.svg';
+import PrivateDataPlaneIcon from '../../svgs/private-data-plane-icon.svg';
+import { DeploymentOption } from '../../../shared';
 import {
+    container,
     solidBorderBox,
     secondLevelSolidBorderBox,
     dashedBorderBox,
@@ -23,22 +25,21 @@ import {
     vpcMarginBottom,
     privateDeploymentTag,
     metadataOnlyDarkerBlueTag,
-    metadataOnlyLighterBlueTag,
     relativePosition,
     privateDeploymentVpcBox,
-} from '../styles.module.less';
+} from './styles.module.less';
 
 const iconSize = 30;
 
 interface DeploymentDiagramProps {
-    selectedTab: string;
+    deploymentOption: DeploymentOption;
 }
 
 const DeploymentOptionDiagram = ({
-    selectedTab = '1',
+    deploymentOption = 'public',
 }: DeploymentDiagramProps) => {
     return (
-        <>
+        <div className={container}>
             <div className={solidBorderBox}>
                 <div className={dashedBorderBox}>
                     <CloudProviderIcon width={iconSize} />
@@ -53,7 +54,7 @@ const DeploymentOptionDiagram = ({
                         <ControlPlaneIcon width={iconSize} />
                         <span>Control Plane</span>
                     </div>
-                    {selectedTab === '1' ? (
+                    {deploymentOption === 'public' ? (
                         <div className={horizontalWrapper}>
                             <div
                                 className={clsx(
@@ -81,12 +82,12 @@ const DeploymentOptionDiagram = ({
                 <div className={dashedBorderBox}>
                     <CustomerCloudIcon width={iconSize} />
                     <span>
-                        {selectedTab === '1'
+                        {deploymentOption === 'public'
                             ? 'Customer Cloud'
                             : 'Customer Cloud & Region'}
                     </span>
                     <div className={horizontalWrapper}>
-                        {selectedTab === '2' ? (
+                        {deploymentOption === 'private' ? (
                             <div
                                 className={clsx(
                                     solidBorderBox,
@@ -117,13 +118,15 @@ const DeploymentOptionDiagram = ({
                             <VpcIcon width={iconSize} />
                             <span
                                 className={
-                                    selectedTab === '2' ? vpcMarginBottom : null
+                                    deploymentOption === 'private'
+                                        ? vpcMarginBottom
+                                        : null
                                 }
                             >
                                 Customer VPC
                             </span>
                             <div className={horizontalWrapper}>
-                                {selectedTab === '3' ? (
+                                {deploymentOption === 'byoc' ? (
                                     <div className={dashedBorderBox}>
                                         <PrivateDataPlaneIcon
                                             width={iconSize}
@@ -148,23 +151,18 @@ const DeploymentOptionDiagram = ({
                         </div>
                     </div>
                 </div>
-                {['1', '3'].includes(selectedTab) ? (
-                    <div
-                        className={clsx(
-                            middleTag,
-                            selectedTab === '3'
-                                ? metadataOnlyLighterBlueTag
-                                : null
-                        )}
-                    >
+                {['public', 'byoc'].includes(deploymentOption) ? (
+                    <div className={middleTag}>
                         <div className={clsx(tagArrow, tagArrowLeft)} />
                         <span>
-                            {selectedTab === '1' ? 'Internet' : 'metadata only'}
+                            {deploymentOption === 'public'
+                                ? 'Internet'
+                                : 'metadata only'}
                         </span>
                         <div className={clsx(tagArrow, tagArrowRight)} />
                     </div>
                 ) : null}
-                {selectedTab === '2' ? (
+                {deploymentOption === 'private' ? (
                     <>
                         <div
                             className={clsx(
@@ -191,7 +189,7 @@ const DeploymentOptionDiagram = ({
                     </>
                 ) : null}
             </div>
-        </>
+        </div>
     );
 };
 
diff --git a/src/components/DeploymentOptionDiagram/styles.module.less b/src/components/DeploymentOptionDiagram/styles.module.less
new file mode 100644
index 00000000..b63660a8
--- /dev/null
+++ b/src/components/DeploymentOptionDiagram/styles.module.less
@@ -0,0 +1,230 @@
+@primaryTagColor: #6ED5D6;
+@secondaryTagColor: #5072EB;
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  position: relative;
+  max-width: 536px;
+  width: 100%;
+  margin: auto;
+
+  div {
+    width: 100%;
+  }
+
+  svg {
+    min-height: 30px;
+  }
+
+  @media (max-width: 600px) {
+    svg {
+      max-width: 20px;
+      max-height: 20px;
+    }
+  }
+
+  @media (max-width: 360px) {
+    gap: 10px;
+  }
+}
+
+.solidBorderBox {
+  border: 1px solid #A4B6F4;
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  height: 100%;
+
+  @media (max-width: 600px) {
+    gap: 10px;
+    padding: 10px;
+  }
+
+  @media (max-width: 450px) {
+    gap: 6px;
+    padding: 6px;
+  }
+}
+
+.secondLevelSolidBorderBox {
+  border-radius: 8px;
+  background-color: #FCFCFD;
+
+  span {
+    font-weight: 500;
+  }
+}
+
+.dashedBorderBox {
+  border: 1px dashed #A4B6F4B2;
+  border-radius: 12px;
+  padding: 16px;
+  background-color: #F5F7FF;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+
+  @media (max-width: 600px) {
+    gap: 10px;
+    padding: 10px;
+  }
+
+  @media (max-width: 450px) {
+    gap: 6px;
+    padding: 6px;
+  }
+
+  span {
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 14.4px;
+
+    @media (max-width: 600px) {
+      font-size: 0.6rem;
+    }
+  }
+}
+
+.middleTag {
+  position: absolute;
+  top: 46%;
+  left: -55%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+
+  span {
+    background-color: @primaryTagColor;
+    color: #FFFFFF;
+    font-size: 0.875rem;
+    font-weight: 700;
+    padding: 4px 12px;
+    white-space: nowrap;
+    min-width: 116px;
+
+    @media (max-width: 600px) {
+      min-width: 70px;
+      font-size: 0.6rem;
+      padding: 2px 0;
+    }
+  }
+}
+
+.tagArrow {
+  width: 0;
+  height: 0;
+  border-top: 14px solid transparent;
+  border-bottom: 14px solid transparent;
+
+  @media (max-width: 600px) {
+    border-top: 9px solid transparent;
+    border-bottom: 9px solid transparent;
+  }
+}
+
+.tagArrowLeft {
+  border-right: 14px solid @primaryTagColor;
+
+  @media (max-width: 600px) {
+    border-right: 9px solid @primaryTagColor;
+  }
+}
+
+.tagArrowRight {
+  border-left: 14px solid @primaryTagColor;
+
+  @media (max-width: 600px) {
+    border-left: 9px solid @primaryTagColor;
+  }
+}
+
+.minHeight {
+  align-items: center;
+  justify-content: center;
+}
+
+.horizontalWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  @media (max-width: 600px) {
+    gap: 10px;
+  }
+
+  @media (max-width: 450px) {
+    gap: 6px;
+  }
+}
+
+.privateDeploymentTag {
+  @media (max-width: 600px) {
+    span {
+      padding: 2px 0;
+    }
+  }
+}
+
+.privateLinkTag {
+  top: 41%;
+  left: -2%;
+
+  @media (max-width: 600px) {
+    top: 44.5%;
+  }
+}
+
+.vpcMarginBottom {
+  margin-bottom: 54px;
+
+  @media (max-width: 600px) {
+    margin-bottom: 40px;
+  }
+}
+
+.metadataOnlyDarkerBlueTag {
+  top: 85%;
+
+  span {
+    background-color: @secondaryTagColor;
+  }
+
+  .tagArrowLeft {
+    border-right-color: @secondaryTagColor;
+  }
+
+  .tagArrowRight {
+    border-left-color: @secondaryTagColor;
+  }
+
+  @media (max-width: 600px) {
+    span {
+      min-width: 80px;
+    }
+  }
+}
+
+.relativePosition {
+  position: relative;
+}
+
+.privateDeploymentVpcBox {
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    margin-bottom: 25px;
+  }
+}
diff --git a/src/components/DeploymentOptionsPage/ByocDeployment/index.tsx b/src/components/DeploymentOptionsPage/ByocDeployment/index.tsx
new file mode 100644
index 00000000..de793e60
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/ByocDeployment/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
+import DeploymentOptionDetails from '../../DeploymentOptionDetails';
+import { features } from '../shared';
+import { container } from '../styles.module.less';
+import DeploymentOptionDiagram from '../../DeploymentOptionDiagram';
+import Container from '../../Container';
+
+const ByocDeployment = () => {
+    return (
+        <section className={defaultWrapperGrey}>
+            <Container className={container}>
+                <DeploymentOptionDiagram deploymentOption="byoc" />
+                <DeploymentOptionDetails
+                    title="BRING YOUR OWN CLOUD"
+                    description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities."
+                    keyFeatures={features.byoc}
+                    TitleHeadingLevel="h2"
+                    KeyFeaturesTitleHeadingLevel="h3"
+                />
+            </Container>
+        </section>
+    );
+};
+
+export default ByocDeployment;
diff --git a/src/components/DeploymentOptionsPage/ComparisonTable/index.tsx b/src/components/DeploymentOptionsPage/ComparisonTable/index.tsx
new file mode 100644
index 00000000..b87d0add
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/ComparisonTable/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
+import Table from '../../Table';
+import Container from '../../Container';
+import { container } from './styles.module.less';
+
+const headers = ['Features', 'Public Deployment', 'Private Deployment', 'BYOC'];
+
+const data = [
+    ['Infrastructure Control', 'Limited', 'High', 'High'],
+    ['Security', 'Standard', 'Enhanced', 'Customizable'],
+    ['Setup Complexity', 'Low', 'Low', 'Medium'],
+    ['Customization', 'Limited', 'Moderate', 'Extensive'],
+    ['Data Residency Control', 'Limited', 'Full', 'Full'],
+    ['Compliance Flexibility', 'Standard', 'High', 'Highest'],
+    ['Cost', 'Predictable', 'Predictable', 'Depends on setup'],
+    ['Maintenance Responsibility', 'Estuary', 'Shared', 'Shared'],
+];
+
+const ComparisonTable = () => {
+    return (
+        <section className={defaultWrapperDark}>
+            <Container className={container} isVertical>
+                <h2>COMPARISON TABLE</h2>
+                <Table headers={headers} data={data} />
+            </Container>
+        </section>
+    );
+};
+
+export default ComparisonTable;
diff --git a/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less
new file mode 100644
index 00000000..c512401d
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/ComparisonTable/styles.module.less
@@ -0,0 +1,15 @@
+.container {
+  h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: #5072EB;
+  }
+
+  @media(max-width: 768px) {
+    gap: 40px;
+
+    h2 {
+      font-size: 2rem;
+    }
+  }
+}
diff --git a/src/components/DeploymentOptionsPage/Hero/index.tsx b/src/components/DeploymentOptionsPage/Hero/index.tsx
new file mode 100644
index 00000000..1f0ae376
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/Hero/index.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
+import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
+import { OutboundLinkFilled } from '../../OutboundLink';
+import { LinkOutlined } from '../../../globalStyles';
+import { dashboardRegisterUrl } from '../../../../shared';
+import CustomerCloudIcon from '../../../svgs/customer-cloud-icon.svg';
+import PublicDeploymentsIcon from '../../../svgs/public-deployments-icon.svg';
+import PrivateDeploymentsIcon from '../../../svgs/private-deployments-icon.svg';
+import Container from '../../Container';
+import {
+    container,
+    leftColumn,
+    rightColumn,
+    solidBorderBox,
+    dashedBorderBox,
+    reverse,
+} from './styles.module.less';
+
+const Hero = () => {
+    return (
+        <section className={defaultWrapperDarkBlue}>
+            <Container className={container}>
+                <div className={leftColumn}>
+                    <h1>ESTUARY FLOW DEPLOYMENT OPTIONS</h1>
+                    <p>
+                        Estuary Flow offers three main deployment options to
+                        cater to various organizational needs and security
+                        requirements. This section provides a high-level
+                        overview and comparison of Public Deployment, Private
+                        Deployment, and BYOC options.
+                    </p>
+                    <div>
+                        <OutboundLinkFilled
+                            target="_blank"
+                            href={dashboardRegisterUrl}
+                        >
+                            Build a pipeline
+                        </OutboundLinkFilled>
+                        <LinkOutlined
+                            href="/contact-us"
+                            target="_blank"
+                            theme="dark"
+                        >
+                            Contact Us
+                        </LinkOutlined>
+                    </div>
+                </div>
+                <div className={rightColumn}>
+                    <StaticImage
+                        src="../../../images/deployment-options-page/deployment-options-page-hero-background-image.png"
+                        alt="Enterprise-ready Estuary Flow deployment options: BYOC, Public, and Private"
+                        quality={100}
+                        placeholder="blurred"
+                        loading="eager"
+                    />
+                    <div className={solidBorderBox}>
+                        <span>
+                            <CustomerCloudIcon />
+                            BYOC
+                        </span>
+                    </div>
+                    <div className={clsx(solidBorderBox, reverse)}>
+                        <span>
+                            <PublicDeploymentsIcon />
+                            Public Deployments
+                        </span>
+                    </div>
+                    <div className={solidBorderBox}>
+                        <span>
+                            <PrivateDeploymentsIcon />
+                            Private Deployments
+                        </span>
+                    </div>
+                    <div className={dashedBorderBox}>
+                        <span>Private</span>
+                    </div>
+                    <div className={clsx(dashedBorderBox, reverse)}>
+                        <span>Secure</span>
+                    </div>
+                    <div className={dashedBorderBox}>
+                        <span>Private</span>
+                    </div>
+                    <div className={dashedBorderBox}>
+                        <span>Enterprise-ready</span>
+                    </div>
+                    <div className={clsx(dashedBorderBox, reverse)}>
+                        <span>Secure</span>
+                    </div>
+                    <div className={dashedBorderBox}>
+                        <span>Private</span>
+                    </div>
+                </div>
+            </Container>
+        </section>
+    );
+};
+
+export default Hero;
diff --git a/src/components/DeploymentOptionsPage/Hero/styles.module.less b/src/components/DeploymentOptionsPage/Hero/styles.module.less
new file mode 100644
index 00000000..3afcd113
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/Hero/styles.module.less
@@ -0,0 +1,279 @@
+@purple: #A4B6F4;
+@darkGreen: #134753;
+@lightGreen: #4EFFF2;
+@sizeProportionalToViewWidth: 0.7vw;
+@sizeProportionalToViewWidth2: 1vw;
+@sizeProportionalToViewWidth3: 2vw;
+@sizeProportionalToViewWidth4: 2.8vw;
+@sizeProportionalToViewWidth5: 7vw;
+
+.fullSize {
+  width: 100%;
+  height: 100%;
+}
+
+.centralize {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reverse {
+  transform: scaleX(-1);
+
+  span {
+    transform: scaleX(-1);
+  }
+}
+
+.container {
+  h1,
+  p {
+    color: #fff;
+  }
+
+  h1 {
+    line-height: 72px;
+  }
+
+  p {
+    font-size: 1.25rem;
+    color: #F2F3F5;
+    margin: 0;
+  }
+
+  span {
+    .fullSize;
+    font-size: 0.9vw;
+    font-weight: 600;
+    line-height: @sizeProportionalToViewWidth2;
+    color: #47506D;
+    text-align: center;
+  }
+
+  @media (min-width: 1441px) {
+    span {
+      font-size: 0.875rem;
+      line-height: 16.3px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .leftColumn {
+      max-width: 100%;
+    }
+
+    span {
+      font-size: 1.8vw;
+      line-height: 2.2vw;
+    }
+  }
+
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 2.5rem;
+      line-height: 48px;
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+
+  @media (max-width: 425px) {
+    h1 {
+      font-size: 2.25rem;
+      line-height: 43.2px;
+    }
+  }
+}
+
+.leftColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 50%;
+  width: 100%;
+
+  div {
+    display: flex;
+    gap: 16px;
+    max-width: 480px;
+    flex-direction: row;
+
+    &>a {
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    @media (max-width: 1024px) {
+      margin: 0;
+    }
+
+    @media (max-width: 360px) {
+      flex-direction: column;
+    }
+  }
+}
+
+.solidBorderBox {
+  .fullSize;
+  background-color: #FFFFFF33;
+  padding: @sizeProportionalToViewWidth2;
+  top: 26%;
+  left: 2%;
+  position: absolute;
+  border: 1px solid @purple;
+  border-top-right-radius: @sizeProportionalToViewWidth2;
+  border-bottom-left-radius: @sizeProportionalToViewWidth2;
+  max-width: 26%;
+  max-height: 36%;
+
+  span {
+    .centralize;
+    flex-direction: column;
+    gap: @sizeProportionalToViewWidth;
+    background-color: #D8E1FF;
+    border: 1px solid @purple;
+    border-top-right-radius: @sizeProportionalToViewWidth;
+    border-bottom-left-radius: @sizeProportionalToViewWidth;
+
+    svg {
+      max-width: @sizeProportionalToViewWidth4;
+    }
+  }
+
+  @media (min-width: 1441px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 1024px) {
+    padding: @sizeProportionalToViewWidth3;
+    border-top-right-radius: @sizeProportionalToViewWidth4;
+    border-bottom-left-radius: @sizeProportionalToViewWidth4;
+
+    span {
+      border-top-right-radius: @sizeProportionalToViewWidth3;
+      border-bottom-left-radius: @sizeProportionalToViewWidth3;
+      gap: @sizeProportionalToViewWidth3;
+
+      svg {
+        max-width: @sizeProportionalToViewWidth5;
+        max-height: @sizeProportionalToViewWidth5;
+      }
+    }
+  }
+}
+
+.dashedBorderBox {
+  .fullSize;
+  position: absolute;
+  top: 65%;
+  left: 2%;
+  border: 1px dashed @purple;
+  background-color: #172D48;
+  border-top-left-radius: @sizeProportionalToViewWidth;
+  border-bottom-right-radius: @sizeProportionalToViewWidth;
+  max-width: 11%;
+  max-height: 13%;
+
+  span {
+    .centralize;
+    font-size: @sizeProportionalToViewWidth;
+    color: #B8C7F7;
+    font-weight: 900;
+
+    @media (min-width: 1441px) {
+      font-size: 0.75rem;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    border-top-left-radius: @sizeProportionalToViewWidth3;
+    border-bottom-right-radius: @sizeProportionalToViewWidth3;
+
+    span {
+      font-size: 1.5vw;
+    }
+  }
+}
+
+.rightColumn {
+  position: relative;
+  width: 100%;
+
+  div {
+    img {
+      position: absolute;
+    }
+  }
+
+  .solidBorderBox:nth-of-type(3) {
+    top: 18%;
+    left: 31%;
+    max-height: 44%;
+
+    span {
+      border-top-left-radius: @sizeProportionalToViewWidth;
+      border-bottom-right-radius: @sizeProportionalToViewWidth;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media (max-width: 1024px) {
+        border-top-left-radius: @sizeProportionalToViewWidth3;
+        border-bottom-right-radius: @sizeProportionalToViewWidth3;
+      }
+    }
+  }
+
+  .solidBorderBox:nth-of-type(4) {
+    top: 10%;
+    left: 60%;
+    max-height: 52%;
+  }
+
+  .dashedBorderBox:nth-of-type(5) {
+    top: 65%;
+    left: 46%;
+  }
+
+  .dashedBorderBox:nth-of-type(6) {
+    top: 65%;
+    left: 87%;
+    background-color: @darkGreen;
+    border-color: @lightGreen;
+
+    span {
+      color: @lightGreen;
+    }
+  }
+
+  .dashedBorderBox:nth-of-type(7) {
+    top: 49%;
+    left: 89%;
+  }
+
+  .dashedBorderBox:nth-of-type(8) {
+    top: 65%;
+    left: 70%;
+    max-width: 14%;
+    max-height: 16%;
+    background-color: #152D5B;
+    border-color: #5072EB;
+
+    span {
+      color: #FFFFFF;
+    }
+  }
+
+  .dashedBorderBox:nth-of-type(9) {
+    top: 65%;
+    left: 31%;
+    background-color: @darkGreen;
+    border-color: @lightGreen;
+
+    span {
+      color: @lightGreen;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx b/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx
new file mode 100644
index 00000000..1996c47f
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/PrivateDeployment/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import { defaultWrapperDark } from '../../../globalStyles/wrappers.module.less';
+import DeploymentOptionDetails from '../../DeploymentOptionDetails';
+import { features } from '../shared';
+import { container, reverseColumn } from '../styles.module.less';
+import DeploymentOptionDiagram from '../../DeploymentOptionDiagram';
+import Container from '../../Container';
+
+const PrivateDeployment = () => {
+    return (
+        <section className={defaultWrapperDark}>
+            <Container className={clsx(container, reverseColumn)}>
+                <DeploymentOptionDetails
+                    title="PRIVATE DEPLOYMENT"
+                    description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data."
+                    keyFeatures={features.private}
+                    TitleHeadingLevel="h2"
+                    KeyFeaturesTitleHeadingLevel="h3"
+                />
+                <DeploymentOptionDiagram deploymentOption="private" />
+            </Container>
+        </section>
+    );
+};
+
+export default PrivateDeployment;
diff --git a/src/components/DeploymentOptionsPage/PublicDeployment/index.tsx b/src/components/DeploymentOptionsPage/PublicDeployment/index.tsx
new file mode 100644
index 00000000..09d28036
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/PublicDeployment/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
+import DeploymentOptionDetails from '../../DeploymentOptionDetails';
+import { features } from '../shared';
+import { container } from '../styles.module.less';
+import DeploymentOptionDiagram from '../../DeploymentOptionDiagram';
+import Container from '../../Container';
+
+const PublicDeployment = () => {
+    return (
+        <section className={defaultWrapperGrey}>
+            <Container className={container}>
+                <DeploymentOptionDiagram deploymentOption="public" />
+                <DeploymentOptionDetails
+                    title="PUBLIC DEPLOYMENT"
+                    description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures."
+                    keyFeatures={features.public}
+                    TitleHeadingLevel="h2"
+                    KeyFeaturesTitleHeadingLevel="h3"
+                />
+            </Container>
+        </section>
+    );
+};
+
+export default PublicDeployment;
diff --git a/src/components/DeploymentOptionsPage/shared.ts b/src/components/DeploymentOptionsPage/shared.ts
new file mode 100644
index 00000000..3b13ea0a
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/shared.ts
@@ -0,0 +1,23 @@
+export const features = {
+    public: [
+        'Fully managed by Estuary',
+        'Quick setup and minimal configuration required',
+        'Automatic updates and maintenance',
+        'Multiple data processing region options',
+        'Suitable for organizations with less stringent data security requirements',
+    ],
+    private: [
+        'Enhanced security with data remaining within the private network',
+        'Complete control over data pathways',
+        'Immutable infrastructure pattern for up-to-date security',
+        'Compliant with stringent data security requirements',
+        'Ability to move data across regions',
+    ],
+    byoc: [
+        'Full control over the cloud infrastructure',
+        'Ability to leverage existing cloud resources and configurations',
+        'Customizable to fit specific organizational needs',
+        'Potential cost savings by using existing cloud credits or negotiated rates',
+        'Greater flexibility in terms of data residency and compliance',
+    ],
+};
diff --git a/src/components/DeploymentOptionsPage/styles.module.less b/src/components/DeploymentOptionsPage/styles.module.less
new file mode 100644
index 00000000..e57b6edf
--- /dev/null
+++ b/src/components/DeploymentOptionsPage/styles.module.less
@@ -0,0 +1,27 @@
+.container {
+  h2 {
+    font-size: 2.25rem;
+    margin-bottom: 8px;
+    line-height: 38.4px;
+  }
+
+  h3 {
+    color: #5072EB;
+    font-size: 1rem;
+  }
+
+  @media(max-width: 1024px) {
+    display: flex;
+    flex-direction: column;
+
+    h2 {
+      font-size: 2rem;
+    }
+  }
+}
+
+.reverseColumn {
+  @media(max-width: 1024px) {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx b/src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx
index 9690796a..c09c6b99 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/TableRows/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import FeatureData from '../FeatureData';
-import TitledTableCell from '../TitledTableCell';
+import TitledTableCell from '../../../Table/TitledTableCell';
 
 interface ComparisonVendor {
     name: string;
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx
index c21a30ae..6f137c1a 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/VendorAvatar/index.tsx
@@ -28,6 +28,4 @@ const VendorAvatar = React.forwardRef<HTMLTableCellElement, VendorAvatarProps>(
     }
 );
 
-VendorAvatar.displayName = 'VendorAvatar';
-
 export default VendorAvatar;
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
index b30809be..fb751ede 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
+++ b/src/components/EtlToolsXvsYPage/SectionTwo/styles.module.less
@@ -1,4 +1,5 @@
 @import '../../../globalStyles/sections.module.less';
+@import '../../Table/styles.module.less';
 
 .container {
   .globalMaxWidth;
@@ -36,150 +37,73 @@
   }
 
   table {
-    margin: 24px 0 48px 0;
-    border: none;
-    font-size: 1rem;
-    border-collapse: separate;
-    border-spacing: 0;
-    color: #47506D;
-    border-bottom: 1px solid #EEF1FD;
-    border-bottom-left-radius: 32px;
-    border-bottom-right-radius: 32px;
-  }
-
-  thead th:not(:first-of-type) {
-    position: sticky;
-    top: 116px;
-    padding: 0;
-  }
-
-  thead th:nth-child(2) div:first-of-type {
-    border-bottom-left-radius: 16px;
-  }
-
-  thead th:last-of-type div:first-of-type {
-    border-bottom-right-radius: 16px;
-  }
-
-  th {
-    background-color: #EEF1FD;
-    color: #04192B;
-    font-size: 1.25rem;
-    font-weight: 600;
-    padding: 24px;
-    border: none;
-  }
-
-  tr:first-of-type {
-    th {
-      border-top-left-radius: 32px;
-      border-top-right-radius: 32px;
-    }
-  }
-
-  tr:last-of-type td:first-of-type {
-    border-bottom-left-radius: 32px;
-  }
-
-  tr:last-of-type td:last-of-type {
-    border-bottom-right-radius: 32px;
-  }
-
-  thead {
-    th {
-      background-color: transparent;
-      color: #47506D;
-      font-weight: 600;
-      font-size: 1rem;
-    }
-  }
-
-  td {
-    background-color: #fff;
-    border: none;
-    border-top: 1px dashed #DCE3FB;
-    padding: 12px;
-    text-align: center;
+    .table;
 
-    p {
-      margin: 0;
-      font-size: 1rem;
-      line-height: 30px;
-    }
-  }
-
-  td:not(:first-child) {
-    border-left: none;
-  }
-
-  td:not(:last-child) {
-    border-right: none;
-  }
-
-  td:first-of-type {
-    width: 340px;
-    padding: 12px 24px;
-    border-left: 1px solid #EEF1FD;
-    font-weight: 600;
-    text-align: left;
-  }
-
-  td:last-of-type {
-    border-right: 1px solid #EEF1FD;
-    padding: 12px 24px;
-  }
+    margin: 24px 0 48px 0;
 
-  @media (max-width: 768px) {
-    table {
-      border: 1px solid #EEF1FD;
-      border-radius: 32px;
+    thead th:not(:first-of-type) {
+      position: sticky;
+      top: 116px;
+      padding: 0;
     }
 
     thead {
-      display: none;
-    }
-
-    th {
-      text-align: center;
-    }
-
-    tr {
-      display: flex;
-      flex-direction: column;
+      th {
+        background-color: transparent;
+        color: #47506D;
+        font-weight: 600;
+        font-size: 1rem;
+      }
     }
 
     td:first-of-type {
-      width: 100%;
-      text-align: center;
+      padding: 12px 24px;
     }
 
-    tr td:last-of-type {
-      border-right: none;
+    td:last-of-type {
+      padding: 12px 24px;
     }
 
-    tr:last-of-type td:last-of-type {
-      border-bottom-left-radius: 32px;
-    }
+    tr {
+      td:first-of-type {
+        padding-left: 24px;
+      }
 
-    td:first-of-type {
-      border-left: none;
-      background-color: #F6F8FE;
+      td:last-of-type {
+        padding-right: 24px;
+      }
     }
 
-    .vendorNameMobile {
-      display: block;
-      margin-bottom: 8px;
-      font-size: 1rem;
+    tr:first-of-type {
+      th:first-of-type {
+        padding-left: 24px;
+      }
+
+      th:last-of-type {
+        padding-right: 0;
+      }
     }
-  }
 
-  @media (min-width: 769px) {
-    td:not(:first-child) strong {
-      display: none;
+    @media (max-width: 768px) {
+      tr {
+        td:first-of-type {
+          padding: 12px;
+        }
+
+        td:last-of-type {
+          padding: 12px;
+        }
+      }
+
+      tr:first-of-type {
+        th:last-of-type {
+          padding-right: 24px;
+        }
+      }
     }
   }
 }
 
 .bold {
   font-weight: 600;
-}
+}
\ No newline at end of file
diff --git a/src/components/HeaderNavbar/CardItem/index.tsx b/src/components/HeaderNavbar/CardItem/index.tsx
index 569de09d..1d3ec93a 100644
--- a/src/components/HeaderNavbar/CardItem/index.tsx
+++ b/src/components/HeaderNavbar/CardItem/index.tsx
@@ -15,7 +15,7 @@ import {
 } from './styles';
 import { contentFooter } from './styles.module.less';
 
-const ItemLink = ({ name, description, Image, to, hasChevronIcon }) => {
+const ItemLink = ({ name, description, Image, to }) => {
     const LinkElement: any = to[0] === '/' ? Link : OutboundLink;
     const linkProps = to[0] === '/' ? { to } : { href: to, target: '_blank' };
 
@@ -36,12 +36,7 @@ const ItemLink = ({ name, description, Image, to, hasChevronIcon }) => {
                             </Description>
                         ) : null}
                     </TextWrapper>
-                    {hasChevronIcon ? (
-                        <Chevron
-                            className="header-chevron-icon"
-                            fontSize="small"
-                        />
-                    ) : null}
+                    <Chevron className="header-chevron-icon" fontSize="small" />
                 </ContentWrapper>
             </CardItem>
         </LinkElement>
diff --git a/src/components/HeaderNavbar/Product/items.tsx b/src/components/HeaderNavbar/Product/items.tsx
index 2bdfc418..fe5ad732 100644
--- a/src/components/HeaderNavbar/Product/items.tsx
+++ b/src/components/HeaderNavbar/Product/items.tsx
@@ -1,21 +1,24 @@
-import { StaticImage } from 'gatsby-plugin-image';
 import React from 'react';
 import { getComparisonSlug } from '../../../../shared';
+import BookIcon from '../../../svgs/header-book.svg';
+import BalanceIcon from '../../../svgs/header-balance.svg';
+
+const BookHeaderIcon = () => <BookIcon width={11} height={14} />;
+const BalanceHeaderIcon = () => <BalanceIcon width={15} height={15} />;
 
 export const products = [
     {
         name: 'ESTUARY FLOW',
         to: '/product',
         description: 'Build fully managed real-time data pipelines in minutes.',
-        hasChevronIcon: false,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/header-book.svg"
-                width={11}
-                height={14}
-                alt="Estuary Flow product"
-            />
-        ),
+        Image: () => <BookHeaderIcon />,
+    },
+    {
+        name: 'DEPLOYMENT OPTIONS',
+        to: '/deployment-options',
+        description:
+            'Explore the deployment options for Estuary Flow: Public, Private, and BYOC, with a comparison.',
+        Image: () => <BookHeaderIcon />,
     },
 ];
 
@@ -26,53 +29,21 @@ export const compare = [
     {
         name: 'Estuary vs. Fivetran',
         to: generateComparisonTo('estuary', 'fivetran'),
-        hasChevronIcon: true,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/header-balance.svg"
-                width={15}
-                height={15}
-                alt="Compare with concurrent"
-            />
-        ),
+        Image: () => <BalanceHeaderIcon />,
     },
     {
         name: 'Estuary vs. Confluent',
         to: generateComparisonTo('confluent', 'estuary'),
-        hasChevronIcon: true,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/header-balance.svg"
-                width={15}
-                height={15}
-                alt="Compare with concurrent"
-            />
-        ),
+        Image: () => <BalanceHeaderIcon />,
     },
     {
         name: 'Estuary vs. Airbyte',
         to: generateComparisonTo('airbyte', 'estuary'),
-        hasChevronIcon: true,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/header-balance.svg"
-                width={15}
-                height={15}
-                alt="Compare with concurrent"
-            />
-        ),
+        Image: () => <BalanceHeaderIcon />,
     },
     {
         name: 'Estuary vs. Debezium',
         to: generateComparisonTo('debezium-kafka', 'estuary'),
-        hasChevronIcon: true,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/header-balance.svg"
-                width={15}
-                height={15}
-                alt="Compare with concurrent"
-            />
-        ),
+        Image: () => <BalanceHeaderIcon />,
     },
 ];
diff --git a/src/components/HeaderNavbar/Resources/index.tsx b/src/components/HeaderNavbar/Resources/index.tsx
index e52fce3b..1a01333d 100644
--- a/src/components/HeaderNavbar/Resources/index.tsx
+++ b/src/components/HeaderNavbar/Resources/index.tsx
@@ -18,9 +18,12 @@ import {
 } from '../styles';
 import { hideOnMobile, longLinkList } from '../styles.module.less';
 import Carousel from '../../Carousel';
+import SuccessIcon from '../../../svgs/success.svg';
 import { listen, read } from './items';
 import ResourcesLink from './Link';
 
+const iconSize = 16;
+
 const HeaderNavbarResources = ({ active, setActive }) => {
     const {
         allStrapiCaseStudy: { nodes: allCaseStudies },
@@ -60,15 +63,7 @@ const HeaderNavbarResources = ({ active, setActive }) => {
         name: caseStudy.Title.toUpperCase(),
         to: `/customers/${caseStudy.Slug}`,
         description: caseStudy.LinkOneLiner,
-        hasCrevronIcon: false,
-        Image: () => (
-            <StaticImage
-                src="../../../svgs/success.svg"
-                width={16}
-                height={16}
-                alt={`${caseStudy.Title} logo`}
-            />
-        ),
+        Image: () => <SuccessIcon width={iconSize} height={iconSize} />,
     }));
 
     return (
diff --git a/src/components/HeaderNavbar/Resources/items.tsx b/src/components/HeaderNavbar/Resources/items.tsx
index 35a62fc9..c59ec51d 100644
--- a/src/components/HeaderNavbar/Resources/items.tsx
+++ b/src/components/HeaderNavbar/Resources/items.tsx
@@ -6,13 +6,11 @@ export const read = [
     {
         name: 'Blog',
         to: '/blog/data-engineering',
-        hasChevronIcon: true,
         Image: () => <StaticImage src="../../../svgs/blog.svg" alt="Blog" />,
     },
     {
         name: 'Docs & Guides',
         to: 'https://docs.estuary.dev',
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage
                 src="../../../svgs/docs-and-guides.svg"
@@ -23,7 +21,6 @@ export const read = [
     {
         name: 'Status',
         to: statusPageUrl,
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage
                 src="../../../svgs/product-flow-live-reporting.svg"
@@ -36,7 +33,6 @@ export const read = [
     {
         name: 'About us',
         to: '/about',
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage src="../../../svgs/estuary-icon.svg" alt="About us" />
         ),
@@ -47,7 +43,6 @@ export const listen = [
     {
         name: 'Podcasts',
         to: '/podcasts',
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage src="../../../svgs/microphone.svg" alt="Podcasts" />
         ),
@@ -55,7 +50,6 @@ export const listen = [
     {
         name: 'Webinars',
         to: webinarsUrl,
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage src="../../../svgs/webinars.svg" alt="Webinars" />
         ),
@@ -63,7 +57,6 @@ export const listen = [
     {
         name: 'YouTube',
         to: 'https://www.youtube.com/watch?v=Ys5BoNqKljc',
-        hasChevronIcon: true,
         Image: () => (
             <StaticImage src="../../../svgs/youtube.svg" alt="Youtube" />
         ),
diff --git a/src/components/Homepage/DeploymentModes/DeploymentDiagramContainer/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentDiagramContainer/index.tsx
new file mode 100644
index 00000000..614cae1b
--- /dev/null
+++ b/src/components/Homepage/DeploymentModes/DeploymentDiagramContainer/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DeploymentOptionDiagram from '../../../DeploymentOptionDiagram';
+import { DeploymentOption } from '../../../../../shared';
+
+interface DeploymentDiagramContainerProps {
+    deploymentOption: DeploymentOption;
+}
+
+const DeploymentDiagramContainer = ({
+    deploymentOption,
+}: DeploymentDiagramContainerProps) => (
+    <DeploymentOptionDiagram deploymentOption={deploymentOption} />
+);
+
+export default DeploymentDiagramContainer;
diff --git a/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx
index 1e244b34..4d61d8b8 100644
--- a/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx
+++ b/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import TabPanel from '@mui/lab/TabPanel';
-import DeploymentOptionDetails from '../DeploymentOptionDetails';
+import DeploymentOptionDetails from '../../../DeploymentOptionDetails';
 
-const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' };
+const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '340px' };
 
 const DeploymentTabPanel = ({ value, title, description, keyFeatures }) => (
     <TabPanel value={value} sx={tabPanelStyling} keepMounted>
diff --git a/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx b/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx
deleted file mode 100644
index 2045e5e0..00000000
--- a/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import DeploymentOptionDiagram from '../DeploymentOptionDiagram';
-
-const DiagramContainer = ({ selectedTab }) => (
-    <DeploymentOptionDiagram selectedTab={selectedTab} />
-);
-
-export default DiagramContainer;
diff --git a/src/components/Homepage/DeploymentModes/TabPanels/index.tsx b/src/components/Homepage/DeploymentModes/TabPanels/index.tsx
index b0a23eff..5f333fdc 100644
--- a/src/components/Homepage/DeploymentModes/TabPanels/index.tsx
+++ b/src/components/Homepage/DeploymentModes/TabPanels/index.tsx
@@ -3,46 +3,40 @@ import DeploymentTabPanel from '../DeploymentTabPanel';
 
 const features = {
     public: [
-        'Fully managed by Estuary',
-        'Quick setup and minimal configuration required',
-        'Automatic updates and maintenance',
-        'Multiple data processing region options',
-        'Suitable for organizations with less stringent data security requirements',
+        'Managed by Estuary',
+        'Easy setup and minimal configuration',
+        'Multiple data processing regions',
     ],
     private: [
-        'Enhanced security with data remaining within the private network',
-        'Complete control over data pathways',
-        'Immutable infrastructure pattern for up-to-date security',
-        'Compliant with stringent data security requirements',
-        'Ability to move data across regions',
+        'Private network data control',
+        'Maximum security',
+        'Compliance-ready',
     ],
     byoc: [
-        'Full control over the cloud infrastructure',
-        'Ability to leverage existing cloud resources and configurations',
-        'Customizable to fit specific organizational needs',
-        'Potential cost savings by using existing cloud credits or negotiated rates',
-        'Greater flexibility in terms of data residency and compliance',
+        'Full infrastructure control and customization',
+        'Potential cost savings for cloud resources',
+        'Total flexibility',
     ],
 };
 
 const TabPanels = () => (
     <>
         <DeploymentTabPanel
-            value="1"
+            value="public"
             title="PUBLIC DEPLOYMENT"
-            description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures."
+            description="Estuary Flow's standard SaaS option, fully managed for quick, hassle-free setup."
             keyFeatures={features.public}
         />
         <DeploymentTabPanel
-            value="2"
+            value="private"
             title="PRIVATE DEPLOYMENT"
-            description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data."
+            description="Offers enhanced security by hosting Estuary Flow within a private network, combining SaaS ease with more control."
             keyFeatures={features.private}
         />
         <DeploymentTabPanel
-            value="3"
-            title="BRING YOUR OWN CLOUD"
-            description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities."
+            value="byoc"
+            title="BYOC (Bring Your Own Cloud)"
+            description="Deploy Estuary Flow on your cloud infrastructure for complete control."
             keyFeatures={features.byoc}
         />
     </>
diff --git a/src/components/Homepage/DeploymentModes/Tabs/index.tsx b/src/components/Homepage/DeploymentModes/Tabs/index.tsx
index 4426671d..dd53a456 100644
--- a/src/components/Homepage/DeploymentModes/Tabs/index.tsx
+++ b/src/components/Homepage/DeploymentModes/Tabs/index.tsx
@@ -23,19 +23,19 @@ const Tabs = ({ handleTabChange }) => (
     >
         <Tab
             label="Public Deployment"
-            value="1"
+            value="public"
             sx={tabStyling}
             disableRipple
         />
         <Tab
             label="Private Deployment"
-            value="2"
+            value="private"
             sx={tabStyling}
             disableRipple
         />
         <Tab
             label="BYOC (Bring Your Own Cloud)"
-            value="3"
+            value="byoc"
             sx={tabStyling}
             disableRipple
         />
diff --git a/src/components/Homepage/DeploymentModes/index.tsx b/src/components/Homepage/DeploymentModes/index.tsx
index 5ed3378f..4659bbed 100644
--- a/src/components/Homepage/DeploymentModes/index.tsx
+++ b/src/components/Homepage/DeploymentModes/index.tsx
@@ -1,25 +1,28 @@
 import React from 'react';
 import TabContext from '@mui/lab/TabContext';
-import clsx from 'clsx';
 import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less';
-import { grid, container, leftColumn, rightColumn } from './styles.module.less';
-import DiagramContainer from './DiagramContainer';
+import { DeploymentOption } from '../../../../shared';
+import { LinkFilled } from '../../../globalStyles';
+import { container, rightColumn } from './styles.module.less';
+import DeploymentDiagramContainer from './DeploymentDiagramContainer';
 import TabPanels from './TabPanels';
 import Tabs from './Tabs';
 
 const DeploymentModes = () => {
-    const [selectedTab, setSelectedTab] = React.useState('1');
+    const [selectedTab, setSelectedTab] =
+        React.useState<DeploymentOption>('public');
 
-    const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
+    const handleTabChange = (
+        event: React.SyntheticEvent,
+        newValue: DeploymentOption
+    ) => {
         setSelectedTab(newValue);
     };
 
     return (
         <section className={defaultWrapperGrey}>
-            <div className={clsx(grid, container)}>
-                <div className={clsx(grid, leftColumn)}>
-                    <DiagramContainer selectedTab={selectedTab} />
-                </div>
+            <div className={container}>
+                <DeploymentDiagramContainer deploymentOption={selectedTab} />
                 <div className={rightColumn}>
                     <h2>
                         <span>DEPLOYMENT MODES</span> FOR EVERY ENVIRONMENT
@@ -28,6 +31,9 @@ const DeploymentModes = () => {
                         <Tabs handleTabChange={handleTabChange} />
                         <TabPanels />
                     </TabContext>
+                    <LinkFilled href="/deployment-options" target="_blank">
+                        See Details
+                    </LinkFilled>
                 </div>
             </div>
         </section>
diff --git a/src/components/Homepage/DeploymentModes/styles.module.less b/src/components/Homepage/DeploymentModes/styles.module.less
index 21df3c8e..f11b29ac 100644
--- a/src/components/Homepage/DeploymentModes/styles.module.less
+++ b/src/components/Homepage/DeploymentModes/styles.module.less
@@ -3,15 +3,12 @@
 @primaryTagColor: #6ED5D6;
 @secondaryTagColor: #5072EB;
 
-.grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-}
-
 .container {
   .globalMaxWidth;
 
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
   justify-content: space-between;
   gap: 60px;
 
@@ -47,233 +44,12 @@
   }
 }
 
-.leftColumn {
-  justify-content: center;
-  gap: 20px;
-  position: relative;
-  max-width: 536px;
-  width: 100%;
-  margin: auto;
-
-  div {
-    width: 100%;
-  }
-
-  svg {
-    min-height: 30px;
-  }
-
-  @media (max-width: 600px) {
-    svg {
-      max-width: 20px;
-      max-height: 20px;
-    }
-  }
-
-  @media (max-width: 360px) {
-    gap: 10px;
-  }
-}
-
 .rightColumn {
   @media (max-width: 360px) {
     max-width: calc(100vw - 40px);
   }
-}
-
-.solidBorderBox {
-  border: 1px solid #A4B6F4;
-  border-radius: 16px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  height: 100%;
-
-  @media (max-width: 600px) {
-    gap: 10px;
-    padding: 10px;
-  }
-
-  @media (max-width: 450px) {
-    gap: 6px;
-    padding: 6px;
-  }
-}
-
-.relativePosition {
-  position: relative;
-}
-
-.dashedBorderBox {
-  border: 1px dashed #A4B6F4B2;
-  border-radius: 12px;
-  padding: 16px;
-  background-color: #F5F7FF;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  width: 100%;
-  height: 100%;
-
-  @media (max-width: 600px) {
-    gap: 10px;
-    padding: 10px;
-  }
-
-  @media (max-width: 450px) {
-    gap: 6px;
-    padding: 6px;
-  }
-
-  span {
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 14.4px;
-
-    @media (max-width: 600px) {
-      font-size: 0.6rem;
-    }
-  }
-}
-
-.minHeight {
-  align-items: center;
-  justify-content: center;
-}
-
-.middleTag {
-  position: absolute;
-  top: 46%;
-  left: -55%;
-  text-align: center;
-  display: flex;
-  align-items: center;
-
-  span {
-    background-color: @primaryTagColor;
-    color: #FFFFFF;
-    font-size: 0.875rem;
-    font-weight: 700;
-    padding: 4px 12px;
-    white-space: nowrap;
-    min-width: 116px;
-
-    @media (max-width: 600px) {
-      min-width: 70px;
-      font-size: 0.6rem;
-      padding: 2px 0;
-    }
-  }
-}
-
-.tagArrow {
-  width: 0;
-  height: 0;
-  border-top: 14px solid transparent;
-  border-bottom: 14px solid transparent;
-
-  @media (max-width: 600px) {
-    border-top: 9px solid transparent;
-    border-bottom: 9px solid transparent;
-  }
-}
-
-.tagArrowLeft {
-  border-right: 14px solid @primaryTagColor;
-
-  @media (max-width: 600px) {
-    border-right: 9px solid @primaryTagColor;
-  }
-}
-
-.tagArrowRight {
-  border-left: 14px solid @primaryTagColor;
-
-  @media (max-width: 600px) {
-    border-left: 9px solid @primaryTagColor;
-  }
-}
 
-.horizontalWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-
-  @media (max-width: 600px) {
-    gap: 10px;
-  }
-
-  @media (max-width: 450px) {
-    gap: 6px;
-  }
-}
-
-.secondLevelSolidBorderBox {
-  border-radius: 8px;
-  background-color: #FCFCFD;
-
-  span {
-    font-weight: 500;
-  }
-}
-
-.vpcMarginBottom {
-  margin-bottom: 54px;
-
-  @media (max-width: 600px) {
-    margin-bottom: 40px;
-  }
-}
-
-.privateDeploymentVpcBox {
-  margin-bottom: 26px;
-
-  @media (max-width: 600px) {
-    margin-bottom: 25px;
-  }
-}
-
-.privateDeploymentTag {
-  @media (max-width: 600px) {
-    span {
-      padding: 2px 0;
-    }
-  }
-}
-
-.privateLinkTag {
-  top: 41%;
-  left: -2%;
-
-  @media (max-width: 600px) {
-    top: 44.5%;
-  }
-}
-
-.metadataOnlyDarkerBlueTag {
-  top: 85%;
-
-  span {
-    background-color: @secondaryTagColor;
-  }
-
-  .tagArrowLeft {
-    border-right-color: @secondaryTagColor;
-  }
-
-  .tagArrowRight {
-    border-left-color: @secondaryTagColor;
-  }
-
-  @media (max-width: 600px) {
-    span {
-      min-width: 80px;
-    }
+  a {
+    width: fit-content;
   }
 }
diff --git a/src/components/PricingPage/SectionTwo/PlanCard/index.tsx b/src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx
similarity index 100%
rename from src/components/PricingPage/SectionTwo/PlanCard/index.tsx
rename to src/components/PricingPage/ChooseYourPlan/PlanCard/index.tsx
diff --git a/src/components/PricingPage/SectionTwo/PlanCard/styles.module.less b/src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionTwo/PlanCard/styles.module.less
rename to src/components/PricingPage/ChooseYourPlan/PlanCard/styles.module.less
diff --git a/src/components/PricingPage/SectionTwo/index.tsx b/src/components/PricingPage/ChooseYourPlan/index.tsx
similarity index 95%
rename from src/components/PricingPage/SectionTwo/index.tsx
rename to src/components/PricingPage/ChooseYourPlan/index.tsx
index 050f5a3b..8288e0d8 100644
--- a/src/components/PricingPage/SectionTwo/index.tsx
+++ b/src/components/PricingPage/ChooseYourPlan/index.tsx
@@ -10,7 +10,7 @@ const planCards = plans.map((plan, index) => (
     <PlanCard key={index} {...plan} />
 ));
 
-const SectionTwo = () => {
+const ChooseYourPlan = () => {
     const isMobile = useMediaQuery('(max-width:1024px)');
 
     return (
@@ -36,4 +36,4 @@ const SectionTwo = () => {
     );
 };
 
-export default SectionTwo;
+export default ChooseYourPlan;
diff --git a/src/components/PricingPage/SectionTwo/styles.module.less b/src/components/PricingPage/ChooseYourPlan/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionTwo/styles.module.less
rename to src/components/PricingPage/ChooseYourPlan/styles.module.less
diff --git a/src/components/PricingPage/SectionTwo/utils.tsx b/src/components/PricingPage/ChooseYourPlan/utils.tsx
similarity index 100%
rename from src/components/PricingPage/SectionTwo/utils.tsx
rename to src/components/PricingPage/ChooseYourPlan/utils.tsx
diff --git a/src/components/PricingPage/SectionFour/FaqAccordion/index.tsx b/src/components/PricingPage/Faq/FaqAccordion/index.tsx
similarity index 100%
rename from src/components/PricingPage/SectionFour/FaqAccordion/index.tsx
rename to src/components/PricingPage/Faq/FaqAccordion/index.tsx
diff --git a/src/components/PricingPage/SectionFour/FaqAccordion/styles.module.less b/src/components/PricingPage/Faq/FaqAccordion/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionFour/FaqAccordion/styles.module.less
rename to src/components/PricingPage/Faq/FaqAccordion/styles.module.less
diff --git a/src/components/PricingPage/SectionFour/faqs.tsx b/src/components/PricingPage/Faq/faqs.tsx
similarity index 100%
rename from src/components/PricingPage/SectionFour/faqs.tsx
rename to src/components/PricingPage/Faq/faqs.tsx
diff --git a/src/components/PricingPage/SectionFour/index.tsx b/src/components/PricingPage/Faq/index.tsx
similarity index 95%
rename from src/components/PricingPage/SectionFour/index.tsx
rename to src/components/PricingPage/Faq/index.tsx
index d383090e..e55c5178 100644
--- a/src/components/PricingPage/SectionFour/index.tsx
+++ b/src/components/PricingPage/Faq/index.tsx
@@ -4,7 +4,7 @@ import { container, title, questionsList } from './styles.module.less';
 import FaqAccordion from './FaqAccordion';
 import { faqs } from './faqs';
 
-const SectionFour = () => {
+const Faq = () => {
     const [expanded, setExpanded] = React.useState<string | null>(null);
 
     const handleChange =
@@ -35,4 +35,4 @@ const SectionFour = () => {
     );
 };
 
-export default SectionFour;
+export default Faq;
diff --git a/src/components/PricingPage/SectionFour/styles.module.less b/src/components/PricingPage/Faq/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionFour/styles.module.less
rename to src/components/PricingPage/Faq/styles.module.less
diff --git a/src/components/PricingPage/SectionOne/index.tsx b/src/components/PricingPage/Hero/index.tsx
similarity index 95%
rename from src/components/PricingPage/SectionOne/index.tsx
rename to src/components/PricingPage/Hero/index.tsx
index 442bad8e..d36cde0b 100644
--- a/src/components/PricingPage/SectionOne/index.tsx
+++ b/src/components/PricingPage/Hero/index.tsx
@@ -17,7 +17,7 @@ import {
     buttonsContainer,
 } from './styles.module.less';
 
-const SectionOne = () => {
+const Hero = () => {
     return (
         <section className={defaultWrapperDarkBlue}>
             <div className={clsx(container, globalMaxWidth)}>
@@ -50,7 +50,7 @@ const SectionOne = () => {
                         src="../../../images/pricing/illustration.png"
                         alt="It was just one insert though."
                         quality={100}
-                        placeholder="none"
+                        placeholder="blurred"
                         loading="eager"
                     />
                 </div>
@@ -59,4 +59,4 @@ const SectionOne = () => {
     );
 };
 
-export default SectionOne;
+export default Hero;
diff --git a/src/components/PricingPage/SectionOne/styles.module.less b/src/components/PricingPage/Hero/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionOne/styles.module.less
rename to src/components/PricingPage/Hero/styles.module.less
diff --git a/src/components/PricingPage/SectionThree/index.tsx b/src/components/PricingPage/PricingCalculatorSection/index.tsx
similarity index 95%
rename from src/components/PricingPage/SectionThree/index.tsx
rename to src/components/PricingPage/PricingCalculatorSection/index.tsx
index 2d18a925..b1ec8d4e 100644
--- a/src/components/PricingPage/SectionThree/index.tsx
+++ b/src/components/PricingPage/PricingCalculatorSection/index.tsx
@@ -13,7 +13,7 @@ import {
     jumpLinkOffset,
 } from './styles.module.less';
 
-const SectionThree = () => {
+const PricingCalculatorSection = () => {
     const hasWindow = useWindowExistence();
 
     return (
@@ -47,4 +47,4 @@ const SectionThree = () => {
     );
 };
 
-export default SectionThree;
+export default PricingCalculatorSection;
diff --git a/src/components/PricingPage/SectionThree/styles.module.less b/src/components/PricingPage/PricingCalculatorSection/styles.module.less
similarity index 100%
rename from src/components/PricingPage/SectionThree/styles.module.less
rename to src/components/PricingPage/PricingCalculatorSection/styles.module.less
diff --git a/src/components/PricingPage/index.tsx b/src/components/PricingPage/index.tsx
deleted file mode 100644
index 512441ff..00000000
--- a/src/components/PricingPage/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import SectionOne from './SectionOne';
-import SectionTwo from './SectionTwo';
-import SectionThree from './SectionThree';
-import SectionFour from './SectionFour';
-
-export { SectionOne, SectionTwo, SectionThree, SectionFour };
diff --git a/src/components/Product/SectionSix/index.tsx b/src/components/ProductPage/ConfigureOrCode/index.tsx
similarity index 95%
rename from src/components/Product/SectionSix/index.tsx
rename to src/components/ProductPage/ConfigureOrCode/index.tsx
index 8a81b9f8..170ecd7f 100644
--- a/src/components/Product/SectionSix/index.tsx
+++ b/src/components/ProductPage/ConfigureOrCode/index.tsx
@@ -6,7 +6,7 @@ import { DefaultWrapperDark } from '../../../styles/wrappers';
 import Advantages from '../../Advantages';
 import { sectionSixAdvantages } from '../advantages';
 
-const SectionSix = () => {
+const ConfigureOrCode = () => {
     return (
         <DefaultWrapperDark>
             <Advantages
@@ -36,4 +36,4 @@ const SectionSix = () => {
     );
 };
 
-export default SectionSix;
+export default ConfigureOrCode;
diff --git a/src/components/Product/SectionFour/Step/index.tsx b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/index.tsx
similarity index 100%
rename from src/components/Product/SectionFour/Step/index.tsx
rename to src/components/ProductPage/CreateADataPipelineInMinutes/Step/index.tsx
diff --git a/src/components/Product/SectionFour/Step/styles.ts b/src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.ts
similarity index 100%
rename from src/components/Product/SectionFour/Step/styles.ts
rename to src/components/ProductPage/CreateADataPipelineInMinutes/Step/styles.ts
diff --git a/src/components/Product/SectionFour/index.tsx b/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
similarity index 96%
rename from src/components/Product/SectionFour/index.tsx
rename to src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
index b6232f41..9951be4f 100644
--- a/src/components/Product/SectionFour/index.tsx
+++ b/src/components/ProductPage/CreateADataPipelineInMinutes/index.tsx
@@ -14,7 +14,7 @@ import {
     VideoWrapper,
 } from './styles';
 
-const SectionFour = () => {
+const CreateADataPipelineInMinutes = () => {
     return (
         <DefaultWrapper>
             <Container>
@@ -71,4 +71,4 @@ const SectionFour = () => {
     );
 };
 
-export default SectionFour;
+export default CreateADataPipelineInMinutes;
diff --git a/src/components/Product/SectionFour/styles.ts b/src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts
similarity index 100%
rename from src/components/Product/SectionFour/styles.ts
rename to src/components/ProductPage/CreateADataPipelineInMinutes/styles.ts
diff --git a/src/components/Product/SectionNine/index.tsx b/src/components/ProductPage/DeliverRealTimeData/index.tsx
similarity index 98%
rename from src/components/Product/SectionNine/index.tsx
rename to src/components/ProductPage/DeliverRealTimeData/index.tsx
index 85461574..9451c460 100644
--- a/src/components/Product/SectionNine/index.tsx
+++ b/src/components/ProductPage/DeliverRealTimeData/index.tsx
@@ -17,7 +17,7 @@ import {
     TextWrapper,
 } from './styles';
 
-const SectionNine = () => {
+const DeliverRealTimeData = () => {
     return (
         <DefaultWrapperDarkBlue>
             <Advantages
@@ -86,4 +86,4 @@ const SectionNine = () => {
     );
 };
 
-export default SectionNine;
+export default DeliverRealTimeData;
diff --git a/src/components/Product/SectionNine/styles.ts b/src/components/ProductPage/DeliverRealTimeData/styles.ts
similarity index 100%
rename from src/components/Product/SectionNine/styles.ts
rename to src/components/ProductPage/DeliverRealTimeData/styles.ts
diff --git a/src/components/Product/SectionThirteen/index.tsx b/src/components/ProductPage/DontMissAThing/index.tsx
similarity index 96%
rename from src/components/Product/SectionThirteen/index.tsx
rename to src/components/ProductPage/DontMissAThing/index.tsx
index 4592ce03..320f41f5 100644
--- a/src/components/Product/SectionThirteen/index.tsx
+++ b/src/components/ProductPage/DontMissAThing/index.tsx
@@ -13,7 +13,7 @@ import {
     Title,
 } from './styles';
 
-const SectionThirteen = () => {
+const DontMissAThing = () => {
     return (
         <DefaultWrapperDarkBlue>
             <FormWrapper>
@@ -50,4 +50,4 @@ const SectionThirteen = () => {
     );
 };
 
-export default SectionThirteen;
+export default DontMissAThing;
diff --git a/src/components/Product/SectionThirteen/styles.ts b/src/components/ProductPage/DontMissAThing/styles.ts
similarity index 100%
rename from src/components/Product/SectionThirteen/styles.ts
rename to src/components/ProductPage/DontMissAThing/styles.ts
diff --git a/src/components/Product/SectionOne/Card/index.tsx b/src/components/ProductPage/Hero/Card/index.tsx
similarity index 100%
rename from src/components/Product/SectionOne/Card/index.tsx
rename to src/components/ProductPage/Hero/Card/index.tsx
diff --git a/src/components/Product/SectionOne/Card/styles.ts b/src/components/ProductPage/Hero/Card/styles.ts
similarity index 100%
rename from src/components/Product/SectionOne/Card/styles.ts
rename to src/components/ProductPage/Hero/Card/styles.ts
diff --git a/src/components/Product/SectionOne/index.tsx b/src/components/ProductPage/Hero/index.tsx
similarity index 98%
rename from src/components/Product/SectionOne/index.tsx
rename to src/components/ProductPage/Hero/index.tsx
index 2f6997ac..35f0bab5 100644
--- a/src/components/Product/SectionOne/index.tsx
+++ b/src/components/ProductPage/Hero/index.tsx
@@ -23,7 +23,7 @@ import {
     Title,
 } from './styles';
 
-const SectionOne = () => {
+const Hero = () => {
     return (
         <DefaultWrapperDarkBlue style={{ paddingTop: '50px' }}>
             <Container>
@@ -97,4 +97,4 @@ const SectionOne = () => {
     );
 };
 
-export default SectionOne;
+export default Hero;
diff --git a/src/components/Product/SectionOne/styles.ts b/src/components/ProductPage/Hero/styles.ts
similarity index 100%
rename from src/components/Product/SectionOne/styles.ts
rename to src/components/ProductPage/Hero/styles.ts
diff --git a/src/components/Product/SectionTwelve/index.tsx b/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx
similarity index 92%
rename from src/components/Product/SectionTwelve/index.tsx
rename to src/components/ProductPage/HowEstuaryFlowCompares/index.tsx
index 4755d3fc..8b8c0790 100644
--- a/src/components/Product/SectionTwelve/index.tsx
+++ b/src/components/ProductPage/HowEstuaryFlowCompares/index.tsx
@@ -5,7 +5,7 @@ import { DefaultWrapperDark } from '../../../styles/wrappers';
 import PipelinesTable from '../../PipelinesTable';
 import { Container, TableTitle, TableWrapper, Title } from './styles';
 
-const SectionTwelve = () => {
+const HowEstuaryFlowCompares = () => {
     return (
         <DefaultWrapperDark>
             <Container>
@@ -28,4 +28,4 @@ const SectionTwelve = () => {
     );
 };
 
-export default SectionTwelve;
+export default HowEstuaryFlowCompares;
diff --git a/src/components/Product/SectionTwelve/styles.ts b/src/components/ProductPage/HowEstuaryFlowCompares/styles.ts
similarity index 100%
rename from src/components/Product/SectionTwelve/styles.ts
rename to src/components/ProductPage/HowEstuaryFlowCompares/styles.ts
diff --git a/src/components/Product/SectionTwo/Hover/index.tsx b/src/components/ProductPage/HowItWorks/Hover/index.tsx
similarity index 100%
rename from src/components/Product/SectionTwo/Hover/index.tsx
rename to src/components/ProductPage/HowItWorks/Hover/index.tsx
diff --git a/src/components/Product/SectionTwo/Hover/styles.ts b/src/components/ProductPage/HowItWorks/Hover/styles.ts
similarity index 100%
rename from src/components/Product/SectionTwo/Hover/styles.ts
rename to src/components/ProductPage/HowItWorks/Hover/styles.ts
diff --git a/src/components/Product/SectionTwo/index.tsx b/src/components/ProductPage/HowItWorks/index.tsx
similarity index 99%
rename from src/components/Product/SectionTwo/index.tsx
rename to src/components/ProductPage/HowItWorks/index.tsx
index 78519d90..5dd2f6ad 100644
--- a/src/components/Product/SectionTwo/index.tsx
+++ b/src/components/ProductPage/HowItWorks/index.tsx
@@ -15,7 +15,7 @@ import {
     Title,
 } from './styles';
 
-const SectionTwo = () => {
+const HowItWorks = () => {
     return (
         <DefaultWrapperGrey style={{ padding: '60px 0' }}>
             <Container>
@@ -165,4 +165,4 @@ const SectionTwo = () => {
     );
 };
 
-export default SectionTwo;
+export default HowItWorks;
diff --git a/src/components/Product/SectionTwo/styles.ts b/src/components/ProductPage/HowItWorks/styles.ts
similarity index 100%
rename from src/components/Product/SectionTwo/styles.ts
rename to src/components/ProductPage/HowItWorks/styles.ts
diff --git a/src/components/Product/SectionEight/index.tsx b/src/components/ProductPage/IncreaseProductivity/index.tsx
similarity index 97%
rename from src/components/Product/SectionEight/index.tsx
rename to src/components/ProductPage/IncreaseProductivity/index.tsx
index a8c93e3f..be0974b0 100644
--- a/src/components/Product/SectionEight/index.tsx
+++ b/src/components/ProductPage/IncreaseProductivity/index.tsx
@@ -11,7 +11,7 @@ import {
     TopCaseStudy,
 } from './styles';
 
-const SectionEight = () => {
+const IncreaseProductivity = () => {
     return (
         <DefaultWrapperDark>
             <Advantages
@@ -83,4 +83,4 @@ const SectionEight = () => {
     );
 };
 
-export default SectionEight;
+export default IncreaseProductivity;
diff --git a/src/components/Product/SectionEight/styles.ts b/src/components/ProductPage/IncreaseProductivity/styles.ts
similarity index 100%
rename from src/components/Product/SectionEight/styles.ts
rename to src/components/ProductPage/IncreaseProductivity/styles.ts
diff --git a/src/components/Product/SectionThree/KeyFeature/index.tsx b/src/components/ProductPage/KeyFeatures/KeyFeature/index.tsx
similarity index 100%
rename from src/components/Product/SectionThree/KeyFeature/index.tsx
rename to src/components/ProductPage/KeyFeatures/KeyFeature/index.tsx
diff --git a/src/components/Product/SectionThree/KeyFeature/styles.ts b/src/components/ProductPage/KeyFeatures/KeyFeature/styles.ts
similarity index 100%
rename from src/components/Product/SectionThree/KeyFeature/styles.ts
rename to src/components/ProductPage/KeyFeatures/KeyFeature/styles.ts
diff --git a/src/components/Product/SectionThree/KeyFeatureContent/index.tsx b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx
similarity index 100%
rename from src/components/Product/SectionThree/KeyFeatureContent/index.tsx
rename to src/components/ProductPage/KeyFeatures/KeyFeatureContent/index.tsx
diff --git a/src/components/Product/SectionThree/KeyFeatureContent/styles.ts b/src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.ts
similarity index 100%
rename from src/components/Product/SectionThree/KeyFeatureContent/styles.ts
rename to src/components/ProductPage/KeyFeatures/KeyFeatureContent/styles.ts
diff --git a/src/components/Product/SectionThree/features.tsx b/src/components/ProductPage/KeyFeatures/features.tsx
similarity index 100%
rename from src/components/Product/SectionThree/features.tsx
rename to src/components/ProductPage/KeyFeatures/features.tsx
diff --git a/src/components/Product/SectionThree/index.tsx b/src/components/ProductPage/KeyFeatures/index.tsx
similarity index 99%
rename from src/components/Product/SectionThree/index.tsx
rename to src/components/ProductPage/KeyFeatures/index.tsx
index 89ac3115..9cfbf6ce 100644
--- a/src/components/Product/SectionThree/index.tsx
+++ b/src/components/ProductPage/KeyFeatures/index.tsx
@@ -35,7 +35,7 @@ const tooltipRightProps: Omit<HTMLTooltipProps, 'children' | 'title'> = {
     placement: 'right',
 };
 
-const SectionThree = () => {
+const KeyFeatures = () => {
     const isDesktop = useMediaQuery('(min-width:811px)');
 
     const leftFeatures = useMemo(
@@ -199,4 +199,4 @@ const SectionThree = () => {
     );
 };
 
-export default SectionThree;
+export default KeyFeatures;
diff --git a/src/components/Product/SectionThree/styles.ts b/src/components/ProductPage/KeyFeatures/styles.ts
similarity index 100%
rename from src/components/Product/SectionThree/styles.ts
rename to src/components/ProductPage/KeyFeatures/styles.ts
diff --git a/src/components/Product/SectionSeven/index.tsx b/src/components/ProductPage/ModernDataops/index.tsx
similarity index 96%
rename from src/components/Product/SectionSeven/index.tsx
rename to src/components/ProductPage/ModernDataops/index.tsx
index f2e1d689..fd41b2dd 100644
--- a/src/components/Product/SectionSeven/index.tsx
+++ b/src/components/ProductPage/ModernDataops/index.tsx
@@ -6,7 +6,7 @@ import Advantages from '../../Advantages';
 import { sectionSevenAdvantages } from '../advantages';
 import { docsPageUrl } from '../../../../shared';
 
-const SectionSeven = () => {
+const ModernDataops = () => {
     return (
         <DefaultWrapperDarkBlue>
             <Advantages
@@ -43,4 +43,4 @@ const SectionSeven = () => {
     );
 };
 
-export default SectionSeven;
+export default ModernDataops;
diff --git a/src/components/Product/SectionFourteen/index.tsx b/src/components/ProductPage/ReadyToStart/index.tsx
similarity index 97%
rename from src/components/Product/SectionFourteen/index.tsx
rename to src/components/ProductPage/ReadyToStart/index.tsx
index bf4aa89d..6352121d 100644
--- a/src/components/Product/SectionFourteen/index.tsx
+++ b/src/components/ProductPage/ReadyToStart/index.tsx
@@ -21,7 +21,7 @@ import {
     Title,
 } from './styles';
 
-const SectionFourteen = () => {
+const ReadyToStart = () => {
     return (
         <DefaultWrapperDark>
             <Container>
@@ -75,4 +75,4 @@ const SectionFourteen = () => {
     );
 };
 
-export default SectionFourteen;
+export default ReadyToStart;
diff --git a/src/components/Product/SectionFourteen/styles.ts b/src/components/ProductPage/ReadyToStart/styles.ts
similarity index 100%
rename from src/components/Product/SectionFourteen/styles.ts
rename to src/components/ProductPage/ReadyToStart/styles.ts
diff --git a/src/components/Product/SectionTen/index.tsx b/src/components/ProductPage/SecurityCertificatesSection/index.tsx
similarity index 75%
rename from src/components/Product/SectionTen/index.tsx
rename to src/components/ProductPage/SecurityCertificatesSection/index.tsx
index 8fa6c005..a6f4ec91 100644
--- a/src/components/Product/SectionTen/index.tsx
+++ b/src/components/ProductPage/SecurityCertificatesSection/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { DefaultWrapperDark } from '../../../styles/wrappers';
 import SecurityCertificates from '../../SecuriityCertificates';
 
-const SectionTen = () => {
+const SecurityCertificatesSection = () => {
     return (
         <DefaultWrapperDark>
             <SecurityCertificates />
@@ -10,4 +10,4 @@ const SectionTen = () => {
     );
 };
 
-export default SectionTen;
+export default SecurityCertificatesSection;
diff --git a/src/components/Product/SectionEleven/index.tsx b/src/components/ProductPage/Streaming/index.tsx
similarity index 98%
rename from src/components/Product/SectionEleven/index.tsx
rename to src/components/ProductPage/Streaming/index.tsx
index 9d324b25..46b4642f 100644
--- a/src/components/Product/SectionEleven/index.tsx
+++ b/src/components/ProductPage/Streaming/index.tsx
@@ -24,7 +24,7 @@ import {
     Title,
 } from './styles';
 
-const SectionEleven = () => {
+const Streaming = () => {
     return (
         <DefaultWrapperDarkBlue>
             <Container>
@@ -126,4 +126,4 @@ const SectionEleven = () => {
     );
 };
 
-export default SectionEleven;
+export default Streaming;
diff --git a/src/components/Product/SectionEleven/styles.ts b/src/components/ProductPage/Streaming/styles.ts
similarity index 100%
rename from src/components/Product/SectionEleven/styles.ts
rename to src/components/ProductPage/Streaming/styles.ts
diff --git a/src/components/Product/SectionFive/LogoAndPath/index.tsx b/src/components/ProductPage/TheSameData/LogoAndPath/index.tsx
similarity index 100%
rename from src/components/Product/SectionFive/LogoAndPath/index.tsx
rename to src/components/ProductPage/TheSameData/LogoAndPath/index.tsx
diff --git a/src/components/Product/SectionFive/LogoAndPath/styles.ts b/src/components/ProductPage/TheSameData/LogoAndPath/styles.ts
similarity index 100%
rename from src/components/Product/SectionFive/LogoAndPath/styles.ts
rename to src/components/ProductPage/TheSameData/LogoAndPath/styles.ts
diff --git a/src/components/Product/SectionFive/index.tsx b/src/components/ProductPage/TheSameData/index.tsx
similarity index 99%
rename from src/components/Product/SectionFive/index.tsx
rename to src/components/ProductPage/TheSameData/index.tsx
index e27b5093..38be305c 100644
--- a/src/components/Product/SectionFive/index.tsx
+++ b/src/components/ProductPage/TheSameData/index.tsx
@@ -27,7 +27,7 @@ import {
     Title,
 } from './styles';
 
-const SectionFive = () => {
+const TheSameData = () => {
     return (
         <DefaultWrapperDarkBlue>
             <Container>
@@ -189,4 +189,4 @@ const SectionFive = () => {
     );
 };
 
-export default SectionFive;
+export default TheSameData;
diff --git a/src/components/Product/SectionFive/styles.ts b/src/components/ProductPage/TheSameData/styles.ts
similarity index 100%
rename from src/components/Product/SectionFive/styles.ts
rename to src/components/ProductPage/TheSameData/styles.ts
diff --git a/src/components/Product/advantages.tsx b/src/components/ProductPage/advantages.tsx
similarity index 92%
rename from src/components/Product/advantages.tsx
rename to src/components/ProductPage/advantages.tsx
index 4a5e94c4..20421223 100644
--- a/src/components/Product/advantages.tsx
+++ b/src/components/ProductPage/advantages.tsx
@@ -117,18 +117,3 @@ export const sectionNineAdvantages = [
         title: 'Use built-in monitoring and alerting, and active-active load balancing and failover.',
     },
 ];
-
-export const sectionTenAdvantages = [
-    {
-        id: 14,
-        title: 'Estuary never stores your data.',
-    },
-    {
-        id: 15,
-        title: 'GDPR, CCPA and CPRA compliant.',
-    },
-    {
-        id: 16,
-        title: 'SOC 2 Type II certified.',
-    },
-];
diff --git a/src/components/SecuriityCertificates/index.tsx b/src/components/SecuriityCertificates/index.tsx
index 97997cff..767cc227 100644
--- a/src/components/SecuriityCertificates/index.tsx
+++ b/src/components/SecuriityCertificates/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
 import Advantages from '../Advantages';
-import { sectionTenAdvantages } from '../Product/advantages';
 
 interface SecurityCertificatesProps {
     isDarkTheme?: boolean;
@@ -31,7 +30,20 @@ const SecurityCertificates = ({ isDarkTheme }: SecurityCertificatesProps) => {
                     quality={100}
                 />
             }
-            advantages={sectionTenAdvantages}
+            advantages={[
+                {
+                    id: 14,
+                    title: 'Estuary never stores your data.',
+                },
+                {
+                    id: 15,
+                    title: 'GDPR, CCPA and CPRA compliant.',
+                },
+                {
+                    id: 16,
+                    title: 'SOC 2 Type II certified.',
+                },
+            ]}
             isDarkTheme={isDarkTheme}
         />
     );
diff --git a/src/components/EtlToolsXvsYPage/SectionTwo/TitledTableCell/index.tsx b/src/components/Table/TitledTableCell/index.tsx
similarity index 70%
rename from src/components/EtlToolsXvsYPage/SectionTwo/TitledTableCell/index.tsx
rename to src/components/Table/TitledTableCell/index.tsx
index 11af12ff..1cba28ea 100644
--- a/src/components/EtlToolsXvsYPage/SectionTwo/TitledTableCell/index.tsx
+++ b/src/components/Table/TitledTableCell/index.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { vendorNameMobile } from '../styles.module.less';
 
 interface TitledTableCellProps {
     title: string;
@@ -9,7 +8,7 @@ interface TitledTableCellProps {
 const TitledTableCell = ({ title, children }: TitledTableCellProps) => {
     return (
         <td>
-            <strong className={vendorNameMobile}>{title}</strong>
+            <strong>{title}</strong>
             {children}
         </td>
     );
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 00000000..918fdf7d
--- /dev/null
+++ b/src/components/Table/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import TitledTableCell from './TitledTableCell';
+import { table } from './styles.module.less';
+
+const Table = ({ headers, data }) => {
+    return (
+        <table className={table}>
+            <thead>
+                <tr>
+                    {headers.map((header, index) => (
+                        <th key={index}>{header}</th>
+                    ))}
+                </tr>
+            </thead>
+            <tbody>
+                {data.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                        {row.map((cell, cellIndex) =>
+                            cellIndex === 0 ? (
+                                <td key={cellIndex}>{cell}</td>
+                            ) : (
+                                <TitledTableCell
+                                    key={cellIndex}
+                                    title={headers[cellIndex]}
+                                >
+                                    {cell}
+                                </TitledTableCell>
+                            )
+                        )}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};
+
+export default Table;
diff --git a/src/components/Table/styles.module.less b/src/components/Table/styles.module.less
new file mode 100644
index 00000000..5bf86040
--- /dev/null
+++ b/src/components/Table/styles.module.less
@@ -0,0 +1,173 @@
+.table {
+  border: none;
+  font-size: 1rem;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: #47506D;
+  border-bottom: 1px solid #EEF1FD;
+  border-bottom-left-radius: 32px;
+  border-bottom-right-radius: 32px;
+  margin: 0;
+
+  thead th:nth-child(2) div:first-of-type {
+    border-bottom-left-radius: 16px;
+  }
+
+  thead th:last-of-type div:first-of-type {
+    border-bottom-right-radius: 16px;
+  }
+
+  th {
+    background-color: #EEF1FD;
+    color: #04192B;
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 24px;
+    border: none;
+  }
+
+  tr {
+    td:first-of-type {
+      padding-left: 48px;
+      padding-right: 12px;
+    }
+
+    td:last-of-type {
+      padding-left: 12px;
+      padding-right: 48px;
+    }
+  }
+
+  tr:first-of-type {
+    th:first-of-type {
+      border-top-left-radius: 32px;
+      padding-left: 48px;
+    }
+
+    th:last-of-type {
+      border-top-right-radius: 32px;
+      padding-right: 48px;
+    }
+
+    th:not(:first-of-type) {
+      text-align: center;
+    }
+  }
+
+  tr:last-of-type td:first-of-type {
+    border-bottom-left-radius: 32px;
+  }
+
+  tr:last-of-type td:last-of-type {
+    border-bottom-right-radius: 32px;
+  }
+
+  td {
+    background-color: #fff;
+    border: none;
+    border-top: 1px dashed #DCE3FB;
+    padding: 12px;
+    text-align: center;
+
+    p {
+      margin: 0;
+      font-size: 1rem;
+      line-height: 30px;
+    }
+  }
+
+  td:not(:first-child) {
+    border-left: none;
+  }
+
+  td:not(:last-child) {
+    border-right: none;
+  }
+
+  td:first-of-type {
+    width: 340px;
+    padding: 29px 0;
+    border-left: 1px solid #EEF1FD;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  td:last-of-type {
+    border-right: 1px solid #EEF1FD;
+  }
+
+  @media (max-width: 768px) {
+    table {
+      border-radius: 32px;
+    }
+
+    thead {
+      display: none;
+    }
+
+    th {
+      text-align: center;
+    }
+
+    tr {
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid #EEF1FD;
+      border-right: 1px solid #EEF1FD;
+    }
+
+    tr:first-of-type {
+      border-top-left-radius: 32px;
+      border-top-right-radius: 32px;
+
+      td:first-of-type {
+        border-top: 1px solid #EEF1FD;
+        border-top-left-radius: 32px;
+        border-top-right-radius: 32px;
+      }
+    }
+
+    td:first-of-type {
+      width: 100%;
+      text-align: center;
+      border-left: none;
+      background-color: #F6F8FE;
+    }
+
+    tr td:last-of-type {
+      border-right: none;
+    }
+
+    tr:last-of-type td:first-of-type {
+      border-bottom-left-radius: 0;
+    }
+
+    tr:last-of-type,
+    tr:last-of-type td:last-of-type {
+      border-bottom-left-radius: 32px;
+      border-bottom-right-radius: 32px;
+    }
+
+    tr {
+      td:first-of-type {
+        padding: 12px;
+      }
+
+      td:last-of-type {
+        padding: 12px;
+      }
+    }
+
+    strong {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 1rem;
+    }
+  }
+
+  @media (min-width: 769px) {
+    td:not(:first-child) strong {
+      display: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/images/deployment-options-page/deployment-options-meta-image.png b/src/images/deployment-options-page/deployment-options-meta-image.png
new file mode 100644
index 00000000..df706a35
Binary files /dev/null and b/src/images/deployment-options-page/deployment-options-meta-image.png differ
diff --git a/src/images/deployment-options-page/deployment-options-page-hero-background-image.png b/src/images/deployment-options-page/deployment-options-page-hero-background-image.png
new file mode 100644
index 00000000..783da64d
Binary files /dev/null and b/src/images/deployment-options-page/deployment-options-page-hero-background-image.png differ
diff --git a/src/pages/contact-us.tsx b/src/pages/contact-us.tsx
index 8b0c5611..a8213d6a 100644
--- a/src/pages/contact-us.tsx
+++ b/src/pages/contact-us.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { SectionOne, SectionTwo, SectionThree } from '../components/ContactUs';
 import Layout from '../components/Layout';
 import Seo from '../components/seo';
+import FormSection from '../components/ContactUsPage/FormSection';
+import Address from '../components/ContactUsPage/Address';
+import GetEmail from '../components/ContactUsPage/GetEmail';
 
 const ContactUsPage = () => {
     return (
         <Layout>
-            <SectionOne />
-            <SectionTwo />
-            <SectionThree />
+            <FormSection />
+            <Address />
+            <GetEmail />
         </Layout>
     );
 };
diff --git a/src/pages/deployment-options/index.tsx b/src/pages/deployment-options/index.tsx
new file mode 100644
index 00000000..5099151c
--- /dev/null
+++ b/src/pages/deployment-options/index.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import Layout from '../../components/Layout';
+import Seo from '../../components/seo';
+import Hero from '../../components/DeploymentOptionsPage/Hero';
+import PublicDeployment from '../../components/DeploymentOptionsPage/PublicDeployment';
+import PrivateDeployment from '../../components/DeploymentOptionsPage/PrivateDeployment';
+import ByocDeployment from '../../components/DeploymentOptionsPage/ByocDeployment';
+import ComparisonTable from '../../components/DeploymentOptionsPage/ComparisonTable';
+
+const DeploymentOptions = () => {
+    return (
+        <Layout>
+            <Hero />
+            <PublicDeployment />
+            <PrivateDeployment />
+            <ByocDeployment />
+            <ComparisonTable />
+        </Layout>
+    );
+};
+
+export const Head = () => {
+    const { metaImg } = useStaticQuery(graphql`
+        query {
+            metaImg: file(
+                relativePath: {
+                    eq: "deployment-options-page/deployment-options-meta-image.png"
+                }
+            ) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 536)
+                }
+            }
+        }
+    `);
+
+    return (
+        <Seo
+            title="Estuary Flow Deployment Options: Public, Private & BYOC"
+            description="Estuary Flow offers Public, Private, and BYOC deployment options for secure, scalable, and customizable data integration, perfect for any business needs."
+            image={metaImg.childImageSharp.gatsbyImageData.images.fallback.src}
+        />
+    );
+};
+
+export default DeploymentOptions;
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index f8f90a98..767150a7 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -2,20 +2,18 @@ import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import Layout from '../components/Layout';
 import Seo from '../components/seo';
-import {
-    SectionOne,
-    SectionTwo,
-    SectionThree,
-    SectionFour,
-} from '../components/PricingPage';
+import PricingCalculatorSection from '../components/PricingPage/PricingCalculatorSection';
+import Hero from '../components/PricingPage/Hero';
+import ChooseYourPlan from '../components/PricingPage/ChooseYourPlan';
+import Faq from '../components/PricingPage/Faq';
 
 const PricingPage = () => {
     return (
         <Layout>
-            <SectionOne />
-            <SectionTwo />
-            <SectionThree />
-            <SectionFour />
+            <Hero />
+            <ChooseYourPlan />
+            <PricingCalculatorSection />
+            <Faq />
         </Layout>
     );
 };
diff --git a/src/pages/product.tsx b/src/pages/product.tsx
index 3b55d117..f337cfcb 100644
--- a/src/pages/product.tsx
+++ b/src/pages/product.tsx
@@ -3,21 +3,21 @@ import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import Seo from '../components/seo';
 
-import SectionEight from '../components/Product/SectionEight';
-import SectionEleven from '../components/Product/SectionEleven';
-import SectionFive from '../components/Product/SectionFive';
-import SectionFour from '../components/Product/SectionFour';
-import SectionFourteen from '../components/Product/SectionFourteen';
-import SectionNine from '../components/Product/SectionNine';
-import SectionOne from '../components/Product/SectionOne';
-import SectionSeven from '../components/Product/SectionSeven';
-import SectionSix from '../components/Product/SectionSix';
-import SectionTen from '../components/Product/SectionTen';
-import SectionThirteen from '../components/Product/SectionThirteen';
-import SectionThree from '../components/Product/SectionThree';
-import SectionTwelve from '../components/Product/SectionTwelve';
-import SectionTwo from '../components/Product/SectionTwo';
 import Layout from '../components/Layout';
+import Hero from '../components/ProductPage/Hero';
+import HowItWorks from '../components/ProductPage/HowItWorks';
+import KeyFeatures from '../components/ProductPage/KeyFeatures';
+import ConfigureOrCode from '../components/ProductPage/ConfigureOrCode';
+import ModernDataops from '../components/ProductPage/ModernDataops';
+import CreateADataPipelineInMinutes from '../components/ProductPage/CreateADataPipelineInMinutes';
+import TheSameData from '../components/ProductPage/TheSameData';
+import IncreaseProductivity from '../components/ProductPage/IncreaseProductivity';
+import DeliverRealTimeData from '../components/ProductPage/DeliverRealTimeData';
+import Streaming from '../components/ProductPage/Streaming';
+import HowEstuaryFlowCompares from '../components/ProductPage/HowEstuaryFlowCompares';
+import DontMissAThing from '../components/ProductPage/DontMissAThing';
+import SecurityCertificatesSection from '../components/ProductPage/SecurityCertificatesSection';
+import ReadyToStart from '../components/ProductPage/ReadyToStart';
 
 const Product = () => {
     return (
@@ -27,20 +27,20 @@ const Product = () => {
                 itemScope
                 itemType="http://schema.org/Article"
             >
-                <SectionOne />
-                <SectionTwo />
-                <SectionThree />
-                <SectionFour />
-                <SectionFive />
-                <SectionSix />
-                <SectionSeven />
-                <SectionEight />
-                <SectionNine />
-                <SectionTen />
-                <SectionEleven />
-                <SectionTwelve />
-                <SectionThirteen />
-                <SectionFourteen />
+                <Hero />
+                <HowItWorks />
+                <KeyFeatures />
+                <CreateADataPipelineInMinutes />
+                <TheSameData />
+                <ConfigureOrCode />
+                <ModernDataops />
+                <IncreaseProductivity />
+                <DeliverRealTimeData />
+                <SecurityCertificatesSection />
+                <Streaming />
+                <HowEstuaryFlowCompares />
+                <DontMissAThing />
+                <ReadyToStart />
             </article>
         </Layout>
     );
diff --git a/src/svgs/private-deployments-icon.svg b/src/svgs/private-deployments-icon.svg
new file mode 100644
index 00000000..373b3af2
--- /dev/null
+++ b/src/svgs/private-deployments-icon.svg
@@ -0,0 +1,7 @@
+<svg width="46" height="45" viewBox="0 0 46 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.75 8.24987C35.0555 8.24887 34.3632 8.32943 33.6875 8.48987C32.9477 6.23911 31.5162 4.27935 29.5971 2.89001C27.678 1.50068 25.3692 0.752686 23 0.752686C20.6308 0.752686 18.322 1.50068 16.4029 2.89001C14.4838 4.27935 13.0523 6.23911 12.3125 8.48987C11.6368 8.32943 10.9445 8.24887 10.25 8.24987C7.86305 8.24987 5.57387 9.19809 3.88604 10.8859C2.19821 12.5737 1.25 14.8629 1.25 17.2499C1.25 19.6368 2.19821 21.926 3.88604 23.6138C5.57387 25.3017 7.86305 26.2499 10.25 26.2499H11.75V24.7499C11.75 23.9542 12.0661 23.1912 12.6287 22.6286C13.1913 22.0659 13.9544 21.7499 14.75 21.7499H15.5V17.2499C15.5 15.2608 16.2902 13.3531 17.6967 11.9466C19.1032 10.5401 21.0109 9.74988 23 9.74987C24.9891 9.74987 26.8968 10.5401 28.3033 11.9466C29.7098 13.3531 30.5 15.2608 30.5 17.2499V21.7499H31.25C32.0456 21.7499 32.8087 22.0659 33.3713 22.6286C33.9339 23.1912 34.25 23.9542 34.25 24.7499V26.2499H35.75C38.1369 26.2499 40.4261 25.3017 42.114 23.6138C43.8018 21.926 44.75 19.6368 44.75 17.2499C44.75 14.8629 43.8018 12.5737 42.114 10.8859C40.4261 9.19809 38.1369 8.24987 35.75 8.24987Z" fill="#B8C7F7"/>
+<path d="M31.25 21.7498H14.75C13.9544 21.7498 13.1913 22.0658 12.6287 22.6284C12.0661 23.191 11.75 23.9541 11.75 24.7498V41.2498C11.75 42.0454 12.0661 42.8085 12.6287 43.3711C13.1913 43.9337 13.9544 44.2498 14.75 44.2498H31.25C32.0456 44.2498 32.8087 43.9337 33.3713 43.3711C33.9339 42.8085 34.25 42.0454 34.25 41.2498V24.7498C34.25 23.9541 33.9339 23.191 33.3713 22.6284C32.8087 22.0658 32.0456 21.7498 31.25 21.7498ZM24.5 32.5948V37.4998C24.5 37.8976 24.342 38.2791 24.0607 38.5604C23.7794 38.8417 23.3978 38.9998 23 38.9998C22.6022 38.9998 22.2206 38.8417 21.9393 38.5604C21.658 38.2791 21.5 37.8976 21.5 37.4998V32.5948C20.9281 32.2646 20.4811 31.7549 20.2284 31.1447C19.9756 30.5346 19.9313 29.8581 20.1022 29.2202C20.2731 28.5823 20.6498 28.0186 21.1737 27.6166C21.6976 27.2146 22.3396 26.9967 23 26.9967C23.6604 26.9967 24.3024 27.2146 24.8263 27.6166C25.3502 28.0186 25.7269 28.5823 25.8978 29.2202C26.0687 29.8581 26.0244 30.5346 25.7716 31.1447C25.5189 31.7549 25.0719 32.2646 24.5 32.5948Z" fill="#B8C7F7"/>
+<path d="M23 12.7498C21.8069 12.7509 20.663 13.2254 19.8193 14.0691C18.9757 14.9127 18.5012 16.0566 18.5 17.2498V21.7498H27.5V17.2498C27.4988 16.0566 27.0243 14.9127 26.1807 14.0691C25.337 13.2254 24.1931 12.7509 23 12.7498Z" fill="#B8C7F7"/>
+<path d="M35.0132 29.9999H41.1257C41.3026 30.5003 41.6507 30.9221 42.1086 31.1907C42.5664 31.4592 43.1044 31.5573 43.6275 31.4675C44.1506 31.3778 44.6252 31.106 44.9673 30.7002C45.3094 30.2944 45.497 29.7807 45.497 29.2499C45.497 28.7192 45.3094 28.2055 44.9673 27.7997C44.6252 27.3939 44.1506 27.1221 43.6275 27.0323C43.1044 26.9426 42.5664 27.0406 42.1086 27.3092C41.6507 27.5778 41.3026 27.9995 41.1257 28.4999H35.0132C35.0057 28.4999 34.9982 28.5074 34.9907 28.5074V26.9999H35.7407C38.3266 26.9999 40.8065 25.9727 42.635 24.1442C44.4635 22.3157 45.4907 19.8358 45.4907 17.2499C45.4907 14.6641 44.4635 12.1841 42.635 10.3556C40.8065 8.52716 38.3266 7.49993 35.7407 7.49993C35.2132 7.50078 34.6865 7.54341 34.1657 7.62743C33.2862 5.37965 31.7493 3.44935 29.7556 2.08862C27.762 0.727896 25.4044 0 22.9907 0C20.577 0 18.2194 0.727896 16.2257 2.08862C14.2321 3.44935 12.6952 5.37965 11.8157 7.62743C11.2949 7.54341 10.7682 7.50078 10.2407 7.49993C7.65483 7.49993 5.17488 8.52716 3.3464 10.3556C1.51792 12.1841 0.490695 14.6641 0.490695 17.2499C0.490695 19.8358 1.51792 22.3157 3.3464 24.1442C5.17488 25.9727 7.65483 26.9999 10.2407 26.9999H10.9907V28.5074C10.9832 28.5074 10.9757 28.4999 10.9682 28.4999H4.8557C4.67877 27.9995 4.33064 27.5778 3.87284 27.3092C3.41503 27.0406 2.87702 26.9426 2.3539 27.0323C1.83077 27.1221 1.35622 27.3939 1.01412 27.7997C0.67201 28.2055 0.484375 28.7192 0.484375 29.2499C0.484375 29.7807 0.67201 30.2944 1.01412 30.7002C1.35622 31.106 1.83077 31.3778 2.3539 31.4675C2.87702 31.5573 3.41503 31.4592 3.87284 31.1907C4.33064 30.9221 4.67877 30.5003 4.8557 29.9999H10.9682C10.9757 29.9999 10.9832 29.9924 10.9907 29.9924V34.5074C10.9832 34.5074 10.9757 34.4999 10.9682 34.4999H7.8557C7.67877 33.9995 7.33064 33.5778 6.87284 33.3092C6.41503 33.0406 5.87702 32.9426 5.3539 33.0323C4.83077 33.1221 4.35622 33.3939 4.01412 33.7997C3.67201 34.2055 3.48438 34.7192 3.48438 35.2499C3.48438 35.7807 3.67201 36.2944 4.01412 36.7002C4.35622 37.106 4.83077 37.3778 5.3539 37.4675C5.87702 37.5573 6.41503 37.4592 6.87284 37.1907C7.33064 36.9221 7.67877 36.5003 7.8557 35.9999H10.9682C10.9757 35.9999 10.9832 35.9924 10.9907 35.9924V40.5074C10.9832 40.5074 10.9757 40.4999 10.9682 40.4999H4.8557C4.67877 39.9995 4.33064 39.5778 3.87284 39.3092C3.41503 39.0406 2.87702 38.9426 2.3539 39.0323C1.83077 39.1221 1.35622 39.3939 1.01412 39.7997C0.67201 40.2055 0.484375 40.7192 0.484375 41.2499C0.484375 41.7807 0.67201 42.2944 1.01412 42.7002C1.35622 43.106 1.83077 43.3778 2.3539 43.4675C2.87702 43.5573 3.41503 43.4592 3.87284 43.1907C4.33064 42.9221 4.67877 42.5003 4.8557 41.9999H10.9682C11.0014 41.996 11.0341 41.9885 11.0657 41.9774C11.234 42.8286 11.6923 43.5951 12.3624 44.1462C13.0325 44.6973 13.873 44.9991 14.7407 44.9999H31.2407C32.1084 44.9991 32.9489 44.6973 33.619 44.1462C34.2891 43.5951 34.7474 42.8286 34.9157 41.9774C34.9473 41.9885 34.98 41.996 35.0132 41.9999H41.1257C41.3026 42.5003 41.6507 42.9221 42.1086 43.1907C42.5664 43.4592 43.1044 43.5573 43.6275 43.4675C44.1506 43.3778 44.6252 43.106 44.9673 42.7002C45.3094 42.2944 45.497 41.7807 45.497 41.2499C45.497 40.7192 45.3094 40.2055 44.9673 39.7997C44.6252 39.3939 44.1506 39.1221 43.6275 39.0323C43.1044 38.9426 42.5664 39.0406 42.1086 39.3092C41.6507 39.5778 41.3026 39.9995 41.1257 40.4999H35.0132C35.0057 40.4999 34.9982 40.5074 34.9907 40.5074V35.9924C34.9982 35.9924 35.0057 35.9999 35.0132 35.9999H38.1257C38.3026 36.5003 38.6507 36.9221 39.1086 37.1907C39.5664 37.4592 40.1044 37.5573 40.6275 37.4675C41.1506 37.3778 41.6252 37.106 41.9673 36.7002C42.3094 36.2944 42.497 35.7807 42.497 35.2499C42.497 34.7192 42.3094 34.2055 41.9673 33.7997C41.6252 33.3939 41.1506 33.1221 40.6275 33.0323C40.1044 32.9426 39.5664 33.0406 39.1086 33.3092C38.6507 33.5778 38.3026 33.9995 38.1257 34.4999H35.0132C35.0057 34.4999 34.9982 34.5074 34.9907 34.5074V29.9924C34.9982 29.9924 35.0057 29.9999 35.0132 29.9999ZM43.2407 28.4999C43.389 28.4999 43.534 28.5439 43.6574 28.6263C43.7807 28.7087 43.8768 28.8259 43.9336 28.9629C43.9904 29.1 44.0052 29.2508 43.9763 29.3962C43.9473 29.5417 43.8759 29.6754 43.771 29.7803C43.6661 29.8852 43.5325 29.9566 43.387 29.9855C43.2415 30.0145 43.0907 29.9996 42.9537 29.9428C42.8166 29.8861 42.6995 29.7899 42.6171 29.6666C42.5347 29.5433 42.4907 29.3983 42.4907 29.2499C42.4907 29.051 42.5697 28.8603 42.7104 28.7196C42.851 28.5789 43.0418 28.4999 43.2407 28.4999ZM2.7407 29.9999C2.59236 29.9999 2.44735 29.9559 2.32402 29.8735C2.20068 29.7911 2.10455 29.674 2.04779 29.5369C1.99102 29.3999 1.97617 29.2491 2.00511 29.1036C2.03405 28.9581 2.10548 28.8245 2.21037 28.7196C2.31525 28.6147 2.44889 28.5433 2.59438 28.5143C2.73986 28.4854 2.89066 28.5003 3.02771 28.557C3.16475 28.6138 3.28189 28.7099 3.3643 28.8333C3.44671 28.9566 3.4907 29.1016 3.4907 29.2499C3.4907 29.4488 3.41168 29.6396 3.27103 29.7803C3.13037 29.9209 2.93961 29.9999 2.7407 29.9999ZM5.7407 35.9999C5.59236 35.9999 5.44735 35.9559 5.32402 35.8735C5.20068 35.7911 5.10455 35.674 5.04779 35.5369C4.99102 35.3999 4.97617 35.2491 5.00511 35.1036C5.03405 34.9581 5.10548 34.8245 5.21037 34.7196C5.31526 34.6147 5.44889 34.5433 5.59438 34.5143C5.73986 34.4854 5.89066 34.5003 6.02771 34.557C6.16475 34.6138 6.28189 34.7099 6.3643 34.8333C6.44671 34.9566 6.4907 35.1016 6.4907 35.2499C6.4907 35.4488 6.41168 35.6396 6.27103 35.7803C6.13037 35.9209 5.93961 35.9999 5.7407 35.9999ZM2.7407 41.9999C2.59236 41.9999 2.44735 41.9559 2.32402 41.8735C2.20068 41.7911 2.10455 41.674 2.04779 41.5369C1.99102 41.3999 1.97617 41.2491 2.00511 41.1036C2.03405 40.9581 2.10548 40.8245 2.21037 40.7196C2.31525 40.6147 2.44889 40.5433 2.59438 40.5143C2.73986 40.4854 2.89066 40.5003 3.02771 40.557C3.16475 40.6138 3.28189 40.7099 3.3643 40.8333C3.44671 40.9566 3.4907 41.1016 3.4907 41.2499C3.4907 41.4488 3.41168 41.6396 3.27103 41.7803C3.13037 41.9209 2.93961 41.9999 2.7407 41.9999ZM43.2407 40.4999C43.389 40.4999 43.534 40.5439 43.6574 40.6263C43.7807 40.7087 43.8768 40.8259 43.9336 40.9629C43.9904 41.1 44.0052 41.2508 43.9763 41.3963C43.9473 41.5417 43.8759 41.6754 43.771 41.7803C43.6661 41.8852 43.5325 41.9566 43.387 41.9855C43.2415 42.0145 43.0907 41.9996 42.9537 41.9428C42.8166 41.8861 42.6995 41.7899 42.6171 41.6666C42.5347 41.5433 42.4907 41.3983 42.4907 41.2499C42.4907 41.051 42.5697 40.8603 42.7104 40.7196C42.851 40.5789 43.0418 40.4999 43.2407 40.4999ZM40.2407 34.4999C40.389 34.4999 40.534 34.5439 40.6574 34.6263C40.7807 34.7087 40.8768 34.8259 40.9336 34.9629C40.9904 35.1 41.0052 35.2508 40.9763 35.3962C40.9473 35.5417 40.8759 35.6754 40.771 35.7803C40.6661 35.8852 40.5325 35.9566 40.387 35.9855C40.2415 36.0145 40.0907 35.9996 39.9537 35.9428C39.8166 35.8861 39.6995 35.7899 39.6171 35.6666C39.5347 35.5433 39.4907 35.3983 39.4907 35.2499C39.4907 35.051 39.5697 34.8603 39.7104 34.7196C39.851 34.5789 40.0418 34.4999 40.2407 34.4999ZM33.4907 41.2499C33.4889 41.8461 33.2513 42.4174 32.8297 42.839C32.4081 43.2605 31.8369 43.4981 31.2407 43.4999H14.7407C14.1445 43.4981 13.5732 43.2605 13.1517 42.839C12.7301 42.4174 12.4925 41.8461 12.4907 41.2499V24.7499C12.4925 24.1537 12.7301 23.5825 13.1517 23.1609C13.5732 22.7393 14.1445 22.5017 14.7407 22.4999H31.2407C31.8369 22.5017 32.4081 22.7393 32.8297 23.1609C33.2513 23.5825 33.4889 24.1537 33.4907 24.7499V41.2499ZM22.9907 11.9999C21.5988 12.0015 20.2644 12.5552 19.2801 13.5394C18.2959 14.5236 17.7423 15.858 17.7407 17.2499V20.9999H16.2407V17.2499C16.2407 15.4597 16.9519 13.7428 18.2177 12.477C19.4836 11.2111 21.2005 10.4999 22.9907 10.4999C24.7809 10.4999 26.4978 11.2111 27.7637 12.477C29.0295 13.7428 29.7407 15.4597 29.7407 17.2499V20.9999H28.2407V17.2499C28.2391 15.858 27.6855 14.5236 26.7013 13.5394C25.717 12.5552 24.3826 12.0015 22.9907 11.9999ZM26.7407 17.2499V20.9999H19.2407V17.2499C19.2407 16.2554 19.6358 15.3015 20.339 14.5983C21.0423 13.895 21.9961 13.4999 22.9907 13.4999C23.9853 13.4999 24.9391 13.895 25.6423 14.5983C26.3456 15.3015 26.7407 16.2554 26.7407 17.2499ZM31.2407 20.9999V17.2499C31.2407 15.0619 30.3715 12.9635 28.8243 11.4163C27.2772 9.86912 25.1787 8.99993 22.9907 8.99993C20.8027 8.99993 18.7042 9.86912 17.1571 11.4163C15.6099 12.9635 14.7407 15.0619 14.7407 17.2499V20.9999C13.7461 20.9999 12.7923 21.395 12.089 22.0983C11.3858 22.8015 10.9907 23.7554 10.9907 24.7499V25.4999H10.2407C8.05266 25.4999 5.95424 24.6307 4.40706 23.0836C2.85989 21.5364 1.9907 19.438 1.9907 17.2499C1.9907 15.0619 2.85989 12.9635 4.40706 11.4163C5.95424 9.86912 8.05266 8.99993 10.2407 8.99993C10.8769 9.00017 11.511 9.07314 12.1307 9.21743C12.3134 9.26067 12.5057 9.23381 12.6695 9.14216C12.8334 9.05051 12.9569 8.90074 13.0157 8.72243C13.7062 6.62171 15.0422 4.79261 16.8334 3.49589C18.6246 2.19918 20.7794 1.50105 22.9907 1.50105C25.202 1.50105 27.3568 2.19918 29.148 3.49589C30.9392 4.79261 32.2752 6.62171 32.9657 8.72243C33.0245 8.90074 33.148 9.05051 33.3119 9.14216C33.4757 9.23381 33.668 9.26067 33.8507 9.21743C34.4703 9.07314 35.1045 9.00017 35.7407 8.99993C37.9287 8.99993 40.0272 9.86912 41.5743 11.4163C43.1215 12.9635 43.9907 15.0619 43.9907 17.2499C43.9907 19.438 43.1215 21.5364 41.5743 23.0836C40.0272 24.6307 37.9287 25.4999 35.7407 25.4999H34.9907V24.7499C34.9907 24.2575 34.8937 23.7698 34.7052 23.3149C34.5168 22.8599 34.2406 22.4465 33.8923 22.0983C33.5441 21.7501 33.1307 21.4738 32.6758 21.2854C32.2208 21.0969 31.7332 20.9999 31.2407 20.9999Z" fill="#5072EB"/>
+<path d="M23.9098 26.3579C23.3531 26.2212 22.7725 26.2131 22.2122 26.3342C21.6518 26.4553 21.1264 26.7025 20.6758 27.0569C20.2252 27.4129 19.8623 27.8675 19.6151 28.3859C19.3679 28.9043 19.2431 29.4725 19.2503 30.0467C19.2575 30.6209 19.3964 31.1859 19.6565 31.6979C19.9165 32.2099 20.2907 32.6554 20.7501 32.9999V37.4999C20.7501 38.0967 20.9872 38.669 21.4091 39.0909C21.8311 39.5129 22.4034 39.7499 23.0001 39.7499C23.5968 39.7499 24.1691 39.5129 24.5911 39.0909C25.013 38.669 25.2501 38.0967 25.2501 37.4999V32.9999C25.8436 32.5546 26.292 31.9435 26.5388 31.2438C26.7856 30.544 26.8197 29.7868 26.6368 29.0677C26.4732 28.41 26.1325 27.8097 25.6518 27.332C25.171 26.8543 24.5686 26.5174 23.9098 26.3579ZM24.1258 31.9447C24.0117 32.0106 23.917 32.1054 23.8511 32.2195C23.7853 32.3337 23.7507 32.4632 23.7508 32.5949V37.4999C23.7508 37.6988 23.6718 37.8896 23.5312 38.0303C23.3905 38.1709 23.1998 38.2499 23.0008 38.2499C22.8019 38.2499 22.6112 38.1709 22.4705 38.0303C22.3299 37.8896 22.2508 37.6988 22.2508 37.4999V32.5949C22.251 32.4632 22.2164 32.3337 22.1506 32.2195C22.0847 32.1054 21.99 32.0106 21.8758 31.9447C21.5584 31.7608 21.2908 31.502 21.0963 31.191C20.9017 30.88 20.7862 30.5261 20.7597 30.1602C20.7332 29.7943 20.7966 29.4275 20.9444 29.0917C21.0921 28.7559 21.3197 28.4614 21.6073 28.2337C22.0016 27.9192 22.4913 27.7485 22.9956 27.7499C23.1869 27.7503 23.3774 27.7732 23.5633 27.8182C23.9521 27.9151 24.3074 28.1152 24.5919 28.3973C24.8764 28.6794 25.0794 29.033 25.1796 29.4209C25.3031 29.899 25.2669 30.4044 25.0765 30.86C24.8861 31.3156 24.5528 31.6965 24.1258 31.9447Z" fill="#5072EB"/>
+</svg>
diff --git a/src/svgs/public-deployments-icon.svg b/src/svgs/public-deployments-icon.svg
new file mode 100644
index 00000000..3343ba1d
--- /dev/null
+++ b/src/svgs/public-deployments-icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.0625 24.1364H14.3361V25.8578H12.6298C12.1097 25.8588 11.6113 26.0659 11.2437 26.4337C10.876 26.8016 10.6693 27.3002 10.6687 27.8203V28.4159C10.6686 28.5172 10.6885 28.6175 10.7272 28.7111C10.7659 28.8047 10.8226 28.8897 10.8942 28.9614C10.9658 29.033 11.0507 29.0899 11.1443 29.1287C11.2378 29.1675 11.3381 29.1875 11.4394 29.1876H20.5606C20.6619 29.1875 20.7621 29.1675 20.8557 29.1287C20.9492 29.0899 21.0342 29.033 21.1057 28.9614C21.1773 28.8898 21.234 28.8047 21.2727 28.7112C21.3114 28.6176 21.3313 28.5173 21.3312 28.4161V27.8204C21.3307 27.3004 21.1239 26.8017 20.7563 26.4339C20.3887 26.066 19.8902 25.8589 19.3701 25.8579H17.6645V24.1364H29.9375C30.4514 24.1357 30.944 23.9311 31.3072 23.5676C31.6704 23.2041 31.8746 22.7113 31.875 22.1974V2.75718C31.8747 2.24328 31.6705 1.75051 31.3072 1.38699C30.944 1.02346 30.4514 0.818877 29.9375 0.818115H2.0625C1.54861 0.818877 1.056 1.02346 0.692769 1.38699C0.329538 1.75051 0.125347 2.24328 0.125 2.75718V22.1974C0.125364 22.7113 0.329561 23.2041 0.692791 23.5676C1.05602 23.9311 1.54862 24.1357 2.0625 24.1364Z" fill="#B8C7F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4718 16.1852C11.0245 16.9931 10.2357 17.4206 9.31756 17.3705C9.26569 16.4506 9.69169 15.6632 10.5005 15.2151C10.9906 14.9644 11.4099 14.7521 11.7531 14.587L12.0999 14.932C11.9339 15.277 11.723 15.6957 11.4718 16.1852ZM10.2151 10.9779C10.0913 11.0074 9.95737 11.0369 9.85569 11.0546C9.83387 10.8953 9.81763 10.6417 9.8005 10.3941C9.77987 10.0756 9.7545 9.68643 9.70763 9.19693C10.2018 8.30318 11.5319 7.69905 13.6683 7.38943C13.6355 7.44843 13.6025 7.50443 13.5706 7.56043C13.5686 7.56343 13.5662 7.5693 13.5644 7.57224C12.9631 8.73993 12.4398 9.7778 11.9987 10.6742C11.3988 10.7409 10.8032 10.8423 10.2151 10.9779H10.2151ZM22.5858 4.10168C19.1233 3.58574 16.1006 5.03918 14.4508 8.03518C13.5367 9.81318 12.8042 11.2816 12.2706 12.408L14.2786 14.416C15.4061 13.8823 16.8742 13.1511 18.6505 12.2369C21.6475 10.5857 23.1011 7.56343 22.5858 4.10168ZM17.4882 16.9784C17.0007 16.9312 16.6112 16.9076 16.2931 16.8869C16.0445 16.8692 15.7901 16.8516 15.6311 16.8307C15.6494 16.7307 15.6795 16.5947 15.7075 16.4709C15.8452 15.8832 15.9472 15.2876 16.013 14.6876C16.9094 14.2453 17.943 13.7234 19.1138 13.1219C19.1184 13.1212 19.1228 13.1191 19.1262 13.1159C19.1838 13.0836 19.2395 13.0511 19.2964 13.0187C18.9883 15.1534 18.382 16.4862 17.4883 16.9787L17.4882 16.9784ZM11.6458 13.5284C11.2444 13.7171 10.7031 13.9854 10.0367 14.3304C10.0323 14.3312 10.0282 14.3333 10.0249 14.3363C8.73256 15.0469 8.10125 16.4151 8.3775 17.9071C8.39552 18.0068 8.44355 18.0986 8.51517 18.1703C8.58678 18.2419 8.67857 18.29 8.77825 18.3081C9.00442 18.3512 9.23414 18.3729 9.46437 18.373C10.0561 18.3797 10.6382 18.2238 11.1474 17.9222C11.6565 17.6206 12.073 17.1849 12.3514 16.6628C12.3531 16.6566 12.3555 16.6539 12.3576 16.648C12.7 15.9846 12.9689 15.4417 13.157 15.0411C13.1994 14.95 13.213 14.8482 13.1962 14.7491L13.8201 15.3713C13.8663 15.4181 13.9214 15.4552 13.9821 15.4805C14.0428 15.5058 14.1079 15.5188 14.1737 15.5187C14.247 15.519 14.3194 15.5029 14.3857 15.4716C14.5594 15.389 14.7436 15.3035 14.9357 15.2121C14.8682 15.6455 14.7927 15.9787 14.7313 16.2529C14.6108 16.7925 14.5303 17.1493 14.7676 17.4677C15.0194 17.8039 15.4234 17.8302 16.2274 17.8835C16.5689 17.9071 16.9938 17.9335 17.5331 17.9897H17.5838C17.6561 17.9899 17.7277 17.9749 17.7938 17.9456C19.2271 17.2821 20.0784 15.4274 20.3927 12.2783C21.4237 11.477 22.2575 10.4502 22.8302 9.27662C23.6529 7.58112 23.8879 5.60855 23.5114 3.57693C23.493 3.47743 23.4448 3.38587 23.3732 3.31429C23.3017 3.24271 23.2102 3.19447 23.1107 3.17593C21.0776 2.79849 19.1056 3.03436 17.4101 3.85718C16.2358 4.42952 15.2086 5.26378 14.4076 6.29568C11.2593 6.60818 9.40438 7.46037 8.74206 8.89343C8.70415 8.97432 8.68903 9.06402 8.69831 9.15287C8.75288 9.69249 8.78094 10.1171 8.80331 10.4591C8.85637 11.2641 8.88294 11.6681 9.21906 11.9187C9.35983 12.0239 9.53228 12.078 9.70794 12.0721C9.91288 12.0721 10.1479 12.0189 10.4339 11.9541C10.7072 11.8951 11.0428 11.8184 11.4759 11.7506C11.3839 11.9423 11.2972 12.1281 11.2159 12.302C11.1723 12.3947 11.1585 12.4985 11.1763 12.5994C11.1941 12.7002 11.2426 12.7931 11.3153 12.8652L11.9389 13.4902C11.8396 13.475 11.7381 13.4883 11.6461 13.5286L11.6458 13.5284ZM15.3357 11.3494C15.2893 11.3032 15.2525 11.2482 15.2274 11.1878C15.2022 11.1273 15.1893 11.0625 15.1893 10.997C15.1893 10.9315 15.2022 10.8667 15.2274 10.8062C15.2525 10.7457 15.2893 10.6908 15.3357 10.6446L17.7763 8.20318C17.8701 8.10945 17.9973 8.05684 18.13 8.05692C18.2626 8.057 18.3898 8.10977 18.4835 8.20362C18.5772 8.29746 18.6298 8.4247 18.6298 8.55733C18.6297 8.68997 18.5769 8.81714 18.4831 8.91086L16.0424 11.3494C15.9962 11.3961 15.9412 11.4332 15.8805 11.4585C15.8199 11.4838 15.7548 11.4968 15.6891 11.4968C15.6233 11.4968 15.5583 11.4838 15.4976 11.4585C15.437 11.4332 15.3819 11.3961 15.3357 11.3494ZM19.6625 6.2483C19.7392 6.17169 19.8368 6.11954 19.9432 6.09842C20.0495 6.07731 20.1597 6.0882 20.2598 6.1297C20.3599 6.1712 20.4455 6.24145 20.5057 6.33158C20.5659 6.42171 20.598 6.52766 20.598 6.63605C20.598 6.74444 20.5659 6.8504 20.5057 6.94053C20.4455 7.03065 20.3599 7.10091 20.2598 7.14241C20.1597 7.18391 20.0495 7.19479 19.9432 7.17368C19.8368 7.15257 19.7392 7.10041 19.6625 7.0238C19.6115 6.97295 19.571 6.91253 19.5433 6.84599C19.5157 6.77945 19.5015 6.7081 19.5015 6.63605C19.5015 6.564 19.5157 6.49266 19.5433 6.42612C19.571 6.35958 19.6115 6.29915 19.6625 6.2483ZM20.05 8.18262C19.6922 8.18197 19.3457 8.05729 19.0695 7.82982C18.7933 7.60234 18.6046 7.28614 18.5354 6.9351C18.4662 6.58405 18.5209 6.21987 18.6901 5.90462C18.8593 5.58937 19.1326 5.34254 19.4634 5.20619C19.7942 5.06984 20.1621 5.05241 20.5043 5.15687C20.8465 5.26132 21.1419 5.4812 21.3402 5.77904C21.5384 6.07688 21.6273 6.43425 21.5916 6.79027C21.5559 7.14629 21.3979 7.47892 21.1445 7.73149C20.8539 8.02105 20.4602 8.18332 20.05 8.18262ZM2.0625 1.69568C1.78088 1.69568 1.51078 1.80748 1.31155 2.00652C1.11232 2.20556 1.00027 2.47556 1 2.75718V19.6793H31V2.75718C30.9997 2.47556 30.8877 2.20556 30.6884 2.00652C30.4892 1.80748 30.2191 1.69568 29.9375 1.69568H2.0625ZM29.9375 23.2619H2.0625C1.78057 23.2612 1.51039 23.1488 1.31121 22.9493C1.11203 22.7497 1.00012 22.4794 1 22.1974V20.6787H31V22.1974C30.9999 22.4794 30.888 22.7497 30.6888 22.9493C30.4896 23.1488 30.2194 23.2612 29.9375 23.2619ZM16.7894 25.7328H15.2113V24.2614H16.7894V25.7328ZM20.4562 27.8203V28.3126H11.5437V27.8202C11.5442 27.5323 11.6588 27.2564 11.8625 27.053C12.0661 26.8495 12.3421 26.7352 12.63 26.7351H19.37C19.6579 26.7352 19.9339 26.8495 20.1375 27.053C20.3412 27.2564 20.4558 27.5323 20.4562 27.8202V27.8203ZM2.0625 24.2614H14.2111V25.7328H12.6298C12.0766 25.7338 11.5463 25.9541 11.1553 26.3454C10.7642 26.7367 10.5443 27.2671 10.5437 27.8203V28.4159C10.5436 28.6536 10.6379 28.8816 10.8058 29.0497C10.9738 29.2179 11.2017 29.3124 11.4394 29.3126H20.5606C20.7983 29.3124 21.0261 29.2179 21.1941 29.0498C21.362 28.8816 21.4563 28.6537 21.4562 28.4161V27.8204C21.4556 27.2672 21.2357 26.7368 20.8446 26.3455C20.4536 25.9542 19.9233 25.7339 19.3701 25.7329H17.7895V24.2614H29.9375C30.4845 24.2607 31.0089 24.0429 31.3956 23.6559C31.7822 23.269 31.9996 22.7445 32 22.1974V2.75718C31.9996 2.21014 31.7823 1.68558 31.3956 1.29862C31.0089 0.911656 30.4845 0.693893 29.9375 0.693115H2.0625C1.51546 0.693893 0.991069 0.911656 0.604399 1.29862C0.217729 1.68558 0.000363623 2.21014 0 2.75718L0 22.1974C0.000380168 22.7445 0.217753 23.269 0.604421 23.6559C0.99109 24.0429 1.51547 24.2607 2.0625 24.2614Z" fill="#5072EB"/>
+</svg>