diff --git a/src/ui/components/bookshelf/BookStackElement.svelte b/src/ui/components/bookshelf/BookStackElement.svelte
index fb52890..c604195 100644
--- a/src/ui/components/bookshelf/BookStackElement.svelte
+++ b/src/ui/components/bookshelf/BookStackElement.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
 	import { Color, isColorName, type ColorName } from "@utils/color";
 	import BookText from "./BookText.svelte";
-	import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
-	import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
-	import BookStackDualTopBands from "./designs/stack/BookStackDualTopBands.svelte";
-	import BookStackSplitBands from "./designs/stack/BookStackSplitBands.svelte";
 
 	interface Props {
 		title?: string;
diff --git a/src/ui/components/bookshelf/designs/stack/BookStackColoredSpine.svelte b/src/ui/components/bookshelf/designs/stack/BookStackColoredSpine.svelte
deleted file mode 100644
index 4f140a5..0000000
--- a/src/ui/components/bookshelf/designs/stack/BookStackColoredSpine.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import chroma from "chroma-js";
-	import { Color } from "@utils/color";
-
-	interface Props {
-		children?: Snippet;
-		color?: string;
-		onClick?: () => void;
-	}
-
-	let { children, color = "green", onClick }: Props = $props();
-
-	const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
-	const borderRightColor = $derived(chroma(color).mix("black", 0.04));
-	const backgroundColor = $derived(chroma(color).mix("black", 0.14));
-	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
-</script>
-
-<div
-	class="bookshelf__book-wrapper"
-	style:--book-border-left-color={borderLeftColor.css()}
-	style:--book-border-right-color={borderRightColor.css()}
-	style:--book-background-color={backgroundColor.css()}
-	style:color={textColor}
-	onclick={onClick}
-	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
-	role="link"
-	tabindex="0"
->
-	{@render children?.()}
-</div>
-
-<style lang="scss">
-	div {
-		background: var(--book-color);
-		border-left: 2px solid var(--book-border-left-color);
-		border-right: 2px solid var(--book-border-right-color);
-
-		&:before {
-			content: " ";
-			display: block;
-			background: var(--book-background-color);
-			height: 40px;
-			width: calc(100% + 4px);
-			border-radius: 4px;
-
-			position: absolute;
-			top: 0px;
-			left: -2px;
-		}
-	}
-</style>
diff --git a/src/ui/components/bookshelf/designs/stack/BookStackDefault.svelte b/src/ui/components/bookshelf/designs/stack/BookStackDefault.svelte
deleted file mode 100644
index 33b2212..0000000
--- a/src/ui/components/bookshelf/designs/stack/BookStackDefault.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import chroma from "chroma-js";
-	import { Color } from "@utils/color";
-
-	interface Props {
-		children?: Snippet;
-		color?: string;
-		onClick?: () => void;
-	}
-
-	let { children, color = "green", onClick }: Props = $props();
-
-	const backgroundColor = $derived(chroma(color));
-	const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
-	const borderRightColor = $derived(chroma(color).mix("black", 0.04));
-	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
-</script>
-
-<div
-	class="bookshelf__book-wrapper"
-	style:--book-color={backgroundColor.css()}
-	style:--book-border-left-color={borderLeftColor.css()}
-	style:--book-border-right-color={borderRightColor.css()}
-	style:color={textColor}
-	onclick={onClick}
-	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
-	role="link"
-	tabindex="0"
->
-	{@render children?.()}
-</div>
-
-<style lang="scss">
-	div {
-		background: var(--book-color);
-		border-left: 2px solid var(--book-border-left-color);
-		border-right: 2px solid var(--book-border-right-color);
-	}
-</style>
diff --git a/src/ui/components/bookshelf/designs/stack/BookStackDualTopBands.svelte b/src/ui/components/bookshelf/designs/stack/BookStackDualTopBands.svelte
deleted file mode 100644
index 4a3e81f..0000000
--- a/src/ui/components/bookshelf/designs/stack/BookStackDualTopBands.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import chroma from "chroma-js";
-	import { Color } from "@utils/color";
-
-	interface Props {
-		children?: Snippet;
-		color?: string;
-		onClick?: () => void;
-	}
-
-	let { children, color = "green", onClick }: Props = $props();
-
-	const backgroundColor = $derived(chroma(color));
-	const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
-	const borderRightColor = $derived(chroma(color).mix("black", 0.04));
-	const bandColor = $derived(chroma(color).mix("black", 0.14));
-	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
-</script>
-
-<div
-	class="bookshelf__book-wrapper"
-	style:--book-color={backgroundColor.css()}
-	style:--book-border-left-color={borderLeftColor.css()}
-	style:--book-border-right-color={borderRightColor.css()}
-	style:--book-band-color={bandColor.css()}
-	style:color={textColor}
-	onclick={onClick}
-	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
-	role="link"
-	tabindex="0"
->
-	{@render children?.()}
-</div>
-
-<style lang="scss">
-	div {
-		background: var(--book-color);
-		border-left: 2px solid var(--book-border-left-color);
-		border-right: 2px solid var(--book-border-right-color);
-
-		&:after {
-			content: " ";
-			display: block;
-			background: var(--book-band-color);
-			height: 40px;
-			width: 10px;
-
-			position: absolute;
-			top: 0px;
-			left: 6px;
-		}
-
-		&:before {
-			content: " ";
-			display: block;
-			background: var(--book-band-color);
-			height: 40px;
-			width: 15px;
-
-			position: absolute;
-			top: 0px;
-			left: 24px;
-			z-index: 2;
-		}
-
-		:global(.bookshelf__book-content) {
-			width: calc(200px - 31px) !important;
-			margin: 0 31px;
-		}
-	}
-</style>
diff --git a/src/ui/components/bookshelf/designs/stack/BookStackSplitBands.svelte b/src/ui/components/bookshelf/designs/stack/BookStackSplitBands.svelte
deleted file mode 100644
index 877d40e..0000000
--- a/src/ui/components/bookshelf/designs/stack/BookStackSplitBands.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import chroma from "chroma-js";
-	import { Color } from "@utils/color";
-
-	interface Props {
-		children?: Snippet;
-		color?: string;
-		onClick?: () => void;
-	}
-
-	let { children, color = "green", onClick }: Props = $props();
-
-	const backgroundColor = $derived(chroma(color));
-	const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
-	const borderRightColor = $derived(chroma(color).mix("black", 0.04));
-	const bandColor = $derived(chroma(color).mix("black", 0.14));
-	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
-</script>
-
-<div
-	class="bookshelf__book-wrapper"
-	style:--book-color={backgroundColor.css()}
-	style:--book-border-left-color={borderLeftColor.css()}
-	style:--book-border-right-color={borderRightColor.css()}
-	style:--book-band-color={bandColor.css()}
-	style:color={textColor}
-	onclick={onClick}
-	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
-	role="link"
-	tabindex="0"
->
-	{@render children?.()}
-</div>
-
-<style lang="scss">
-	div {
-		background: var(--book-color);
-		border-left: 2px solid var(--book-border-left-color);
-		border-right: 2px solid var(--book-border-right-color);
-
-		&:after {
-			content: " ";
-			display: block;
-			background: var(--book-band-color);
-			height: 40px;
-			width: 20px;
-
-			position: absolute;
-			top: 0px;
-			left: 10px;
-		}
-
-		&:before {
-			content: " ";
-			display: block;
-			background: var(--book-band-color);
-			height: 40px;
-			width: 20px;
-
-			position: absolute;
-			top: 0px;
-			right: 10px;
-			z-index: 2;
-		}
-
-		:global(.bookshelf__book-content) {
-			width: calc(200px - 60px) !important;
-			margin: 0 30px;
-		}
-	}
-</style>