diff --git a/src/components/directory/DirectoryFilter.vue b/src/components/directory/DirectoryFilter.vue
index bff6f59..9bf0fe2 100644
--- a/src/components/directory/DirectoryFilter.vue
+++ b/src/components/directory/DirectoryFilter.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Search } from 'lucide-vue-next'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
 
 const props = defineProps<{
   category: string
@@ -28,30 +30,27 @@ const categories = [
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <Search class="h-5 w-5 text-muted-foreground" />
       </div>
-      <input
+      <Input
         type="text"
         :value="search"
         @input="emit('update:search', ($event.target as HTMLInputElement).value)"
-        class="block w-full rounded-md border-input pl-10 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        class="pl-10"
         placeholder="Search businesses..."
       />
     </div>
 
     <!-- Category Filter -->
     <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
-      <button
+      <Button
         v-for="cat in categories"
         :key="cat.id"
         @click="emit('update:category', cat.id)"
-        class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors"
-        :class="[
-          category === cat.id
-            ? 'bg-primary text-primary-foreground'
-            : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
-        ]"
+        :variant="category === cat.id ? 'default' : 'secondary'"
+        size="sm"
+        class="rounded-full"
       >
         {{ cat.label }}
-      </button>
+      </Button>
     </div>
   </div>
 </template> 
\ No newline at end of file