diff --git a/backend/app/api/v1/routes/events.py b/backend/app/api/v1/routes/events.py
index f1d20e1..57e40a3 100644
--- a/backend/app/api/v1/routes/events.py
+++ b/backend/app/api/v1/routes/events.py
@@ -58,8 +58,8 @@ def get_event(event_id: int, db: Session = Depends(get_db)):
     description="Return a paginated list of all events with their tags and fields.",
     responses={200: {"description": "List of events returned"}},
 )
-def get_events(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    events = crud.get_events(db=db, skip=skip, limit=limit)
+def get_events(db: Session = Depends(get_db)):
+    events = crud.get_events(db=db)
     return events
 
 
diff --git a/backend/app/api/v1/routes/fields.py b/backend/app/api/v1/routes/fields.py
index c0fe770..16c1fc7 100644
--- a/backend/app/api/v1/routes/fields.py
+++ b/backend/app/api/v1/routes/fields.py
@@ -31,8 +31,8 @@ def create_field(field: schemas.FieldCreate, db: Session = Depends(get_db)):
         200: {"description": "List of fields returned"},
     },
 )
-def get_fields(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    fields = crud.get_fields(db=db, skip=skip, limit=limit)
+def get_fields(db: Session = Depends(get_db)):
+    fields = crud.get_fields(db=db)
     return fields
 
 
diff --git a/backend/app/api/v1/routes/tags.py b/backend/app/api/v1/routes/tags.py
index c255a3c..5791c17 100644
--- a/backend/app/api/v1/routes/tags.py
+++ b/backend/app/api/v1/routes/tags.py
@@ -31,8 +31,8 @@ def create_tag(tag: schemas.TagCreate, db: Session = Depends(get_db)):
         200: {"description": "List of tags returned"},
     },
 )
-def get_tags(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    tags = crud.get_tags(db=db, skip=skip, limit=limit)
+def get_tags(db: Session = Depends(get_db)):
+    tags = crud.get_tags(db=db)
     return tags
 
 
diff --git a/backend/app/crud.py b/backend/app/crud.py
index a367737..89fa3be 100644
--- a/backend/app/crud.py
+++ b/backend/app/crud.py
@@ -26,15 +26,14 @@ def get_event(db: Session, event_id: int):
     return db.query(models.Event).filter(models.Event.id == event_id).first()
 
 
-def get_events(db: Session, skip: int = 0, limit: int = 100):
+def get_events(db: Session):
     return (
         db.query(models.Event)
         .options(
             joinedload(models.Event.tags),
             joinedload(models.Event.fields),
         )
-        .offset(skip)
-        .limit(limit)
+        .order_by(models.Event.id)
         .all()
     )
 
@@ -87,8 +86,10 @@ def create_tag(db: Session, tag: schemas.TagCreate):
     return db_tag
 
 
-def get_tags(db: Session, skip: int = 0, limit: int = 100):
-    return db.query(models.Tag).offset(skip).limit(limit).all()
+def get_tags(db: Session):
+    return (
+        db.query(models.Tag).order_by(models.Tag.created_at.desc(), models.Tag.id).all()
+    )
 
 
 def get_tag(db: Session, tag_id: str):
@@ -143,8 +144,8 @@ def create_field(db: Session, field: schemas.FieldCreate):
     return db_field
 
 
-def get_fields(db: Session, skip: int = 0, limit: int = 100):
-    return db.query(models.Field).offset(skip).limit(limit).all()
+def get_fields(db: Session):
+    return db.query(models.Field).order_by(models.Field.id).all()
 
 
 def get_field(db: Session, field_id: int):
diff --git a/backend/app/models/__init__.py b/backend/app/models/__init__.py
index 3f29876..284f15c 100644
--- a/backend/app/models/__init__.py
+++ b/backend/app/models/__init__.py
@@ -44,6 +44,7 @@ class Event(Base, TimestampMixin):
         secondary="event_tags",
         back_populates="events",
         viewonly=True,
+        order_by="Tag.id.asc()",
     )
 
     field_links = relationship(
@@ -54,6 +55,7 @@ class Event(Base, TimestampMixin):
         secondary="event_fields",
         back_populates="events",
         viewonly=True,
+        order_by="Field.id.asc()",
     )
 
 
diff --git a/frontend/components.json b/frontend/components.json
index a0bbd56..0bd40b3 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -12,8 +12,8 @@
   "aliases": {
     "components": "@/components",
     "composables": "@/composables",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "utils": "@/shared/utils/general",
+    "ui": "@/shared/ui",
     "lib": "@/lib"
   },
   "iconLibrary": "lucide"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf8cb77..7231c0b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "evsy-frontend",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "evsy-frontend",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.4",
         "@tanstack/vue-table": "^8.21.3",
