diff --git a/public/images/about/about.jpg b/public/images/about/about.jpg
new file mode 100644
index 0000000..393fee3
Binary files /dev/null and b/public/images/about/about.jpg differ
diff --git a/public/images/community/hero/community.jpg b/public/images/community/hero/community.jpg
new file mode 100644
index 0000000..43c0b8e
Binary files /dev/null and b/public/images/community/hero/community.jpg differ
diff --git a/public/images/products/products.jpg b/public/images/products/products.jpg
new file mode 100644
index 0000000..8246424
Binary files /dev/null and b/public/images/products/products.jpg differ
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 74b182b..7308c00 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -17,10 +17,21 @@
     margin: 0 tovw(-35px, 'default', -35px);
     mix-blend-mode: screen;
 
+    @include respond-to('mobile') {
+      display: none;
+    }
+  }
+
+  .hero__mobile {
+    display: none;
+
     @include respond-to('mobile') {
       display: flex;
-      width: 300%;
       place-self: center;
+      margin: tovw(30px, 'mobile', 75px) 0 tovw(-25px, 'mobile')
+        tovw(10px, 'mobile', 10px);
+      width: 300%;
+      mix-blend-mode: screen;
     }
   }
 }
diff --git a/src/components/sections/about/hero/index.tsx b/src/components/sections/about/hero/index.tsx
index 7fdb6f1..ef4b571 100644
--- a/src/components/sections/about/hero/index.tsx
+++ b/src/components/sections/about/hero/index.tsx
@@ -21,6 +21,12 @@ const Hero = () => {
       >
         <source src="/videos/hero-about.mp4" type="video/mp4" />
       </video>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/about/about.jpg"
+      />
       <Container className={s['container']}>
         <div className={s['body']}>
           <div className={s['header']}>
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index d3ff48e..fc8094e 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@@ -13,10 +13,24 @@
   @include respond-to('mobile') {
     display: flex;
     flex-direction: column;
+    gap: tovw(49px, 'default', 49px);
     width: 100vw;
     min-height: 100vh;
     padding-bottom: tovw(18px, 'mobile');
   }
+
+  .hero__mobile {
+    display: none;
+
+    @include respond-to('mobile') {
+      display: flex;
+      place-self: center;
+      width: 250%;
+      margin-right: tovw(150px, 'mobile');
+      padding-top: tovw(65px, 'mobile');
+      mix-blend-mode: screen;
+    }
+  }
 }
 
 .video__container {
@@ -26,9 +40,11 @@
   padding-top: tovw(220px, 'default', 90px);
 
   @include respond-to('mobile') {
-    position: unset;
-    margin-bottom: tovw(-85px, 'mobile');
-    padding-top: tovw(55px, 'mobile');
+    display: none;
+
+    // position: unset;
+    // margin-bottom: tovw(-85px, 'mobile');
+    // padding-top: tovw(55px, 'mobile');
   }
 
   video {
@@ -130,6 +146,7 @@
   @include respond-to('mobile') {
     flex-direction: column;
     width: 100%;
+    margin-top: tovw(88px, 'default', 88px);
     gap: tovw(20px, 'mobile');
   }
 }
diff --git a/src/components/sections/community/hero/index.tsx b/src/components/sections/community/hero/index.tsx
index 0f91435..7148af9 100644
--- a/src/components/sections/community/hero/index.tsx
+++ b/src/components/sections/community/hero/index.tsx
@@ -22,6 +22,12 @@ const Hero = () => {
           <source src="/videos/banner-community.mp4" type="video/mp4" />
         </video>
       </div>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/community/hero/community.jpg"
+      />
       <div className={s['header']}>
         <Heading as="h1" variant="xl">
           Laconic Community
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 47381e8..ea45600 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -24,10 +24,21 @@
     margin: 0 tovw(180px, 'default', 90px);
     mix-blend-mode: screen;
 
+    @include respond-to('mobile') {
+      display: none;
+    }
+  }
+
+  .hero__mobile {
+    display: none;
+
     @include respond-to('mobile') {
       display: flex;
-      width: 300%;
       place-self: center;
+      margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
+        tovw(16px, 'mobile', 20px);
+      width: 200%;
+      mix-blend-mode: screen;
     }
   }
 
diff --git a/src/components/sections/products/hero/index.tsx b/src/components/sections/products/hero/index.tsx
index 994bb1e..9176a98 100644
--- a/src/components/sections/products/hero/index.tsx
+++ b/src/components/sections/products/hero/index.tsx
@@ -19,6 +19,12 @@ const Hero = () => {
       >
         <source src="/videos/banner_products.mp4" type="video/mp4" />
       </video>
+      <img
+        className={s.hero__mobile}
+        loading="eager"
+        alt="hero"
+        src="/images/products/products.jpg"
+      />
       <Container className={s['container']}>
         <div className={s.body}>
           <div>