diff --git a/apps/palette/web/src/components/actions/DeleteColorAction.tsx b/apps/palette/web/src/components/actions/DeleteColorAction.tsx
new file mode 100644
index 00000000..c473e144
--- /dev/null
+++ b/apps/palette/web/src/components/actions/DeleteColorAction.tsx
@@ -0,0 +1,32 @@
+import { ActionButton } from '@a-type/ui/components/actions';
+import { Icon } from '@a-type/ui/components/icon';
+import { useColorSelection } from '../projects/hooks.js';
+import { Project } from '@palette.biscuits/verdant';
+import { hooks } from '@/hooks.js';
+
+export function DeleteColorAction({ project }: { project: Project }) {
+	const { colors } = hooks.useWatch(project);
+
+	const [selectedId, selectId] = useColorSelection();
+
+	const deleteSelectedColor = () => {
+		if (selectedId) {
+			const val = colors.find((c) => c.get('id') === selectedId);
+			if (val) {
+				colors.removeAll(val);
+			}
+			selectId(null);
+		}
+	};
+
+	return (
+		<ActionButton
+			color="destructive"
+			onClick={deleteSelectedColor}
+			icon={<Icon name="trash" />}
+			visible={!!selectedId}
+		>
+			Delete color
+		</ActionButton>
+	);
+}
diff --git a/apps/palette/web/src/components/actions/SortAction.tsx b/apps/palette/web/src/components/actions/SortAction.tsx
new file mode 100644
index 00000000..b07b5cad
--- /dev/null
+++ b/apps/palette/web/src/components/actions/SortAction.tsx
@@ -0,0 +1,25 @@
+import { ActionButton } from '@a-type/ui/components/actions';
+import { ColorSort, useSort } from '../projects/hooks.js';
+import { Icon } from '@a-type/ui/components/icon';
+
+export function SortAction() {
+	const [sort, setSort] = useSort();
+
+	const goNext = () => {
+		const currentIndex = orderedOptions.indexOf(sort);
+		const nextIndex = (currentIndex + 1) % orderedOptions.length;
+		setSort(orderedOptions[nextIndex]);
+	};
+
+	return (
+		<ActionButton
+			onClick={goNext}
+			icon={<Icon name="drag_vertical" />}
+			className="capitalize"
+		>
+			{sort}
+		</ActionButton>
+	);
+}
+
+const orderedOptions: ColorSort[] = ['hue', 'saturation', 'lightness'];
diff --git a/apps/palette/web/src/components/actions/ToggleBubblesAction.tsx b/apps/palette/web/src/components/actions/ToggleBubblesAction.tsx
new file mode 100644
index 00000000..9ac5e520
--- /dev/null
+++ b/apps/palette/web/src/components/actions/ToggleBubblesAction.tsx
@@ -0,0 +1,21 @@
+import { useSnapshot } from 'valtio';
+import { toolState } from '../projects/state.js';
+import { ActionButton } from '@a-type/ui/components/actions';
+import { Icon } from '@a-type/ui/components/icon';
+
+export interface ToggleBubblesActionProps {}
+
+export function ToggleBubblesAction({}: ToggleBubblesActionProps) {
+	const showBubbles = useSnapshot(toolState).showBubbles;
+
+	return (
+		<ActionButton
+			icon={<Icon name={showBubbles ? 'eye' : 'eyeClosed'} />}
+			toggled={showBubbles}
+			toggleMode="state-only"
+			onClick={() => (toolState.showBubbles = !showBubbles)}
+		>
+			Dots
+		</ActionButton>
+	);
+}
diff --git a/apps/palette/web/src/components/projects/ColorBreakdown.tsx b/apps/palette/web/src/components/projects/ColorBreakdown.tsx
index 7bece528..e4cb1d83 100644
--- a/apps/palette/web/src/components/projects/ColorBreakdown.tsx
+++ b/apps/palette/web/src/components/projects/ColorBreakdown.tsx
@@ -1,43 +1,20 @@
-import { hooks } from '@/hooks.js';
-import { Project, ProjectColorsItem } from '@palette.biscuits/verdant';
 // @ts-ignore
 import { Color } from '@dynamize/color-utilities';
-import { useColorSelection } from './hooks.js';
 import { clsx } from '@a-type/ui';
 import { useBoundsCssVars } from '@a-type/ui/hooks';
 
 export interface ColorBreakdownProps {
-	project: Project;
+	color: { r: number; g: number; b: number };
 	className?: string;
 }
 
-// shows r/y/b distribution of a color
-export function ColorBreakdown({ project, className }: ColorBreakdownProps) {
-	const [selectedId] = useColorSelection();
-	const { colors } = hooks.useWatch(project);
-	hooks.useWatch(colors);
-	const matchingColor = colors.find((c) => c.get('id') === selectedId);
-
-	if (!matchingColor) {
-		return null;
-	}
-
-	return <ColorBreakdownVisuals color={matchingColor} className={className} />;
-}
-
 const yellow = 'rgb(255,255,0)';
 const red = 'rgb(255,0,0)';
 const blue = 'rgb(0,0,255)';
 
