diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 0000000..ddaf2d7
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.53 2.53027L8.5603 7.5L13.53 12.4697L12.4695 13.5303L7.49976 8.56055L2.53101 13.5303L1.47046 12.4697L6.43921 7.5L1.47046 2.53027L2.53101 1.46973L7.49976 6.43848L12.4695 1.46973L13.53 2.53027Z" fill="black"/>
+</svg>
diff --git a/src/components/ShareDialog.astro b/src/components/ShareDialog.astro
new file mode 100644
index 0000000..99ce4e3
--- /dev/null
+++ b/src/components/ShareDialog.astro
@@ -0,0 +1,293 @@
+---
+import { getLocaleFromUrl, useTranslations } from "@i18n";
+import { Image } from "astro:assets";
+import type { BlogData } from "src/content.config";
+import Clembs from "@assets/icons/clembs.svg";
+import Bluesky from "@assets/icons/bluesky.svg";
+import Twitter from "@assets/icons/twitter.svg";
+import Email from "@assets/icons/email.svg";
+import Copy from "@assets/icons/copy.svg";
+import Share from "@assets/icons/share.svg";
+
+type Props = {
+  post: BlogData;
+};
+
+const { post } = Astro.props;
+
+const lang = getLocaleFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const text = t(`blog.share_article_text`).replace("{title}", post.title);
+const url = Astro.url.pathname;
+---
+
+<script>
+  import Check from "@assets/icons/check.svg?raw";
+  import Copy from "@assets/icons/copy.svg?raw";
+
+  const copyButton = document.getElementById("copy-button");
+  const shareButton = document.getElementById("share-button");
+
+  copyButton?.addEventListener("click", () => {
+    let icon = copyButton.querySelector(".icon")!;
+    // let text = copyButton.querySelector(".small-text")!;
+
+    icon.innerHTML = Check;
+
+    setTimeout(() => {
+      icon.innerHTML = Copy;
+    }, 1500);
+
+    navigator.clipboard.writeText(window.location.href);
+  });
+
+  const postTitle = document.getElementById("post-title")!.innerText;
+
+  const shareData = {
+    title: postTitle,
+    url: window.location.href,
+  };
+
+  if (shareButton && "share" in navigator && navigator.canShare(shareData)) {
+    shareButton.setAttribute("aria-hidden", "false");
+    shareButton.setAttribute("data-hidden", "false");
+    shareButton.addEventListener("click", () => {
+      navigator.share(shareData);
+    });
+  }
+</script>
+
+<dialog id="share-dialog">
+  <span class="heading-1">{t("blog.share_article_modal_title")}</span>
+
+  <div id="share-preview-card">
+    {
+      post.bannerPath && (
+        <Image src={post.bannerPath} alt={post.bannerAlt || ""} />
+      )
+    }
+
+    <div id="share-preview-text">
+      <div class="site-title">
+        <Clembs /> clembs.com
+      </div>
+
+      <div id="post-title" class="clickable">{post.title}</div>
+
+      <p class="small-text">
+        {post.summary}
+      </p>
+    </div>
+  </div>
+
+  <div class="buttons">
+    <a
+      href={`https://bsky.app/intent/compose?text=${text} ${url}`}
+      class="button"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div class="icon">
+        <Bluesky />
+      </div>
+
+      <span class="small-text"> Bluesky </span>
+    </a>
+
+    <a
+      href={`https://twitter.com/intent/tweet?text=${text}&url=${url}&via=clembsv`}
+      class="button"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div class="icon">
+        <Twitter />
+      </div>
+      <span class="small-text"> Twitter </span>
+    </a>
+
+    <a
+      href={`mailto:?body=${text} ${url}`}
+      class="button"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div class="icon">
+        <Email />
+      </div>
+      <span class="small-text"> Email </span>
+    </a>
+
+    <button id="copy-button" class="button">
+      <div class="icon">
+        <Copy />
+      </div>
+      <span class="small-text"> {t("copy_link")} </span>
+    </button>
+
+    <button
+      id="share-button"
+      class="button"
+      data-hidden="true"
+      aria-hidden="true"
+    >
+      <div class="icon">
+        <Share />
+      </div>
+      <span class="small-text"> {t("other")} </span>
+    </button>
+  </div>
+</dialog>
+
+<style lang="scss">
+  #share-dialog {
+    flex-direction: column;
+    gap: 2rem;
+
+    margin: auto;
+    padding: 1.25rem 1.5rem;
+    max-width: 500px;
+    width: calc(100% - 1rem);
+
+    background-color: var(--color-white);
+    border-radius: 1.5rem;
+    border: 1px solid var(--color-700);
+    box-shadow: 0 2px 0 0 var(--color-700);
+
+    opacity: 0;
+    transform: translateY(1em);
+
+    transition:
+      opacity,
+      transform,
+      display allow-discrete,
+      overlay allow-discrete;
+    transition-duration: 500ms;
+
+    &[open] {
+      display: flex;
+      opacity: 1;
+      transform: scaleX(1);
+    }
+
+    &::backdrop {
+      opacity: 0;
+      background-color: color-mix(in srgb, var(--color-800) 50%, transparent);
+
+      transition:
+        opacity,
+        display allow-discrete,
+        overlay allow-discrete;
+      transition-duration: 250ms;
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: translateY(-1em);
+      }
+
+      &[open]::backdrop {
+        opacity: 0;
+        background-color: transparent;
+      }
+    }
+
+    #share-preview-card {
+      display: flex;
+      flex-direction: column;
+
+      background: var(--color-40);
+      border-radius: 1rem;
+
+      #share-preview-text {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        padding: 1rem;
+
+        .site-title {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: var(--color-600);
+          text-transform: uppercase;
+
+          :global(svg) {
+            height: 1.125rem;
+            width: 1.125rem;
+          }
+        }
+      }
+    }
+
+    .buttons {
+      display: flex;
+      gap: 2rem;
+      width: 100%;
+      justify-content: space-between;
+      margin: 0 -1.5rem;
+      padding: 0 1.5rem;
+      width: calc(100% + 3rem);
+
+      overflow-y: scroll;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .button {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        margin: -0.5rem;
+
+        appearance: none;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+
+        flex-shrink: 0;
+        white-space: nowrap;
+
+        &[data-hidden="true"] {
+          display: none;
+        }
+
+        @media (hover: hover) {
+          &:hover {
+            .icon {
+              background-color: var(--color-600);
+            }
+          }
+        }
+
+        .icon {
+          width: fit-content;
+          background-color: var(--color-500);
+          color: var(--color-white);
+          padding: 1rem;
+          border-radius: 99px;
+
+          :global(svg) {
+            width: 1.5rem;
+            height: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
index 5bd4b85..3f25018 100644
--- a/src/i18n/langs/en.ts
+++ b/src/i18n/langs/en.ts
@@ -3,6 +3,8 @@ export default {
   about: "about",
   now: "now",
   blog: "blog",
+  copy_link: "Copy link",
+  other: "Other",
   footer_legal_blurb: "All rights reserved.",
   "intro.tronche.alt": "My highly professional and whimsical face",
   "intro.eyebrow": "Hi, I'm Clément, welcome to my website!",
@@ -31,6 +33,8 @@ export default {
   "blog.available_in": "Available in",
   "blog.available_in_and": "and",
   "blog.share_article": "Share article",
+  "blog.share_article_modal_title": "Share this article",
+  "blog.share_article_text": "Read Clément Voisin's {title}:",
   "blog.view_project": "View project",
   "blog.edited_on": "Edited on",
   "blog.warning_unlocalized":
diff --git a/src/i18n/langs/fr.ts b/src/i18n/langs/fr.ts
index bf57835..75f17dc 100644
--- a/src/i18n/langs/fr.ts
+++ b/src/i18n/langs/fr.ts
@@ -5,6 +5,8 @@ export const fr: typeof en = {
   about: "à propos",
   now: "maintenant",
   blog: "blog",
+  copy_link: "Copier le lien",
+  other: "Autre",
   footer_legal_blurb: "Tous droits réservés.",
   "intro.tronche.alt": "Ma tête ulta professionnelle et pleine de joie",
   "intro.eyebrow": "Salut, c'est Clément. Bienvenue sur mon site !",
@@ -34,6 +36,8 @@ export const fr: typeof en = {
   "blog.available_in": "Disponible en",
   "blog.available_in_and": "et en",
   "blog.share_article": "Partager",
+  "blog.share_article_modal_title": "Partager cet article",
+  "blog.share_article_text": "Je lis {title} de Clément Voisin :",
   "blog.view_project": "Voir le projet",
   "blog.edited_on": "Édité le",
   "blog.warning_unlocalized":
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
index 20f7779..21bb9a7 100644
--- a/src/layouts/Blog.astro
+++ b/src/layouts/Blog.astro
@@ -7,6 +7,7 @@ import Layout from "./Layout.astro";
 import { Image } from "astro:assets";
 import { getLocaleFromUrl, getPostSlug, useTranslations } from "@i18n";
 import type { CollectionEntry } from "astro:content";
+import ShareDialog from "@components/ShareDialog.astro";
 
 type Props = {
   post: CollectionEntry<"blog">;
@@ -25,11 +26,27 @@ const lang = getLocaleFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
 
+<script>
+  const shareDialogButton = document.getElementById("share-dialog-button");
+  // if invoker API exists, no need to execute javascript
+  if (shareDialogButton && !("command" in shareDialogButton)) {
+    const shareDialog = document.getElementById(
+      "share-dialog"
+    ) as HTMLDialogElement;
+
+    shareDialogButton?.addEventListener("click", () => {
+      shareDialog.showModal();
+    });
+  }
+</script>
+
 <Layout
   title={post.data.title}
   description={post.data.summary}
   image={post.data.bannerPath}
 >
+  <ShareDialog post={post.data} />
+
   <div id="summary-header">
     <div class="text">
       <h1 transition:name={slug}>{post.data.title}</h1>
@@ -75,7 +92,13 @@ const t = useTranslations(lang);
           )
         }
 
-        <Button id="share-sheet" variant="secondary">
+        <!-- @ts-ignore using tech thats too advanced for the language server -->
+        <Button
+          id="share-dialog-button"
+          commandfor="share-dialog"
+          command="show-modal"
+          variant="secondary"
+        >
           <Share />
 
           <span class="label">