diff --git a/resources/views/components/author-card.blade.php b/resources/views/components/author-card.blade.php
new file mode 100644
index 0000000..d10648c
--- /dev/null
+++ b/resources/views/components/author-card.blade.php
@@ -0,0 +1,37 @@
+@props(['tip'])
+
+<div class="flex w-full p-6 space-x-6 bg-gray-50 rounded-2xl">
+    <a href="{{ $tip->author->profile_url }}" target="_blank">
+        <img class="bg-gray-200 rounded-full w-14 h-14" src="{{ asset($tip->author->avatar) }}"
+            alt="{{ $tip->author->name }}">
+    </a>
+
+    <aside class="flex-1 space-y-2 text-left">
+        <a href="{{ $tip->author->profile_url }}" target="_blank"
+            class="block text-xl font-bold">{{ $tip->author->name }}</a>
+
+        <dl class="grid gap-6 sm:grid-cols-2 md:grid-cols-4">
+            @if ($tip->thread)
+                <div>
+                    <dt class="text-sm text-gray-500">Thread</dt>
+
+                    <dd>
+                        <x-link href="{{ route('thread.show', $tip->thread->slug) }}">
+                            {{ $tip->thread->title }}
+                        </x-link>
+                    </dd>
+                </div>
+            @endif
+
+            <div>
+                <dt class="text-sm text-gray-500">Tweet</dt>
+
+                <dd>
+                    <x-link href="{{ $tip->tweet_url }}" target="_blank">
+                        twitter.com/...
+                    </x-link>
+                </dd>
+            </div>
+        </dl>
+    </aside>
+</div>
diff --git a/resources/views/components/container.blade.php b/resources/views/components/container.blade.php
new file mode 100644
index 0000000..fbf1ee6
--- /dev/null
+++ b/resources/views/components/container.blade.php
@@ -0,0 +1 @@
+<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">{{ $slot }}</div>
diff --git a/resources/views/components/socials.blade.php b/resources/views/components/socials.blade.php
new file mode 100644
index 0000000..c8cc86b
--- /dev/null
+++ b/resources/views/components/socials.blade.php
@@ -0,0 +1,24 @@
+<ul class="inline-grid grid-flow-col gap-4">
+    <li>
+        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
+            href="{{ $twitter }}">Twitter</a>
+    </li>
+
+    <li>
+        <span>&centerdot;</span>
+    </li>
+
+    <li>
+        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
+            href="{{ $telegram }}">Telegram</a>
+    </li>
+
+    <li>
+        <span>&centerdot;</span>
+    </li>
+
+    <li>
+        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
+            href="{{ $newsletter }}">Newsletter</a>
+    </li>
+</ul>
diff --git a/resources/views/threads/show.blade.php b/resources/views/threads/show.blade.php
index 693a113..b684515 100644
--- a/resources/views/threads/show.blade.php
+++ b/resources/views/threads/show.blade.php
@@ -1,53 +1,31 @@
-<x:layout :title="$thread->title">
-    <main class="mx-auto flex flex-col sm:flex-row justify-between items-start gap-8">
-        <aside class="flex flex-col gap-2 sm:mt-60 sm:mx-0 mx-auto">
-            <h2 class="text-2xl font-medium">
-                <a class="block" href="/">
-                    Laravel Code Tips
-                </a>
-            </h2>
-            <div class="flex justify-between">
-                <a class="block" href="{{ $twitter }}" target="_blank">
-                    <span class="link">Twitter</span>
-                </a>
-                <span class="px-2">·</span>
-                <a class="block" href="{{ $newsletter }}" target="_blank">
-                    <span class="link">Newsletter</span>
-                </a>
-                <span class="px-2">·</span>
-                <a class="block" href="{{ $telegram }}" target="_blank">
-                    <span class="link">Telegram</span>
-                </a>
+<x:layout>
+    <header class="relative py-24">
+        <div
+            class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
+        </div>
+
+        <x:container>
+            <div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
+                <h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">
+                    🔥 {{ $thread->title }}
+                </h1>
+
+                <div class="prose md:prose-xl">
+                    {!! Str::markdown($thread->content) !!}
+                </div>
+
+                <x:socials />
             </div>
-            <a class="block" href="/">
-                <span class="link">All tips</span>
-            </a>
-        </aside>
-        <article class="max-w-5xl w-full mt-8">
-            <header class="flex justify-center flex-wrap gap-5">
-                <h1 class="text-4xl w-full">🔥 {{ $thread->title }}</h1>
-                <div class="prose text-xl">@markdown{!! $thread->content !!}@endmarkdown</div>
+        </x:container>
+    </header>
 
-                <x:feed :tips="$tips" />
-            </header>
-        </article>
-        <aside class="sm:mt-60">
-            <dl class="grid grid-cols-2 gap-x-5 gap-y-4 items-center">
-                <dt class="text-right">Author</dt>
-                <dd class="text-left">
-                    <a href="{{ $thread->author->profile_url }}" class="flex items-center gap-2" target="_blank">
-                        <img src="{{ $thread->author->avatar }}" class="w-8 rounded-full border-blue-800 border-2">
-                        <span class="text-blue-800">{{ $thread->author->name }}</span>
-                    </a>
-                </dd>
+    <main class="flex-1 divide-y" role="feed">
+        <x:feed :tips="$tips" />
 
