diff --git a/devtools/app/app.vue b/devtools/app/app.vue
index 65560a05b6..a4d7010bec 100644
--- a/devtools/app/app.vue
+++ b/devtools/app/app.vue
@@ -70,8 +70,6 @@ function onSlotLeave(slot: string) {
   window.dispatchEvent(event)
 }
 
-const searchTerm = ref<string>()
-
 const tabs = computed(() => {
   if (!component.value) return
   const themeCount = component.value.meta.slots ? Object.keys(component.value.meta.slots)?.length : 0
@@ -81,6 +79,19 @@ const tabs = computed(() => {
     { label: 'Theme', slot: 'theme', icon: 'i-heroicons-paint-brush', disabled: !themeCount }
   ]
 })
+
+const searchOpened = ref(false)
+function onComponentSearch(value: any) {
+  const match = components.value.find(c => c.slug === value?.slug)
+  searchOpened.value = false
+
+  if (!match) return
+  component.value = match
+}
+
+defineShortcuts({
+  meta_k: () => searchOpened.value = true
+})
 </script>
 
 <template>
@@ -88,23 +99,28 @@ const tabs = computed(() => {
     <div v-if="!components || !component" class="h-screen w-screen" />
     <template v-else>
       <div
-        class="top-0 h-[49px] border-b border-gray-200 bg-white flex"
+        class="top-0 h-[49px] border-b border-gray-200 bg-white flex justify-center"
       >
-        <UCommandPalette
-          v-model="component"
-          v-model:search-term="searchTerm"
-          variant="none"
-          :groups="[{ id: 'component', items: components }]"
-          leading-icon="i-heroicons-magnifying-glass-20-solid"
-          class="grow"
-          placeholder="Search component..."
-          :fuse="{
-            fuseOptions: {
-              includeMatches: true
-            }
-          }"
-          :ui="{ content: 'max-h-96' }"
-        />
+        <span />
+
+        <UModal v-model:open="searchOpened" :ui="{ content: 'top-0 sm:top-8 translate-y-0 sm:max-w-xl w-full' }">
+          <UButton color="gray" label="Search component..." variant="link" icon="i-heroicons-magnifying-glass-20-solid" class="w-full cursor-pointer" />
+          <template #content>
+            <UCommandPalette
+              variant="none"
+              :groups="[{ id: 'component', items: components.map((c) => ({ slug: c.slug, label: c.label })) }]"
+              leading-icon=""
+              placeholder="Search component..."
+              :fuse="{
+                fuseOptions: {
+                  includeMatches: true
+                }
+              }"
+              @update:model-value="onComponentSearch"
+              @close="searchOpened = false"
+            />
+          </template>
+        </UModal>
       </div>
 
       <div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-6">
@@ -121,8 +137,8 @@ const tabs = computed(() => {
           <ComponentPreview :component="component" :props="state.props[component.slug]" :theme-slots="state.slots[component.slug]" class="h-full" />
         </div>
 
-        <div class="bg-white border-l border-gray-200 flex flex-col col-span-3 overflow-y-auto">
-          <UTabs color="gray" variant="link" :items="tabs" :class="{ content: 'overflow-y-auto' }">
+        <div class="bg-white border-l border-gray-200 flex flex-col col-span-3  overflow-y-auto">
+          <UTabs color="gray" variant="link" :items="tabs">
             <template #props>
               <div v-for="prop in component.meta?.props.filter((prop) => prop.name !== 'ui')" :key="'prop-' + prop.name" class="px-3 py-5 border-b border-gray-200">
                 <UFormField :name="prop.name" class="grid grid-cols-2 gap-8 items-baseline">
diff --git a/devtools/public/favicon.svg b/devtools/public/favicon.svg
new file mode 100644
index 0000000000..23d7a80e44
--- /dev/null
+++ b/devtools/public/favicon.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" class="w-auto h-6 shrink-0" viewBox="840 60 180 140"><path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="currentColor"></path></svg>
diff --git a/src/module.ts b/src/module.ts
index 058035d2c3..8a90ff12a3 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -211,7 +211,7 @@ export default defineNuxtModule<ModuleOptions>({
       addCustomTab({
         name: 'nuxt-ui',
         title: 'Nuxt UI',
-        icon: 'bx:paint',
+        icon: '/__nuxt_ui__/devtools/favicon.svg',
         view: {
           type: 'iframe',
           src: '/__nuxt_ui__/devtools'