diff --git a/src/components/Homepage/MoveAndTransform/index.tsx b/src/components/Homepage/MoveAndTransform/index.tsx
index 296457de..d49f6cdd 100644
--- a/src/components/Homepage/MoveAndTransform/index.tsx
+++ b/src/components/Homepage/MoveAndTransform/index.tsx
@@ -1,4 +1,5 @@
 import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
 import RealTimeIcon from '../../../svgs/homepage/real-time.svg';
 import BatchIcon from '../../../svgs/homepage/batch.svg';
 import SaasIcon from '../../../svgs/homepage/saas.svg';
@@ -12,9 +13,19 @@ import {
     header,
     step,
     steps,
+    desktopImage,
     mobileImage,
     diagram,
     card,
+    analytics,
+    ops,
+    ai,
+    realTime,
+    batch,
+    saas,
+    storeAndTransform,
+    firstColumnHeading,
+    secondColumnHeading,
 } from './styles.module.less';
 
 const MoveAndTransform = () => {
@@ -40,35 +51,35 @@ const MoveAndTransform = () => {
                 </div>
             </div>
             <div className={diagram}>
-                <h4>
+                <h4 className={firstColumnHeading}>
                     Connect to Any Data <br /> Source
                 </h4>
-                <h4>Activate Data</h4>
-                <div className={card}>
+                <h4 className={secondColumnHeading}>Activate Data</h4>
+                <div className={clsx(card, realTime)}>
                     <RealTimeIcon />
                     <span>Real-time</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, batch)}>
                     <BatchIcon />
                     <span>Batch</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, saas)}>
                     <SaasIcon />
                     <span>Saas</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, analytics)}>
                     <AnalyticsIcon />
                     <span>Analytics</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, ops)}>
                     <OpsIcon />
                     <span>Ops</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, ai)}>
                     <AiIcon />
                     <span>AI</span>
                 </div>
-                <div className={card}>
+                <div className={clsx(card, storeAndTransform)}>
                     <div>
                         <StoreIcon />
                         <TransformIcon />
@@ -82,15 +93,17 @@ const MoveAndTransform = () => {
                     alt=""
                     src="../../../images/homepage/move-and-transform-data.png"
                     quality={100}
+                    className={desktopImage}
+                />
+                <StaticImage
+                    placeholder="blurred"
+                    alt=""
+                    src="../../../images/homepage/move-and-transform-data-mobile.png"
+                    quality={100}
+                    className={mobileImage}
+                    layout="fullWidth"
                 />
             </div>
-            <StaticImage
-                placeholder="none"
-                alt="Estuary Flow streamlines complex data workflows by integrating diverse data sources and destinations"
-                src="../../../images/flow-mobile.png"
-                quality={100}
-                className={mobileImage}
-            />
         </section>
     );
 };
diff --git a/src/components/Homepage/MoveAndTransform/styles.module.less b/src/components/Homepage/MoveAndTransform/styles.module.less
index 64da1c77..e20c137a 100644
--- a/src/components/Homepage/MoveAndTransform/styles.module.less
+++ b/src/components/Homepage/MoveAndTransform/styles.module.less
@@ -150,12 +150,55 @@
     }
 }
 
