diff --git a/app/Services/MetaData.php b/app/Services/MetaData.php
new file mode 100644
index 000000000..e7950bc70
--- /dev/null
+++ b/app/Services/MetaData.php
@@ -0,0 +1,178 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Services;
+
+use DOMDocument;
+use Illuminate\Http\Client\ConnectionException;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
+
+final readonly class MetaData
+{
+    /**
+     * Fetch the Open Graph data for a given URL.
+     */
+    public function __construct(private string $url)
+    {
+        //
+    }
+
+    /**
+     * Fetch the parsed meta-data for the URL
+     *
+     * @return Collection<string, string>
+     */
+    public function fetch(): Collection
+    {
+        /** @var Collection<string, string> $cachedData */
+        $cachedData = Cache::remember(
+            Str::of($this->url)->slug()->prepend('preview_')->value(),
+            now()->addYear(),
+            fn (): Collection => $this->getData()
+        );
+
+        return $cachedData;
+    }
+
+    /**
+     * Get the meta-data for a given URL.
+     *
+     * @return Collection<string, string>
+     */
+    private function getData(): Collection
+    {
+        $data = collect();
+
+        try {
+            $response = Http::get($this->url);
+
+            if ($response->ok()) {
+                $data = $this->parse($response->body())
+                    ->filter(fn ($value): bool => $value !== '');
+            }
+        } catch (ConnectionException) {
+            // Catch but not capture the exception
+        }
+
+        return $data;
+    }
+
+    /**
+     * Fetch the oEmbed data for a given URL.
+     *
+     * @param  array<string, string>  $options
+     * @return Collection<string, string>
+     */
+    private function fetchOEmbed(string $service, array $options): Collection
+    {
+        $data = collect();
+
+        try {
+            $response = Http::get(
+                url: $service.'?url='.urlencode($this->url).'&'.http_build_query($options)
+            );
+
+            if ($response->ok()) {
+                $data = collect((array) $response->json())
+                    ->filter(fn ($value): bool => $value !== '');
+            }
+        } catch (ConnectionException) {
+            // Catch but not capture the exception
+        }
+
+        return $data;
+    }
+
+    /**
+     * Parse the response body for MetaData.
+     *
+     * @return Collection<string, string>
+     */
+    private function parse(string $content): Collection
+    {
+        $doc = new DOMDocument();
+        @$doc->loadHTML($content);
+
+        $interested_in = ['og', 'twitter'];
+        $allowed = ['title', 'description', 'keywords', 'image', 'site_name', 'url', 'type'];
+        $data = collect();
+        $metas = $doc->getElementsByTagName('meta');
+
+        if ($metas->count() > 0) {
+            foreach ($metas as $meta) {
+                if (mb_strtolower($meta->getAttribute('name')) === 'title') {
+                    $data->put('title', $meta->getAttribute('content'));
+                }
+
+                if (mb_strtolower($meta->getAttribute('name')) === 'description') {
+                    $data->put('description', $meta->getAttribute('content'));
+                }
+                if (mb_strtolower($meta->getAttribute('name')) === 'keywords') {
+                    $data->put('keywords', $meta->getAttribute('content'));
+                }
+
+                collect(['name', 'property'])
+                    ->map(fn ($name): string => $meta->getAttribute($name))
+                    ->filter(fn ($attribute): bool => in_array(explode(':', $attribute)[0], $interested_in))
+                    ->each(function ($attribute) use ($data, $allowed, $meta): void {
+                        $key = explode(':', $attribute)[1];
+                        if (! $data->has($key) && in_array($key, $allowed, true)) {
+                            $data->put($key, $meta->getAttribute('content'));
+                        }
+                    });
+            }
+        }
+
+        if ($data->has('site_name') && $data->get('site_name') === 'X (formerly Twitter)') {
+            $x = $this->fetchOEmbed(
+                service: 'https://publish.twitter.com/oembed',
+                options: [
+                    'dnt' => 'true',
+                    'omit_script' => 'true',
+                    'hide_thread' => 'true',
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]);
+            if ($x->isNotEmpty()) {
+                foreach ($x as $key => $value) {
+                    $data->put($key, $value);
+                }
+            }
+        }
+
+        if ($data->has('site_name') && $data->get('site_name') === 'Vimeo') {
+            $vimeo = $this->fetchOEmbed(
+                service: 'https://vimeo.com/api/oembed.json',
+                options: [
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]
+            );
+            if ($vimeo->isNotEmpty()) {
+                foreach ($vimeo as $key => $value) {
+                    $data->put($key, $value);
+                }
+            }
+        }
+
+        if ($data->has('site_name') && $data->get('site_name') === 'YouTube') {
+            $youtube = $this->fetchOEmbed(
+                service: 'https://www.youtube.com/oembed',
+                options: [
+                    'maxwidth' => '446',
+                    'maxheight' => '251',
+                ]);
+            if ($youtube->isNotEmpty()) {
+                foreach ($youtube as $key => $value) {
+                    $data->put($key, $value);
+                }
+            }
+        }
+
+        return $data->unique();
+    }
+}
diff --git a/app/Services/ParsableContentProviders/LinkProviderParsable.php b/app/Services/ParsableContentProviders/LinkProviderParsable.php
index 4539e2b6f..8764ca1af 100644
--- a/app/Services/ParsableContentProviders/LinkProviderParsable.php
+++ b/app/Services/ParsableContentProviders/LinkProviderParsable.php
@@ -5,6 +5,7 @@
 namespace App\Services\ParsableContentProviders;
 
 use App\Contracts\Services\ParsableContentProvider;
