diff --git a/src/assets/main-page-hero.png b/src/assets/main-page-hero.png
new file mode 100644
index 0000000..bbb4181
Binary files /dev/null and b/src/assets/main-page-hero.png differ
diff --git a/src/assets/main-page-hero@0.5x.png b/src/assets/main-page-hero@0.5x.png
new file mode 100644
index 0000000..145e61c
Binary files /dev/null and b/src/assets/main-page-hero@0.5x.png differ
diff --git a/src/assets/main-page-hero@0.75x.png b/src/assets/main-page-hero@0.75x.png
new file mode 100644
index 0000000..38e14c2
Binary files /dev/null and b/src/assets/main-page-hero@0.75x.png differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7887689..35e51c9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,14 +9,19 @@ import WebComparison from "../components/Home/WebComparison/WebComparison.astro"
 import Socials from "../components/Home/Socials/Socials.astro";
 import CTO from "../components/Home/CTO/CTO.astro";
 import Message from "../components/Home/Message/Message.astro";
-import bg from "../assets/home-hero-bg.webp";
+import bg from "../assets/main-page-hero.png";
+import bgSmall from "../assets/main-page-hero@0.75x.png";
+import bgSmaller from "../assets/main-page-hero@0.5x.png";
 ---
 
 <Layout view="home" title="Lume Web - Your Open Web">
   <img
-    class="absolute -z-10 -right-[250px] top-[250px] object-contain w-[1250px] max-w-none"
+    class="absolute -z-10 -right-[150px] top-[50px] md:-right-[200px] md:-top-[100px] xl:-right-[100px] xl:-top-[100px] object-contain w-[500px] md:w-[800px] xl:w-[1000px] max-w-none"
+    srcset={`${bg.src} 1250w, ${bgSmall.src} 1000w, ${bgSmaller.src} 500w`}
+    sizes="(max-width: 1024px) 1000px, 1250px"
     src={bg.src}
   />
+
   <Typewriter />
   <Vision />
   <Web3 />