diff --git a/app/View/Components/Button.php b/app/View/Components/Button.php
new file mode 100644
index 0000000..0d8cfae
--- /dev/null
+++ b/app/View/Components/Button.php
@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    public const VARIANT_PRIMARY = 'primary';
+    public const VARIANT_SECONDARY = 'secondary';
+    public const VARIANT_OUTLINE = 'outline';
+
+    public function __construct(public string $variant = self::VARIANT_PRIMARY, public bool $disabled = false)
+    {
+        //
+    }
+
+    public function classes(): string
+    {
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
+            'duration-150 ease-in-out';
+
+        $classes = match ($this->variant) {
+            self::VARIANT_SECONDARY => [
+                'base' => 'bg-secondary text-text',
+                'hover' => 'hover:bg-secondary-dark',
+                'disabled' => 'disabled:bg-secondary',
+            ],
+            self::VARIANT_OUTLINE => [
+                'base' => 'bg-surface border border-primary text-primary',
+                'hover' => 'hover:bg-primary hover:text-text-inverted',
+                'disabled' => 'disabled:bg-surface disabled:text-primary',
+            ],
+            default => [
+                'base' => 'bg-primary text-text-inverted',
+                'hover' => 'hover:bg-primary-dark',
+                'disabled' => 'disabled:bg-primary'
+            ]
+        };
+
+        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+
+        return trim(
+            $base . ' ' .
+            $classes['base'] . ' ' .
+            $classes['hover'] . ' ' .
+            $baseDisabled . ' ' .
+            $classes['disabled']
+        );
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.button');
+    }
+}
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/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644
index 0000000..4e20927
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,8 @@
+<button 
+    {{ $attributes
+        ->merge(['class' => $classes()])
+        ->merge(['disabled' => $disabled])
+    }}
+>
+    {{ $slot }}
+</button>
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
new file mode 100644
index 0000000..1b376d1
--- /dev/null
+++ b/resources/views/storybook/index.blade.php
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Storybook</title>
+
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+    </head>
+    <body class="bg-background text-text p-10 space-y-12">
+
+        <h1 class="text-3xl font-bold">Storybook</h1>
+
+        @include('storybook.sections.colours')
+        @include('storybook.sections.buttons')
+        @include('storybook.sections.cards')
+        @include('storybook.sections.typography')
+
+    </body>
+</html>
diff --git a/resources/views/storybook/sections/buttons.blade.php b/resources/views/storybook/sections/buttons.blade.php
new file mode 100644
index 0000000..66a004e
--- /dev/null
+++ b/resources/views/storybook/sections/buttons.blade.php
@@ -0,0 +1,30 @@
+<section class="space-y-4">
+    <h2 class="text-xl font-semibold">Buttons</h2>
+    <h3 class="text-l font-semibold">Enabled</h3>
+
+    <div class="flex gap-4">
+        <x-button onclick="alert('Default was clicked!')">Default</x-button>
+
+        <x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
+
+
+        <x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
+
+
+        <x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
+    </div>
+
+    <h3 class="text-l font-semibold">Disabled</h3>
+
+    <div class="flex gap-4">
+        <x-button disabled>Default</x-button>
+
+        <x-button variant="primary" disabled>Primary</x-button>
+
+
+        <x-button variant="secondary" disabled>Secondary</x-button>
+
+
+        <x-button variant="outline" disabled>Outline</x-button>
+    </div>
+</section>
diff --git a/resources/views/storybook/sections/cards.blade.php b/resources/views/storybook/sections/cards.blade.php
new file mode 100644
index 0000000..6b428e8
--- /dev/null
+++ b/resources/views/storybook/sections/cards.blade.php
@@ -0,0 +1,13 @@
+<section class="space-y-4">
+    <h2 class="text-xl font-semibold">Cards</h2>
+    <h3 class="text-l font-semibold">With Header</h3>
+
+    <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>
diff --git a/resources/views/storybook/sections/colours.blade.php b/resources/views/storybook/sections/colours.blade.php
new file mode 100644
index 0000000..6e376c9
--- /dev/null
+++ b/resources/views/storybook/sections/colours.blade.php
@@ -0,0 +1,9 @@
+<section class="space-y-4">
+    <h2 class="text-xl font-semibold">Colors</h2>
+
+    <div class="grid grid-cols-3 gap-4">
+        <div class="p-4 bg-primary text-text-inverted rounded">Primary</div>
+        <div class="p-4 bg-secondary text-black rounded">Secondary</div>
+        <div class="p-4 bg-surface border rounded">Surface</div>
+    </div>
+</section>
diff --git a/resources/views/storybook/sections/typography.blade.php b/resources/views/storybook/sections/typography.blade.php
new file mode 100644
index 0000000..0a267e7
--- /dev/null
+++ b/resources/views/storybook/sections/typography.blade.php
@@ -0,0 +1,7 @@
+<section class="space-y-2">
+    <h2 class="text-xl font-semibold">Typography</h2>
+
+    <p class="text-text">Default text</p>
+    <p class="text-text-muted">Muted text</p>
+    <p class="text-primary">Primary text</p>
+</section>
diff --git a/routes/web.php b/routes/web.php
index 86a06c5..16e9d0c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,3 +5,7 @@ use Illuminate\Support\Facades\Route;
 Route::get('/', function () {
     return view('welcome');
 });