-.diagram {
-    position: relative;
-
+.desktopImage {
     @media (max-width: 768px) {
-        display: none;
+        display: none !important;
+    }
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5vw;
+    position: absolute;
+    z-index: 1;
+
+    @media (min-width: 1601px) {
+        gap: 12px;
+    }
+
+    span {
+        font-size: 1.125vw;
+        font-weight: 500;
+
+        @media (min-width: 1601px) {
+            font-size: 1rem;
+        }
+
+        @media (max-width: 768px) {
+            font-size: 3.5vw;
+        }
+    }
+
+    svg {
+        width: 2vw;
+        height: 2vw;
+
+        @media (min-width: 1601px) {
+            width: 32px;
+            height: 32px;
+        }
+
+        @media (max-width: 768px) {
+            width: 6vw;
+            height: 6vw;
+        }
     }
+}
+
+.diagram {
+    position: relative;
 
     h4 {
         font-weight: 800;
@@ -174,127 +217,185 @@
         }
     }
 
-    h4:first-of-type {
+    .firstColumnHeading {
         left: 3.5vw;
-
+    
         @media (min-width: 1601px) {
             left: 65px;
         }
+    
+        @media (max-width: 768px) {
+            top: 6vw;
+            left: 24vw;
+            font-size: 3vw;
+            line-height: 3.5vw;
+        }
+    
+        @media (max-width: 425px) {
+            top: 7.5vw;
+            left: 28vw;
+        }
     }
-
-    h4:nth-of-type(2) {
+    
+    .secondColumnHeading {
         right: 5.5vw;
-
+    
         @media (min-width: 1601px) {
             right: 94px;
         }
+    
+        @media (max-width: 768px) {
+            top: 287vw;
+            left: 6vw;
+            font-size: 3vw;
+            line-height: 3.5vw;
+        }
+    
+        @media (max-width: 425px) {
+            top: 75.3%;
+        }
     }
+}
 
-    div:first-of-type {
-        top: 8.5vw;
-        left: 6.5vw;
+.realTime {
+    top: 8.5vw;
+    left: 6.5vw;
 
-        @media (min-width: 1601px) {
-            top: 140px;
-            left: 105px;
-        }
+    @media (min-width: 1601px) {
+        top: 140px;
+        left: 105px;
     }
 
-    div:nth-of-type(2) {
-        top: 20vw;
-        left: 7.5vw;
+    @media (max-width: 768px) {
+        top: 22vw;
+        left: 32vw;
+    }
 
-        @media (min-width: 1601px) {
-            top: 320px;
-            left: 120px;
-        }
+    @media (max-width: 425px) {
+        top: 5.8%;
+        left: 36vw;
     }
+}
 
-    div:nth-of-type(3) {
-        top: 30.5vw;
-        left: 7.5vw;
+.batch {
+    top: 20vw;
+    left: 7.5vw;
 
-        @media (min-width: 1601px) {
-            top: 495px;
-            left: 120px;
-        }
+    @media (min-width: 1601px) {
+        top: 320px;
+        left: 120px;
     }
 
-    div:nth-of-type(4) {
-        top: 7.5vw;
-        right: 6.5vw;
+    @media (max-width: 768px) {
+        top: 49vw;
+        left: 35vw;
+    }
 
-        @media (min-width: 1601px) {
-            top: 122px;
-            right: 110px;
-        }
+    @media (max-width: 425px) {
+        top: 12.8%;
+        left: 39vw;
     }
+}
 
-    div:nth-of-type(5) {
-        top: 19vw;
-        right: 8vw;
+.saas {
+    top: 30.5vw;
+    left: 7.5vw;
 
-        @media (min-width: 1601px) {
-            top: 310px;
-            right: 130px;
-        }
+    @media (min-width: 1601px) {
+        top: 495px;
+        left: 120px;
     }
 
-    div:nth-of-type(6) {
-        top: 31vw;
-        right: 8vw;
+    @media (max-width: 768px) {
+        top: 76vw;
+        left: 35vw;
+    }
 
-        @media (min-width: 1601px) {
-            top: 500px;
-            right: 130px;
-        }
+    @media (max-width: 425px) {
+        top: 19.8%;
+        left: 39.5vw;
     }
+}
 
-    div:nth-of-type(7) {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+.analytics {
+    top: 7.5vw;
+    right: 6.5vw;
 
-        div {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
+    @media (min-width: 1601px) {
+        top: 122px;
+        right: 110px;
+    }
 
-        h4 {
-            position: static;
-        }
+    @media (max-width: 768px) {
+        top: 301vw;
+        left: 8vw;
+    }
+
+    @media (max-width: 425px) {
+        top: 79%;
     }
 }
 
-.card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5vw;
-    position: absolute;
-    z-index: 1;
+.ops {
+    top: 19vw;
+    right: 8vw;
 
     @media (min-width: 1601px) {
-        gap: 12px;
+        top: 310px;
+        right: 130px;
     }
 
-    span {
-        font-size: 1.125vw;
-        font-weight: 500;
+    @media (max-width: 768px) {
+        top: 329vw;
+        left: 9vw;
+    }
 
-        @media (min-width: 1601px) {
-            font-size: 1rem;
-        }
+    @media (max-width: 425px) {
+        top: 86.5%;
     }
+}
 
-    svg {
-        width: 2vw;
-        height: 2vw;
+.ai {
+    top: 31vw;
+    right: 8vw;
 
-        @media (min-width: 1601px) {
-            width: 32px;
-            height: 32px;
+    @media (min-width: 1601px) {
+        top: 500px;
+        right: 130px;
+    }
+
+    @media (max-width: 768px) {
+        top: 357vw;
+        left: 9vw;
+    }
+
+    @media (max-width: 425px) {
+        top: 93.5%;
+    }
+}
+
+.storeAndTransform {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    h4 {
+        position: static;
+
+        @media (max-width: 768px) {
+            font-size: 3vw;
+            line-height: 3.5vw;
         }
     }
-}
\ No newline at end of file
+
+    @media (max-width: 768px) {
+        top: 50.5%;
+        gap: 8px;
+    }
+}
diff --git a/src/images/flow-mobile.png b/src/images/flow-mobile.png
deleted file mode 100644
index 552b39e0..00000000
Binary files a/src/images/flow-mobile.png and /dev/null differ
diff --git a/src/images/homepage/move-and-transform-data-mobile.png b/src/images/homepage/move-and-transform-data-mobile.png
new file mode 100644
index 00000000..3482ee7e
Binary files /dev/null and b/src/images/homepage/move-and-transform-data-mobile.png differ