diff --git a/.eslintrc b/.eslintrc
index 25018ff9e..d744f3bba 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -88,7 +88,15 @@
     // Configuration for Storybook
     {
       "files": ["*.stories.*"],
-      "extends": ["plugin:storybook/recommended"]
+      "extends": ["plugin:storybook/recommended"],
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ]
+      }
     }
   ]
 }
diff --git a/.gitignore b/.gitignore
index aa59ef1cf..885f16891 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,9 @@
 # testing
 /coverage
 
+# storybook
+storybook-static
+
 # cypress
 cypress/screenshots
 cypress/videos
diff --git a/src/templates/Main.stories.tsx b/src/templates/Main.stories.tsx
new file mode 100644
index 000000000..c44bd19a8
--- /dev/null
+++ b/src/templates/Main.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { Main } from './Main';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Main> = {
+  title: 'Example/Main',
+  component: Main,
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Main>;
+
+export const MainWithReactComponent: Story = {
+  args: {
+    children: <div>Children node</div>,
+  },
+};
+
+export const MainWithString: Story = {
+  args: {
+    children: 'String',
+  },
+};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const MainWithHomeLink: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('link', {
+      name: /Home/i,
+    });
+
+    await userEvent.click(loginButton);
+  },
+};
diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
index 03484ef25..26a01d307 100644
--- a/src/templates/Main.tsx
+++ b/src/templates/Main.tsx
@@ -14,7 +14,7 @@ const Main = (props: IMainProps) => (
 
     <div className="mx-auto max-w-screen-md">
       <header className="border-b border-gray-300">
-        <div className="pt-16 pb-8">
+        <div className="pb-8 pt-16">
           <h1 className="text-3xl font-bold text-gray-900">
             {AppConfig.title}
           </h1>