diff --git a/src/app/dashboard/(admin)/_components/layout/logo/index.tsx b/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
index 91298a4ea..5cd558f9f 100644
--- a/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
+++ b/src/app/dashboard/(admin)/_components/layout/logo/index.tsx
@@ -5,16 +5,18 @@ const DashboardLogo = () => {
   return (
     <Link
       href="/"
-      className="flex w-full max-w-[24px] items-center justify-center gap-2.5 py-[14px] md:justify-start"
+      className="flex w-full items-center justify-center gap-2.5 py-[14px] md:justify-start"
     >
-      <Image
-        src="/logo/logo.png"
-        alt="Hgn boiler plate logo"
-        height={24}
-        width={24}
-        data-testid="admin-logo"
-        className="h-full w-full object-contain"
-      />
+      <div>
+        <Image
+          src="/logo/logo.png"
+          alt="Hgn boiler plate logo"
+          height={24}
+          width={24}
+          data-testid="admin-logo"
+          className="h-full w-full object-contain"
+        />
+      </div>
       <span
         className="neutral-dark hidden text-2xl font-semibold md:block"
         data-testid="admin-logo-text"
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index 935806e9c..693fca210 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -10,8 +10,8 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
+import DashboardLogo from "~/app/dashboard/(admin)/_components/layout/logo";
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
-import Logo from "~/components/common/logo";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import {
   Popover,
@@ -47,28 +47,28 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">
-        <div className="flex w-full max-w-[470px] justify-between gap-1">
-          <div className="flex w-full max-w-[200px] items-center justify-start gap-1">
-            <Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
-            <Logo />
+        <div className="flex gap-[50px]">
+          <div className="flex w-full items-center justify-start gap-[15px]">
+            <Menu className="h-[30px] w-[30px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
+            <DashboardLogo />
           </div>
-          <div className="flex w-full max-w-[290px] items-center justify-between gap-1">
+          <div className="hidden items-center justify-between gap-[22px] lg:flex">
             {navlinks.map((item, index) => (
               <Link
                 key={index}
                 href={item.link}
-                className={`text-sm font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
+                className={`text-xs font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
               >
                 {item.route}
               </Link>
             ))}
           </div>
         </div>
-        <div className="flex w-full max-w-[440px] items-center justify-between gap-2 bg-[#FDFDFD]">
+        <div className="flex items-center justify-between gap-2 bg-[#FDFDFD]">
           <div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
             <SearchIcon
               data-testid="search"
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 5c1ab4e0a..a7626bb9a 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -10,7 +10,7 @@ export default function AdminLayout({
   return (
     <div className="grid min-h-screen grid-rows-[auto_1fr]">
       <UserNavbar />
-      <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
+      <div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
       </div>
     </div>
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
new file mode 100644
index 000000000..c8cffcf8b
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
@@ -0,0 +1,128 @@
+import { X } from "lucide-react";
+import React, { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import BlurImage from "~/components/miscellaneous/blur-image";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+import { EditProduct } from "../../_components/schema/schema";
+
+type Properties = {
+  form: UseFormReturn<EditProduct>;
+  name: string;
+};
+const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  event.preventDefault();
+};
+const ProjectLogo = ({ form, name }: Properties) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const projectLogo = form.getValues("media");
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = event.dataTransfer.files[0] as File;
+
+    if (target.type === "image/gif") {
+      return name;
+    }
+    const event_data = {
+      target: {
+        files: event.dataTransfer.files,
+      },
+    };
+    handleImageChange(
+      event_data as unknown as React.ChangeEvent<HTMLInputElement>,
+    );
+    setIsDragging(false);
+  };
+
+  return (
+    <div className="relative grid h-full w-[inherit] place-items-center rounded-xl bg-[#FAFAFA]">
+      <div
+        data-upload
+        className="flexx absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/30 text-black"
+      >
+        <div className="grid h-full w-full place-items-center rounded-xl bg-white/80 uppercase backdrop-blur-xl">
+          <p className="items-center md:flex md:flex-col">
+            <span className="animate-pulse md:text-xs">Uploading...</span>{" "}
+            <b>10%</b>
+          </p>
+        </div>
+      </div>
+
+      {isDragging && (
+        <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
+          <p className="text-xl text-white">Drop to upload</p>
+        </div>
+      )}
+
+      {projectLogo.url && typeof projectLogo.url === "string" ? (
+        <div className="absolute inset-0 h-full w-full rounded-xl">
+          <div className="h-full w-full overflow-hidden rounded-xl">
+            <BlurImage
+              src={projectLogo.url}
+              width={500}
+              height={500}
+              alt="nft"
+              className={cn(
+                "size-full object-cover transition-all duration-300",
+              )}
+            />
+          </div>
+          <Button
+            disabled={false}
+            variant={"ghost"}
+            size={"icon"}
+            type="button"
+            className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 hover:text-white disabled:cursor-not-allowed disabled:bg-black/40 md:-right-1 md:-top-1 md:bg-white/20 md:disabled:bg-white/20"
+          >
+            <X className="size-8 min-[500px]:size-10" />
+          </Button>
+        </div>
+      ) : (
+        <div
+          onDrop={handleDrop}
+          onDragOver={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsDragging(true);
+          }}
+          onDragLeave={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsDragging(false);
+          }}
+          className="grid h-full w-full place-items-center"
+        >
+          <label
+            className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-y-2 text-neutral-dark-1 hover:text-black"
+            htmlFor={`media`}
+          >
+            <Button
+              type="button"
+              variant={"secondary"}
+              size={"sm"}
+              className="pointer-events-none flex !h-[32px] items-center bg-white text-sm text-[#0F172A] shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)]"
+            >
+              Upload New
+            </Button>
+            <p className="text-xs md:text-sm">Add Image or drag it here</p>
+          </label>
+          <input
+            type="file"
+            hidden
+            accept=" image/*"
+            name={`media`}
+            id={`media`}
+            onChange={handleImageChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProjectLogo;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
new file mode 100644
index 000000000..3d166772b
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
@@ -0,0 +1,16 @@
+import { notFound } from "next/navigation";
+
+import ProductDetailsContent from "./product-details-content";
+
+const ProductDetailsPage = async ({
+  params,
+}: {
+  params: { productId: string };
+}) => {
+  const id = params.productId;
+  if (!id) return notFound();
+
+  return <ProductDetailsContent productId={id} />;
+};
+
+export default ProductDetailsPage;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
new file mode 100644
index 000000000..926992880
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
@@ -0,0 +1,468 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, Loader, Plus } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
+import Link from "next/link";
+import { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import WordCounter from "~/components/miscellaneous/WordCounter";
+import { Button } from "~/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Textarea } from "~/components/ui/textarea";
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
+import { ProductTableProperties } from "~/types/admin-product.types";
+import { EditProductSchema, MAX_CHAR } from "../_components/schema/schema";
+import { STOCKS_SELECT } from "../data/categories.mock";
+import { shouldDisableAddStocksButton } from "../data/stocks.mock";
+import ProjectLogo from "./form-images/project-logo";
+
+const ProductDetailsComponent = ({
+  product,
+}: {
+  product: ProductTableProperties;
+}) => {
+  const { addProduct } = useProducts();
+  const [isLoading, startTransition] = useTransition();
+  const router = useRouter();
+
+  const new_product_form = useForm<z.infer<typeof EditProductSchema>>({
+    defaultValues: {
+      product_name: product.name || "",
+      description: product.description || "",
+      price: "",
+      category: "",
+      quantity: "",
+      media: {
+        url: product.image || "",
+        id: "",
+      },
+      stocks: [
+        {
+          id: "P0001",
+          size: "Small",
+          stock: "0",
+          price: "",
+        },
+        {
+          id: "P0002",
+          size: "Standard",
+          stock: String(product.stock) || "0",
+          price: String(product.price) || "",
+        },
+        {
+          id: "P0003",
+          size: "Large",
+          stock: "0",
+          price: "",
+        },
+      ],
+    },
+    resolver: zodResolver(EditProductSchema),
+  });
+  const FORM_STOCKS = new_product_form.getValues("stocks");
+  const handleAddNewStock = () => {
+    const previousStocks = FORM_STOCKS;
+    new_product_form.setValue("stocks", [
+      ...previousStocks,
+      {
+        id: `S${generateId(5)}`,
+        size: "",
+        stock: "",
+        price: "",
+      },
+    ]);
+  };
+
+  const hasProjectLogo = new_product_form.getValues("media.url");
+  new_product_form.watch("stocks");
+  // DISABLE
+  const disableAddStockButton = shouldDisableAddStocksButton({
+    stocks: FORM_STOCKS,
+  });
+  const onSubmit = async (values: z.infer<typeof EditProductSchema>) => {
+    startTransition(async () => {
+      const date_data = getCurrentDateTime();
+      await simulateDelay(3);
+      addProduct({
+        product_id: `P${generateId(6)}`,
+        category: values.category,
+        description: values.description,
+        name: values.product_name,
+        price: Number(values.price),
+        stock: Number(values.quantity),
+        image: "/product/product-image.webp",
+        status: "in_stock",
+        date_added: date_data.date_added,
+        time: date_data.time,
+      });
+      new_product_form.reset();
+    });
+  };
+
+  return (
+    <Form {...new_product_form}>
+      <form
+        onSubmit={new_product_form.handleSubmit(onSubmit)}
+        className="relative flex w-full flex-col gap-y-8 md:gap-y-10"
+      >
+        <div className="sticky top-0 flex w-full items-center justify-between bg-white/80 py-2 backdrop-blur">
+          <div className="flex items-center gap-x-2 md:gap-x-4">
+            <Link
+              href={"/dashboard/products"}
+              className="rounded-sm border p-0.5 hover:bg-gray-200"
+            >
+              <ArrowLeft />
+            </Link>
+            <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
+              {product.name}
+            </span>
+            <span
+              className={cn(
+                "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
+              )}
+            >
+              <span
+                className={cn("size-3 rounded-full", {
+                  "bg-[#6DC347]": product.status === "in_stock",
+                  "bg-[#DC2626]": product.status === "out_of_stock",
+                  "bg-[#EAB308]": product.status === "low_on_stock",
+                })}
+              />
+              {product.status === "in_stock" && "In Stock"}
+              {product.status === "low_on_stock" && "Low on Stock"}
+              {product.status === "out_of_stock" && "Out of Stock"}
+            </span>
+          </div>
+          <div className="flex items-center justify-end gap-x-4">
+            <Button
+              disabled={isLoading}
+              onClick={() => router.push("/dashboard/products")}
+              type="button"
+              variant="outline"
+              size="default"
+              className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+            >
+              Discard
+            </Button>
+            <Button
+              disabled={isLoading}
+              type="submit"
+              variant="default"
+              size="default"
+              className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+            >
+              {isLoading ? (
+                <span className="flex items-center gap-x-2">
+                  <span className="animate-pulse">Saving...</span>{" "}
+                  <Loader className="size-4 animate-spin sm:size-5" />
+                </span>
+              ) : (
+                <span>Save changes</span>
+              )}
+            </Button>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-y-8 md:grid md:grid-cols-2 md:gap-6">
+          {" "}
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Product Details
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Make quick changes to your product.
+                </p>
+              </div>
+              <FormField
+                control={new_product_form.control}
+                name="product_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-medium text-neutral-dark-2">
+                      Title<span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        id="product_name"
+                        disabled={isLoading}
+                        placeholder="Product name"
+                        className="bg-transparent placeholder:text-slate-400"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={new_product_form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-medium text-neutral-dark-2">
+                      Description
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative flex w-full flex-col gap-y-2">
+                        <Textarea
+                          disabled={isLoading}
+                          placeholder="Enter product description"
+                          className={cn(
+                            "h-20 resize-none bg-transparent placeholder:text-slate-400",
+                            field.value.length > MAX_CHAR
+                              ? "focus-visible:outline-red-500 focus-visible:ring-red-500"
+                              : "",
+                          )}
+                          {...field}
+                        />
+                        <div className="flex w-full items-center justify-between">
+                          <span className="whitespace-nowrap text-sm text-slate-500">
+                            Maximum of {MAX_CHAR} characters
+                          </span>
+                          <WordCounter length={MAX_CHAR} word={field.value} />
+                        </div>
+                      </div>
+                    </FormControl>
+                    <FormMessage data-testid="password-error" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Stock
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Add and remove products
+                </p>
+              </div>
+              <div className="flex flex-col divide-y divide-gray-200 rounded-[6px] border">
+                <div className="grid w-full grid-cols-3 gap-2 bg-[#F1F5F9] p-4 text-sm font-medium text-neutral-dark-2">
+                  <span>Size</span>
+                  <span>Stock</span>
+                  <span>Price</span>
+                </div>
+
+                <AnimatePresence>
+                  {FORM_STOCKS.map((stock, index) => (
+                    <motion.div
+                      initial={{ y: 10, opacity: 0 }}
+                      animate={{ y: 0, opacity: 1 }}
+                      transition={{ duration: 0.3, delay: 0.1 * index }}
+                      layout
+                      layoutId={stock.id}
+                      key={stock.id}
+                      className="relative grid w-full grid-cols-3 items-center gap-2 p-4"
+                    >
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.size`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  disabled={isLoading}
+                                  name={`stocks.${index}.size`}
+                                  id={`stocks.${index}.size`}
+                                  type="text"
+                                  className="placeholder:text-400/50 h-10 w-full rounded-lg border-none bg-transparent px-4 text-sm text-neutral-dark-2 outline-none"
+                                  placeholder="size"
+                                />
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.stock`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  disabled={isLoading}
+                                  name={`stocks.${index}.stock`}
+                                  id={`stocks.${index}.stock`}
+                                  type="text"
+                                  className="placeholder:text-400/50 h-10 w-full rounded-lg border bg-transparent px-4 text-sm text-neutral-dark-2 outline-none"
+                                  placeholder="0"
+                                />
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={new_product_form.control}
+                        name={`stocks.${index}.price`}
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="relative">
+                              <FormControl>
+                                <div className="relative flex w-full items-center">
+                                  <span className="absolute left-2 font-medium text-black">
+                                    $
+                                  </span>
+
+                                  <Input
+                                    disabled={isLoading}
+                                    placeholder="0.00"
+                                    {...field}
+                                    name={`stocks.${index}.price`}
+                                    id={`stocks.${index}.price`}
+                                    type="text"
+                                    className="placeholder:text-400/50 h-10 w-full rounded-lg border bg-transparent pl-6 pr-4 text-sm text-neutral-dark-2 outline-none"
+                                  />
+                                </div>
+                              </FormControl>
+                              <FormMessage className="absolute -bottom-[17px] whitespace-nowrap text-xs font-light" />
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+
+                      {/* {STOCKS.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveStock(stock.id)}
+                          className="hidden place-items-center rounded-lg bg-[#585858] px-4 py-2 text-xl font-medium text-white transition-all duration-200 active:scale-90 sm:text-3xl md:grid"
+                        >
+                          <Minus className="size-10" />
+                        </button>
+                      )} */}
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+              </div>
+              <Button
+                type="button"
+                disabled={isLoading || disableAddStockButton}
+                onClick={handleAddNewStock}
+                className="w-fit bg-transparent"
+                variant="outline"
+              >
+                Add a variant
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Media
+                </h2>
+                <p className="text-xs text-neutral-dark-2">
+                  Upload media for your product
+                </p>
+              </div>
+              <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
+                <div className="flex size-full items-center justify-center gap-x-1">
+                  {" "}
+                  <ProjectLogo form={new_product_form} name="media" />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={isLoading}
+                    className="bg-transparent py-10 sm:py-20"
+                  >
+                    <Plus />
+                  </Button>
+                </div>
+                {hasProjectLogo.length === 0 &&
+                  new_product_form.formState.errors.media && (
+                    <p className="mt-0.5 w-full justify-self-start border-l-4 border-red-500 bg-red-500/10 px-2 text-sm font-bold text-red-500">
+                      {new_product_form.formState.errors.media.message}
+                    </p>
+                  )}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Stock
+                </h2>
+              </div>
+              <FormField
+                control={new_product_form.control}
+                name="category"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="font-medium text-neutral-dark-2">
+                      Availability
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="bg-transparent">
+                          <SelectValue placeholder="Select Availability" />
+                        </SelectTrigger>
+                        <SelectContent className="z-[99999]">
+                          <SelectGroup>
+                            {STOCKS_SELECT.map((stock) => (
+                              <SelectItem key={stock.value} value={stock.value}>
+                                {stock.label}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="flex flex-1 flex-col gap-y-2 rounded-[6px] p-4 py-10 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3">
+                <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
+                  Archive
+                </h2>
+                <p className="text-xs text-neutral-dark-2">Archive a product</p>
+              </div>
+              <Button
+                type="button"
+                disabled={isLoading}
+                onClick={handleAddNewStock}
+                className="w-fit bg-transparent"
+                variant="outline"
+              >
+                Archive {product?.name}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default ProductDetailsComponent;
diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
new file mode 100644
index 000000000..2c6556361
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-content.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { ChevronRight, Loader } from "lucide-react";
+
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import ProductDetailsComponent from "./product-details-component";
+
+const ProductDetailsContent = ({ productId }: { productId: string }) => {
+  const { products } = useProducts();
+  const product = products?.find((p) => p.product_id === productId);
+
+  if (!product)
+    return (
+      <div>
+        <p className="flex items-center gap-x-2 text-neutral-dark-2">
+          <span className="animate-pulse">Loading...</span>{" "}
+          <Loader className="size-4 animate-spin sm:size-5" />.
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="relative flex w-full flex-col gap-y-8 px-2 py-4 sm:px-4 sm:py-8 md:gap-y-12 md:pb-20">
+      <div className="flex w-fit items-center gap-x-2 rounded-md border bg-[#fafafa] px-2 py-2 text-sm sm:px-4">
+        <span className="font-medium text-neutral-dark-2 md:font-semibold">
+          Products
+        </span>
+        <ChevronRight className="size-3 text-neutral-dark-1 sm:size-4" />
+        <span className="text-neutral-dark-1">Product Details</span>
+      </div>
+      <ProductDetailsComponent product={product} />
+    </div>
+  );
+};
+
+export default ProductDetailsContent;
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
index 57132cddc..0fa32827e 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
@@ -29,7 +29,7 @@ import { Textarea } from "~/components/ui/textarea";
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
 import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import { cn, generateId, getCurrentDateTime, simulateDelay } from "~/lib/utils";
-import { CATEGORIES } from "../data/categories.moct";
+import { CATEGORIES } from "../data/categories.mock";
 import ProjectLogo from "./form-images/project-logo";
 import { NewProductSchema } from "./schema/schema";
 
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
index 3bd423007..9bbed4cd8 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-body-shadcn.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { AnimatePresence, motion } from "framer-motion";
 import { Edit2, MoreVertical, Trash } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import { useEffect, useRef } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
@@ -33,6 +34,7 @@ const ProductBodyShadcn = ({
     setIsDelete,
   } = useProductModal();
   const modalReference = useRef<HTMLDivElement>(null);
+  const router = useRouter();
 
   useEffect(() => {
     if (!isActionModal || !modalReference.current) return;
@@ -62,6 +64,10 @@ const ProductBodyShadcn = ({
     updateProductId(id);
     setIsDelete(true);
   };
+  const handleEditAction = (id: string) => {
+    setIsActionModal(false);
+    router.push(`/dashboard/products/${id}`);
+  };
 
   return (
     filteredProducts.length > 0 &&
@@ -142,10 +148,10 @@ const ProductBodyShadcn = ({
             )}
           >
             <span
-              className={cn("size-4 rounded-full", {
+              className={cn("size-3 rounded-full", {
                 "bg-[#6DC347]": product.status === "in_stock",
-                "bg-[#DC2626]": product.status === "low_on_stock",
-                "bg-[#EAB308]": product.status === "out_of_stock",
+                "bg-[#DC2626]": product.status === "out_of_stock",
+                "bg-[#EAB308]": product.status === "low_on_stock",
               })}
             />
             {product.status === "in_stock" && "In Stock"}
@@ -184,6 +190,7 @@ const ProductBodyShadcn = ({
                 <div className="flex flex-col">
                   <Button
                     variant="ghost"
+                    onClick={() => handleEditAction(product.product_id)}
                     size={"sm"}
                     className={cn(
                       "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs min-[500px]:text-sm",
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts b/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
index 768b851ab..a95dc544f 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
+++ b/src/app/dashboard/(user-dashboard)/products/_components/schema/schema.ts
@@ -1,11 +1,83 @@
 import { z } from "zod";
 
+export const MAX_CHAR = 170;
+export const EditProductSchema = z.object({
+  product_name: z.string().min(3, { message: "Product name is required" }),
+  description: z
+    .string()
+    .min(3, { message: "Description is required" })
+    .max(MAX_CHAR, { message: "Description is too long" }),
+  category: z.string().min(3, { message: "Availability is required" }),
+  price: z
+    .string()
+    .min(1, { message: "Price is required" })
+    .refine(
+      (value) => {
+        if (typeof Number(value) === "number") {
+          return Number(value) > 0;
+        }
+        return true;
+      },
+      {
+        message: "Price must be a positive number",
+      },
+    ),
+  quantity: z
+    .string()
+    .min(1, { message: "Quantity is required" })
+    .refine(
+      (value) => {
+        if (typeof Number(value) === "number") {
+          return Number(value) > 0;
+        }
+        return true;
+      },
+      {
+        message: "Quantity must be a positive number",
+      },
+    ),
+  media: z.object(
+    {
+      url: z.string(),
+      id: z.string(),
+    },
+    { message: "Media is required" },
+  ),
+  stocks: z.array(
+    z.object({
+      id: z.string(),
+      size: z.string(),
+      stock: z.string().refine(
+        (value) => {
+          if (typeof Number(value) === "number") {
+            return Number(value) > 0;
+          }
+          return true;
+        },
+        {
+          message: "stock is required",
+        },
+      ),
+      price: z.string().refine(
+        (value) => {
+          if (typeof Number(value) === "number") {
+            return Number(value) > 0;
+          }
+          return true;
+        },
+        {
+          message: "price is required",
+        },
+      ),
+    }),
+  ),
+});
 export const NewProductSchema = z.object({
   product_name: z.string().min(3, { message: "Product name is required" }),
   description: z
     .string()
     .min(3, { message: "Description is required" })
-    .max(160, { message: "Description is too long" }),
+    .max(MAX_CHAR, { message: "Description is too long" }),
   category: z.string().min(3, { message: "Category is required" }),
   price: z
     .string()
@@ -45,3 +117,4 @@ export const NewProductSchema = z.object({
 });
 
 export type NewProduct = z.infer<typeof NewProductSchema>;
+export type EditProduct = z.infer<typeof EditProductSchema>;
diff --git a/src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts b/src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
similarity index 62%
rename from src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts
rename to src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
index 03bc674ce..18c4dc253 100644
--- a/src/app/dashboard/(user-dashboard)/products/data/categories.moct.ts
+++ b/src/app/dashboard/(user-dashboard)/products/data/categories.mock.ts
@@ -10,3 +10,8 @@ export const CATEGORIES: CategoriesType[] = [
   { value: "monitor", label: "Monitor" },
   { value: "audio", label: "Audio" },
 ];
+export const STOCKS_SELECT: CategoriesType[] = [
+  { value: "in_stock", label: "In Stock" },
+  { value: "low_on_stock", label: "Low on Stock" },
+  { value: "out_of_stock", label: "Out of Stock" },
+];
diff --git a/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts b/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts
new file mode 100644
index 000000000..ec640d483
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/data/stocks.mock.ts
@@ -0,0 +1,39 @@
+import { EditProduct } from "../_components/schema/schema";
+
+export const STOCKS: EditProduct["stocks"] = [
+  {
+    id: "P0001",
+    size: "Small",
+    stock: "",
+    price: "",
+  },
+  {
+    id: "P0002",
+    size: "Medium",
+    stock: "",
+    price: "",
+  },
+  {
+    id: "P0003",
+    size: "Large",
+    stock: "",
+    price: "S",
+  },
+];
+
+export const shouldDisableAddStocksButton = ({
+  stocks,
+}: {
+  stocks: typeof STOCKS;
+}) => {
+  if (stocks.length === 0) return false;
+
+  return stocks.some(
+    (stock) =>
+      stock.size!.length === 0 ||
+      stock.stock!.length === 0 ||
+      stock.price!.length === 0,
+  )
+    ? true
+    : false;
+};
diff --git a/src/app/dashboard/(user-dashboard)/products/layout.tsx b/src/app/dashboard/(user-dashboard)/products/layout.tsx
new file mode 100644
index 000000000..74f45465f
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/layout.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import { useEffect } from "react";
+
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import { PRODUCT_TABLE } from "./data/product.mock";
+
+export default function UserProductLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { addProducts } = useProducts();
+  useEffect(() => {
+    const is_saved = localStorage.getItem("admin_products");
+    if (is_saved) {
+      const parse_data = JSON.parse(is_saved);
+      if (parse_data.state.products) return;
+      setTimeout(() => {
+        addProducts(PRODUCT_TABLE);
+      }, 5000);
+    }
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/page.tsx b/src/app/dashboard/(user-dashboard)/products/page.tsx
index acbff045c..1bb5df0fc 100644
--- a/src/app/dashboard/(user-dashboard)/products/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/page.tsx
@@ -6,13 +6,11 @@ import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
-import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import NewProductModal from "./_components/new-product-modal";
 import ProductDeleteModal from "./_components/product-delete-modal";
 import ProductDetailModal from "./_components/product-detail-modal";
 import ProductDetailView from "./_components/product-detail-view";
 import ProductHeader from "./_components/product-header";
-import { PRODUCT_TABLE } from "./data/product.mock";
 
 const ProductContent = dynamic(() => import("./_components/product-content"), {
   ssr: false,
@@ -24,7 +22,7 @@ const ProductFilter = dynamic(() => import("./_components/product-filter"), {
 const ProductPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [view, setView] = useState<"list" | "grid">("list");
-  const { addProducts } = useProducts();
+
   const {
     isOpen,
     updateProductId,
@@ -38,16 +36,6 @@ const ProductPage = () => {
     setIsDelete,
   } = useProductModal();
 
-  useEffect(() => {
-    const is_saved = localStorage.getItem("admin_products");
-    if (is_saved) {
-      const parse_data = JSON.parse(is_saved);
-      if (parse_data.state.products) return;
-      setTimeout(() => {
-        addProducts(PRODUCT_TABLE);
-      }, 5000);
-    }
-  }, []);
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
diff --git a/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
index 4d20d5cff..84b9fb5a0 100644
--- a/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx
@@ -94,7 +94,7 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
   const organizationPath = pathname?.split("/")[4];
 
   return (
-    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FDFDFD] pt-6 md:block md:w-[260px] md:justify-start md:px-4">
+    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FAFAFA] pt-6 md:block md:w-[304px] md:justify-start md:px-4">
       <div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
         <ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
         <h2 className="hidden text-xl text-neutral-dark-2 md:block">
diff --git a/src/app/dashboard/(user-dashboard)/settings/layout.tsx b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
index b6b98a2bd..bef3e0f8d 100644
--- a/src/app/dashboard/(user-dashboard)/settings/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/layout.tsx
@@ -9,7 +9,9 @@ const layout: FC<Iproperties> = ({ children }) => {
   return (
     <div className="grid grid-cols-[auto_1fr]">
       <SettingsSidebar />
-      <div className="">{children}</div>
+      <div className="mx-[41px] my-[30px] 2xl:mx-auto 2xl:max-w-[975px]">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
new file mode 100644
index 000000000..b66562fe0
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/header.tsx
@@ -0,0 +1,15 @@
+interface IProperties {
+  notificationTitle: string;
+}
+
+const NotificationHeader = ({ notificationTitle }: IProperties) => {
+  return (
+    <h4 className="mb-[17px] text-[24px] font-[700]">{notificationTitle}</h4>
+  );
+};
+
+NotificationHeader.PreviewProps = {
+  notificationTitle: `Notification Alert`,
+} satisfies IProperties;
+
+export default NotificationHeader;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
new file mode 100644
index 000000000..9ef72b82d
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/_components/notification-switch-box.tsx
@@ -0,0 +1,22 @@
+import { Switch } from "~/components/ui/switch";
+
+interface IProperties {
+  title: string;
+  description: string;
+}
+
+const NotificationSwitchBox = ({ title, description }: IProperties) => {
+  return (
+    <section className="flex w-full items-center justify-between">
+      <div className="w-[55%]">
+        <p className="mb-[8px] font-[600]">{title}</p>
+        <p className="text-[14px] text-neutral-dark-1">{description}</p>
+      </div>
+      <div>
+        <Switch />
+      </div>
+    </section>
+  );
+};
+
+export default NotificationSwitchBox;
diff --git a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
index db4d38750..e6f20ba1f 100644
--- a/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
@@ -1,5 +1,127 @@
-const page = () => {
-  return <div>page</div>;
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import NotificationSettingSavedModal from "~/components/common/modals/notification-settings-saved";
+import NotificationHeader from "./_components/header";
+import NotificationSwitchBox from "./_components/notification-switch-box";
+
+const NotificationPage = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setOpen(true);
+  };
+
+  return (
+    <main className="text-neutral-dark-2">
+      {/* NOTIFICATION ALERT */}
+      <section>
+        <NotificationHeader notificationTitle={"Notification Alert"} />
+        <NotificationSwitchBox
+          title={"Mobile push notifications"}
+          description={
+            "Receive push notifications on mentions and comments via your mobile app"
+          }
+        />
+      </section>
+      {/* EMAIL NOTIFICATION */}
+      <section className="my-[30px]">
+        <NotificationHeader notificationTitle={"Email notifications"} />
+        <section className="flex flex-col gap-[24px]">
+          {/* option 1 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
+              }
+            />
+          </div>
+          {/* option 2 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails about activity in your workspace, even when you are active on the app"
+              }
+            />
+          </div>
+          {/* option 3 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Email digests"}
+              description={
+                "Receive email digest every 8 hours for changes to pages you are subscribed to"
+              }
+            />
+          </div>
+          {/* option 4 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Announcements and update emails"}
+              description={
+                "Receive occasional emails about product launches and new features from notion"
+              }
+            />
+          </div>
+        </section>
+      </section>
+      {/* SLACK NOTIFICATIONS */}
+      <section className="my-[30px]">
+        <NotificationHeader notificationTitle={"Slack notifications"} />
+        <section className="flex flex-col gap-[24px]">
+          {/* option 1 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Activity in your workspace"}
+              description={
+                "Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
+              }
+            />
+          </div>
+          {/* option 2 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Always send email notifications"}
+              description={
+                "Receive emails about activity in your workspace, even when you are active on the app"
+              }
+            />
+          </div>
+          {/* option 3 */}
+          <div>
+            <NotificationSwitchBox
+              title={"Announcements and update emails"}
+              description={
+                "Receive email digest every 8 hours for changes to pages you are subscribed to"
+              }
+            />
+          </div>
+        </section>
+      </section>
+      <section className="text-end">
+        <CustomButton
+          variant="primary"
+          icon={<Check />}
+          isLeftIconVisible={true}
+          isLoading={false}
+          isDisabled={false}
+          onClick={handleOpenModal}
+        >
+          Save Changes
+        </CustomButton>
+        <NotificationSettingSavedModal
+          show={isOpen}
+          onClose={function (): void {
+            setOpen(false);
+          }}
+        />
+      </section>
+    </main>
+  );
 };
 
-export default page;
+export default NotificationPage;
diff --git a/src/app/globals.css b/src/app/globals.css
index 1296c9014..450351d4c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -169,6 +169,10 @@
   width: 14px; /* Width of the scrollbar */
 }
 
+::selection {
+  @apply bg-primary;
+  color: white;
+}
 ::-webkit-scrollbar-thumb {
   @apply bg-primary;
   border: 4px solid transparent;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2db2ed0d3..38fe4626a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className="mx-auto h-full w-full max-w-[1440px]">
+        <div className="mx-auto w-full">
           <Providers />
           {children}
           <Toaster />
diff --git a/src/components/common/modals/notification-settings-saved/index.tsx b/src/components/common/modals/notification-settings-saved/index.tsx
index b46652e1b..843b23578 100644
--- a/src/components/common/modals/notification-settings-saved/index.tsx
+++ b/src/components/common/modals/notification-settings-saved/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import React from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
@@ -20,11 +21,18 @@ const NotificationSettingSavedModal: React.FC<ModalProperties> = ({
   show,
   onClose,
 }) => {
+  const pathname = usePathname();
+  /**
+   * @kinxlo
+   * check if pathname == "notification", apply the blur effect
+   */
+  const isNotificationPath = pathname.includes("notification");
+
   return (
     <Dialog open={show} onOpenChange={onClose}>
       <DialogOverlay
         data-testid="overlay"
-        className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+        className={`fixed inset-0 z-50 flex items-center justify-center ${isNotificationPath ? "bg-transparent backdrop-blur-sm" : "bg-black bg-opacity-50"}`}
       />
       <DialogContent
         className="mx-10 rounded-md bg-white p-6 shadow-md"
diff --git a/src/email/templates/invoice/image.tsx b/src/email/templates/invoice/image.tsx
new file mode 100644
index 000000000..2552abb36
--- /dev/null
+++ b/src/email/templates/invoice/image.tsx
@@ -0,0 +1,99 @@
+import {
+  Button,
+  Container,
+  Heading,
+  Img,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import Layout from "../_components/layout/layout";
+
+interface InvoiceTemplateProperties {
+  title: string;
+  username: string;
+  image: string;
+  description: string;
+  descriptionOne: string;
+  link: string;
+}
+
+const InvoiceTemplate = ({
+  title,
+  username,
+  image,
+  description,
+  descriptionOne,
+  link,
+}: InvoiceTemplateProperties) => {
+  return (
+    <Layout>
+      <Preview>t{username}, your invoice reciept.</Preview>
+      <Section className="my-[56px]">
+        <Section className="mx-auto flex items-center justify-center md:w-[316px]">
+          <Img src={image} alt="hello" className="h-[100%] w-[100%]" />
+        </Section>
+
+        <Container className="max-w-[680px] px-[48px] md:px-0">
+          <Section className="mt-[56px] flex flex-col items-center justify-center">
+            <Heading
+              as="h5"
+              className="my-0 mb-[56px] text-center text-[24px] leading-[28px] text-[#121212]"
+            >
+              {title}
+            </Heading>
+
+            <Section>
+              <Text className="md:text-[18px]mt-[32px] my-0 text-[16px] font-[600] text-[#121212]">
+                Hi {username},
+              </Text>
+              <Text className="text-justify text-[14px] leading-[19.36px] text-[#525252] md:text-[16px]">
+                {description}
+              </Text>
+              <Text className="text-justify text-[14px] leading-[19.36px] text-[#525252] md:text-[16px]">
+                {descriptionOne}
+              </Text>
+            </Section>
+          </Section>
+        </Container>
+
+        <Section className="text-center">
+          <Section className="mt-[32px] w-[100%] text-center">
+            <Container className="mb-[40px] max-w-[680px] px-[48px] md:px-0">
+              <Button
+                target={"_blank"}
+                className="w-[100%] rounded-[8px] bg-[#F97316] py-[16px] text-[#FAFAFA] md:w-fit md:px-[2rem]"
+                href={link}
+              >
+                Activate Account
+              </Button>
+            </Container>
+          </Section>
+        </Section>
+        <Section className="mt-[28px]">
+          <Container className="max-w-[680px] px-[48px] md:px-0">
+            <Text className="my-0 font-[600] text-[#121212]">
+              Regards,
+              <br />
+              Boilerplate
+            </Text>
+          </Container>
+        </Section>
+      </Section>
+    </Layout>
+  );
+};
+
+InvoiceTemplate.PreviewProps = {
+  title: "Invoice",
+  username: "John Doe",
+  image: "https://imgur.com/a4XiXxo.png",
+  link: "www.boilerplate.com",
+  description:
+    "We hope you are doing well. Thank you for your recent purchase from Boilerplate. Please find your invoice attached to this email.",
+  descriptionOne:
+    "To activate your account and secure it, please click the button below:",
+} satisfies InvoiceTemplateProperties;
+
+export default InvoiceTemplate;
diff --git a/tsconfig.json b/tsconfig.json
index 62e9bc113..5fc51ec50 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "src/app/dashboard/(user-dashboard)/settings/notification/_components"  ],
   "exclude": [
     "node_modules"
   ]