diff --git a/resources/views/components/settings/card.blade.php b/resources/views/components/settings/card.blade.php
new file mode 100644
index 0000000..939f318
--- /dev/null
+++ b/resources/views/components/settings/card.blade.php
@@ -0,0 +1,15 @@
+@props(['title' => null, 'description' => null])
+
+<div {{ $attributes->merge(['class' => 'rounded-xl border border-slate-200 bg-white shadow-sm']) }}>
+    @if ($title)
+        <div class="border-b border-slate-100 px-6 py-4">
+            <h2 class="text-base font-semibold text-slate-900">{{ $title }}</h2>
+            @if ($description)
+                <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
+            @endif
+        </div>
+    @endif
+    <div class="px-6 py-5">
+        {{ $slot }}
+    </div>
+</div>
diff --git a/resources/views/components/settings/page.blade.php b/resources/views/components/settings/page.blade.php
new file mode 100644
index 0000000..3bc11e8
--- /dev/null
+++ b/resources/views/components/settings/page.blade.php
@@ -0,0 +1,11 @@
+@props(['title' => 'Settings', 'description' => null])
+
+<div {{ $attributes->merge(['class' => 'mx-auto max-w-3xl space-y-6']) }}>
+    <div>
+        <h1 class="text-2xl font-semibold text-slate-900">{{ $title }}</h1>
+        @if ($description)
+            <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
+        @endif
+    </div>
+    {{ $slot }}
+</div>
diff --git a/resources/views/links/settings/index.blade.php b/resources/views/links/settings/index.blade.php
index d47ec77..5585d31 100644
--- a/resources/views/links/settings/index.blade.php
+++ b/resources/views/links/settings/index.blade.php
@@ -1,15 +1,9 @@
 <x-user-layout>
     <x-slot name="title">Settings</x-slot>
-    <div class="mx-auto max-w-3xl space-y-6">
-        <div>
-            <h1 class="text-2xl font-semibold text-slate-900">Settings</h1>
-            <p class="mt-1 text-sm text-slate-500">Manage your Ladill Link preferences.</p>
-        </div>
 
-        <div class="rounded-xl border border-slate-200 bg-white p-6">
-            <h2 class="font-semibold text-slate-900">Default short-link domain</h2>
-            <p class="mt-1 text-sm text-slate-500">Choose which domain new links are shown on. Custom domains must be verified first.</p>
-            <form method="POST" action="{{ route('link.settings.default-domain') }}" class="mt-4 space-y-3">
+    <x-settings.page description="Manage your Ladill Link preferences.">
+        <x-settings.card title="Default short-link domain" description="Choose which domain new links are shown on. Custom domains must be verified first.">
+            <form method="POST" action="{{ route('link.settings.default-domain') }}" class="space-y-3">
                 @csrf @method('PUT')
                 <label class="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3">
                     <input type="radio" name="domain" value="platform" @checked(! $defaultDomain) class="text-emerald-600">
@@ -26,23 +20,19 @@
             <p class="mt-3 text-xs text-slate-500">
                 <a href="{{ route('link.domains.index') }}" class="font-medium text-emerald-700 hover:underline">Manage custom domains →</a>
             </p>
-        </div>
+        </x-settings.card>
 
-        <div class="rounded-xl border border-slate-200 bg-white p-6">
-            <h2 class="font-semibold text-slate-900">Billing</h2>
-            <p class="mt-1 text-sm text-slate-500">GHS {{ number_format($pricePerLink, 2) }} per link created. Charged to your Ladill wallet.</p>
-            <div class="mt-4 flex flex-wrap gap-3">
+        <x-settings.card title="Billing" description="GHS {{ number_format($pricePerLink, 2) }} per link created. Charged to your Ladill wallet.">
+            <div class="flex flex-wrap gap-3">
                 <a href="{{ route('account.wallet') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Wallet</a>
                 <a href="{{ route('account.billing') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Billing history</a>
             </div>
-        </div>
+        </x-settings.card>
 
-        <div class="rounded-xl border border-slate-200 bg-white p-6">
-            <h2 class="font-semibold text-slate-900">Ladill Account</h2>
-            <p class="mt-1 text-sm text-slate-500">Profile, security, and platform settings live on your Ladill account.</p>
-            <a href="{{ ladill_account_url('account-settings') }}" class="mt-4 inline-flex rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
+        <x-settings.card title="Ladill Account" description="Profile, security, and platform settings live on your Ladill account.">
+            <a href="{{ ladill_account_url('account-settings') }}" class="inline-flex rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                 Open account settings
             </a>
-        </div>
-    </div>
+        </x-settings.card>
+    </x-settings.page>
 </x-user-layout>