+
+Route::get('/storybook', function () {
+    return view('storybook.index');
+})->name('storybook');
diff --git a/tests/Feature/Component/ButtonTest.php b/tests/Feature/Component/ButtonTest.php
new file mode 100644
index 0000000..1366139
--- /dev/null
+++ b/tests/Feature/Component/ButtonTest.php
@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Component;
+
+use Tests\Feature\Component\DataProvider\ButtonTestDataProvider;
+use Tests\TestCase;
+
+class ButtonTest extends TestCase
+{
+    public function testGeneratesButtonElement(): void
+    {
+        $view = $this->blade('<x-button>Click!</x-button>');
+
+        $view->assertSeeHtml('<button ');
+        $view->assertDontSeeHtml('<a ');
+    }
+
+    public function testButtonCanHaveAttributes(): void
+    {
+        $view = $this->blade('<x-button data-attr="123">Click!</x-button>');
+
+        $view->assertSeeHtml('data-attr="123"');
+    }
+
+    public function testDefaultVariantIsPrimary(): void
+    {
+        $view = $this->blade('<x-button>Click!</x-button>');
+
+        $view->assertSeeHtml('bg-primary text-text-inverted');
+    }
+
+
+    #[\PHPUnit\Framework\Attributes\DataProviderExternal(ButtonTestDataProvider::class, 'getDataForButtonTestWithButtons')]
+    public function testVariants(string $variant, string $expectedHtml): void
+    {
+        $button = sprintf('<x-button variant="%s">Click!</x-button>', $variant);
+        $view = $this->blade($button);
+
+        $view->assertSeeHtml($expectedHtml);
+    }
+}
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);
+    }
+}
diff --git a/tests/Feature/Component/DataProvider/ButtonTestDataProvider.php b/tests/Feature/Component/DataProvider/ButtonTestDataProvider.php
new file mode 100644
index 0000000..8cdbd87
--- /dev/null
+++ b/tests/Feature/Component/DataProvider/ButtonTestDataProvider.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature\Component\DataProvider;
+
+use App\View\Components\Button;
+
+class ButtonTestDataProvider
+{
+    public static function getDataForButtonTestWithButtons(): array
+    {
+        return [
+           'primary variant' => [
+                'variant' => Button::VARIANT_PRIMARY,
+                'expectedHtml' => 'bg-primary text-text-inverted'
+            ],
+            'secondary variant' => [
+                'variant' => Button::VARIANT_SECONDARY,
+                'expectedHtml' => 'bg-secondary text-text'
+            ],
+            'outline variant' => [
+                'variant' => Button::VARIANT_OUTLINE,
+                'expectedHtml' => 'bg-surface border border-primary text-primary'
+            ],
+        ];
+    }
+}
