diff --git a/resources/views/storybook/index.blade.php b/resources/views/storybook/index.blade.php
index 0486b65..1b376d1 100644
--- a/resources/views/storybook/index.blade.php
+++ b/resources/views/storybook/index.blade.php
@@ -10,72 +10,10 @@
 
         <h1 class="text-3xl font-bold">Storybook</h1>
 
-        <!-- COLOURS -->
-        <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>
-
-        <!-- BUTTONS -->
-        <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>
-
-        <!-- CARDS -->
-        <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>
-
-        <!-- TYPOGRAPHY -->
-        <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>
+        @include('storybook.sections.colours')
+        @include('storybook.sections.buttons')
+        @include('storybook.sections.cards')
+        @include('storybook.sections.typography')
 
     </body>
-</html>
\ No newline at end of file
+</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>