diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
index e383f193f..aa83a0149 100644
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -181,7 +181,7 @@
         this.dots.push({
           ID: id,
           Element: dot,
-          Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
+          Position: { x: null, y: null }, // WARNING: these values are not correct because dot pads bound rect does not exist yet
         });
       }
       if (!fromWorkspace) {
@@ -254,7 +254,7 @@
       this.dots.push({
         ID: id,
         Element: dot,
-        Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
+        Position: { x: relativePosition.x, y: relativePosition.y },
       });
     }
 
@@ -267,12 +267,17 @@
         { type: 'floating', angles: [] },
       ];
 
-      function getColorHarmonyType(numDots) {
+      function getColorHarmonyType(numDots, dots) {
         if (useHarmony !== '') {
           const selectedHarmony = colorHarmonies.find((harmony) => harmony.type === useHarmony);
+
           if (selectedHarmony) {
             if (action === 'remove') {
-              return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length - 1);
+              if (dots.length !== 0) {
+                return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length - 1);
+              } else {
+                return { type: 'floating', angles: [] };
+              }
             }
             if (action === 'add') {
               return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length + 1);
@@ -314,7 +319,8 @@
       let updatedDots = [...dots];
       const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
 
-      const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0));
+      const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
+
       this.useAlgo = harmonyAngles.type;
 
       if (!harmonyAngles || harmonyAngles.angles.length === 0) return [];
@@ -351,18 +357,36 @@
 
     handleColorPositions(colorPositions) {
       colorPositions.sort((a, b) => a.ID - b.ID);
-
       if (this.useAlgo === 'floating') {
+        const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
+        const rect = dotPad.getBoundingClientRect();
         this.dots.forEach((dot) => {
           dot.Element.style.zIndex = 999;
-          const colorFromPos = this.getColorFromPosition(dot.Position.x, dot.Position.y);
+
+          let pixelX, pixelY;
+          const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
+
+          if (dot.Position.x === null) {
+            const leftPercentage = parseFloat(dot.Element.style.left) / 100;
+            const topPercentage = parseFloat(dot.Element.style.top) / 100;
+
+            pixelX = leftPercentage * rect.width;
+            pixelY = topPercentage * rect.height;
+          } else {
+            pixelX = dot.Position.x;
+            pixelY = dot.Position.y;
+          }
+
+          const colorFromPos = this.getColorFromPosition(pixelX, pixelY);
+
           dot.Element.style.setProperty(
             '--zen-theme-picker-dot-color',
             `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
           );
         });
-      }
 
+        return;
+      }
       const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
 
       if (existingPrimaryDot) {
@@ -413,6 +437,7 @@
       if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
         if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
         let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo);
+
         this.handleColorPositions(colorPositions);
         this.updateCurrentWorkspace();
         return;
@@ -459,7 +484,7 @@
 
       const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
       const rect = gradient.getBoundingClientRect();
-      const padding = 60;
+      const padding = 90;
 
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
@@ -472,10 +497,13 @@
       const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
 
       clickedDot = this.dots.find((dot) => dot.Element === clickedElement);
+
       if (clickedDot) {
+        // TODO: this doesnt work and needs to be fixed
         existingPrimaryDot.ID = clickedDot.ID;
         clickedDot.ID = 0;
         clickedDot.Element.style.zIndex = 999;
+
         let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
         this.handleColorPositions(colorPositions);
         return;
@@ -560,7 +588,7 @@
           dot.ID = index;
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
         this.handleColorPositions(colorPositions);
 
         this.updateCurrentWorkspace();
@@ -625,14 +653,14 @@
     themedColors(colors) {
       const isDarkMode = this.isDarkMode;
       const factor = isDarkMode ? 0.5 : 1.1;
-      return colors.map((color) => {
-        return {
-          c: color.isCustom
-            ? color.c
-            : [Math.min(255, color.c[0] * factor), Math.min(255, color.c[1] * factor), Math.min(255, color.c[2] * factor)],
-          isCustom: color.isCustom,
-        };
-      });
+
+      return colors.map((color) => ({
+        c: color.isCustom
+          ? color.c
+          : [Math.min(255, color.c[0] * factor), Math.min(255, color.c[1] * factor), Math.min(255, color.c[2] * factor)],
+        isCustom: color.isCustom,
+        algorithm: color.algorithm,
+      }));
     }
 
     onOpacityChange(event) {
@@ -661,6 +689,8 @@
 
     getGradient(colors, forToolbar = false) {
       const themedColors = this.themedColors(colors);
+      this.useAlgo = themedColors[0].algorithm;
+
       if (themedColors.length === 0) {
         return forToolbar ? 'var(--zen-themed-toolbar-bg)' : 'var(--zen-themed-toolbar-bg-transparent)';
       } else if (themedColors.length === 1) {
@@ -917,14 +947,17 @@
     async updateCurrentWorkspace(skipSave = true) {
       this.updated = skipSave;
       const dots = this.panel.querySelectorAll('.zen-theme-picker-dot');
-      const colors = Array.from(dots).sort((a, b) => a.getAttribute('data-index') - b.getAttribute('data-index')).map((dot) => {
-        const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
-        if (color === 'undefined') {
-          return;
-        }
-        const isCustom = dot.classList.contains('custom');
-        return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom };
-      });
+      const colors = Array.from(dots)
+        .sort((a, b) => a.getAttribute('data-index') - b.getAttribute('data-index'))
+        .map((dot) => {
+          const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
+          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 };
+        });
       const gradient = ZenThemePicker.getTheme(colors, this.currentOpacity, this.currentRotation, this.currentTexture);
       let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();