diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index 008c2e9..a378c6f 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -53,16 +53,22 @@ const categoryColors = {
             <Phone class="h-4 w-4" />
             <span>{{ item.contact }}</span>
             <div v-if="item.contactType" class="flex gap-1">
-              <span v-if="item.contactType.includes('whatsapp')"
-                class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
+              <a v-if="item.contactType.includes('whatsapp')"
+                :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors">
                 <MessageCircle class="h-3 w-3" />
                 WhatsApp
-              </span>
-              <span v-if="item.contactType.includes('telegram')"
-                class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
+              </a>
+              <a v-if="item.contactType.includes('telegram')"
+                :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors">
                 <MessageCircle class="h-3 w-3" />
                 Telegram
-              </span>
+              </a>
             </div>
           </div>