diff --git a/frontend/package.json b/frontend/package.json
index 0c9e7d9fb..3ca8ce7c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -81,6 +81,7 @@
 		"@typescript-eslint/parser": "^8.18.0",
 		"@unovis/svelte": "1.4.3-beta.0",
 		"@unovis/ts": "1.4.3-beta.0",
+		"cmdk-sv": "^0.0.18",
 		"dotenv": "^16.4.7",
 		"echarts": "^5.5.1",
 		"eslint-plugin-storybook": "^0.10.2",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 556fe75fd..0b37da127 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@unovis/ts':
         specifier: 1.4.3-beta.0
         version: 1.4.3-beta.0
+      cmdk-sv:
+        specifier: ^0.0.18
+        version: 0.0.18(svelte@4.2.19)
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
@@ -749,6 +752,9 @@ packages:
   '@inlang/translatable@1.3.1':
     resolution: {integrity: sha512-VAtle21vRpIrB+axtHFrFB0d1HtDaaNj+lV77eZQTJyOWbTFYTVIQJ8WAbyw9eu4F6h6QC2FutLyxjMomxfpcQ==}
 
+  '@internationalized/date@3.6.0':
+    resolution: {integrity: sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -825,6 +831,11 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@melt-ui/svelte@0.76.2':
+    resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
+    peerDependencies:
+      svelte: '>=3 <5'
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1338,6 +1349,9 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/forms@0.5.9':
     resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
     peerDependencies:
@@ -1842,6 +1856,11 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  bits-ui@0.21.16:
+    resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.118
+
   bottleneck@2.19.5:
     resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==}
 
@@ -1944,6 +1963,11 @@ packages:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
 
+  cmdk-sv@0.0.18:
+    resolution: {integrity: sha512-istixiQSy9Ez/mQ4VXWB69btqNyDZckbd1XFEwR46Vw+n5zjdmvoWAcOTj0uX3FZXtw9ikwLVmfoW2nwwMClRg==}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.1
+
   code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
@@ -2579,6 +2603,9 @@ packages:
   flatted@3.3.2:
     resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
 
+  focus-trap@7.6.2:
+    resolution: {integrity: sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==}
+
   follow-redirects@1.15.9:
     resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
     engines: {node: '>=4.0'}
@@ -3158,6 +3185,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.9:
+    resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -3836,6 +3868,9 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   tailwindcss@3.4.16:
     resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
     engines: {node: '>=14.0.0'}
@@ -4763,6 +4798,10 @@ snapshots:
     dependencies:
       '@inlang/language-tag': 1.5.1
 
+  '@internationalized/date@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -4842,6 +4881,16 @@ snapshots:
       '@types/react': 18.3.12
       react: 18.3.1
 
+  '@melt-ui/svelte@0.76.2(svelte@4.2.19)':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/dom': 1.6.12
+      '@internationalized/date': 3.6.0
+      dequal: 2.0.3
+      focus-trap: 7.6.2
+      nanoid: 5.0.9
+      svelte: 4.2.19
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5462,6 +5511,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/forms@0.5.9(tailwindcss@3.4.16)':
     dependencies:
       mini-svg-data-uri: 1.4.4
@@ -6111,6 +6164,13 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
+  bits-ui@0.21.16(svelte@4.2.19):
+    dependencies:
+      '@internationalized/date': 3.6.0
+      '@melt-ui/svelte': 0.76.2(svelte@4.2.19)
+      nanoid: 5.0.9
+      svelte: 4.2.19
+
   bottleneck@2.19.5: {}
 
   brace-expansion@1.1.11:
@@ -6226,6 +6286,12 @@ snapshots:
 
   clean-stack@2.2.0: {}
 
+  cmdk-sv@0.0.18(svelte@4.2.19):
+    dependencies:
+      bits-ui: 0.21.16(svelte@4.2.19)
+      nanoid: 5.0.9
+      svelte: 4.2.19
+
   code-red@1.0.4:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -6961,6 +7027,10 @@ snapshots:
 
   flatted@3.3.2: {}
 
