diff --git a/src/components/embeds/GIFPlayer.svelte b/src/components/embeds/GIFPlayer.svelte
index 9ec72ca..9aa886a 100644
--- a/src/components/embeds/GIFPlayer.svelte
+++ b/src/components/embeds/GIFPlayer.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
-  let { gifURL, staticURL, alt }: { gifURL: string, staticURL: string, alt: string | undefined } = $props();
+  import { truncateText } from '../../utils.js';
 
+  type Props = {
+    gifURL: string;
+    staticURL: string;
+    title: string | undefined;
+    description: string | undefined;
+  };
+
+  let { gifURL, staticURL, title, description }: Props = $props();
+
+  let showsPlaceholder = $state(true);
   let loaded = $state(false);
   let paused = $state(false);
 
   let maxWidth = $state(500);
   let maxHeight = $state(200);
 
+  function showGIF() {
+    showsPlaceholder = false;
+  }
+
   function onload(e: Event) {
     let img = e.target as HTMLImageElement;
 
@@ -23,18 +37,83 @@
   }
 </script>
 
-<div class="gif">
-  <img src={paused ? staticURL : gifURL}
-    class={paused ? 'static' : ''}
-    alt={alt ? `Gif: ${alt}` : `Gif animation`}
-    {onload}
-    {onclick}
-    style:opacity={loaded ? 1 : 0}
-    style:max-width="{maxWidth}px"
-    style:max-height="{maxHeight}px">
-</div>
+{#if !showsPlaceholder}
+  <div class="gif">
+    <button class="gif-toggle" type="button" aria-label={paused ? 'Play GIF' : 'Pause GIF'} {onclick}>
+      <img src={paused ? staticURL : gifURL}
+        class={paused ? 'static' : ''}
+        alt={title ? `GIF: ${title}` : "GIF animation"}
+        {onload}
+        style:opacity={loaded ? 1 : 0}
+        style:max-width="{maxWidth}px"
+        style:max-height="{maxHeight}px">
+    </button>
+  </div>
+{:else}
+  <button class="gif-card" type="button" onclick={showGIF}>
+    <div>
+      <h2>{title}</h2>
+
+      {#if description}
+        <p class="description">{truncateText(description, 300)}</p>
+      {/if}
+    </div>
+  </button>
+{/if}
 
 <style>
+  .gif-toggle {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .gif-card {
+    appearance: none;
+    text-align: left;
+    display: block;
+    background: none;
+    border: 0;
+    padding: 0;
+    max-width: 500px;
+    margin-bottom: 12px;
+    cursor: pointer;
+  }
+
+  .gif-card > div {
+    background-color: #fcfcfd;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+    padding: 11px 15px;
+  }
+
+  .gif-card:hover > div {
+    background-color: #f6f7f8;
+    border: 1px solid #c8c8c8;
+  }
+
+  .gif-card > div:not(:has(p.description)) {
+    padding-bottom: 14px;
+  }
+
+  .gif-card h2 {
+    color: #333;
+    font-size: 12pt;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .gif-card p.description {
+    color: #666;
+    font-size: 11pt;
+    margin-top: 8px;
+    margin-bottom: 4px;
+    line-height: 135%;
+    white-space: pre-line;
+  }
+
   .gif img {
     user-select: none;
     -webkit-user-select: none;
@@ -43,4 +122,24 @@
   .gif img.static {
     opacity: 0.75;
   }
+
+  @media (prefers-color-scheme: dark) {
+    .gif-card > div {
+      background-color: #303030;
+      border-color: #606060;
+    }
+
+    .gif-card:hover > div {
+      background-color: #383838;
+      border-color: #707070;
+    }
+
+    .gif-card h2 {
+      color: #ccc;
+    }
+
+    .gif-card p.description {
+      color: #888;
+    }
+  }
 </style>
diff --git a/src/components/embeds/LinkComponent.svelte b/src/components/embeds/LinkComponent.svelte
index 286a8f3..8236294 100644
--- a/src/components/embeds/LinkComponent.svelte
+++ b/src/components/embeds/LinkComponent.svelte
@@ -9,9 +9,8 @@
   let { embed }: { embed: InlineLinkEmbed | RawLinkEmbed } = $props();
   let { post } = getPostContext();
 
-  let displayedGIF: { gif: string, thumb: string} | undefined = $state();
-
   let parsedURL = $derived(embed.url ? parseHTTPURL(embed.url) : undefined);
+  let isGIF = $derived(parsedURL ? GIF_DOMAINS.includes(parsedURL.hostname) : false);
 
   let thumbnailURL = $derived.by(() => {
     if (embed instanceof RawLinkEmbed && embed.thumb) {
@@ -23,20 +22,13 @@
 
     return undefined;
   });
-
-  function onClick(e: Event, url: URL) {
-    if (GIF_DOMAINS.includes(url.hostname) && thumbnailURL) {
-      e.preventDefault();
-      displayedGIF = { gif: url.href, thumb: thumbnailURL };
-    }
-  }
 </script>
 
-{#if displayedGIF}
-  <GIFPlayer gifURL={displayedGIF.gif} staticURL={displayedGIF.thumb} alt={embed.title} />
-{:else}
-  {#if parsedURL}
-    <a class="link-card" href={parsedURL.href} target="_blank" rel="noopener" onclick={(e) => onClick(e, parsedURL)}>
+{#if parsedURL}
+  {#if isGIF && thumbnailURL}
+    <GIFPlayer gifURL={parsedURL.href} staticURL={thumbnailURL} title={embed.title} description={embed.description} />
+  {:else}
+    <a class="link-card" href={parsedURL.href} target="_blank" rel="noopener">
       <div>
         <p class="domain">{parsedURL.hostname}</p>
         <h2>{embed.title || embed.url}</h2>
@@ -46,9 +38,9 @@
         {/if}
       </div>
     </a>
-  {:else}
-    <p>
-      [Link: {embed.url}]
-    </p>
   {/if}
+{:else}
+  <p>
+    [Link: {embed.url}]
+  </p>
 {/if}