diff --git a/resources/views/components/page-header.blade.php b/resources/views/components/page-header.blade.php
new file mode 100644
index 000000000..fb312668f
--- /dev/null
+++ b/resources/views/components/page-header.blade.php
@@ -0,0 +1,27 @@
+@props([
+    'title',
+    'description' => null,
+    'icon' => null,
+])
+
+<div {{ $attributes->merge(['class' => 'px-6 py-6']) }}>
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div class="min-w-0">
+            <h1 class="flex items-center gap-3 text-2xl font-bold text-gray-900 dark:text-gray-100 sm:text-3xl">
+                @if($icon)
+                    <i class="{{ $icon }} text-primary-600 dark:text-primary-400" aria-hidden="true"></i>
+                @endif
+                <span class="break-words">{{ $title }}</span>
+            </h1>
+            @if($description)
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 sm:text-base">{{ $description }}</p>
+            @endif
+        </div>
+
+        @isset($actions)
+            <div class="flex shrink-0 flex-wrap items-center gap-2">
+                {{ $actions }}
+            </div>
+        @endisset
+    </div>
+</div>
diff --git a/resources/views/components/panel.blade.php b/resources/views/components/panel.blade.php
new file mode 100644
index 000000000..a03a5894b
--- /dev/null
+++ b/resources/views/components/panel.blade.php
@@ -0,0 +1,23 @@
+@props([
+    'variant' => 'default',
+    'padding' => 'md',
+])
+
+@php
+    $surfaces = [
+        'default' => 'surface-panel border shadow-sm',
+        'alt' => 'surface-panel-alt border',
+        'plain' => 'surface-panel',
+    ];
+
+    $paddings = [
+        'none' => '',
+        'sm' => 'p-4',
+        'md' => 'p-6',
+        'lg' => 'p-8',
+    ];
+@endphp
+
+<div {{ $attributes->merge(['class' => 'rounded-xl '.($surfaces[$variant] ?? $surfaces['default']).' '.($paddings[$padding] ?? $paddings['md'])]) }}>
+    {{ $slot }}
+</div>