diff --git a/src/components/accounts/dashboard/SideContent.js b/src/components/accounts/dashboard/SideContent.js
index a8f0dfafd..baf0e9ee0 100644
--- a/src/components/accounts/dashboard/SideContent.js
+++ b/src/components/accounts/dashboard/SideContent.js
@@ -4,12 +4,14 @@ import React, { memo, useEffect, useState } from 'react';
 import * as helpers from 'utils';
 import ZMyListItem from './ui/ZMyListItem';
 import ZSideListContent from './ui/ZSideListContent';
+import { useTheme } from '@mui/material/styles';
 
 import { TOTAL_INSTANCES_LIMIT, TOTAL_TEAMS_LIMIT } from '.';
 
 function SideContent({ initialInstances, unfilteredTotalInstances, teams }) {
   const [filteredInstances, setFilteredInstances] = useState([]);
-
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
   function onChange(e) {
     if (e?.target?.value) {
       handleSearchInstances(e.target.value.toLocaleLowerCase());
@@ -66,7 +68,12 @@ function SideContent({ initialInstances, unfilteredTotalInstances, teams }) {
             color="primary"
             placeholder="Search an Instances"
             onChange={onChange}
-            sx={{ mb: 2 }}
+            sx={{
+              mb: 2,
+              '& .MuiInputBase-root': {
+                bgcolor: isDarkMode && 'transparent',
+              },
+            }}
           />
         }
       >
diff --git a/src/components/accounts/instances/InstanceDashboardV2.js b/src/components/accounts/instances/InstanceDashboardV2.js
index a2dc3a7a5..bfd86c962 100644
--- a/src/components/accounts/instances/InstanceDashboardV2.js
+++ b/src/components/accounts/instances/InstanceDashboardV2.js
@@ -317,7 +317,7 @@ const InstanceDashboardV2 = () => {
         />
 
         <TextField
-          label="Search an instances"
+          placeholder="Search an instances"
           InputProps={{
             endAdornment: (
               <InputAdornment position="start">
@@ -334,6 +334,11 @@ const InstanceDashboardV2 = () => {
             const value = e.target.value?.toLowerCase();
             setSearch(value);
           }}
+          sx={{
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
+          }}
         />
         <Stack direction="row" spacing={2} alignItems="stretch">
           <CustomMenu
diff --git a/src/components/accounts/ui/input/FormInput.js b/src/components/accounts/ui/input/FormInput.js
index fd7ee1a15..4b220f8b7 100644
--- a/src/components/accounts/ui/input/FormInput.js
+++ b/src/components/accounts/ui/input/FormInput.js
@@ -76,6 +76,9 @@ function Index({
                 border: '2px solid #FF5D0A',
               },
             },
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
           }}
         />
       ) : (
@@ -86,6 +89,7 @@ function Index({
               height: '40px',
               borderRadius: '8px',
               fontSize: '14px',
+
               '& fieldset': {
                 border: '1px solid #F2F4F7',
               },
@@ -96,6 +100,9 @@ function Index({
                 border: '2px solid #FF5D0A',
               },
             },
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
           }}
           {...defaultProps}
           type={showPassword ? 'text' : 'password'}
diff --git a/src/components/accounts/ui/select/AccountsComboBox.js b/src/components/accounts/ui/select/AccountsComboBox.js
index f8e6d9078..28eff8302 100644
--- a/src/components/accounts/ui/select/AccountsComboBox.js
+++ b/src/components/accounts/ui/select/AccountsComboBox.js
@@ -202,6 +202,9 @@ const Index = ({
                 border: `1px solid ${grey[200]}`,
                 borderRadius: '8px',
               },
+              '& .MuiInputBase-root': {
+                bgcolor: 'transparent',
+              },
             }}
             placeholder={placeholder}
             InputProps={{
diff --git a/src/layouts/Main/Main.js b/src/layouts/Main/Main.js
index 9e596ab9d..6807c868e 100644
--- a/src/layouts/Main/Main.js
+++ b/src/layouts/Main/Main.js
@@ -166,6 +166,7 @@ const Main = ({
           py: 1,
           display: router?.query?.slug?.[0] === 'login' && 'none',
           borderBottom: (isLoggedIn || isDocsPage) && `1px solid ${grey[200]}`,
+          zIndex: 9999,
         }}
         elevation={trigger ? 1 : 0}
       >
diff --git a/src/pages/[[...zesty]].js b/src/pages/[[...zesty]].js
index 64e9c6d0a..c0ce0bd0c 100644
--- a/src/pages/[[...zesty]].js
+++ b/src/pages/[[...zesty]].js
@@ -119,7 +119,7 @@ export async function getServerSideProps({ req, res, resolvedUrl }) {
       docs,
     },
     algolia: {
-      apiKey: process.env.ALGOLIA_APIKEY,
+      apiKey: process.env.ALGOLIA_SEARCH_KEY,
       appId: process.env.ALGOLIA_APPID,
       index: process.env.ALGOLIA_INDEX,
     },
diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js
index 06f49106f..340b39691 100644
--- a/src/revamp/ui/GetDemoSection/index.js
+++ b/src/revamp/ui/GetDemoSection/index.js
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { Form, Formik } from 'formik';
 import MuiMarkdown from 'markdown-to-jsx';
 import {
@@ -15,6 +15,7 @@ import {
 import { MultiFieldForm } from './MultiFieldForm';
 import getLastVisitedPathAndUrl from 'revamp/utils/getLastVisitedPathAndUrl';
 import { generateAlt } from 'utils';
+import useGetDynamicData from './useGetDynamicData';
 
 const acorns =
     'https://storage.googleapis.com/assets.zesty.io/website/images/assets/demo/Acorns%20Logo.svg',
@@ -38,6 +39,7 @@ const GetDemoSection = ({
   formTitle = 'Enter your details to connect with a Content Expert',
 }) => {
   const { lastVisitedPath, lastVisitedURL } = getLastVisitedPathAndUrl();
+  const { data } = useGetDynamicData();
   let inquiryReasons = [
     'General',
     'Agency Sign Up',
@@ -48,10 +50,6 @@ const GetDemoSection = ({
   ];
 
   const onSubmit = async (values) => {
-    // download link
-    // downloadLink && window.open(downloadLink, '_blank');
-    // capterraTracking && capterraTracking();
-
     if (values.firstName === '') {
       values.firstName = 'Unknown';
     }
@@ -63,7 +61,7 @@ const GetDemoSection = ({
       values?.inquiryReason,
       'Demo Sign Up',
       '',
-      'Contact Us', // leadsource
+      data?.lead_source_detail || 'Contact Us', // leadsource
       lastVisitedPath,
       lastVisitedURL,
     );
@@ -76,10 +74,6 @@ const GetDemoSection = ({
       await subscribeToZoho(payload);
     }
 
-    // cmsModel === 'Gated Content Page'
-    //   ? setOpen(true)
-    //   : (window.location = '/ppc/thank-you/');
-
     window.location = redirect;
     return values;
   };
@@ -121,7 +115,7 @@ const GetDemoSection = ({
               letterSpacing="-0.02em"
               color="white"
             >
-              {title}
+              {data?.title || title}
             </Typography>
 
             <MuiMarkdown
@@ -142,115 +136,10 @@ const GetDemoSection = ({
                 },
               }}
             >
-              {supportingText}
+              {data?.description || supportingText}
             </MuiMarkdown>
           </Stack>
-          <Stack>
-            <Typography
-              variant="body2"
-              color="primary"
-              mb="12px"
-              textTransform="uppercase"
-            >
-              Trusted By
-            </Typography>
-            <Stack
-              flexWrap="wrap"
-              direction="row"
-              gap={{ xs: '20px', desktopWide: '30px' }}
-            >
-              <img
-                loading="lazy"
-                src={sony}
-                width="91px"
-                height="32px"
-                alt={generateAlt('Sony')}
-              />
-              <img
-                loading="lazy"
-                src={rocketLeague}
-                width="60px"
-                height="32px"
-                alt={generateAlt('Rocket League')}
-              />
-              <img
-                loading="lazy"
-                src={singlife}
-                width="102.12px"
-                height="32px"
-                alt={generateAlt('Singlife')}
-              />
-              <img
-                loading="lazy"
-                src={acorns}
-                width="94px"
-                height="32px"
-                alt={generateAlt('Acorns')}
-              />
-              <img
-                loading="lazy"
-                src={phoenixSuns}
-                width="107.54px"
-                height="32px"
-                alt={generateAlt('Phoenix Suns')}
-              />
-              <img
-                loading="lazy"
-                src={wattpad}
-                width="115.91px"
-                height="32px"
-                alt={generateAlt('Wattpad')}
-              />
-              <img
-                loading="lazy"
-                src={cornershop}
-                width="96.69px"
-                height="32px"
-                alt={generateAlt('Corner Shop')}
-              />
-              <img
-                loading="lazy"
-                src={bjs}
-                width="36.48px"
-                height="32px"
-                alt={generateAlt('Bjs')}
-              />
-            </Stack>
-
-            <Stack sx={{ mt: 8 }}>
-              <Typography
-                color="primary"
-                variant="body2"
-                mb="12px"
-                textTransform="uppercase"
-              >
-                G2 MOMENTUM LEADER
-              </Typography>
-              <Stack flexWrap="wrap" direction="row" gap="20px">
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic1}
-                  width="92.2px"
-                  height="120px"
-                />
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic2}
-                  width="92.2px"
-                  height="120px"
-                />
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic3}
-                  width="92.2px"
-                  height="120px"
-                />
-              </Stack>
-            </Stack>
-          </Stack>
+          <TrustLogos />
         </Stack>
 
         <Stack>
@@ -381,3 +270,145 @@ const GetDemoSection = ({
 };
 
 export default GetDemoSection;
+
+function TrustLogos() {
+  return (
+    <Stack>
+      <Logos alignLeft />
+      <Box sx={{ mt: 8 }}>
+        <G2Awards alignLeft />
+      </Box>
+    </Stack>
+  );
+}
+
+export function Logos({ invert = false, alignLeft }) {
+  return (
+    <Stack>
+      <Typography
+        variant="body2"
+        color="primary"
+        mb="12px"
+        textTransform="uppercase"
+        textAlign={alignLeft ? 'left' : 'center'}
+      >
+        Trusted By
+      </Typography>
+      <Stack
+        justifyContent={alignLeft ? '' : 'center'}
+        flexWrap="wrap"
+        direction="row"
+        gap={{ xs: '20px', desktopWide: '30px' }}
+      >
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={sony}
+          width="91px"
+          height="32px"
+          alt={generateAlt('Sony')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={rocketLeague}
+          width="60px"
+          height="32px"
+          alt={generateAlt('Rocket League')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={singlife}
+          width="102.12px"
+          height="32px"
+          alt={generateAlt('Singlife')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={acorns}
+          width="94px"
+          height="32px"
+          alt={generateAlt('Acorns')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={phoenixSuns}
+          width="107.54px"
+          height="32px"
+          alt={generateAlt('Phoenix Suns')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={wattpad}
+          width="115.91px"
+          height="32px"
+          alt={generateAlt('Wattpad')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={cornershop}
+          width="96.69px"
+          height="32px"
+          alt={generateAlt('Corner Shop')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={bjs}
+          width="36.48px"
+          height="32px"
+          alt={generateAlt('Bjs')}
+        />
+      </Stack>
+    </Stack>
+  );
+}
+
+export function G2Awards({ alignLeft }) {
+  return (
+    <Stack>
+      <Typography
+        color="primary"
+        variant="body2"
+        mb="12px"
+        textTransform="uppercase"
+        textAlign={alignLeft ? 'left' : 'center'}
+      >
+        G2 MOMENTUM LEADER
+      </Typography>
+      <Stack
+        flexWrap="wrap"
+        justifyContent={alignLeft ? '' : 'center'}
+        direction="row"
+        gap="20px"
+      >
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic1}
+          width="92.2px"
+          height="120px"
+        />
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic2}
+          width="92.2px"
+          height="120px"
+        />
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic3}
+          width="92.2px"
+          height="120px"
+        />
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/revamp/ui/GetDemoSection/useGetDynamicData.js b/src/revamp/ui/GetDemoSection/useGetDynamicData.js
new file mode 100644
index 000000000..4fb688358
--- /dev/null
+++ b/src/revamp/ui/GetDemoSection/useGetDynamicData.js
@@ -0,0 +1,42 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://kfg6bckb-dev.webengine.zesty.io/-/dynamic-contact-page.json',
+    );
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching dynamic content:', error);
+    return null;
+  }
+}
+
+export default function useGetDynamicData() {
+  const [data, setData] = useState(null);
+  const router = useRouter();
+  const { type } = router.query;
+
+  useEffect(() => {
+    const getData = async () => {
+      const fetchedData = await fetchData();
+
+      if (fetchedData) {
+        if (type) {
+          setData(fetchedData.filter((item) => item.page_type === type)?.[0]);
+          return;
+        } else {
+          setData(
+            fetchedData.filter((item) => item.page_type === 'default')?.[0],
+          );
+        }
+      }
+    };
+
+    getData();
+  }, []);
+
+  return { data };
+}
diff --git a/src/theme/index.js b/src/theme/index.js
index e5562e33a..7e61bfa1f 100644
--- a/src/theme/index.js
+++ b/src/theme/index.js
@@ -103,7 +103,7 @@ export const getThemeAccounts = (mode, themeToggler) =>
           xl2: 2500,
         },
       },
-      tabTop: 114,
+      tabTop: 143,
       themeToggler,
     }),
   );
diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js
index 3ca8d840b..6f230f87f 100644
--- a/src/views/zesty/Article.js
+++ b/src/views/zesty/Article.js
@@ -31,7 +31,7 @@
  */
 
 import React from 'react';
-import { Box, Button, Link, Table, useTheme } from '@mui/material';
+import { Box, Button, Container, Link, Table, useTheme } from '@mui/material';
 import FillerContent from 'components/globals/FillerContent';
 import {
   List,
@@ -45,11 +45,11 @@ import { useEffect, useState } from 'react';
 import BlogHero from 'revamp/ui/BlogHero';
 import revampTheme from 'theme/revampTheme';
 import dayjs from 'dayjs';
-import Zoom from 'react-medium-image-zoom';
 import 'react-medium-image-zoom/dist/styles.css';
 import AuthorSection from 'revamp/ui/AuthorSection';
 import useFetch from 'components/hooks/useFetch';
 import BlogContent from 'revamp/ui/BlogContent';
+import { CtaWithInputField } from 'blocks/cta';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
@@ -60,20 +60,9 @@ function Article({ content }) {
     content.zestyProductionMode,
   );
 
-  // const {
-  //   data: tagArticles,
-  //   //  isPending: tagsPending
-  // } = useFetch(
-  //   `/-/similar-articles.json?limit=4&tag=${simliarTags}`,
-  //   content.zestyProductionMode,
-  // );
-
   const removeErrorHandlingString = /Error hydrating/gi;
   let cleanOutErrorHydrating;
 
-  // Check if "Error hydrating" is being injected and clean out
-  // Skip if wysiwyg is empty to avoid error
-
   const authorImage =
     content.author?.data[0]?.headshot?.data[0]?.url || FillerContent.image;
   const authorName = content.author?.data[0]?.name || FillerContent.header;
@@ -120,12 +109,6 @@ function Article({ content }) {
     );
   }, []);
 
-  const MyZoomImg = ({ _children, ...props }) => (
-    <Zoom wrapElement="span">
-      <Box component="img" {...props} />
-    </Zoom>
-  );
-
   return (
     <Box>
       <ThemeProvider theme={() => revampTheme(palette.mode)}>
@@ -383,7 +366,7 @@ function Article({ content }) {
                     },
                   },
                   img: {
-                    component: MyZoomImg,
+                    component: 'img',
                     props: {
                       style: {
                         marginTop: '48px',
@@ -429,7 +412,7 @@ function Article({ content }) {
                             listStyleType: 'auto',
                           },
                           mx: 3,
-                          // pl: 2,
+
                           '& ul': {
                             mt: '12px',
                             mx: 2,
@@ -442,7 +425,6 @@ function Article({ content }) {
                           px: 0,
                           '& ul': {
                             mx: 2,
-                            // pl: 2,
                           },
                         },
                       }),
@@ -461,7 +443,7 @@ function Article({ content }) {
                             display: 'list-item',
                             listStyleType: 'auto',
                           },
-                          // pl: 2,
+
                           mx: 3,
                         },
                         [theme.breakpoints.up('tablet')]: {
@@ -521,8 +503,6 @@ function Article({ content }) {
                         mt: '20px',
                         '& img, span': {
                           mt: '0px !important',
-                          // p: 1,
-                          // maxWidth: 'auto !important',
                           objectFit: 'contain',
                           height: '240px',
                         },
@@ -533,7 +513,9 @@ function Article({ content }) {
                         '& p': {
                           width: 'auto',
                         },
-
+                        '& tr': {
+                          bgcolor: 'transparent !important',
+                        },
                         '& td': {
                           color:
                             theme.palette.mode === 'dark'
@@ -592,6 +574,18 @@ function Article({ content }) {
           <BlogContent title="Related Articles" articles={latestArticles} />
         </Stack>
       </ThemeProvider>
+
+      {content?.enable_newsletter_subscription === '1' && (
+        <Container position="relative" zIndex={3}>
+          <CtaWithInputField
+            title={'Subscribe to the zestiest newsletter in the industry'}
+            description={
+              'Get the latest from the Zesty team, from whitepapers to product updates.'
+            }
+            cta={'Subscribe'}
+          />
+        </Container>
+      )}
     </Box>
   );
 }
diff --git a/src/views/zesty/Demo.js b/src/views/zesty/Demo.js
index f2399f097..2931cf124 100644
--- a/src/views/zesty/Demo.js
+++ b/src/views/zesty/Demo.js
@@ -25,172 +25,158 @@
  */
 import { React } from 'react';
 import { useTheme } from '@mui/material/styles';
-// import Typography from '@mui/material/Typography';
-// import FillerContent from 'components/globals/FillerContent';
-// import ZohoFormEmbed from 'components/cta/ZohoFormEmbed';
-// import MuiMarkdown from 'markdown-to-jsx';
-// import ZestyImage from 'blocks/Image/ZestyImage';
-// import useMediaQuery from '@mui/material/useMediaQuery';
 import {
-  //  Avatar, Grid, Box, Container,
-
+  Box,
+  Button,
+  Card,
+  Grid,
+  Stack,
   ThemeProvider,
+  Typography,
+  alpha,
 } from '@mui/material';
-// import SimpleCardLogo from 'blocks/zesty/LogoGrid/SimpleCardLogo';
-// import DarkBlueCta from 'blocks/zesty/Cta/DarkBlueCta';
-import GetDemoSection from 'revamp/ui/GetDemoSection';
+import MuiMarkdown from 'markdown-to-jsx';
 import revampTheme from 'theme/revampTheme';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
+import Link from 'next/link';
+import { G2Awards, Logos } from 'revamp/ui/GetDemoSection';
 
-const Demo = () => {
+const Demo = ({ content }) => {
   const theme = useTheme();
-  // const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const cardData = content?.dynamic_contact_page?.data;
   return (
     <ThemeProvider theme={() => revampTheme(theme.palette.mode)}>
-      <GetDemoSection />
+      <EngageTypeCards cardData={cardData} />
+      {/* <GetDemoSection /> */}
     </ThemeProvider>
-    // <Container sx={{ sm: 1, md: 1236, py: 15 }}>
-    //   <Grid container>
-    //     <Grid
-    //       sx={{
-    //         px: 4,
-    //         display: 'flex',
-    //         justifyContent: 'center',
-    //         alignItems: 'center',
-    //       }}
-    //       item
-    //       xs={12}
-    //       md={6}
-    //     >
-    //       <Box>
-    //         <Box>
-    //           <MuiMarkdown
-    //             options={{
-    //               overrides: {
-    //                 h1: {
-    //                   component: Typography,
-    //                   props: {
-    //                     variant: 'h3',
-    //                     fontWeight: 'bold',
-    //                     component: 'h1',
-    //                     color: theme.palette.zesty.zestyZambezi,
-    //                   },
-    //                 },
-    //                 p: {
-    //                   component: Typography,
-    //                   props: {
-    //                     variant: 'body1',
-    //                     component: 'p',
-    //                     lineHeight: 1.2,
-    //                     mt: 2,
-    //                     color: theme.palette.zesty.zestyZambezi,
-    //                   },
-    //                 },
-    //               },
-    //             }}
-    //           >
-    //             {content?.demo_description || FillerContent.description}
-    //           </MuiMarkdown>
-    //         </Box>
-    //         <Box
-    //           sx={{
-    //             display: 'flex',
-    //             flexWrap: 'wrap',
-    //             justifyContent: isMobile ? 'center' : 'flex-start',
-    //             gap: 2,
-    //             mt: 4,
-    //           }}
-    //         >
-    //           {content?.g2_badges?.data.map((item, index) => (
-    //             <Box key={index}>
-    //               <ZestyImage
-    //                 width={100}
-    //                 height={120}
-    //                 style={{ width: 'auto', height: 'auto' }}
-    //                 src={item?.badge_image?.data[0].url || FillerContent.href}
-    //               />
-    //             </Box>
-    //           ))}
-    //         </Box>
-    //         <Box sx={{ my: 4 }}>
-    //           {content?.testimonial?.data.map((item, index) => (
-    //             <Box key={index}>
-    //               <Typography
-    //                 variant="body1"
-    //                 component="p"
-    //                 sx={{
-    //                   lineHeight: 1.2,
-    //                   fontStyle: 'italic',
-    //                   color: theme.palette.zestyZambezi,
-    //                 }}
-    //               >
-    //                 {item?.review || FillerContent.description}
-    //               </Typography>
-
-    //               <Box sx={{ mt: 2, display: 'flex', gap: 2 }}>
-    //                 <Avatar
-    //                   src={
-    //                     item?.reviewer_headshot?.data[0]?.url ||
-    //                     FillerContent.photos[0].src
-    //                   }
-    //                   alt={item?.reviewer_name || ''}
-    //                 />
-    //                 <Box>
-    //                   <Typography
-    //                     variant="body1"
-    //                     component="p"
-    //                     sx={{
-    //                       lineHeight: 1.2,
-    //                       color: theme.palette.zestyZambezi,
-    //                     }}
-    //                   >
-    //                     {item?.reviewer_name || FillerContent.description}
-    //                   </Typography>
-    //                   <Typography
-    //                     variant="body1"
-    //                     component="p"
-    //                     sx={{
-    //                       lineHeight: 1.2,
-    //                       color: theme.palette.zestyZambezi,
-    //                       fontWeight: 'bold',
-    //                     }}
-    //                   >
-    //                     {item?.reviewer_title || FillerContent.description}
-    //                   </Typography>
-    //                 </Box>
-    //               </Box>
-    //             </Box>
-    //           ))}
-    //         </Box>
-    //       </Box>
-    //     </Grid>
-    //     <Grid sx={{ mt: isMobile ? 4 : 0 }} item xs={12} md={6}>
-    //       <Box>
-    //         <ZohoFormEmbed
-    //           height={content.form_height || 600}
-    //           formURL={content.form_link || ''}
-    //         />
-    //       </Box>
-    //     </Grid>
-    //   </Grid>
-    //   <Box sx={{ mt: 10 }}>
-    //     <SimpleCardLogo
-    //       variant="outlined"
-    //       heading_text={content?.logos_h2}
-    //       logoItems={content?.logos?.data}
-    //     />
-
-    //     <DarkBlueCta
-    //       sx={{ mt: 15, py: 10 }}
-    //       cta_text={content?.cta_button}
-    //       cta_secondary_link={
-    //         content?.cta_button_secondary_link?.data[0].meta.web.uri
-    //       }
-    //       cta_secondary_text={content?.cta_button_secondary}
-    //       header_content={content?.bottom_cta}
-    //     />
-    //   </Box>
-    // </Container>
   );
 };
 
 export default Demo;
+
+function EngageTypeCards({ cardData }) {
+  const theme = useTheme();
+  return (
+    <Stack
+      bgcolor="grey.900"
+      py={{ xs: 4, tablet: 6, lg: 10 }}
+      px={{ xs: 2, tablet: 4, lg: 14 }}
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+    >
+      <Stack mb={{ xs: 4, lg: 5 }}>
+        <Typography
+          py={0}
+          fontWeight={800}
+          fontSize={{ xs: 36, tablet: 52 }}
+          lineHeight={{ xs: '44px', tablet: '56px' }}
+          mb={{ xs: 2, tablet: '24px' }}
+          letterSpacing="-0.02em"
+          color="#fff"
+        >
+          How would you like to engage?
+        </Typography>
+      </Stack>
+
+      <Grid container spacing={4} sx={{ width: '100%', maxWidth: 1200 }}>
+        {cardData.map((item) => {
+          return (
+            <Grid
+              key={item}
+              component={Link}
+              href={item.button_link || '#'}
+              sx={{ textDecoration: 'none' }}
+              item
+              xs={12}
+              md={4}
+            >
+              <Stack
+                height={'100%'}
+                minHeight={220}
+                component={Card}
+                sx={{
+                  '&:hover': {
+                    background: theme.palette.grey[200],
+                  },
+                }}
+                borderRadius="8px"
+              >
+                <Stack sx={{ height: '100%' }}>
+                  <Box
+                    p="20px"
+                    spacing={1}
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      width: '100%',
+                    }}
+                  >
+                    <Typography
+                      variant="h5"
+                      letterSpacing="-0.02em"
+                      color="text.primary"
+                      fontWeight={600}
+                    >
+                      {item?.title || ''}
+                    </Typography>
+
+                    <ArrowForwardRoundedIcon
+                      sx={{
+                        width: '16px',
+                        height: '16px',
+                        alignSelf: 'center',
+                        fill: alpha(theme.palette.grey[900], '.4'),
+                      }}
+                    />
+                  </Box>
+                  <Box
+                    sx={{
+                      mb: 2,
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Stack gap={2} px="20px">
+                      <MuiMarkdown
+                        options={{
+                          overrides: {
+                            p: {
+                              component: Typography,
+                              props: {
+                                sx: { textAlign: 'left' },
+                                color: 'text.secondary',
+                              },
+                            },
+                          },
+                        }}
+                      >
+                        {item?.description || ''}
+                      </MuiMarkdown>
+                    </Stack>
+
+                    <Button sx={{ mx: 2 }} variant="contained" size="medium">
+                      {item?.button_text || ''}
+                    </Button>
+                  </Box>
+                </Stack>
+              </Stack>
+            </Grid>
+          );
+        })}
+      </Grid>
+
+      <Grid container spacing={4} sx={{ width: '100%', maxWidth: 1200, mt: 8 }}>
+        <Grid item xs={12} md={6}>
+          <Logos />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <G2Awards />
+        </Grid>
+      </Grid>
+    </Stack>
+  );
+}
diff --git a/src/views/zesty/index.js b/src/views/zesty/index.js
index 0f4d871ef..8ff879749 100644
--- a/src/views/zesty/index.js
+++ b/src/views/zesty/index.js
@@ -147,6 +147,7 @@ const Career = dynamic(() => import('./Career'));
 const DeveloperResource = dynamic(() => import('./DeveloperResource'));
 const EventsAndWebinar = dynamic(() => import('./EventsAndWebinar'));
 const Demo = dynamic(() => import('./Demo'));
+
 const Ppc = dynamic(() => import('./Ppc'));
 const Brand = dynamic(() => import('./Brand'));
 const Integration = dynamic(() => import('./Integration'));