diff --git a/app/package.json b/app/package.json
index 30980e12..7b8a1137 100644
--- a/app/package.json
+++ b/app/package.json
@@ -14,6 +14,7 @@
     "dev": "tsc -w & vite build --watch & electron .",
     "dev:vite": "vite",
     "preview": "npm run build && METALSHARP_PREVIEW=1 METALSHARP_HOME=\"$HOME/.metalsharp\" electron .",
+    "preview:dev": "npm run build && METALSHARP_PREVIEW=1 METALSHARP_DEV_LIBRARY=1 METALSHARP_HOME=\"$HOME/.metalsharp\" electron .",
     "rust:build": "cd src-rust && cargo build --release",
     "rust:dev": "cd src-rust && cargo build",
     "build:all": "npm run rust:build && npm run build",
diff --git a/app/src/main/index.ts b/app/src/main/index.ts
index aec82bce..2a8f8508 100644
--- a/app/src/main/index.ts
+++ b/app/src/main/index.ts
@@ -608,8 +608,10 @@ async function createWindow(migrating = false) {
     },
   });
 
+  const query: Record<string, string> = uiOnly ? { theme: "developer" } : {};
+  if (process.env.METALSHARP_DEV_LIBRARY === "1") query["skip-to"] = "library";
   mainWindow.loadFile(path.join(__dirname, "..", "renderer", "index.html"), {
-    query: isUiOnlyRuntime() ? { theme: "developer" } : {},
+    query,
   });
 }
 
diff --git a/app/src/main/rust-bridge.ts b/app/src/main/rust-bridge.ts
index a1f3e277..06b1fc4e 100644
--- a/app/src/main/rust-bridge.ts
+++ b/app/src/main/rust-bridge.ts
@@ -169,7 +169,9 @@ export class RustBridge {
         resolve(true);
       });
       req.on("error", () => resolve(false));
