diff --git a/public/images/arrow-right-up.png b/public/images/arrow-right-up.png
new file mode 100644
index 000000000..2997e5360
Binary files /dev/null and b/public/images/arrow-right-up.png differ
diff --git a/public/images/money.png b/public/images/money.png
new file mode 100644
index 000000000..3eb778b0a
Binary files /dev/null and b/public/images/money.png differ
diff --git a/public/images/person.png b/public/images/person.png
new file mode 100644
index 000000000..201ad1736
Binary files /dev/null and b/public/images/person.png differ
diff --git a/public/images/upload-image.png b/public/images/upload-image.png
new file mode 100644
index 000000000..8ba65fdc4
Binary files /dev/null and b/public/images/upload-image.png differ
diff --git a/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx b/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx
new file mode 100644
index 000000000..9282ba134
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx
@@ -0,0 +1,41 @@
+import { EllipsisVertical } from "lucide-react";
+
+const index = async () => {
+  return (
+    <div className="mt-8">
+      <div className="mt-4 flex w-full items-center justify-center bg-[#FFF7F2] p-4 text-base font-normal">
+        <div className="flex w-[30%] items-center gap-1">
+          <input type="checkbox" />
+          <h4>Name</h4>
+        </div>
+        <h4 className="w-[30%] text-center">Type</h4>
+        <h4 className="w-[30%] text-center">Created Date</h4>
+        <h4 className="w-[30%] text-center">Status</h4>
+        <h4 className="w-[10%] text-center">Action</h4>
+      </div>
+
+      <div className="mt-4 flex w-full items-center border-b-2 border-border p-4 text-sm font-medium">
+        <div className="flex w-[30%] items-center gap-1">
+          <input type="checkbox" />
+          <h4>The Lemonade blender</h4>
+        </div>
+        <h4 className="w-[30%] text-center">Product</h4>
+        <h4 className="w-[30%] text-center">01-01-24</h4>
+        <h4 className="w-[30%] text-center">
+          <span className="w-fit rounded-xl bg-red-200 px-8 py-1 text-center text-white">
+            Offline
+          </span>
+        </h4>
+        <h4 className="flex w-[10%] justify-center text-center">
+          <button>
+            <span className="">
+              <EllipsisVertical />
+            </span>
+          </button>
+        </h4>
+      </div>
+    </div>
+  );
+};
+
+export default index;
diff --git a/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx b/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx
new file mode 100644
index 000000000..b213dc00f
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  Check,
+  // ChevronLeft,
+  // ChevronRight,
+  CirclePlus,
+  Filter,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+// import { Button } from "~/components/ui/button";
+import { Button } from "~/components/common/common-button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Input } from "~/components/ui/input";
+
+// import {
+//   Pagination,
+//   PaginationContent,
+//   PaginationEllipsis,
+//   PaginationItem,
+//   PaginationLink,
+// } from "~/components/ui/pagination";
+
+interface FilterDataProperties {
+  title: string;
+  selected: boolean;
+}
+
+const filterData: FilterDataProperties[] = [
+  {
+    title: "Active",
+    selected: false,
+  },
+
+  {
+    title: "Inactive",
+    selected: false,
+  },
+];
+
+const Menu = () => {
+  const [selectedFilter, setSelectedFilter] = useState<
+    FilterDataProperties | undefined
+  >();
+
+  const router = useRouter();
+
+  return (
+    <section className="float-end mt-8 pr-6">
+      <div className="">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center">
+          <div className="flex flex-row items-center gap-3">
+            <div>
+              <Input
+                id="squeezeEmail"
+                type="email"
+                placeholder="Search option..."
+                className="col-span-3 inline-flex h-11 items-start justify-start gap-2"
+              />
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="lg"
+                  className="bg-white px-3 py-2 duration-300 ease-in"
+                  variant="outline"
+                >
+                  <div className="flex flex-row items-center gap-2">
+                    <Filter size={16} color="#525252" />
+                    <div className="text-base font-normal leading-5">
+                      Filter
+                    </div>
+                  </div>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {filterData.map((data, index) => {
+                  const { selected, title } = data;
+
+                  selectedFilter?.title === title
+                    ? (data.selected = true)
+                    : (data.selected = false);
+
+                  return (
+                    <DropdownMenuItem
+                      onClick={() => setSelectedFilter(filterData[index])}
+                      key={index}
+                    >
+                      <div className="flex w-full items-center">
+                        <div className="mr-auto">{title}</div>
+
+                        <Check
+                          size={16}
+                          color="#09090b"
+                          className={`${selected ? "opacity-100" : "opacity-0"}`}
+                        />
+                      </div>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div>
+              <Button
+                onClick={() => router.push("./email/new-template")}
+                className="inline-flex h-10 items-center justify-center bg-primary"
+              >
+                <CirclePlus />
+                Create new Template
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Menu;
diff --git a/src/app/dashboard/(admin)/admin/email/new-template/page.tsx b/src/app/dashboard/(admin)/admin/email/new-template/page.tsx
new file mode 100644
index 000000000..7ced4eb0c
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/email/new-template/page.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import uploadImage from "@/../../public/images/upload-image.png";
+import {
+  AlignCenter,
+  AlignLeft,
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  ItalicIcon,
+  Link,
+  ListOrdered,
+  Pen,
+  StrikethroughIcon,
+} from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+import { Button } from "~/components/common/common-button";
+
+const NewTemplate = () => {
+  const fileUploaderReference = useRef<HTMLInputElement | null>(null);
+  const [picture, setPicture] = useState<string>("");
+
+  const savePicture = () => {
+    if (
+      fileUploaderReference.current !== null &&
+      fileUploaderReference.current.files !== null
+    ) {
+      const uploadedFile = fileUploaderReference.current?.files[0];
+      const cachedURL = URL?.createObjectURL(uploadedFile);
+      setPicture(cachedURL);
+    }
+  };
+
+  const handleImageUpload = () => {
+    if (fileUploaderReference.current !== null) {
+      fileUploaderReference.current.click();
+    }
+  };
+
+  return (
+    <div className="h-auto md:flex">
+      <div className="m-auto w-full md:w-[512px]">
+        <h3>Template name</h3>
+        <form className="bg-white p-8">
+          <input
+            type="text"
+            placeholder="Title"
+            className="borde-0 h-12 w-full px-4 text-2xl outline-none placeholder:text-2xl"
+          />
+          <div className="mt-4 flex w-full bg-[#F4F4F4] py-14">
+            <input
+              onChange={savePicture}
+              ref={fileUploaderReference}
+              hidden
+              type="file"
+              name=""
+              id=""
+            />
+            <button onClick={handleImageUpload} className="m-auto">
+              <Image src={uploadImage} alt="upload button" />
+            </button>
+          </div>
+          <div className="mt-4">
+            <div className="mb-4 flex items-center justify-between gap-2 text-xs text-gray-500">
+              <Bold />
+              <ItalicIcon />
+              <StrikethroughIcon /> |
+              <Heading1 />
+              <Heading2 />
+              <Heading3 /> |
+              <Pen />
+              <Code />
+              <Link />
+              <AlignLeft />
+              <AlignCenter />
+              <ListOrdered /> |
+            </div>
+            <textarea
+              name=""
+              id=""
+              className="h-52 w-full resize-none border border-border outline-none"
+            ></textarea>
+            <Image src={picture} alt="ccccc" />
+          </div>
+          <div className="mt-4 flex justify-end gap-2">
+            <Button className="inline-flex h-10 items-center justify-center bg-primary">
+              Save Template
+            </Button>
+            <Button className="inline-flex h-10 items-center justify-center bg-background text-black">
+              Clear
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default NewTemplate;
diff --git a/src/app/dashboard/(admin)/admin/email/page.tsx b/src/app/dashboard/(admin)/admin/email/page.tsx
index ff6dcea39..914238df0 100644
--- a/src/app/dashboard/(admin)/admin/email/page.tsx
+++ b/src/app/dashboard/(admin)/admin/email/page.tsx
@@ -1,21 +1,118 @@
-import NewTemplate from "./_components/new-template/NewTemplate";
-import Toptab from "./_components/Toptab";
+"use client";
 
-const tabs = [
+import arrow from "@/../../public/images/arrow-right-up.png";
+import money from "@/../../public/images/money.png";
+import person from "@/../../public/images/person.png";
+import { ChevronLeft, ChevronRightIcon } from "lucide-react";
+import Image from "next/image";
+
+import Table from "~/app/dashboard/(admin)/admin/email/_components/table";
+// import {Table} from "~/app/dashboard/(admin)/admin/email/_components/main-table";
+import Topmenu from "~/app/dashboard/(admin)/admin/email/_components/top-menu";
+import { Button } from "~/components/ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "~/components/ui/pagination";
+
+const cards = [
+  {
+    name: "Total Templates",
+    value: "$45,000.00",
+    comment: "+20% from last month",
+    image: money,
+  },
   {
-    name: "New Template",
-    value: "new",
-    content: <NewTemplate />,
+    name: "Recent Additions",
+    value: "4,000",
+    comment: "+10% from last month",
+    image: person,
   },
   {
-    name: "Manage Template",
-    value: "manage",
-    content: <div></div>,
+    name: "Pending actions",
+    value: "$450,000.00",
+    comment: "+150% from last month",
+    image: arrow,
   },
 ];
 
 const page = () => {
-  return <div>{<Toptab tabs={tabs} />}</div>;
+  return (
+    <section className="flex flex-col">
+      <div>
+        <h1 className="text-xl font-bold md:text-2xl">
+          Email Template Overview
+        </h1>
+        <h4 className="text-sm">Showing records from the last .....</h4>
+      </div>
+      <div className="cards mt-8 flex flex-wrap gap-4">
+        {cards.map((card, index) => {
+          return (
+            <div
+              key={index}
+              className="flex w-full items-start justify-between rounded-xl p-6 shadow-lg md:w-[33%] md:max-w-[363px]"
+            >
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium">{card.name}</h4>
+                <h2 className="text-2xl font-semibold">{card.value}</h2>
+                <span className="text-xs font-normal">{card.comment}</span>
+              </div>
+              <Image src={card.image} alt={card.name} />
+            </div>
+          );
+        })}
+      </div>
+
+      <div>
+        <Topmenu />
+      </div>
+      <div className="">
+        <Table />
+      </div>
+
+      <div className="mt-8 flex w-full items-center justify-between">
+        <p>Showing 1 to 4 of 50 items</p>
+        <div className="">
+          <Pagination className="">
+            <PaginationContent>
+              <PaginationItem>
+                <Button variant={"ghost"}>
+                  <ChevronLeft />
+                </Button>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink className="bg-transparent shadow-none" href="#">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#" isActive={true}>
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink className="bg-transparent shadow-none" href="#">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationEllipsis />
+              </PaginationItem>
+              <PaginationItem>
+                <Button variant={"ghost"}>
+                  Next <ChevronRightIcon />
+                </Button>
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>
+    </section>
+  );
+  // < div > {< Toptab tabs = { tabs } />}</div>;
 };
 
 export default page;