diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index 1c660739c..8199ddff1 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -23,9 +23,11 @@ isPro: true
 
 <div id="theme-preview">
   <header>
-    <h2 data-theme-name="name">Theme</h2>
-    <wa-badge data-free-badge appearance="outlined" variant="neutral" hidden>FREE</wa-badge>
-    <wa-badge data-pro-badge appearance="accent" hidden>PRO</wa-badge>
+    <div class="wa-cluster">
+      <h2 data-theme-name="name">Theme</h2>
+      <wa-badge data-free-badge appearance="outlined" variant="neutral" hidden>FREE</wa-badge>
+      <wa-badge data-pro-badge appearance="accent" hidden>PRO</wa-badge>
+    </div>
     <p data-theme-description>Description</p>
   </header>
   <wa-comparison position="80">
@@ -152,7 +154,7 @@ isPro: true
   }
 
   wa-zoomable-frame {
-    aspect-ratio: 8 / 4;
+    aspect-ratio: 5 / 3;
   }
 
   #theme-viewer {
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 174d87912..169056e07 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -224,6 +224,32 @@ layout: false
             </div>
           </div>
         </wa-card>
+        <wa-card>
+          <div class="wa-stack">
+            <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
+            <div class="wa-cluster wa-gap-xs">
+              <wa-rating value="4.6" readonly tabindex="-1"></wa-rating>
+              <strong>4.6</strong>
+              <span>(419 reviews)</span>
+            </div>
+            <div class="wa-cluster wa-gap-xs">
+              <div class="wa-cluster wa-gap-3xs">
+                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
+                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
+                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
+              </div>
+              <span class="wa-caption-m">&bull;</span>
+              <wa-tag size="small">Cocktail Bar</wa-tag>
+              <wa-tag size="small">Gastropub</wa-tag>
+              <wa-tag size="small">Local Fare</wa-tag>
+              <wa-tag size="small">Gluten Free</wa-tag>
+            </div>
+            <div class="wa-flank wa-gap-xs">
+              <wa-icon name="location-dot"></wa-icon>
+              <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
+            </div>
+          </div>
+        </wa-card>
         <wa-callout variant="success">
           <wa-icon slot="icon" name="user-bounty-hunter"></wa-icon>
           <div class="wa-split">
@@ -251,32 +277,6 @@ layout: false
             </wa-button>
           </div>
         </wa-callout>
-        <wa-card>
-          <div class="wa-stack">
-            <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-            <div class="wa-cluster wa-gap-xs">
-              <wa-rating value="4.6" readonly tabindex="-1"></wa-rating>
-              <strong>4.6</strong>
-              <span>(419 reviews)</span>
-            </div>
-            <div class="wa-cluster wa-gap-xs">
-              <div class="wa-cluster wa-gap-3xs">
-                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
-                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
-                <wa-icon name="dollar" style="color: var(--wa-color-green-60)"></wa-icon>
-              </div>
-              <span class="wa-caption-m">&bull;</span>
-              <wa-tag size="small">Cocktail Bar</wa-tag>
-              <wa-tag size="small">Gastropub</wa-tag>
-              <wa-tag size="small">Local Fare</wa-tag>
-              <wa-tag size="small">Gluten Free</wa-tag>
-            </div>
-            <div class="wa-flank wa-gap-xs">
-              <wa-icon name="location-dot"></wa-icon>
-              <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-            </div>
-          </div>
-        </wa-card>
         <wa-card>
           <div class="wa-stack">
             <div class="wa-flank:end">