diff --git a/stories/Footer.stories.tsx b/stories/Footer.stories.tsx
new file mode 100644
index 00000000..62f2740c
--- /dev/null
+++ b/stories/Footer.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Footer } from "../src/main";
+
+const meta = {
+    title: "Components/Footer",
+    component: Footer,
+    args: {
+        className: "test-class",
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: "Additional classes to be applied to the header.",
+        },
+    },
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    name: "Footer",
+    render: () => (
+        <div style={{ width: "900px" }}>
+            <span>content</span>
+            <Footer>Test footer</Footer>
+        </div>
+    ),
+};
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
new file mode 100644
index 00000000..76601d4c
--- /dev/null
+++ b/stories/Header.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "../src/main";
+
+const meta = {
+    title: "Components/Header",
+    component: Header,
+    args: {
+        className: "test-class",
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: "Additional classes to be applied to the header.",
+        },
+    },
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    name: "Header",
+    render: () => (
+        <div style={{ width: "900px" }}>
+            <Header>Test Header</Header>
+        </div>
+    ),
+};
diff --git a/stories/Wrapper.stories.tsx b/stories/Wrapper.stories.tsx
new file mode 100644
index 00000000..27527dbb
--- /dev/null
+++ b/stories/Wrapper.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Wrapper } from "../src/main";
+
+const meta = {
+    title: "Components/Wrapper",
+    component: Wrapper,
+    args: {
+        className: "test-class",
+        variant: "left",
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: "Additional classes to be applied to the header.",
+        },
+        variant: {
+            options: ["left", "right"],
+            control: { type: "radio" },
+        },
+    },
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof Wrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    name: "Wrapper",
+    render: () => (
+        <div style={{ display: "flex", width: "900px" }}>
+            <Wrapper variant="left" style={{ backgroundColor: "orange" }}>
+                Left Wrapper
+            </Wrapper>
+
+            <Wrapper variant="right" style={{ backgroundColor: "pink" }}>
+                Right Wrapper
+            </Wrapper>
+        </div>
+    ),
+};