-function ColorBreakdownVisuals({
-	color,
-	className,
-}: {
-	color: ProjectColorsItem;
-	className?: string;
-}) {
-	const { value } = hooks.useWatch(color);
-	const { r, g, b } = value.getSnapshot();
+// shows r/y/b distribution of a color
+export function ColorBreakdown({ color, className }: ColorBreakdownProps) {
+	const { r, g, b } = color;
 	const convertible = new Color('rgb', { red: r, green: g, blue: b }, [
 		'ryb',
 		'cmyk',
@@ -48,47 +25,34 @@ function ColorBreakdownVisuals({
 	const hsl = convertible.hsl;
 
 	return (
-		<div
-			className={clsx(
-				'flex flex-col gap-3 md:(flex-row items-stretch)',
-				className,
-			)}
-		>
-			<div
-				className="h-15vh w-full md:(h-auto [flex:1_0_80px]) rounded-lg"
-				style={{
-					background: `rgb(${r},${g},${b})`,
-				}}
+		<div className={clsx('flex flex-row gap-3 justify-around', className)}>
+			<PieChart
+				segments={[
+					{
+						label: 'R',
+						color: red,
+						percent: (100 * ryb.red) / rybTotal,
+					},
+					{
+						label: 'Y',
+						color: yellow,
+						percent: (100 * ryb.yellow) / rybTotal,
+					},
+					{
+						label: 'B',
+						color: blue,
+						percent: (100 * ryb.blue) / rybTotal,
+					},
+				]}
 			/>
-			<div className="flex flex-col gap-3 [flex:2_0_80px]">
-				<PieChart
-					segments={[
-						{
-							label: 'R',
-							color: red,
-							percent: (100 * ryb.red) / rybTotal,
-						},
-						{
-							label: 'Y',
-							color: yellow,
-							percent: (100 * ryb.yellow) / rybTotal,
-						},
-						{
-							label: 'B',
-							color: blue,
-							percent: (100 * ryb.blue) / rybTotal,
-						},
-					]}
+			<div className="h-100% w-32px flex-shrink-0 bg-gradient-to-b from-#000000 to-#ffffff relative">
+				<div
+					className="w-full h-5px absolute"
+					style={{
+						top: `${hsl.lightness}%`,
+						background: hsl.lightness > 50 ? 'black' : 'white',
+					}}
 				/>
-				<div className="w-100% h-32px flex-shrink-0 bg-gradient-to-r from-#000000 to-#ffffff relative mt-3">
-					<div
-						className="h-full w-5px absolute"
-						style={{
-							left: `${hsl.lightness}%`,
-							background: hsl.lightness > 50 ? 'black' : 'white',
-						}}
-					/>
-				</div>
 			</div>
 		</div>
 	);
@@ -131,7 +95,10 @@ function PieChart({
 			style={{
 				backgroundImage: gradient,
 			}}
-			className={clsx('rounded-full aspect-1 w-full relative', className)}
+			className={clsx(
+				'rounded-full aspect-1 relative transition-all',
+				className,
+			)}
 		>
 			<div className="left-1/2 top-1/2 absolute overflow-visible">
 				{/* Render percentage values in the correct positions */}
diff --git a/apps/palette/web/src/components/projects/CreateProject.tsx b/apps/palette/web/src/components/projects/CreateProject.tsx
index 7464d3a4..48f6aa47 100644
--- a/apps/palette/web/src/components/projects/CreateProject.tsx
+++ b/apps/palette/web/src/components/projects/CreateProject.tsx
@@ -5,26 +5,26 @@ import { H2 } from '@a-type/ui/components/typography';
 
 export interface CreateProjectProps {}
 export function CreateProject(props: CreateProjectProps) {
-  const client = hooks.useClient();
-  const navigate = useNavigate();
+	const client = hooks.useClient();
+	const navigate = useNavigate();
 
-  return (
-    <div className="col">
-      <H2>Start a new project</H2>
-      <ImageUploader
-        className="h-400px w-full"
-        onChange={async (value) => {
-          if (value) {
-            const project = await client.projects.put({
-              image: value,
-            });
-            navigate(`/projects/${project.get('id')}`, {
-              skipTransition: true,
-            });
-          }
-        }}
-        value={null}
-      />
-    </div>
-  );
+	return (
+		<div className="col">
+			<H2>Start a new project</H2>
+			<ImageUploader
+				className="h-400px w-full max-w-600px"
+				onChange={async (value) => {
+					if (value) {
+						const project = await client.projects.put({
+							image: value,
+						});
+						navigate(`/projects/${project.get('id')}`, {
+							skipTransition: true,
+						});
+					}
+				}}
+				value={null}
+			/>
+		</div>
+	);
 }
diff --git a/apps/palette/web/src/components/projects/ProjectCanvas.tsx b/apps/palette/web/src/components/projects/ProjectCanvas.tsx
index 8f401587..e63306bf 100644
--- a/apps/palette/web/src/components/projects/ProjectCanvas.tsx
+++ b/apps/palette/web/src/components/projects/ProjectCanvas.tsx
@@ -5,7 +5,6 @@ import {
 	Project,
 	ProjectColors,
 	ProjectColorsItem,
-	ProjectColorsItemInit,
 } from '@palette.biscuits/verdant';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useColorSelection } from './hooks.js';
@@ -20,9 +19,7 @@ import {
 	useCanvas,
 	Vector2,
 } from '@a-type/react-space';
-import { useSnapshot } from 'valtio';
-import { Button } from '@a-type/ui/components/button';
-import { Icon } from '@a-type/ui/components/icon';
+import { ref, useSnapshot } from 'valtio';
 import { toolState } from './state.js';
 import { preventDefault } from '@a-type/utils';
 
@@ -32,13 +29,7 @@ export interface ProjectCanvasProps {
 }
 export function ProjectCanvas({ project, className }: ProjectCanvasProps) {
 	const { image, colors } = hooks.useWatch(project);
-	const [_, setSelected] = useColorSelection();
-	const addColor = (init: ProjectColorsItemInit) => {
-		colors.push(init);
-		const newColor = colors.get(colors.length - 1);
-		setSelected(newColor.get('id'));
-	};
-	const { showBubbles, pickingColor } = useSnapshot(toolState);
+	const { showBubbles, activelyPicking } = useSnapshot(toolState);
 
 	const viewport = useCreateViewport({
 		panLimitMode: 'viewport',
@@ -49,8 +40,6 @@ export function ProjectCanvas({ project, className }: ProjectCanvasProps) {
 		},
 	});
 
-	const picking = !!pickingColor;
-
 	return (
 		<div
 			className={clsx(
@@ -59,21 +48,19 @@ export function ProjectCanvas({ project, className }: ProjectCanvasProps) {
 			)}
 		>
 			<ViewportRoot viewport={viewport} className="flex-grow-1 h-auto">
-				<ColorPickerCanvas image={image} onColor={addColor} />
-				{showBubbles && !picking && <Bubbles colors={colors} />}
+				<ColorPickerCanvas image={image} />
+				{showBubbles && !activelyPicking && <Bubbles colors={colors} />}
+				<PickingBubble />
 			</ViewportRoot>
-			<CanvasTools />
 		</div>
 	);
 }
 
 function ColorPickerCanvas({
 	image: imageModel,
-	onColor,
 	className,
 }: {
 	image: EntityFile;
-	onColor: (init: ProjectColorsItemInit) => void;
 	className?: string;
 }) {
 	hooks.useWatch(imageModel);
@@ -136,35 +123,19 @@ function ColorPickerCanvas({
 		[canvasRef],
 	);
 
-	const getCanvasSize = useCallback(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) return null;
-		return {
-			width: canvas.width,
-			height: canvas.height,
-		};
-	}, [canvasRef]);
-
 	return (
 		<CanvasRoot canvas={logicalCanvas} onContextMenu={preventDefault}>
 			{/* <CanvasBackground> */}
 			<canvas ref={canvasRef} className={clsx('touch-none', className)} />
 			{/* </CanvasBackground> */}
 			{/* bubble preview */}
-			<BubblePicker
-				getCanvasColors={getCanvasColors}
-				getCanvasSize={getCanvasSize}
-				onColor={onColor}
-			/>
+			<BubblePicker getCanvasColors={getCanvasColors} />
 		</CanvasRoot>
 	);
 }
 
 function BubblePicker({
 	getCanvasColors,
-	onPickingChange,
-	getCanvasSize,
-	onColor,
 }: {
 	getCanvasColors: (
 		x: number,
@@ -172,17 +143,12 @@ function BubblePicker({
 		xRange?: number,
 		yRange?: number,
 	) => Uint8ClampedArray | null;
-	getCanvasSize: () => { width: number; height: number } | null;
-	onPickingChange?: (picking: boolean) => void;
-	onColor: (color: {
-		value: { r: number; g: number; b: number };
-		percentage: { x: number; y: number };
-		pixel: { x: number; y: number };
-	}) => void;
 }) {
 	const previewRef = useRef<HTMLDivElement>(null);
 	const previewCanvasRef = useRef<HTMLCanvasElement>(null);
 	const dotRef = useRef<HTMLDivElement>(null);
+	const show = useSnapshot(toolState).activelyPicking;
+	const [_, setSelected] = useColorSelection();
 
 	useClaimGesture(
 		'tool',
@@ -229,10 +195,19 @@ function BubblePicker({
 					g: colors[577],
 					b: colors[578],
 				};
-				toolState.pickingColor = `rgb(${centerColor.r}, ${centerColor.g}, ${centerColor.b})`;
+				const canvasRect = canvas.limits.value;
+				const canvasWidth = canvasRect.max.x - canvasRect.min.x;
+				const canvasHeight = canvasRect.max.y - canvasRect.min.y;
+				const canvasX = x / canvasWidth;
+				const canvasY = y / canvasHeight;
+				toolState.pickedColor = ref({
+					value: centerColor,
+					percentage: { x: canvasX, y: canvasY },
+					pixel: { x, y },
+				});
 				dotRef.current?.style.setProperty(
 					'background-color',
-					toolState.pickingColor,
+					`rgb(${centerColor.r}, ${centerColor.g}, ${centerColor.b})`,
 				);
 			}
 		},
@@ -245,14 +220,13 @@ function BubblePicker({
 			if (!preview) return;
 			preview.style.setProperty('--x', `${worldPosition.x}px`);
 			preview.style.setProperty('--y', `${worldPosition.y}px`);
-			preview.style.setProperty('display', 'block');
 
 			const size = preview.computedStyleMap().get('--size');
 			const sizeValue = size ? parseInt(size.toString()) : 0;
 
-			const flipX = screenPosition.x - sizeValue * 2 <= 0;
+			const flipX = screenPosition.x - sizeValue * 1.5 <= 0;
 			preview.style.setProperty('--x-mult', flipX ? `1` : `-1`);
-			const flipY = screenPosition.y - sizeValue * 2 <= 0;
+			const flipY = screenPosition.y - sizeValue * 1.5 <= 0;
 			preview.style.setProperty('--y-mult', flipY ? `1` : `-1`);
 
 			preview.style.setProperty('border-radius', '9999px');
@@ -277,7 +251,8 @@ function BubblePicker({
 				if (!preview) return;
 				updatePosition(pointerWorldPosition, screenPosition);
 				updatePreview(x, y);
-				onPickingChange?.(true);
+				toolState.activelyPicking = true;
+				setSelected(null);
 			},
 			onDrag: (
 				{ pointerWorldPosition, screenPosition, touchesCount },
@@ -293,31 +268,15 @@ function BubblePicker({
 				if (!preview) return;
 				updatePosition(pointerWorldPosition, screenPosition);
 				updatePreview(x, y);
+				toolState.activelyPicking = true;
 			},
-			onDragEnd: ({ pointerWorldPosition }) => {
-				const { x, y } = pointerWorldPosition;
-
-				previewRef.current?.style.setProperty('display', 'none');
-
-				const canvasRect = canvas.limits.value;
-				const canvasWidth = canvasRect.max.x - canvasRect.min.x;
-				const canvasHeight = canvasRect.max.y - canvasRect.min.y;
-				const canvasX = x / canvasWidth;
-				const canvasY = y / canvasHeight;
-
-				const color = getCanvasColors(x, y);
-				toolState.pickingColor = null;
-				if (!color) return;
-
-				onColor({
-					value: { r: color[0], g: color[1], b: color[2] },
-					percentage: { x: canvasX, y: canvasY },
-					pixel: { x, y },
-				});
+			onDragEnd: () => {
+				toolState.activelyPicking = false;
 			},
 			onAbandon: () => {
 				previewRef.current?.style.setProperty('display', 'none');
-				toolState.pickingColor = null;
+				toolState.pickedColor = null;
+				toolState.activelyPicking = false;
 			},
 		},
 		'bubble',
@@ -332,7 +291,8 @@ function BubblePicker({
 				'[transform:translate(-50%,-50%)_translate(calc(var(--x-mult,1)*(var(--size)+var(--pointer-size))/2/var(--zoom,1)),calc(var(--y-mult,1)*(var(--size)+var(--pointer-size))/2/var(--zoom,1)))]',
 				'left-[var(--x)] top-[var(--y)]',
 				'w-[calc(var(--size)/var(--zoom,1))] h-[calc(var(--size)/var(--zoom,1))]',
-				'fixed pointer-events-none border-1 border-solid border-gray-4 overflow-hidden hidden',
+				'fixed pointer-events-none border-1 border-solid border-gray-4 overflow-hidden',
+				show ? 'block' : 'hidden',
 			)}
 		>
 			<canvas ref={previewCanvasRef} className="w-full h-full" />
@@ -356,6 +316,9 @@ function Bubbles({ colors }: { colors: ProjectColors }) {
 	);
 }
 
+const BUBBLE_SIZE_LG = 64;
+const BUBBLE_SIZE_SM = 32;
+
 function Bubble({ color: colorVal }: { color: ProjectColorsItem }) {
 	const { percentage, value, id } = hooks.useWatch(colorVal);
 	const { x, y } = hooks.useWatch(percentage);
@@ -365,34 +328,51 @@ function Bubble({ color: colorVal }: { color: ProjectColorsItem }) {
 
 	return (
 		<button
-			onClick={() => setSelected(id)}
+			onClick={() => {
+				setSelected(id);
+				toolState.pickedColor = null;
+			}}
 			className={clsx(
-				'absolute rounded-full pointer-events-auto -translate-1/2 border-solid border-1 border-gray appearance-none min-h-0 min-w-0 p-0 m-0',
-				selected && 'border-2 z-1',
+				'absolute rounded-full pointer-events-auto -translate-1/2 border-solid border-black appearance-none min-h-0 min-w-0 p-0 m-0',
 			)}
 			style={{
 				backgroundColor: `rgb(${r}, ${g}, ${b})`,
 				left: `${x * 100}%`,
 				top: `${y * 100}%`,
-				width: `calc(${selected ? 48 : 24}px / var(--zoom, 1))`,
-				height: `calc(${selected ? 48 : 24}px / var(--zoom, 1))`,
+				width: `calc(${selected ? BUBBLE_SIZE_LG : BUBBLE_SIZE_SM}px / var(--zoom, 1))`,
+				height: `calc(${selected ? BUBBLE_SIZE_LG : BUBBLE_SIZE_SM}px / var(--zoom, 1))`,
+				borderWidth: 'calc(1px/var(--zoom,1))',
+				boxShadow: '0 0 0 calc(1px/var(--zoom,1)) var(--color-white)',
+				zIndex: selected ? 1 : 0,
 			}}
 		/>
 	);
 }
 
-function CanvasTools() {
-	const { showBubbles } = useSnapshot(toolState);
+function PickingBubble() {
+	const { pickedColor, activelyPicking } = useSnapshot(toolState);
+
+	if (!pickedColor || activelyPicking) return;
 
 	return (
-		<div className="row w-full bg-white p-2 border-gray border-1 border-solid">
-			<Button
-				size="icon"
-				toggled={showBubbles}
-				onClick={() => (toolState.showBubbles = !showBubbles)}
-			>
-				<Icon name={showBubbles ? 'eye' : 'eyeClosed'} />
-			</Button>
+		<div
+			className="absolute pointer-events-none -translate-1/2"
+			style={{
+				left: `${pickedColor.percentage.x * 100}%`,
+				top: `${pickedColor.percentage.y * 100}%`,
+				width: `calc(${BUBBLE_SIZE_LG}px / var(--zoom, 1))`,
+				height: `calc(${BUBBLE_SIZE_LG}px / var(--zoom, 1))`,
+			}}
+		>
+			<div
+				className={clsx(
+					'absolute rounded-full pointer-events-none border-dashed border-white animate-spin animate-duration-20s w-full h-full',
+				)}
+				style={{
+					backgroundColor: `rgb(${pickedColor.value.r}, ${pickedColor.value.g}, ${pickedColor.value.b})`,
+					borderWidth: `calc(2px / var(--zoom, 1))`,
+				}}
+			/>
 		</div>
 	);
 }
diff --git a/apps/palette/web/src/components/projects/ProjectColorSpotlight.tsx b/apps/palette/web/src/components/projects/ProjectColorSpotlight.tsx
index 86a88419..dc0a9c64 100644
--- a/apps/palette/web/src/components/projects/ProjectColorSpotlight.tsx
+++ b/apps/palette/web/src/components/projects/ProjectColorSpotlight.tsx
@@ -4,9 +4,6 @@ import { hooks } from '@/hooks.js';
 import { clsx } from '@a-type/ui';
 import { useSnapshot } from 'valtio';
 import { toolState } from './state.js';
-import { assert } from '@a-type/utils';
-import { Dialog } from '@a-type/ui/components/dialog';
-import { useState } from 'react';
 import { ColorBreakdown } from './ColorBreakdown.jsx';
 import { Button } from '@a-type/ui/components/button';
 import { Icon } from '@a-type/ui/components/icon';
@@ -20,73 +17,62 @@ export function ProjectColorSpotlight({
 	project,
 	className,
 }: ProjectColorSpotlightProps) {
-	const [selectedId] = useColorSelection();
+	const [selectedId, setSelectedId] = useColorSelection();
 	const { colors } = hooks.useWatch(project);
 	const matchingColor = colors.find((c) => c.get('id') === selectedId);
 	hooks.useWatch(matchingColor || null);
 	const matchingColorValues = matchingColor?.get('value')?.getSnapshot();
 
-	const { pickingColor } = useSnapshot(toolState);
+	const { pickedColor: pickingColor } = useSnapshot(toolState);
 
-	const showColor = !!pickingColor || !!matchingColorValues;
+	const color = pickingColor?.value || matchingColorValues;
 
-	const [showMixing, setShowMixing] = useState(false);
-
-	if (!showColor) {
+	if (color) {
 		return (
 			<div
 				className={clsx(
-					'flex flex-col p-2 items-center justify-center border-1 border-solid border-gray-4 rounded-lg',
+					'm-1 relative flex flex-col md:flex-row gap-1',
 					className,
 				)}
 			>
-				<span className="text-xs text-gray-5 italic">
-					Select a color to see it here
-				</span>
+				<div
+					className={'relative flex-1-0-0 h-full rounded-lg'}
+					style={{
+						backgroundColor: `rgb(${color.r}, ${color.g}, ${color.b})`,
+					}}
+				>
+					<div className="absolute right-3 bottom-3 row">
+						{!!pickingColor && (
+							<Button
+								size="small"
+								color="primary"
+								onClick={() => {
+									colors.push(pickingColor);
+									const color = colors.get(colors.length - 1);
+									toolState.pickedColor = null;
+									setSelectedId(color.get('id'));
+								}}
+							>
+								<Icon name="plus" /> Save
+							</Button>
+						)}
+					</div>
+				</div>
+				<ColorBreakdown color={color} className="flex-1-0-0 p-2" />
 			</div>
 		);
 	}
 
-	if (pickingColor) {
-		return (
-			<div
-				className={clsx(
-					'w-full h-full rounded-t-lg md:rounded-b-lg',
-					className,
-				)}
-				style={{
-					backgroundColor: pickingColor,
-				}}
-			/>
-		);
-	}
-
-	assert(matchingColorValues);
-
 	return (
 		<div
 			className={clsx(
-				'w-full h-full rounded-t-lg relative md:rounded-b-lg',
+				'flex flex-col p-2 items-center justify-center border-1 border-solid border-gray-4 rounded-lg',
 				className,
 			)}
-			style={{
-				backgroundColor: `rgb(${matchingColorValues.r}, ${matchingColorValues.g}, ${matchingColorValues.b})`,
-			}}
 		>
-			<Dialog open={showMixing} onOpenChange={setShowMixing}>
-				<Dialog.Trigger asChild>
-					<Button className="absolute right-1 bottom-2" size="small">
-						<Icon name="waterDrop" /> Mixing
-					</Button>
-				</Dialog.Trigger>
-				<Dialog.Content width="lg">
-					<Dialog.Title>Color Mixing</Dialog.Title>
-					<ColorBreakdown project={project} />
-					<Dialog.Actions>
-						<Dialog.Close>Close</Dialog.Close>
-					</Dialog.Actions>
-				</Dialog.Content>
-			</Dialog>
+			<span className="text-xs text-gray-5 italic">
+				Select a color to see it here
+			</span>
 		</div>
 	);
 }
diff --git a/apps/palette/web/src/components/projects/ProjectPalette.tsx b/apps/palette/web/src/components/projects/ProjectPalette.tsx
index 16100688..c62320cc 100644
--- a/apps/palette/web/src/components/projects/ProjectPalette.tsx
+++ b/apps/palette/web/src/components/projects/ProjectPalette.tsx
@@ -1,10 +1,10 @@
 import { hooks } from '@/hooks.js';
 import { clsx } from '@a-type/ui';
 import { Project } from '@palette.biscuits/verdant';
-import { useColorSelection } from './hooks.js';
-import { ScrollArea } from '@a-type/ui/components/scrollArea';
-import { Button } from '@a-type/ui/components/button';
-import { Icon } from '@a-type/ui/components/icon';
+import { useColorSelection, useSort } from './hooks.js';
+import { H3 } from '@a-type/ui/components/typography';
+// @ts-ignore
+import { Color } from '@dynamize/color-utilities';
 
 export interface ProjectPaletteProps {
 	project: Project;
@@ -15,73 +15,59 @@ export function ProjectPalette({ project, className }: ProjectPaletteProps) {
 	const { colors } = hooks.useWatch(project);
 	hooks.useWatch(colors, { deep: true });
 
+	const [sort] = useSort();
+
 	// sort by hue
 	const sorted = colors.getSnapshot().sort((a, b) => {
-		return (
-			rgbToHue(a.value.r, a.value.g, a.value.b) -
-			rgbToHue(b.value.r, b.value.g, b.value.b)
+		const aColor = new Color(
+			'rgb',
+			{ red: a.value.r, green: a.value.g, blue: a.value.b },
+			['hsl'],
+		);
+		const bColor = new Color(
+			'rgb',
+			{ red: b.value.r, green: b.value.g, blue: b.value.b },
+			['hsl'],
 		);
+		return aColor.hsl[sort] - bColor.hsl[sort];
 	});
 
 	const [selectedId, selectId] = useColorSelection();
 
-	const deleteSelectedColor = () => {
-		if (selectedId) {
-			const val = colors.find((c) => c.get('id') === selectedId);
-			if (val) {
-				colors.removeAll(val);
-				selectId(null);
-			}
-		}
-	};
-
 	return (
-		<div className={clsx('flex flex-col items-stretch', className)}>
-			<div className="row py-1">
-				<Button
-					color="ghostDestructive"
-					size="small"
-					onClick={deleteSelectedColor}
-					disabled={!selectedId}
-					className="mr-auto"
-				>
-					<Icon name="trash" />
-					Delete color
-				</Button>
-			</div>
+		<div className={clsx('flex flex-col items-stretch m-1', className)}>
+			<H3>Saved Colors</H3>
 			{!sorted.length && (
 				<span className="text-xs text-gray-5 italic m-auto">
 					Click the image to select colors
 				</span>
 			)}
-			<ScrollArea background="wash" className="[flex:1_0_0]">
-				<div
-					className={clsx(
-						'grid grid-cols-6 gap-1 justify-start items-start content-start',
-						'md:grid-cols-4',
-					)}
-					onClick={() => {
-						selectId(null);
-					}}
-				>
-					{sorted.map((color, i) => (
-						<button
-							key={i}
-							className={clsx(
-								'rounded appearance-none p-0 [border-image:none] border-solid aspect-1',
-								selectedId === color.id ? 'border-2 border-black' : 'border-0',
-							)}
-							onClick={(ev) => {
-								selectId(color.id);
-								ev.stopPropagation();
-							}}
-							style={{
-								backgroundColor: `rgb(${color.value.r}, ${color.value.g}, ${color.value.b})`,
-							}}
-						/>
-					))}
-				</div>
-			</ScrollArea>
+			<div
+				className={clsx(
+					'grid grid-cols-6 gap-1 justify-start items-start content-start',
+					'md:grid-cols-4',
+				)}
+				onClick={() => {
+					selectId(null);
+				}}
+			>
+				{sorted.map((color, i) => (
+					<button
+						key={i}
+						className={clsx(
+							'rounded appearance-none p-0 [border-image:none] border-solid aspect-1',
+							selectedId === color.id ? 'border-2 border-black' : 'border-0',
+						)}
+						onClick={(ev) => {
+							selectId(color.id);
+							ev.stopPropagation();
+						}}
+						style={{
+							backgroundColor: `rgb(${color.value.r}, ${color.value.g}, ${color.value.b})`,
+						}}
+					/>
+				))}
+			</div>
 		</div>
 	);
 }
diff --git a/apps/palette/web/src/components/projects/hooks.ts b/apps/palette/web/src/components/projects/hooks.ts
index a08430e9..c9e86a68 100644
--- a/apps/palette/web/src/components/projects/hooks.ts
+++ b/apps/palette/web/src/components/projects/hooks.ts
@@ -1,18 +1,24 @@
+import { useLocalStorage } from '@biscuits/client';
 import { useSearchParams } from '@verdant-web/react-router';
 import { useCallback } from 'react';
 
 export function useColorSelection() {
-  const [params, setParams] = useSearchParams();
-  const setColor = useCallback(
-    (colorId: string | null) => {
-      setParams((p) => {
-        if (!colorId) p.delete('color');
-        else p.set('color', colorId);
-        return p;
-      });
-    },
-    [setParams],
-  );
+	const [params, setParams] = useSearchParams();
+	const setColor = useCallback(
+		(colorId: string | null) => {
+			setParams((p) => {
+				if (!colorId) p.delete('color');
+				else p.set('color', colorId);
+				return p;
+			});
+		},
+		[setParams],
+	);
 
-  return [params.get('color'), setColor] as const;
+	return [params.get('color'), setColor] as const;
+}
+
+export type ColorSort = 'hue' | 'saturation' | 'lightness';
+export function useSort() {
+	return useLocalStorage<ColorSort>('sort-palette', 'hue', true);
 }
diff --git a/apps/palette/web/src/components/projects/state.ts b/apps/palette/web/src/components/projects/state.ts
index 6fdb1e79..8cb98576 100644
--- a/apps/palette/web/src/components/projects/state.ts
+++ b/apps/palette/web/src/components/projects/state.ts
@@ -1,6 +1,8 @@
+import { ProjectColorsItemInit } from '@palette.biscuits/verdant';
 import { proxy } from 'valtio';
 
 export const toolState = proxy({
 	showBubbles: true,
-	pickingColor: null as string | null,
+	pickedColor: null as ProjectColorsItemInit | null,
+	activelyPicking: false,
 });
diff --git a/apps/palette/web/src/pages/HomePage.tsx b/apps/palette/web/src/pages/HomePage.tsx
index 283f16eb..bddbe283 100644
--- a/apps/palette/web/src/pages/HomePage.tsx
+++ b/apps/palette/web/src/pages/HomePage.tsx
@@ -1,23 +1,24 @@
 import { CreateProject } from '@/components/projects/CreateProject.jsx';
 import { ProjectsList } from '@/components/projects/ProjectsList.jsx';
 import { PageContent, PageFixedArea } from '@a-type/ui/components/layouts';
-import { UserMenu } from '@biscuits/client';
+import { usePageTitle, UserMenu } from '@biscuits/client';
 
 export interface HomePageProps {}
 
 export function HomePage({}: HomePageProps) {
-  return (
-    <PageContent>
-      <PageFixedArea>
-        <div className="row">
-          <h1>Palette</h1>
-          <UserMenu className="ml-auto" />
-        </div>
-      </PageFixedArea>
-      <ProjectsList />
-      <CreateProject />
-    </PageContent>
-  );
+	usePageTitle('Palette');
+	return (
+		<PageContent>
+			<PageFixedArea>
+				<div className="row">
+					<h1>Palette</h1>
+					<UserMenu className="ml-auto" />
+				</div>
+			</PageFixedArea>
+			<ProjectsList />
+			<CreateProject />
+		</PageContent>
+	);
 }
 
 export default HomePage;
diff --git a/apps/palette/web/src/pages/ProjectPage.tsx b/apps/palette/web/src/pages/ProjectPage.tsx
index 62a255bf..a6ba7c87 100644
--- a/apps/palette/web/src/pages/ProjectPage.tsx
+++ b/apps/palette/web/src/pages/ProjectPage.tsx
@@ -1,11 +1,18 @@
+import { DeleteColorAction } from '@/components/actions/DeleteColorAction.jsx';
+import { RedoAction } from '@/components/actions/RedoAction.jsx';
+import { SortAction } from '@/components/actions/SortAction.jsx';
+import { ToggleBubblesAction } from '@/components/actions/ToggleBubblesAction.jsx';
+import { UndoAction } from '@/components/actions/UndoAction.jsx';
 import { ProjectCanvas } from '@/components/projects/ProjectCanvas.jsx';
 import { ProjectColorSpotlight } from '@/components/projects/ProjectColorSpotlight.jsx';
 import { ProjectPalette } from '@/components/projects/ProjectPalette.jsx';
 import { hooks } from '@/hooks.js';
+import { ActionBar } from '@a-type/ui/components/actions';
 import { Button } from '@a-type/ui/components/button';
 import { Icon } from '@a-type/ui/components/icon';
 import { PageContent } from '@a-type/ui/components/layouts';
 import { H1 } from '@a-type/ui/components/typography';
+import { usePageTitle } from '@biscuits/client';
 import { Link, useParams } from '@verdant-web/react-router';
 
 export interface ProjectPageProps {}
@@ -13,6 +20,7 @@ export interface ProjectPageProps {}
 export function ProjectPage({}: ProjectPageProps) {
 	const id = useParams().id;
 	const project = hooks.useProject(id);
+	usePageTitle('Palette');
 
 	if (!project) {
 		return (
@@ -27,21 +35,34 @@ export function ProjectPage({}: ProjectPageProps) {
 	}
 
 	return (
-		<div className="flex flex-col p-0 m-0 w-full min-h-100vh">
-			<div className="flex flex-col items-stretch md:flex-row w-full h-full gap-1">
-				<div className="flex flex-col gap-1 [flex:3_0_0]">
-					<div className="row py-1">
-						<Button asChild color="ghost" size="small">
-							<Link to="/">
-								<Icon name="arrowLeft" />
-								Back to projects
-							</Link>
-						</Button>
-					</div>
-					<ProjectCanvas project={project} className="[flex:3_0_0]" />
+		<div className="w-full min-h-100vh flex flex-col md:h-100vh">
+			<div className="row py-1 sticky z-100 bg-wash top-0">
+				<Button asChild color="ghost" size="small">
+					<Link to="/">
+						<Icon name="arrowLeft" />
+						Projects
+					</Link>
+				</Button>
+				<ActionBar>
+					<UndoAction />
+					<RedoAction />
+					<ToggleBubblesAction />
+					<DeleteColorAction project={project} />
+					<SortAction />
+				</ActionBar>
+			</div>
+			<div className="flex flex-col items-stretch md:flex-row w-full gap-1 flex-1 items-stretch md:min-h-0">
+				<div className="flex flex-col gap-1 [flex:3_0_auto] min-h-80vh md:h-auto md:[flex:3_0_0]">
+					<ProjectCanvas project={project} className="[flex:3_0_200px]" />
+					<ProjectColorSpotlight
+						project={project}
+						className="[flex:1_0_240px] md:[flex:1_0_80px]"
+					/>
 				</div>
-				<ProjectPalette project={project} className="[flex:1_0_80px]" />
-				<ProjectColorSpotlight project={project} className="[flex:1_0_70px]" />
+				<ProjectPalette
+					project={project}
+					className="[flex:1_0_auto] md:(overflow-y-auto min-h-100px [flex:1_0_0])"
+				/>
 			</div>
 		</div>
 	);
diff --git a/apps/palette/web/src/pages/SettingsPage.tsx b/apps/palette/web/src/pages/SettingsPage.tsx
index f612517f..f6032635 100644
--- a/apps/palette/web/src/pages/SettingsPage.tsx
+++ b/apps/palette/web/src/pages/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { checkForUpdate } from '@/updateState.js';
 import { H1 } from '@a-type/ui/components/typography';
-import { DarkModeToggle } from '@biscuits/client';
+import { DarkModeToggle, usePageTitle } from '@biscuits/client';
 import { PageContent, PageFixedArea } from '@a-type/ui/components/layouts';
 import { ManageStorage } from '@biscuits/client/storage';
 import { Button } from '@a-type/ui/components/button';
@@ -11,27 +11,29 @@ import { AutoRestoreScroll, Link } from '@verdant-web/react-router';
 export interface SettingsPageProps {}
 
 export function SettingsPage({}: SettingsPageProps) {
-  useEffect(() => {
-    checkForUpdate();
-  }, []);
+	useEffect(() => {
+		checkForUpdate();
+	}, []);
 
-  return (
-    <PageContent>
-      <PageFixedArea className="row py-2">
-        <Button asChild color="ghost">
-          <Link to="/">
-            <Icon name="arrowLeft" /> Back
-          </Link>
-        </Button>
-      </PageFixedArea>
-      <H1>Settings</H1>
-      <div className="flex flex-col items-start w-full gap-4">
-        <DarkModeToggle />
-        <ManageStorage />
-      </div>
-      <AutoRestoreScroll />
-    </PageContent>
-  );
+	usePageTitle('Palette | Settings');
+
+	return (
+		<PageContent>
+			<PageFixedArea className="row py-2">
+				<Button asChild color="ghost">
+					<Link to="/">
+						<Icon name="arrowLeft" /> Back
+					</Link>
+				</Button>
+			</PageFixedArea>
+			<H1>Settings</H1>
+			<div className="flex flex-col items-start w-full gap-4">
+				<DarkModeToggle />
+				<ManageStorage />
+			</div>
+			<AutoRestoreScroll />
+		</PageContent>
+	);
 }
 
 export default SettingsPage;
diff --git a/packages/apps/src/index.ts b/packages/apps/src/index.ts
index 609fa457..5d72696d 100644
--- a/packages/apps/src/index.ts
+++ b/packages/apps/src/index.ts
@@ -1,173 +1,173 @@
 export type AppManifest<Id extends string> = {
-  id: Id;
-  url: string;
-  name: string;
-  description: string;
-  mainImageUrl?: string;
-  iconPath: string;
-  size?: number;
-  devOriginOverride: string;
-  demoVideoSrc: string;
-  paidDescription: string;
-  paidFeatures: PaidFeature[] | readonly PaidFeature[];
-  prerelease?: boolean;
+	id: Id;
+	url: string;
+	name: string;
+	description: string;
+	mainImageUrl?: string;
+	iconPath: string;
+	size?: number;
+	devOriginOverride: string;
+	demoVideoSrc: string;
+	paidDescription: string;
+	paidFeatures: PaidFeature[] | readonly PaidFeature[];
+	prerelease?: boolean;
 };
 
 export type PaidFeature = {
-  imageUrl: string;
-  description: string;
-  title: string;
-  family?: boolean;
+	imageUrl: string;
+	description: string;
+	title: string;
+	family?: boolean;
 };
 
 export const apps = [
-  {
-    id: 'gnocchi',
-    url: 'https://gnocchi.biscuits.club',
-    name: 'Gnocchi',
-    description: 'Organize your weekly cooking and groceries',
-    mainImageUrl: 'https://gnocchi.biscuits.club/og-image.png',
-    iconPath: 'android-chrome-512x512.png',
-    size: 4,
-    devOriginOverride: 'http://localhost:6220',
-    demoVideoSrc: '/videos/gnocchi-compressed.mp4',
-    paidFeatures: [
-      {
-        imageUrl: '/images/gnocchi/scanner.png',
-        title: 'Recipe Scanner',
-        description:
-          'Scan web recipes to create a personal copy. Add notes, make changes, and collaborate on cooking with other plan members.',
-      },
-      {
-        imageUrl: '/images/gnocchi/groceries-collaboration.png',
-        title: 'Collaborative Groceries',
-        description:
-          'Share your groceries list with other plan members and stay on the same page. Shopping gets more efficient with realtime presence and progress updates.',
-        family: true,
-      },
-      {
-        imageUrl: '/images/gnocchi/recipe-collaboration.png',
-        title: 'Sous Chef Mode',
-        description:
-          'Team up with other plan members to cook a recipe together. Assign steps and track progress with instant updates.',
-        family: true,
-      },
-    ],
-    paidDescription:
-      'Your personal cooking app becomes a family groceries list and recipe box.',
-  } as AppManifest<'gnocchi'>,
-  {
-    id: 'trip-tick',
-    url: 'https://trip-tick.biscuits.club',
-    name: 'Trip Tick',
-    description: 'The smartest packing list for your next trip',
-    iconPath: 'icon.png',
-    size: 2,
-    devOriginOverride: 'http://localhost:6221',
-    demoVideoSrc: '/videos/trip-tick-compressed.mp4',
-    paidFeatures: [
-      {
-        imageUrl: '/images/trip-tick/weather.png',
-        title: 'Weather Forecast',
-        description:
-          'Get weather forecasts for your destination over the duration of your trip.',
-      },
-      {
-        imageUrl: '/images/trip-tick/conditions.png',
-        title: 'Powerful Conditions',
-        description:
-          'Define conditions for packing list items based on predicted weather to make sure you have everything you need.',
-      },
-    ],
-    paidDescription:
-      'Now everyone can be on the same page when packing. Plus, get a weather forecast and more powerful trip planning tools.',
-  } as AppManifest<'trip-tick'>,
-  {
-    id: 'wish-wash',
-    demoVideoSrc: '',
-    description: 'TODO',
-    devOriginOverride: 'http://localhost:6222',
-    iconPath: 'icon.png',
-    name: 'Wish Wash',
-    paidDescription: 'TODO',
-    paidFeatures: [],
-    url: 'https://wish-wash.biscuits.club',
-    prerelease: true,
-  } as AppManifest<'wish-wash'>,
-  {
-    id: 'marginalia',
-    demoVideoSrc: '',
-    description: 'TODO',
-    devOriginOverride: 'http://localhost:6223',
-    iconPath: 'icon.png',
-    name: 'Marginalia',
-    paidDescription: 'TODO',
-    paidFeatures: [],
-    url: 'https://marginalia.biscuits.club',
-    prerelease: true,
-  } as AppManifest<'marginalia'>,
-  {
-    id: 'star-chart',
-    demoVideoSrc: '',
-    description: 'TODO',
-    devOriginOverride: 'http://localhost:6224',
-    iconPath: 'icon.png',
-    name: 'Star Chart',
-    paidDescription: 'TODO',
-    paidFeatures: [],
-    url: 'https://star-chart.biscuits.club',
-    prerelease: true,
-  } as AppManifest<'star-chart'>,
-  {
-    id: 'humding',
-    demoVideoSrc: '',
-    description: 'An app for playing it by ear',
-    devOriginOverride: 'http://localhost:6225',
-    iconPath: 'icon.png',
-    name: 'Humding',
-    paidDescription:
-      'Share your songs with others and sync to all your devices',
-    paidFeatures: [],
-    url: 'https://humding.biscuits.club',
-    prerelease: true,
-  } as AppManifest<'humding'>,
-  {
-    id: 'palette',
-    demoVideoSrc: '',
-    description: 'Paint what you see, not what you think you see',
-    devOriginOverride: 'http://localhost:6226',
-    iconPath: 'icon.png',
-    name: 'Palette',
-    paidDescription: 'Sync your projects across all your devices',
-    paidFeatures: [],
-    url: 'https://palette.biscuits.club',
-    prerelease: true,
-  },
+	{
+		id: 'gnocchi',
+		url: 'https://gnocchi.biscuits.club',
+		name: 'Gnocchi',
+		description: 'Organize your weekly cooking and groceries',
+		mainImageUrl: 'https://gnocchi.biscuits.club/og-image.png',
+		iconPath: 'android-chrome-512x512.png',
+		size: 4,
+		devOriginOverride: 'http://localhost:6220',
+		demoVideoSrc: '/videos/gnocchi-compressed.mp4',
+		paidFeatures: [
+			{
+				imageUrl: '/images/gnocchi/scanner.png',
+				title: 'Recipe Scanner',
+				description:
+					'Scan web recipes to create a personal copy. Add notes, make changes, and collaborate on cooking with other plan members.',
+			},
+			{
+				imageUrl: '/images/gnocchi/groceries-collaboration.png',
+				title: 'Collaborative Groceries',
+				description:
+					'Share your groceries list with other plan members and stay on the same page. Shopping gets more efficient with realtime presence and progress updates.',
+				family: true,
+			},
+			{
+				imageUrl: '/images/gnocchi/recipe-collaboration.png',
+				title: 'Sous Chef Mode',
+				description:
+					'Team up with other plan members to cook a recipe together. Assign steps and track progress with instant updates.',
+				family: true,
+			},
+		],
+		paidDescription:
+			'Your personal cooking app becomes a family groceries list and recipe box.',
+	} as AppManifest<'gnocchi'>,
+	{
+		id: 'trip-tick',
+		url: 'https://trip-tick.biscuits.club',
+		name: 'Trip Tick',
+		description: 'The smartest packing list for your next trip',
+		iconPath: 'icon.png',
+		size: 2,
+		devOriginOverride: 'http://localhost:6221',
+		demoVideoSrc: '/videos/trip-tick-compressed.mp4',
+		paidFeatures: [
+			{
+				imageUrl: '/images/trip-tick/weather.png',
+				title: 'Weather Forecast',
+				description:
+					'Get weather forecasts for your destination over the duration of your trip.',
+			},
+			{
+				imageUrl: '/images/trip-tick/conditions.png',
+				title: 'Powerful Conditions',
+				description:
+					'Define conditions for packing list items based on predicted weather to make sure you have everything you need.',
+			},
+		],
+		paidDescription:
+			'Now everyone can be on the same page when packing. Plus, get a weather forecast and more powerful trip planning tools.',
+	} as AppManifest<'trip-tick'>,
+	{
+		id: 'wish-wash',
+		demoVideoSrc: '',
+		description: 'TODO',
+		devOriginOverride: 'http://localhost:6222',
+		iconPath: 'icon.png',
+		name: 'Wish Wash',
+		paidDescription: 'TODO',
+		paidFeatures: [],
+		url: 'https://wish-wash.biscuits.club',
+		prerelease: true,
+	} as AppManifest<'wish-wash'>,
+	{
+		id: 'marginalia',
+		demoVideoSrc: '',
+		description: 'TODO',
+		devOriginOverride: 'http://localhost:6223',
+		iconPath: 'icon.png',
+		name: 'Marginalia',
+		paidDescription: 'TODO',
+		paidFeatures: [],
+		url: 'https://marginalia.biscuits.club',
+		prerelease: true,
+	} as AppManifest<'marginalia'>,
+	{
+		id: 'star-chart',
+		demoVideoSrc: '',
+		description: 'TODO',
+		devOriginOverride: 'http://localhost:6224',
+		iconPath: 'icon.png',
+		name: 'Star Chart',
+		paidDescription: 'TODO',
+		paidFeatures: [],
+		url: 'https://star-chart.biscuits.club',
+		prerelease: true,
+	} as AppManifest<'star-chart'>,
+	{
+		id: 'humding',
+		demoVideoSrc: '',
+		description: 'An app for playing it by ear',
+		devOriginOverride: 'http://localhost:6225',
+		iconPath: 'icon.png',
+		name: 'Humding',
+		paidDescription:
+			'Share your songs with others and sync to all your devices',
+		paidFeatures: [],
+		url: 'https://humding.biscuits.club',
+		prerelease: true,
+	} as AppManifest<'humding'>,
+	{
+		id: 'palette',
+		demoVideoSrc: '/videos/palette-compressed.mp4',
+		description: 'Paint what you see',
+		devOriginOverride: 'http://localhost:6226',
+		iconPath: 'icon.png',
+		name: 'Palette',
+		paidDescription: 'Sync your projects across all your devices',
+		paidFeatures: [],
+		url: 'https://palette.biscuits.club',
+		prerelease: false,
+	},
 ] as const;
 
 export type AppId = (typeof apps)[number]['id'];
 
 export const appIds = apps.map((app) => app.id) as AppId[];
 export function isValidAppId(appId: string): appId is AppId {
-  return appIds.includes(appId as AppId);
+	return appIds.includes(appId as AppId);
 }
 
 export const appsById = Object.fromEntries(
-  apps.map((app) => [app.id, app]),
+	apps.map((app) => [app.id, app]),
 ) as Record<AppId, (typeof apps)[number]>;
 
 export function getAppUrl(app: AppManifest<AppId>) {
-  if (import.meta.env.DEV) {
-    return app.devOriginOverride;
-  }
-  return app.url;
+	if (import.meta.env.DEV) {
+		return app.devOriginOverride;
+	}
+	return app.url;
 }
 
 declare global {
-  interface ImportMetaEnv {
-    DEV: boolean;
-  }
-  interface ImportMeta {
-    readonly env: ImportMetaEnv;
-  }
+	interface ImportMetaEnv {
+		DEV: boolean;
+	}
+	interface ImportMeta {
+		readonly env: ImportMetaEnv;
+	}
 }
diff --git a/web/package.json b/web/package.json
index d771cbd0..3e77766e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -7,7 +7,8 @@
 		"dev": "vite --host --mode=development",
 		"build": "vite build --mode=production",
 		"typecheck": "tsc --noEmit",
-		"up-ui": "cd .. && pnpm up-ui"
+		"up-ui": "cd .. && pnpm up-ui",
+		"prepare-video": "ffmpeg -c:v libx265 -crf 25 -filter:v scale=-1:720 -i"
 	},
 	"dependencies": {
 		"@a-type/auth-client": "1.0.10",
diff --git a/web/public/videos/palette-compressed.mp4 b/web/public/videos/palette-compressed.mp4
new file mode 100644
index 00000000..14cda68f
Binary files /dev/null and b/web/public/videos/palette-compressed.mp4 differ