diff --git a/src/components/ColorScatterPlotPolarGuide.svelte b/src/components/ColorScatterPlotPolarGuide.svelte
index 5dc76890..c7ee4e88 100644
--- a/src/components/ColorScatterPlotPolarGuide.svelte
+++ b/src/components/ColorScatterPlotPolarGuide.svelte
@@ -25,36 +25,36 @@
   //   $: axisFormatter =
   //     colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel;
 
-  //   $: points = {
-  //     centerTop: {
-  //       x: (xScale.range()[1] - xScale.range()[0]) / 2,
-  //       y: yScale.range()[0],
-  //       labelAdjust: { x: 0, y: -3 },
-  //       anchor: "middle",
-  //       label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
-  //     },
-  //     centerBottom: {
-  //       x: (xScale.range()[1] - xScale.range()[0]) / 2,
-  //       y: yScale.range()[1],
-  //       anchor: "middle",
-  //       labelAdjust: { x: 0, y: 15 },
-  //       label: axisFormatter(yScale.domain()[1]),
-  //     },
-  //     centerLeft: {
-  //       x: xScale.range()[0],
-  //       y: (yScale.range()[1] - yScale.range()[0]) / 2,
-  //       anchor: "start",
-  //       labelAdjust: { x: 5, y: -3 },
-  //       label: axisFormatter(xScale.domain()[0]),
-  //     },
-  //     centerRight: {
-  //       x: xScale.range()[1],
-  //       y: (yScale.range()[1] - yScale.range()[0]) / 2,
-  //       anchor: "end",
-  //       labelAdjust: { x: -5, y: -3 },
-  //       label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
-  //     },
-  //   };
+  $: points = {
+    centerTop: {
+      x: (xScale.range()[1] - xScale.range()[0]) / 2,
+      y: yScale.range()[0],
+      labelAdjust: { x: 0, y: -3 },
+      anchor: "middle",
+      // label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
+    },
+    centerBottom: {
+      x: (xScale.range()[1] - xScale.range()[0]) / 2,
+      y: yScale.range()[1],
+      anchor: "middle",
+      labelAdjust: { x: 0, y: 15 },
+      // label: axisFormatter(yScale.domain()[1]),
+    },
+    centerLeft: {
+      x: xScale.range()[0],
+      y: (yScale.range()[1] - yScale.range()[0]) / 2,
+      anchor: "start",
+      labelAdjust: { x: 5, y: -3 },
+      // label: axisFormatter(xScale.domain()[0]),
+    },
+    centerRight: {
+      x: xScale.range()[1],
+      y: (yScale.range()[1] - yScale.range()[0]) / 2,
+      anchor: "end",
+      labelAdjust: { x: -5, y: -3 },
+      // label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
+    },
+  };
   $: miniConfig = {
     xIdx: config.xChannelIndex,
     yIdx: config.yChannelIndex,
@@ -67,16 +67,16 @@
     nums.reduce((acc, x) => acc + x, 0) / nums.length;
   $: fillColor = (i: number, j: number) => {
     const { xIdx, yIdx, zIdx } = miniConfig;
-    if (true || (dragging && focusedColors.length === 1)) {
+    if (dragging && focusedColors.length === 1) {
       const coords = [0, 0, 0] as [number, number, number];
       const angle = (j / angleBgResolution) * 360;
       const r = rNonDimScale(i / rBgResolution);
       coords[xIdx] = r;
       coords[yIdx] = angle;
-      //   const avgZChannel = avgNums(
-      //     focusedColors.map((x) => colors[x].toChannels()[zIdx])
-      //   );
-      const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx]));
+      const avgZChannel = avgNums(
+        focusedColors.map((x) => colors[x].toChannels()[zIdx])
+      );
+      //   const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx]));
       coords[zIdx] = avgZChannel;
       return colorFromChannels(coords, colorSpace as any).toDisplay();
     }
@@ -88,29 +88,52 @@
     .range([0, Math.PI * 2]);
 </script>
 