+use App\Services\MetaData;
 use Illuminate\Support\Str;
 
 final readonly class LinkProviderParsable implements ParsableContentProvider
@@ -37,6 +38,22 @@ function (array $matches): string {
 
                 $url = $isMail ? 'mailto:'.$humanUrl : $url;
 
+                if (! $isMail && $url) {
+                    $service = new MetaData($url);
+                    $metadata = $service->fetch();
+
+                    if ($metadata->isNotEmpty() && ($metadata->has('image') || $metadata->has('html'))) {
+                        $trimmed = trim(
+                            view('components.link-preview-card', [
+                                'data' => $metadata,
+                                'url' => $url,
+                            ])->render()
+                        );
+
+                        return (string) preg_replace('/<!--(.|\s)*?-->/', '', $trimmed);
+                    }
+                }
+
                 return '<a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="'.$url.'">'.$humanUrl.'</a>';
             },
             str_replace('&amp;', '&', $content)
diff --git a/resources/js/theme-switch.js b/resources/js/theme-switch.js
index 1c13eb19f..58e5d2b07 100644
--- a/resources/js/theme-switch.js
+++ b/resources/js/theme-switch.js
@@ -1,26 +1,60 @@
 const themeSwitch = () => ({
-
     theme: 'system',
+    currentTheme: null,
 
     init() {
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
 
-        const currentTheme = localStorage.getItem('theme') || this.theme;
-
-        this.setTheme(currentTheme);
+        const savedTheme = localStorage.getItem('theme') || this.theme;
+        this.setTheme(savedTheme);
     },
 
     setTheme(theme) {
-        this.theme = theme
+        this.theme = theme;
 
-        if (theme == 'dark' || theme == 'light') {
-            localStorage.setItem('theme', theme)
+        if (theme === 'dark' || theme === 'light') {
+            localStorage.setItem('theme', theme);
         } else {
             localStorage.removeItem('theme');
         }
 
-        updateTheme();
+        this.updateTheme();
+    },
+
+    getCurrentTheme() {
+        if (this.theme === 'system') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return this.theme;
+    },
+
+    updateTheme() {
+        const newTheme = this.getCurrentTheme();
+
+        document.documentElement.classList.remove('dark', 'light');
+        document.documentElement.classList.add(newTheme);
+
+        if (this.currentTheme !== newTheme) {
+            this.currentTheme = newTheme;
+            this.renderTweets(newTheme);
+        }
+    },
+
+    renderTweets(theme) {
+        const tweetContainers = document.querySelectorAll('div[data-tweet-id]');
+
+        if (tweetContainers.length > 0) {
+            tweetContainers.forEach(container => {
+                container.innerHTML = '';
+
+                window.twttr.widgets.createTweet(container.dataset.tweetId, container, {
+                    theme: theme,
+                    conversation: 'none',
+                    align: 'center',
+                });
+            });
+        }
     },
-})
+});
 
