diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index d86d86651..14d4f4151 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -23,12 +23,12 @@ isPro: true
 
 <wa-comparison position="80">
   <wa-zoomable-frame
-    slot="after"
+    slot="before"
     without-controls
     without-interaction
   ></wa-zoomable-frame>
   <wa-zoomable-frame
-    slot="before"
+    slot="after"
     without-controls
     without-interaction
   ></wa-zoomable-frame>
@@ -99,6 +99,16 @@ isPro: true
     margin-inline: auto;
   }
 
+  wa-comparison {
+    &::part(before) {
+      background-color: white;
+    }
+
+    &::part(after) {
+      background-color: var(--wa-color-surface-default);
+    }
+  }
+
   wa-zoomable-frame {
     aspect-ratio: 8 / 4;
   }