diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
index 751b53a0f..909d75028 100644
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -189,6 +189,10 @@
         dot.style.left = `${x * 100}%`;
         dot.style.top = `${y * 100}%`;
 
+        if (this.dots.length < 1) {
+          dot.classList.add('primary');
+        }
+
         dotPad.appendChild(dot);
         let id = this.dots.length;
 
@@ -197,7 +201,7 @@
         this.dots.push({
           ID: id,
           Element: dot,
-          Position: { x: null, y: null }, // WARNING: these values are not correct because dot pads bound rect does not exist yet
+          Position: { x: null, y: null }, // at some point possition should instead be stored as percentege just so that the size of the color picker does not matter.
         });
       }
       if (!fromWorkspace) {
@@ -262,7 +266,9 @@
         const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
         if (existingPrimaryDot) {
           existingPrimaryDot.ID = this.dots.length;
+          existingPrimaryDot.Element.classList.remove('primary');
         }
+        dot.classList.add('primary');
       }
 
       const colorFromPos = this.getColorFromPosition(relativePosition.x, relativePosition.y);
@@ -467,6 +473,11 @@
 
         this.dots.forEach((dot, index) => {
           dot.ID = index;
+          if (index === 0) {
+            dot.Element.classList.add('primary');
+          } else {
+            dot.Element.classList.remove('primary');
+          }
         });
 
         let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
@@ -603,6 +614,11 @@
         // Reassign the IDs after sorting
         this.dots.forEach((dot, index) => {
           dot.ID = index;
+          if (index === 0) {
+            dot.Element.classList.add('primary');
+          } else {
+            dot.Element.classList.remove('primary');
+          }
         });
 
         let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
@@ -971,12 +987,14 @@
         .sort((a, b) => a.getAttribute('data-index') - b.getAttribute('data-index'))
         .map((dot) => {
           const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
+          const isPrimary = dot.classList.contains('primary');
+
           if (color === 'undefined') {
             return;
           }
           const isCustom = dot.classList.contains('custom');
           const algorithm = this.useAlgo;
-          return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom, algorithm };
+          return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom, algorithm, isPrimary };
         });
       const gradient = ZenThemePicker.getTheme(colors, this.currentOpacity, this.currentRotation, this.currentTexture);
       let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();