-export { themeSwitch }
+export { themeSwitch };
diff --git a/resources/views/components/link-preview-card.blade.php b/resources/views/components/link-preview-card.blade.php
new file mode 100644
index 000000000..a800c8383
--- /dev/null
+++ b/resources/views/components/link-preview-card.blade.php
@@ -0,0 +1,42 @@
+<div
+    id="link-preview-card"
+    data-url="{{ $url }}"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+@if ($data->has('html'))
+    @if ($data->get('site_name') === 'X (formerly Twitter)')
+        @php($tweetId = explode('/', $url))
+        <div data-tweet-id="{{ end($tweetId) }}" class="w-full overflow-hidden">
+            {!! $data->get('html') !!}
+        </div>
+    @else
+        <div class="w-full overflow-hidden rounded-lg border border-slate-300 dark:border-0">
+            {!! $data->get('html') !!}
+        </div>
+    @endif
+@elseif($data->has('image'))
+    @php($shortUrl = parse_url($url)['host'])
+    <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: {{ $shortUrl }}"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="{{ $data->get('image') }}"
+                        alt="{{ $data->get('title') ?? $url }}"
+                        class="object-cover object-center w-full h-56"
+                    />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        {{ $data->get('title') ?? $data->get('site_name') ?? $url }}</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: {{ $shortUrl}}</a>
+        </div>
+@endif
+</div>
diff --git a/resources/views/layouts/components/head.blade.php b/resources/views/layouts/components/head.blade.php
index 7d3d00a69..9c0ccd4a6 100644
--- a/resources/views/layouts/components/head.blade.php
+++ b/resources/views/layouts/components/head.blade.php
@@ -207,6 +207,8 @@
     }
 </style>
 
+<script id="twitter-widget" async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
 <script>
     function isDarkTheme() {
         return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index 1cbae092d..ff5de8985 100644
--- a/resources/views/livewire/questions/show.blade.php
+++ b/resources/views/livewire/questions/show.blade.php
@@ -318,6 +318,20 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                             >
                                 <x-heroicon-o-link class="size-4" />
                             </button>
+                            @php
+                                $sharableQuestion = str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content);
+                                $link = null;
+
+                                if (preg_match('/<div\s+id="link-preview-card"[^>]*>(.*)<\/div>(?!.*<\/div>)/si', $sharableQuestion, $matches)) {
+                                    $linkPreviewCard = $matches[0];
+
+                                    if (preg_match('/data-url="([^"]*)"/', $linkPreviewCard, $urlMatches)) {
+                                        $link = " {$urlMatches[1]} ";
+                                    }
+                                }
+
+                                $sharable = $link ? str_replace($linkPreviewCard, $link, $sharableQuestion) : $sharableQuestion;
+                            @endphp
                             <button
                                 data-navigate-ignore="true"
                                 x-cloak
@@ -325,7 +339,7 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                                 x-on:click="
                                     twitter({
                                         url: '{{ route('questions.show', ['username' => $question->to->username, 'question' => $question]) }}',
-                                        question: '{{ str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content) }}',
+                                        question: '{{ $sharable }}',
                                         message: '{{ $question->isSharedUpdate() ? 'See it on Pinkary' : 'See response on Pinkary' }}',
                                     })
                                 "
@@ -377,6 +391,7 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                 </div>
             </div>
         </x-modal>
