diff --git a/dashboard/src/pages/packages/index.vue b/dashboard/src/pages/packages/index.vue
index 89420ee3..0a41de27 100644
--- a/dashboard/src/pages/packages/index.vue
+++ b/dashboard/src/pages/packages/index.vue
@@ -39,19 +39,6 @@ const toggleLegend = () => {
   showLegend = !showLegend;
   if (tooltip) tooltip.hide();
 };
-
-const statusFilter = $ref("");
-function changeStatusFilter(event: Event) {
-  if (event) {
-    let v = (event.target as HTMLOptionElement).value;
-    let status = undefined as PackageListStatusEnum | undefined;
-    if (v != "") {
-      status = v as PackageListStatusEnum;
-    }
-    packageStore.filters.status = status;
-    packageStore.fetchPackages(1);
-  }
-}
 </script>
 
 <template>
@@ -66,17 +53,15 @@ function changeStatusFilter(event: Event) {
       {{ packageStore.page.total }}
     </div>
 
-    <div class="row mx-0 mb-3 align-items-left border bg-light">
-      <div class="col-auto pb-1 align-self-center border-end">
-        <h3 class="mb-0">Filters</h3>
-      </div>
-      <div class="col-auto pb-1">
-        <label for="filter-status" class="form-label mb-0"> Status </label>
+    <div class="d-flex flex-wrap gap-3 mb-3 p-3 border bg-light">
+      <h3 class="mb-0 pe-3 border-end">Filters</h3>
+      <div class="d-flex gap-2">
+        <label for="filter-status" class="align-self-center">Status</label>
         <select
           id="filter-status"
-          v-model="statusFilter"
-          @change="changeStatusFilter"
-          class="form-select border rounded-2"
+          v-model="packageStore.filters.status"
+          @change="packageStore.fetchPackages(1)"
+          class="form-select"
         >
           <option value="">any</option>
           <option v-for="item of PackageListStatusEnum" :value="item">
diff --git a/dashboard/src/stores/package.ts b/dashboard/src/stores/package.ts
index 7c7c2747..41606a97 100644
--- a/dashboard/src/stores/package.ts
+++ b/dashboard/src/stores/package.ts
@@ -49,7 +49,7 @@ export const usePackageStore = defineStore("package", {
     },
 
     filters: {
-      status: undefined as PackageListStatusEnum | undefined,
+      status: "" as PackageListStatusEnum,
     },
   }),
   getters: {
@@ -171,7 +171,7 @@ export const usePackageStore = defineStore("package", {
       const resp = await client.package.packageList({
         offset: page > 1 ? (page - 1) * this.page.limit : undefined,
         limit: this.page?.limit || undefined,
-        status: this.filters.status,
+        status: this.filters.status ? this.filters.status : undefined,
       });
       this.packages = resp.items;
       this.page = resp.page;
diff --git a/dashboard/src/styles/bootstrap-base.scss b/dashboard/src/styles/bootstrap-base.scss
index 3941d2e9..5d4222e8 100644
--- a/dashboard/src/styles/bootstrap-base.scss
+++ b/dashboard/src/styles/bootstrap-base.scss
@@ -7,6 +7,9 @@ $offcanvas-horizontal-width: 300px;
 $offcanvas-padding-x: 0;
 $headings-color: $primary;
 $headings-font-weight: 400;
+$border-radius: 0;
+$border-radius-sm: 0;
+$border-radius-lg: 0;
 
 // Custom variables.
 $header-height: 64px;