diff --git a/public/images/about/about.jpg b/public/images/about/about.jpg
index 393fee3..55b9280 100644
Binary files a/public/images/about/about.jpg and b/public/images/about/about.jpg differ
diff --git a/public/images/benefit-mobile-01.jpg b/public/images/benefit-mobile-01.jpg
new file mode 100644
index 0000000..e9b2e25
Binary files /dev/null and b/public/images/benefit-mobile-01.jpg differ
diff --git a/public/images/benefit-mobile-01.png b/public/images/benefit-mobile-01.png
deleted file mode 100644
index 0e45d7e..0000000
Binary files a/public/images/benefit-mobile-01.png and /dev/null differ
diff --git a/public/images/benefit-mobile-02.jpg b/public/images/benefit-mobile-02.jpg
new file mode 100644
index 0000000..6a10f32
Binary files /dev/null and b/public/images/benefit-mobile-02.jpg differ
diff --git a/public/images/benefit-mobile-02.png b/public/images/benefit-mobile-02.png
deleted file mode 100644
index b32952f..0000000
Binary files a/public/images/benefit-mobile-02.png and /dev/null differ
diff --git a/public/images/community/hero/community.jpg b/public/images/community/hero/community.jpg
index 43c0b8e..d692e45 100644
Binary files a/public/images/community/hero/community.jpg and b/public/images/community/hero/community.jpg differ
diff --git a/public/images/products/products.jpg b/public/images/products/products.jpg
index 8246424..c786ee3 100644
Binary files a/public/images/products/products.jpg and b/public/images/products/products.jpg differ
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index 31debd0..a41796a 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -182,11 +182,11 @@
   &__image {
     display: block;
     width: 100%;
+    mix-blend-mode: lighten;
 
     &--01 {
-      transform: translateY(-14%);
       z-index: -1;
-      margin: 0 0 0 tovw(-16px, 'mobile');
+      margin: tovw(50px, 'mobile') 0 tovw(100px, 'mobile') tovw(-16px, 'mobile');
       width: calc(100% + (tovw(16px, 'mobile') * 2));
       pointer-events: none;
       user-select: none;
diff --git a/src/components/sections/homepage/benefits/index.tsx b/src/components/sections/homepage/benefits/index.tsx
index ce64f89..7c78607 100644
--- a/src/components/sections/homepage/benefits/index.tsx
+++ b/src/components/sections/homepage/benefits/index.tsx
@@ -53,7 +53,7 @@ const Benefits = () => {
         )}
         alt="Benefit"
         loading="lazy"
-        src="/images/benefit-mobile-01.png"
+        src="/images/benefit-mobile-01.jpg"
       />
       <div className={s['background']}>
         <Container className={s['developers']}>
@@ -98,7 +98,7 @@ const Benefits = () => {
           )}
           alt="Benefit"
           loading="lazy"
-          src="/images/benefit-mobile-02.png"
+          src="/images/benefit-mobile-02.jpg"
         />
         <Container className={s['users__container']}>
           <Container className={s['users']}>
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index be8803a..e0e6ca9 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -37,6 +37,11 @@
       width: 200%;
       mix-blend-mode: screen;
       place-self: center;
+      mask-image: linear-gradient(
+        0deg,
+        rgb(255 255 255 / 0) 0%,
+        rgb(0 0 0) 25%
+      );
     }
 
     display: none;