diff --git a/os-checks/components/DropDownSimple.vue b/os-checks/components/DropDownSimple.vue
new file mode 100644
index 0000000..e5fbea7
--- /dev/null
+++ b/os-checks/components/DropDownSimple.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+const { tag, options, showClear } = defineProps<{
+  tag: string,
+  options: string[],
+  showClear?: boolean
+}>();
+
+const selected = defineModel<string | null>({ default: null });
+</script>
+
+<template>
+  <span class="input">{{ tag }}:</span>
+  <span class="select">
+    <Select v-model="selected" filter :showClear="showClear" :options="options" />
+  </span>
+</template>
+
+<style scoped>
+.input {
+  font-size: 14.5px;
+  font-weight: bold;
+  padding-right: 10px;
+  color: var(--p-button-primary-background);
+}
+
+.select {
+  padding-right: 10px;
+}
+</style>
diff --git a/os-checks/pages/file-tree.vue b/os-checks/pages/file-tree.vue
index 3c77eaf..0a5078b 100644
--- a/os-checks/pages/file-tree.vue
+++ b/os-checks/pages/file-tree.vue
@@ -1,40 +1,22 @@
 <template>
   <div>
-    <div style="display: flex" v-if="displayFilters">
-      <!-- <div style="max-width: 10%; display: grid; place-items: center; padding: 0px 20px;"> -->
-      <!--   <div> -->
-      <!--     <b>Count</b><br> -->
-      <!--     <Button style="margin-top: 5px;" severity="danger" v-if="count">{{ count }}</Button> -->
-      <!--   </div> -->
-      <!-- </div> -->
 
-      <div style="flex:1">
-        <div style="padding: 6px 8px 6px 8px">
-          <span class="input">User:</span>
-          <span class="select">
-            <Select v-model="selected.user" filter :options="users" :optionLabel="label" />
-          </span>
-
-          <span class="input">Repo:</span>
-          <span class="select">
-            <Select v-model="selected.repo" filter :options="repos" :optionLabel="label" />
-          </span>
-
-          <DropDownWithCount v-model="selected.target" tag="Target" :all="ALL_TARGETS" :counts="targets" />
-
-        </div>
+    <div v-if="displayFilters">
+      <div style="padding: 6px 8px 6px 8px">
+        <DropDownSimple v-model="selected.user" tag="User" :options="users" />
+        <DropDownSimple v-model="selected.repo" tag="Repo" :options="repos" />
+        <DropDownWithCount v-model="selected.target" tag="Target" :all="ALL_TARGETS" :counts="targets" />
+      </div>
 
-        <div style="padding: 2px 8px 10px 8px">
+      <div style="padding: 2px 8px 10px 8px">
 
-          <DropDownWithCount v-model="selected.pkg" tag="Pkg" :all="ALL_PKGS" :counts="pkgs" />
-          <DropDownWithCount v-model="selected.features" tag="Features" :all="ALL_FEATURES_SETS" :counts="features" />
+        <DropDownWithCount v-model="selected.pkg" tag="Pkg" :all="ALL_PKGS" :counts="pkgs" />
+        <DropDownWithCount v-model="selected.features" tag="Features" :all="ALL_FEATURES_SETS" :counts="features" />
 
-          <DropDownWithCount v-model="selected.checker" tag="Checker" :all="ALL_CHECKERS" :counts="checkers" />
-          <DropDownWithCount v-model="selected.kind" tag="Kind" :all="ALL_KINDS" :counts="kinds" />
+        <DropDownWithCount v-model="selected.checker" tag="Checker" :all="ALL_CHECKERS" :counts="checkers" />
+        <DropDownWithCount v-model="selected.kind" tag="Kind" :all="ALL_KINDS" :counts="kinds" />
 
-        </div>
       </div>
-
     </div>
 
     <FileTree2 :get="got2" :count="count" v-model:filters="displayFilters" v-model:lockURL="lockURL" />
