diff --git a/src/lib/models/baseplate.svelte b/src/lib/models/baseplate.svelte
index 7c2aef0..a29ac21 100644
--- a/src/lib/models/baseplate.svelte
+++ b/src/lib/models/baseplate.svelte
@@ -47,7 +47,7 @@ Command: npx @threlte/gltf@3.0.1 baseplate.glb -t -u -T --draco draco
 		<T.Mesh scale={0.1}>
 			<T is={gltf.nodes['baseplate-3x2'].geometry} />
 			<Edges color="white" thresholdAngle={30} scale={1.001} />
-			<T.MeshToonMaterial color="#18181b" />
+			<T.MeshToonMaterial color="#27272a" />
 			<Outlines color="white" width={2} angle={0.1} />
 		</T.Mesh>
 	{:catch err}
diff --git a/src/lib/models/cap-mx-switch-15x15.svelte b/src/lib/models/cap-mx-switch-15x15.svelte
index 2b9e69e..129ee00 100644
--- a/src/lib/models/cap-mx-switch-15x15.svelte
+++ b/src/lib/models/cap-mx-switch-15x15.svelte
@@ -20,6 +20,7 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco
 		children,
 		ref = $bindable(),
     interactive = $bindable(true),
+    color = '#4c0519',
 		...props
 	}: Props<THREE.Group> & {
 		ref?: THREE.Group;
@@ -27,6 +28,7 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco
 		fallback?: Snippet;
 		error?: Snippet<[{ error: Error }]>;
     interactive?: boolean;
+    color?: string;
 	} = $props();
 
 	const suspend = useSuspense();
@@ -95,8 +97,8 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco
 			}}
 		>
 			<T is={gltf.nodes['cap-mx-switch-15x15'].geometry} />
-			<T.MeshToonMaterial color="#550000" />
-			<Outlines color="#ff2222" width={2} angle={1} />
+			<T.MeshToonMaterial color={color} />
+			<Outlines color="white" width={2} angle={1} />
 		</T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
diff --git a/src/lib/models/cap-mx-switch-15x33.svelte b/src/lib/models/cap-mx-switch-15x33.svelte
index a6e3806..067b5f5 100644
--- a/src/lib/models/cap-mx-switch-15x33.svelte
+++ b/src/lib/models/cap-mx-switch-15x33.svelte
@@ -20,6 +20,7 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco
 		children,
 		ref = $bindable(),
     interactive = $bindable(true),
+    color = '#4c0519',
 		...props
 	}: Props<THREE.Group> & {
 		ref?: THREE.Group;
@@ -27,6 +28,7 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco
 		fallback?: Snippet;
 		error?: Snippet<[{ error: Error }]>;
     interactive?: boolean;
+    color?: string;
 	} = $props();
 
 	const suspend = useSuspense();
@@ -97,8 +99,8 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco
 			}}
 		>
 			<T is={gltf.nodes['switch-cap-15x33'].geometry} />
-			<T.MeshToonMaterial color="#550000" />
-			<Outlines color="#ff2222" width={2} angle={1} />
+			<T.MeshToonMaterial color={color} />
+			<Outlines color="white" width={2} angle={1} />
 		</T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
diff --git a/src/lib/models/cap-rotary-encoder.svelte b/src/lib/models/cap-rotary-encoder.svelte
index be25cea..0d0bca6 100644
--- a/src/lib/models/cap-rotary-encoder.svelte
+++ b/src/lib/models/cap-rotary-encoder.svelte
@@ -21,6 +21,8 @@ Command: npx @threlte/gltf@3.0.1 cap-rotary-encoder.glb -t -u -T --draco draco
 		children,
 		ref = $bindable(),
 		interactive = $bindable(true),
+    color = '#4c0519',
+    accentColor = '#f43f5e',
 		...props
 	}: Props<THREE.Group> & {
 		ref?: THREE.Group;
@@ -28,6 +30,8 @@ Command: npx @threlte/gltf@3.0.1 cap-rotary-encoder.glb -t -u -T --draco draco
 		fallback?: Snippet;
 		error?: Snippet<[{ error: Error }]>;
 		interactive?: boolean;
+    color?: string;
+    accentColor?: string;
 	} = $props();
 
 	const suspend = useSuspense();
@@ -175,8 +179,8 @@ Command: npx @threlte/gltf@3.0.1 cap-rotary-encoder.glb -t -u -T --draco draco
       onPointerUp(evt);
     }}>
 			<T is={gltf.nodes['rotary-encoder-cap'].geometry} />
-			<T.MeshToonMaterial color="#550000" />
-			<Outlines color="#ff2222" width={2} angle={1} />
+			<T.MeshToonMaterial color={color} />
+			<Outlines color="white" width={2} angle={1} />
 			<!-- <Edges color="white" thresholdAngle={11} scale={1.001} /> -->
 		</T.Mesh>
 
@@ -184,7 +188,7 @@ Command: npx @threlte/gltf@3.0.1 cap-rotary-encoder.glb -t -u -T --draco draco
 			<T.Group rotation.y={i * ((2 * Math.PI) / 18)} position.y={1.4}>
 				<T.Mesh scale={1} position.x={0.65}>
 					<T.BoxGeometry args={[0.1, 0.5, 0.02]} />
-					<T.MeshToonMaterial color="#f43f5e" />
+					<T.MeshToonMaterial color={accentColor} />
 				</T.Mesh>
 			</T.Group>
 		{/each}
