diff --git a/app/components/InvoiceEmail/DetailTable.tsx b/app/components/EmailSubRenewal/InvoiceEmail/DetailTable.tsx
similarity index 100%
rename from app/components/InvoiceEmail/DetailTable.tsx
rename to app/components/EmailSubRenewal/InvoiceEmail/DetailTable.tsx
diff --git a/app/components/InvoiceEmail/EmailFooter.tsx b/app/components/EmailSubRenewal/InvoiceEmail/EmailFooter.tsx
similarity index 100%
rename from app/components/InvoiceEmail/EmailFooter.tsx
rename to app/components/EmailSubRenewal/InvoiceEmail/EmailFooter.tsx
diff --git a/app/components/InvoiceEmail/OrderSummaryTable.tsx b/app/components/EmailSubRenewal/InvoiceEmail/OrderSummaryTable.tsx
similarity index 100%
rename from app/components/InvoiceEmail/OrderSummaryTable.tsx
rename to app/components/EmailSubRenewal/InvoiceEmail/OrderSummaryTable.tsx
diff --git a/app/email/templates/invoice-email-temp/InvoiceEmail.tsx b/app/email/templates/invoice-email-temp/InvoiceEmail.tsx
index 199b8cbf..9d1ab2f6 100644
--- a/app/email/templates/invoice-email-temp/InvoiceEmail.tsx
+++ b/app/email/templates/invoice-email-temp/InvoiceEmail.tsx
@@ -12,9 +12,9 @@ import {
   Text,
 } from "@react-email/components";
 
-import DetailTable from "~/components/InvoiceEmail/DetailTable";
-import EmailFooter from "~/components/InvoiceEmail/EmailFooter";
-import OrderSummaryTable from "~/components/InvoiceEmail/OrderSummaryTable";
+import DetailTable from "~/components/EmailSubRenewal/InvoiceEmail/DetailTable";
+import EmailFooter from "~/components/EmailSubRenewal/InvoiceEmail/EmailFooter";
+import OrderSummaryTable from "~/components/EmailSubRenewal/InvoiceEmail/OrderSummaryTable";
 import { invoiceDetails, orderSummary, paymentDetails } from "./data";
 
 interface infoProperties {
diff --git a/app/routes/admin.email.edit-template.tsx b/app/routes/admin.email.edit-template.tsx
index 5a30e845..7e0421d1 100644
--- a/app/routes/admin.email.edit-template.tsx
+++ b/app/routes/admin.email.edit-template.tsx
@@ -1,5 +1,112 @@
+import { useNavigate } from "@remix-run/react";
+import { useState } from "react";
+
+import Button from "~/components/customButton/customButton";
+import accordian from "../../public/icons/accordion.png";
+
 const EditTemplate = () => {
-  return <div>EditTemplate</div>;
+  const navigate = useNavigate();
+
+  const [content, setContent] = useState(
+    "Hi Chiviva it's been a long time...and we've missed you as much as you have missed us, This year, we are excited to introduce the first ever INBOUND hybrid experience including the return of our in-person event in Boston (safety first in compliance with all state and federal regulation and recomendations) and an upgraded online fully immersive experience. Passes are now on a sale, and you can learn about our pass types and on our registration page or read the summarry pass perks below. Finally the count down begins!",
+  );
+
+  const [BrandContent, setBrandHtml] = useState(
+    "-Forever Yours, The INBOUND Team",
+  );
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleChange = (event) => {
+    setContent(event.target.value);
+    setBrandHtml(event.target.value);
+  };
+
+  const toggleEdit = () => {
+    setIsEditing(!isEditing);
+  };
+
+  return (
+    <div>
+      <div className="mx-8 my-8 flex flex-col gap-6">
+        <ul className="flex gap-4">
+          <li className="flex items-center gap-3">
+            Email
+            <span>
+              <img src={accordian} alt="arrow right icon" />
+            </span>
+          </li>
+          <li
+            className="flex cursor-pointer items-center gap-3"
+            onClick={() => navigate("/admin/email")}
+          >
+            New Template
+            <span>
+              <img src={accordian} alt="arrow right icon" />
+            </span>
+          </li>
+          <li
+            className="flex cursor-pointer items-center gap-3"
+            onClick={() => navigate("/admin/email/generate-html")}
+          >
+            Generate with HTML
+          </li>
+        </ul>
+        <div>
+          <h1 className="text-2xl font-bold">
+            Preview Your Generated Template
+          </h1>
+          <div className="flex gap-8">
+            <p className="reviewLayout text-base">
+              Review the layout and look of your email template generated
+              generated from the pasted HTML code to ensure you have pasted the
+              right template.
+            </p>
+            <div>
+              <button
+                onClick={toggleEdit}
+                className="text-nowrap rounded-xl bg-black px-3 py-2 text-white"
+              >
+                Edit Content
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-center rounded-lg border border-solid border-border bg-background p-4">
+          <div className="flex h-5/6 w-11/12 items-center justify-center rounded-lg border border-solid border-border bg-white py-12">
+            <ul className="p4 flex w-7/12 flex-col items-center justify-center rounded-lg border p-6 leading-7">
+              <li>
+                {isEditing ? (
+                  <div>
+                    <input
+                      type="text"
+                      value={content}
+                      onChange={handleChange}
+                      className="w-fit outline-none"
+                    />
+                    <Button className="ml-6 bg-slate-200" onClick={toggleEdit}>
+                      Save
+                    </Button>
+                  </div>
+                ) : (
+                  <div>
+                    <p>{content}</p>
+                    <br />
+                    <br />
+                    <p>{BrandContent}</p>
+                  </div>
+                )}
+                <br />
+                <br />
+              </li>
+              <Button className="w-32 font-bold text-background">
+                Register Here
+              </Button>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default EditTemplate;
diff --git a/package-lock.json b/package-lock.json
index 59abc5f5..a63564e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14487,4 +14487,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42d896a4..a304966f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10772,7 +10772,9 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
+
   terser-webpack-plugin@5.3.10(@swc/core@1.3.101(@swc/helpers@0.5.2))(esbuild@0.19.11)(webpack@5.93.0(esbuild@0.17.6)):
+
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -11129,7 +11131,9 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
+
       terser-webpack-plugin: 5.3.10(@swc/core@1.3.101(@swc/helpers@0.5.2))(esbuild@0.19.11)(webpack@5.93.0(esbuild@0.17.6))
+
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -11217,4 +11221,4 @@ snapshots:
 
   zod@3.23.8: {}
 
-  zwitch@2.0.4: {}
+  zwitch@2.0.4: {}
\ No newline at end of file