-                <dt class="text-right">Tweet</dt>
-                <dd class="text-left text-blue-800">
-                    <a href="{{ $thread->tweet_url }}" target="_blank">
-                        twitter.com/...
-                    </a>
-                </dd>
-            </dl>
-        </aside>
+        <section class="py-12 bg-white md:py-24">
+            <x:container>
+                <x:author-card :tip="$thread" />
+            </x:container>
+        </section>
     </main>
 </x:layout>
diff --git a/resources/views/tips/index.blade.php b/resources/views/tips/index.blade.php
index 5df63a3..f25ef46 100644
--- a/resources/views/tips/index.blade.php
+++ b/resources/views/tips/index.blade.php
@@ -4,38 +4,15 @@
             class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
         </div>
 
-        <div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
+        <x-container>
             <div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
                 <h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">Laravel Code Tips</h1>
 
                 <p class="text-xl font-medium">Make your Laravel code cleaner, faster, and safer.</p>
 
-                <ul class="inline-grid grid-flow-col gap-4">
-                    <li>
-                        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                            href="{{ $twitter }}">Twitter</a>
-                    </li>
-
-                    <li>
-                        <span>&centerdot;</span>
-                    </li>
-
-                    <li>
-                        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                            href="{{ $telegram }}">Telegram</a>
-                    </li>
-
-                    <li>
-                        <span>&centerdot;</span>
-                    </li>
-
-                    <li>
-                        <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                            href="{{ $newsletter }}">Newsletter</a>
-                    </li>
-                </ul>
+                <x:socials />
             </div>
-        </div>
+        </x-container>
     </header>
 
     <main class="flex-1 divide-y" role="feed">
diff --git a/resources/views/tips/show.blade.php b/resources/views/tips/show.blade.php
index f1d1ec2..3885ee1 100644
--- a/resources/views/tips/show.blade.php
+++ b/resources/views/tips/show.blade.php
@@ -25,36 +25,12 @@
             class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
         </div>
 
-        <div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
-
+        <x:container>
             <div class="flex flex-col items-center space-y-6 text-center md:space-y-12">
                 <div class="space-y-6 text-yellow-900">
                     <h1 class="text-3xl font-bold tracking-tighter md:text-5xl">{{ $tip->title }}</h1>
 
-                    <ul class="inline-grid grid-flow-col gap-4">
-                        <li>
-                            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                                href="{{ $twitter }}">Twitter</a>
-                        </li>
-
-                        <li>
-                            <span>&centerdot;</span>
-                        </li>
-
-                        <li>
-                            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                                href="{{ $telegram }}">Telegram</a>
-                        </li>
-
-                        <li>
-                            <span>&centerdot;</span>
-                        </li>
-
-                        <li>
-                            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
-                                href="{{ $newsletter }}">Newsletter</a>
-                        </li>
-                    </ul>
+                    <x:socials />
                 </div>
 
                 @if ($tip->images())
@@ -66,46 +42,12 @@
 
                 @if ($tip->content)
                     <div class="prose break-all md:prose-xl">
-                        {!! Str::of($tip->content)->markdown() !!}
+                        {!! Str::markdown($tip->content) !!}
                     </div>
                 @endif
 
-                <div class="flex w-full p-6 space-x-6 bg-gray-50 rounded-2xl">
-                    <a href="{{ $tip->author->profile_url }}" target="_blank">
-                        <img class="bg-gray-200 rounded-full w-14 h-14" src="{{ asset($tip->author->avatar) }}"
-                            alt="{{ $tip->author->name }}">
-                    </a>
-
-                    <aside class="flex-1 space-y-2 text-left">
-                        <a href="{{ $tip->author->profile_url }}" target="_blank"
-                            class="block text-xl font-bold">{{ $tip->author->name }}</a>
-
-                        <dl class="grid gap-6 sm:grid-cols-2 md:grid-cols-4">
-                            @if ($tip->thread)
-                                <div>
-                                    <dt class="text-sm text-gray-500">Thread</dt>
-
-                                    <dd>
-                                        <x-link href="{{ route('thread.show', $tip->thread->slug) }}">
-                                            {{ $tip->thread->title }}
-                                        </x-link>
-                                    </dd>
-                                </div>
-                            @endif
-
-                            <div>
-                                <dt class="text-sm text-gray-500">Tweet</dt>
-
-                                <dd>
-                                    <x-link href="{{ $tip->tweet_url }}" target="_blank">
-                                        twitter.com/...
-                                    </x-link>
-                                </dd>
-                            </div>
-                        </dl>
-                    </aside>
-                </div>
+                <x:author-card :tip="$tip" />
             </div>
-        </div>
+        </x:container>
     </main>
 </x:layout>