diff --git a/src/lib/models/cap-slider.svelte b/src/lib/models/cap-slider.svelte
index 6e7ecfb..31106d6 100644
--- a/src/lib/models/cap-slider.svelte
+++ b/src/lib/models/cap-slider.svelte
@@ -18,12 +18,14 @@ Command: npx @threlte/gltf@3.0.1 cap-slider.glb -t -u -T --draco draco
 		error,
 		children,
 		ref = $bindable(),
+    color = '#0e7490',
 		...props
 	}: Props<THREE.Group> & {
 		ref?: THREE.Group;
 		children?: Snippet<[{ ref: THREE.Group }]>;
 		fallback?: Snippet;
 		error?: Snippet<[{ error: Error }]>;
+    color?: string;
 	} = $props();
 
 	const suspend = useSuspense();
@@ -176,8 +178,8 @@ Command: npx @threlte/gltf@3.0.1 cap-slider.glb -t -u -T --draco draco
       onPointerUp(evt);
     }}>
 			<T is={gltf.nodes['slider-cap'].geometry} />
-			<T.MeshToonMaterial color="#550000" />
-			<Outlines color="#ff2222" width={2} angle={1} />
+			<T.MeshToonMaterial color={color} />
+			<Outlines color="white" width={2} angle={1} />
 		</T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 728c676..2dc634e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,7 @@
 	import { dev } from '$app/environment';
 </script>
 
-<div class="px-8 py-16 pointer-events-none z-10">
+<div class="px-8 py-6 lg:py-16 pointer-events-none z-10">
 	<p class="mt-8 text-lg font-black text-rose-500 uppercase sm:text-xl">Buttfinity</p>
 
 	<h1 class="mt-3 text-5xl font-thin tracking-tight text-pretty text-white lowercase sm:text-7xl">
@@ -81,7 +81,7 @@
 			<dd class="pt-2 pl-9 font-light lowercase">Use as a MIDI controller.</dd>
 		</div>
 
-        <div class="lg:ml-9 absolute lg:relative bottom-2 left-2 pointer-events-auto z-20">
+        <div class="lg:ml-9 fixed lg:relative bottom-2 left-2 pointer-events-auto z-20">
 		<a
 			href="https://github.com/flo-bit/buttfinity"
 			target="_blank"
@@ -90,10 +90,12 @@
 			Build it!
 		</a>
     </div>
+
+    <div class="h-48 w-full lg:hidden"></div>
 	</dl>
 </div>
 
-<div class="absolute inset-0 h-full w-full">
+<div class="fixed inset-0 h-[100dvh] w-full">
 	<Canvas>
 		<Project config={{ state }} name="Plate A">
 			<Studio enabled={false} />
diff --git a/src/routes/Scene.svelte b/src/routes/Scene.svelte
index ec789ff..4fb95e6 100644
--- a/src/routes/Scene.svelte
+++ b/src/routes/Scene.svelte
@@ -30,7 +30,7 @@
 	let side = $state(0);
 
 	function onResize() {
-		if (window.innerWidth < 750) {
+		if (window.innerWidth < 1000) {
 			distance = 2;
 			down = -8;
 			side = 0;
@@ -40,7 +40,7 @@
 			down = -3;
 			side = -2;
 		}
-		scene.fog = new Fog(0x000000, 25 * distance, 30 * distance);
+		scene.fog = new Fog(0x000000, 20 * distance, 26 * distance);
 	}
 
 	const { scene } = useThrelte();
@@ -50,7 +50,7 @@
 
 		window.addEventListener('resize', onResize);
 
-		scene.fog = new Fog(0x000000, 25 * distance, 30 * distance);
+		scene.fog = new Fog(0x000000, 20 * distance, 26 * distance);
 
 		return () => {
 			window.removeEventListener('resize', onResize);
@@ -170,7 +170,7 @@
 						<SheetObject key="CapMxSwitch15x33">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x33 />
+									<CapMxSwitch15x33 color="#b91c1c" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -178,7 +178,7 @@
 						<SheetObject key="CapMxSwitch15x33-2">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x33 />
+									<CapMxSwitch15x33 color="#b45309" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -186,7 +186,7 @@
 						<SheetObject key="CapMxSwitch15x15-1">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x15 />
+									<CapMxSwitch15x15 color="#be123c" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -194,7 +194,7 @@
 						<SheetObject key="CapMxSwitch15x15-2">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x15 />
+									<CapMxSwitch15x15 color="#be185d" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -202,7 +202,7 @@
 						<SheetObject key="CapMxSwitch15x15-3">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x15 />
+									<CapMxSwitch15x15 color="#a21caf" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -210,7 +210,7 @@
 						<SheetObject key="CapMxSwitch15x15-4">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapMxSwitch15x15 />
+									<CapMxSwitch15x15 color="#7e22ce" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -226,7 +226,7 @@
 						<SheetObject key="CapRotaryEncoder1">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapRotaryEncoder />
+									<CapRotaryEncoder color="#4d7c0f" accentColor="#84cc16" />
 								</Transform>
 							{/snippet}
 						</SheetObject>
@@ -234,7 +234,7 @@
 						<SheetObject key="CapRotaryEncoder2">
 							{#snippet children({ Transform })}
 								<Transform>
-									<CapRotaryEncoder />
+									<CapRotaryEncoder color="#047857" accentColor="#10b981" />
 								</Transform>
 							{/snippet}
 						</SheetObject>