diff --git a/docs/app/app.vue b/docs/app/app.vue
index 1e0e57ee..7e326eae 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -11,7 +11,6 @@ const { integrity, api } = runtimeConfig.public.content
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
 const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
 
-const open = ref(false)
 const searchTerm = ref('')
 
 // watch(searchTerm, debounce((query: string) => {
@@ -55,7 +54,6 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-provide('open', open)
 provide('navigation', navigation)
 provide('files', files)
 </script>
@@ -74,6 +72,6 @@ provide('files', files)
 
     <Footer v-if="!route.path.startsWith('/examples')" />
 
-    <LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
+    <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index d54c4820..ce3f37e5 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -9,7 +9,6 @@ const props = defineProps<{
 const route = useRoute()
 const config = useRuntimeConfig().public
 
-const open = inject<Ref<boolean>>('open')
 const navigation = inject<Ref<NavItem[]>>('navigation')
 
 const items = computed(() => props.links.map(({ icon, ...link }) => link))
@@ -36,7 +35,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
       <!-- <ColorPicker /> -->
 
       <UTooltip text="Search" :kbds="['meta', 'K']">
-        <UButton aria-label="Search" icon="i-heroicons-magnifying-glass-20-solid" color="gray" variant="ghost" @click="open = true" />
+        <UContentSearchButton />
       </UTooltip>
 
       <!-- <UColorModeButton /> -->