diff --git a/packages/docs/package.json b/packages/docs/package.json
index 0ad42a962..9e2f2d312 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -28,7 +28,8 @@
     "motion": "^11.11.17",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.14.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.3",
diff --git a/packages/docs/src/components/Hero/StartScreen/index.tsx b/packages/docs/src/components/Hero/StartScreen/index.tsx
index 645100d42..5a05db63b 100644
--- a/packages/docs/src/components/Hero/StartScreen/index.tsx
+++ b/packages/docs/src/components/Hero/StartScreen/index.tsx
@@ -47,7 +47,14 @@ const StartScreen = () => {
           animate={{ x: 0 }}
           transition={{ duration: 0.5 }}>
           <div className={styles.heroImageWrapper}>
-            <img className={styles.heroImage} src={useBaseUrl("/img/hero.png")} draggable={false} />
+            <img
+              className={styles.heroImage}
+              src={useBaseUrl("/img/hero.webp")}
+              alt="Radon IDE in action"
+              width={1678}
+              height={1025}
+              draggable={false}
+            />
           </div>
         </motion.div>
         <div className={styles.heading}>
diff --git a/packages/docs/src/components/Hero/StartScreen/styles.module.css b/packages/docs/src/components/Hero/StartScreen/styles.module.css
index 6ebc16f66..5e4164e1a 100644
--- a/packages/docs/src/components/Hero/StartScreen/styles.module.css
+++ b/packages/docs/src/components/Hero/StartScreen/styles.module.css
@@ -65,6 +65,7 @@
   width: 100%;
   height: auto;
   margin-bottom: -10px;
+  background-color: #232736;
 }
 
 .logo {
diff --git a/packages/docs/src/components/Sections/Overview/OverviewItem/index.tsx b/packages/docs/src/components/Sections/Overview/OverviewItem/index.tsx
index ce8527728..af0b96c5b 100644
--- a/packages/docs/src/components/Sections/Overview/OverviewItem/index.tsx
+++ b/packages/docs/src/components/Sections/Overview/OverviewItem/index.tsx
@@ -2,15 +2,17 @@ import React from "react";
 import styles from "./styles.module.css";
 import { track } from "@vercel/analytics";
 import LinkButton from "@site/src/components/LinkButton";
+import { InView } from "react-intersection-observer";
 
 interface Props {
   label: string;
   title: string;
   body: string;
   mediaSrc?: string;
+  placeholderSrc?: string;
 }
 
-const OverviewItem = ({ label, title, body, mediaSrc }: Props) => {
+const OverviewItem = ({ label, title, body, mediaSrc, placeholderSrc }: Props) => {
   const handleButtonClick = () => {
     track("Overview CTA", { section: label });
   };
@@ -18,7 +20,7 @@ const OverviewItem = ({ label, title, body, mediaSrc }: Props) => {
     <>
       <section className={styles.description}>
         <p className={styles.itemLabel}>{label}</p>
-        <h2 className={styles.itemTitle}>{title}</h2>
+        <h3 className={styles.itemTitle}>{title}</h3>
         <p className={styles.itemBody}>{body}</p>
         <LinkButton
           title="Get started for free"
@@ -26,11 +28,19 @@ const OverviewItem = ({ label, title, body, mediaSrc }: Props) => {
           onClick={handleButtonClick}
         />
       </section>
-      <div className={styles.media}>
-        <video autoPlay loop muted playsInline>
-          <source src={mediaSrc} type="video/mp4" />
-        </video>
-      </div>
+      <InView triggerOnce>
+        {({ inView, ref }) => (
+          <div className={styles.media} ref={ref}>
+            {inView ? (
+              <video autoPlay loop muted playsInline poster={placeholderSrc}>
+                <source src={mediaSrc} type="video/mp4" />
+              </video>
+            ) : (
+              <img src={placeholderSrc} alt={title} fetchPriority="high" />
+            )}
+          </div>
+        )}
+      </InView>
     </>
   );
 };
diff --git a/packages/docs/src/components/Sections/Overview/OverviewItem/styles.module.css b/packages/docs/src/components/Sections/Overview/OverviewItem/styles.module.css
index c2e9e5e6f..e41f8e80b 100644
--- a/packages/docs/src/components/Sections/Overview/OverviewItem/styles.module.css
+++ b/packages/docs/src/components/Sections/Overview/OverviewItem/styles.module.css
@@ -3,7 +3,8 @@
   justify-content: center;
 }
 
-.media video {
+.media video,
+.media img {
   width: 100%;
   border-style: solid;
 }
@@ -43,13 +44,15 @@
   .itemTitle {
     font-size: 24px;
   }
-  .media video {
+  .media video,
+  .media img {
     border-width: 1.5rem !important;
   }
 }
 
 @media (max-width: 430px) {
-  .media video {
+  .media video,
+  .media img {
     border-width: 10px !important;
   }
   .itemTitle {
diff --git a/packages/docs/src/components/Sections/Overview/index.tsx b/packages/docs/src/components/Sections/Overview/index.tsx
index 28ed9df04..3b5d58a73 100644
--- a/packages/docs/src/components/Sections/Overview/index.tsx
+++ b/packages/docs/src/components/Sections/Overview/index.tsx
@@ -9,48 +9,56 @@ const items = [
     title: "Integrated experience",
     body: "See the preview of your application right where you need it the most – close to your codebase. \n\nRadon IDE runs IOS Simulator and Android emulator directly in your Visual Studio Code and Cursor project.",
     mediaSrc: "video/1_sztudio_integrated.mp4",
+    placeholderSrc: "video/placeholders/1_sztudio_integrated_placeholder.webp",
   },
   {
     label: "Element Inspector",
     title: "Click to inspect",
     body: "Using the built-in inspector you can jump directly from preview to a file where your component is defined. It can't really get simpler than that.",
     mediaSrc: "video/2_sztudio_inspect.mp4",
+    placeholderSrc: "video/placeholders/2_sztudio_inspect_placeholder.webp",
   },
   {
     label: "Debugger",
     title: "Use breakpoints right in VSCode",
     body: "Without any additional setup the extension allows to add a breakpoints in Visual Studio Code to debug your React Native application. It. Just. Works.\n\nIDE also automatically stops at runtime exceptions showing you the exact line of code where they happened.",
     mediaSrc: "video/3_sztudio_debugger.mp4",
+    placeholderSrc: "video/placeholders/3_sztudio_debugger_placeholder.webp",
   },
   {
     label: "Router integration",
     title: "Navigation made easier",
     body: "The Radon IDE integrates tightly with your deep-linked application allowing you to jump around the navigation structure (supports both React Navigation and Expo Router projects).",
     mediaSrc: "video/4_sztudio_url_bar.mp4",
+    placeholderSrc: "video/placeholders/4_sztudio_url_bar_placeholder.webp",
   },
   {
     label: "Logs",
     title: "Search through the logs easily",
     body: "Radon IDE uses the built-in VSCode console allowing you to filter through the logs.\n\nThe links displayed in the console are automatically linking back to your source code.",
     mediaSrc: "video/5_sztudio_logs_panel.mp4",
+    placeholderSrc: "video/placeholders/5_sztudio_logs_panel_placeholder.webp",
   },
   {
     label: "Previews",
     title: "Develop components in isolation",
     body: "Radon IDE comes with a package allowing to preview components in full isolation.\n\nDevelop your components individually without distractions.",
     mediaSrc: "video/6_sztudio_preview.mp4",
+    placeholderSrc: "video/placeholders/6_sztudio_preview_placeholder.webp",
   },
   {
     label: "Device settings",
     title: "Adjust device settings on the fly",
     body: "You can adjust text size and light/dark mode right from the Radon IDE.\n\nFocus just on your app without switching between windows.",
     mediaSrc: "video/7_sztudio_device_settings.mp4",
+    placeholderSrc: "video/placeholders/7_sztudio_device_settings_placeholder.webp",
   },
   {
     label: "Screen recording",
     title: "Instant replays",
     body: "Missed a bug? At any time you can re-watch what just happened on the device.\n\nNo need to manually start the recording ever again.",
     mediaSrc: "video/ide_screen_recording.mp4",
+    placeholderSrc: "video/placeholders/ide_screen_recording_placeholder.webp",
   },
 ];
 
@@ -62,7 +70,7 @@ const Overview = () => {
         <Elipse isSmall className={styles.elipse} />
       </div>
       <div className={styles.overview}>
-        <h1 className={styles.overviewHeading}>How it works?</h1>
+        <h2 className={styles.overviewHeading}>How it works?</h2>
         <div className={styles.overviewItemsContainer}>
           {items.map((item, idx) => (
             <div key={idx} className={styles.item}>
@@ -71,6 +79,7 @@ const Overview = () => {
                 title={item.title}
                 body={item.body}
                 mediaSrc={item.mediaSrc}
+                placeholderSrc={item.placeholderSrc}
               />
             </div>
           ))}
diff --git a/packages/docs/src/components/Sections/Overview/styles.module.css b/packages/docs/src/components/Sections/Overview/styles.module.css
index ec7eba214..578b00eda 100644
--- a/packages/docs/src/components/Sections/Overview/styles.module.css
+++ b/packages/docs/src/components/Sections/Overview/styles.module.css
@@ -33,12 +33,14 @@
   flex-direction: column;
 }
 
-.item:nth-of-type(2n) video {
+.item:nth-of-type(2n) video,
+.item:nth-of-type(2n) img {
   border-color: var(--swm-green-light-60);
   border-width: 1.5rem;
 }
 
-.item:nth-of-type(2n + 1) video {
+.item:nth-of-type(2n + 1) video,
+.item:nth-of-type(2n + 1) img {
   border-color: var(--swm-navy-light-20);
   border-width: 2.75rem 2.5rem;
 }
diff --git a/packages/docs/static/img/hero.png b/packages/docs/static/img/hero.png
deleted file mode 100644
index 00cba5f94..000000000
Binary files a/packages/docs/static/img/hero.png and /dev/null differ
diff --git a/packages/docs/static/img/hero.webp b/packages/docs/static/img/hero.webp
new file mode 100644
index 000000000..e2016fcbd
Binary files /dev/null and b/packages/docs/static/img/hero.webp differ
diff --git a/packages/docs/static/video/1_sztudio_integrated.mp4 b/packages/docs/static/video/1_sztudio_integrated.mp4
index d14b3ba09..a97f76614 100644
Binary files a/packages/docs/static/video/1_sztudio_integrated.mp4 and b/packages/docs/static/video/1_sztudio_integrated.mp4 differ
diff --git a/packages/docs/static/video/2_sztudio_inspect.mp4 b/packages/docs/static/video/2_sztudio_inspect.mp4
index 464eff002..0e171fbfd 100644
Binary files a/packages/docs/static/video/2_sztudio_inspect.mp4 and b/packages/docs/static/video/2_sztudio_inspect.mp4 differ
diff --git a/packages/docs/static/video/3_sztudio_debugger.mp4 b/packages/docs/static/video/3_sztudio_debugger.mp4
index dec48897c..ddd127912 100644
Binary files a/packages/docs/static/video/3_sztudio_debugger.mp4 and b/packages/docs/static/video/3_sztudio_debugger.mp4 differ
diff --git a/packages/docs/static/video/4_sztudio_url_bar.mp4 b/packages/docs/static/video/4_sztudio_url_bar.mp4
index 48b00bf99..0492f05bd 100644
Binary files a/packages/docs/static/video/4_sztudio_url_bar.mp4 and b/packages/docs/static/video/4_sztudio_url_bar.mp4 differ
diff --git a/packages/docs/static/video/5_sztudio_logs_panel.mp4 b/packages/docs/static/video/5_sztudio_logs_panel.mp4
index 89413ed47..72f77e20a 100644
Binary files a/packages/docs/static/video/5_sztudio_logs_panel.mp4 and b/packages/docs/static/video/5_sztudio_logs_panel.mp4 differ
diff --git a/packages/docs/static/video/6_sztudio_preview.mp4 b/packages/docs/static/video/6_sztudio_preview.mp4
index 93ab8023d..3dc72d2cb 100644
Binary files a/packages/docs/static/video/6_sztudio_preview.mp4 and b/packages/docs/static/video/6_sztudio_preview.mp4 differ
diff --git a/packages/docs/static/video/7_sztudio_device_settings.mp4 b/packages/docs/static/video/7_sztudio_device_settings.mp4
index e7187f81a..6bfb153f1 100644
Binary files a/packages/docs/static/video/7_sztudio_device_settings.mp4 and b/packages/docs/static/video/7_sztudio_device_settings.mp4 differ
diff --git a/packages/docs/static/video/ide_screen_recording.mp4 b/packages/docs/static/video/ide_screen_recording.mp4
index e08b84b75..9e0f31d0b 100644
Binary files a/packages/docs/static/video/ide_screen_recording.mp4 and b/packages/docs/static/video/ide_screen_recording.mp4 differ
diff --git a/packages/docs/static/video/placeholders/1_sztudio_integrated_placeholder.webp b/packages/docs/static/video/placeholders/1_sztudio_integrated_placeholder.webp
new file mode 100644
index 000000000..5780ea880
Binary files /dev/null and b/packages/docs/static/video/placeholders/1_sztudio_integrated_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/2_sztudio_inspect_placeholder.webp b/packages/docs/static/video/placeholders/2_sztudio_inspect_placeholder.webp
new file mode 100644
index 000000000..7f4ae1f6d
Binary files /dev/null and b/packages/docs/static/video/placeholders/2_sztudio_inspect_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/3_sztudio_debugger_placeholder.webp b/packages/docs/static/video/placeholders/3_sztudio_debugger_placeholder.webp
new file mode 100644
index 000000000..2df3f2bfd
Binary files /dev/null and b/packages/docs/static/video/placeholders/3_sztudio_debugger_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/4_sztudio_url_bar_placeholder.webp b/packages/docs/static/video/placeholders/4_sztudio_url_bar_placeholder.webp
new file mode 100644
index 000000000..2fbdc1dfe
Binary files /dev/null and b/packages/docs/static/video/placeholders/4_sztudio_url_bar_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/5_sztudio_logs_panel_placeholder.webp b/packages/docs/static/video/placeholders/5_sztudio_logs_panel_placeholder.webp
new file mode 100644
index 000000000..c2a837935
Binary files /dev/null and b/packages/docs/static/video/placeholders/5_sztudio_logs_panel_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/6_sztudio_preview_placeholder.webp b/packages/docs/static/video/placeholders/6_sztudio_preview_placeholder.webp
new file mode 100644
index 000000000..873293486
Binary files /dev/null and b/packages/docs/static/video/placeholders/6_sztudio_preview_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/7_sztudio_device_settings_placeholder.webp b/packages/docs/static/video/placeholders/7_sztudio_device_settings_placeholder.webp
new file mode 100644
index 000000000..01bf5b508
Binary files /dev/null and b/packages/docs/static/video/placeholders/7_sztudio_device_settings_placeholder.webp differ
diff --git a/packages/docs/static/video/placeholders/ide_screen_recording_placeholder.webp b/packages/docs/static/video/placeholders/ide_screen_recording_placeholder.webp
new file mode 100644
index 000000000..4db0ef1a0
Binary files /dev/null and b/packages/docs/static/video/placeholders/ide_screen_recording_placeholder.webp differ
diff --git a/packages/docs/yarn.lock b/packages/docs/yarn.lock
index 361f8a2db..4a51a5b3d 100644
--- a/packages/docs/yarn.lock
+++ b/packages/docs/yarn.lock
@@ -6656,6 +6656,11 @@ react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-intersection-observer@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.14.0.tgz#37bf6fbfbbb03bae55db50dfae79118b29b180d8"
+  integrity sha512-AYqlmDZn85VUmlODwYym9y5OlqY2cFyIu41dkN0GJWvhdbd19Mh16mz5IH6fO1gp5V4FfQOO4m0zGc04Tj13rQ==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"