diff --git a/package.json b/package.json
index be8c4b7..0bcfb5d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@melt-ui/pp": "^0.3.2",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -38,6 +39,7 @@
 	"type": "module",
 	"dependencies": {
 		"@blah-im/core": "^0.2.1",
+		"@melt-ui/svelte": "^0.83.0",
 		"@zeabur/svelte-adapter": "^1.0.0",
 		"bits-ui": "^0.21.13",
 		"canonicalize": "^2.0.0",
diff --git a/src/lib/components/DropdownMenu/Content.svelte b/src/lib/components/DropdownMenu/Content.svelte
index d10b4c6..f1e3da2 100644
--- a/src/lib/components/DropdownMenu/Content.svelte
+++ b/src/lib/components/DropdownMenu/Content.svelte
@@ -11,7 +11,7 @@
 
 <DropdownMenu.Content
 	class={tw(
-		'bg-sb-overlay group min-w-32 origin-top rounded-lg border border-ss-secondary p-1 shadow-xl',
+		'group min-w-32 origin-top rounded-lg border border-ss-secondary bg-sb-overlay p-1 shadow-lg',
 		className
 	)}
 	sideOffset={4}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index c9473d9..ee87f2c 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -14,7 +14,10 @@
 		});
 	});
 
-	$: mainVisible = !!$page.params.chatId;
+	$: mainVisible =
+		!!$page.params.chatId ||
+		($page.route.id?.startsWith('/settings') &&
+			!$page.route.id?.startsWith('/settings/_mobile_empty'));
 </script>
 
 <div
diff --git a/src/routes/(app)/Settings.svelte b/src/routes/(app)/Settings.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/(app)/settings/_mobile-empty/+page.svelte b/src/routes/(app)/settings/_mobile-empty/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/svelte.config.js b/svelte.config.js
index c1d621a..16127e7 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,12 +1,13 @@
 import adapter from '@sveltejs/adapter-auto';
 import zAdapter from '@zeabur/svelte-adapter';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { preprocessMeltUI, sequence } from '@melt-ui/pp';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.