diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js
index 47c732217..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 {
@@ -139,112 +139,7 @@ const GetDemoSection = ({
               {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>
@@ -375,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/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>
+  );
+}