diff --git a/packages/email/package.json b/packages/email/package.json
index 0ffc2bed..1818dd9e 100644
--- a/packages/email/package.json
+++ b/packages/email/package.json
@@ -20,6 +20,10 @@
     "./send": {
       "types": "./dist/send.d.ts",
       "default": "./dist/send.js"
+    },
+    "./templates": {
+      "types": "./dist/templates/index.d.ts",
+      "default": "./dist/templates/index.js"
     }
   },
   "peerDependencies": {
diff --git a/packages/storybook/src/templates/email/email.stories.svelte b/packages/storybook/src/templates/email/email.stories.svelte
new file mode 100644
index 00000000..361a6e3e
--- /dev/null
+++ b/packages/storybook/src/templates/email/email.stories.svelte
@@ -0,0 +1,64 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { EmailPreview } from '@cio/ui';
+  import {
+    forgotPasswordHtml,
+    welcomeHtml,
+    verifyEmailHtml,
+    courseWelcomeHtml,
+    inviteTeacherHtml,
+    newsfeedPostHtml,
+    studentJoinedHtml
+  } from './fixtures';
+
+  const { Story } = defineMeta({
+    title: 'Templates/Email',
+    component: EmailPreview.Preview,
+    parameters: {
+      layout: 'fullscreen'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Auth: Verify Email">
+  {#snippet template()}
+    <EmailPreview.Preview html={verifyEmailHtml} />
+  {/snippet}
+</Story>
+
+<Story name="Auth: Forgot Password">
+  {#snippet template()}
+    <EmailPreview.Preview html={forgotPasswordHtml} />
+  {/snippet}
+</Story>
+
+<Story name="Auth: Welcome">
+  {#snippet template()}
+    <EmailPreview.Preview html={welcomeHtml} />
+  {/snippet}
+</Story>
+
+<Story name="Org: Course Welcome">
+  {#snippet template()}
+    <EmailPreview.Preview html={courseWelcomeHtml} />
+  {/snippet}
+</Story>
+
+<Story name="Org: Invite Teacher">
+  {#snippet template()}
+    <EmailPreview.Preview html={inviteTeacherHtml} />
+  {/snippet}
+</Story>
+
+<Story name="Org: Newsfeed Post">
+  {#snippet template()}
+    <EmailPreview.Preview html={newsfeedPostHtml} />
+  {/snippet}
+</Story>
+
+<Story name="System Notification: Student Joined">
+  {#snippet template()}
+    <EmailPreview.Preview html={studentJoinedHtml} />
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/templates/email/fixtures.ts b/packages/storybook/src/templates/email/fixtures.ts
index 83d433c8..c26023aa 100644
--- a/packages/storybook/src/templates/email/fixtures.ts
+++ b/packages/storybook/src/templates/email/fixtures.ts
@@ -1,4 +1,4 @@
-import { getDefaultTemplate } from '@cio/email';
+import { getDefaultTemplate } from '@cio/email/templates';
 
 // ─── Sample content for each use case ────────────────────────────────────────