+
     @elseif (auth()->user()?->is($user))
         <livewire:questions.edit
             :questionId="$question->id"
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap
new file mode 100644
index 000000000..0c17ab3a1
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/it_ignores_mention_inside__a_.snap
@@ -0,0 +1,29 @@
+<div
+    id="link-preview-card"
+    data-url="https://pinkary.com/<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+        <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: pinkary.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://pinkary.com/storage/avatars/120f8d175fd0146ca0541625b8bd6c742e838632951a7e58dc7fbdc8c2170c4f.png"
+                        alt="Nuno Maduro (@nunomaduro) / Pinkary"
+                        class="object-cover object-center w-full h-56"
+                    />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Nuno Maduro (@nunomaduro) / Pinkary</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://pinkary.com/@nunomaduro" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: pinkary.com</a>
+        </div>
+
+</div>
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap
new file mode 100644
index 000000000..25f8f2fb8
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/link.snap
@@ -0,0 +1 @@
+Sure, here is the link: <a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://example.com">example.com</a>. Let me know if you have any questions.
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap
new file mode 100644
index 000000000..1edebaa07
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/mention.snap
@@ -0,0 +1 @@
+<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>, let me know if you have any questions. Thanks <a href="/@xiCO2k" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@xiCO2k</a>.
\ No newline at end of file
diff --git a/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap b/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap
new file mode 100644
index 000000000..2b2f09667
--- /dev/null
+++ b/tests/.pest/snapshots/Unit/Services/ContentTest/only_links_with_images_or_html_oEmbeds_are_parsed.snap
@@ -0,0 +1,29 @@
+Sure, here is the link: <div
+    id="link-preview-card"
+    data-url="https://laravel.com"
+    class="mx-auto mt-2 min-w-full group/preview" data-navigate-ignore="true"
+>
+        <a href="https://laravel.com" target="_blank" rel="noopener noreferrer">
+        <div
+            title="Click to visit: laravel.com"
+            class="relative w-full bg-slate-100/90 border border-slate-300
+            dark:border-0 rounded-lg dark:group-hover/preview:border-0 overflow-hidden">
+                    <img
+                        src="https://laravel.com/img/og-image.jpg"
+                        alt="Laravel - The PHP Framework For Web Artisans"
+                        class="object-cover object-center w-full h-56"
+                    />
+                <div
+                    class="absolute right-0 bottom-0 left-0 w-full rounded-b-lg border-0 bg-pink-100 bg-opacity-75 p-2 backdrop-blur-sm backdrop-filter dark:bg-opacity-45 dark:bg-pink-800">
+                    <h3 class="text-sm font-semibold truncate text-slate-500/90 dark:text-white/90
+                    ">
+                        Laravel - The PHP Framework For Web Artisans</h3>
+                </div>
+            </div>
+        </a>
+        <div class="flex items-center justify-between pt-4">
+            <a href="https://laravel.com" target="_blank" rel="noopener noreferrer"
+               class="text-xs text-slate-500 group-hover/preview:text-pink-600">From: laravel.com</a>
+        </div>
+
+</div>. Let me know if you have any questions.
\ No newline at end of file
diff --git a/tests/Unit/Services/ContentTest.php b/tests/Unit/Services/ContentTest.php
index 11aa0b968..f26965da3 100644
--- a/tests/Unit/Services/ContentTest.php
+++ b/tests/Unit/Services/ContentTest.php
@@ -7,7 +7,17 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('Sure, here is the link: <a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://example.com">example.com</a>. Let me know if you have any questions.');
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
+});
+
+test('only links with images or html oEmbeds are parsed', function () {
+    $content = 'Sure, here is the link: https://laravel.com. Let me know if you have any questions.';
+
+    $provider = new App\Services\ParsableContent();
+
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 });
 
 test('mention', function () {
@@ -15,7 +25,8 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('<a href="/@nunomaduro" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@nunomaduro</a>, let me know if you have any questions. Thanks <a href="/@xiCO2k" data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" wire-navigate>@xiCO2k</a>.');
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
 });
 
 it('ignores mention inside <a>', function () {
@@ -23,5 +34,7 @@
 
     $provider = new App\Services\ParsableContent();
 
-    expect($provider->parse($content))->toBe('<a data-navigate-ignore="true" class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" target="_blank" href="https://pinkary.com/@nunomaduro">pinkary.com/@nunomaduro</a>');
+    expect($provider->parse($content))
+        ->toMatchSnapshot();
+
 });
diff --git a/tests/Unit/Services/MetaDataTest.php b/tests/Unit/Services/MetaDataTest.php
new file mode 100644
index 000000000..f65dc660d
--- /dev/null
+++ b/tests/Unit/Services/MetaDataTest.php
@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Services\MetaData;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
+
+mutates(MetaData::class);
+
+it('returns the cached meta data if it exists', function () {
+    $url = 'https://laravel.com';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $cachedData = collect([
+        'title' => 'Laravel - The PHP Framework For Web Artisans',
+        'description' => 'Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.',
+        'type' => 'website',
+        'url' => 'https://laravel.com/',
+        'image' => 'https://laravel.com/img/og-image.jpg',
+    ]);
+
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->toArray())->toBe($cachedData->toArray());
+});
+
+it('gets the youtube oembed data', function () {
+    $url = 'https://youtu.be/emMYyeBfYlM';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('title'))->toBe('Migrating Brent’s PHPUnit Test Suite to Pest')
+        ->and($data->get('type'))->toBe('video')
+        ->and($data->has('html'))->toBeTrue();
+});
+
+it('gets the twitter oembed data', function () {
+    $url = 'https://x.com/enunomaduro/status/1845794776886493291';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('type'))->toBe('rich')
+        ->and($data->has('html'))->toBeTrue();
+});
+
+it('gets the vimdeo oembed data', function () {
+    $url = 'https://vimeo.com/76979871';
+    $cacheKey = Str::of($url)->slug()->prepend('preview_')->value();
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect(Cache::get($cacheKey))->toBe($data)
+        ->and($data->get('type'))->toBe('video')
+        ->and($data->has('html'))->toBeTrue();
+});
+
+it('returns an empty collection if the HTTP request fails', function () {
+    $url = 'https://aurlthatdoesnotexist.com';
+
+    Http::fake([
+        $url => Http::response('', 404),
+    ]);
+
+    $service = new MetaData($url);
+    $data = $service->fetch();
+
+    expect($data->isEmpty())->toBeTrue();
+});