diff --git a/src/pages/Zone/Card/ZoneSearchbar.vue b/src/pages/Zone/Card/ZoneSearchbar.vue
index 66ce78f232..607057d0bf 100644
--- a/src/pages/Zone/Card/ZoneSearchbar.vue
+++ b/src/pages/Zone/Card/ZoneSearchbar.vue
@@ -1,17 +1,49 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
+import { useI18n } from 'vue-i18n';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
-const stateStore = useStateStore();
+const { t } = useI18n();
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'agencyModeFk':
+            return {
+                agencyModeFk: value,
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        name: {
+                            like: `%${value}%`,
+                        },
+                    };
+                }
+            }
+    }
+};
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
+    <VnSearchbar
+        data-key="ZoneList"
+        url="Zones"
+        :filter="{
+            include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+        }"
+        :expr-builder="exprBuilder"
+        :label="t('list.searchZone')"
+        :info="t('list.searchInfo')"
+        custom-route-redirect-name="ZoneSummary"
+    />
 </template>