-<g transform="translate({plotWidth / 2}, {plotHeight / 2})">
-  {#each [...new Array(rBgResolution)] as _, i}
-    {#each [...new Array(angleBgResolution)] as _, j}
-      <!-- <rect
-      x={xScale(xNonDimScale(i / bgResolution))}
-      y={yScale(yNonDimScale(j / bgResolution))}
-      width={plotWidth / bgResolution}
-      height={plotHeight / bgResolution}
-      class="transition-opacity duration-500 ease-in-out"
-      fill={fillColor(i, j)}
-      stroke={"white"}
-    /> -->
-      <path
-        fill={fillColor(i, j)}
-        stroke={"white"}
-        d={arcScale({
-          startAngle: angleScale(j) + Math.PI / 2,
-          endAngle: angleScale(j + 1) + Math.PI / 2,
-          innerRadius: rScale(rNonDimScale(i / rBgResolution)),
-          outerRadius: rScale(rNonDimScale((i + 1) / rBgResolution)),
-        })}
-      />
+{#if $configStore.showColorBackground}
+  <g transform="translate({plotWidth / 2}, {plotHeight / 2})">
+    {#each [...new Array(rBgResolution)] as _, i}
+      {#each [...new Array(angleBgResolution)] as _, j}
+        <path
+          fill={fillColor(i, j)}
+          stroke={"white"}
+          opacity={dragging && focusedColors.length === 1 ? 1 : 0}
+          class="transition-opacity duration-500 ease-in-out"
+          d={arcScale({
+            startAngle: angleScale(j) + Math.PI / 2,
+            endAngle: angleScale(j + 1) + Math.PI / 2,
+            innerRadius: rScale(rNonDimScale(i / rBgResolution)),
+            outerRadius: rScale(rNonDimScale((i + 1) / rBgResolution)),
+          })}
+        />
+      {/each}
     {/each}
+  </g>
+{/if}
+
+<line
+  x1={points.centerTop.x}
+  y1={points.centerTop.y}
+  x2={points.centerBottom.x}
+  y2={points.centerBottom.y}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+<line
+  x1={points.centerLeft.x}
+  y1={points.centerLeft.y}
+  x2={points.centerRight.x}
+  y2={points.centerRight.y}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+
+<g transform="translate({plotWidth / 2}, {plotHeight / 2})">
+  {#each [...new Array(rBgResolution + 1)] as _, i}
+    <circle
+      cx={0}
+      cy={0}
+      r={rScale(rNonDimScale(i / rBgResolution))}
+      fill="none"
+      stroke={axisColor}
+    />
   {/each}
 </g>
-<!-- opacity={dragging && focusedColors.length === 1 ? 1 : 0} -->
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index 6295eb2f..68133f6e 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -166,11 +166,12 @@ export class CIELAB extends Color {
 export class HSV extends Color {
   name = "HSV";
   channelNames = ["h", "s", "v"];
+  isPolar = true;
   channels = { h: 0, s: 0, v: 0 };
   domains = { h: [0, 360], s: [0, 100], v: [0, 100] } as Domain;
   chromaBind = chroma.hsv;
   spaceName = "hsv" as const;
-  dimensionToChannel = { x: "s", y: "v", z: "h" };
+  dimensionToChannel = { x: "v", y: "h", z: "s" };
   toString(): string {
     const [h, s, v] = this.stringChannels();
     return `color(hsv ${h} ${s} ${v})`;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 97f0e25c..2f4c25e6 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -211,17 +211,11 @@ function makeExtents(arr: number[][]) {
   ) as { x: number[]; y: number[]; z: number[] };
 }
 
-export function makePosAndSizes(
-  pickedColors: number[][],
-  config: (typeof colorPickerConfig)[string]
-) {
+// works over screen space coordinates
+export function makePosAndSizes(pickedColors: number[][]) {
   const selectionExtents = makeExtents(pickedColors);
-  console.log(selectionExtents, pickedColors);
-  const makePos = (key: keyof typeof selectionExtents) => {
-    // const [a, b] = config[`${key}Domain`];
-    // return selectionExtents[key][a > b ? 1 : 0];
-    return selectionExtents[key][0];
-  };
+  const makePos = (key: keyof typeof selectionExtents) =>
+    selectionExtents[key][0];
   const diff = (key: keyof typeof selectionExtents) => {
     const [a, b] = selectionExtents[key];
     return Math.abs(a - b);
@@ -233,13 +227,6 @@ export function makePosAndSizes(
   let selectionWidth = diff("x") + 30;
   let selectionHeight = diff("y") + 30;
   let selectionDepth = diff("z");
-  // let xPos = makePos("x");
-  // let yPos = makePos("y");
-  // let zPos = makePos("z");
-
-  // let selectionWidth = diff("x");
-  // let selectionHeight = diff("y");
-  // let selectionDepth = diff("z");
   return { xPos, yPos, zPos, selectionWidth, selectionHeight, selectionDepth };
 }