diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte
index fff6d716..6de30189 100644
--- a/src/components/ColorScatterPlot.svelte
+++ b/src/components/ColorScatterPlot.svelte
@@ -10,6 +10,7 @@
     makeScales,
     dragEventToColorZ,
     dragEventToColorXY,
+    screenSpaceAvg,
   } from "../lib/utils";
   import configStore from "../stores/config-store";
   import { scaleLinear } from "d3-scale";
@@ -100,6 +101,9 @@
   $: x = scales.x;
   $: y = scales.y;
   $: z = scales.z;
+  // screen -> color space
+  $: xInv = scales.xInv;
+  $: yInv = scales.yInv;
 
   $: CircleProps = (color: Color, i: number) => ({
     cx: x(color),
@@ -137,7 +141,13 @@
     dragging: interactionMode === "drag",
   };
 
-  let interactionMode: "idle" | "drag" | "select" | "point-touch" = "idle";
+  let interactionMode:
+    | "idle"
+    | "drag"
+    | "select"
+    | "point-touch"
+    | "stretch"
+    | "rotate" = "idle";
   let dragTargetPos = { x: 0, y: 0 };
   let dragDelta = { x: 0, y: 0 };
   function dragStart(e: any) {
@@ -258,6 +268,126 @@
     "fill-opacity": "0.5",
     class: "pointer-events-none",
   };
+
+  $: initialRotationColors = [] as Color[];
+  $: initialRotatePos = { x: 0, y: 0 };
+  $: rotatePivotCenter = { x: 0, y: 0 };
+  $: rotatePosition = { x: 0, y: 0 };
+
+  function rotateStart(e: any) {
+    // console.log("rotate start");
+    startDragging();
+    interactionMode = "rotate";
+    initialRotationColors = [...colors];
+    // const pos = toXY(e);
+    initialRotatePos = {
+      x: e.target.getBBox().x,
+      y: e.target.getBBox().y,
+    };
+    rotatePivotCenter = screenSpaceAvg(
+      focusedColors
+        .map((x) => initialRotationColors[x])
+        .map((el) => ({
+          x: x(el),
+          y: y(el),
+        }))
+    );
+    rotateUpdate(e);
+  }
+
+  function rotateUpdate(e: any) {
+    // console.log("rotate update");
+    let currentPos = toXY(e);
+    currentPos = {
+      x: currentPos.x - svgContainer.getBoundingClientRect().x,
+      y: currentPos.y - svgContainer.getBoundingClientRect().y,
+    };
+    rotatePosition = currentPos;
+    let newAngle = Math.atan2(
+      currentPos.y - rotatePivotCenter.y,
+      currentPos.x - rotatePivotCenter.x
+    );
+    const initialAngle = Math.atan2(
+      initialRotatePos.y - rotatePivotCenter.y,
+      initialRotatePos.x - rotatePivotCenter.x
+    );
+    let angle = newAngle - initialAngle;
+    angle = angle < 0 ? angle + 2 * Math.PI : angle;
+    const xc = rotatePivotCenter.x;
+    const yc = rotatePivotCenter.y;
+    const newColors = focusedColors
+      .map((x) => initialRotationColors[x])
+      .map((color) => {
+        const x1 = x(color);
+        const y1 = y(color);
+        const x3 =
+          Math.cos(angle) * (x1 - xc) - Math.sin(angle) * (y1 - yc) + xc;
+        const y3 =
+          Math.sin(angle) * (x1 - xc) + Math.cos(angle) * (y1 - yc) + yc;
+        const newChannels = [...color.toChannels()] as [number, number, number];
+        newChannels[config.xChannelIndex] = xInv(x3, y3);
+        newChannels[config.yChannelIndex] = yInv(x3, y3);
+        return color.fromChannels(newChannels);
+      });
+    onColorsChange(newColors);
+  }
+  function rotateEnd() {
+    // console.log("rotate end");
+    interactionMode = "idle";
+    stopDragging();
+  }
+
+  $: handles = [
+    // {
+    //   type: "stretch",
+    //   label: "left",
+    //   x: pos.xPos - 15,
+    //   y: pos.yPos + pos.selectionHeight / 2,
+    // },
+    // {
+    //   type: "stretch",
+    //   label: "right",
+    //   x: pos.xPos + pos.selectionWidth + 5,
+    //   y: pos.yPos + pos.selectionHeight / 2,
+    // },
+    // {
+    //   type: "stretch",
+    //   label: "top",
+    //   x: pos.xPos + pos.selectionWidth / 2,
+    //   y: pos.yPos - 15,
+    // },
+    // {
+    //   type: "stretch",
+    //   label: "bottom",
+    //   x: pos.xPos + pos.selectionWidth / 2,
+    //   y: pos.yPos + pos.selectionHeight + 5,
+    // },
+    {
+      type: "rotate",
+      label: "",
+      x: pos.xPos,
+      y: pos.yPos,
+    },
+    {
+      type: "rotate",
+      label: "",
+      x: pos.xPos,
+      y: pos.yPos + pos.selectionHeight,
+    },
+    {
+      type: "rotate",
+      label: "",
+      x: pos.xPos + pos.selectionWidth,
+      y: pos.yPos,
+    },
+    {
+      type: "rotate",
+      label: "",
+      x: pos.xPos + pos.selectionWidth,
+      y: pos.yPos + pos.selectionHeight,
+    },
+  ];
+  let svgContainer: any;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -269,7 +399,7 @@
     </span>
     <div class="flex h-full">
       <div class="h-full py-4" style="max-height: {height}px"></div>
-      <svg {width} {height} class="ml-2">
+      <svg {width} {height} class="ml-2" bind:this={svgContainer}>
         <g transform={`translate(${margin.left}, ${margin.top})`}>
           {#if config.isPolar}
             <ColorScatterPlotPolarGuide {...guideProps} {rScale} />
@@ -283,10 +413,14 @@
             on:touchstart|preventDefault={selectionStart(false)}
             on:touchmove|preventDefault={interactionMode === "drag"
               ? dragUpdate(false)
-              : selectionUpdate(false)}
+              : interactionMode === "rotate"
+                ? rotateUpdate
+                : selectionUpdate(false)}
             on:touchend|preventDefault={interactionMode === "drag"
               ? dragEnd(false)
-              : selectionEnd(false)}
+              : interactionMode === "rotate"
+                ? rotateEnd
+                : selectionEnd(false)}
           />
 
           <g