+  focus-trap@7.6.2:
+    dependencies:
+      tabbable: 6.2.0
+
   follow-redirects@1.15.9: {}
 
   for-each@0.3.3:
@@ -7519,6 +7589,8 @@ snapshots:
 
   nanoid@3.3.8: {}
 
+  nanoid@5.0.9: {}
+
   natural-compare@1.4.0: {}
 
   no-case@3.0.4:
@@ -8242,6 +8314,8 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tabbable@6.2.0: {}
+
   tailwindcss@3.4.16:
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte b/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte
index 4cc2bd606..47493f306 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/+layout.svelte
@@ -1,3 +1,8 @@
+<script>
+	import CommandPalette from './CommandPalette.svelte';
+</script>
+
+<CommandPalette />
 <div class="card bg-white shadow-lg">
 	<slot />
 </div>
diff --git a/frontend/src/routes/(app)/(internal)/experimental/CommandPalette.svelte b/frontend/src/routes/(app)/(internal)/experimental/CommandPalette.svelte
new file mode 100644
index 000000000..97fb9214b
--- /dev/null
+++ b/frontend/src/routes/(app)/(internal)/experimental/CommandPalette.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { Command } from 'cmdk-sv';
+	import { goto } from '$app/navigation';
+	import { onMount, onDestroy } from 'svelte';
+
+	let open = false;
+
+	// Custom case-insensitive filter
+	function caseInsensitiveFilter(value: string, search: string) {
+		// Normalize both value and search to lowercase for comparison
+		return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+	}
+
+	// Keyboard shortcut handler
+	function handleKeydown(e: KeyboardEvent) {
+		if (browser && (e.metaKey || e.ctrlKey) && e.key === 'k') {
+			e.preventDefault();
+			open = !open;
+		}
+	}
+
+	// Navigation commands
+	const navigationCommands = [
+		{
+			label: 'Home',
+			value: '/',
+			onSelect: () => goto('/')
+		},
+		{
+			label: 'About',
+			value: '/about',
+			onSelect: () => goto('/about')
+		},
+		{
+			label: 'Settings',
+			value: '/settings',
+			onSelect: () => goto('/settings')
+		}
+	];
+
+	// Add global event listener
+	onMount(() => {
+		if (browser) {
+			window.addEventListener('keydown', handleKeydown);
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener('keydown', handleKeydown);
+		}
+	});
+</script>
+
+<Command.Dialog bind:open label="Command Menu">
+	<Command.Root filter={caseInsensitiveFilter}>
+		<Command.Input placeholder="Type a command..." />
+		<Command.List>
+			<Command.Empty>No results found.</Command.Empty>
+
+			<Command.Group heading="Navigation">
+				{#each navigationCommands as command}
+					<Command.Item value={command.label} onSelect={command.onSelect}>
+						{command.label}
+					</Command.Item>
+				{/each}
+			</Command.Group>
+
+			<Command.Separator />
+		</Command.List>
+	</Command.Root>
+</Command.Dialog>
+
+<style lang="postcss">
+	/* Global styles for the command palette */
+	:global([data-cmdk-dialog]) {
+		@apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm;
+	}
+
+	:global([data-cmdk-root]) {
+		@apply w-full max-w-md bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden;
+	}
+
+	:global([data-cmdk-input]) {
+		@apply w-full px-4 py-3 border-b border-gray-200 outline-none;
+	}
+
+	:global([data-cmdk-list]) {
+		@apply max-h-[300px] overflow-y-auto;
+	}
+
+	:global([data-cmdk-item]) {
+		@apply px-4 py-2 cursor-pointer hover:bg-gray-100
+               focus:bg-gray-100 focus:outline-none;
+	}
+
+	:global([data-cmdk-item][data-selected='true']) {
+		@apply bg-gray-100;
+	}
+
+	:global([data-cmdk-group-heading]) {
+		@apply px-4 py-2 text-xs text-gray-500 uppercase;
+	}
+</style>