diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 0fc2bc4d..328de643 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -22,6 +22,10 @@
 				"width": 800,
 				"visible": false,
 				"height": 600,
+				"transparent": true,
+				"windowEffects": {
+					"effects": ["sidebar", "micaDark"]
+				},
 				"decorations": true,
 				"center": true
 			},
diff --git a/apps/desktop/src/app.css b/apps/desktop/src/app.css
index 704625e7..99d2bd9e 100644
--- a/apps/desktop/src/app.css
+++ b/apps/desktop/src/app.css
@@ -36,21 +36,21 @@
 	}
 
 	.dark {
-		--background: 0 0% 3.9%;
+		--background: 0 0% 15%;
 		--foreground: 0 0% 98%;
 		--muted: 0 0% 14.9%;
 		--muted-foreground: 0 0% 63.9%;
-		--popover: 0 0% 3.9%;
+		--popover: 0 0% 12%;
 		--popover-foreground: 0 0% 98%;
-		--card: 0 0% 3.9%;
+		--card: 0 0% 10%;
 		--card-foreground: 0 0% 98%;
 		--border: 0 0% 14.9%;
-		--input: 0 0% 14.9%;
+		--input: 0 0% 30%;
 		--primary: 0 0% 98%;
 		--primary-foreground: 0 0% 9%;
 		--secondary: 0 0% 14.9%;
 		--secondary-foreground: 0 0% 98%;
-		--accent: 0 0% 14.9%;
+		--accent: 0 0% 24.9%;
 		--accent-foreground: 0 0% 98%;
 		--destructive: 0 62.8% 30.6%;
 		--destructive-foreground: 0 0% 98%;
@@ -79,3 +79,7 @@
 html {
 	overscroll-behavior: none;
 }
+
+body {
+	background-color: transparent;
+}
diff --git a/apps/desktop/src/lib/components/standalone/general-settings.svelte b/apps/desktop/src/lib/components/standalone/general-settings.svelte
index 52ebc46b..c08c62f8 100644
--- a/apps/desktop/src/lib/components/standalone/general-settings.svelte
+++ b/apps/desktop/src/lib/components/standalone/general-settings.svelte
@@ -29,7 +29,7 @@
 	const triggerContent = $derived(languages.find((f) => f.value === language)?.label ?? "Language")
 </script>
 
-<ul class="rounded-lg border">
+<ul class="border-accent rounded-lg border">
 	<li>
 		<span>{m.settings_general_launch_at_login()}</span>
 		<Switch
@@ -105,7 +105,7 @@
 
 <style scoped>
 	li {
-		@apply flex items-center justify-between border-b px-3 py-3;
+		@apply border-accent flex items-center justify-between border-b px-3 py-3;
 	}
 	ul li:last-child {
 		@apply border-b-0;
diff --git a/apps/desktop/src/lib/stores/appConfig.ts b/apps/desktop/src/lib/stores/appConfig.ts
index eccaad03..e485238c 100644
--- a/apps/desktop/src/lib/stores/appConfig.ts
+++ b/apps/desktop/src/lib/stores/appConfig.ts
@@ -73,7 +73,12 @@ function createAppConfig(): WithSyncStore<AppConfig & { language: string }> & Ap
 		store.subscribe(async (config) => {
 			console.log("Saving app config", config)
 			await persistStore.set("config", config)
-			updateTheme(config.theme)
+			updateTheme({
+				theme: "neutral",
+				radius: 0.5,
+				lightMode: "dark"
+			})
+			// updateTheme(config.theme)
 		})
 	}
 
diff --git a/apps/desktop/src/routes/app/+page.svelte b/apps/desktop/src/routes/app/+page.svelte
index 93da6363..f0853c5c 100644
--- a/apps/desktop/src/routes/app/+page.svelte
+++ b/apps/desktop/src/routes/app/+page.svelte
@@ -41,6 +41,7 @@
 	import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte"
 	import { onMount } from "svelte"
 
+	const _platform = platform()
 	const win = getCurrentWindow()
 	let inputEle: HTMLInputElement | null = $state(null)
 	function onKeyDown(event: KeyboardEvent) {
@@ -95,7 +96,10 @@
 	}}
 />
 <Command.Root
-	class={cn("h-screen rounded-lg shadow-md")}
+	class={cn("h-screen rounded-lg border-none shadow-md", {
+		"bg-transparent": _platform === "macos",
+		"bg-background/50": _platform === "windows"
+	})}
 	bind:value={$appState.highlightedCmd}
 	shouldFilter={true}
 	loop
@@ -137,7 +141,7 @@
 
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger>
-					<Button variant="outline" size="icon"><EllipsisVerticalIcon /></Button>
+					<Button variant="outline" size="icon" class=""><EllipsisVerticalIcon /></Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="w-fit min-w-80">
 					<DropdownMenu.Group>
