diff --git a/docs/assets/examples/layouts/ecommerce-1.html b/docs/assets/examples/layouts/ecommerce-1.html
index b156e52a6..cc58c6a74 100644
--- a/docs/assets/examples/layouts/ecommerce-1.html
+++ b/docs/assets/examples/layouts/ecommerce-1.html
@@ -18,14 +18,42 @@
       deals!</a>
     <header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
       <div style="background-color: black; height: 40px; width: 40px"></div>
-      <wa-input placeholder="Medium" size="medium" class="wa-desktop-only" style="width: 50%;">
-        <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
+      <wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
+        <wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
       </wa-input>
-      <div class="wa-desktop-only"><wa-icon name="exclamation-triangle"></wa-icon><wa-icon
-          name="exclamation-triangle"></wa-icon></div>
+      <div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
     </header>
-    <main>
-      Main
+    <main style="margin: 0 auto; max-width: 140ch;">
+      <img style="object-fit: none;" src="https://uploads.webawesome.com/cta-1440.jpg" alt="" sizes="(max-width: 480px) 480px,
+         (max-width: 600px) 600px, (max-width: 900px) 900px, 1440px"
+        srcset="https://uploads.webawesome.com/cta-480.jpg 480w, https://uploads.webawesome.com/cta-600.jpg 600w, https://uploads.webawesome.com/cta-900.jpg 900w, https://uploads.webawesome.com/cta-1440.jpg 1440w" />
+      <!--<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
+        <h2 class="wa-heading-3xl" style="text-align: center">
+          Unlock Your Future: <br />Start Learning Web Development Today!
+        </h2>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-button>Get Started</wa-button>
+          <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+        </div>
+      </div>-->
+      <div class="wa-stack wa-align">
+        <h2 class="wa-heading-2xl">Recipes</h2>
+        <div class="wa-grid">
+          <a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+            style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
+            Appetizers and Snacks
+          </a>
+          <a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+            style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center">
+            Main Dishes
+          </a>
+          <a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+            style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
+            Desserts
+          </a>
+        </div>
+        <wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
+      </div>
     </main>
     <footer slot="footer">Footer</footer>
   </wa-page>