diff --git a/app/View/Components/Card.php b/app/View/Components/Card.php
new file mode 100644
index 0000000..48fa444
--- /dev/null
+++ b/app/View/Components/Card.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Card extends Component
+{
+    public function __construct(public string $header = '')
+    {
+        //
+    }
+
+    public function render(): View
+    {
+        return view('components.card');
+    }
+}
diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
new file mode 100644
index 0000000..66e8f20
--- /dev/null
+++ b/resources/views/components/card.blade.php
@@ -0,0 +1,10 @@
+<div class="card bg-surface rounded border border-primary shadow">
+    @if(!empty($header))
+    <div class="card-header p-4 border-b border-primary">
+        <h3 class="font-semibold">{{ $header }}</h3>
+    </div>
+    @endif
+    <div class="card-body p-4">
+        {{ $slot }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/storybook/index.blade.php b/resources/views/storybook/index.blade.php
index f1fdef6..0486b65 100644
--- a/resources/views/storybook/index.blade.php
+++ b/resources/views/storybook/index.blade.php
@@ -56,11 +56,16 @@
         <!-- CARDS -->
         <section class="space-y-4">
             <h2 class="text-xl font-semibold">Cards</h2>
+            <h3 class="text-l font-semibold">With Header</h3>
 
-            <div class="bg-surface p-6 rounded shadow">
-                <h3 class="font-semibold">Card title</h3>
-                <p class="text-text-muted">This is a simple card component.</p>
-            </div>
+            <x-card header="Card Header">
+                <p class="text-text-muted">This is a card component with header.</p>
+            </x-card>
+
+            <h3 class="text-l font-semibold">Without Header</h3>
+            <x-card>
+                <p class="text-text-muted">This is a card component without header.</p>
+            </x-card>
         </section>
 
         <!-- TYPOGRAPHY -->
diff --git a/tests/Feature/Component/CardTest.php b/tests/Feature/Component/CardTest.php
new file mode 100644
index 0000000..77a8d21
--- /dev/null
+++ b/tests/Feature/Component/CardTest.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Component;
+
+use Tests\TestCase;
+
+class CardTest extends TestCase
+{
+    public function testCardWithHeader(): void
+    {
+        $view = $this->blade('<x-card header="Test Header">Card Content</x-card>');
+
+        $view->assertSeeHtml('<div class="card-header ');
+        $view->assertSeeHtml('<h3 class="font-semibold">Test Header</h3>');
+    }
+
+    public function testCardWithoutHeader(): void
+    {
+        $view = $this->blade('<x-card>Card Content</x-card>');
+
+        $view->assertDontSeeHtml('<div class="card-header ');
+        $view->assertDontSeeHtml('<h3 class="font-semibold">');
+    }
+
+    public function testCardContent(): void
+    {
+        $cardContent = '<p class="card-content">This is the card content.</p>';
+        $view = $this->blade("<x-card>{$cardContent}</x-card>");
+
+        $view->assertSeeHtml($cardContent);
+    }
+}