diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index e8525521d..457352f00 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -47,6 +47,9 @@
 
         content/browser/zen-styles/zen-compact-mode.css         (content/zen-styles/zen-compact-mode.css)
 
+        # Images
+        content/browser/zen-images/gradient.png                 (content/zen-images/gradient.png)
+
         # Actors
         content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (content/zen-components/src/actors/ZenThemeMarketplaceParent.sys.mjs)
         content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs  (content/zen-components/src/actors/ZenThemeMarketplaceChild.sys.mjs)
diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index 4c79e99ad..23e6294c9 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit 4c79e99adf464d00bdd7d4bdc4c3d50162110f25
+Subproject commit 23e6294c9a134a3962bfeb60c2cec33a759a25f8
diff --git a/src/browser/base/content/zen-images/gradient.png b/src/browser/base/content/zen-images/gradient.png
new file mode 100644
index 000000000..b65f34ae5
Binary files /dev/null and b/src/browser/base/content/zen-images/gradient.png differ
diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index 17ea2fd59..2a1733a84 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -104,8 +104,7 @@
 <panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
   <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
-      <hbox class="zen-theme-picker-gradient">
-      </hbox>
+      <hbox class="zen-theme-picker-gradient"></hbox>
     </panelview>
   </panelmultiview>
 </panel>
diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css
index 98210008b..92cbac60f 100644
--- a/src/browser/base/content/zen-styles/zen-gradient-generator.css
+++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css
@@ -8,20 +8,34 @@
   position: relative;
   border-radius: var(--zen-border-radius);
   border: 1px solid var(--zen-colors-border);
-  background: var(--zen-themed-toolbar-bg);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
   min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
 
+  background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
+
+  &::before {
+    background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 50%, transparent 50%);
+    backdrop-filter: blur(5px);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+  }
+
   & .zen-theme-picker-dot {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    z-index: 2;
+    width: 20px;
+    height: 20px;
     border-radius: 50%;
     background: var(--zen-theme-picker-dot-color);
     box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
     cursor: pointer;
-    border: 3px solid var(--zen-colors-border);
+    border: 2px solid #fff;
     animation: zen-theme-picker-dot-animation .5s;
     transition: transform .2s;