diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
new file mode 100644
index 0000000..b4affe5
--- /dev/null
+++ b/src/components/directory/DirectoryCard.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { type DirectoryItem } from '@/types/directory'
+import { MapPin, Phone, ExternalLink } from 'lucide-vue-next'
+
+defineProps<{
+  item: DirectoryItem
+}>()
+
+const categoryColors = {
+  restaurant: 'bg-orange-100 text-orange-800',
+  taxi: 'bg-yellow-100 text-yellow-800',
+  ferry: 'bg-blue-100 text-blue-800',
+  retail: 'bg-green-100 text-green-800',
+  other: 'bg-gray-100 text-gray-800'
+}
+</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">
+      <!-- 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"
+        />
+      </div>
+      
+      <!-- Content -->
+      <div class="space-y-3">
+        <div class="flex items-start justify-between">
+          <h3 class="font-semibold text-lg">{{ item.name }}</h3>
+          <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">
+          {{ item.description }}
+        </p>
+
+        <!-- Contact Info -->
+        <div class="space-y-2">
+          <div v-if="item.address" class="flex items-center text-sm">
+            <MapPin class="mr-2 h-4 w-4" />
+            <span>{{ item.address }}</span>
+          </div>
+          
+          <div v-if="item.contact" class="flex items-center text-sm">
+            <Phone class="mr-2 h-4 w-4" />
+            <span>{{ item.contact }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/src/components/directory/DirectoryGrid.vue b/src/components/directory/DirectoryGrid.vue
new file mode 100644
index 0000000..0a1748b
--- /dev/null
+++ b/src/components/directory/DirectoryGrid.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DirectoryCard from './DirectoryCard.vue'
+import { type DirectoryItem } from '@/types/directory'
+import DirectoryFilter from './DirectoryFilter.vue'
+
+const selectedCategory = ref<string>('all')
+const searchQuery = ref('')
+
+const props = defineProps<{
+  items: DirectoryItem[]
+}>()
+
+const filteredItems = computed(() => {
+  return props.items.filter(item => {
+    const matchesCategory = selectedCategory.value === 'all' || item.category === selectedCategory.value
+    const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                         item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+    return matchesCategory && matchesSearch
+  })
+})
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <!-- Filters -->
+    <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
+      <DirectoryFilter 
+        v-model:category="selectedCategory"
+        v-model:search="searchQuery"
+      />
+    </div>
+
+    <!-- Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <DirectoryCard
+        v-for="item in filteredItems"
+        :key="item.id"
+        :item="item"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div 
+      v-if="filteredItems.length === 0"
+      class="text-center py-12"
+    >
+      <p class="text-lg text-muted-foreground">
+        No results found. Try adjusting your filters.
+      </p>
+    </div>
+  </div>
+</template> 
\ No newline at end of file