-      req.setTimeout(1500, () => {
+      // Dev backends can be busy with a first-run bottle scan; don't treat a
+      // slow /status as dead or ensureRunning will kill and restart it forever.
+      req.setTimeout(this.devMode ? 10000 : 1500, () => {
         req.destroy();
         resolve(false);
       });
diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index 47ed5aba..eca78f2d 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -60,7 +60,7 @@ const updateDismissed = ref(false);
 let updatePollTimer: ReturnType<typeof setInterval> | null = null;
 let installPollTimer: ReturnType<typeof setInterval> | null = null;
 
-const { theme, toggle: toggleTheme } = useTheme();
+const { theme, setTheme } = useTheme();
 const toast = useToast();
 
 const viewMap: Record<string, Component> = {
@@ -319,6 +319,17 @@ watch(lowPerformanceMode, (enabled) => {
 onMounted(async () => {
   applyLowPerformanceMode(lowPerformanceMode.value);
   await checkBackend();
+  if (new URLSearchParams(window.location.search).get("skip-to") === "library") {
+    // The dev backend may still be starting (first-run bottle scan); wait for
+    // it before loading the library instead of racing a dead window.
+    for (let i = 0; i < 60 && !backendConnected.value; i++) {
+      await new Promise((r) => setTimeout(r, 1000));
+      await checkBackend();
+    }
+    await initApp();
+    checkForUpdates();
+    return;
+  }
   const migrationMode = await getAPI().isMigrationMode?.();
   if (migrationMode) {
     showMigration.value = true;
@@ -345,7 +356,7 @@ onMounted(async () => {
       :current-view="currentView"
       :theme="theme"
       @navigate="currentView = $event"
-      @toggle-theme="toggleTheme()"
+      @select-theme="setTheme($event)"
     />
     <main
       class="content"
@@ -573,9 +584,9 @@ onMounted(async () => {
 }
 :root[data-theme="developer"] .content {
   background:
-    linear-gradient(118deg, rgba(185, 255, 77, 0.025), transparent 36%, rgba(0, 245, 255, 0.03) 72%, transparent),
-    radial-gradient(circle at 24% 16%, rgba(255, 46, 247, 0.14), transparent 34%),
-    radial-gradient(circle at 84% 10%, rgba(0, 245, 255, 0.11), transparent 30%), var(--bg-deep);
+    linear-gradient(118deg, rgba(185, 255, 77, 0.02), transparent 36%, rgba(0, 245, 255, 0.024) 72%, transparent),
+    radial-gradient(circle at 24% 16%, rgba(255, 46, 247, 0.11), transparent 34%),
+    radial-gradient(circle at 84% 10%, rgba(0, 245, 255, 0.09), transparent 30%), var(--bg-deep);
 }
 .content.content-glass-header {
   background: transparent;
diff --git a/app/src/renderer/components/Sidebar.vue b/app/src/renderer/components/Sidebar.vue
index 52f9017b..b968443b 100644
--- a/app/src/renderer/components/Sidebar.vue
+++ b/app/src/renderer/components/Sidebar.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
 import IconMenu from "~icons/lucide/menu";
-import IconServer from "~icons/lucide/server";
-import IconLayers from "~icons/lucide/layers";
-import IconFileText from "~icons/lucide/file-text";
 import IconMoon from "~icons/lucide/moon";
 import IconSun from "~icons/lucide/sun";
 import IconSettings from "~icons/lucide/settings";
 import IconTerminal from "~icons/lucide/terminal";
-import type { ThemeName } from "../composables/useTheme";
+import IconBone from "~icons/lucide/bone";
+import IconTreePine from "~icons/lucide/tree-pine";
+import IconCitrus from "~icons/lucide/citrus";
+import IconSparkles from "~icons/lucide/sparkles";
+import { themedNavIcon, type ThemeName } from "../composables/useTheme";
 
 const props = defineProps<{
   currentView: string;
@@ -17,15 +18,35 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   navigate: [view: string];
-  toggleTheme: [];
+  selectTheme: [theme: ThemeName];
 }>();
 
 const collapsed = ref(false);
+const themePickerOpen = ref(false);
 
-const themeToggleLabel = computed(() => {
-  if (props.theme === "developer") return "Dev Mode";
-  return props.theme === "light" ? "Light Mode" : "Dark Mode";
-});
+interface ThemeOption {
+  name: ThemeName;
+  label: string;
+  icon: Component;
+}
+
+const themeOptions: ThemeOption[] = [
+  { name: "dark", label: "Dark", icon: IconMoon },
+  { name: "light", label: "Light", icon: IconSun },
+  { name: "developer", label: "Dev Mode", icon: IconTerminal },
+  { name: "skeleton", label: "Skeleton", icon: IconBone },
+  { name: "forest", label: "Forest", icon: IconTreePine },
+  { name: "orange-peel", label: "Orange Peel", icon: IconCitrus },
+  { name: "dragonfruit", label: "Dragonfruit", icon: IconSparkles },
+];
+
+const currentThemeOption = computed(() => themeOptions.find((o) => o.name === props.theme) ?? themeOptions[0]);
+const themeToggleLabel = computed(() => currentThemeOption.value.label);
+
+function chooseTheme(name: ThemeName) {
+  emit("selectTheme", name);
+  themePickerOpen.value = false;
+}
 
 interface NavItem {
   view: string;
@@ -33,11 +54,11 @@ interface NavItem {
   icon: Component;
 }
 
-const navItems: NavItem[] = [
-  { view: "library", label: "Library", icon: IconServer },
-  { view: "sharp-library", label: "Sharp", icon: IconLayers },
-  { view: "logs", label: "Logs", icon: IconFileText },
-];
+const navItems = computed<NavItem[]>(() => [
+  { view: "library", label: "Library", icon: themedNavIcon("library") },
+  { view: "sharp-library", label: "Sharp", icon: themedNavIcon("sharp") },
+  { view: "logs", label: "Logs", icon: themedNavIcon("logs") },
+]);
 </script>
 
 <template>
@@ -69,14 +90,27 @@ const navItems: NavItem[] = [
     <div class="sidebar-bottom">
       <button
         class="sidebar-nav-item sidebar-theme-toggle"
-        @click="emit('toggleTheme')"
+        @click="themePickerOpen = !themePickerOpen"
         :title="collapsed ? themeToggleLabel : undefined"
       >
-        <IconTerminal v-if="theme === 'developer'" class="sidebar-nav-icon" width="18" height="18" />
-        <IconSun v-else-if="theme === 'light'" class="sidebar-nav-icon" width="18" height="18" />
-        <IconMoon v-else class="sidebar-nav-icon" width="18" height="18" />
+        <component :is="currentThemeOption.icon" class="sidebar-nav-icon" width="18" height="18" />
         <span v-if="!collapsed" class="sidebar-nav-label">{{ themeToggleLabel }}</span>
       </button>
+      <Teleport to="body">
+        <div v-if="themePickerOpen" class="theme-picker-backdrop" @click="themePickerOpen = false"></div>
+        <div v-if="themePickerOpen" class="theme-picker-popover">
+          <button
+            v-for="option in themeOptions"
+            :key="option.name"
+            class="theme-picker-item"
+            :class="{ active: option.name === theme }"
+            @click="chooseTheme(option.name)"
+          >
+            <component :is="option.icon" class="theme-picker-icon" width="16" height="16" />
+            <span class="theme-picker-label">{{ option.label }}</span>
+          </button>
+        </div>
+      </Teleport>
       <button
         class="sidebar-nav-item"
         :class="{ active: currentView === 'settings' }"
@@ -140,6 +174,22 @@ const navItems: NavItem[] = [
   background-color: rgba(9, 7, 15, 0.32);
 }
 
+:global(:root[data-theme="skeleton"] .sidebar) {
+  background-color: rgba(19, 19, 19, 0.32);
+}
+
+:global(:root[data-theme="forest"] .sidebar) {
+  background-color: rgba(13, 21, 16, 0.32);
+}
+
+:global(:root[data-theme="orange-peel"] .sidebar) {
+  background-color: rgba(18, 11, 8, 0.32);
+}
+
+:global(:root[data-theme="dragonfruit"] .sidebar) {
+  background-color: rgba(26, 14, 24, 0.32);
+}
+
 :global(:root[data-low-performance="true"] .sidebar) {
   background-color: var(--bg-surface);
   backdrop-filter: none;
@@ -244,7 +294,7 @@ const navItems: NavItem[] = [
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 10px;
   min-height: 36px;
   padding: 8px 10px;
@@ -256,7 +306,7 @@ const navItems: NavItem[] = [
   cursor: pointer;
   transition: all var(--transition);
   width: 100%;
-  text-align: center;
+  text-align: left;
   font-size: 13px;
   -webkit-app-region: no-drag;
   white-space: nowrap;
@@ -390,6 +440,61 @@ const navItems: NavItem[] = [
   margin-bottom: 4px;
 }
 
+.theme-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 89;
+}
+
+.theme-picker-popover {
+  position: fixed;
+  left: 8px;
+  bottom: 96px;
+  width: calc(var(--sidebar-width-expanded) - 16px);
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 32px var(--card-glow);
+  -webkit-app-region: no-drag;
+}
+
+.theme-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 32px;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--transition);
+}
+.theme-picker-item:hover {
+  background: var(--sidebar-hover);
+  border-color: var(--border);
+}
+.theme-picker-item.active {
+  background: var(--accent-glow);
+  border-color: var(--accent-dim);
+  color: var(--accent);
+}
+
+.theme-picker-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
 .sidebar-bottom {
   padding: 8px;
   border-top: 1px solid var(--border);
diff --git a/app/src/renderer/composables/useTheme.ts b/app/src/renderer/composables/useTheme.ts
index 94083701..9031936f 100644
--- a/app/src/renderer/composables/useTheme.ts
+++ b/app/src/renderer/composables/useTheme.ts
@@ -1,8 +1,32 @@
-import { ref, watch } from "vue";
+import { type Component, ref, watch } from "vue";
+import IconAxe from "~icons/lucide/axe";
+import IconBinoculars from "~icons/lucide/binoculars";
+import IconBone from "~icons/lucide/bone";
+import IconBraces from "~icons/lucide/braces";
+import IconCitrus from "~icons/lucide/citrus";
+import IconClipboardList from "~icons/lucide/clipboard-list";
+import IconCpu from "~icons/lucide/cpu";
+import IconCrosshair from "~icons/lucide/crosshair";
+import IconFileCode from "~icons/lucide/file-code";
+import IconFileText from "~icons/lucide/file-text";
+import IconFlame from "~icons/lucide/flame";
+import IconGem from "~icons/lucide/gem";
+import IconGrape from "~icons/lucide/grape";
+import IconLayers from "~icons/lucide/layers";
+import IconLeaf from "~icons/lucide/leaf";
+import IconRefreshCcw from "~icons/lucide/refresh-ccw";
+import IconRocket from "~icons/lucide/rocket";
+import IconRotateCw from "~icons/lucide/rotate-cw";
+import IconScroll from "~icons/lucide/scroll";
+import IconScrollText from "~icons/lucide/scroll-text";
+import IconServer from "~icons/lucide/server";
+import IconSkull from "~icons/lucide/skull";
+import IconTrees from "~icons/lucide/trees";
+import IconZap from "~icons/lucide/zap";
 
-export type ThemeName = "dark" | "light" | "developer";
+export type ThemeName = "dark" | "light" | "developer" | "skeleton" | "forest" | "orange-peel" | "dragonfruit";
 
-const themes: ThemeName[] = ["dark", "light", "developer"];
+export const themes: ThemeName[] = ["dark", "light", "developer", "skeleton", "forest", "orange-peel", "dragonfruit"];
 
 function readSavedTheme(): ThemeName {
   const requested = new URLSearchParams(window.location.search).get("theme");
@@ -24,11 +48,67 @@ document.documentElement.dataset.theme = theme.value;
 document.body.classList.toggle("light", theme.value === "light");
 document.body.classList.toggle("developer", theme.value === "developer");
 
+export type NavIconKey = "library" | "sharp" | "logs" | "refresh" | "steam";
+
+const defaultNavIcons: Record<NavIconKey, Component> = {
+  library: IconServer,
+  sharp: IconLayers,
+  logs: IconFileText,
+  refresh: IconRefreshCcw,
+  steam: IconCrosshair,
+};
+
+const themeNavIcons: Partial<Record<ThemeName, Partial<Record<NavIconKey, Component>>>> = {
+  developer: {
+    library: IconCpu,
+    sharp: IconBraces,
+    logs: IconFileCode,
+    refresh: IconRotateCw,
+    steam: IconRocket,
+  },
+  skeleton: {
+    library: IconSkull,
+    sharp: IconBone,
+    logs: IconScroll,
+    refresh: IconRotateCw,
+    steam: IconAxe,
+  },
+  forest: {
+    library: IconTrees,
+    sharp: IconLeaf,
+    logs: IconScroll,
+    refresh: IconRotateCw,
+    steam: IconBinoculars,
+  },
+  "orange-peel": {
+    library: IconFlame,
+    sharp: IconCitrus,
+    logs: IconClipboardList,
+    refresh: IconRotateCw,
+    steam: IconZap,
+  },
+  dragonfruit: {
+    library: IconZap,
+    sharp: IconGem,
+    logs: IconScrollText,
+    refresh: IconRotateCw,
+    steam: IconGrape,
+  },
+};
+
+export function themedNavIcon(key: NavIconKey): Component {
+  return themeNavIcons[theme.value]?.[key] ?? defaultNavIcons[key];
+}
+
 export function useTheme() {
   function toggle() {
     const currentIndex = themes.indexOf(theme.value);
     theme.value = themes[(currentIndex + 1) % themes.length];
   }
 
-  return { theme, toggle };
+  function setTheme(name: ThemeName) {
+    if (themes.includes(name)) theme.value = name;
+  }
+
+  return { theme, toggle, setTheme };
 }
diff --git a/app/src/renderer/shims-vue.d.ts b/app/src/renderer/shims-vue.d.ts
index 525d5f82..786ce692 100644
--- a/app/src/renderer/shims-vue.d.ts
+++ b/app/src/renderer/shims-vue.d.ts
@@ -3,3 +3,9 @@ declare module "*.vue" {
   const component: DefineComponent<object, object, unknown>;
   export default component;
 }
+
+declare module "~icons/*" {
+  import type { Component } from "vue";
+  const component: Component;
+  export default component;
+}
diff --git a/app/src/renderer/styles/base.css b/app/src/renderer/styles/base.css
index 63c9b18e..f0cbb913 100644
--- a/app/src/renderer/styles/base.css
+++ b/app/src/renderer/styles/base.css
@@ -89,7 +89,7 @@ textarea {
   background-color: rgba(18, 28, 40, 0.32);
 }
 :root[data-theme="light"] .glass-header {
-  background-color: rgba(255, 255, 255, 0.32);
+  background-color: rgba(252, 250, 246, 0.46);
 }
 :root[data-theme="light"] .glass-header h1 {
   color: #354b5d;
@@ -113,15 +113,48 @@ textarea {
 :root[data-theme="developer"] .glass-header {
   background-color: rgba(9, 7, 15, 0.32);
 }
+:root[data-theme="skeleton"] .glass-header {
+  background-color: rgba(19, 19, 19, 0.32);
+}
+:root[data-theme="forest"] .glass-header {
+  background-color: rgba(13, 21, 16, 0.32);
+}
+:root[data-theme="orange-peel"] .glass-header {
+  background-color: rgba(18, 11, 8, 0.32);
+}
+:root[data-theme="dragonfruit"] .glass-header {
+  background-color: rgba(26, 14, 24, 0.32);
+}
 
 .view-body-surface {
   background: var(--bg-deep);
 }
 :root[data-theme="developer"] .view-body-surface {
   background:
-    linear-gradient(118deg, rgba(185, 255, 77, 0.025), transparent 36%, rgba(0, 245, 255, 0.03) 72%, transparent),
-    radial-gradient(circle at 24% 16%, rgba(255, 46, 247, 0.14), transparent 34%),
-    radial-gradient(circle at 84% 10%, rgba(0, 245, 255, 0.11), transparent 30%), var(--bg-deep);
+    linear-gradient(118deg, rgba(185, 255, 77, 0.02), transparent 36%, rgba(0, 245, 255, 0.024) 72%, transparent),
+    radial-gradient(circle at 24% 16%, rgba(255, 46, 247, 0.11), transparent 34%),
+    radial-gradient(circle at 84% 10%, rgba(0, 245, 255, 0.09), transparent 30%), var(--bg-deep);
+}
+:root[data-theme="skeleton"] .view-body-surface {
+  background:
+    radial-gradient(circle at 24% 16%, rgba(232, 226, 213, 0.05), transparent 36%),
+    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.04), transparent 30%), var(--bg-deep);
+}
+:root[data-theme="forest"] .view-body-surface {
+  background:
+    radial-gradient(circle at 24% 16%, rgba(92, 184, 112, 0.07), transparent 34%),
+    radial-gradient(circle at 84% 10%, rgba(168, 122, 74, 0.05), transparent 30%), var(--bg-deep);
+}
+:root[data-theme="orange-peel"] .view-body-surface {
+  background:
+    linear-gradient(118deg, rgba(255, 122, 26, 0.03), transparent 38%, rgba(255, 160, 77, 0.024) 74%, transparent),
+    radial-gradient(circle at 24% 16%, rgba(255, 122, 26, 0.08), transparent 34%), var(--bg-deep);
+}
+:root[data-theme="dragonfruit"] .view-body-surface {
+  background:
+    linear-gradient(118deg, rgba(255, 46, 136, 0.03), transparent 38%, rgba(168, 106, 224, 0.03) 74%, transparent),
+    radial-gradient(circle at 24% 16%, rgba(255, 46, 136, 0.1), transparent 34%),
+    radial-gradient(circle at 84% 10%, rgba(168, 106, 224, 0.08), transparent 30%), var(--bg-deep);
 }
 
 .hidden {
@@ -215,7 +248,6 @@ textarea {
 
 :root[data-theme="developer"] .btn {
   border-color: color-mix(in srgb, var(--accent-hover) 34%, transparent);
-  border-radius: 999px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 54%),
     linear-gradient(90deg, rgba(0, 245, 255, 0.12), rgba(255, 46, 247, 0.08));
diff --git a/app/src/renderer/styles/variables.css b/app/src/renderer/styles/variables.css
index 70fc4d51..2cedbf88 100644
--- a/app/src/renderer/styles/variables.css
+++ b/app/src/renderer/styles/variables.css
@@ -49,20 +49,20 @@
 }
 
 :root[data-theme="light"] {
-  --bg-deep: #f4f6f8;
-  --bg-surface: #eef2f6;
-  --bg-card: #ffffff;
-  --bg-card-hover: #f7f9fb;
-  --game-card-bg: #ffffff;
-  --game-card-body-bg: #ffffff;
+  --bg-deep: #f5f3ee;
+  --bg-surface: #efece5;
+  --bg-card: #fdfbf7;
+  --bg-card-hover: #f8f5ee;
+  --game-card-bg: #fdfbf7;
+  --game-card-body-bg: #fdfbf7;
   --game-card-text: #1e2732;
   --game-card-dim: #6d7b88;
-  --bg-input: #ffffff;
-  --accent: #347fba;
-  --accent-hover: #246fa8;
+  --bg-input: #fdfbf7;
+  --accent: #2b6fa5;
+  --accent-hover: #1f5c8c;
   --accent-dim: #5d99c4;
-  --accent-glow: rgba(52, 127, 186, 0.14);
-  --card-glow: rgba(20, 34, 48, 0.09);
+  --accent-glow: rgba(43, 111, 165, 0.16);
+  --card-glow: rgba(20, 34, 48, 0.15);
   --card-installed-glow-color: #4db8ff;
   --success: #438f55;
   --success-bg: rgba(67, 143, 85, 0.1);
@@ -76,9 +76,9 @@
   --text-secondary: #596875;
   --text-dim: #8997a4;
   --text-bright: #0e1a26;
-  --border: rgba(30, 39, 50, 0.1);
-  --border-strong: rgba(30, 39, 50, 0.18);
-  --sidebar-bg: rgba(255, 255, 255, 0.56);
+  --border: rgba(30, 39, 50, 0.14);
+  --border-strong: rgba(30, 39, 50, 0.24);
+  --sidebar-bg: rgba(253, 251, 247, 0.56);
   --sidebar-hover: rgba(255, 255, 255, 0.38);
   --sidebar-active: rgba(52, 127, 186, 0.11);
   --sidebar-text: #1e2732;
@@ -114,14 +114,14 @@
   --warn: #ffd84d;
   --warn-bg: rgba(255, 216, 77, 0.14);
   --text-primary: #f8ffe7;
-  --text-secondary: #98f2ff;
-  --text-dim: #b39bd0;
+  --text-secondary: #8fd0dc;
+  --text-dim: #c2b1dc;
   --text-bright: #ffffff;
-  --border: rgba(0, 245, 255, 0.18);
+  --border: rgba(0, 245, 255, 0.14);
   --border-strong: rgba(185, 255, 77, 0.32);
   --sidebar-bg: rgba(9, 7, 15, 0.58);
   --sidebar-hover: rgba(255, 46, 247, 0.11);
-  --sidebar-active: linear-gradient(90deg, rgba(185, 255, 77, 0.12), rgba(0, 245, 255, 0.08), rgba(255, 46, 247, 0.1));
+  --sidebar-active: linear-gradient(90deg, rgba(185, 255, 77, 0.16), rgba(0, 245, 255, 0.1), rgba(255, 46, 247, 0.14));
   --sidebar-text: #f8ffe7;
   --sidebar-text-active: var(--sidebar-text);
   --sidebar-text-hover: #b9ff4d;
@@ -133,3 +133,170 @@
     linear-gradient(100deg, #0a0611 0%, #191026 34%, #05232c 68%, #22082d 100%);
   --transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+
+:root[data-theme="skeleton"] {
+  --bg-deep: #131313;
+  --bg-surface: #1b1b1b;
+  --bg-card: #222222;
+  --bg-card-hover: #2a2a2a;
+  --game-card-bg: #222222;
+  --game-card-body-bg: #222222;
+  --game-card-text: var(--text-primary);
+  --game-card-dim: var(--text-dim);
+  --bg-input: #171717;
+  --accent: #d6d0c4;
+  --accent-hover: #ede9e0;
+  --accent-dim: #8f8a80;
+  --accent-glow: rgba(214, 208, 196, 0.16);
+  --card-glow: rgba(255, 255, 255, 0.08);
+  --card-installed-glow-color: #c9c3b8;
+  --success: #a3b89f;
+  --success-bg: rgba(163, 184, 159, 0.14);
+  --play-color: #c9c3b8;
+  --play-color-hover: #8f8a80;
+  --error: #c09090;
+  --error-bg: rgba(192, 144, 144, 0.13);
+  --warn: #c4b088;
+  --warn-bg: rgba(196, 176, 136, 0.14);
+  --text-primary: #e8e2d5;
+  --text-secondary: #a8a49a;
+  --text-dim: #7a766e;
+  --text-bright: #ffffff;
+  --border: rgba(232, 226, 213, 0.1);
+  --border-strong: rgba(232, 226, 213, 0.18);
+  --sidebar-bg: rgba(19, 19, 19, 0.58);
+  --sidebar-hover: rgba(232, 226, 213, 0.1);
+  --sidebar-active: rgba(232, 226, 213, 0.14);
+  --sidebar-text: #e8e2d5;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ffffff;
+  --sidebar-logo-color: #e8e2d5;
+  --sidebar-logo-accent: #8f8a80;
+  --page-header-bg: linear-gradient(90deg, #1b1b1b 0%, #242424 30%, #2b2b2b 60%, #242424 100%);
+}
+
+:root[data-theme="forest"] {
+  --bg-deep: #0d1510;
+  --bg-surface: #121c15;
+  --bg-card: #182219;
+  --bg-card-hover: #1e2b20;
+  --game-card-bg: #182219;
+  --game-card-body-bg: #182219;
+  --game-card-text: var(--text-primary);
+  --game-card-dim: var(--text-dim);
+  --bg-input: #101a12;
+  --accent: #5cb870;
+  --accent-hover: #7ed494;
+  --accent-dim: #3d8452;
+  --accent-glow: rgba(92, 184, 112, 0.2);
+  --card-glow: rgba(92, 184, 112, 0.1);
+  --card-installed-glow-color: #6fce88;
+  --success: #6fce88;
+  --success-bg: rgba(111, 206, 136, 0.14);
+  --play-color: #4d9e62;
+  --play-color-hover: #35704a;
+  --error: #d66a5a;
+  --error-bg: rgba(214, 106, 90, 0.13);
+  --warn: #d8b24b;
+  --warn-bg: rgba(216, 178, 75, 0.14);
+  --text-primary: #dce8dc;
+  --text-secondary: #a4b8a4;
+  --text-dim: #71856f;
+  --text-bright: #f2faf2;
+  --border: rgba(140, 190, 150, 0.12);
+  --border-strong: rgba(140, 190, 150, 0.2);
+  --sidebar-bg: rgba(13, 21, 16, 0.58);
+  --sidebar-hover: rgba(92, 184, 112, 0.12);
+  --sidebar-active: rgba(92, 184, 112, 0.18);
+  --sidebar-text: #dce8dc;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #7ed494;
+  --sidebar-logo-color: #dce8dc;
+  --sidebar-logo-accent: #a87a4a;
+  --page-header-bg: linear-gradient(90deg, #121c15 0%, #1a2e1c 30%, #213a22 60%, #1a2e1c 100%);
+}
+
+:root[data-theme="orange-peel"] {
+  --bg-deep: #120b08;
+  --bg-surface: #1b110c;
+  --bg-card: #231610;
+  --bg-card-hover: #2b1b12;
+  --game-card-bg: #231610;
+  --game-card-body-bg: #231610;
+  --game-card-text: var(--text-primary);
+  --game-card-dim: var(--text-dim);
+  --bg-input: #170e0a;
+  --accent: #ff7a1a;
+  --accent-hover: #ffa04d;
+  --accent-dim: #b05a14;
+  --accent-glow: rgba(255, 122, 26, 0.2);
+  --card-glow: rgba(255, 122, 26, 0.12);
+  --card-installed-glow-color: #ff8a2e;
+  --success: #7cbf6a;
+  --success-bg: rgba(124, 191, 106, 0.14);
+  --play-color: #d97a2e;
+  --play-color-hover: #a85a18;
+  --error: #e0604f;
+  --error-bg: rgba(224, 96, 79, 0.13);
+  --warn: #ffb84d;
+  --warn-bg: rgba(255, 184, 77, 0.14);
+  --text-primary: #f2e4d8;
+  --text-secondary: #c4a894;
+  --text-dim: #8f7261;
+  --text-bright: #fff8f0;
+  --border: rgba(255, 170, 120, 0.12);
+  --border-strong: rgba(255, 170, 120, 0.2);
+  --sidebar-bg: rgba(18, 11, 8, 0.58);
+  --sidebar-hover: rgba(255, 122, 26, 0.12);
+  --sidebar-active: rgba(255, 122, 26, 0.18);
+  --sidebar-text: #f2e4d8;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ffa04d;
+  --sidebar-logo-color: #ff7a1a;
+  --sidebar-logo-accent: #ffa04d;
+  --page-header-bg: linear-gradient(90deg, #1b110c 0%, #33190c 30%, #47220f 60%, #33190c 100%);
+}
+
+:root[data-theme="dragonfruit"] {
+  --bg-deep: #1a0e18;
+  --bg-surface: #241322;
+  --bg-card: #2c182a;
+  --bg-card-hover: #361e33;
+  --game-card-bg: #2c182a;
+  --game-card-body-bg: #2c182a;
+  --game-card-text: var(--text-primary);
+  --game-card-dim: var(--text-dim);
+  --bg-input: #200f1e;
+  --accent: #ff2e88;
+  --accent-hover: #ff66aa;
+  --accent-dim: #b81e62;
+  --accent-glow: rgba(255, 46, 136, 0.22);
+  --card-glow: rgba(255, 46, 136, 0.14);
+  --card-installed-glow-color: #9be34a;
+  --success: #9be34a;
+  --success-bg: rgba(155, 227, 74, 0.12);
+  --play-color: #ff2e88;
+  --play-color-hover: #ff66aa;
+  --error: #ff5c5c;
+  --error-bg: rgba(255, 92, 92, 0.13);
+  --warn: #ffc44d;
+  --warn-bg: rgba(255, 196, 77, 0.14);
+  --text-primary: #f8e4f0;
+  --text-secondary: #c49ab8;
+  --text-dim: #94708c;
+  --text-bright: #ffffff;
+  --border: rgba(255, 120, 180, 0.14);
+  --border-strong: rgba(255, 120, 180, 0.24);
+  --sidebar-bg: rgba(26, 14, 24, 0.58);
+  --sidebar-hover: rgba(255, 46, 136, 0.1);
+  --sidebar-active: rgba(255, 46, 136, 0.16);
+  --sidebar-text: #f8e4f0;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ff66aa;
+  --sidebar-logo-color: #ff2e88;
+  --sidebar-logo-accent: #a86ae0;
+  --page-header-bg:
+    radial-gradient(circle at 14% 14%, rgba(255, 46, 136, 0.18), transparent 34%),
+    radial-gradient(circle at 86% 18%, rgba(168, 106, 224, 0.16), transparent 32%),
+    linear-gradient(100deg, #22082a 0%, #3a1038 36%, #52123f 66%, #2a0e30 100%);
+}
diff --git a/app/src/renderer/views/LibraryView.vue b/app/src/renderer/views/LibraryView.vue
index 5247ae5f..ae34a43d 100644
--- a/app/src/renderer/views/LibraryView.vue
+++ b/app/src/renderer/views/LibraryView.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { ref, inject, onMounted, onUnmounted, watch, type Ref } from "vue";
+import { computed, ref, inject, onMounted, onUnmounted, watch, type Ref } from "vue";
 import { useToast } from "../composables/useToast";
 import { api } from "../composables/useApi";
+import { themedNavIcon } from "../composables/useTheme";
 import GameCard from "../components/GameCard.vue";
-import IconCrosshair from "~icons/lucide/crosshair";
-import IconRefreshCcw from "~icons/lucide/refresh-ccw";
 import IconBattery from "~icons/lucide/battery";
 
+const steamIcon = computed(() => themedNavIcon("steam"));
+const refreshIcon = computed(() => themedNavIcon("refresh"));
+
 interface SteamGame {
   appid: number;
   name: string;
@@ -322,7 +324,7 @@ watch([library, search, filter], () => {
       <div class="library-controls">
         <div class="library-launch-actions">
           <button class="btn btn-secondary library-control-button" title="Wine Steam" @click="toggleSteam">
-            <IconCrosshair class="control-icon" width="15" height="15" />
+            <component :is="steamIcon" class="control-icon" width="15" height="15" />
             <span class="control-label">{{ wineSteamRunning ? "Stop Wine Steam" : "Start Wine Steam" }}</span>
           </button>
           <button
@@ -330,7 +332,7 @@ watch([library, search, filter], () => {
             title="Refresh"
             @click="reloadLibrary()"
           >
-            <IconRefreshCcw class="control-icon" width="15" height="15" />
+            <component :is="refreshIcon" class="control-icon" width="15" height="15" />
             <span class="control-label">Refresh</span>
           </button>
         </div>
diff --git a/app/src/renderer/views/SharpView.vue b/app/src/renderer/views/SharpView.vue
index 36e5b63b..cb757420 100644
--- a/app/src/renderer/views/SharpView.vue
+++ b/app/src/renderer/views/SharpView.vue
@@ -3,12 +3,14 @@ import { computed, ref, onMounted, onUnmounted } from "vue";
 import { useToast } from "../composables/useToast";
 import { api, getAPI } from "../composables/useApi";
 import type { SharpApp } from "../api-types";
+import { themedNavIcon } from "../composables/useTheme";
 import IconUpload from "~icons/lucide/upload";
-import IconRefreshCcw from "~icons/lucide/refresh-ccw";
 import IconMonitor from "~icons/lucide/monitor";
 import IconX from "~icons/lucide/x";
 import sharpLogoUrl from "../icon.png";
 
+const refreshIcon = computed(() => themedNavIcon("refresh"));
+
 interface LaunchDoctorCheck {
   id: string;
   label: string;
@@ -1534,7 +1536,7 @@ onUnmounted(stopGogMonoPoll);
           :disabled="sourceMode === 'gog' && gogLoading.sync"
           @click="refreshCurrentSource"
         >
-          <IconRefreshCcw class="btn-icon" width="14" height="14" />
+          <component :is="refreshIcon" class="btn-icon" width="14" height="14" />
           <span class="btn-label-long">{{
             sourceMode === "gog" ? (gogLoading.sync ? "Syncing…" : "Sync GOG") : "Refresh"
           }}</span