diff --git a/src/.vuepress/client.ts b/src/.vuepress/client.ts
index bdbe4acd..7464fa71 100644
--- a/src/.vuepress/client.ts
+++ b/src/.vuepress/client.ts
@@ -19,9 +19,13 @@
 import { defineDocSearchConfig } from '@vuepress/plugin-docsearch/client';
 import { computed } from 'vue';
 import { defineClientConfig, usePageData } from 'vuepress/client';
+import DocSearch from './components/DocSearch.vue';
 import { getDocVersion } from './utils/index.js';
 
 export default defineClientConfig({
+  enhance: ({ app }) => {
+    app.component('DocSearch', DocSearch);
+  },
   setup() {
     const pageData = usePageData();
 
diff --git a/src/.vuepress/components/DocSearch.vue b/src/.vuepress/components/DocSearch.vue
new file mode 100644
index 00000000..3ce085fc
--- /dev/null
+++ b/src/.vuepress/components/DocSearch.vue
@@ -0,0 +1,31 @@
+<!-- 
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+-->
+
+<script setup lang="ts">
+import { usePageData } from 'vuepress/client';
+import { getDocVersion } from '../utils/index.js';
+import { computed } from 'vue';
+
+const pageData = usePageData();
+
+const docVersion = computed(() => getDocVersion(pageData.value.path));
+</script>
+
+<template>
+  <SearchBox :key="docVersion" />
+</template>
diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts
index 780c6d12..6b209388 100644
--- a/src/.vuepress/theme.ts
+++ b/src/.vuepress/theme.ts
@@ -38,7 +38,7 @@ export default hopeTheme(
     navbarLayout: {
       start: ['Brand'],
       center: [],
-      end: ['Search', 'Links', 'Language', 'Outlook', 'Repo'],
+      end: ['DocSearch', 'Links', 'Language', 'Outlook', 'Repo'],
     },
 
     locales: {