@@ -374,6 +508,51 @@
                 on:mousedown|preventDefault={(e) => dragStart(e)}
               />
             {/if}
+            {#if focusedColors.length > 1}
+              {#each handles as handle}
+                {#if handle.type === "stretch"}
+                  <rect
+                    x={handle.x}
+                    y={handle.y}
+                    width={10}
+                    fill={"black"}
+                    cursor="grab"
+                    height={10}
+                  />
+                {/if}
+                {#if handle.type === "rotate"}
+                  <circle
+                    cx={handle.x}
+                    cy={handle.y}
+                    r={10}
+                    fill={"steelblue"}
+                    opacity={0.5}
+                    cursor="grab"
+                    on:mousedown|preventDefault|stopPropagation={rotateStart}
+                    on:mouseup|preventDefault|stopPropagation={rotateEnd}
+                    on:touchstart|preventDefault|stopPropagation={rotateStart}
+                    on:touchmove|preventDefault|stopPropagation={rotateUpdate}
+                    on:touchend|preventDefault|stopPropagation={rotateEnd}
+                  />
+                {/if}
+              {/each}
+              {#if interactionMode === "rotate"}
+                <circle
+                  fill="green"
+                  r={10}
+                  cx={rotatePosition.x}
+                  cy={rotatePosition.y}
+                  pointer-events="none"
+                />
+                <line
+                  x1={rotatePivotCenter.x}
+                  y1={rotatePivotCenter.y}
+                  x2={rotatePosition.x}
+                  y2={rotatePosition.y}
+                  stroke="green"
+                />
+              {/if}
+            {/if}
           </g>
         </g>
         {#if interactionMode === "select"}
@@ -400,6 +579,15 @@
             on:touchend|preventDefault={dragEnd(false)}
           />
         {/if}
+        {#if interactionMode === "rotate"}
+          <rect
+            {...fillParamsXY}
+            on:mousemove|preventDefault={rotateUpdate}
+            on:mouseup|preventDefault={rotateEnd}
+            on:touchmove|preventDefault={rotateUpdate}
+            on:touchend|preventDefault={rotateEnd}
+          />
+        {/if}
       </svg>
     </div>
   </div>
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 996f0616..07204775 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -8,7 +8,6 @@
   import DistributePoints from "./contextual-tools/DistributePoints.svelte";
   import AdjustColor from "./contextual-tools/AdjustColor.svelte";
   import AddColor from "./contextual-tools/AddColor.svelte";
-  import Rotate from "./contextual-tools/Rotate.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -31,7 +30,6 @@
 {/if}
 
 <AdjustColor />
-<Rotate />
 <DistributePoints />
 <AlignSelection />
 <ModifySelection />
diff --git a/src/content-modules/contextual-tools/Rotate.svelte b/src/content-modules/contextual-tools/Rotate.svelte
deleted file mode 100644
index deb77bbb..00000000
--- a/src/content-modules/contextual-tools/Rotate.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-  import { Color } from "../../lib/Color";
-  import colorStore from "../../stores/color-store";
-  import focusStore from "../../stores/focus-store";
-  import { avgColors } from "../../lib/utils";
-  import { buttonStyle, buttonStyleSelected } from "../../lib/styles";
-  import Tooltip from "../../components/Tooltip.svelte";
-
-  let axis = "z" as "x" | "y" | "z";
-  $: focusedColors = $focusStore.focusedColors;
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: colors = currentPal.colors;
-  $: angle = 0;
-
-  $: colorSpace = currentPal.colorSpace;
-  $: angle, rotatePoints();
-  $: memorizedColors = false as false | Color[];
-  let rotationPoint = "zero " as number | "avg" | "zero";
-  function rotatePoints() {
-    if (focusedColors.length === 0) {
-      // memorizedColors = false;
-      return;
-    }
-    if (!memorizedColors) {
-      memorizedColors = [...colors];
-      angle = 0;
-    }
-    let localColors = memorizedColors;
-
-    let centerChannels = [0, 0, 0];
-
-    if (rotationPoint === "avg") {
-      const clrs = focusedColors.map((x) => localColors[x]);
-      // @ts-ignore
-      let center = avgColors(clrs, colorSpace);
-      centerChannels = center.toChannels();
-    } else if (rotationPoint === "zero") {
-      centerChannels = [0, 0, 0];
-    } else if (localColors[rotationPoint]) {
-      centerChannels = localColors[rotationPoint].toChannels();
-    } else {
-      centerChannels = [0, 0, 0];
-    }
-
-    const rotated = Object.fromEntries(
-      focusedColors
-        .map((x) => localColors[x])
-        .map((localColor) => {
-          const color = Color.toColorSpace(localColor, colorSpace);
-          const channels = color.toChannels();
-          //   https://math.stackexchange.com/questions/4354438/how-to-rotate-a-point-on-a-cartesian-plane-around-something-other-than-the-origi
-          const channelMap = {
-            x: [0, 2],
-            y: [0, 1],
-            z: [1, 2],
-          };
-          const channelA = channelMap[axis][0];
-          const channelB = channelMap[axis][1];
-
-          const x1 = channels[channelA];
-          const y1 = channels[channelB];
-          const xc = centerChannels[channelA];
-          const yc = centerChannels[channelB];
-          const radAngle = (angle / 360) * Math.PI * 2;
-          const x3 =
-            Math.cos(radAngle) * (x1 - xc) -
-            Math.sin(radAngle) * (y1 - yc) +
-            xc;
-          const y3 =
-            Math.sin(radAngle) * (x1 - xc) +
-            Math.cos(radAngle) * (y1 - yc) +
-            yc;
-          let newChannels = [0, 0, 0] as [number, number, number];
-          switch (axis) {
-            case "x":
-              newChannels = [x3, channels[1], y3];
-              break;
-            case "y":
-              newChannels = [x3, y3, channels[2]];
-              break;
-            case "z":
-              newChannels = [channels[0], x3, y3];
-              break;
-          }
-          return Color.colorFromChannels(newChannels, colorSpace);
-        })
-        .map((x, y) => [y, x])
-    );
-    const newColors = localColors.map((x, idx) =>
-      focusedColors.includes(idx) ? rotated[focusedColors.indexOf(idx)] : x
-    );
-    colorStore.setCurrentPalColors(newColors);
-  }
-
-  function setRotatePoint(point: typeof rotationPoint) {
-    rotationPoint = point;
-  }
-</script>
-
-{#if focusedColors.length > 0}
-  <div class="w-full border-t-2 border-black my-2"></div>
-  <div class="flex justify-between w-full">
-    <div class="font-bold">Rotate</div>
-    <Tooltip>
-      <button slot="target" let:toggle on:click={toggle}>⚙</button>
-      <div slot="content">
-        <div class="flex flex-col">
-          <div>Around which point?</div>
-          <div class="flex flex-wrap">
-            <button
-              on:click={() => setRotatePoint("avg")}
-              class={`${buttonStyle} mb-2 ${
-                rotationPoint === "avg" ? buttonStyleSelected : ""
-              }`}
-            >
-              An average of the selected colors
-            </button>
-            <button
-              on:click={() => setRotatePoint("zero")}
-              class={`${buttonStyle} mb-2 ${
-                rotationPoint === "zero" ? buttonStyleSelected : ""
-              }`}
-            >
-              Around zero
-            </button>
-
-            {#each focusedColors as colorIdx}
-              <button
-                class={`${buttonStyle} flex justify-center items-center ${
-                  rotationPoint === colorIdx ? buttonStyleSelected : ""
-                }`}
-                on:click={() => setRotatePoint(colorIdx)}
-              >
-                {colors[colorIdx].toHex()}
-                <span
-                  style={`background-color: ${colors[colorIdx].toHex()}`}
-                  class="rounded-full w-3 h-3 ml-2"
-                ></span>
-              </button>
-            {/each}
-          </div>
-          <div class="flex">
-            Rotate about the
-            <select bind:value={axis} class="mx-1">
-              {#each ["x", "y", "z"] as axis}
-                <option value={axis}>{axis}</option>
-              {/each}
-            </select>
-            Axis
-          </div>
-        </div>
-      </div>
-    </Tooltip>
-  </div>
-  <div class="flex flex-col">
-    <div class="w-full flex justify-between">
-      <input min={0} max={360} step={1} type="range" bind:value={angle} />
-      <input
-        min={0}
-        max={360}
-        step={1}
-        type="number"
-        bind:value={angle}
-        class="w-16 text-sm"
-      />
-    </div>
-  </div>
-{/if}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7cd1803b..64962281 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -384,3 +384,9 @@ export const dragEventToColorXY: dragEventToColor = (
   coords[config.yChannelIndex] = newVal[1];
   return Color.colorFromChannels(coords, colorSpace);
 };
+
+export const screenSpaceAvg = (colors: { x: number; y: number }[]) => {
+  const xAvg = colors.reduce((acc, x) => acc + x.x, 0) / colors.length;
+  const yAvg = colors.reduce((acc, x) => acc + x.y, 0) / colors.length;
+  return { x: xAvg, y: yAvg };
+};