diff --git a/stories/pages/Login.stories.ts b/stories/pages/Login.stories.ts
new file mode 100644
index 0000000..887faef
--- /dev/null
+++ b/stories/pages/Login.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Login from '$lib/components/pages/Login.svelte';
+
+const meta = {
+	title: 'Pages/Login',
+	component: Login,
+	tags: ['autodocs'],
+	argTypes: {
+		form: { controls: 'object' }
+	}
+} satisfies Meta<Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: false,
+			missing: false,
+		}
+	}
+};
+
+export const MissingInput: Story = {
+	args: {
+		form: {
+			account: '',
+			incorrect: false,
+			missing: true,
+		}
+	}
+};
+
+export const InvalidFormData: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: true,
+			missing: false,
+		}
+	}
+};
diff --git a/stories/templates/Login.stories.ts b/stories/templates/Login.stories.ts
new file mode 100644
index 0000000..04e5ba9
--- /dev/null
+++ b/stories/templates/Login.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Login from '$lib/components/templates/Login.svelte';
+
+const meta = {
+	title: 'Templates/Login',
+	component: Login,
+	tags: ['autodocs'],
+	argTypes: {
+		form: { controls: 'object' }
+	}
+} satisfies Meta<Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: false,
+			missing: false,
+		}
+	}
+};
+
+export const MissingInput: Story = {
+	args: {
+		form: {
+			account: '',
+			incorrect: false,
+			missing: true,
+		}
+	}
+};
+
+export const InvalidFormData: Story = {
+	args: {
+		form: {
+			account: 'jane.doe@domain.example',
+			incorrect: true,
+			missing: false,
+		}
+	}
+};