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/templates/EmailFooter.tsx b/src/emails/components/EmailFooter.tsx
similarity index 100%
rename from src/emails/templates/EmailFooter.tsx
rename to src/emails/components/EmailFooter.tsx
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/templates/EmailHeader.tsx b/src/emails/components/EmailHeader.tsx
similarity index 100%
rename from src/emails/templates/EmailHeader.tsx
rename to src/emails/components/EmailHeader.tsx
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/templates/HeaderStyles.tsx b/src/emails/components/HeaderStyles.tsx
similarity index 100%
rename from src/emails/templates/HeaderStyles.tsx
rename to src/emails/components/HeaderStyles.tsx
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",
+  },
+};
diff --git a/src/emails/templates/boilerplate/BoilerplateEmail.tsx b/src/emails/templates/boilerplate/BoilerplateEmail.tsx
index b6ee278fc0f..a3d432c3dc1 100644
--- a/src/emails/templates/boilerplate/BoilerplateEmail.tsx
+++ b/src/emails/templates/boilerplate/BoilerplateEmail.tsx
@@ -4,8 +4,8 @@
 
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;
diff --git a/src/emails/templates/breachAlert/BreachAlertEmail.tsx b/src/emails/templates/breachAlert/BreachAlertEmail.tsx
index 926b4f76435..35a43daea9b 100644
--- a/src/emails/templates/breachAlert/BreachAlertEmail.tsx
+++ b/src/emails/templates/breachAlert/BreachAlertEmail.tsx
@@ -4,8 +4,11 @@
 
 import type { SubscriberRow } from "knex/types/tables";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter, RedesignedEmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import {
+  EmailFooter,
+  RedesignedEmailFooter,
+} from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 import { HibpLikeDbBreach } from "../../../utils/hibp";
 import { BreachCard } from "../../components/BreachCard";
 import { FeatureFlagName } from "../../../db/tables/featureFlags";
@@ -19,7 +22,7 @@ import { DashboardSummary } from "../../../app/functions/server/dashboard";
 import { ResolutionRelevantBreachDataTypes } from "../../../app/functions/universal/breach";
 import { EmailBanner } from "../../components/EmailBanner";
 import { DataPointCount } from "../../components/EmailDataPointCount";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;
diff --git a/src/emails/templates/firstDataBrokerRemovalFixed/FirstDataBrokerRemovalFixed.tsx b/src/emails/templates/firstDataBrokerRemovalFixed/FirstDataBrokerRemovalFixed.tsx
index be2994c344c..9ab84688eba 100644
--- a/src/emails/templates/firstDataBrokerRemovalFixed/FirstDataBrokerRemovalFixed.tsx
+++ b/src/emails/templates/firstDataBrokerRemovalFixed/FirstDataBrokerRemovalFixed.tsx
@@ -3,9 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;
diff --git a/src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.tsx b/src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.tsx
index c4a34c4c60d..440c3cb24f6 100644
--- a/src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.tsx
+++ b/src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.tsx
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import type { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { RedesignedEmailFooter } from "../EmailFooter";
+import { RedesignedEmailFooter } from "../../components/EmailFooter";
 import { EmailHero } from "../../components/EmailHero";
 import { DataPointCount } from "../../components/EmailDataPointCount";
 import { DashboardSummary } from "../../../app/functions/server/dashboard";
@@ -11,7 +11,7 @@ import { EmailBanner } from "../../components/EmailBanner";
 import { getPremiumSubscriptionUrl } from "../../../app/functions/server/getPremiumSubscriptionInfo";
 import { isEligibleForPremium } from "../../../app/functions/universal/premium";
 import { getSignupLocaleCountry } from "../../functions/getSignupLocaleCountry";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { sumSanitizedDataPoints } from "../../functions/reduceSanitizedDataPoints";
 import { modifyAttributionsForUrl } from "../../../app/functions/universal/attributions";
diff --git a/src/emails/templates/monthlyActivityPlus/MonthlyActivityPlusEmail.tsx b/src/emails/templates/monthlyActivityPlus/MonthlyActivityPlusEmail.tsx
index 723a8245182..c78d835b44b 100644
--- a/src/emails/templates/monthlyActivityPlus/MonthlyActivityPlusEmail.tsx
+++ b/src/emails/templates/monthlyActivityPlus/MonthlyActivityPlusEmail.tsx
@@ -5,9 +5,9 @@
 import { DashboardSummary } from "../../../app/functions/server/dashboard";
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;
diff --git a/src/emails/templates/signupReport/SignupReportEmail.tsx b/src/emails/templates/signupReport/SignupReportEmail.tsx
index e1fa0c5b7b4..1cab4861c8e 100644
--- a/src/emails/templates/signupReport/SignupReportEmail.tsx
+++ b/src/emails/templates/signupReport/SignupReportEmail.tsx
@@ -4,11 +4,11 @@
 
 import { Fragment } from "react";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 import { HibpLikeDbBreach } from "../../../utils/hibp";
 import { BreachCard } from "../../components/BreachCard";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;
diff --git a/src/emails/templates/verifyEmailAddress/VerifyEmailAddressEmail.tsx b/src/emails/templates/verifyEmailAddress/VerifyEmailAddressEmail.tsx
index eaef262236b..3901a37e4ad 100644
--- a/src/emails/templates/verifyEmailAddress/VerifyEmailAddressEmail.tsx
+++ b/src/emails/templates/verifyEmailAddress/VerifyEmailAddressEmail.tsx
@@ -4,9 +4,9 @@
 
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;