diff --git a/console/src/components/filter/FilterDropdown.vue b/console/src/components/filter/FilterDropdown.vue
new file mode 100644
index 000000000..bc8921297
--- /dev/null
+++ b/console/src/components/filter/FilterDropdown.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { IconArrowDown, VDropdown, VDropdownItem } from "@halo-dev/components";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    items: {
+      label: string;
+      value?: string | boolean | number;
+    }[];
+    label: string;
+    modelValue?: string | boolean | number;
+  }>(),
+  {
+    modelValue: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (
+    event: "update:modelValue",
+    modelValue: string | boolean | number | undefined
+  ): void;
+}>();
+
+const selectedItem = computed(() => {
+  return props.items.find((item) => item.value === props.modelValue);
+});
+
+function handleSelect(item: {
+  label: string;
+  value?: string | boolean | number;
+}) {
+  if (item.value === props.modelValue) {
+    emit("update:modelValue", undefined);
+    return;
+  }
+  emit("update:modelValue", item.value);
+}
+</script>
+
+<template>
+  <VDropdown>
+    <div
+      class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
+      :class="{ 'font-semibold text-gray-700': modelValue !== undefined }"
+    >
+      <span v-if="!selectedItem" class="mr-0.5">
+        {{ label }}
+      </span>
+      <span v-else> {{ label }}：{{ selectedItem.label }} </span>
+      <span>
+        <IconArrowDown />
+      </span>
+    </div>
+    <template #popper>
+      <VDropdownItem
+        v-for="(item, index) in items"
+        :key="index"
+        :selected="item.value === modelValue"
+        @click="handleSelect(item)"
+      >
+        {{ item.label }}
+      </VDropdownItem>
+    </template>
+  </VDropdown>
+</template>
diff --git a/console/src/components/input/SearchInput.vue b/console/src/components/input/SearchInput.vue
new file mode 100644
index 000000000..94eff2dd8
--- /dev/null
+++ b/console/src/components/input/SearchInput.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { getNode, reset } from "@formkit/core";
+import { IconCloseCircle } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    placeholder?: string;
+    modelValue: string;
+  }>(),
+  {
+    placeholder: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", modelValue: string): void;
+}>();
+
+const id = `search-input-${crypto.randomUUID()}`;
+
+function handleReset() {
+  emit("update:modelValue", "");
+  reset(id);
+}
+
+function onKeywordChange() {
+  const keywordNode = getNode(id);
+  if (keywordNode) {
+    emit("update:modelValue", keywordNode._value as string);
+  }
+}
+</script>
+
+<template>
+  <FormKit
+    :id="id"
+    outer-class="!p-0"
+    :placeholder="placeholder || $t('core.common.placeholder.search')"
+    type="text"
+    name="keyword"
+    :model-value="modelValue"
+    @keyup.enter="onKeywordChange"
+  >
+    <template v-if="modelValue" #suffix>
+      <div
+        class="group flex h-full cursor-pointer items-center bg-white px-2 transition-all hover:bg-gray-50"
+        @click="handleReset"
+      >
+        <IconCloseCircle
+          class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
+        />
+      </div>
+    </template>
+  </FormKit>
+</template>
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index 3269b8e7f..e7a8eeb76 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: All
           active: Active
           inactive: Inactive
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: Sort
         status: Status
+      item_labels:
+        all: All
+        default: Default
     status:
       deleting: Deleting
       loading: Loading
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index 95d3b9642..5afe68719 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: 全部
           active: 已启用
           inactive: 未启用
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: 排序
         status: 状态
+      item_labels:
+        all: 全部
+        default: 默认
     status:
       deleting: 删除中
       loading: 加载中
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index c7d7f3446..3b05e6214 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: 全部
           active: 已啟用
           inactive: 未啟用
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: 排序
         status: 狀態
+      item_labels:
+        all: 全部
+        default: 預設
     status:
       deleting: 刪除中
       loading: 加載中
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 6f0e5cec3..ecc7b5ab4 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -44,7 +44,6 @@ import { useRouteQuery } from "@vueuse/router";
 import { useFetchAttachmentGroup } from "./composables/use-attachment-group";
 import { usePermission } from "@/utils/permission";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useI18n } from "vue-i18n";
 
diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
index 25fca9c9a..1dec07c30 100644
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@@ -21,7 +21,6 @@ import type { ListedComment, User } from "@halo-dev/api-client";
 import { computed, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
index 3416ef6e4..8025e2805 100644
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@@ -37,7 +37,6 @@ import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { singlePageLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index 9d1b8da61..b7a76c781 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -43,7 +43,6 @@ import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { postLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import TagDropdownSelector from "@/components/dropdown-selector/TagDropdownSelector.vue";
 import { useMutation, useQuery } from "@tanstack/vue-query";
diff --git a/console/src/modules/system/plugins/PluginList.vue b/console/src/modules/system/plugins/PluginList.vue
index 73c9877c2..4ca8a828d 100644
--- a/console/src/modules/system/plugins/PluginList.vue
+++ b/console/src/modules/system/plugins/PluginList.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import {
   IconAddCircle,
-  IconArrowDown,
   IconPlug,
   IconRefreshLine,
   VButton,
@@ -11,8 +10,6 @@ import {
   VPagination,
   VSpace,
   VLoading,
-  VDropdown,
-  VDropdownItem,
   Dialog,
 } from "@halo-dev/components";
 import PluginListItem from "./components/PluginListItem.vue";
@@ -20,26 +17,14 @@ import PluginUploadModal from "./components/PluginUploadModal.vue";
 import { computed, ref, onMounted } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { usePermission } from "@/utils/permission";
-import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
-import { getNode } from "@formkit/core";
 import { useQuery } from "@tanstack/vue-query";
 import type { Plugin } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
 import { useRouteQuery } from "@vueuse/router";
+import { watch } from "vue";
 
 const { t } = useI18n();
 
-interface EnabledItem {
-  label: string;
-  value?: boolean;
-}
-
-interface SortItem {
-  label: string;
-  value: string;
-}
-
 const { currentUserHasPermission } = usePermission();
 
 const pluginInstall = ref(false);
@@ -49,90 +34,41 @@ const page = ref(1);
 const size = ref(20);
 const total = ref(0);
 
-// Filters
-const EnabledItems: EnabledItem[] = [
-  {
-    label: t("core.plugin.filters.status.items.all"),
-    value: undefined,
-  },
-  {
-    label: t("core.plugin.filters.status.items.active"),
-    value: true,
-  },
-  {
-    label: t("core.plugin.filters.status.items.inactive"),
-    value: false,
-  },
-];
-
-const SortItems: SortItem[] = [
-  {
-    label: t("core.plugin.filters.sort.items.create_time_desc"),
-    value: "creationTimestamp,desc",
-  },
-  {
-    label: t("core.plugin.filters.sort.items.create_time_asc"),
-    value: "creationTimestamp,asc",
-  },
-];
-
-const selectedEnabledItem = ref<EnabledItem>();
-const selectedSortItem = ref<SortItem>();
-
-function handleEnabledItemChange(enabledItem: EnabledItem) {
-  selectedEnabledItem.value = enabledItem;
-  page.value = 1;
-}
-
-function handleSortItemChange(sortItem?: SortItem) {
-  selectedSortItem.value = sortItem;
-  page.value = 1;
-}
-
-function handleKeywordChange() {
-  const keywordNode = getNode("keywordInput");
-  if (keywordNode) {
-    keyword.value = keywordNode._value as string;
-  }
-  page.value = 1;
-}
-
-function handleClearKeyword() {
-  keyword.value = "";
-  page.value = 1;
-}
+const selectedEnabledValue = ref();
+const selectedSortValue = ref();
 
 const hasFilters = computed(() => {
-  return (
-    selectedEnabledItem.value?.value !== undefined ||
-    selectedSortItem.value?.value ||
-    keyword.value
-  );
+  return selectedEnabledValue.value !== undefined || selectedSortValue.value;
 });
 
 function handleClearFilters() {
-  selectedEnabledItem.value = undefined;
-  selectedSortItem.value = undefined;
-  keyword.value = "";
-  page.value = 1;
+  selectedSortValue.value = undefined;
+  selectedEnabledValue.value = undefined;
 }
 
+watch(
+  () => [selectedEnabledValue.value, selectedSortValue.value, keyword.value],
+  () => {
+    page.value = 1;
+  }
+);
+
 const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
   queryKey: [
     "plugins",
     page,
     size,
     keyword,
-    selectedEnabledItem,
-    selectedSortItem,
+    selectedEnabledValue,
+    selectedSortValue,
   ],
   queryFn: async () => {
     const { data } = await apiClient.plugin.listPlugins({
       page: page.value,
       size: size.value,
       keyword: keyword.value,
-      enabled: selectedEnabledItem.value?.value,
-      sort: [selectedSortItem.value?.value].filter(Boolean) as string[],
+      enabled: selectedEnabledValue.value,
+      sort: [selectedSortValue.value].filter(Boolean) as string[],
     });
 
     total.value = data.total;
@@ -204,99 +140,52 @@ onMounted(() => {
             class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 items-center gap-2 sm:w-auto">
-              <FormKit
-                id="keywordInput"
-                outer-class="!p-0"
-                :placeholder="$t('core.common.placeholder.search')"
-                type="text"
-                name="keyword"
-                :model-value="keyword"
-                @keyup.enter="handleKeywordChange"
-              ></FormKit>
-
-              <FilterTag v-if="keyword" @close="handleClearKeyword()">
-                {{
-                  $t("core.common.filters.results.keyword", {
-                    keyword: keyword,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterTag
-                v-if="selectedEnabledItem?.value !== undefined"
-                @close="handleEnabledItemChange(EnabledItems[0])"
-              >
-                {{
-                  $t("core.common.filters.results.status", {
-                    status: selectedEnabledItem.label,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterTag
-                v-if="selectedSortItem"
-                @close="handleSortItemChange()"
-              >
-                {{
-                  $t("core.common.filters.results.sort", {
-                    sort: selectedSortItem.label,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterCleanButton
-                v-if="hasFilters"
-                @click="handleClearFilters"
-              />
+              <SearchInput v-model="keyword" />
             </div>
             <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.status") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(enabledItem, index) in EnabledItems"
-                      :key="index"
-                      :selected="
-                        enabledItem.value === selectedEnabledItem?.value
-                      "
-                      @click="handleEnabledItemChange(enabledItem)"
-                    >
-                      {{ enabledItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.sort") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(sortItem, index) in SortItems"
-                      :key="index"
-                      :selected="sortItem.value === selectedSortItem?.value"
-                      @click="handleSortItemChange(sortItem)"
-                    >
-                      {{ sortItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
+                <FilterCleanButton
+                  v-if="hasFilters"
+                  @click="handleClearFilters"
+                />
+                <FilterDropdown
+                  v-model="selectedEnabledValue"
+                  :label="$t('core.common.filters.labels.status')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.all'),
+                    },
+                    {
+                      label: t('core.plugin.filters.status.items.active'),
+                      value: true,
+                    },
+                    {
+                      label: t('core.plugin.filters.status.items.inactive'),
+                      value: false,
+                    },
+                  ]"
+                />
+                <FilterDropdown
+                  v-model="selectedSortValue"
+                  :label="$t('core.common.filters.labels.sort')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.default'),
+                    },
+                    {
+                      label: t(
+                        'core.plugin.filters.sort.items.create_time_desc'
+                      ),
+                      value: 'creationTimestamp,desc',
+                    },
+                    {
+                      label: t(
+                        'core.plugin.filters.sort.items.create_time_asc'
+                      ),
+                      value: 'creationTimestamp,asc',
+                    },
+                  ]"
+                />
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
diff --git a/console/src/modules/system/users/UserList.vue b/console/src/modules/system/users/UserList.vue
index 6ee9c6b32..bdfd66a7d 100644
--- a/console/src/modules/system/users/UserList.vue
+++ b/console/src/modules/system/users/UserList.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import {
   IconAddCircle,
-  IconArrowDown,
   IconUserFollow,
   IconUserSettings,
   IconLockPasswordLine,
@@ -20,7 +19,6 @@ import {
   Toast,
   IconRefreshLine,
   VEmpty,
-  VDropdown,
   VDropdownItem,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
@@ -28,16 +26,13 @@ import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
-import type { Role, User, ListedUser } from "@halo-dev/api-client";
+import type { User, ListedUser } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
 import { usePermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
-import { getNode } from "@formkit/core";
-import FilterTag from "@/components/filter/FilterTag.vue";
 import { useFetchRole } from "../roles/composables/use-role";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import UserCreationModal from "./components/UserCreationModal.vue";
@@ -61,61 +56,26 @@ const ANONYMOUSUSER_NAME = "anonymousUser";
 const DELETEDUSER_NAME = "ghost";
 
 // Filters
-function handleKeywordChange() {
-  const keywordNode = getNode("keywordInput");
-  if (keywordNode) {
-    keyword.value = keywordNode._value as string;
-  }
-  page.value = 1;
-}
-
-function handleClearKeyword() {
-  keyword.value = "";
-  page.value = 1;
-}
-
-interface SortItem {
-  label: string;
-  value: string;
-}
-
-const SortItems: SortItem[] = [
-  {
-    label: t("core.user.filters.sort.items.create_time_desc"),
-    value: "creationTimestamp,desc",
-  },
-  {
-    label: t("core.user.filters.sort.items.create_time_asc"),
-    value: "creationTimestamp,asc",
-  },
-];
-
-const selectedSortItem = ref<SortItem>();
-
-function handleSortItemChange(sortItem?: SortItem) {
-  selectedSortItem.value = sortItem;
-  page.value = 1;
-}
-
 const { roles } = useFetchRole();
-const selectedRole = ref<Role>();
-
-function handleRoleChange(role?: Role) {
-  selectedRole.value = role;
-  page.value = 1;
-}
+const selectedRoleValue = ref();
+const selectedSortValue = ref();
 
 function handleClearFilters() {
-  selectedRole.value = undefined;
-  selectedSortItem.value = undefined;
-  keyword.value = "";
-  page.value = 1;
+  selectedRoleValue.value = undefined;
+  selectedSortValue.value = undefined;
 }
 
 const hasFilters = computed(() => {
-  return selectedRole.value || selectedSortItem.value || keyword.value;
+  return selectedRoleValue.value || selectedSortValue.value;
 });
 
+watch(
+  () => [selectedRoleValue.value, selectedSortValue.value, keyword.value],
+  () => {
+    page.value = 1;
+  }
+);
+
 const page = ref(1);
 const size = ref(20);
 const total = ref(0);
@@ -126,7 +86,14 @@ const {
   isFetching,
   refetch,
 } = useQuery<ListedUser[]>({
-  queryKey: ["users", page, size, keyword, selectedSortItem, selectedRole],
+  queryKey: [
+    "users",
+    page,
+    size,
+    keyword,
+    selectedSortValue,
+    selectedRoleValue,
+  ],
   queryFn: async () => {
     const { data } = await apiClient.user.listUsers({
       page: page.value,
@@ -136,10 +103,8 @@ const {
         `name!=${ANONYMOUSUSER_NAME}`,
         `name!=${DELETEDUSER_NAME}`,
       ],
-      sort: [selectedSortItem.value?.value].filter(
-        (item) => !!item
-      ) as string[],
-      role: selectedRole.value?.metadata.name,
+      sort: [selectedSortValue.value].filter(Boolean) as string[],
+      role: selectedRoleValue.value,
     });
 
     total.value = data.total;
@@ -330,55 +295,7 @@ onMounted(() => {
               />
             </div>
             <div class="flex w-full flex-1 items-center sm:w-auto">
-              <div
-                v-if="!selectedUserNames.length"
-                class="flex items-center gap-2"
-              >
-                <FormKit
-                  id="keywordInput"
-                  outer-class="!p-0"
-                  :model-value="keyword"
-                  name="keyword"
-                  :placeholder="$t('core.common.placeholder.search')"
-                  type="text"
-                  @keyup.enter="handleKeywordChange"
-                ></FormKit>
-
-                <FilterTag v-if="keyword" @close="handleClearKeyword()">
-                  {{
-                    $t("core.common.filters.results.keyword", {
-                      keyword: keyword,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterTag v-if="selectedRole" @close="handleRoleChange()">
-                  {{
-                    $t("core.user.filters.role.result", {
-                      role:
-                        selectedRole.metadata.annotations?.[
-                          rbacAnnotations.DISPLAY_NAME
-                        ] || selectedRole.metadata.name,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterTag
-                  v-if="selectedSortItem"
-                  @close="handleSortItemChange()"
-                >
-                  {{
-                    $t("core.common.filters.results.sort", {
-                      sort: selectedSortItem.label,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-              </div>
+              <SearchInput v-if="!selectedUserNames.length" v-model="keyword" />
               <VSpace v-else>
                 <VButton type="danger" @click="handleDeleteInBatch">
                   {{ $t("core.common.buttons.delete") }}
@@ -387,56 +304,45 @@ onMounted(() => {
             </div>
             <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.user.filters.role.label") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(role, index) in roles"
-                      :key="index"
-                      :selected="
-                        selectedRole?.metadata.name === role.metadata.name
-                      "
-                      @click="handleRoleChange(role)"
-                    >
-                      {{
-                        role.metadata.annotations?.[
-                          rbacAnnotations.DISPLAY_NAME
-                        ] || role.metadata.name
-                      }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.sort") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(sortItem, index) in SortItems"
-                      :key="index"
-                      :selected="selectedSortItem?.value === sortItem.value"
-                      @click="handleSortItemChange(sortItem)"
-                    >
-                      {{ sortItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
+                <FilterCleanButton
+                  v-if="hasFilters"
+                  @click="handleClearFilters"
+                />
+                <FilterDropdown
+                  v-model="selectedRoleValue"
+                  :label="$t('core.user.filters.role.label')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.all'),
+                    },
+                    ...roles.map((role) => {
+                      return {
+                        label:
+                          role.metadata.annotations?.[
+                            rbacAnnotations.DISPLAY_NAME
+                          ] || role.metadata.name,
+                        value: role.metadata.name,
+                      };
+                    }),
+                  ]"
+                />
+                <FilterDropdown
+                  v-model="selectedSortValue"
+                  :label="$t('core.common.filters.labels.sort')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.default'),
+                    },
+                    {
+                      label: t('core.user.filters.sort.items.create_time_desc'),
+                      value: 'creationTimestamp,desc',
+                    },
+                    {
+                      label: t('core.user.filters.sort.items.create_time_asc'),
+                      value: 'creationTimestamp,asc',
+                    },
+                  ]"
+                />
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
diff --git a/console/src/setup/setupComponents.ts b/console/src/setup/setupComponents.ts
index 8302b27bb..28853bf93 100644
--- a/console/src/setup/setupComponents.ts
+++ b/console/src/setup/setupComponents.ts
@@ -6,6 +6,9 @@ import "floating-vue/dist/style.css";
 import VueGridLayout from "vue-grid-layout";
 import { defaultConfig, plugin as FormKit } from "@formkit/vue";
 import FormKitConfig from "@/formkit/formkit.config";
+import FilterDropdown from "@/components/filter/FilterDropdown.vue";
+import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
+import SearchInput from "@/components/input/SearchInput.vue";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
@@ -25,4 +28,9 @@ export function setupComponents(app: App) {
     "VCodemirror",
     defineAsyncComponent(() => import("@/components/codemirror/Codemirror.vue"))
   );
+
+  // Console components
+  app.component("FilterDropdown", FilterDropdown);
+  app.component("FilterCleanButton", FilterCleanButton);
+  app.component("SearchInput", SearchInput);
 }