diff --git a/docs/index.md b/docs/index.md
index eba594d..d832470 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -9,5 +9,5 @@ hide:
   <h1><img src="/assets/images/logo-hero.png"/></h1>
   <h2>An advanced 3D Gaussian Splatting renderer for THREE.js</h2>
   <a href="/docs/" class="md-button md-button--primary">Get started →</a>
-  <img class="hero-image" src="/assets/images/hero-image.png"/>
+  <iframe class="hero-image" src="/examples/hello-world/carousel.html"></iframe>
 </div>
\ No newline at end of file
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 1057b49..1ef50bf 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -18,11 +18,14 @@
       margin-bottom: 0rem;
     }
 
-    .hero img.hero-image {
+    .hero iframe.hero-image {
       width: 100%;
-      margin-top: 3rem;
       max-width: 800px;
+      height: 600px;
       border-radius: 15px;
+      display: block;
+      margin: auto;
+      margin-top: 2rem;
     }
 
     .hero img {
diff --git a/examples/hello-world/carousel.html b/examples/hello-world/carousel.html
index 44e6efa..c8ecce3 100644
--- a/examples/hello-world/carousel.html
+++ b/examples/hello-world/carousel.html
@@ -15,6 +15,7 @@
     {
       "imports": {
         "three": "/examples/js/vendor/three/build/three.module.js",
+        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
         "@forge-gfx/forge": "/dist/forge.module.js"
       }
     }