diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index a378c6f..b8ae4d4 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { type DirectoryItem } from '@/types/directory'
 import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card'
 
 defineProps<{
   item: DirectoryItem
@@ -16,8 +23,8 @@ const categoryColors = {
 </script>
 
 <template>
-  <div class="rounded-lg border bg-card text-card-foreground shadow-sm hover:shadow-md transition-shadow">
-    <div class="p-6 space-y-4">
+  <Card class="hover:shadow-md transition-shadow">
+    <CardContent class="p-6 space-y-4">
       <!-- Image -->
       <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
         <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
@@ -26,15 +33,15 @@ const categoryColors = {
       <!-- Content -->
       <div class="space-y-3">
         <div class="flex items-start justify-between">
-          <h3 class="font-semibold text-lg">{{ item.name }}</h3>
+          <CardTitle>{{ item.name }}</CardTitle>
           <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
             {{ item.category }}
           </span>
         </div>
 
-        <p class="text-sm text-muted-foreground">
+        <CardDescription>
           {{ item.description }}
-        </p>
+        </CardDescription>
 
         <!-- Contact Info -->
         <div class="space-y-2">
@@ -78,6 +85,6 @@ const categoryColors = {
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </CardContent>
+  </Card>
 </template>