diff --git a/resources/views/care/settings/edit.blade.php b/resources/views/care/settings/edit.blade.php
index 1eced5f..267c910 100644
--- a/resources/views/care/settings/edit.blade.php
+++ b/resources/views/care/settings/edit.blade.php
@@ -1,55 +1,59 @@
 <x-app-layout title="Settings">
-    <div class="mx-auto max-w-2xl">
-        <h1 class="text-xl font-semibold text-slate-900">Facility settings</h1>
-
-        <form method="POST" action="{{ route('care.settings.update') }}" enctype="multipart/form-data" class="mt-6 space-y-5 rounded-2xl border border-slate-200 bg-white p-6">
+    <x-settings.page title="Facility settings">
+        <form method="POST" action="{{ route('care.settings.update') }}" enctype="multipart/form-data" class="space-y-6">
             @csrf @method('PUT')
 
-            <div>
-                <label class="block text-sm font-medium text-slate-700">Organization name</label>
-                <input type="text" name="name" value="{{ old('name', $organization->name) }}" @disabled(! $canManage) required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-            </div>
+            <x-settings.card title="Organization" description="Name, facility type, timezone, and branding for your facility.">
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700">Organization name</label>
+                        <input type="text" name="name" value="{{ old('name', $organization->name) }}" @disabled(! $canManage) required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                    </div>
 
-            <div>
-                <label class="block text-sm font-medium text-slate-700">Facility type</label>
-                <select name="facility_type" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    @foreach ($facilityTypes as $value => $label)
-                        <option value="{{ $value }}" @selected(old('facility_type', data_get($organization->settings, 'facility_type', 'clinic')) === $value)>{{ $label }}</option>
-                    @endforeach
-                </select>
-            </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700">Facility type</label>
+                        <select name="facility_type" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                            @foreach ($facilityTypes as $value => $label)
+                                <option value="{{ $value }}" @selected(old('facility_type', data_get($organization->settings, 'facility_type', 'clinic')) === $value)>{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
 
-            <div>
-                <label class="block text-sm font-medium text-slate-700">Timezone</label>
-                <select name="timezone" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    @foreach (timezone_identifiers_list() as $tz)
-                        <option value="{{ $tz }}" @selected(old('timezone', $organization->timezone) === $tz)>{{ $tz }}</option>
-                    @endforeach
-                </select>
-            </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700">Timezone</label>
+                        <select name="timezone" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                            @foreach (timezone_identifiers_list() as $tz)
+                                <option value="{{ $tz }}" @selected(old('timezone', $organization->timezone) === $tz)>{{ $tz }}</option>
+                            @endforeach
+                        </select>
+                    </div>
 
-            @if ($canManage)
-                <div>
-                    <label class="block text-sm font-medium text-slate-700">Logo</label>
-                    <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="mt-2 block w-full text-sm">
-                    @if (\App\Support\OrganizationBranding::hasCustomLogo($organization))
-                        <label class="mt-2 flex items-center gap-2 text-sm"><input type="checkbox" name="remove_logo" value="1"> Remove current logo</label>
+                    @if ($canManage)
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700">Logo</label>
+                            <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="mt-2 block w-full text-sm">
+                            @if (\App\Support\OrganizationBranding::hasCustomLogo($organization))
+                                <label class="mt-2 flex items-center gap-2 text-sm"><input type="checkbox" name="remove_logo" value="1"> Remove current logo</label>
+                            @endif
+                        </div>
                     @endif
                 </div>
+            </x-settings.card>
 
-                <div class="rounded-xl border border-slate-200 p-4">
-                    <h2 class="text-sm font-semibold text-slate-900">Ladill Queue</h2>
-                    <p class="mt-1 text-xs text-slate-500">Manage service queues and counters in Care. You must also enable Care integration in Ladill Queue settings.</p>
-                    <label class="mt-3 flex items-center gap-2 text-sm">
+            @if ($canManage)
+                <x-settings.card title="Integrations" description="Manage service queues and counters in Care. You must also enable Care integration in Ladill Queue settings.">
+                    <label class="flex items-center gap-2 text-sm">
                         <input type="checkbox" name="queue_integration_enabled" value="1" @checked(data_get($organization->settings, 'queue_integration_enabled'))>
                         Enable Ladill Queue integration
                     </label>
-                </div>
+                </x-settings.card>
 
-                <button type="submit" class="btn-primary">Save settings</button>
+                <div class="flex justify-end">
+                    <button type="submit" class="btn-primary">Save settings</button>
+                </div>
             @endif
         </form>
 
-        <p class="mt-4 text-sm text-slate-500">{{ $branchCount }} branch(es) configured.</p>
-    </div>
+        <p class="text-sm text-slate-500">{{ $branchCount }} branch(es) configured.</p>
+    </x-settings.page>
 </x-app-layout>
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>