diff --git a/src/components/directory/DirectoryCard.vue b/src/components/directory/DirectoryCard.vue
index d3bd144..53be380 100644
--- a/src/components/directory/DirectoryCard.vue
+++ b/src/components/directory/DirectoryCard.vue
@@ -129,7 +129,12 @@ const socialColors = {
 
             <div v-if="item.lightning" class="flex items-center text-sm">
               <Zap class="mr-2 h-4 w-4 text-amber-500" />
-              <span>{{ item.lightning }}</span>
+              <a 
+                :href="`lightning:${item.lightning}`"
+                class="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {{ item.lightning }}
+              </a>
             </div>
 
             <!-- Website -->
diff --git a/src/components/directory/DirectoryItemDetail.vue b/src/components/directory/DirectoryItemDetail.vue
index 88544ff..9a133b3 100644
--- a/src/components/directory/DirectoryItemDetail.vue
+++ b/src/components/directory/DirectoryItemDetail.vue
@@ -136,7 +136,12 @@ const socialColors = {
           <!-- Lightning Address -->
           <div v-if="item.lightning" class="flex items-center gap-3 text-base">
             <Zap class="h-5 w-5 text-amber-500" />
-            <span>{{ item.lightning }}</span>
+            <a 
+              :href="`lightning:${item.lightning}`"
+              class="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {{ item.lightning }}
+            </a>
           </div>
         </div>