diff --git a/app/routes/admin.email._index.tsx b/app/routes/admin.email._index.tsx
new file mode 100644
index 00000000..8534225d
--- /dev/null
+++ b/app/routes/admin.email._index.tsx
@@ -0,0 +1,106 @@
+import { Link } from "@remix-run/react";
+import React from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+
+interface TemplateOptionProperties {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  href: string;
+}
+
+const EmailManagementDashboard: React.FC = () => {
+  return (
+    <div className="flex">
+      <div className="w-64"></div> {/* Replace with Sidebar Nav */}
+      <div className="h-screen flex-1 bg-white p-8">
+        <Tabs defaultValue="new-template" className="w-full">
+          <TabsList className="grid h-[2.8125rem] max-w-72 grid-cols-2 divide-x-2 border bg-white p-0 text-sm text-[#8e8e83]">
+            <TabsTrigger
+              className="data-[state=active]:h-full data-[state=active]:rounded-none data-[state=active]:bg-[#F6F7F9] data-[state=active]:font-bold data-[state=active]:text-[#F97316]"
+              value="new-template"
+            >
+              New Template
+            </TabsTrigger>
+            <TabsTrigger
+              className="data-[state=active]:h-full data-[state=active]:rounded-none data-[state=active]:bg-[#F6F7F9] data-[state=active]:font-bold data-[state=active]:text-[#F97316]"
+              value="manage-templates"
+            >
+              Manage Templates
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="new-template">
+            <Card className="max-w-3xl border-none">
+              <CardHeader className="px-0">
+                <CardTitle className="text-2xl text-[#0A0A0A]">
+                  Create a New Template
+                </CardTitle>
+                <CardDescription className="text-base text-[#0a0a0a] text-opacity-60">
+                  Choose an option below to begin crafting your email design.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="mt-3 grid max-w-[39.25rem] gap-4 px-0 md:grid-cols-2">
+                <TemplateOption
+                  title="Generate with HTML"
+                  description="Create an email template by pasting your custom-coded template"
+                  icon={<CodeIcon />}
+                  href="/admin/email/generate-html"
+                />
+                <TemplateOption
+                  title="Edit In-built Template"
+                  description="Create an email template by choosing from our custom template library"
+                  icon={<FileIcon />}
+                  href="/admin/email/edit-template"
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="manage-templates">
+            {/* Content for managing templates */}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+const TemplateOption: React.FC<TemplateOptionProperties> = ({
+  title,
+  description,
+  icon,
+  href,
+}) => {
+  return (
+    <Link to={href} className="block focus:outline-none">
+      <Card className="transition-all hover:border hover:border-[#F97316] hover:bg-[#f6f7f988] focus:border focus:border-[#F97316]">
+        <CardContent className="flex items-center gap-5 px-5 py-4">
+          {icon}
+          <div>
+            <p className="flex flex-col gap-2 text-sm text-[#0A0A0A]">
+              <span className="font-semibold">{title}</span>
+              <span> {description}</span>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};
+
+const CodeIcon: React.FC = () => {
+  return <img src="/code-icon.svg" alt="code icon" className="h-6 w-6" />;
+};
+
+const FileIcon: React.FC = () => {
+  return <img src="/edit-icon.svg" alt="edit icon" className="h-6 w-6" />;
+};
+
+export default EmailManagementDashboard;
diff --git a/app/routes/admin.email.edit-template.tsx b/app/routes/admin.email.edit-template.tsx
new file mode 100644
index 00000000..5a30e845
--- /dev/null
+++ b/app/routes/admin.email.edit-template.tsx
@@ -0,0 +1,5 @@
+const EditTemplate = () => {
+  return <div>EditTemplate</div>;
+};
+
+export default EditTemplate;
diff --git a/app/routes/admin.email.generate-html.tsx b/app/routes/admin.email.generate-html.tsx
new file mode 100644
index 00000000..431ff95b
--- /dev/null
+++ b/app/routes/admin.email.generate-html.tsx
@@ -0,0 +1,5 @@
+const GenerateHTMLTemplate = () => {
+  return <div>GenerateHTMLTemplate</div>;
+};
+
+export default GenerateHTMLTemplate;
diff --git a/package-lock.json b/package-lock.json
index a63564e2..59abc5f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14487,4 +14487,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/public/code-icon.svg b/public/code-icon.svg
new file mode 100644
index 00000000..785d96b5
--- /dev/null
+++ b/public/code-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M16 18L22 12L16 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 6L2 12L8 18" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/edit-icon.svg b/public/edit-icon.svg
new file mode 100644
index 00000000..0861ccd4
--- /dev/null
+++ b/public/edit-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M14.5 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7.5L14.5 2Z" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V8H20" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>