@@ -173,7 +177,7 @@
 							<RefreshCcwIcon class="mr-2 h-4 w-4 text-green-500" />
 							{m.home_command_input_dropdown_open_preference()}
 							<DropdownMenu.Shortcut>
-								{#if platform() === "macos"}
+								{#if _platform === "macos"}
 									<span class="flex items-center">⌘+Comma</span>
 								{:else}
 									<span class="flex items-center">Ctrl+Comma</span>
diff --git a/apps/desktop/src/routes/app/extension/store/+page.svelte b/apps/desktop/src/routes/app/extension/store/+page.svelte
index ca08cf11..78b889b6 100644
--- a/apps/desktop/src/routes/app/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/store/+page.svelte
@@ -14,6 +14,7 @@
 	import { Constants } from "@kksh/ui"
 	import { ExtListItem } from "@kksh/ui/extension"
 	import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
+	import { cn } from "@kksh/ui/utils"
 	import { platform } from "@tauri-apps/plugin-os"
 	import { goto } from "$app/navigation"
 	import { ArrowLeft } from "lucide-svelte"
@@ -21,6 +22,7 @@
 	import { toast } from "svelte-sonner"
 	import { getInstallExtras } from "./[identifier]/helper.js"
 
+	const _platform = platform()
 	let { data } = $props()
 	const { storeExtList, installedExtsMap, upgradableExpsMap } = data
 	const _platform = platform()
@@ -132,13 +134,22 @@
 		variant="outline"
 		size="icon"
 		onclick={goHome}
-		class={Constants.CLASSNAMES.BACK_BUTTON}
+		class={cn(Constants.CLASSNAMES.BACK_BUTTON, {
+			"bg-background/50": _platform === "windows",
+			"bg-transparent": _platform === "macos"
+		})}
 		data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
 	>
 		<ArrowLeft class="size-4" />
 	</Button>
 {/snippet}
-<Command.Root class="h-screen rounded-lg border shadow-md" loop bind:value={highlightedCmdValue}>
+<Command.Root
+	class={cn("h-screen rounded-lg shadow-md", {
+		"bg-transparent": _platform === "macos",
+		"bg-background/50": _platform === "windows"
+	})}
+	loop
+>
 	<CustomCommandInput
 		bind:ref={listviewInputRef}
 		autofocus
diff --git a/packages/extension/src/window.ts b/packages/extension/src/window.ts
index 26790f0a..4c202553 100644
--- a/packages/extension/src/window.ts
+++ b/packages/extension/src/window.ts
@@ -1,8 +1,12 @@
 import type { WindowConfig } from "@kksh/api/models"
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
+import { Effect } from "@tauri-apps/api/window"
 
 export function launchNewExtWindow(windowLabel: string, url: string, windowConfig?: WindowConfig) {
 	return new WebviewWindow(windowLabel, {
+		windowEffects: {
+			effects: [Effect.Sidebar]
+		},
 		center: windowConfig?.center ?? undefined,
 		x: windowConfig?.x ?? undefined,
 		y: windowConfig?.y ?? undefined,
diff --git a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
index 8fd00c76..3b122c0f 100644
--- a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
+++ b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
@@ -21,7 +21,7 @@
 	const workflowRunUrl = `https://github.com/${repoOwner}/${repoName}/actions/runs/${workflowRunId}/workflow`
 </script>
 
-<Card.Root>
+<Card.Root class="bg-background/30">
 	<Card.Content class="flex flex-col items-center justify-between space-x-4 md:flex-row">
 		<div class="flex w-60 items-center space-x-4">
 			<BadgeCheckIcon class="h-8 w-8 text-green-500" />
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index a59edbbf..bae6f75e 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -311,7 +311,7 @@
 	<Separator class="my-3" />
 	<h2 class="text-lg font-bold">README</h2>
 	{#if extPublish?.readme}
-		<Markdown markdown={extPublish.readme} class="bg-secondary max-w-full rounded-md p-4" />
+		<Markdown markdown={extPublish.readme} class="bg-background/50 max-w-full rounded-md p-4" />
 	{/if}
 </ScrollArea>
 
diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte
index 29c09a79..bdc4eedd 100644
--- a/packages/ui/src/components/extension/templates/Markdown.svelte
+++ b/packages/ui/src/components/extension/templates/Markdown.svelte
@@ -5,6 +5,6 @@
 	const { markdown, class: className }: { markdown: string; class?: string } = $props()
 </script>
 
-<div class={cn("prose dark:prose-invert", className)}>
+<div class={cn("prose dark:prose-invert bg-transparent", className)}>
 	<SvelteMarkdown source={markdown} />
 </div>