diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 1ad852656..49da99a46 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { onBeforeMount, computed } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -19,12 +18,11 @@ const props = defineProps({
     filterPanel: { type: Object, default: undefined },
     searchDataKey: { type: String, default: undefined },
     searchUrl: { type: String, default: undefined },
-    searchbarLabel: { type: String, default: undefined },
-    searchbarInfo: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
     customRouteRedirectName: { type: String, default: undefined },
 });
 
-const { t } = useI18n();
 const stateStore = useStateStore();
 const route = useRoute();
 const url = computed(() => {
@@ -58,8 +56,8 @@ if (props.baseUrl) {
                 <VnSearchbar
                     :data-key="props.searchDataKey"
                     :url="props.searchUrl"
-                    :label="t(props.searchbarLabel)"
-                    :info="t(props.searchbarInfo)"
+                    :label="props.searchbarLabel"
+                    :info="props.searchbarInfo"
                     :custom-route-redirect-name="props.customRouteRedirectName"
                 />
             </slot>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ae8ac05dd..99c9d1cd7 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -4,8 +4,10 @@ import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import useRedirect from 'src/composables/useRedirect';
+import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
+const { t } = useI18n();
 
 const props = defineProps({
     dataKey: {
@@ -101,7 +103,7 @@ async function search() {
         <VnInput
             id="searchbar"
             v-model="searchText"
-            :placeholder="props.label"
+            :placeholder="t(props.label)"
             dense
             standout
             autofocus
@@ -120,7 +122,7 @@ async function search() {
                     name="info"
                     class="cursor-info"
                 >
-                    <QTooltip>{{ props.info }}</QTooltip>
+                    <QTooltip>{{ t(props.info) }}</QTooltip>
                 </QIcon>
             </template>
         </VnInput>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index c8c503056..adf0315da 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -1,14 +1,16 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
+import SupplierListFilter from '../SupplierListFilter.vue';
 </script>
 <template>
     <VnCard
         data-key="Supplier"
         base-url="Suppliers"
         :descriptor="SupplierDescriptor"
-        searchbar-data-key="SupplierList"
-        searchbar-url="Suppliers/filter"
+        :filter-panel="SupplierListFilter"
+        search-data-key="SupplierList"
+        search-url="Suppliers/filter"
         searchbar-label="Search suppliers"
     />
 </template>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index e0047bf9e..fb9ab9666 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,17 +1,16 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import WorkerDescriptor from './WorkerDescriptor.vue';
-
-const filter = { where: {} };
+import WorkerFilter from '../WorkerFilter.vue';
 </script>
 <template>
     <VnCard
         data-key="Worker"
-        custom-url="Workers/Summary"
+        base-url="Workers"
         :descriptor="WorkerDescriptor"
-        :filter="filter"
-        searchbar-data-key="WorkerList"
-        searchbar-url="Workers/filter"
+        :filter-panel="WorkerFilter"
+        search-data-key="WorkerList"
+        search-url="Workers/filter"
         searchbar-label="Search worker"
         searchbar-info="You can search by worker id or name"
     />