@@ -54,11 +36,9 @@ import type { Basic } from '~/shared/types';
 useHead({ title: 'Issue File Tree' });
 highlightRust();
 
-const label = (a: string) => a;
-
 const selected = reactive<{
-  user: string,
-  repo: string,
+  user: string | null,
+  repo: string | null,
   target: string | null,
   pkg: string | null,
   features: string | null,
@@ -88,7 +68,7 @@ githubFetch<UserRepo>({ path: "ui/user_repo.json" })
 
 // Init filters.
 const users = computed(() => Object.keys(user_repo.value).sort());
-const repos = computed(() => user_repo.value[selected.user]);
+const repos = computed(() => selected.user ? user_repo.value[selected.user] : []);
 const targets = computed<DropDownOptions>(() => {
   const t = basic.value?.targets;
   return t ? gen_targets(t) : emptyOptions();
@@ -334,17 +314,3 @@ watch(lockURL, lock => {
   router_params.value = query;
 });
 </script>
-
-<!-- FIXME: remove these -->
-<style scoped>
-.input {
-  font-size: 14.5px;
-  font-weight: bold;
-  padding-right: 10px;
-  color: var(--p-button-primary-background);
-}
-
-.select {
-  padding-right: 10px;
-}
-</style>
diff --git a/os-checks/pages/testcases.vue b/os-checks/pages/testcases.vue
index 34c1869..a5c4fb7 100644
--- a/os-checks/pages/testcases.vue
+++ b/os-checks/pages/testcases.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <DataTable :value="testcases" scrollable :scrollHeight="tableHeight" showGridlines selectionMode="single"
+  <DataTable :value="testcasesFiltered" scrollable :scrollHeight="tableHeight" showGridlines selectionMode="single"
     v-model:selection="selectedTest" v-model:filters="selected.text" :multiSortMeta="selected.sorts"
     @update:multiSortMeta="sortsChanged" sortMode="multiple" removableSort paginator :rows="10"
     :rowsPerPageOptions="[5, 10, 20, 50, 100, 200, 1000]"
@@ -9,15 +9,20 @@
     <template #empty><b> No testcases found. </b></template>
     <template #header>
       <div style="display: flex; justify-content: space-between;">
-        <div style="display: flex; gap: 10px;">
-          <!-- <MultiSelect v-model="selected.categories" display="chip" :options="categories" filter :maxSelectedLabels="4" -->
-          <!--   placeholder="Select Categories" /> -->
+        <div style="display: flex; align-items: center;">
+          <DropDownSimple tag="user" :options="options.val.user" v-model="selected.user" showClear />
+          <DropDownSimple tag="repo" :options="options.val.repo" v-model="selected.repo" showClear />
+          <DropDownSimple tag="pkg" :options="options.val.pkg" v-model="selected.pkg" showClear />
+          <DropDownSimple tag="test_pass" :options="options.val.test_pass" v-model="selected.test_pass" showClear />
+          <DropDownSimple tag="miri_pass" :options="options.val.miri_pass" v-model="selected.miri_pass" showClear />
+          <DropDownSimple tag="miri_timeout" :options="options.val.miri_timeout" v-model="selected.miri_timeout"
+            showClear />
         </div>
 
         <div>
           <IconField>
             <InputIcon> <i class="pi pi-search" /> </InputIcon>
-            <InputText style="width: 300px" v-model="selected.text['global'].value" placeholder="Search" />
+            <InputText style="width: 200px" v-model="selected.text['global'].value" placeholder="Search" />
           </IconField>
         </div>
 
@@ -93,6 +98,9 @@
 import type { DataTableSortMeta } from 'primevue/datatable';
 import { FilterMatchMode } from '@primevue/core/api';
 import type { PkgInfo } from '~/shared/info';
+import { cloneDeep, uniq } from 'es-toolkit/compat';
+
+useHead({ title: 'Test Cases' });
 
 // styling
 const { viewportHeight } = storeToRefs(useStyleStore());
@@ -108,6 +116,7 @@ const ptColumnRight = ref({
 highlightRust();
 
 const testcases = ref<TestResult[]>([]);
+const testcasesFiltered = ref<TestResult[]>([]);
 const selectedTest = ref<TestResult | null>(null);
 
 // pop up details
@@ -118,6 +127,7 @@ githubFetch<PkgInfo[]>({
   path: "plugin/cargo/info/summaries.json"
 }).then(val => {
   testcases.value = summariesToTestResult(val);
+  testcasesFiltered.value = cloneDeep(testcases.value);
 });
 
 type TestResult = {
@@ -174,12 +184,94 @@ function sortsChanged(meta?: DataTableSortMeta[] | null) {
 }
 
 const selected = reactive<{
+  user: string | null,
+  repo: string | null,
+  pkg: string | null,
+  kind: string | null,
+  test_pass: string | null,
+  miri_pass: string | null,
+  miri_timeout: string | null,
   text: any,
   sorts: DataTableSortMeta[],
 }>({
+  user: null,
+  repo: null,
+  pkg: null,
+  kind: null,
+  test_pass: null,
+  miri_pass: null,
+  miri_timeout: null,
   text: { global: { value: null, matchMode: FilterMatchMode.CONTAINS }, },
   sorts: [],
 });
 
-useHead({ title: 'Test Cases' });
+type Options = {
+  user: string[],
+  repo: string[],
+  pkg: string[],
+  kind: string[],
+  test_pass: string[],
+  miri_pass: string[],
+  miri_timeout: string[],
+};
+function defaultOptions(): Options {
+  return {
+    user: [],
+    repo: [],
+    pkg: [],
+    kind: [],
+    test_pass: [],
+    miri_pass: [],
+    miri_timeout: [],
+  };
+}
+const options = reactive<{ val: Options }>({ val: defaultOptions() });
+
+// init options
+watch(testcases, tc => options.val = testcasesToOptions(tc));
+
+// update table when filter selection changes
+watch(
+  selected,
+  ({ user, repo, pkg, kind, test_pass, miri_pass, miri_timeout }) => {
+    // for simplicity, the data of testcases are supposed to remain unchanged
+    const chosen_testcases = testcases.value.filter(test => {
+      let chosen = true;
+      if (user) chosen &&= test.user === user;
+      if (repo) chosen &&= test.repo === repo;
+      if (pkg) chosen &&= test.pkg === pkg;
+      if (kind) chosen &&= test.kind === repo;
+      if (test_pass) chosen &&= test.test_pass === test_pass;
+      if (miri_pass) chosen &&= test.miri_pass === miri_pass;
+      if (miri_timeout || miri_timeout === "") chosen &&= test.miri_timeout === miri_timeout;
+      return chosen;
+    });
+    testcasesFiltered.value = chosen_testcases.map((tc, idx) => {
+      tc.idx = idx;
+      return tc;
+    });
+    // options.val = testcasesToOptions(chosen_testcases);
+  });
+
+function testcasesToOptions(tc: TestResult[]): Options {
+  let opts = defaultOptions();
+  for (const test of tc) {
+    opts.user.push(test.user);
+    opts.repo.push(test.repo);
+    opts.pkg.push(test.pkg);
+    opts.kind.push(test.kind);
+    opts.test_pass.push(test.test_pass);
+    opts.miri_pass.push(test.miri_pass);
+    opts.miri_timeout.push(test.miri_timeout);
+  }
+
+  opts.user = uniq(opts.user).sort();
+  opts.repo = uniq(opts.repo).sort();
+  opts.pkg = uniq(opts.pkg).sort();
+  opts.kind = uniq(opts.kind).sort();
+  opts.test_pass = uniq(opts.test_pass).sort();
+  opts.miri_pass = uniq(opts.miri_pass).sort();
+  opts.miri_timeout = uniq(opts.miri_timeout).sort();
+  return opts;
+}
 </script>