diff --git a/src/emails/StorybookEmailRenderer.tsx b/src/emails/StorybookEmailRenderer.tsx
index 2df8151d877..fcd4827b4b6 100644
--- a/src/emails/StorybookEmailRenderer.tsx
+++ b/src/emails/StorybookEmailRenderer.tsx
@@ -55,7 +55,7 @@ export const StorybookEmailRenderer = (props: Props) => {
         padding: 20px;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         gap: 20px;
       }
       .wrapper .plaintext {
@@ -89,7 +89,7 @@ export const StorybookEmailRenderer = (props: Props) => {
                   `
                 : renderResult.html,
           }}
-          className={props.emulateDarkMode ? "dark-mode-enforced" : ""}
+          className={`body ${props.emulateDarkMode ? "dark-mode-enforced" : ""}`}
         />
       </section>
       <section className="plaintext">
diff --git a/src/emails/components/EmailFooter.stories.tsx b/src/emails/components/EmailFooter.stories.tsx
new file mode 100644
index 00000000000..af61d1d05d2
--- /dev/null
+++ b/src/emails/components/EmailFooter.stories.tsx
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailFooter, Props } from "./EmailFooter";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Footer",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailFooter {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const RepeatEmail: Story = {
+  name: "Repeat email",
+  args: {
+    isOneTimeEmail: false,
+  },
+};
+
+export const OneTimeEmail: Story = {
+  name: "One-time email",
+  args: {
+    isOneTimeEmail: true,
+  },
+};
diff --git a/src/emails/components/EmailHeader.stories.tsx b/src/emails/components/EmailHeader.stories.tsx
new file mode 100644
index 00000000000..ee0699e2c5f
--- /dev/null
+++ b/src/emails/components/EmailHeader.stories.tsx
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailHeader, Props } from "./EmailHeader";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Header",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailHeader {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const EmailHeaderStory: Story = {
+  name: "Header",
+};
diff --git a/src/emails/components/EmailHero.stories.tsx b/src/emails/components/EmailHero.stories.tsx
new file mode 100644
index 00000000000..4062f697780
--- /dev/null
+++ b/src/emails/components/EmailHero.stories.tsx
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailHero, Props } from "./EmailHero";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Hero",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailHero {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const EmailHeroStory: Story = {
+  name: "Hero",
+  args: {
+    heading: "Email heading",
+    subheading: "Email subheading",
+  },
+};
diff --git a/src/emails/components/RedesignedEmailFooter.stories.tsx b/src/emails/components/RedesignedEmailFooter.stories.tsx
new file mode 100644
index 00000000000..55823493691
--- /dev/null
+++ b/src/emails/components/RedesignedEmailFooter.stories.tsx
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { RedesignedEmailFooter, Props } from "./EmailFooter";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Redesigned footer",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <RedesignedEmailFooter {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const RepeatEmail: Story = {
+  name: "Without unsubscribe link",
+};
+
+export const WithUnsubscribeLink: Story = {
+  name: "With unsubscribe link",
+  args: {
+    unsubscribeLink: "https://example.com/unsubscribe",
+  },
+};