diff --git a/app/src/main/index.ts b/app/src/main/index.ts
index 2a8f8508..10a56621 100644
--- a/app/src/main/index.ts
+++ b/app/src/main/index.ts
@@ -526,7 +526,7 @@ async function createProcessManagerWindow(): Promise<BrowserWindow> {
     processManagerWindow = null;
   });
   await processManagerWindow.loadFile(path.join(__dirname, "..", "renderer", "index.html"), {
-    query: { overlay: "process-manager", theme: "developer" },
+    query: { overlay: "process-manager", theme: "dark" },
   });
   return processManagerWindow;
 }
@@ -608,7 +608,7 @@ async function createWindow(migrating = false) {
     },
   });
 
-  const query: Record<string, string> = uiOnly ? { theme: "developer" } : {};
+  const query: Record<string, string> = uiOnly ? { theme: "dark" } : {};
   if (process.env.METALSHARP_DEV_LIBRARY === "1") query["skip-to"] = "library";
   mainWindow.loadFile(path.join(__dirname, "..", "renderer", "index.html"), {
     query,
diff --git a/app/src/renderer/App.vue b/app/src/renderer/App.vue
index eca78f2d..41de8385 100644
--- a/app/src/renderer/App.vue
+++ b/app/src/renderer/App.vue
@@ -582,26 +582,7 @@ onMounted(async () => {
   flex-direction: column;
   background: var(--bg-deep);
 }
-:root[data-theme="developer"] .content {
-  background:
-    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;
 }
-:root[data-theme="developer"] .update-banner {
-  background:
-    linear-gradient(90deg, rgba(185, 255, 77, 0.16), rgba(0, 245, 255, 0.1), rgba(255, 46, 247, 0.14)),
-    rgba(9, 7, 15, 0.84);
-  border-bottom-color: rgba(185, 255, 77, 0.28);
-  color: var(--text-primary);
-}
-:root[data-theme="developer"] .update-banner-btn {
-  border-radius: 999px;
-  border-color: rgba(185, 255, 77, 0.42);
-  background: rgba(9, 7, 15, 0.62);
-  color: var(--accent);
-}
 </style>
diff --git a/app/src/renderer/assets/banana-slices.png b/app/src/renderer/assets/banana-slices.png
new file mode 100644
index 00000000..dcccb58d
Binary files /dev/null and b/app/src/renderer/assets/banana-slices.png differ
diff --git a/app/src/renderer/assets/beach-sand.png b/app/src/renderer/assets/beach-sand.png
new file mode 100644
index 00000000..68077769
Binary files /dev/null and b/app/src/renderer/assets/beach-sand.png differ
diff --git a/app/src/renderer/assets/lava-cracks.png b/app/src/renderer/assets/lava-cracks.png
new file mode 100644
index 00000000..5c63495d
Binary files /dev/null and b/app/src/renderer/assets/lava-cracks.png differ
diff --git a/app/src/renderer/components/GameCard.vue b/app/src/renderer/components/GameCard.vue
index 665a050a..72734538 100644
--- a/app/src/renderer/components/GameCard.vue
+++ b/app/src/renderer/components/GameCard.vue
@@ -1173,39 +1173,18 @@ function formatBytes(bytes: number): string {
     0 0 24px color-mix(in srgb, var(--accent) 16%, transparent),
     0 16px 36px color-mix(in srgb, var(--bg-deep) 34%, transparent);
 }
-:global(:root[data-theme="developer"] .game-card) {
-  border-color: rgba(0, 245, 255, 0.22);
-  border-radius: 20px;
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
-    0 0 0 1px rgba(185, 255, 77, 0.14),
-    0 0 34px rgba(255, 46, 247, 0.14),
-    0 22px 56px rgba(0, 0, 0, 0.36);
-}
 .game-card.installed {
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--card-installed-glow-color) 35%, transparent),
     0 0 40px color-mix(in srgb, var(--card-installed-glow-color) 48%, transparent),
     0 18px 40px color-mix(in srgb, var(--bg-deep) 36%, transparent);
 }
-:global(:root[data-theme="developer"] .game-card.installed) {
-  border-color: rgba(185, 255, 77, 0.34);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
-    0 0 0 1px rgba(185, 255, 77, 0.24),
-    0 0 42px rgba(185, 255, 77, 0.2),
-    0 24px 58px rgba(0, 0, 0, 0.38);
-}
 .game-card.uninstalled {
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
     0 0 24px color-mix(in srgb, var(--accent) 14%, transparent),
     0 14px 34px color-mix(in srgb, var(--bg-deep) 30%, transparent);
 }
-:global(:root[data-theme="developer"] .game-card.uninstalled) {
-  opacity: 0.92;
-  filter: saturate(0.9);
-}
 .game-card:hover {
   border-color: var(--border-strong);
   box-shadow:
@@ -1214,15 +1193,6 @@ function formatBytes(bytes: number): string {
     0 22px 48px color-mix(in srgb, var(--bg-deep) 42%, transparent);
   transform: translateY(-1px);
 }
-:global(:root[data-theme="developer"] .game-card:hover) {
-  border-color: rgba(185, 255, 77, 0.58);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 245, 255, 0.14),
-    0 0 0 1px rgba(185, 255, 77, 0.28),
-    0 0 46px rgba(0, 245, 255, 0.2),
-    0 26px 64px rgba(0, 0, 0, 0.44);
-  transform: translateY(-3px);
-}
 .game-card.running {
   border-color: var(--success);
   box-shadow:
@@ -1230,15 +1200,6 @@ function formatBytes(bytes: number): string {
     0 0 38px color-mix(in srgb, var(--success) 30%, transparent),
     0 22px 48px color-mix(in srgb, var(--bg-deep) 42%, transparent);
 }
-:global(:root[data-theme="developer"] .game-card.running) {
-  border-color: var(--success);
-  box-shadow:
-    0 0 0 1px rgba(112, 255, 140, 0.38),
-    0 0 46px rgba(112, 255, 140, 0.24),
-    0 0 80px rgba(0, 245, 255, 0.1),
-    0 26px 64px rgba(0, 0, 0, 0.42);
-}
-
 .game-card-banner {
   width: 100%;
   aspect-ratio: 16 / 6.25;
@@ -1251,11 +1212,6 @@ function formatBytes(bytes: number): string {
   overflow: hidden;
   position: relative;
 }
-:global(:root[data-theme="developer"] .game-card-banner) {
-  border-radius: 18px 18px 0 0;
-  background: linear-gradient(135deg, rgba(185, 255, 77, 0.15), rgba(255, 46, 247, 0.13)), var(--bg-surface);
-  box-shadow: inset 0 0 0 1px rgba(0, 245, 255, 0.18);
-}
 .game-card-cover {
   width: 100%;
   height: 100%;
@@ -1271,15 +1227,6 @@ function formatBytes(bytes: number): string {
     radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
     var(--bg-surface);
 }
-:global(:root[data-theme="developer"] .game-card-cover) {
-  filter: saturate(1.18) contrast(1.03);
-}
-:global(:root[data-theme="developer"] .game-card-cover.fallback) {
-  background:
-    radial-gradient(circle at 26% 32%, rgba(255, 46, 247, 0.24), transparent 36%),
-    radial-gradient(circle at 76% 64%, rgba(0, 245, 255, 0.2), transparent 40%),
-    linear-gradient(135deg, rgba(185, 255, 77, 0.13), rgba(9, 7, 15, 0.92));
-}
 .game-card:hover .game-card-cover {
   transform: scale(1.015);
   filter: saturate(1.04);
@@ -1312,9 +1259,6 @@ function formatBytes(bytes: number): string {
   color: var(--game-card-text, var(--text-primary));
   padding: 14px;
 }
-:global(:root[data-theme="developer"] .game-card-body) {
-  padding: 14px;
-}
 .game-card-heading {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, auto);
@@ -1330,10 +1274,6 @@ function formatBytes(bytes: number): string {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-:global(:root[data-theme="developer"] .game-card-title) {
-  color: #f8ffe7;
-  font-family: var(--font-mono);
-}
 .game-card-meta {
   display: flex;
   align-items: center;
@@ -1360,13 +1300,6 @@ function formatBytes(bytes: number): string {
   font-size: 11px;
   font-weight: 700;
 }
-:global(:root[data-theme="developer"] .route-chip),
-:global(:root[data-theme="developer"] .tool-chip),
-:global(:root[data-theme="developer"] .launch-mode-select),
-:global(:root[data-theme="developer"] .icon-button),
-:global(:root[data-theme="developer"] .danger-link) {
-  border-radius: 999px;
-}
 .bottle-chip {
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   color: var(--accent);
@@ -1541,12 +1474,6 @@ function formatBytes(bytes: number): string {
 }
 
 @media (max-width: 760px) {
-  :global(:root[data-theme="developer"] .game-card-banner) {
-    min-height: 102px;
-  }
-  :global(:root[data-theme="developer"] .game-card-body) {
-    padding: 12px;
-  }
   .primary-action-row,
   .secondary-action-grid {
     gap: 8px;
diff --git a/app/src/renderer/components/ProcessManagerOverlay.vue b/app/src/renderer/components/ProcessManagerOverlay.vue
index 67628b32..bfd53652 100644
--- a/app/src/renderer/components/ProcessManagerOverlay.vue
+++ b/app/src/renderer/components/ProcessManagerOverlay.vue
@@ -150,7 +150,6 @@ function onKey(e: KeyboardEvent): void {
 }
 
 onMounted(() => {
-  document.documentElement.dataset.theme = "developer";
   document.body.classList.add("process-manager-overlay-body");
   window.addEventListener("keydown", onKey);
   void refresh();
diff --git a/app/src/renderer/components/Sidebar.vue b/app/src/renderer/components/Sidebar.vue
index b968443b..c0d130a5 100644
--- a/app/src/renderer/components/Sidebar.vue
+++ b/app/src/renderer/components/Sidebar.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed, ref, type Component } from "vue";
+import { computed, nextTick, ref, watch, type Component } from "vue";
 import IconMenu from "~icons/lucide/menu";
 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 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 IconBanana from "~icons/lucide/banana";
+import IconFlame from "~icons/lucide/flame";
+import IconTreePalm from "~icons/lucide/tree-palm";
+import IconScanLine from "~icons/lucide/scan-line";
 import { themedNavIcon, type ThemeName } from "../composables/useTheme";
 
 const props = defineProps<{
@@ -23,6 +26,13 @@ const emit = defineEmits<{
 
 const collapsed = ref(false);
 const themePickerOpen = ref(false);
+const themePickerRef = ref<HTMLElement | null>(null);
+
+watch(themePickerOpen, async (open) => {
+  if (!open) return;
+  await nextTick();
+  themePickerRef.value?.querySelector(".theme-picker-item.active")?.scrollIntoView({ block: "nearest" });
+});
 
 interface ThemeOption {
   name: ThemeName;
@@ -33,11 +43,14 @@ interface ThemeOption {
 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 },
+  { name: "banana", label: "Banana", icon: IconBanana },
+  { name: "lava", label: "Lava", icon: IconFlame },
+  { name: "beach", label: "Beach", icon: IconTreePalm },
+  { name: "xray", label: "Xray", icon: IconScanLine },
 ];
 
 const currentThemeOption = computed(() => themeOptions.find((o) => o.name === props.theme) ?? themeOptions[0]);
@@ -99,16 +112,19 @@ const navItems = computed<NavItem[]>(() => [
       <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 class="theme-picker-header">Theme</div>
+          <div ref="themePickerRef" class="theme-picker-list">
+            <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>
         </div>
       </Teleport>
       <button
@@ -170,10 +186,6 @@ const navItems = computed<NavItem[]>(() => [
   background-color: rgba(255, 255, 255, 0.32);
 }
 
-:global(:root[data-theme="developer"] .sidebar) {
-  background-color: rgba(9, 7, 15, 0.32);
-}
-
 :global(:root[data-theme="skeleton"] .sidebar) {
   background-color: rgba(19, 19, 19, 0.32);
 }
@@ -190,6 +202,22 @@ const navItems = computed<NavItem[]>(() => [
   background-color: rgba(26, 14, 24, 0.32);
 }
 
+:global(:root[data-theme="banana"] .sidebar) {
+  background-color: rgba(74, 61, 22, 0.32);
+}
+
+:global(:root[data-theme="lava"] .sidebar) {
+  background-color: rgba(26, 6, 6, 0.32);
+}
+
+:global(:root[data-theme="beach"] .sidebar) {
+  background-color: rgba(138, 116, 78, 0.32);
+}
+
+:global(:root[data-theme="xray"] .sidebar) {
+  background-color: rgba(4, 8, 6, 0.32);
+}
+
 :global(:root[data-low-performance="true"] .sidebar) {
   background-color: var(--bg-surface);
   backdrop-filter: none;
@@ -400,34 +428,6 @@ const navItems = computed<NavItem[]>(() => [
     inset 0 0 10px rgba(52, 127, 186, 0.03);
 }
 
-:global(:root[data-theme="developer"] .sidebar::before) {
-  background:
-    linear-gradient(180deg, rgba(255, 46, 247, 0.16) 0%, transparent 34%),
-    linear-gradient(115deg, rgba(185, 255, 77, 0.1), transparent 42%, rgba(0, 245, 255, 0.08));
-}
-
-:global(:root[data-theme="developer"] .sidebar-nav-item.active) {
-  border-color: rgba(185, 255, 77, 0.24);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.09),
-    inset 0 0 14px rgba(255, 46, 247, 0.06),
-    0 0 0 1px rgba(0, 245, 255, 0.07);
-}
-
-:global(:root[data-theme="developer"] .sidebar-nav-item.active::before) {
-  background:
-    linear-gradient(90deg, transparent 0%, rgba(185, 255, 77, 0.45) 45%, rgba(0, 245, 255, 0.28) 52%, transparent 100%),
-    linear-gradient(180deg, rgba(255, 46, 247, 0.16), transparent 64%);
-  opacity: 0.18;
-}
-
-:global(:root[data-theme="developer"] .sidebar-nav-item.active::after) {
-  border-color: rgba(0, 245, 255, 0.18);
-  box-shadow:
-    inset 0 0 0 1px rgba(185, 255, 77, 0.07),
-    inset 0 0 12px rgba(255, 46, 247, 0.05);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .sidebar-nav-item.active::before {
     animation: none;
@@ -450,11 +450,10 @@ const navItems = computed<NavItem[]>(() => [
   position: fixed;
   left: 8px;
   bottom: 96px;
-  width: calc(var(--sidebar-width-expanded) - 16px);
+  width: calc(var(--sidebar-width-expanded) - 8px);
   z-index: 90;
   display: flex;
   flex-direction: column;
-  gap: 2px;
   padding: 6px;
   background: var(--bg-card);
   border: 1px solid var(--border-strong);
@@ -463,7 +462,38 @@ const navItems = computed<NavItem[]>(() => [
   -webkit-app-region: no-drag;
 }
 
+.theme-picker-header {
+  padding: 4px 10px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+.theme-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 288px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y proximity;
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-dim) transparent;
+}
+.theme-picker-list::-webkit-scrollbar {
+  width: 4px;
+}
+.theme-picker-list::-webkit-scrollbar-thumb {
+  background: var(--accent-dim);
+  border-radius: 2px;
+}
+
 .theme-picker-item {
+  scroll-snap-align: start;
   display: flex;
   align-items: center;
   gap: 10px;
diff --git a/app/src/renderer/composables/useTheme.ts b/app/src/renderer/composables/useTheme.ts
index 9031936f..de362a50 100644
--- a/app/src/renderer/composables/useTheme.ts
+++ b/app/src/renderer/composables/useTheme.ts
@@ -1,32 +1,60 @@
 import { type Component, ref, watch } from "vue";
 import IconAxe from "~icons/lucide/axe";
+import IconBanana from "~icons/lucide/banana";
 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 IconFlameKindling from "~icons/lucide/flame-kindling";
 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 IconRadar from "~icons/lucide/radar";
 import IconRefreshCcw from "~icons/lucide/refresh-ccw";
-import IconRocket from "~icons/lucide/rocket";
 import IconRotateCw from "~icons/lucide/rotate-cw";
+import IconScanLine from "~icons/lucide/scan-line";
 import IconScroll from "~icons/lucide/scroll";
 import IconScrollText from "~icons/lucide/scroll-text";
 import IconServer from "~icons/lucide/server";
+import IconShell from "~icons/lucide/shell";
 import IconSkull from "~icons/lucide/skull";
+import IconSun from "~icons/lucide/sun";
+import IconTreePalm from "~icons/lucide/tree-palm";
 import IconTrees from "~icons/lucide/trees";
+import IconUmbrella from "~icons/lucide/umbrella";
+import IconWaves from "~icons/lucide/waves";
 import IconZap from "~icons/lucide/zap";
 
-export type ThemeName = "dark" | "light" | "developer" | "skeleton" | "forest" | "orange-peel" | "dragonfruit";
+// prettier-ignore
+export type ThemeName =
+  | "dark"
+  | "light"
+  | "skeleton"
+  | "forest"
+  | "orange-peel"
+  | "dragonfruit"
+  | "banana"
+  | "lava"
+  | "beach"
+  | "xray";
 
-export const themes: ThemeName[] = ["dark", "light", "developer", "skeleton", "forest", "orange-peel", "dragonfruit"];
+export const themes: ThemeName[] = [
+  "dark",
+  "light",
+  "skeleton",
+  "forest",
+  "orange-peel",
+  "dragonfruit",
+  "banana",
+  "lava",
+  "beach",
+  "xray",
+];
 
 function readSavedTheme(): ThemeName {
   const requested = new URLSearchParams(window.location.search).get("theme");
@@ -40,13 +68,11 @@ const theme = ref<ThemeName>(readSavedTheme());
 watch(theme, (val) => {
   document.documentElement.dataset.theme = val;
   document.body.classList.toggle("light", val === "light");
-  document.body.classList.toggle("developer", val === "developer");
   localStorage.setItem("metalsharp-theme", val);
 });
 
 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";
 
@@ -59,13 +85,6 @@ const defaultNavIcons: Record<NavIconKey, Component> = {
 };
 
 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,
@@ -94,6 +113,34 @@ const themeNavIcons: Partial<Record<ThemeName, Partial<Record<NavIconKey, Compon
     refresh: IconRotateCw,
     steam: IconGrape,
   },
+  banana: {
+    library: IconBanana,
+    sharp: IconSun,
+    logs: IconScroll,
+    refresh: IconRotateCw,
+    steam: IconZap,
+  },
+  lava: {
+    library: IconFlameKindling,
+    sharp: IconFlame,
+    logs: IconScrollText,
+    refresh: IconRotateCw,
+    steam: IconZap,
+  },
+  beach: {
+    library: IconTreePalm,
+    sharp: IconUmbrella,
+    logs: IconWaves,
+    refresh: IconRotateCw,
+    steam: IconShell,
+  },
+  xray: {
+    library: IconScanLine,
+    sharp: IconRadar,
+    logs: IconBraces,
+    refresh: IconRotateCw,
+    steam: IconCrosshair,
+  },
 };
 
 export function themedNavIcon(key: NavIconKey): Component {
diff --git a/app/src/renderer/styles/base.css b/app/src/renderer/styles/base.css
index e0fe862a..326c8db1 100644
--- a/app/src/renderer/styles/base.css
+++ b/app/src/renderer/styles/base.css
@@ -110,9 +110,6 @@ textarea {
   color: #2f7540;
   background-color: rgba(67, 143, 85, 0.16);
 }
-: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);
 }
@@ -142,16 +139,22 @@ textarea {
 :root[data-theme="dragonfruit"] .glass-header {
   background-color: rgba(26, 14, 24, 0.32);
 }
+:root[data-theme="banana"] .glass-header {
+  background-color: rgba(74, 61, 22, 0.32);
+}
+:root[data-theme="lava"] .glass-header {
+  background-color: rgba(26, 6, 6, 0.32);
+}
+:root[data-theme="beach"] .glass-header {
+  background-color: rgba(138, 116, 78, 0.32);
+}
+:root[data-theme="xray"] .glass-header {
+  background-color: rgba(4, 8, 6, 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.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%),
@@ -199,6 +202,44 @@ textarea {
     auto,
     512px 512px;
 }
+:root[data-theme="banana"] .view-body-surface {
+  background:
+    radial-gradient(circle at 24% 16%, rgba(242, 197, 49, 0.1), transparent 34%),
+    radial-gradient(circle at 84% 10%, rgba(255, 217, 77, 0.08), transparent 30%),
+    linear-gradient(rgba(74, 61, 22, 0.62), rgba(74, 61, 22, 0.62)), url("../assets/banana-slices.png"), var(--bg-deep);
+  background-size:
+    auto,
+    auto,
+    auto,
+    512px 512px;
+}
+:root[data-theme="lava"] .view-body-surface {
+  background:
+    radial-gradient(circle at 50% 110%, rgba(255, 74, 61, 0.14), transparent 52%),
+    radial-gradient(circle at 24% 16%, rgba(255, 74, 61, 0.06), transparent 34%),
+    linear-gradient(rgba(26, 6, 6, 0.38), rgba(26, 6, 6, 0.38)), url("../assets/lava-cracks.png"), var(--bg-deep);
+  background-size:
+    auto,
+    auto,
+    auto,
+    512px 512px;
+}
+:root[data-theme="beach"] .view-body-surface {
+  background:
+    radial-gradient(ellipse at 50% 115%, rgba(56, 189, 248, 0.28), transparent 55%),
+    radial-gradient(circle at 24% 16%, rgba(255, 253, 246, 0.06), transparent 34%),
+    linear-gradient(rgba(138, 116, 78, 0.42), rgba(138, 116, 78, 0.42)), url("../assets/beach-sand.png"), var(--bg-deep);
+  background-size: auto, auto, auto, cover;
+  background-position: center, center, center, center;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+}
+:root[data-theme="xray"] .view-body-surface {
+  background:
+    repeating-linear-gradient(0deg, transparent 0 20px, rgba(61, 255, 122, 0.05) 22px, transparent 24px 44px),
+    repeating-linear-gradient(90deg, transparent 0 20px, rgba(61, 255, 122, 0.05) 22px, transparent 24px 44px),
+    radial-gradient(circle at 24% 16%, rgba(61, 255, 122, 0.07), transparent 34%),
+    radial-gradient(circle at 84% 88%, rgba(255, 122, 26, 0.06), transparent 30%), var(--bg-deep);
+}
 
 .hidden {
   display: none !important;
@@ -303,70 +344,97 @@ textarea {
   background: var(--play-color-hover);
 }
 
-:root[data-theme="developer"] .btn {
-  border-color: color-mix(in srgb, var(--accent-hover) 34%, transparent);
-  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));
-  color: var(--text-primary);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-    0 10px 24px rgba(0, 0, 0, 0.18);
+/* Banana: saturated yellow buttons with dark text. */
+:root[data-theme="banana"] .btn-primary,
+:root[data-theme="banana"] .btn-play,
+:root[data-theme="banana"] .btn-install {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%), #f2c531;
+  border-color: #d9ae1f;
+  color: #3d3108;
+  text-shadow: none;
+  box-shadow: 0 0 18px rgba(242, 197, 49, 0.22);
 }
-:root[data-theme="developer"] .btn:hover {
-  border-color: var(--accent);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 54%),
-    linear-gradient(90deg, rgba(185, 255, 77, 0.18), rgba(0, 245, 255, 0.13), rgba(255, 46, 247, 0.13));
+:root[data-theme="banana"] .btn-primary:hover,
+:root[data-theme="banana"] .btn-play:hover,
+:root[data-theme="banana"] .btn-install:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%), #ffd94d;
+  border-color: #ffd94d;
+}
+
+/* Lava: dark smoldering buttons with white text and ember hover. */
+:root[data-theme="lava"] .btn {
+  background: linear-gradient(180deg, rgba(255, 90, 61, 0.08), transparent 56%), #0a0303;
+  border-color: rgba(255, 110, 90, 0.28);
+  color: #fff2ee;
   box-shadow:
-    inset 0 0 0 1px rgba(185, 255, 77, 0.16),
-    0 0 22px rgba(185, 255, 77, 0.14),
-    0 12px 26px rgba(0, 0, 0, 0.24);
-}
-:root[data-theme="developer"] .btn-primary,
-:root[data-theme="developer"] .btn-play,
-:root[data-theme="developer"] .btn-install {
-  border-color: rgba(185, 255, 77, 0.72);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%), linear-gradient(90deg, #b9ff4d, #00f5ff);
-  color: #09070f;
-  text-shadow: none;
+    inset 0 0 0 1px rgba(255, 110, 90, 0.06),
+    0 8px 20px rgba(0, 0, 0, 0.32);
+}
+:root[data-theme="lava"] .btn:hover {
+  border-color: rgba(255, 74, 61, 0.6);
   box-shadow:
-    0 0 0 1px rgba(185, 255, 77, 0.2),
-    0 0 28px rgba(0, 245, 255, 0.18);
+    inset 0 0 0 1px rgba(255, 74, 61, 0.18),
+    0 0 18px rgba(255, 74, 61, 0.2),
+    0 10px 22px rgba(0, 0, 0, 0.36);
+}
+:root[data-theme="lava"] .btn-primary,
+:root[data-theme="lava"] .btn-play,
+:root[data-theme="lava"] .btn-install {
+  background: linear-gradient(180deg, rgba(255, 90, 61, 0.14), transparent 56%), #0a0303;
+  border-color: rgba(255, 74, 61, 0.52);
+  color: #ffffff;
+  text-shadow: 0 0 8px rgba(255, 74, 61, 0.4);
 }
-:root[data-theme="developer"] .btn-primary:hover,
-:root[data-theme="developer"] .btn-play:hover,
-:root[data-theme="developer"] .btn-install:hover {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%),
-    linear-gradient(90deg, #d7ff84, #00f5ff, #ff2ef7);
+:root[data-theme="lava"] .btn-primary:hover,
+:root[data-theme="lava"] .btn-play:hover,
+:root[data-theme="lava"] .btn-install:hover {
+  background: linear-gradient(180deg, rgba(255, 90, 61, 0.2), transparent 56%), #1c0705;
+  border-color: #ff4a3d;
 }
-:root[data-theme="developer"] .btn-secondary {
-  border-color: rgba(0, 245, 255, 0.3);
-  background: linear-gradient(180deg, rgba(0, 245, 255, 0.12), transparent 60%), rgba(13, 11, 23, 0.82);
-  color: var(--text-secondary);
+
+/* Beach: sandy buttons with white text and a clean blue hover glow. */
+:root[data-theme="beach"] .btn-play,
+:root[data-theme="beach"] .btn-install,
+:root[data-theme="beach"] .btn-primary {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 54%), #d9b97c;
+  border-color: #c4a35f;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(124, 104, 69, 0.5);
 }
-:root[data-theme="developer"] .btn-danger,
-:root[data-theme="developer"] .btn-stop {
-  border-color: rgba(255, 79, 119, 0.62);
-  background: linear-gradient(90deg, rgba(255, 79, 119, 0.16), rgba(255, 46, 247, 0.12));
-  color: #ffd7df;
-}
-:root[data-theme="developer"] input,
-:root[data-theme="developer"] select,
-:root[data-theme="developer"] textarea {
-  border-color: rgba(0, 245, 255, 0.24);
-  border-radius: 14px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 50%), var(--bg-input);
-  color: var(--text-primary);
-  outline: none;
+:root[data-theme="beach"] .btn-play:hover,
+:root[data-theme="beach"] .btn-install:hover,
+:root[data-theme="beach"] .btn-primary:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 54%), #c4a35f;
+  border-color: #38bdf8;
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
 }
-:root[data-theme="developer"] input:focus,
-:root[data-theme="developer"] select:focus,
-:root[data-theme="developer"] textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(185, 255, 77, 0.12);
+
+/* Xray: wireframe buttons — black fill, phosphor-green border and text. */
+:root[data-theme="xray"] .btn {
+  background: rgba(4, 8, 6, 0.82);
+  border-color: rgba(61, 255, 122, 0.4);
+  color: #d8ffe4;
+  box-shadow: inset 0 0 0 1px rgba(61, 255, 122, 0.08);
+}
+:root[data-theme="xray"] .btn:hover {
+  border-color: #3dff7a;
+  box-shadow:
+    inset 0 0 0 1px rgba(61, 255, 122, 0.2),
+    0 0 16px rgba(61, 255, 122, 0.22);
+}
+:root[data-theme="xray"] .btn-primary,
+:root[data-theme="xray"] .btn-play,
+:root[data-theme="xray"] .btn-install {
+  background: linear-gradient(180deg, rgba(61, 255, 122, 0.12), transparent 58%), #0a120c;
+  border-color: #3dff7a;
+  color: #3dff7a;
+  text-shadow: 0 0 8px rgba(61, 255, 122, 0.45);
+}
+:root[data-theme="xray"] .btn-primary:hover,
+:root[data-theme="xray"] .btn-play:hover,
+:root[data-theme="xray"] .btn-install:hover {
+  background: linear-gradient(180deg, rgba(61, 255, 122, 0.2), transparent 58%), #142116;
+  color: #8affb0;
 }
 .btn-sm {
   padding: 4px 10px;
@@ -401,11 +469,6 @@ textarea {
   background: var(--error-bg);
   color: var(--error);
 }
-:root[data-theme="developer"] .badge {
-  border-radius: 999px;
-  border: 1px solid currentColor;
-  background: rgba(9, 7, 15, 0.68);
-}
 
 .spinner {
   display: inline-block;
@@ -445,6 +508,23 @@ textarea {
   color: var(--text-dim);
 }
 
+/* Lava: search/inputs stay truly black with an ember focus ring. */
+:root[data-theme="lava"] input,
+:root[data-theme="lava"] select,
+:root[data-theme="lava"] textarea,
+:root[data-theme="lava"] .control-input {
+  background: #0a0303;
+  border-color: rgba(255, 110, 90, 0.24);
+  color: #fff2ee;
+}
+:root[data-theme="lava"] input:focus,
+:root[data-theme="lava"] select:focus,
+:root[data-theme="lava"] textarea:focus,
+:root[data-theme="lava"] .control-input:focus {
+  border-color: #ff4a3d;
+  box-shadow: 0 0 0 3px rgba(255, 74, 61, 0.14);
+}
+
 .toggle-label {
   display: inline-flex;
   align-items: center;
diff --git a/app/src/renderer/styles/variables.css b/app/src/renderer/styles/variables.css
index 0aee72b5..25c8588d 100644
--- a/app/src/renderer/styles/variables.css
+++ b/app/src/renderer/styles/variables.css
@@ -89,51 +89,6 @@
   --page-header-bg: linear-gradient(90deg, #f0f4f8 0%, #d0e2f2 30%, #b8d4ec 50%, #cce0f0 75%, #f0f4f8 100%);
 }
 
-:root[data-theme="developer"] {
-  --bg-deep: #09070f;
-  --bg-surface: #131022;
-  --bg-card: #171221;
-  --bg-card-hover: #21182f;
-  --game-card-bg: linear-gradient(145deg, rgba(20, 13, 31, 0.98), rgba(12, 23, 34, 0.96));
-  --game-card-body-bg: linear-gradient(180deg, rgba(23, 18, 33, 0.98), rgba(11, 10, 20, 0.98));
-  --game-card-text: #f8ffe7;
-  --game-card-dim: #98f2ff;
-  --bg-input: #0d0b17;
-  --accent: #b9ff4d;
-  --accent-hover: #00f5ff;
-  --accent-dim: #ff2ef7;
-  --accent-glow: rgba(185, 255, 77, 0.22);
-  --card-glow: rgba(255, 46, 247, 0.18);
-  --card-installed-glow-color: #b9ff4d;
-  --success: #70ff8c;
-  --success-bg: rgba(112, 255, 140, 0.12);
-  --play-color: #b9ff4d;
-  --play-color-hover: #d7ff84;
-  --error: #ff4f77;
-  --error-bg: rgba(255, 79, 119, 0.13);
-  --warn: #ffd84d;
-  --warn-bg: rgba(255, 216, 77, 0.14);
-  --text-primary: #f8ffe7;
-  --text-secondary: #8fd0dc;
-  --text-dim: #c2b1dc;
-  --text-bright: #ffffff;
-  --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.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;
-  --sidebar-logo-color: #b9ff4d;
-  --sidebar-logo-accent: #ff2ef7;
-  --page-header-bg:
-    radial-gradient(circle at 12% 12%, rgba(255, 46, 247, 0.2), transparent 32%),
-    radial-gradient(circle at 88% 18%, rgba(0, 245, 255, 0.18), transparent 30%),
-    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;
@@ -300,3 +255,180 @@
     radial-gradient(circle at 86% 18%, rgba(197, 163, 222, 0.15), transparent 32%),
     linear-gradient(100deg, #241126 0%, #371432 36%, #4a173a 66%, #2a112e 100%);
 }
+
+:root[data-theme="banana"] {
+  --bg-deep: #4a3d16;
+  --bg-surface: #5a4b1c;
+  --bg-card: #6b591f;
+  --bg-card-hover: #7a6625;
+  --game-card-bg: #6b591f;
+  --game-card-body-bg: #5f4f1b;
+  --game-card-text: #fffdf4;
+  --game-card-dim: #e8d98f;
+  --bg-input: #403510;
+  --accent: #f2c531;
+  --accent-hover: #ffd94d;
+  --accent-dim: #c39b1e;
+  --accent-glow: rgba(242, 197, 49, 0.24);
+  --card-glow: rgba(60, 48, 10, 0.28);
+  --card-installed-glow-color: #ffd94d;
+  --success: #8fd06a;
+  --success-bg: rgba(143, 208, 106, 0.16);
+  --play-color: #f2c531;
+  --play-color-hover: #d9ae1f;
+  --error: #e0705a;
+  --error-bg: rgba(224, 112, 90, 0.16);
+  --warn: #ffd84d;
+  --warn-bg: rgba(255, 216, 77, 0.16);
+  --text-primary: #fffdf4;
+  --text-secondary: #f0e4b0;
+  --text-dim: #c4b070;
+  --text-bright: #ffffff;
+  --border: rgba(242, 197, 49, 0.16);
+  --border-strong: rgba(242, 197, 49, 0.28);
+  --sidebar-bg: rgba(74, 61, 22, 0.58);
+  --sidebar-hover: rgba(242, 197, 49, 0.14);
+  --sidebar-active: rgba(242, 197, 49, 0.2);
+  --sidebar-text: #fffdf4;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ffd94d;
+  --sidebar-logo-color: #fffdf4;
+  --sidebar-logo-accent: #f2c531;
+  --page-header-bg:
+    radial-gradient(circle at 16% 14%, rgba(242, 197, 49, 0.18), transparent 34%),
+    radial-gradient(circle at 84% 18%, rgba(255, 217, 77, 0.14), transparent 30%),
+    linear-gradient(100deg, #4a3d16 0%, #5f4f1b 36%, #6b591f 66%, #54451a 100%);
+}
+
+:root[data-theme="lava"] {
+  --bg-deep: #1a0606;
+  --bg-surface: #260a0a;
+  --bg-card: #331016;
+  --bg-card-hover: #401318;
+  --game-card-bg: #331016;
+  --game-card-body-bg: #2b0d12;
+  --game-card-text: #fff2ee;
+  --game-card-dim: #d8998a;
+  --bg-input: #0a0303;
+  --accent: #ff4a3d;
+  --accent-hover: #ff6b52;
+  --accent-dim: #b82e24;
+  --accent-glow: rgba(255, 74, 61, 0.22);
+  --card-glow: rgba(255, 60, 40, 0.14);
+  --card-installed-glow-color: #ff5a3d;
+  --success: #7cbf6a;
+  --success-bg: rgba(124, 191, 106, 0.14);
+  --play-color: #2a0a08;
+  --play-color-hover: #3d100c;
+  --error: #ff5c5c;
+  --error-bg: rgba(255, 92, 92, 0.14);
+  --warn: #ffb84d;
+  --warn-bg: rgba(255, 184, 77, 0.14);
+  --text-primary: #fff2ee;
+  --text-secondary: #d8a294;
+  --text-dim: #96665c;
+  --text-bright: #ffffff;
+  --border: rgba(255, 110, 90, 0.14);
+  --border-strong: rgba(255, 110, 90, 0.24);
+  --sidebar-bg: rgba(26, 6, 6, 0.58);
+  --sidebar-hover: rgba(255, 74, 61, 0.12);
+  --sidebar-active: rgba(255, 74, 61, 0.18);
+  --sidebar-text: #fff2ee;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ff6b52;
+  --sidebar-logo-color: #fff2ee;
+  --sidebar-logo-accent: #ff4a3d;
+  --page-header-bg:
+    radial-gradient(circle at 18% 16%, rgba(255, 74, 61, 0.22), transparent 36%),
+    radial-gradient(circle at 82% 12%, rgba(255, 140, 60, 0.16), transparent 30%),
+    linear-gradient(100deg, #1a0606 0%, #330d0a 36%, #4a120c 66%, #260907 100%);
+}
+
+:root[data-theme="beach"] {
+  --bg-deep: #8a744e;
+  --bg-surface: #9c845c;
+  --bg-card: #b89d6a;
+  --bg-card-hover: #c6ac7a;
+  --game-card-bg: #b89d6a;
+  --game-card-body-bg: #ac905f;
+  --game-card-text: #fffdf6;
+  --game-card-dim: #f2e6c8;
+  --bg-input: #7c6845;
+  --accent: #2fa8e0;
+  --accent-hover: #5cc2ee;
+  --accent-dim: #1f7fae;
+  --accent-glow: rgba(56, 189, 248, 0.24);
+  --card-glow: rgba(56, 189, 248, 0.16);
+  --card-installed-glow-color: #38bdf8;
+  --success: #4d9e62;
+  --success-bg: rgba(77, 158, 98, 0.16);
+  --play-color: #d9b97c;
+  --play-color-hover: #c4a35f;
+  --error: #d65a4a;
+  --error-bg: rgba(214, 90, 74, 0.16);
+  --warn: #b8860b;
+  --warn-bg: rgba(184, 134, 11, 0.16);
+  --text-primary: #fffdf6;
+  --text-secondary: #f4ead0;
+  --text-dim: #d8c9a4;
+  --text-bright: #ffffff;
+  --border: rgba(255, 253, 246, 0.2);
+  --border-strong: rgba(255, 253, 246, 0.32);
+  --sidebar-bg: rgba(138, 116, 78, 0.58);
+  --sidebar-hover: rgba(255, 253, 246, 0.16);
+  --sidebar-active: rgba(56, 189, 248, 0.22);
+  --sidebar-text: #fffdf6;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #ffffff;
+  --sidebar-logo-color: #fffdf6;
+  --sidebar-logo-accent: #38bdf8;
+  --page-header-bg:
+    radial-gradient(circle at 20% 18%, rgba(56, 189, 248, 0.22), transparent 36%),
+    radial-gradient(circle at 84% 12%, rgba(255, 253, 246, 0.14), transparent 30%),
+    linear-gradient(100deg, #8a744e 0%, #a8906040 36%, #b89d6a 66%, #9c845c 100%);
+}
+
+:root[data-theme="xray"] {
+  --bg-deep: #040806;
+  --bg-surface: #0a120c;
+  --bg-card: #0e1810;
+  --bg-card-hover: #142116;
+  --game-card-bg: #0e1810;
+  --game-card-body-bg: #0a140c;
+  --game-card-text: #d8ffe4;
+  --game-card-dim: #6fae84;
+  --bg-input: #060d08;
+  --accent: #3dff7a;
+  --accent-hover: #8affb0;
+  --accent-dim: #1fae52;
+  --accent-glow: rgba(61, 255, 122, 0.18);
+  --card-glow: rgba(61, 255, 122, 0.12);
+  --card-installed-glow-color: #3dff7a;
+  --success: #3dff7a;
+  --success-bg: rgba(61, 255, 122, 0.12);
+  --play-color: #0a120c;
+  --play-color-hover: #142116;
+  --error: #ff5c4a;
+  --error-bg: rgba(255, 92, 74, 0.13);
+  --warn: #ff7a1a;
+  --warn-bg: rgba(255, 122, 26, 0.14);
+  --text-primary: #d8ffe4;
+  --text-secondary: #8fdca8;
+  --text-dim: #4f8a64;
+  --text-bright: #ffffff;
+  --border: rgba(61, 255, 122, 0.14);
+  --border-strong: rgba(61, 255, 122, 0.28);
+  --sidebar-bg: rgba(4, 8, 6, 0.58);
+  --sidebar-hover: rgba(61, 255, 122, 0.1);
+  --sidebar-active: rgba(61, 255, 122, 0.16);
+  --sidebar-text: #d8ffe4;
+  --sidebar-text-active: var(--sidebar-text);
+  --sidebar-text-hover: #8affb0;
+  --sidebar-logo-color: #3dff7a;
+  --sidebar-logo-accent: #ff7a1a;
+  --page-header-bg:
+    radial-gradient(circle at 14% 14%, rgba(61, 255, 122, 0.16), transparent 34%),
+    radial-gradient(circle at 86% 18%, rgba(255, 122, 26, 0.14), transparent 30%),
+    linear-gradient(100deg, #040806 0%, #0a1a0e 36%, #0d2412 66%, #120a04 100%);
+  --transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
diff --git a/app/src/renderer/views/LibraryView.vue b/app/src/renderer/views/LibraryView.vue
index a9336899..00b439db 100644
--- a/app/src/renderer/views/LibraryView.vue
+++ b/app/src/renderer/views/LibraryView.vue
@@ -429,10 +429,6 @@ watch([library, search, filter], () => {
   flex-direction: column;
   background: transparent;
 }
-:global(:root[data-theme="developer"] .library-view) {
-  background: transparent;
-}
-
 .library-header {
   flex-shrink: 0;
   margin: 0 -28px;
@@ -448,12 +444,6 @@ watch([library, search, filter], () => {
   margin: 0 -28px;
   padding: 20px 28px 32px;
 }
-:global(:root[data-theme="developer"] .library-header) {
-  border-bottom-color: rgba(185, 255, 77, 0.28);
-  box-shadow:
-    inset 0 -1px 0 rgba(0, 245, 255, 0.22),
-    0 20px 56px rgba(0, 0, 0, 0.22);
-}
 .library-header::after {
   content: "";
   position: absolute;
@@ -463,15 +453,6 @@ watch([library, search, filter], () => {
     radial-gradient(ellipse 40% 60% at 80% 50%, rgba(95, 183, 232, 0.05) 0%, transparent 60%);
   pointer-events: none;
 }
-:global(:root[data-theme="developer"] .library-header::after) {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 46, 247, 0.1),
-    transparent 34%,
-    rgba(0, 245, 255, 0.09) 78%,
-    transparent
-  );
-}
 .library-title-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, auto);
@@ -489,11 +470,6 @@ watch([library, search, filter], () => {
   font-weight: 750;
   line-height: 1.1;
 }
-:global(:root[data-theme="developer"] .library-header h1) {
-  color: var(--accent);
-  font-family: var(--font-mono);
-  font-weight: 800;
-}
 .library-counts {
   margin-top: 6px;
   color: var(--text-dim);