diff --git a/assets/css/layout.css b/assets/css/layout.css
index a9afe8b..5a278be 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -52,7 +52,7 @@ pre code {
 main {
   display: block;
   max-width: 728px;
-  margin: 12rem auto;
+  margin: 12rem auto 24rem auto;
 }
 
 main header {
@@ -64,26 +64,65 @@ main header h1 {
   margin-bottom: 1.6rem;
 }
 
-p.meta {
+main header .meta {
   display: flex;
   column-gap: 1rem;
 }
 
-p.meta .content {
+main header .meta .content {
   display: flex;
   flex-direction: column;
   font-size: 0.875rem;
   line-height: 1.6rem;
 }
 
-p.meta .name a {
+main header .meta .name a {
   text-decoration: none;
 }
 
-.article-list .item {
+main .article-list .item {
   margin-bottom: 3rem;
 }
 
-.article-list .item h3 {
+main .article-list .item h3 {
   margin-bottom: 1rem;
 }
+
+main article footer {
+  margin-top: 5rem;
+}
+
+/* Dropdown menu */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-button {
+  font-family: "Merriweather", serif;
+  font-size: 0.875rem;
+  padding: 0.6rem 1rem;
+  border: 1px solid;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  border-radius: 5px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  padding: 0.6rem 1rem;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
diff --git a/assets/css/themes/default-light.css b/assets/css/themes/default-light.css
index 687c02c..7cbb4ba 100644
--- a/assets/css/themes/default-light.css
+++ b/assets/css/themes/default-light.css
@@ -25,10 +25,35 @@ pre code {
   color: #ccc;
 }
 
-p.meta .date {
+main header .meta .date {
   color: #888;
 }
 
-p.meta .name a {
+main header .meta .name a {
   color: #3b3a38;
 }
+
+/* Dropdown menu */
+
+.dropdown-button {
+  background-color: #f5f2eb;
+  color: #3b3a38;
+  border-color: #ccc;
+}
+
+.dropdown-content {
+  background-color: #fff;
+}
+
+.dropdown-content a {
+  color: #3b3a38 !important;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-button {
+  background-color: #fff;
+  border-color: #fff;
+}
diff --git a/html.ts b/html.ts
index a825e44..000348d 100644
--- a/html.ts
+++ b/html.ts
@@ -2,7 +2,7 @@ import { localizeDate } from "./dates.ts";
 import Article from "./models/article.ts";
 import Profile from "./models/profile.ts";
 
-export function htmlLayout(title: string, body: string, profile: Profile) {
+function htmlLayout(title: string, body: string, profile: Profile): string {
   return `
     <!DOCTYPE html>
     <html>
@@ -22,29 +22,34 @@ export function htmlLayout(title: string, body: string, profile: Profile) {
   `;
 }
 
-export function articleHtml(article: Article, profile: Profile) {
+export function articleHtml(article: Article, profile: Profile): string {
   const publishedAtFormatted = localizeDate(article.publishedAt);
 
   const body = `
     <main>
       <header>
         <h1>${article.title}</h1>
-        <p class="meta">
+        <div class="meta">
           <img class="avatar" src="${profile.picture}" alt="User Avatar" />
-          <span class="content">
+          <div class="content">
             <span class="name"><a href="/@${profile.username}">${profile.name}</a></span>
             <span class="date">${publishedAtFormatted}</span>
-          </span>
-        </p>
+          </div>
+        </div>
       </header>
-      ${article.html}
+      <article>
+        ${article.html}
+        <footer>
+          ${openWithNostrAppHtml(article.naddr)}
+        </footer>
+      </article>
     </main>
   `;
 
   return htmlLayout(article.title, body, profile);
 }
 
-function articleListItemHtml(article: Article) {
+function articleListItemHtml(article: Article): string {
   const formattedDate = localizeDate(article.publishedAt);
 
   return `
@@ -55,7 +60,7 @@ function articleListItemHtml(article: Article) {
   `;
 }
 
-export function articleListHtml(articles: Article[]) {
+export function articleListHtml(articles: Article[]): string {
   if (articles.length === 0) return "";
   let html = "";
 
@@ -71,7 +76,7 @@ export function articleListHtml(articles: Article[]) {
   `;
 }
 
-export function profilePageHtml(profile: Profile, articles: Article[]) {
+export function profilePageHtml(profile: Profile, articles: Article[]): string {
   const title = `${profile.name} on Nostr`;
 
   const body = `
@@ -91,3 +96,29 @@ export function profilePageHtml(profile: Profile, articles: Article[]) {
 
   return htmlLayout(title, body, profile);
 }
+
+function openWithNostrAppHtml(bech32Id): string {
+  let linksHtml = "";
+  const links = [
+    { title: "Nostr Link", href: `nostr:${bech32Id}` },
+    { title: "Habla", href: `https://habla.news/a/${bech32Id}` },
+    {
+      title: "noStrudel",
+      href: `https://nostrudel.ninja/#/articles/${bech32Id}`,
+    },
+    { title: "Coracle", href: `https://coracle.social/${bech32Id}` }
+  ];
+
+  for (const link of links) {
+    linksHtml += `<a href="${link.href}" target="_blank">${link.title}</a>`;
+  }
+
+  return `
+    <div class="open-with dropdown">
+      <button class="dropdown-button">Open with Nostr app</button>
+      <div class="dropdown-content">
+        ${linksHtml}
+      </div>
+    </div>
+  `;
+}
diff --git a/models/article.ts b/models/article.ts
index 66d5df4..37edef1 100644
--- a/models/article.ts
+++ b/models/article.ts
@@ -16,7 +16,7 @@ export default class Article {
   }
 
   get url(): string {
-    return `${config.base_url}/${this.naddr}`
+    return `${config.base_url}/${this.naddr}`;
   }
 
   get title(): string {