@@ -17,7 +17,7 @@
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.488.0",
         "pinia": "^3.0.2",
-        "reka-ui": "^2.2.0",
+        "reka-ui": "^2.2.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.4",
         "tw-animate-css": "^1.2.5",
@@ -3736,9 +3736,9 @@
       ]
     },
     "node_modules/reka-ui": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.0.tgz",
-      "integrity": "sha512-eeRrLI4LwJ6dkdwks6KFNKGs0+beqZlHO3JMHen7THDTh+yJ5Z0KNwONmOhhV/0hZC2uJCEExgG60QPzGstkQg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.1.tgz",
+      "integrity": "sha512-oLHiyBn6gTIQGnTnv8G5LQuFp9j8HuUNl0qdnW3XPhFb/07hrxzFpjo2kt/jxOZive+n/XWDbOjSj2h9Hih3qA==",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
         "@floating-ui/vue": "^1.1.6",
diff --git a/frontend/package.json b/frontend/package.json
index fc01cb3..97d7aac 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.488.0",
     "pinia": "^3.0.2",
-    "reka-ui": "^2.2.0",
+    "reka-ui": "^2.2.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.4",
     "tw-animate-css": "^1.2.5",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index efb410d..b3df123 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,7 @@ import { Toaster } from '@/shared/ui/sonner'
 
 <template>
   <Toaster richColors />
+
   <MainLayout>
     <RouterView v-slot="{ Component }">
       <Transition name="page" mode="out-in" appear>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 02c2e78..dc6a56d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,7 +42,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --transition-bg-color: background-color, color;
 }
 
 /* Light theme */
diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 23e761f..fea5d39 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -157,7 +157,7 @@ function removeTag(tagId: string) {
                 <FormControl>
                   <TagsInput
                     v-model="componentField.modelValue"
-                    class="flex h-9 w-full justify-between gap-1 shadow-xs"
+                    class="border-input focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full justify-between gap-1 rounded-md border bg-transparent shadow-xs transition-[box-shadow,color,border] focus-within:ring-[3px]"
                   >
                     <div class="h-5 w-[30%] p-0">
                       <ComboboxInput v-model="searchTerm" as-child>
@@ -179,7 +179,7 @@ function removeTag(tagId: string) {
 
                     <TagScrollArea>
                       <TagsInputItem
-                        v-for="item in componentField.modelValue"
+                        v-for="item in [...componentField.modelValue].reverse()"
                         :key="item"
                         :value="item"
                       >
diff --git a/frontend/src/modules/events/components/EventsDataTable.vue b/frontend/src/modules/events/components/EventsDataTable.vue
index 354d17e..c29aa83 100644
--- a/frontend/src/modules/events/components/EventsDataTable.vue
+++ b/frontend/src/modules/events/components/EventsDataTable.vue
@@ -8,11 +8,15 @@ import DataTable from '@/shared/components/data/DataTable.vue'
 import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
+import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
+import type { Tag } from '@/modules/tags/types'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  tags: Tag[]
   isLoading: boolean
+  isLoadingTags: boolean
 }>()
 
 const { table } = useDataTable({
@@ -31,6 +35,14 @@ const { table } = useDataTable({
         :column="table.getColumn('name')!"
         placeholder="Filter by name..."
       />
+
+      <!-- Tag Filter -->
+      <DataTableSingleSelectFilter
+        :column="table.getColumn('tags')"
+        placeholder="Select a tag..."
+        :options="tags.map(tag => tag.id)"
+        :disabled="isLoadingTags"
+      />
     </template>
     <template #buttons>
       <Button as-child>
diff --git a/frontend/src/modules/events/components/eventColumns.ts b/frontend/src/modules/events/components/eventColumns.ts
index da7d048..799ffa6 100644
--- a/frontend/src/modules/events/components/eventColumns.ts
+++ b/frontend/src/modules/events/components/eventColumns.ts
@@ -1,5 +1,6 @@
 import { h } from 'vue'
 import type { Event } from '@/modules/events/types.ts'
+import type { Tag } from '@/modules/tags/types.ts'
 import type { ColumnDef } from '@tanstack/vue-table'
 import EventsDataTableDropdown from '@/modules/events/components/EventsDataTableDropdown.vue'
 import { RouterLink } from 'vue-router'
@@ -113,6 +114,10 @@ export function getEventColumns(
           () => tags.map(tag => h(Badge, { variant: 'outline' }, { default: () => tag.id }))
         )
       },
+      filterFn: (row, id, value) => {
+        const tags = row.getValue(id) as Tag[]
+        return tags.some(tag => tag.id === value)
+      },
     },
     {
       id: 'actions',
diff --git a/frontend/src/modules/events/pages/EventsPage.vue b/frontend/src/modules/events/pages/EventsPage.vue
index 3aec065..180363e 100644
--- a/frontend/src/modules/events/pages/EventsPage.vue
+++ b/frontend/src/modules/events/pages/EventsPage.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { eventApi } from '@/modules/events/api'
+import { tagApi } from '@/modules/tags/api'
 import type { Event } from '@/modules/events/types'
+import type { Tag } from '@/modules/tags/types'
 import EventsDataTable from '../components/EventsDataTable.vue'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { useAsyncTask } from '@/shared/composables/useAsyncTask'
@@ -14,9 +16,11 @@ import DeleteModal from '@/shared/components/modals/DeleteModal.vue'
 const { run, isLoading } = useAsyncTask()
 const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
 const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
+const { run: loadTags, isLoading: isLoadingTags } = useAsyncTask()
 const { showUpdated, showDeleted } = useEnhancedToast()
 
 const events = ref<Event[]>([])
+const tags = ref<Tag[]>([])
 
 const selectedEventId = ref<number | null>(null)
 const editedEvent = ref<Event | null>(null)
@@ -76,14 +80,23 @@ onMounted(() => {
       events.value = data
     }
   )
+  loadTags(async () => {
+    tags.value = await tagApi.getAll()
+  })
 })
 </script>
 
 <template>
   <div>
     <Header title="Events" />
-    <div class="container mx-auto overflow-x-auto">
-      <EventsDataTable :columns="columns" :data="events" :isLoading="isLoading" />
+    <div class="container mx-auto">
+      <EventsDataTable
+        :columns="columns"
+        :data="events"
+        :tags="tags"
+        :isLoading="isLoading"
+        :isLoadingTags="isLoadingTags"
+      />
     </div>
 
     <!-- Modals -->
diff --git a/frontend/src/modules/fields/components/FieldsDataTable.vue b/frontend/src/modules/fields/components/FieldsDataTable.vue
index c63372b..0136ce1 100644
--- a/frontend/src/modules/fields/components/FieldsDataTable.vue
+++ b/frontend/src/modules/fields/components/FieldsDataTable.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
 import DataTableInputFilter from '@/shared/components/data/DataTableInputFilter.vue'
-import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { Button } from '@/shared/ui/button'
 import DataTablePagination from '@/shared/components/data/DataTablePagination.vue'
 import { FieldType } from '@/modules/fields/types'
@@ -11,6 +9,7 @@ import DataTable from '@/shared/components/data/DataTable.vue'
 import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
+import DataTableMultiSelectFilter from '@/shared/components/data/DataTableMultiSelectFilter.vue'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
@@ -18,16 +17,13 @@ const props = defineProps<{
   isLoading: boolean
 }>()
 
-const { table, columnFilters } = useDataTable({
+const { table } = useDataTable({
   data: () => props.data,
   columns: () => props.columns,
   defaultSorting: [{ id: 'id', desc: true }],
 })
 
 const fieldTypes = Object.values(FieldType)
-const isTypeFilterSet = computed(() =>
-  columnFilters.value.some(f => f.id === 'field_type' && !!f.value)
-)
 </script>
 
 <template>
@@ -41,11 +37,10 @@ const isTypeFilterSet = computed(() =>
       />
 
       <!-- Type Filter -->
-      <DataTableSingleSelectFilter
-        :column="table.getColumn('field_type')!"
-        placeholder="Select a type..."
+      <DataTableMultiSelectFilter
+        :column="table.getColumn('field_type')"
+        title="Type"
         :options="fieldTypes"
-        :show-clear-button="isTypeFilterSet"
       />
     </template>
     <template #buttons>
diff --git a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
index dbfc3db..8e7c487 100644
--- a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
+++ b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Field } from '@/modules/fields/types'
 import Skeleton from '@/shared/ui/skeleton/Skeleton.vue'
+import Checkbox from '@/shared/ui/checkbox/Checkbox.vue'
 
 defineProps<{
   fields: Field[]
@@ -22,14 +23,17 @@ const emit = defineEmits<{
     <Transition name="fade" appear>
       <div v-if="!isLoading">
         <div v-for="field in fields" :key="field.id" class="flex items-center gap-2">
-          <input
-            type="checkbox"
-            :checked="selectedIds.includes(field.id)"
-            @change="() => emit('toggle', field.id)"
+          <Checkbox
             :id="`field-${field.id}`"
-            class="form-checkbox"
+            :model-value="selectedIds.includes(field.id)"
+            @update:model-value="() => emit('toggle', field.id)"
           />
-          <label :for="`field-${field.id}`" class="text-sm">{{ field.name }}</label>
+          <label
+            :for="`field-${field.id}`"
+            class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {{ field.name }}
+          </label>
         </div>
       </div>
     </Transition>
diff --git a/frontend/src/modules/fields/components/fieldColumns.ts b/frontend/src/modules/fields/components/fieldColumns.ts
index 050cfbe..892d4f4 100644
--- a/frontend/src/modules/fields/components/fieldColumns.ts
+++ b/frontend/src/modules/fields/components/fieldColumns.ts
@@ -73,7 +73,9 @@ export function getFieldColumns(
         const field_type = String(row.getValue('field_type'))
         return h('div', { class: 'text-left font-medium' }, field_type)
       },
-      filterFn: 'equals',
+      filterFn: (row, id, value) => {
+        return value.includes(row.getValue(id))
+      },
     },
     {
       accessorKey: 'description',
diff --git a/frontend/src/modules/fields/pages/FieldsPage.vue b/frontend/src/modules/fields/pages/FieldsPage.vue
index 5ff8df1..fc6faac 100644
--- a/frontend/src/modules/fields/pages/FieldsPage.vue
+++ b/frontend/src/modules/fields/pages/FieldsPage.vue
@@ -83,7 +83,7 @@ onMounted(() => {
 <template>
   <div>
     <Header title="Fields" />
-    <div class="container mx-auto overflow-x-auto">
+    <div class="container mx-auto">
       <FieldsDataTable :columns="columns" :data="fields" :isLoading="isLoading" />
     </div>
 
diff --git a/frontend/src/modules/tags/components/TagItem.vue b/frontend/src/modules/tags/components/TagItem.vue
index e777923..4e66448 100644
--- a/frontend/src/modules/tags/components/TagItem.vue
+++ b/frontend/src/modules/tags/components/TagItem.vue
@@ -32,7 +32,7 @@ const handleCopyId = async () => {
 <template>
   <Transition name="fade" appear>
     <div
-      class="flex items-start justify-between gap-4 rounded-lg border p-4 transition-shadow hover:shadow-sm"
+      class="flex items-start justify-between gap-4 rounded-lg border p-4 transition hover:shadow-sm"
     >
       <div>
         <TooltipProvider :delay-duration="800">
diff --git a/frontend/src/modules/tags/components/TagScrollArea.vue b/frontend/src/modules/tags/components/TagScrollArea.vue
index a1510c3..146cbbb 100644
--- a/frontend/src/modules/tags/components/TagScrollArea.vue
+++ b/frontend/src/modules/tags/components/TagScrollArea.vue
@@ -5,12 +5,14 @@ import type { ClassValue } from 'clsx'
 
 const attrs = useAttrs()
 
-const wrapperClass = computed(() => cn('tag-scroll-wrapper max-w-60', attrs.class as ClassValue))
+const wrapperClass = computed(() =>
+  cn('tag-scroll-wrapper max-w-60 h-full', attrs.class as ClassValue)
+)
 </script>
 
 <template>
-  <div :class="wrapperClass" v-bind="{ ...attrs, class: undefined }">
-    <div class="hide-scrollbar scroll-x-bounce flex flex-row gap-1 overflow-x-auto px-4">
+  <div :class="wrapperClass" v-bind="{ ...attrs, class: undefined }" tabindex="-1">
+    <div class="hide-scrollbar scroll-x-bounce flex h-full flex-row gap-1 overflow-x-auto px-4">
       <slot />
     </div>
   </div>
diff --git a/frontend/src/shared/components/data/DataTableLayout.vue b/frontend/src/shared/components/data/DataTableLayout.vue
index 3092333..685755a 100644
--- a/frontend/src/shared/components/data/DataTableLayout.vue
+++ b/frontend/src/shared/components/data/DataTableLayout.vue
@@ -10,7 +10,7 @@ defineProps<{
       {{ title }}
     </div>
 
-    <div class="flex flex-wrap items-center justify-between gap-4 pb-4">
+    <div class="flex flex-wrap items-center justify-between gap-4 pt-1 pb-4">
       <div class="flex flex-nowrap items-center gap-4">
         <slot name="filters" />
       </div>
diff --git a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
new file mode 100644
index 0000000..822f238
--- /dev/null
+++ b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { Column } from '@tanstack/vue-table'
+import { cn } from '@/shared/utils/general'
+import { Badge } from '@/shared/ui/badge'
+import { Button } from '@/shared/ui/button'
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/shared/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover'
+import { Separator } from '@/shared/ui/separator'
+
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface DataTableFacetedFilter {
+  column?: Column<TData, TValue>
+  title?: string
+  options: string[]
+}
+
+const props = defineProps<DataTableFacetedFilter>()
+
+const facets = computed(() => props.column?.getFacetedUniqueValues())
+const selectedValues = computed(() => new Set(props.column?.getFilterValue() as string[]))
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline" class="border-dashed">
+        <Icon icon="radix-icons:plus-circled" :class="cn('mr-2 h-4 w-4')" />
+        {{ title }}
+        <template v-if="selectedValues.size > 0">
+          <Separator orientation="vertical" class="mx-2 h-4" />
+          <Badge variant="secondary" class="rounded-sm px-1 font-normal lg:hidden">
+            {{ selectedValues.size }}
+          </Badge>
+          <div class="hidden space-x-1 lg:flex">
+            <Badge
+              v-if="selectedValues.size > 2"
+              variant="secondary"
+              class="rounded-sm px-1 font-normal"
+            >
+              {{ selectedValues.size }} selected
+            </Badge>
+
+            <template v-else>
+              <Badge
+                v-for="option in options.filter(option => selectedValues.has(option))"
+                :key="option"
+                variant="secondary"
+                class="rounded-sm px-1 font-normal"
+              >
+                {{ option }}
+              </Badge>
+            </template>
+          </div>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[200px] p-0" align="start">
+      <Command>
+        <CommandInput :placeholder="title" />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="option in options"
+              :key="option"
+              :value="option"
+              @select="
+                () => {
+                  const isSelected = selectedValues.has(option)
+                  if (isSelected) {
+                    selectedValues.delete(option)
+                  } else {
+                    selectedValues.add(option)
+                  }
+                  const filterValues = Array.from(selectedValues)
+                  column?.setFilterValue(filterValues.length ? filterValues : undefined)
+                }
+              "
+            >
+              <div
+                :class="
+                  cn(
+                    'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
+                    selectedValues.has(option)
+                      ? 'bg-primary text-primary-foreground'
+                      : 'opacity-50 [&_svg]:invisible'
+                  )
+                "
+              >
+                <Icon icon="radix-icons:check" :class="cn('text-background h-4 w-4')" />
+              </div>
+              <span class="truncate">{{ option }}</span>
+              <span
+                v-if="facets?.get(option)"
+                class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs"
+              >
+                {{ facets.get(option) }}
+              </span>
+              <span
+                v-else
+                class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs"
+              >
+                0
+              </span>
+            </CommandItem>
+          </CommandGroup>
+
+          <template v-if="selectedValues.size > 0">
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
+                :value="{ label: 'Clear filters' }"
+                class="justify-center text-center"
+                @select="column?.setFilterValue(undefined)"
+              >
+                Clear filters
+              </CommandItem>
+            </CommandGroup>
+          </template>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/frontend/src/shared/components/data/DataTablePagination.vue b/frontend/src/shared/components/data/DataTablePagination.vue
index 5e35c3d..cdcf18b 100644
--- a/frontend/src/shared/components/data/DataTablePagination.vue
+++ b/frontend/src/shared/components/data/DataTablePagination.vue
@@ -63,7 +63,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
       <div class="flex items-center space-x-2">
         <Button
           variant="outline"
-          class="hidden h-8 w-8 p-0 transition-none lg:flex"
+          class="hidden h-8 w-8 p-0 lg:flex"
           :disabled="!table.getCanPreviousPage()"
           @click="table.setPageIndex(0)"
         >
@@ -72,7 +72,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="h-8 w-8 p-0 transition-none"
+          class="h-8 w-8 p-0"
           :disabled="!table.getCanPreviousPage()"
           @click="table.previousPage()"
         >
@@ -81,7 +81,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="h-8 w-8 p-0 transition-none"
+          class="h-8 w-8 p-0"
           :disabled="!table.getCanNextPage()"
           @click="table.nextPage()"
         >
@@ -90,7 +90,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="hidden h-8 w-8 p-0 transition-none lg:flex"
+          class="hidden h-8 w-8 p-0 lg:flex"
           :disabled="!table.getCanNextPage()"
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
diff --git a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
index a90db90..8fd4707 100644
--- a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
@@ -3,15 +3,19 @@ import type { Column } from '@tanstack/vue-table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { Button } from '@/shared/ui/button'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
 
 interface DataTableInputFilterProps {
-  column: Column<TData, TValue>
+  column?: Column<TData, TValue>
+  title?: string
   placeholder: string
   options: string[]
-  showClearButton: boolean
+  disabled?: boolean
 }
 
-defineProps<DataTableInputFilterProps>()
+const props = defineProps<DataTableInputFilterProps>()
+
+const selectedValue = computed(() => props.column?.getFilterValue() as string)
 </script>
 
 <script lang="ts">
@@ -23,20 +27,25 @@ export default {
 <template>
   <div class="flex items-center gap-1">
     <Select
-      :model-value="column.getFilterValue() as string"
-      @update:model-value="column.setFilterValue($event)"
+      :model-value="selectedValue"
+      @update:model-value="column?.setFilterValue($event)"
+      :disabled="disabled"
     >
       <SelectTrigger>
-        <SelectValue class="min-w-[12ch]" placeholder="Select a type..." />
+        <SelectValue class="min-w-[12ch]" :placeholder="placeholder">
+          <template v-if="selectedValue">
+            <span v-if="selectedValue">{{ selectedValue }}</span>
+          </template>
+        </SelectValue>
       </SelectTrigger>
-      <SelectContent>
-        <SelectItem v-for="option in options" :key="option" :value="option">{{
-          option
-        }}</SelectItem>
+      <SelectContent class="max-h-[400px]">
+        <SelectItem v-for="option in options" :key="option" :value="option">
+          {{ option }}
+        </SelectItem>
       </SelectContent>
     </Select>
 
-    <Button :disabled="!showClearButton" variant="ghost" @click="column.setFilterValue('')">
+    <Button :disabled="!selectedValue" variant="ghost" @click="column?.setFilterValue('')">
       <Icon class="h-4 w-4" icon="radix-icons:cross-2" />
       <span class="sr-only">Clear type filter</span>
     </Button>
diff --git a/frontend/src/shared/components/layout/DropdownMenu.vue b/frontend/src/shared/components/layout/DropdownMenu.vue
new file mode 100644
index 0000000..28b3d66
--- /dev/null
+++ b/frontend/src/shared/components/layout/DropdownMenu.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/ui/dropdown-menu'
+import { Button } from '@/shared/ui/button'
+import { Icon } from '@iconify/vue'
+
+import { ref } from 'vue'
+import ThemeProvider from '@/shared/components/providers/theme-provider.vue'
+
+const isDropdownOpen = ref(false)
+</script>
+
+<template>
+  <ThemeProvider v-slot="{ toggleTheme }">
+    <DropdownMenu v-model:open="isDropdownOpen">
+      <DropdownMenuTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
+        >
+          <span class="relative h-4 w-4">
+            <Icon
+              icon="radix-icons:hamburger-menu"
+              class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
+            />
+            <Icon
+              icon="radix-icons:cross-1"
+              class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
+            />
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-auto" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            @click="
+              () => {
+                toggleTheme()
+              }
+            "
+            @select.prevent
+            class="relative flex items-center justify-start"
+          >
+            <span class="relative mr-2 h-4 w-4">
+              <Icon
+                icon="radix-icons:moon"
+                class="absolute inset-0 scale-100 opacity-100 dark:scale-0 dark:opacity-0"
+              />
+              <Icon
+                icon="radix-icons:sun"
+                class="absolute inset-0 scale-0 opacity-0 dark:scale-100 dark:opacity-100"
+              />
+            </span>
+            <span>Toggle theme</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem as-child>
+            <a
+              href="https://github.com/ivanskv2000/evsy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center"
+            >
+              <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
+              <span>GitHub source</span>
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem as-child>
+            <a
+              href="https://buymeacoffee.com/ivanskv2000"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center"
+            >
+              <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
+              <span>Buy me a coffee</span>
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </ThemeProvider>
+</template>
diff --git a/frontend/src/shared/components/layout/LoveFooter.vue b/frontend/src/shared/components/layout/LoveFooter.vue
new file mode 100644
index 0000000..51ed39c
--- /dev/null
+++ b/frontend/src/shared/components/layout/LoveFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+  <footer
+    class="bg-background drop-shadow-accent text-muted-foreground border-t py-3 text-center text-xs"
+  >
+    Made with <Icon icon="radix-icons:heart-filled" class="h-lh w-lh inline" /> by
+    <a
+      href="https://github.com/ivanskv2000"
+      target="_blank"
+      class="hover:text-primary underline underline-offset-2 transition-colors"
+      >ivanskv2000</a
+    >
+  </footer>
+</template>
diff --git a/frontend/src/shared/components/layout/MainLayout.vue b/frontend/src/shared/components/layout/MainLayout.vue
index 39e7ceb..18418cb 100644
--- a/frontend/src/shared/components/layout/MainLayout.vue
+++ b/frontend/src/shared/components/layout/MainLayout.vue
@@ -1,132 +1,31 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import { Button } from '@/shared/ui/button'
-import { Icon } from '@iconify/vue'
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-} from '@/shared/ui/navigation-menu'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/shared/ui/dropdown-menu'
-import ThemeProvider from '@/shared/components/providers/theme-provider.vue'
+import MainLogo from '@/shared/components/layout/MainLogo.vue'
+import NavigationMenu from '@/shared/components/layout/NavigationMenu.vue'
+import DropdownMenu from '@/shared/components/layout/DropdownMenu.vue'
+import LoveFooter from './LoveFooter.vue'
 </script>
 
 <template>
-  <div class="bg-background min-h-screen">
+  <div class="bg-background flex min-h-screen flex-col">
     <!-- Header -->
-    <header class="bg-background sticky top-0 z-50 w-full border-b">
+    <header class="bg-background drop-shadow-accent sticky top-0 z-50 w-full border-b">
       <div class="container flex h-14 items-center">
         <div class="flex">
-          <RouterLink to="/" class="mr-6">
-            <span class="font-handwritten text-xl">Evsy</span>
-          </RouterLink>
-
-          <NavigationMenu>
-            <NavigationMenuList>
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/events">Events</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/fields">Fields</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/tags">Tags</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-            </NavigationMenuList>
-          </NavigationMenu>
+          <MainLogo />
+          <NavigationMenu />
         </div>
         <div class="flex flex-1 items-center justify-end space-x-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
-              >
-                <span class="relative h-4 w-4">
-                  <Icon
-                    icon="radix-icons:hamburger-menu"
-                    class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
-                  />
-                  <Icon
-                    icon="radix-icons:cross-1"
-                    class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
-                  />
-                </span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent class="w-auto" align="end">
-              <DropdownMenuGroup>
-                <ThemeProvider v-slot="{ toggleTheme }">
-                  <DropdownMenuItem
-                    @click="toggleTheme"
-                    @select.prevent
-                    class="relative flex items-center justify-start"
-                  >
-                    <span class="relative mr-2 h-4 w-4">
-                      <Icon
-                        icon="radix-icons:moon"
-                        class="absolute inset-0 scale-100 rotate-0 transform opacity-100 transition duration-300 ease-in-out dark:scale-0 dark:-rotate-90 dark:opacity-0"
-                      />
-                      <Icon
-                        icon="radix-icons:sun"
-                        class="absolute inset-0 scale-0 rotate-90 transform opacity-0 transition duration-300 ease-in-out dark:scale-100 dark:rotate-0 dark:opacity-100"
-                      />
-                    </span>
-                    <span>Toggle theme</span>
-                  </DropdownMenuItem>
-                </ThemeProvider>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem as-child>
-                  <a
-                    href="https://github.com/ivanskv2000/evsy"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="flex items-center"
-                  >
-                    <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
-                    <span>GitHub source</span>
-                  </a>
-                </DropdownMenuItem>
-                <DropdownMenuItem as-child>
-                  <a
-                    href="https://buymeacoffee.com/ivanskv2000"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="flex items-center"
-                  >
-                    <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
-                    <span>Buy me a coffee</span>
-                  </a>
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <DropdownMenu />
         </div>
       </div>
     </header>
 
     <!-- Main Content -->
-    <main class="container py-6">
+    <main class="container flex-1 py-6">
       <slot />
     </main>
+
+    <!-- Sticky Footer -->
+    <LoveFooter />
   </div>
 </template>
diff --git a/frontend/src/shared/components/layout/MainLogo.vue b/frontend/src/shared/components/layout/MainLogo.vue
new file mode 100644
index 0000000..87acb6b
--- /dev/null
+++ b/frontend/src/shared/components/layout/MainLogo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <RouterLink to="/" class="mr-6">
+    <span class="font-handwritten text-xl">Evsy</span>
+  </RouterLink>
+</template>
diff --git a/frontend/src/shared/components/layout/NavigationMenu.vue b/frontend/src/shared/components/layout/NavigationMenu.vue
new file mode 100644
index 0000000..620732d
--- /dev/null
+++ b/frontend/src/shared/components/layout/NavigationMenu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from '@/shared/ui/navigation-menu'
+</script>
+
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/events">Events</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/fields">Fields</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/tags">Tags</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/frontend/src/shared/components/providers/theme-provider.vue b/frontend/src/shared/components/providers/theme-provider.vue
index 40189a3..412ff10 100644
--- a/frontend/src/shared/components/providers/theme-provider.vue
+++ b/frontend/src/shared/components/providers/theme-provider.vue
@@ -3,15 +3,14 @@ import { provide } from 'vue'
 import { useColorMode } from '@vueuse/core'
 
 const theme = useColorMode({
-  attribute: 'class', // <- key part
-  selector: 'html', // <- ensure it adds `class="dark"` to <html>
+  attribute: 'class',
+  selector: 'html',
   emitAuto: false,
   storageKey: 'theme',
-  disableTransition: false, // <- ensure transitions aren't skipped
+  disableTransition: true,
 })
 
 const toggleTheme = () => {
-  // disableTransitionsTemporarily()
   theme.value = theme.value === 'light' ? 'dark' : 'light'
 }
 
diff --git a/frontend/src/shared/composables/useDataTable.ts b/frontend/src/shared/composables/useDataTable.ts
index 5439cf4..681ba2d 100644
--- a/frontend/src/shared/composables/useDataTable.ts
+++ b/frontend/src/shared/composables/useDataTable.ts
@@ -8,6 +8,8 @@ import type {
 } from '@tanstack/vue-table'
 import {
   getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
   getSortedRowModel,
   getPaginationRowModel,
   getFilteredRowModel,
@@ -53,6 +55,8 @@ export function useDataTable<TData, TValue>({
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
     onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
     onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
     onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
diff --git a/frontend/src/shared/ui/command/Command.vue b/frontend/src/shared/ui/command/Command.vue
new file mode 100644
index 0000000..ec2d915
--- /dev/null
+++ b/frontend/src/shared/ui/command/Command.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score) itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(
+  () => filterState.search,
+  () => {
+    filterItems()
+  }
+)
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandDialog.vue b/frontend/src/shared/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..a3b9940
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandDialog.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = withDefaults(
+  defineProps<
+    DialogRootProps & {
+      title?: string
+      description?: string
+    }
+  >(),
+  {
+    title: 'Command Palette',
+    description: 'Search for a command to run...',
+  }
+)
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogHeader class="sr-only">
+      <DialogTitle>{{ title }}</DialogTitle>
+      <DialogDescription>{{ description }}</DialogDescription>
+    </DialogHeader>
+    <DialogContent class="overflow-hidden p-0">
+      <Command>
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandEmpty.vue b/frontend/src/shared/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..ad899c7
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandEmpty.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { Primitive } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandGroup.vue b/frontend/src/shared/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..f298bf8
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandGroup.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<
+  ListboxGroupProps & {
+    class?: HTMLAttributes['class']
+    heading?: string
+  }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandInput.vue b/frontend/src/shared/ui/command/CommandInput.vue
new file mode 100644
index 0000000..291ebb0
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandInput.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from '@/shared/utils/general'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<
+  ListboxFilterProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div data-slot="command-input-wrapper" class="flex items-center gap-2 border-b px-3">
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandItem.vue b/frontend/src/shared/ui/command/CommandItem.vue
new file mode 100644
index 0000000..c18a7bd
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandItem.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement)) return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    } else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+    @select="
+      () => {
+        filterState.search = ''
+      }
+    "
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandList.vue b/frontend/src/shared/ui/command/CommandList.vue
new file mode 100644
index 0000000..5f7d6c3
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandSeparator.vue b/frontend/src/shared/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..efa7e85
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { Separator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandShortcut.vue b/frontend/src/shared/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..b1813ee
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/utils/general'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/shared/ui/command/index.ts b/frontend/src/shared/ui/command/index.ts
new file mode 100644
index 0000000..5262f53
--- /dev/null
+++ b/frontend/src/shared/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number; items: Map<string, number>; groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/frontend/src/shared/ui/input/Input.vue b/frontend/src/shared/ui/input/Input.vue
index d3f2f85..0b2f074 100644
--- a/frontend/src/shared/ui/input/Input.vue
+++ b/frontend/src/shared/ui/input/Input.vue
@@ -26,7 +26,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     :class="
       cn(
         'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:border focus-visible:ring-0 focus-visible:outline-none',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         props.class
       )
diff --git a/frontend/src/shared/ui/separator/Separator.vue b/frontend/src/shared/ui/separator/Separator.vue
new file mode 100644
index 0000000..d276ce2
--- /dev/null
+++ b/frontend/src/shared/ui/separator/Separator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/utils/general'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator, type SeparatorProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'horizontal',
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="separator-root"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
+        props.class
+      )
+    "
+  />
+</template>
diff --git a/frontend/src/shared/ui/separator/index.ts b/frontend/src/shared/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/frontend/src/shared/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/frontend/src/shared/ui/table/TableRow.vue b/frontend/src/shared/ui/table/TableRow.vue
index c761a2b..afb8521 100644
--- a/frontend/src/shared/ui/table/TableRow.vue
+++ b/frontend/src/shared/ui/table/TableRow.vue
@@ -11,10 +11,7 @@ const props = defineProps<{
   <tr
     data-slot="table-row"
     :class="
-      cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-[var(--transition-bg-color)]',
-        props.class
-      )
+      cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)
     "
   >
     <slot />