diff --git a/.cursor/rules/basics.mdc b/.cursor/rules/basics.mdc
new file mode 100644
index 000000000..698e44116
--- /dev/null
+++ b/.cursor/rules/basics.mdc
@@ -0,0 +1,10 @@
+---
+alwaysApply: true
+---
+
+- Use `pnpm` as package manager.
+- The project is structured as a monorepo i.e. a pnpm workspace. The apps are in `apps` folder and re-usable packages are in `packages`.
+- Command for running script in a workspace: `pnpm --filter <workspace> <command>`.
+- Command for running tests: `pnpm test`.
+- The project uses shadcn for building UI so stick to its conventions and design.
+- In `apps/web` workspace, create a string first in `apps/web/config/strings.ts` and then import it in the `.tsx` files, instead of using inline strings.
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 13974cbeb..21f9023a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,6 @@ coverage
 # Text editors configurations
 .vscode
 .rgignore
-.cursor
 
 # Env file
 .env*.local
@@ -39,4 +38,7 @@ report*.json
 # Dev tools files
 .eslintcache
 
-.npmrc
\ No newline at end of file
+.npmrc
+
+# Jest files
+globalConfig.json
\ No newline at end of file
diff --git a/apps/docs/public/assets/products/accomplishment-page.png b/apps/docs/public/assets/products/accomplishment-page.png
new file mode 100644
index 000000000..def0fbf78
Binary files /dev/null and b/apps/docs/public/assets/products/accomplishment-page.png differ
diff --git a/apps/docs/public/assets/products/certificate-badge-product-card.png b/apps/docs/public/assets/products/certificate-badge-product-card.png
new file mode 100644
index 000000000..1a9911d47
Binary files /dev/null and b/apps/docs/public/assets/products/certificate-badge-product-card.png differ
diff --git a/apps/docs/public/assets/products/certificate-template-customization-expand.png b/apps/docs/public/assets/products/certificate-template-customization-expand.png
new file mode 100644
index 000000000..fdc989ee9
Binary files /dev/null and b/apps/docs/public/assets/products/certificate-template-customization-expand.png differ
diff --git a/apps/docs/public/assets/products/courselit-certificate-example.jpg b/apps/docs/public/assets/products/courselit-certificate-example.jpg
new file mode 100644
index 000000000..c2b365304
Binary files /dev/null and b/apps/docs/public/assets/products/courselit-certificate-example.jpg differ
diff --git a/apps/docs/public/assets/products/customize-certificate-texts.png b/apps/docs/public/assets/products/customize-certificate-texts.png
new file mode 100644
index 000000000..592b4f775
Binary files /dev/null and b/apps/docs/public/assets/products/customize-certificate-texts.png differ
diff --git a/apps/docs/public/assets/products/issue-certificate-toggle.png b/apps/docs/public/assets/products/issue-certificate-toggle.png
new file mode 100644
index 000000000..19c1b15df
Binary files /dev/null and b/apps/docs/public/assets/products/issue-certificate-toggle.png differ
diff --git a/apps/docs/public/assets/products/preview-certificate.png b/apps/docs/public/assets/products/preview-certificate.png
new file mode 100644
index 000000000..c03487eb4
Binary files /dev/null and b/apps/docs/public/assets/products/preview-certificate.png differ
diff --git a/apps/docs/public/assets/products/product-manage-menu.png b/apps/docs/public/assets/products/product-manage-menu.png
new file mode 100644
index 000000000..c088909da
Binary files /dev/null and b/apps/docs/public/assets/products/product-manage-menu.png differ
diff --git a/apps/docs/public/assets/products/view-certificate-button.png b/apps/docs/public/assets/products/view-certificate-button.png
new file mode 100644
index 000000000..2926f5815
Binary files /dev/null and b/apps/docs/public/assets/products/view-certificate-button.png differ
diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts
index 93a61caa3..2c8153a75 100644
--- a/apps/docs/src/config.ts
+++ b/apps/docs/src/config.ts
@@ -58,6 +58,7 @@ export const SIDEBAR: Sidebar = {
             { text: "Add content", link: "en/courses/add-content" },
             { text: "Manage sections", link: "en/products/section" },
             { text: "Invite customers", link: "en/products/invite-customers" },
+            { text: "Certificates", link: "en/products/certificates" },
         ],
         "Digital downloads": [
             { text: "Introduction", link: "en/downloads/introduction" },
diff --git a/apps/docs/src/pages/en/products/certificates.md b/apps/docs/src/pages/en/products/certificates.md
new file mode 100644
index 000000000..277f5bd40
--- /dev/null
+++ b/apps/docs/src/pages/en/products/certificates.md
@@ -0,0 +1,88 @@
+---
+title: Certificates
+description: Issue certificate on course completion
+layout: ../../../layouts/MainLayout.astro
+---
+
+Certificates add significant value to your courses by providing your customers with verifiable credentials they can showcase. CourseLit makes it effortless to issue certificates automatically upon course completion.
+
+Here are the key features of CourseLit certificates:
+
+- A dedicated page for each certificate issued, allowing customers to share a verifiable link on their profiles
+- Customizable text and images to make certificates reflect your brand
+
+**Note**: Certificates are only available for `Course` products.
+
+## Overview
+
+Customers will receive a certificate after completing all lessons in a course.
+
+The certificate will be hosted on a dedicated page that can be used to verify the customer's learning achievement.
+
+Here is an example certificate:
+
+![CourseLit Example Certificate](/assets/products/courselit-certificate-example.jpg)
+
+## Enable certificates for a course
+
+1. Go to the manage section of your `Course` product.
+
+    ![Product manage menu](/assets/products/product-manage-menu.png)
+
+2. Scroll down to the `Certificates` section and toggle on the `Issue certificate` switch.
+
+    ![Issue certificate switch](/assets/products/issue-certificate-toggle.png)
+
+    That's it! Your customers will now receive a certificate upon course completion.
+
+    > Previous customers will not receive certificates retroactively, as the certificate generation process is automated.
+
+## Customize the certificate
+
+1. Click on the `Chevron` icon on the far right of the `Certificate Template` subsection under the `Certificates` section to expand it.
+
+    ![Certificate template customization expand button](/assets/products/certificate-template-customization-expand.png)
+
+2. Here are the elements you can customize in a certificate:
+
+    - Certificate Title
+    - Certificate Subtitle
+    - Certificate Description
+    - Signature Name
+    - Signature Designation
+    - Signature Image
+    - Logo (defaults to school's logo if not provided)
+
+3. Modify the text configuration to your preference and click `Save`.
+
+    ![Customize certificate texts](/assets/products/customize-certificate-texts.png)
+
+4. `Signature Image` and `Logo` properties are automatically saved.
+
+## Preview the certificate
+
+Click on the `Preview` link located to the left of the `Issue certificates` switch.
+
+You will be taken to a new tab where you can see an actual certificate in PDF format with your changes applied.
+
+![Preview certificate](/assets/products/preview-certificate.png)
+
+## Customer's experience
+
+Upon completing a course, customers will be taken back to the `My content` lobby. On the product card, they will see a badge indicating that a certificate is available.
+
+![Certificate badge on product card](/assets/products/certificate-badge-product-card.png)
+
+On the course's introduction page, customers will see a `View certificate` button.
+
+![View certificate button on product's intro in course viewer](/assets/products/view-certificate-button.png)
+
+When they click the `View certificate` button, customers are taken to the `Accomplishment` page, where they can view all certification details.
+
+![Accomplishment Page](/assets/products/accomplishment-page.png)
+
+Customers can also print their certificate by clicking the `Print` button.
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.
diff --git a/apps/web/app/(with-contexts)/(with-layout)/accomplishment/[certId]/page.tsx b/apps/web/app/(with-contexts)/(with-layout)/accomplishment/[certId]/page.tsx
new file mode 100644
index 000000000..f2ba93add
--- /dev/null
+++ b/apps/web/app/(with-contexts)/(with-layout)/accomplishment/[certId]/page.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import {
+    Badge,
+    Button,
+    Header1,
+    Header2,
+    Section,
+    Text1,
+} from "@courselit/page-primitives";
+import { redirect, useParams } from "next/navigation";
+import { ThemeContext } from "@components/contexts";
+import { useContext, useRef, useState } from "react";
+import { BadgeCheck, ExternalLinkIcon, Printer } from "lucide-react";
+import Link from "next/link";
+import { Image } from "@courselit/components-library";
+import { formattedLocaleDate } from "@ui-lib/utils";
+import { useCertificate } from "@/hooks/use-certificate";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AccomplishmentPage() {
+    const params = useParams();
+    const certId = params.certId;
+    const { theme } = useContext(ThemeContext);
+    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+    const iframeRef = useRef<HTMLIFrameElement | null>(null);
+    const { certificate, loaded } = useCertificate(certId as string);
+
+    const handlePrint = () => {
+        const iframeElement = iframeRef.current;
+        if (!iframeElement) return;
+        const iframeWindow = iframeElement.contentWindow;
+        if (!iframeWindow) return;
+        iframeWindow.focus();
+        iframeWindow.print();
+    };
+
+    if (loaded && !certificate) {
+        redirect("/");
+    }
+
+    if (!certificate) {
+        return (
+            <Section theme={theme.theme}>
+                <div className="flex flex-col gap-8">
+                    <div className="flex flex-col sm:flex-row gap-2 items-center">
+                        <Skeleton className="h-7 sm:h-9 w-48 sm:w-80" />
+                        <Skeleton className="h-6 w-20" />
+                    </div>
+
+                    {/* User completion info skeleton */}
+                    <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                        <Skeleton className="h-24 w-24 sm:h-32 sm:w-32 md:h-40 md:w-40 rounded-full mx-auto sm:mx-0" />
+                        <div className="flex flex-col gap-2 text-center sm:text-left w-full">
+                            <Skeleton className="h-5 w-64 sm:w-80 mx-auto sm:mx-0" />
+                            <Skeleton className="h-4 w-40 mx-auto sm:mx-0" />
+                        </div>
+                    </div>
+
+                    {/* Certificate section header + viewer skeleton */}
+                    <div className="flex flex-col gap-4">
+                        <Skeleton className="h-6 w-32" />
+                        <Skeleton className="w-full lg:h-[900px] h-[300px] md:h-[600px] rounded-lg" />
+                    </div>
+                </div>
+            </Section>
+        );
+    }
+
+    return (
+        <Section theme={theme.theme}>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
+                    <Header1 theme={theme.theme}>
+                        {certificate.productTitle}
+                    </Header1>
+                    <div>
+                        <Link href={`/p/${certificate.productPageId}`}>
+                            <Badge
+                                theme={theme.theme}
+                                className="flex items-center gap-1"
+                            >
+                                Visit <ExternalLinkIcon className="h-4 w-4" />
+                            </Badge>
+                        </Link>
+                    </div>
+                </div>
+
+                {/* User completion info - responsive layout */}
+                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                    {certificate.userImage && (
+                        <div className="h-24 w-24 sm:h-32 sm:w-32 md:h-40 md:w-40 rounded-full overflow-hidden flex-shrink-0 mx-auto sm:mx-0">
+                            <Image
+                                src={certificate.userImage.file}
+                                alt={certificate.userName}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    )}
+                    <div className="flex flex-col gap-2">
+                        <Text1
+                            theme={theme.theme}
+                            className="flex items-center gap-2"
+                        >
+                            <BadgeCheck className="h-4 w-4 sm:h-5 sm:w-5" />
+                            Completed by{" "}
+                            <span className="font-bold">
+                                {certificate.userName}
+                            </span>
+                        </Text1>
+                        <Text1 theme={theme.theme} className="text-gray-500">
+                            {formattedLocaleDate(+certificate.createdAt)}
+                        </Text1>
+                    </div>
+                </div>
+
+                {/* Certificate section header - responsive */}
+                <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between">
+                        <Header2 theme={theme.theme}>Certificate</Header2>
+                        <Button
+                            theme={theme.theme}
+                            onClick={handlePrint}
+                            disabled={!isIframeLoaded}
+                        >
+                            <Printer className="h-4 w-4" />
+                            Print
+                        </Button>
+                    </div>
+
+                    <div className="relative w-full">
+                        {!isIframeLoaded && (
+                            <Skeleton className="w-full lg:h-[900px] h-[300px] md:h-[600px] rounded-lg" />
+                        )}
+                        <div
+                            className={`transition-opacity duration-300 ${isIframeLoaded ? "opacity-100" : "opacity-0"}`}
+                            style={{ overflow: "auto" }}
+                        >
+                            <div style={{ width: 1100, margin: "0 auto" }}>
+                                <iframe
+                                    src={`/certificate/${certId}`}
+                                    style={{
+                                        width: 1100,
+                                        height: 850,
+                                        border: 0,
+                                        display: "block",
+                                        background: "white",
+                                    }}
+                                    ref={iframeRef}
+                                    onLoad={() => setIsIframeLoaded(true)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Section>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx b/apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx
index 99674f0fa..6ca661bd9 100644
--- a/apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx
+++ b/apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx
@@ -3,7 +3,11 @@
 import { useContext, useEffect, useState, use } from "react";
 import { isEnrolled } from "@ui-lib/utils";
 import { ArrowRight } from "@courselit/icons";
-import { COURSE_PROGRESS_START, ENROLL_BUTTON_TEXT } from "@ui-config/strings";
+import {
+    COURSE_PROGRESS_START,
+    ENROLL_BUTTON_TEXT,
+    BTN_VIEW_CERTIFICATE,
+} from "@ui-config/strings";
 import { checkPermission } from "@courselit/utils";
 import { Profile, UIConstants } from "@courselit/common-models";
 import {
@@ -20,6 +24,8 @@ import {
     SiteInfoContext,
 } from "@components/contexts";
 import { getProduct } from "./helpers";
+import { getUserProfile } from "@/app/(with-contexts)/helpers";
+import { BadgeCheck } from "lucide-react";
 const { permissions } = UIConstants;
 
 export default function ProductPage(props: {
@@ -28,9 +34,10 @@ export default function ProductPage(props: {
     const params = use(props.params);
     const { id } = params;
     const [product, setProduct] = useState<any>(null);
-    const { profile } = useContext(ProfileContext);
+    const { profile, setProfile } = useContext(ProfileContext);
     const siteInfo = useContext(SiteInfoContext);
     const address = useContext(AddressContext);
+    const [progress, setProgress] = useState<any>(null);
 
     useEffect(() => {
         if (id) {
@@ -40,6 +47,19 @@ export default function ProductPage(props: {
         }
     }, [id]);
 
+    useEffect(() => {
+        if (product) {
+            getUserProfile(address.backend).then((profile) => {
+                setProfile(profile);
+                setProgress(
+                    profile.purchases?.find(
+                        (purchase) => purchase.courseId === product.courseId,
+                    ),
+                );
+            });
+        }
+    }, [product]);
+
     if (!profile) {
         return null;
     }
@@ -51,6 +71,17 @@ export default function ProductPage(props: {
     return (
         <div className="flex flex-col pb-[100px] lg:max-w-[40rem] xl:max-w-[48rem] mx-auto">
             <h1 className="text-4xl font-semibold mb-8">{product.title}</h1>
+            {progress?.certificateId && (
+                <Link
+                    href={`/accomplishment/${progress.certificateId}`}
+                    className="mb-4"
+                >
+                    <Button2>
+                        <BadgeCheck className="h-4 w-4" />{" "}
+                        {BTN_VIEW_CERTIFICATE}
+                    </Button2>
+                </Link>
+            )}
             {!isEnrolled(product.courseId, profile as Profile) &&
                 checkPermission(profile.permissions ?? [], [
                     permissions.enrollInCourse,
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx
index a69aa2b5d..80b7d2adc 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx
@@ -442,74 +442,6 @@ export default function Page(props: {
         }
     };
 
-    // const onPlanSubmitted = async (plan: PaymentPlan) => {
-    //     const query = `
-    //         mutation CreatePlan(
-    //             $name: String!,
-    //             $type: PaymentPlanType!,
-    //             $entityId: String!,
-    //             $entityType: MembershipEntityType!
-    //             $oneTimeAmount: Int,
-    //             $emiAmount: Int,
-    //             $emiTotalInstallments: Int,
-    //             $subscriptionMonthlyAmount: Int,
-    //             $subscriptionYearlyAmount: Int,
-    //         ) {
-    //             plan: createPlan(
-    //                 name: $name,
-    //                 type: $type,
-    //                 entityId: $entityId,
-    //                 entityType: $entityType,
-    //                 oneTimeAmount: $oneTimeAmount,
-    //                 emiAmount: $emiAmount,
-    //                 emiTotalInstallments: $emiTotalInstallments,
-    //                 subscriptionMonthlyAmount: $subscriptionMonthlyAmount,
-    //                 subscriptionYearlyAmount: $subscriptionYearlyAmount,
-    //             ) {
-    //                 planId
-    //                 name
-    //                 type
-    //                 oneTimeAmount
-    //                 emiAmount
-    //                 emiTotalInstallments
-    //                 subscriptionMonthlyAmount
-    //                 subscriptionYearlyAmount
-    //             }
-    //         }
-    //     `;
-    //     try {
-    //         const fetchRequest = fetch
-    //             .setPayload({
-    //                 query,
-    //                 variables: {
-    //                     name: plan.name,
-    //                     type: plan.type,
-    //                     entityId: id,
-    //                     entityType:
-    //                         MembershipEntityType.COMMUNITY.toUpperCase(),
-    //                     oneTimeAmount: plan.oneTimeAmount,
-    //                     emiAmount: plan.emiAmount,
-    //                     emiTotalInstallments: plan.emiTotalInstallments,
-    //                     subscriptionMonthlyAmount:
-    //                         plan.subscriptionMonthlyAmount,
-    //                     subscriptionYearlyAmount: plan.subscriptionYearlyAmount,
-    //                 },
-    //             })
-    //             .setIsGraphQLEndpoint(true)
-    //             .build();
-    //         const response = await fetchRequest.exec();
-    //         if (response.plan) {
-    //             setPaymentPlans([...paymentPlans, response.plan]);
-    //         }
-    //     } catch (error: any) {
-    //         toast({
-    //             title: TOAST_TITLE_ERROR,
-    //             description: error.message,
-    //             variant: "destructive",
-    //         });
-    //     }
-    // };
-
     const onPlanArchived = async (planId: string) => {
         const query = `
             mutation ArchivePlan($planId: String!) {
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx
index 937ce1bac..1709d1387 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx
@@ -69,6 +69,7 @@ export default function Page() {
                             thumbnail
                         }
                         type
+                        certificateId
                     }
                 }
             }
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/page.tsx
index 38bdc3e3a..69da003d6 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/page.tsx
@@ -41,9 +41,9 @@ import {
 } from "@ui-config/strings";
 import DashboardContent from "@components/admin/dashboard-content";
 import { AddressContext } from "@components/contexts";
-import useProduct from "../../../../../../../hooks/use-product";
+import useProduct from "@/hooks/use-product";
 import { truncate } from "@ui-lib/utils";
-import { Constants, Lesson } from "@courselit/common-models";
+import { Constants, Lesson, UIConstants } from "@courselit/common-models";
 import { DragAndDrop, useToast } from "@courselit/components-library";
 import { FetchBuilder } from "@courselit/utils";
 import {
@@ -53,6 +53,7 @@ import {
     TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Droplets } from "lucide-react";
+const { permissions } = UIConstants;
 
 export default function ContentPage() {
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -186,7 +187,13 @@ export default function ContentPage() {
     };
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <h1 className="text-4xl font-semibold tracking-tight mb-8">
                 Content
             </h1>
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx
index 834d188e4..d15f11eac 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx
@@ -19,7 +19,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-
 import {
     Dialog,
     DialogContent,
@@ -29,7 +28,6 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog";
-
 import {
     APP_MESSAGE_LESSON_DELETED,
     BUTTON_NEW_LESSON_TEXT,
@@ -48,6 +46,7 @@ import {
     Lesson,
     LessonType,
     Media,
+    Profile,
     Quiz,
     TextEditorContent,
     UIConstants,
@@ -69,6 +68,8 @@ import { isTextEditorNonEmpty, truncate } from "@ui-lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Separator } from "@components/ui/separator";
 
+const { permissions } = UIConstants;
+
 const lessonTypes = [
     { value: Constants.LessonType.TEXT, label: "Text", icon: FileText },
     { value: Constants.LessonType.VIDEO, label: "Video", icon: Video },
@@ -272,7 +273,7 @@ export default function LessonPage() {
                                     <div className="aspect-video">
                                         <iframe
                                             className="w-full h-full rounded-lg"
-                                            src={`https://www.youtube.com/embed/${content.value.match(UIConstants.YOUTUBE_REGEX)[1]}`}
+                                            src={`https://www.youtube.com/embed/${content.value.match(UIConstants.YOUTUBE_REGEX)?.[1] ?? ""}`}
                                             title="YouTube video player"
                                             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                             allowFullScreen
@@ -557,7 +558,7 @@ export default function LessonPage() {
                                         : undefined
                             }
                             strings={{}}
-                            profile={profile}
+                            profile={profile as Profile}
                             address={address}
                             mediaId={lesson?.media?.mediaId}
                             onRemove={() => {
@@ -906,7 +907,7 @@ export default function LessonPage() {
                     lessonData: {
                         title: lesson?.title,
                         downloadable: lesson?.downloadable,
-                        type: lesson?.type.toUpperCase(),
+                        type: lesson?.type?.toUpperCase(),
                         content: formatContentForSending(),
                         courseId: lesson?.courseId,
                         requiresEnrollment: lesson?.requiresEnrollment,
@@ -978,7 +979,7 @@ export default function LessonPage() {
     };
 
     const formatContentForSending = () => {
-        switch (lesson?.type.toLowerCase()) {
+        switch (lesson?.type?.toLowerCase()) {
             case Constants.LessonType.TEXT:
                 return JSON.stringify(textContent);
             case Constants.LessonType.QUIZ:
@@ -1021,7 +1022,13 @@ export default function LessonPage() {
     );
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <header>
                 <h1 className="text-4xl font-semibold">
                     {product?.type?.toLowerCase() ===
@@ -1130,7 +1137,7 @@ export default function LessonPage() {
                                         {lesson.type ===
                                         Constants.LessonType.EMBED
                                             ? "Embed URL"
-                                            : `${lesson.type.charAt(0).toUpperCase() + lesson.type.slice(1)} Content`}
+                                            : `${lesson.type ? lesson.type.charAt(0).toUpperCase() + lesson.type.slice(1) : ""} Content`}
                                     </Label>
                                     {renderLessonContent()}
                                 </>
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/page.tsx
index 54857393f..0b8857272 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/page.tsx
@@ -33,7 +33,7 @@ import {
     TOAST_TITLE_SUCCESS,
 } from "@ui-config/strings";
 import { truncate } from "@ui-lib/utils";
-import useProduct from "../../../../../../../../../hooks/use-product";
+import useProduct from "@/hooks/use-product";
 import { AddressContext } from "@components/contexts";
 import DashboardContent from "@components/admin/dashboard-content";
 import { Constants, DripType, UIConstants } from "@courselit/common-models";
@@ -43,6 +43,8 @@ import Resources from "@components/resources";
 import EmailViewer from "@components/admin/mails/email-viewer";
 import { defaultEmail, Email as EmailContent } from "@courselit/email-editor";
 
+const { permissions } = UIConstants;
+
 export default function SectionPage(props: {
     params: Promise<{ id: string; section: string }>;
 }) {
@@ -282,7 +284,13 @@ export default function SectionPage(props: {
     };
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <div className="space-y-6">
                 <div>
                     <h1 className="text-4xl font-semibold">
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/new/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/new/page.tsx
index 7f5cc7e28..f4577cd93 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/new/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/new/page.tsx
@@ -19,6 +19,9 @@ import { truncate } from "@ui-lib/utils";
 import DashboardContent from "@components/admin/dashboard-content";
 import { FetchBuilder } from "@courselit/utils";
 import { useToast } from "@courselit/components-library";
+import { UIConstants } from "@courselit/common-models";
+
+const { permissions } = UIConstants;
 
 export default function SectionPage() {
     const { toast } = useToast();
@@ -127,7 +130,13 @@ export default function SectionPage() {
     };
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <div className="space-y-6">
                 <div>
                     <h1 className="text-4xl font-semibold">
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customer/new/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customer/new/page.tsx
index 03d6a9f46..2659c830a 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customer/new/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customer/new/page.tsx
@@ -11,6 +11,8 @@ import { truncate } from "@ui-lib/utils";
 import { useContext } from "react";
 import useProduct from "@/hooks/use-product";
 import { useParams } from "next/navigation";
+import { UIConstants } from "@courselit/common-models";
+const { permissions } = UIConstants;
 
 export default function Page() {
     const params = useParams();
@@ -27,11 +29,14 @@ export default function Page() {
     ];
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
-            <NewCustomer
-                courseId={product?.courseId as string}
-                address={address}
-            />
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
+            <NewCustomer courseId={product?.courseId as string} />
         </DashboardContent>
     );
 }
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customers/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customers/page.tsx
index 3120d948f..fd204a377 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customers/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customers/page.tsx
@@ -11,16 +11,7 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table";
-// import {
-//     DropdownMenu,
-//     DropdownMenuContent,
-//     DropdownMenuItem,
-//     DropdownMenuLabel,
-//     DropdownMenuSeparator,
-//     DropdownMenuTrigger,
-// } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-// import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Search, UserPlus, Copy } from "lucide-react";
 import { useParams } from "next/navigation";
 import { capitalize, FetchBuilder } from "@courselit/utils";
@@ -51,6 +42,8 @@ import {
     User,
 } from "@courselit/common-models";
 import { Tooltip, useToast, Badge } from "@courselit/components-library";
+import { UIConstants } from "@courselit/common-models";
+const { permissions } = UIConstants;
 
 type Member = Pick<
     Membership,
@@ -179,7 +172,13 @@ export default function CustomersPage() {
     };
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <div className="flex justify-between items-center">
                 <h1 className="text-3xl font-bold">Customers</h1>
                 <Link href={`/dashboard/product/${productId}/customer/new`}>
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/certificates.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/certificates.tsx
new file mode 100644
index 000000000..3eda7f1b7
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/certificates.tsx
@@ -0,0 +1,703 @@
+"use client";
+
+import { useContext, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { ChevronDown, Save, Loader2 } from "lucide-react";
+import { MediaSelector, useToast } from "@courselit/components-library";
+import { Media, Profile, UIConstants } from "@courselit/common-models";
+import { AddressContext, ProfileContext } from "@components/contexts";
+import { MIMETYPE_IMAGE } from "@ui-config/constants";
+import {
+    APP_MESSAGE_COURSE_SAVED,
+    BUTTON_SAVE,
+    BUTTON_SAVING,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+import {
+    Collapsible,
+    CollapsibleTrigger,
+    CollapsibleContent,
+} from "@components/ui/collapsible";
+import Link from "next/link";
+
+const MUTATION_UPDATE_CERTIFICATE = `
+    mutation UpdateCertificate($courseId: String!, $certificate: Boolean!) {
+        updateCourse(courseData: { id: $courseId, certificate: $certificate }) {
+            courseId
+        }
+    }
+`;
+
+const MUTATION_UPDATE_CERTIFICATE_TEMPLATE = `
+    mutation UpdateCertificateTemplate($courseId: String!, $title: String, $subtitle: String, $description: String, $signatureName: String, $signatureDesignation: String, $signatureImage: MediaInput, $logo: MediaInput) {
+        updateCourseCertificateTemplate(courseId: $courseId, title: $title, subtitle: $subtitle, description: $description, signatureName: $signatureName, signatureDesignation: $signatureDesignation, signatureImage: $signatureImage, logo: $logo) {
+            title
+        }
+    }
+`;
+
+interface CertificatesProps {
+    product: any;
+    productId: string;
+}
+
+export default function Certificates({
+    product,
+    productId,
+}: CertificatesProps) {
+    const { toast } = useToast();
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+    const fetch = useGraphQLFetch();
+    const [loading, setLoading] = useState(false);
+    const [certificate, setCertificate] = useState(
+        product?.certificate || false,
+    );
+    const [certificateTemplateErrors, setCertificateTemplateErrors] = useState<
+        Record<string, string>
+    >({});
+    const [certificateTemplate, setCertificateTemplate] = useState<{
+        title: string;
+        subtitle: string;
+        description: string;
+        signatureName: string;
+        signatureDesignation: string;
+        signatureImage: any;
+        logo: any;
+    }>({
+        title: "",
+        subtitle: "",
+        description: "",
+        signatureName: "",
+        signatureDesignation: "",
+        signatureImage: {},
+        logo: {},
+    });
+
+    const loadCertificateTemplate = async (courseId: string) => {
+        const query = `
+            query GetCourseCertificateTemplate($courseId: String!) {
+                certificateTemplate: getCourseCertificateTemplate(courseId: $courseId) {
+                    title
+                    subtitle
+                    description
+                    signatureName
+                    signatureDesignation
+                    signatureImage {
+                        mediaId
+                        originalFileName
+                        file
+                        thumbnail
+                    }
+                    logo {
+                        mediaId
+                        originalFileName
+                        file
+                        thumbnail
+                    }
+                }
+            }
+        `;
+
+        try {
+            const fetchInstance = fetch
+                .setPayload({
+                    query,
+                    variables: { courseId },
+                })
+                .build();
+
+            const response = await fetchInstance.exec();
+            if (response.certificateTemplate) {
+                setCertificateTemplate({
+                    title: response.certificateTemplate.title || "",
+                    subtitle: response.certificateTemplate.subtitle || "",
+                    description: response.certificateTemplate.description || "",
+                    signatureName:
+                        response.certificateTemplate.signatureName || "",
+                    signatureDesignation:
+                        response.certificateTemplate.signatureDesignation || "",
+                    signatureImage:
+                        response.certificateTemplate.signatureImage || {},
+                    logo: response.certificateTemplate.logo || {},
+                });
+            }
+        } catch (err) {
+            console.error("Error loading certificate template:", err);
+        }
+    };
+
+    useEffect(() => {
+        if (product?.certificate && product?.courseId) {
+            loadCertificateTemplate(product.courseId);
+        }
+    }, [product?.certificate, product?.courseId]);
+
+    const handleCertificateChange = async () => {
+        const newValue = !certificate;
+        const previousValue = certificate;
+        setCertificate(newValue);
+
+        if (!product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_CERTIFICATE,
+                    variables: {
+                        courseId: product.courseId,
+                        certificate: newValue,
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            // Revert to previous state on error
+            setCertificate(previousValue);
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCertificateTemplateInputChange = (
+        e: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        const { name, value } = e.target;
+        setCertificateTemplate((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const validateCertificateTemplate = () => {
+        const newErrors: Record<string, string> = {};
+
+        // Check description length if provided
+        if (
+            certificateTemplate.description &&
+            certificateTemplate.description.length > 400
+        ) {
+            newErrors.description =
+                "Description must be 400 characters or less";
+        }
+
+        setCertificateTemplateErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const saveCertificateTemplate = async (
+        e: React.FormEvent<HTMLFormElement>,
+    ) => {
+        e.preventDefault();
+        if (!validateCertificateTemplate() || !product?.courseId) return;
+
+        const variables = {
+            courseId: product.courseId,
+            title: certificateTemplate.title,
+            subtitle: certificateTemplate.subtitle,
+            description: certificateTemplate.description,
+            signatureName: certificateTemplate.signatureName,
+            signatureDesignation: certificateTemplate.signatureDesignation,
+        };
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_CERTIFICATE_TEMPLATE,
+                    variables,
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourseCertificateTemplate) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const saveCertificateSignatureImage = async (media?: Media) => {
+        if (!product?.courseId) return;
+
+        // Update local state immediately
+        setCertificateTemplate((prev) => ({
+            ...prev,
+            signatureImage: media || {},
+        }));
+
+        // Prepare variables for the mutation
+        const variables = {
+            courseId: product.courseId,
+            signatureImage: media || null,
+        };
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_CERTIFICATE_TEMPLATE,
+                    variables,
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourseCertificateTemplate) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const saveCertificateLogo = async (media?: Media) => {
+        if (!product?.courseId) return;
+
+        // Update local state immediately
+        setCertificateTemplate((prev) => ({ ...prev, logo: media || {} }));
+
+        // Prepare variables for the mutation
+        const variables = {
+            courseId: product.courseId,
+            logo: media || null,
+        };
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_CERTIFICATE_TEMPLATE,
+                    variables,
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourseCertificateTemplate) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Only show for course type products
+    if (product?.type?.toLowerCase() !== UIConstants.COURSE_TYPE_COURSE) {
+        return null;
+    }
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-6" id="publish">
+                <h2 className="text-base font-semibold">Certificates</h2>
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label className="text-base font-semibold">
+                            Issue certificates
+                        </Label>
+                        <p className="text-sm text-muted-foreground">
+                            Enable certificate for this course.
+                        </p>
+                    </div>
+                    <div className="flex gap-4 items-center">
+                        {certificate && (
+                            <Link
+                                href={`/certificate/demo?courseId=${productId}`}
+                                target="_blank"
+                                className="underline text-black font-medium text-sm text-muted-foreground"
+                            >
+                                Preview
+                            </Link>
+                        )}
+                        <Switch
+                            checked={certificate}
+                            onCheckedChange={handleCertificateChange}
+                            disabled={loading}
+                        />
+                    </div>
+                </div>
+                {certificate && (
+                    <div className="space-y-6" id="certificate-template">
+                        <Collapsible>
+                            <div className="flex items-center justify-between">
+                                <div className="space-y-0.5">
+                                    <h2 className="text-base font-semibold">
+                                        Certificate Template
+                                    </h2>
+                                    <p className="text-sm text-muted-foreground">
+                                        Customize the content and branding for
+                                        issued certificates
+                                    </p>
+                                </div>
+                                <CollapsibleTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="w-9 p-0 group"
+                                    >
+                                        <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                                        <span className="sr-only">Toggle</span>
+                                    </Button>
+                                </CollapsibleTrigger>
+                            </div>
+
+                            <CollapsibleContent className="space-y-6 overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2">
+                                {/* Form with explicit save button for text fields */}
+                                <form
+                                    onSubmit={saveCertificateTemplate}
+                                    className="space-y-6 mt-4"
+                                >
+                                    <div className="space-y-4">
+                                        <Label
+                                            htmlFor="certificate-title"
+                                            className="text-sm font-semibold"
+                                        >
+                                            Certificate Title
+                                        </Label>
+                                        <Input
+                                            id="certificate-title"
+                                            name="title"
+                                            value={certificateTemplate.title}
+                                            onChange={
+                                                handleCertificateTemplateInputChange
+                                            }
+                                            placeholder="Certificate of Completion"
+                                            className={
+                                                certificateTemplateErrors.title
+                                                    ? "border-red-500"
+                                                    : ""
+                                            }
+                                            disabled={loading}
+                                        />
+                                        {certificateTemplateErrors.title && (
+                                            <p className="text-red-500 text-sm">
+                                                {
+                                                    certificateTemplateErrors.title
+                                                }
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-4">
+                                        <Label
+                                            htmlFor="certificate-subtitle"
+                                            className="text-sm font-semibold"
+                                        >
+                                            Certificate Subtitle
+                                        </Label>
+                                        <Input
+                                            id="certificate-subtitle"
+                                            name="subtitle"
+                                            value={certificateTemplate.subtitle}
+                                            onChange={
+                                                handleCertificateTemplateInputChange
+                                            }
+                                            placeholder="This certificate is awarded to"
+                                            className={
+                                                certificateTemplateErrors.subtitle
+                                                    ? "border-red-500"
+                                                    : ""
+                                            }
+                                            disabled={loading}
+                                        />
+                                        {certificateTemplateErrors.subtitle && (
+                                            <p className="text-red-500 text-sm">
+                                                {
+                                                    certificateTemplateErrors.subtitle
+                                                }
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-4">
+                                        <Label
+                                            htmlFor="certificate-description"
+                                            className="text-sm font-semibold"
+                                        >
+                                            Certificate Description
+                                        </Label>
+                                        <Input
+                                            id="certificate-description"
+                                            name="description"
+                                            value={
+                                                certificateTemplate.description
+                                            }
+                                            onChange={
+                                                handleCertificateTemplateInputChange
+                                            }
+                                            placeholder="for completing the course"
+                                            className={
+                                                certificateTemplateErrors.description
+                                                    ? "border-red-500"
+                                                    : ""
+                                            }
+                                            disabled={loading}
+                                        />
+                                        <div className="flex justify-between items-center">
+                                            {certificateTemplateErrors.description && (
+                                                <p className="text-red-500 text-sm">
+                                                    {
+                                                        certificateTemplateErrors.description
+                                                    }
+                                                </p>
+                                            )}
+                                            <p
+                                                className={`text-xs ml-auto ${certificateTemplate.description.length > 400 ? "text-red-500" : "text-muted-foreground"}`}
+                                            >
+                                                {
+                                                    certificateTemplate
+                                                        .description.length
+                                                }
+                                                /400 characters
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div className="space-y-4">
+                                        <Label
+                                            htmlFor="signature-name"
+                                            className="text-sm font-semibold"
+                                        >
+                                            Signature Name
+                                        </Label>
+                                        <Input
+                                            id="signature-name"
+                                            name="signatureName"
+                                            value={
+                                                certificateTemplate.signatureName
+                                            }
+                                            onChange={
+                                                handleCertificateTemplateInputChange
+                                            }
+                                            placeholder="Instructor Name"
+                                            className={
+                                                certificateTemplateErrors.signatureName
+                                                    ? "border-red-500"
+                                                    : ""
+                                            }
+                                            disabled={loading}
+                                        />
+                                        {certificateTemplateErrors.signatureName && (
+                                            <p className="text-red-500 text-sm">
+                                                {
+                                                    certificateTemplateErrors.signatureName
+                                                }
+                                            </p>
+                                        )}
+                                    </div>
+
+                                    <div className="space-y-4">
+                                        <Label
+                                            htmlFor="signature-designation"
+                                            className="text-sm font-semibold"
+                                        >
+                                            Signature Designation
+                                        </Label>
+                                        <Input
+                                            id="signature-designation"
+                                            name="signatureDesignation"
+                                            value={
+                                                certificateTemplate.signatureDesignation
+                                            }
+                                            onChange={
+                                                handleCertificateTemplateInputChange
+                                            }
+                                            placeholder="Course Instructor"
+                                            disabled={loading}
+                                        />
+                                    </div>
+
+                                    <Button type="submit" disabled={loading}>
+                                        {loading ? (
+                                            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                        ) : (
+                                            <Save className="h-4 w-4 mr-2" />
+                                        )}
+                                        {loading ? BUTTON_SAVING : BUTTON_SAVE}
+                                    </Button>
+                                </form>
+
+                                {/* Media uploads with automatic sync - outside the form */}
+                                <div className="space-y-6">
+                                    <div className="space-y-4">
+                                        <Label className="text-sm font-semibold">
+                                            Signature Image
+                                        </Label>
+                                        <p className="text-sm text-muted-foreground">
+                                            Upload a signature image for the
+                                            certificate (saves automatically)
+                                        </p>
+                                        <MediaSelector
+                                            title=""
+                                            src={
+                                                (certificateTemplate.signatureImage &&
+                                                    certificateTemplate
+                                                        .signatureImage
+                                                        .thumbnail) ||
+                                                ""
+                                            }
+                                            srcTitle={
+                                                (certificateTemplate.signatureImage &&
+                                                    certificateTemplate
+                                                        .signatureImage
+                                                        .originalFileName) ||
+                                                ""
+                                            }
+                                            onSelection={(media?: Media) => {
+                                                if (media) {
+                                                    setCertificateTemplate(
+                                                        (prev) => ({
+                                                            ...prev,
+                                                            signatureImage:
+                                                                media,
+                                                        }),
+                                                    );
+                                                }
+                                                saveCertificateSignatureImage(
+                                                    media,
+                                                );
+                                            }}
+                                            mimeTypesToShow={[
+                                                ...MIMETYPE_IMAGE,
+                                            ]}
+                                            access="public"
+                                            strings={{}}
+                                            profile={
+                                                profile as unknown as Profile
+                                            }
+                                            address={address}
+                                            mediaId={
+                                                (certificateTemplate.signatureImage &&
+                                                    certificateTemplate
+                                                        .signatureImage
+                                                        .mediaId) ||
+                                                ""
+                                            }
+                                            onRemove={() => {
+                                                setCertificateTemplate(
+                                                    (prev) => ({
+                                                        ...prev,
+                                                        signatureImage: {},
+                                                    }),
+                                                );
+                                                saveCertificateSignatureImage();
+                                            }}
+                                            type="certificate"
+                                            disabled={loading}
+                                        />
+                                    </div>
+
+                                    <div className="space-y-4">
+                                        <Label className="text-sm font-semibold">
+                                            Logo
+                                        </Label>
+                                        <p className="text-sm text-muted-foreground">
+                                            Upload a logo for the certificate
+                                            (saves automatically)
+                                        </p>
+                                        <MediaSelector
+                                            title=""
+                                            src={
+                                                (certificateTemplate.logo &&
+                                                    certificateTemplate.logo
+                                                        .thumbnail) ||
+                                                ""
+                                            }
+                                            srcTitle={
+                                                (certificateTemplate.logo &&
+                                                    certificateTemplate.logo
+                                                        .originalFileName) ||
+                                                ""
+                                            }
+                                            onSelection={(media?: Media) => {
+                                                if (media) {
+                                                    setCertificateTemplate(
+                                                        (prev) => ({
+                                                            ...prev,
+                                                            logo: media,
+                                                        }),
+                                                    );
+                                                }
+                                                saveCertificateLogo(media);
+                                            }}
+                                            mimeTypesToShow={[
+                                                ...MIMETYPE_IMAGE,
+                                            ]}
+                                            access="public"
+                                            strings={{}}
+                                            profile={
+                                                profile as unknown as Profile
+                                            }
+                                            address={address}
+                                            mediaId={
+                                                (certificateTemplate.logo &&
+                                                    certificateTemplate.logo
+                                                        .mediaId) ||
+                                                ""
+                                            }
+                                            onRemove={() => {
+                                                setCertificateTemplate(
+                                                    (prev) => ({
+                                                        ...prev,
+                                                        logo: {},
+                                                    }),
+                                                );
+                                                saveCertificateLogo();
+                                            }}
+                                            type="certificate"
+                                            disabled={loading}
+                                        />
+                                    </div>
+                                </div>
+                            </CollapsibleContent>
+                        </Collapsible>
+                    </div>
+                )}
+            </div>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/download-options.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/download-options.tsx
new file mode 100644
index 000000000..6fe7eead9
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/download-options.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@courselit/components-library";
+import { Constants } from "@courselit/common-models";
+import { COURSE_TYPE_DOWNLOAD } from "@ui-config/constants";
+import {
+    APP_MESSAGE_COURSE_SAVED,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+import { AlertCircle } from "lucide-react";
+
+const { PaymentPlanType: paymentPlanType } = Constants;
+
+const MUTATION_UPDATE_LEAD_MAGNET = `
+    mutation UpdateLeadMagnet($courseId: String!, $leadMagnet: Boolean!) {
+        updateCourse(courseData: { id: $courseId, leadMagnet: $leadMagnet }) {
+            courseId
+        }
+    }
+`;
+
+interface DownloadOptionsProps {
+    product: any;
+    paymentPlans: any[];
+}
+
+export default function DownloadOptions({
+    product,
+    paymentPlans,
+}: DownloadOptionsProps) {
+    const { toast } = useToast();
+    const fetch = useGraphQLFetch();
+    const [loading, setLoading] = useState(false);
+    const [leadMagnet, setLeadMagnet] = useState(product?.leadMagnet || false);
+
+    const handleSwitchChange = async () => {
+        const newValue = !leadMagnet;
+        const previousValue = leadMagnet;
+        setLeadMagnet(newValue);
+
+        if (!product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_LEAD_MAGNET,
+                    variables: {
+                        courseId: product.courseId,
+                        leadMagnet: newValue,
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            // Revert to previous state on error
+            setLeadMagnet(previousValue);
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Only show for download type products
+    if (product?.type?.toLowerCase() !== COURSE_TYPE_DOWNLOAD) {
+        return null;
+    }
+
+    const hasExactlyOneFreePlan =
+        paymentPlans.length === 1 &&
+        paymentPlans.some((plan) => plan.type === paymentPlanType.FREE);
+    const isSwitchDisabled = loading || !hasExactlyOneFreePlan;
+
+    return (
+        <div className="space-y-8">
+            <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                    <Label
+                        className={`${!hasExactlyOneFreePlan ? "text-muted-foreground" : ""} text-base font-semibold`}
+                    >
+                        Lead Magnet
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                        Send the product to user for free in exchange of their
+                        email address
+                    </p>
+                    {!hasExactlyOneFreePlan && (
+                        <div className="flex items-start gap-2 text-red-600">
+                            <AlertCircle className="h-4 w-4 mt-0.5 text-red-600" />
+                            <p className="text-xs leading-5">
+                                Product must have exactly one free payment plan
+                                to enable lead magnet
+                            </p>
+                        </div>
+                    )}
+                </div>
+                <div>
+                    <Switch
+                        checked={leadMagnet}
+                        disabled={isSwitchDisabled}
+                        onCheckedChange={handleSwitchChange}
+                    />
+                </div>
+            </div>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/payment-plans.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/payment-plans.tsx
new file mode 100644
index 000000000..e1197840d
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/payment-plans.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@courselit/components-library";
+import { PaymentPlanType } from "@courselit/common-models";
+import PaymentPlanList from "@components/admin/payments/payment-plan-list";
+import { TOAST_TITLE_ERROR } from "@ui-config/strings";
+
+interface PaymentPlansProps {
+    productId: string;
+    paymentPlans: any[];
+    setPaymentPlans: (plans: any[]) => void;
+    defaultPaymentPlan: string;
+    setDefaultPaymentPlan: (planId: string) => void;
+    onPlanArchived: (planId: string) => Promise<any>;
+    onDefaultPlanChanged: (planId: string) => Promise<any>;
+    loading: boolean;
+}
+
+export default function PaymentPlans({
+    productId,
+    paymentPlans,
+    setPaymentPlans,
+    defaultPaymentPlan,
+    setDefaultPaymentPlan,
+    onPlanArchived,
+    onDefaultPlanChanged,
+    loading,
+}: PaymentPlansProps) {
+    const { toast } = useToast();
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-4 flex flex-col md:flex-row md:items-start md:justify-between w-full">
+                <div className="space-y-2">
+                    <Label className="text-base font-semibold">Pricing</Label>
+                    <p className="text-sm text-muted-foreground">
+                        Manage your product&apos;s pricing plans
+                    </p>
+                </div>
+                <PaymentPlanList
+                    paymentPlans={paymentPlans.map((plan) => ({
+                        ...plan,
+                        type: plan.type.toLowerCase() as PaymentPlanType,
+                    }))}
+                    onPlanArchived={async (id) => {
+                        try {
+                            await onPlanArchived(id);
+                        } catch (err: any) {
+                            toast({
+                                title: TOAST_TITLE_ERROR,
+                                description: err.message,
+                                variant: "destructive",
+                            });
+                        }
+                    }}
+                    onDefaultPlanChanged={async (id) => {
+                        try {
+                            await onDefaultPlanChanged(id);
+                        } catch (err: any) {
+                            toast({
+                                title: TOAST_TITLE_ERROR,
+                                description: err.message,
+                            });
+                        }
+                    }}
+                    defaultPaymentPlanId={defaultPaymentPlan}
+                    entityId={productId}
+                    entityType={"product"}
+                    disabled={loading}
+                />
+            </div>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-deletion.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-deletion.tsx
new file mode 100644
index 000000000..810a925ae
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-deletion.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { useContext, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Trash2, Loader2 } from "lucide-react";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { useToast } from "@courselit/components-library";
+import { FetchBuilder } from "@courselit/utils";
+import { AddressContext } from "@components/contexts";
+import {
+    APP_MESSAGE_COURSE_DELETED,
+    BTN_DELETE_COURSE,
+    DANGER_ZONE_HEADER,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useRouter } from "next/navigation";
+
+interface ProductDeletionProps {
+    product: any;
+}
+
+export default function ProductDeletion({ product }: ProductDeletionProps) {
+    const { toast } = useToast();
+    const router = useRouter();
+    const address = useContext(AddressContext);
+    const [deleteConfirmation, setDeleteConfirmation] = useState("");
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const deleteProduct = async () => {
+        if (!product) return;
+
+        const query = `
+            mutation {
+                result: deleteCourse(id: "${product?.courseId}")
+            }
+        `;
+
+        const fetch = new FetchBuilder()
+            .setUrl(`${address.backend}/api/graph`)
+            .setPayload(query)
+            .setIsGraphQLEndpoint(true)
+            .build();
+
+        try {
+            setIsDeleting(true);
+            const response = await fetch.exec();
+
+            if (response.result) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_DELETED,
+                });
+                router.push("/dashboard/products");
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-4">
+                <h2 className="text-destructive font-semibold">
+                    {DANGER_ZONE_HEADER}
+                </h2>
+                <AlertDialog
+                    onOpenChange={(open) =>
+                        !open &&
+                        (setDeleteConfirmation(""), setIsDeleting(false))
+                    }
+                >
+                    <AlertDialogTrigger asChild>
+                        <Button
+                            type="button"
+                            variant="destructive"
+                            disabled={isDeleting}
+                        >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            {BTN_DELETE_COURSE}
+                        </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>
+                                Are you absolutely sure?
+                            </AlertDialogTitle>
+                            <AlertDialogDescription>
+                                This action is irreversible. All product data
+                                will be permanently deleted.
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <div className="py-4">
+                            <Label
+                                htmlFor="delete-confirmation"
+                                className="text-sm font-medium"
+                            >
+                                Type &quot;delete&quot; to confirm
+                            </Label>
+                            <Input
+                                id="delete-confirmation"
+                                type="text"
+                                placeholder="Type 'delete' to confirm"
+                                value={deleteConfirmation}
+                                onChange={(e) =>
+                                    setDeleteConfirmation(e.target.value)
+                                }
+                                className="mt-2"
+                            />
+                        </div>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction
+                                onClick={deleteProduct}
+                                disabled={
+                                    deleteConfirmation !== "delete" ||
+                                    isDeleting
+                                }
+                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                {isDeleting ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Deleting...
+                                    </>
+                                ) : (
+                                    "Delete"
+                                )}
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-details.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-details.tsx
new file mode 100644
index 000000000..95adb9037
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-details.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { FormEvent, useContext, useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+    TextEditor,
+    TextEditorEmptyDoc,
+    useToast,
+} from "@courselit/components-library";
+import { AddressContext } from "@components/contexts";
+import {
+    APP_MESSAGE_COURSE_SAVED,
+    BUTTON_SAVE,
+    BUTTON_SAVING,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+import { Save, Loader2 } from "lucide-react";
+
+const MUTATION_UPDATE_BASIC_DETAILS = `
+    mutation UpdateBasicDetails($courseId: String!, $title: String!, $description: String!) {
+        updateCourse(courseData: { id: $courseId, title: $title, description: $description }) {
+           courseId 
+        }
+    }
+`;
+
+interface ProductDetailsProps {
+    product: any;
+}
+
+export default function ProductDetails({ product }: ProductDetailsProps) {
+    const { toast } = useToast();
+    const address = useContext(AddressContext);
+    const fetch = useGraphQLFetch();
+    const [loading, setLoading] = useState(false);
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [refresh, setRefresh] = useState(0);
+    const [formData, setFormData] = useState<{
+        name: string;
+        description: any;
+    }>({
+        name: product?.title || "",
+        description: product?.description
+            ? JSON.parse(product.description)
+            : TextEditorEmptyDoc,
+    });
+
+    useEffect(() => {
+        if (product) {
+            setRefresh((prev) => prev + 1);
+        }
+    }, [product]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const validateForm = () => {
+        const newErrors: Record<string, string> = {};
+        if (!formData.name.trim()) newErrors.name = "Name is required";
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (!validateForm() || !product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_BASIC_DETAILS,
+                    variables: {
+                        courseId: product.courseId,
+                        title: formData.name,
+                        description: JSON.stringify(formData.description),
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-8">
+            <form onSubmit={handleSubmit} className="space-y-8">
+                <div className="space-y-4">
+                    <Label htmlFor="name" className="text-base font-semibold">
+                        Name
+                    </Label>
+                    <Input
+                        id="name"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleInputChange}
+                        className={errors.name ? "border-red-500" : ""}
+                        disabled={loading}
+                    />
+                    {errors.name && (
+                        <p className="text-red-500 text-sm">{errors.name}</p>
+                    )}
+                </div>
+
+                <div className="space-y-4">
+                    <Label
+                        htmlFor="description"
+                        className="text-base font-semibold"
+                    >
+                        Description
+                    </Label>
+
+                    <TextEditor
+                        initialContent={formData.description}
+                        onChange={(state: any) => {
+                            handleInputChange({
+                                target: {
+                                    name: "description",
+                                    value: state,
+                                },
+                            } as React.ChangeEvent<HTMLInputElement>);
+                        }}
+                        url={address.backend}
+                        refresh={refresh}
+                    />
+                </div>
+
+                <Button type="submit" disabled={loading}>
+                    {loading ? (
+                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                        <Save className="h-4 w-4 mr-2" />
+                    )}
+                    {loading ? BUTTON_SAVING : BUTTON_SAVE}
+                </Button>
+            </form>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-featured-image.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-featured-image.tsx
new file mode 100644
index 000000000..60850e4de
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-featured-image.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useContext, useState } from "react";
+import { Separator } from "@/components/ui/separator";
+import { MediaSelector, useToast } from "@courselit/components-library";
+import { Media, Profile } from "@courselit/common-models";
+import { AddressContext, ProfileContext } from "@components/contexts";
+import { MIMETYPE_IMAGE } from "@ui-config/constants";
+import {
+    APP_MESSAGE_COURSE_SAVED,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+
+const MUTATION_UPDATE_FEATURED_IMAGE = `
+    mutation UpdateFeaturedImage($courseId: String!, $media: MediaInput) {
+        updateCourse(courseData: {
+            id: $courseId
+            featuredImage: $media
+        }) {
+            courseId
+        }
+    }
+`;
+
+interface ProductFeaturedImageProps {
+    product: any;
+}
+
+export default function ProductFeaturedImage({
+    product,
+}: ProductFeaturedImageProps) {
+    const { toast } = useToast();
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+    const fetch = useGraphQLFetch();
+    const [loading, setLoading] = useState(false);
+    const [featuredImage, setFeaturedImage] = useState<any>(
+        product?.featuredImage || {},
+    );
+
+    const saveFeaturedImage = async (media?: Media) => {
+        if (!product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_FEATURED_IMAGE,
+                    variables: {
+                        courseId: product.courseId,
+                        media: media || null,
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-4">
+                <h2 className="text-base font-semibold">Featured image</h2>
+                <p className="text-sm text-muted-foreground">
+                    The hero image for your course
+                </p>
+                <MediaSelector
+                    title=""
+                    src={(featuredImage && featuredImage.thumbnail) || ""}
+                    srcTitle={
+                        (featuredImage && featuredImage.originalFileName) || ""
+                    }
+                    onSelection={(media?: Media) => {
+                        if (media) {
+                            setFeaturedImage(media);
+                        }
+                        saveFeaturedImage(media);
+                    }}
+                    mimeTypesToShow={[...MIMETYPE_IMAGE]}
+                    access="public"
+                    strings={{}}
+                    profile={profile as unknown as Profile}
+                    address={address}
+                    mediaId={(featuredImage && featuredImage.mediaId) || ""}
+                    onRemove={() => {
+                        setFeaturedImage({});
+                        saveFeaturedImage();
+                    }}
+                    type="course"
+                    disabled={loading}
+                />
+            </div>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-publishing.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-publishing.tsx
new file mode 100644
index 000000000..9a00d48ff
--- /dev/null
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-publishing.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@courselit/components-library";
+import {
+    APP_MESSAGE_COURSE_SAVED,
+    TOAST_TITLE_ERROR,
+    TOAST_TITLE_SUCCESS,
+} from "@ui-config/strings";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+
+const MUTATION_UPDATE_PUBLISHED = `
+    mutation UpdatePublished($courseId: String!, $published: Boolean!) {
+        updateCourse(courseData: { id: $courseId, published: $published }) {
+            courseId
+        }
+    }
+`;
+
+const MUTATION_UPDATE_PRIVACY = `
+    mutation UpdatePrivacy($courseId: String!, $privacy: CoursePrivacyType!) {
+        updateCourse(courseData: { id: $courseId, privacy: $privacy }) {
+            courseId
+        }
+    }
+`;
+
+interface ProductPublishingProps {
+    product: any;
+}
+
+export default function ProductPublishing({ product }: ProductPublishingProps) {
+    const { toast } = useToast();
+    const fetch = useGraphQLFetch();
+    const [loading, setLoading] = useState(false);
+    const [isPublished, setIsPublished] = useState(product?.published || false);
+    const [isPrivate, setIsPrivate] = useState(
+        product?.privacy!.toUpperCase() === "UNLISTED" || false,
+    );
+
+    const handlePublishedChange = async () => {
+        const newValue = !isPublished;
+        const previousValue = isPublished;
+        setIsPublished(newValue);
+
+        if (!product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_PUBLISHED,
+                    variables: {
+                        courseId: product.courseId,
+                        published: newValue,
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            // Revert to previous state on error
+            setIsPublished(previousValue);
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePrivacyChange = async () => {
+        const newValue = !isPrivate;
+        const previousValue = isPrivate;
+        setIsPrivate(newValue);
+
+        if (!product?.courseId) return;
+
+        try {
+            setLoading(true);
+            const response = await fetch
+                .setPayload({
+                    query: MUTATION_UPDATE_PRIVACY,
+                    variables: {
+                        courseId: product.courseId,
+                        privacy: newValue ? "UNLISTED" : "PUBLIC",
+                    },
+                })
+                .build()
+                .exec();
+
+            if (response?.updateCourse) {
+                toast({
+                    title: TOAST_TITLE_SUCCESS,
+                    description: APP_MESSAGE_COURSE_SAVED,
+                });
+            }
+        } catch (err: any) {
+            // Revert to previous state on error
+            setIsPrivate(previousValue);
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-8">
+            <div className="space-y-6" id="publish">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label className="text-base font-semibold">
+                            Published
+                        </Label>
+                        <p className="text-sm text-muted-foreground">
+                            Make this course available to students
+                        </p>
+                    </div>
+                    <Switch
+                        checked={isPublished}
+                        onCheckedChange={handlePublishedChange}
+                        disabled={loading}
+                    />
+                </div>
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label
+                            className={`${!isPublished ? "text-muted-foreground" : ""} text-base font-semibold`}
+                        >
+                            Visibility
+                        </Label>
+                        <p className="text-sm text-muted-foreground">
+                            Only accessible via direct link
+                        </p>
+                    </div>
+                    <Switch
+                        checked={isPrivate}
+                        onCheckedChange={handlePrivacyChange}
+                        disabled={loading || !isPublished}
+                    />
+                </div>
+            </div>
+            <Separator />
+        </div>
+    );
+}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/page.tsx
index 7ed1c7b80..75a1ec2bf 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/page.tsx
@@ -1,242 +1,58 @@
 "use client";
 
-import { FormEvent, useContext, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Separator } from "@/components/ui/separator";
-import { Trash2, Loader2 } from "lucide-react";
-
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import {
-    APP_MESSAGE_COURSE_DELETED,
-    APP_MESSAGE_COURSE_SAVED,
-    BTN_DELETE_COURSE,
-    COURSE_SETTINGS_CARD_HEADER,
-    DANGER_ZONE_HEADER,
-    MANAGE_COURSES_PAGE_HEADING,
-    PRICING_EMAIL,
-    PRICING_EMAIL_LABEL,
-    PRICING_EMAIL_SUBTITLE,
-    PRICING_FREE,
-    PRICING_FREE_LABEL,
-    PRICING_FREE_SUBTITLE,
-    PRICING_PAID,
-    PRICING_PAID_LABEL,
-    PRICING_PAID_NO_PAYMENT_METHOD,
-    PRICING_PAID_SUBTITLE,
-    TOAST_TITLE_ERROR,
-    TOAST_TITLE_SUCCESS,
-} from "@ui-config/strings";
+import { useEffect } from "react";
 import DashboardContent from "@components/admin/dashboard-content";
-import { redirect, useParams, useRouter } from "next/navigation";
-import {
-    AddressContext,
-    ProfileContext,
-    SiteInfoContext,
-} from "@components/contexts";
+import { redirect, useParams } from "next/navigation";
 import { truncate } from "@ui-lib/utils";
-import {
-    MediaSelector,
-    TextEditor,
-    TextEditorEmptyDoc,
-    useToast,
-} from "@courselit/components-library";
-import { FetchBuilder } from "@courselit/utils";
-import {
-    Media,
-    PaymentPlanType,
-    ProductPriceType,
-    Profile,
-    Constants,
-} from "@courselit/common-models";
-import { COURSE_TYPE_DOWNLOAD, MIMETYPE_IMAGE } from "@ui-config/constants";
+import { Constants, UIConstants } from "@courselit/common-models";
 import useProduct from "@/hooks/use-product";
 import { usePaymentPlanOperations } from "@/hooks/use-payment-plan-operations";
-import PaymentPlanList from "@components/admin/payments/payment-plan-list";
 import {
-    TooltipProvider,
-    TooltipTrigger,
-    TooltipContent,
-    Tooltip,
-} from "@components/ui/tooltip";
-const { PaymentPlanType: paymentPlanType, MembershipEntityType } = Constants;
-
-const MUTATIONS = {
-    UPDATE_BASIC_DETAILS: `
-        mutation UpdateBasicDetails($courseId: String!, $title: String!, $description: String!) {
-            updateCourse(courseData: { id: $courseId, title: $title, description: $description }) {
-               courseId 
-            }
-        }
-    `,
-    UPDATE_PUBLISHED: `
-        mutation UpdatePublished($courseId: String!, $published: Boolean!) {
-            updateCourse(courseData: { id: $courseId, published: $published }) {
-                courseId
-            }
-        }
-    `,
-    UPDATE_PRIVACY: `
-        mutation UpdatePrivacy($courseId: String!, $privacy: CoursePrivacyType!) {
-            updateCourse(courseData: { id: $courseId, privacy: $privacy }) {
-                courseId
-            }
-        }
-    `,
-    UPDATE_FEATURED_IMAGE: `
-        mutation UpdateFeaturedImage($courseId: String!, $media: MediaInput) {
-            updateCourse(courseData: {
-                id: $courseId
-                featuredImage: $media
-            }) {
-                courseId
-            }
-        }
-    `,
-    // UPDATE_COST_TYPE: `
-    //     mutation UpdateCostType($courseId: String!, $costType: CostType!) {
-    //         updateCourse(courseData: { id: $courseId, costType: $costType }) {
-    //             courseId
-    //         }
-    //     }
-    // `,
-    // UPDATE_COST: `
-    //     mutation UpdateCost($courseId: String!, $cost: Float!) {
-    //         updateCourse(courseData: { id: $courseId, cost: $cost }) {
-    //             courseId
-    //         }
-    //     }
-    // `,
-    UPDATE_LEAD_MAGNET: `
-        mutation UpdateLeadMagnet($courseId: String!, $leadMagnet: Boolean!) {
-            updateCourse(courseData: { id: $courseId, leadMagnet: $leadMagnet }) {
-                courseId
-            }
-        }
-    `,
-};
+    COURSE_SETTINGS_CARD_HEADER,
+    MANAGE_COURSES_PAGE_HEADING,
+} from "@ui-config/strings";
 
-const updateCourse = async (query: string, variables: any, address: string) => {
-    const fetch = new FetchBuilder()
-        .setUrl(`${address}/api/graph`)
-        .setPayload({ query, variables })
-        .setIsGraphQLEndpoint(true)
-        .build();
+// Import the new components
+import ProductDetails from "./components/product-details";
+import ProductFeaturedImage from "./components/product-featured-image";
+import PaymentPlans from "./components/payment-plans";
+import DownloadOptions from "./components/download-options";
+import ProductPublishing from "./components/product-publishing";
+import Certificates from "./components/certificates";
+import ProductDeletion from "./components/product-deletion";
 
-    return await fetch.exec();
-};
+const { permissions } = UIConstants;
 
-const withErrorHandling = async (
-    action: () => Promise<any>,
-    setLoading: (loading: boolean) => void,
-    toast: any,
-) => {
-    try {
-        setLoading(true);
-        const response = await action();
-        if (response?.updateCourse) {
-            toast({
-                title: TOAST_TITLE_SUCCESS,
-                description: APP_MESSAGE_COURSE_SAVED,
-            });
-        }
-        return response;
-    } catch (err: any) {
-        toast({
-            title: TOAST_TITLE_ERROR,
-            description: err.message,
-            variant: "destructive",
-        });
-    } finally {
-        setLoading(false);
-    }
-};
+const { MembershipEntityType } = Constants;
 
 export default function SettingsPage() {
-    const { toast } = useToast();
-    const router = useRouter();
     const params = useParams();
     const productId = params?.id as string;
-    const [errors, setErrors] = useState({});
-    const address = useContext(AddressContext);
     const { product, loaded: productLoaded } = useProduct(productId);
-    const profile = useContext(ProfileContext);
-    const [loading, setLoading] = useState(false);
-    const [formData, setFormData] = useState<{
-        name: string;
-        description: any;
-        isPublished: boolean;
-        isPrivate: boolean;
-        featuredImage: any;
-        costType: ProductPriceType;
-        cost: number;
-        leadMagnet: boolean;
-    }>({
-        name: "",
-        description: TextEditorEmptyDoc,
-        isPublished: false,
-        isPrivate: false,
-        featuredImage: {},
-        costType: PRICING_FREE,
-        cost: 0,
-        leadMagnet: false,
-    });
-    const breadcrumbs = [
-        { label: MANAGE_COURSES_PAGE_HEADING, href: "/dashboard/products" },
-        {
-            label: product ? truncate(product.title || "", 20) || "..." : "...",
-            href: `/dashboard/product/${productId}`,
-        },
-        { label: COURSE_SETTINGS_CARD_HEADER, href: "#" },
-    ];
-    const [refresh, setRefresh] = useState(0);
-    const [deleteConfirmation, setDeleteConfirmation] = useState("");
-    const [isDeleting, setIsDeleting] = useState(false);
-    const siteinfo = useContext(SiteInfoContext);
     const {
         paymentPlans,
         setPaymentPlans,
         defaultPaymentPlan,
         setDefaultPaymentPlan,
-        onPlanSubmitted,
         onPlanArchived,
         onDefaultPlanChanged,
+        loading,
     } = usePaymentPlanOperations({
         id: productId,
         entityType: MembershipEntityType.COURSE,
     });
 
+    const breadcrumbs = [
+        { label: MANAGE_COURSES_PAGE_HEADING, href: "/dashboard/products" },
+        {
+            label: product ? truncate(product.title || "", 20) || "..." : "...",
+            href: `/dashboard/product/${productId}`,
+        },
+        { label: COURSE_SETTINGS_CARD_HEADER, href: "#" },
+    ];
+
     useEffect(() => {
         if (product) {
-            setFormData({
-                name: product?.title || "",
-                description: product?.description
-                    ? JSON.parse(product.description)
-                    : TextEditorEmptyDoc,
-                isPublished: product?.published || false,
-                isPrivate:
-                    product?.privacy!.toUpperCase() === "UNLISTED" || false,
-                featuredImage:
-                    product?.featuredImage || (null as string | null),
-                costType:
-                    product?.costType ||
-                    (PRICING_FREE.toUpperCase() as ProductPriceType),
-                cost: product?.cost || 0,
-                leadMagnet: product?.leadMagnet || false,
-            });
-            setRefresh(refresh + 1);
             setPaymentPlans(product?.paymentPlans || []);
             setDefaultPaymentPlan(product?.defaultPaymentPlan || "");
         }
@@ -246,222 +62,18 @@ export default function SettingsPage() {
         redirect("/dashboard/products");
     }
 
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData((prev) => ({ ...prev, [name]: value }));
-    };
-
-    const handleUpdateField = async (field: string, value: any) => {
-        if (!product?.courseId) return;
-
-        const fieldConfig = {
-            isPublished: {
-                mutation: MUTATIONS.UPDATE_PUBLISHED,
-                variables: { published: value },
-            },
-            isPrivate: {
-                mutation: MUTATIONS.UPDATE_PRIVACY,
-                variables: { privacy: value ? "UNLISTED" : "PUBLIC" },
-            },
-            leadMagnet: {
-                mutation: MUTATIONS.UPDATE_LEAD_MAGNET,
-                variables: { leadMagnet: value },
-            },
-        }[field];
-
-        if (!fieldConfig) return;
-
-        await withErrorHandling(
-            () =>
-                updateCourse(
-                    fieldConfig.mutation,
-                    { courseId: product.courseId, ...fieldConfig.variables },
-                    address.backend,
-                ),
-            setLoading,
-            toast,
-        );
-    };
-
-    const handleSwitchChange = async (name: string) => {
-        const newValue = !formData[name];
-        setFormData((prev) => ({ ...prev, [name]: newValue }));
-        await handleUpdateField(name, newValue);
-    };
-
-    const validateForm = () => {
-        const newErrors = {};
-        if (!formData.name.trim()) newErrors.name = "Name is required";
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (!validateForm() || !product?.courseId) return;
-
-        await withErrorHandling(
-            () =>
-                updateCourse(
-                    MUTATIONS.UPDATE_BASIC_DETAILS,
-                    {
-                        courseId: product.courseId,
-                        title: formData.name,
-                        description: JSON.stringify(formData.description),
-                    },
-                    address.backend,
-                ),
-            setLoading,
-            toast,
-        );
-    };
-
-    const saveFeaturedImage = async (media?: Media) => {
-        if (!product?.courseId) return;
-
-        await withErrorHandling(
-            () =>
-                updateCourse(
-                    MUTATIONS.UPDATE_FEATURED_IMAGE,
-                    {
-                        courseId: product.courseId,
-                        media: media || null,
-                    },
-                    address.backend,
-                ),
-            setLoading,
-            toast,
-        );
-    };
-
-    // const handleCostTypeChange = async (val: string) => {
-    //     setFormData((prev) => ({
-    //         ...prev,
-    //         costType: val as ProductPriceType,
-    //     }));
-
-    //     if (!product?.courseId) return;
-
-    //     await withErrorHandling(
-    //         () =>
-    //             updateCourse(
-    //                 MUTATIONS.UPDATE_COST_TYPE,
-    //                 {
-    //                     id: product.courseId,
-    //                     costType: val,
-    //                 },
-    //                 address.backend,
-    //             ),
-    //         setLoading,
-    //         toast,
-    //     );
-    // };
-
-    // const debouncedUpdateCost = useCallback(
-    //     debounce((value: number, productId: string) => {
-    //         withErrorHandling(
-    //             () =>
-    //                 updateCourse(
-    //                     MUTATIONS.UPDATE_COST,
-    //                     {
-    //                         id: productId,
-    //                         cost: value,
-    //                     },
-    //                     address.backend,
-    //                 ),
-    //             setLoading,
-    //             toast,
-    //         );
-    //     }, 1000), // 1 second delay
-    //     [address.backend, toast], // Dependencies
-    // );
-
-    // const handleCostChange = (value: number) => {
-    //     setFormData((prev) => ({
-    //         ...prev,
-    //         cost: value,
-    //     }));
-
-    //     if (!product?.courseId) return;
-    //     debouncedUpdateCost(value, product.courseId);
-    // };
-
-    const options: {
-        label: string;
-        value: string;
-        sublabel: string;
-        disabled?: boolean;
-    }[] = [
-        {
-            label: PRICING_FREE_LABEL,
-            value: PRICING_FREE.toUpperCase(),
-            sublabel: PRICING_FREE_SUBTITLE,
-        },
-        {
-            label: PRICING_PAID_LABEL,
-            value: PRICING_PAID.toUpperCase(),
-            sublabel: siteinfo.paymentMethod
-                ? PRICING_PAID_SUBTITLE
-                : PRICING_PAID_NO_PAYMENT_METHOD,
-            disabled: !siteinfo.paymentMethod,
-        },
-    ];
-    if (product?.type?.toLowerCase() === COURSE_TYPE_DOWNLOAD) {
-        options.splice(1, 0, {
-            label: PRICING_EMAIL_LABEL,
-            value: PRICING_EMAIL.toUpperCase(),
-            sublabel: PRICING_EMAIL_SUBTITLE,
-        });
-    }
-
-    const deleteProduct = async () => {
-        if (!product) return;
-
-        const query = `
-            mutation {
-                result: deleteCourse(id: "${product?.courseId}")
-            }
-        `;
-
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload(query)
-            .setIsGraphQLEndpoint(true)
-            .build();
-
-        try {
-            setIsDeleting(true);
-            const response = await fetch.exec();
-
-            if (response.result) {
-                toast({
-                    title: TOAST_TITLE_SUCCESS,
-                    description: APP_MESSAGE_COURSE_DELETED,
-                });
-                redirect("/dashboard/products");
-            }
-        } catch (err: any) {
-            toast({
-                title: TOAST_TITLE_ERROR,
-                description: err.message,
-                variant: "destructive",
-            });
-        } finally {
-            setIsDeleting(false);
-            toast({
-                title: TOAST_TITLE_SUCCESS,
-                description: APP_MESSAGE_COURSE_DELETED,
-            });
-            router.push("/dashboard/products");
-        }
-    };
-
     if (!product) {
         return null;
     }
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             <div className="space-y-8">
                 <div className="flex justify-between items-center">
                     <div>
@@ -471,351 +83,33 @@ export default function SettingsPage() {
                         </p>
                     </div>
                 </div>
-
-                <form onSubmit={handleSubmit} className="space-y-8">
-                    <div className="space-y-4">
-                        <Label
-                            htmlFor="name"
-                            className="text-base font-semibold"
-                        >
-                            Name
-                        </Label>
-                        <Input
-                            id="name"
-                            name="name"
-                            value={formData.name}
-                            onChange={handleInputChange}
-                            className={errors.name ? "border-red-500" : ""}
-                        />
-                        {errors.name && (
-                            <p className="text-red-500 text-sm">
-                                {errors.name}
-                            </p>
-                        )}
-                    </div>
-
-                    <div className="space-y-4">
-                        <Label
-                            htmlFor="description"
-                            className="text-base font-semibold"
-                        >
-                            Description
-                        </Label>
-
-                        <TextEditor
-                            initialContent={formData.description}
-                            onChange={(state: any) => {
-                                handleInputChange({
-                                    target: {
-                                        name: "description",
-                                        value: state,
-                                    },
-                                });
-                            }}
-                            url={address.backend}
-                            refresh={refresh}
-                        />
-                    </div>
-
-                    <Button type="submit" disabled={loading}>
-                        Save Changes
-                    </Button>
-                </form>
-
-                <Separator />
-
-                <div className="space-y-4">
-                    <h2 className="text-lg font-semibold">Featured image</h2>
-                    <p className="text-sm text-muted-foreground">
-                        The hero image for your course
-                    </p>
-                    {/* <MediaUpload
-              type="image"
-              value={formData.featuredImage}
-              recommendedSize="1280x720px"
-            /> */}
-                    <MediaSelector
-                        title=""
-                        src={
-                            (formData.featuredImage &&
-                                formData.featuredImage.thumbnail) ||
-                            ""
-                        }
-                        srcTitle={
-                            (formData.featuredImage &&
-                                formData.featuredImage.originalFileName) ||
-                            ""
-                        }
-                        onSelection={(media?: Media) => {
-                            media &&
-                                setFormData((prev) => ({
-                                    ...prev,
-                                    featuredImage: media,
-                                }));
-                            saveFeaturedImage(media);
-                        }}
-                        mimeTypesToShow={[...MIMETYPE_IMAGE]}
-                        access="public"
-                        strings={{}}
-                        profile={profile as Profile}
-                        address={address}
-                        mediaId={
-                            (formData.featuredImage &&
-                                formData.featuredImage.mediaId) ||
-                            ""
-                        }
-                        onRemove={() => {
-                            setFormData((prev) => ({
-                                ...prev,
-                                featuredImage: {},
-                            }));
-                            saveFeaturedImage();
-                        }}
-                        type="course"
-                    />
-                </div>
-
-                <Separator />
-
-                <div className="space-y-4 flex flex-col md:flex-row md:items-start md:justify-between w-full">
-                    <div className="space-y-2">
-                        <Label className="text-lg font-semibold">Pricing</Label>
-                        <p className="text-sm text-muted-foreground">
-                            Manage your product&apos;s pricing plans
-                        </p>
-                    </div>
-                    <PaymentPlanList
-                        paymentPlans={paymentPlans.map((plan) => ({
-                            ...plan,
-                            type: plan.type.toLowerCase() as PaymentPlanType,
-                        }))}
-                        onPlanArchived={async (id) => {
-                            try {
-                                await onPlanArchived(id);
-                            } catch (err: any) {
-                                toast({
-                                    title: TOAST_TITLE_ERROR,
-                                    description: err.message,
-                                    variant: "destructive",
-                                });
-                            }
-                        }}
-                        onDefaultPlanChanged={async (id) => {
-                            try {
-                                await onDefaultPlanChanged(id);
-                            } catch (err: any) {
-                                toast({
-                                    title: TOAST_TITLE_ERROR,
-                                    description: err.message,
-                                });
-                            }
-                        }}
-                        defaultPaymentPlanId={defaultPaymentPlan}
-                        entityId={productId}
-                        entityType={"product"}
-                    />
-                </div>
-
-                {product?.type?.toLowerCase() === COURSE_TYPE_DOWNLOAD && (
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            {/* <Label className="text-base font-semibold">
-                            Lead Magnet
-                        </Label> */}
-                            <Label
-                                className={`${paymentPlans.length !== 1 || !paymentPlans.some((plan) => plan.type === paymentPlanType.FREE) ? "text-muted-foreground" : ""} text-base font-semibold`}
-                            >
-                                Lead Magnet
-                            </Label>
-                            <p className="text-sm text-muted-foreground">
-                                Send the product to user for free in exchange of
-                                their email address
-                            </p>
-                        </div>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <div>
-                                        <Switch
-                                            checked={formData.leadMagnet}
-                                            disabled={
-                                                paymentPlans.length !== 1 ||
-                                                !paymentPlans.some(
-                                                    (plan) =>
-                                                        plan.type ===
-                                                        paymentPlanType.FREE,
-                                                )
-                                            }
-                                            onCheckedChange={() =>
-                                                handleSwitchChange("leadMagnet")
-                                            }
-                                        />
-                                    </div>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>
-                                        Product must have exactly one free
-                                        payment plan to enable lead magnet
-                                    </p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                )}
-
-                {/* <div className="space-y-6">
-                    <div className="space-y-4">
-                        <Label className="text-lg font-semibold">
-                            Pricing Model
-                        </Label>
-                        <Select
-                            name="costType"
-                            value={formData.costType}
-                            title=""
-                            onChange={handleCostTypeChange}
-                            options={options}
-                        />
-                    </div>
-                    {PRICING_PAID.toUpperCase() ===
-                        formData.costType.toUpperCase() && (
-                            <div className="space-y-2">
-                                <Label className="text-base font-semibold">
-                                    Price
-                                </Label>
-                                <div className="relative w-full sm:w-[200px]">
-                                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-                                        {getSymbolFromCurrency(
-                                            siteinfo.currencyISOCode || "USD",
-                                        )}
-                                    </span>
-                                    <Input
-                                        type="number"
-                                        name="cost"
-                                        placeholder="0.00"
-                                        className="pl-8"
-                                        value={formData.cost}
-                                        onChange={(e) =>
-                                            handleCostChange(+e.target.value)
-                                        }
-                                    />
-                                </div>
-                            </div>
-                        )}
-                </div> */}
-
-                <Separator />
-
-                <div className="space-y-6" id="publish">
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label className="text-base font-semibold">
-                                Published
-                            </Label>
-                            <p className="text-sm text-muted-foreground">
-                                Make this course available to students
-                            </p>
-                        </div>
-                        <Switch
-                            checked={formData.isPublished}
-                            onCheckedChange={() =>
-                                handleSwitchChange("isPublished")
-                            }
-                        />
-                    </div>
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label
-                                className={`${!formData.isPublished ? "text-muted-foreground" : ""} text-base font-semibold`}
-                            >
-                                Visibility
-                            </Label>
-                            <p className="text-sm text-muted-foreground">
-                                Only accessible via direct link
-                            </p>
-                        </div>
-                        <Switch
-                            checked={formData.isPrivate}
-                            onCheckedChange={() =>
-                                handleSwitchChange("isPrivate")
-                            }
-                            disabled={!formData.isPublished}
-                        />
-                    </div>
-                </div>
-
-                <Separator />
-
-                <div className="space-y-4">
-                    <h2 className="text-destructive font-semibold">
-                        {DANGER_ZONE_HEADER}
-                    </h2>
-                    <AlertDialog
-                        onOpenChange={(open) =>
-                            !open &&
-                            (setDeleteConfirmation(""), setIsDeleting(false))
-                        }
-                    >
-                        <AlertDialogTrigger asChild>
-                            <Button
-                                type="button"
-                                variant="destructive"
-                                disabled={loading}
-                            >
-                                <Trash2 className="mr-2 h-4 w-4" />
-                                {BTN_DELETE_COURSE}
-                            </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                            <AlertDialogHeader>
-                                <AlertDialogTitle>
-                                    Are you absolutely sure?
-                                </AlertDialogTitle>
-                                <AlertDialogDescription>
-                                    This action is irreversible. All product
-                                    data will be permanently deleted.
-                                </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <div className="py-4">
-                                <Label
-                                    htmlFor="delete-confirmation"
-                                    className="text-sm font-medium"
-                                >
-                                    Type &quot;delete&quot; to confirm
-                                </Label>
-                                <Input
-                                    id="delete-confirmation"
-                                    type="text"
-                                    placeholder="Type 'delete' to confirm"
-                                    value={deleteConfirmation}
-                                    onChange={(e) =>
-                                        setDeleteConfirmation(e.target.value)
-                                    }
-                                    className="mt-2"
-                                />
-                            </div>
-                            <AlertDialogFooter>
-                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                <AlertDialogAction
-                                    onClick={deleteProduct}
-                                    disabled={
-                                        deleteConfirmation !== "delete" ||
-                                        isDeleting
-                                    }
-                                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50 disabled:cursor-not-allowed"
-                                >
-                                    {isDeleting ? (
-                                        <>
-                                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                            Deleting...
-                                        </>
-                                    ) : (
-                                        "Delete"
-                                    )}
-                                </AlertDialogAction>
-                            </AlertDialogFooter>
-                        </AlertDialogContent>
-                    </AlertDialog>
-                </div>
+                <ProductDetails product={product} />
+                <ProductFeaturedImage product={product} />
+                <PaymentPlans
+                    productId={productId || ""}
+                    paymentPlans={paymentPlans}
+                    setPaymentPlans={setPaymentPlans}
+                    defaultPaymentPlan={defaultPaymentPlan || ""}
+                    setDefaultPaymentPlan={setDefaultPaymentPlan}
+                    onPlanArchived={async (id) => {
+                        await onPlanArchived(id);
+                        setPaymentPlans((prev) =>
+                            prev.filter((p: any) => p.planId !== id),
+                        );
+                    }}
+                    onDefaultPlanChanged={async (id) => {
+                        await onDefaultPlanChanged(id);
+                        setDefaultPaymentPlan(id);
+                    }}
+                    loading={loading}
+                />
+                <DownloadOptions
+                    product={product}
+                    paymentPlans={paymentPlans}
+                />
+                <ProductPublishing product={product} />
+                <Certificates product={product} productId={productId || ""} />
+                <ProductDeletion product={product} />
             </div>
         </DashboardContent>
     );
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/page.tsx
index caf89ff42..cdeebf826 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/page.tsx
@@ -53,10 +53,11 @@ import { truncate } from "@ui-lib/utils";
 import MetricCard from "./metric-card";
 import { useToast, Tooltip as TooltipCL } from "@courselit/components-library";
 import { useActivities } from "@/hooks/use-activities";
-import { Constants } from "@courselit/common-models";
+import { Constants, UIConstants } from "@courselit/common-models";
 import Resources from "@components/resources";
 import { TIME_RANGES } from "@ui-config/constants";
 import SalesCard from "../../overview/sales-card";
+const { permissions } = UIConstants;
 
 const { ActivityType } = Constants;
 
@@ -97,7 +98,13 @@ export default function DashboardPage() {
     };
 
     return (
-        <DashboardContent breadcrumbs={breadcrumbs}>
+        <DashboardContent
+            breadcrumbs={breadcrumbs}
+            permissions={[
+                permissions.manageAnyCourse,
+                permissions.manageCourse,
+            ]}
+        >
             {!product?.published && (
                 <div className="bg-red-400 p-2 mb-4 text-sm text-white rounded-md">
                     {PRODUCT_UNPUBLISHED_WARNING}{" "}
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/profile/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/profile/page.tsx
index 57e9d109d..1fc4bd258 100644
--- a/apps/web/app/(with-contexts)/dashboard/(sidebar)/profile/page.tsx
+++ b/apps/web/app/(with-contexts)/dashboard/(sidebar)/profile/page.tsx
@@ -94,7 +94,7 @@ export default function Page() {
                 });
             }
         };
-        if (profile.userId && address.backend) {
+        if (profile?.userId && address.backend) {
             getUser(profile.userId);
         }
     }, [profile, address.backend]);
@@ -106,17 +106,6 @@ export default function Page() {
               id: $id
               avatar: $avatar
             }) {
-                id,
-                name,
-                userId,
-                email,
-                permissions,
-                purchases {
-                    courseId,
-                    completedLessons,
-                    accessibleGroups
-                },
-                bio,
                 avatar {
                     mediaId,
                     originalFileName,
@@ -135,7 +124,7 @@ export default function Page() {
             .setPayload({
                 query: mutation,
                 variables: {
-                    id: profile.id,
+                    id: profile!.id,
                     avatar: media || null,
                 },
             })
@@ -145,7 +134,10 @@ export default function Page() {
         try {
             const response = await fetch.exec();
             if (response.user) {
-                setProfile(response.user);
+                setProfile({
+                    ...profile!,
+                    avatar: response.user.avatar,
+                });
             }
         } catch (err: any) {
             toast({
@@ -172,9 +164,10 @@ export default function Page() {
                 email,
                 permissions,
                 purchases {
-                    courseId,
-                    completedLessons,
+                    courseId
+                    completedLessons
                     accessibleGroups
+                    certificateId
                 },
                 bio,
                 avatar {
@@ -195,7 +188,7 @@ export default function Page() {
             .setPayload({
                 query: mutation,
                 variables: {
-                    id: profile.id,
+                    id: profile!.id,
                     name,
                     bio,
                 },
diff --git a/apps/web/app/(with-contexts)/helpers.ts b/apps/web/app/(with-contexts)/helpers.ts
index cf6517851..46d422204 100644
--- a/apps/web/app/(with-contexts)/helpers.ts
+++ b/apps/web/app/(with-contexts)/helpers.ts
@@ -10,20 +10,21 @@ export const getUserProfile = async (address: string) => {
             bio,
             permissions,
             purchases {
-                courseId,
-                completedLessons,
+                courseId
+                completedLessons
                 accessibleGroups
+                certificateId
             }
             avatar {
-                    mediaId,
-                    originalFileName,
-                    mimeType,
-                    size,
-                    access,
-                    file,
-                    thumbnail,
-                    caption
-                },
+                mediaId,
+                originalFileName,
+                mimeType,
+                size,
+                access,
+                file,
+                thumbnail,
+                caption
+            },
             }
         }
         `;
diff --git a/apps/web/app/(with-contexts)/layout-with-context.tsx b/apps/web/app/(with-contexts)/layout-with-context.tsx
index 8bcf23164..9feeb8a07 100644
--- a/apps/web/app/(with-contexts)/layout-with-context.tsx
+++ b/apps/web/app/(with-contexts)/layout-with-context.tsx
@@ -37,52 +37,6 @@ function LayoutContent({
     const { toast } = useToast();
 
     useEffect(() => {
-        // const getUserProfile = async () => {
-        //     const query = `
-        //     { profile: getUser {
-        //         name,
-        //         id,
-        //         email,
-        //         userId,
-        //         bio,
-        //         permissions,
-        //         purchases {
-        //             courseId,
-        //             completedLessons,
-        //             accessibleGroups
-        //         }
-        //         avatar {
-        //                 mediaId,
-        //                 originalFileName,
-        //                 mimeType,
-        //                 size,
-        //                 access,
-        //                 file,
-        //                 thumbnail,
-        //                 caption
-        //             },
-        //         }
-        //     }
-        //     `;
-        //     const fetch = new FetchBuilder()
-        //         .setUrl(`${address}/api/graph`)
-        //         .setPayload(query)
-        //         .setIsGraphQLEndpoint(true)
-        //         .build();
-        //     try {
-        //         const response = await fetch.exec();
-        //         if (response.profile) {
-        //             setProfile(response.profile);
-        //         }
-        //     } catch (err) {
-        //         toast({
-        //             title: TOAST_TITLE_ERROR,
-        //             description: err.message,
-        //             variant: "destructive",
-        //         });
-        //     }
-        // };
-
         if (address && session) {
             updateUserProfile();
         }
diff --git a/apps/web/app/api/media/[mediaId]/[type]/route.ts b/apps/web/app/api/media/[mediaId]/[type]/route.ts
index c1864014a..87050d33a 100644
--- a/apps/web/app/api/media/[mediaId]/[type]/route.ts
+++ b/apps/web/app/api/media/[mediaId]/[type]/route.ts
@@ -10,6 +10,9 @@ import { auth } from "@/auth";
 import CourseModel from "@models/Course";
 import LessonModel, { Lesson } from "@models/Lesson";
 import PageModel, { Page } from "@models/Page";
+import CertificateTemplateModel, {
+    CertificateTemplate,
+} from "@models/CertificateTemplate";
 
 const types = [
     "course",
@@ -18,6 +21,7 @@ const types = [
     "user",
     "domain",
     "community",
+    "certificate",
 ] as const;
 
 type MediaType = (typeof types)[number];
@@ -168,6 +172,41 @@ async function isActionAllowed(
             return checkPermission(user.permissions, [
                 constants.permissions.manageCommunity,
             ]);
+        case "certificate":
+            const certificateTemplate =
+                await CertificateTemplateModel.findOne<CertificateTemplate>({
+                    domain: domain._id,
+                    $or: [
+                        { "signatureImage.mediaId": mediaId },
+                        { "logo.mediaId": mediaId },
+                    ],
+                });
+            if (!certificateTemplate) {
+                return false;
+            }
+            const certificateCourse = await CourseModel.findOne<InternalCourse>(
+                {
+                    domain: domain._id,
+                    courseId: certificateTemplate.courseId,
+                },
+            );
+            if (!certificateCourse) {
+                return false;
+            }
+            if (
+                checkPermission(user.permissions, [
+                    constants.permissions.manageAnyCourse,
+                ])
+            ) {
+                return true;
+            } else {
+                return (
+                    certificateCourse.creatorId === user.userId &&
+                    checkPermission(user.permissions, [
+                        constants.permissions.manageCourse,
+                    ])
+                );
+            }
         default:
             return false;
     }
diff --git a/apps/web/app/certificate/[certId]/page.tsx b/apps/web/app/certificate/[certId]/page.tsx
new file mode 100644
index 000000000..1a22d1778
--- /dev/null
+++ b/apps/web/app/certificate/[certId]/page.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { Skeleton } from "@components/ui/skeleton";
+import DefaultCertificate from "@/templates/certificates/default";
+import { useCertificate } from "@/hooks/use-certificate";
+
+const templateMap = {
+    default: DefaultCertificate,
+};
+
+export default function CertificatePage() {
+    const params = useParams();
+    const router = useRouter();
+    const certId = params.certId;
+    const searchParams = useSearchParams();
+    const courseId = searchParams.get("courseId");
+    const { certificate, loaded } = useCertificate(
+        certId as string,
+        courseId as string,
+    );
+
+    if (loaded && !certificate) {
+        router.replace("/");
+    }
+
+    if (!certificate) {
+        return <Skeleton className="w-full h-full" />;
+    }
+
+    const Template = templateMap[certificate.templateId] || DefaultCertificate;
+
+    return <Template certificate={certificate} />;
+}
diff --git a/apps/web/components/admin/mails/editor-layout.tsx b/apps/web/components/admin/mails/editor-layout.tsx
index f90e13a33..7885d450c 100644
--- a/apps/web/components/admin/mails/editor-layout.tsx
+++ b/apps/web/components/admin/mails/editor-layout.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { CheckCircled, Sync } from "@courselit/icons";
+import { BUTTON_SAVING } from "@ui-config/strings";
 import { Check, Copy } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 
@@ -104,7 +105,7 @@ export const EmailEditorLayout = ({
                             <div className="flex items-center gap-2">
                                 <Sync className="h-4 w-4 animate-spin text-muted-foreground" />
                                 <span className="text-sm text-muted-foreground">
-                                    Saving...
+                                    {BUTTON_SAVING}
                                 </span>
                             </div>
                         )}
diff --git a/apps/web/components/admin/my-content/content-card.tsx b/apps/web/components/admin/my-content/content-card.tsx
index 009362759..89da2d2c1 100644
--- a/apps/web/components/admin/my-content/content-card.tsx
+++ b/apps/web/components/admin/my-content/content-card.tsx
@@ -7,7 +7,7 @@ import {
     ContentCardHeader,
 } from "@courselit/components-library";
 import { Constants } from "@courselit/common-models";
-import { Download } from "lucide-react";
+import { BadgeCheck, Download } from "lucide-react";
 import { BookOpen } from "lucide-react";
 import { capitalize } from "@courselit/utils";
 import { Badge } from "@components/ui/badge";
@@ -39,15 +39,25 @@ export function MyContentCard({ item }: ContentCardProps) {
             />
             <ContentCardContent>
                 <ContentCardHeader>{item.entity.title}</ContentCardHeader>
-                {entityType.toLowerCase() === Constants.CourseType.COURSE && (
-                    <Badge variant="secondary">
-                        {entity.type === Constants.CourseType.COURSE ? (
-                            <BookOpen className="h-4 w-4 mr-1" />
-                        ) : (
-                            <Download className="h-4 w-4 mr-1" />
+                {entityType.toLowerCase() === Constants.CourseType.COURSE ? (
+                    <div className="flex justify-between">
+                        <Badge variant="secondary">
+                            {entity.type === Constants.CourseType.COURSE ? (
+                                <BookOpen className="h-4 w-4 mr-1" />
+                            ) : (
+                                <Download className="h-4 w-4 mr-1" />
+                            )}
+                            {capitalize(entity.type)}
+                        </Badge>
+                        {entity.certificateId && (
+                            <p className="flex items-center text-sm text-muted-foreground">
+                                <BadgeCheck className="h-4 w-4 mr-1" />
+                                Certificate
+                            </p>
                         )}
-                        {capitalize(entity.type)}
-                    </Badge>
+                    </div>
+                ) : (
+                    ""
                 )}
                 {entityType.toLowerCase() === Constants.CourseType.COURSE &&
                 entity.type === Constants.CourseType.COURSE &&
@@ -59,7 +69,9 @@ export function MyContentCard({ item }: ContentCardProps) {
                             <span>{`${Math.round(progress)}%`}</span>
                         </p>
                     </div>
-                ) : null}
+                ) : (
+                    ""
+                )}
             </ContentCardContent>
         </ContentCard>
     );
diff --git a/apps/web/components/admin/my-content/content.ts b/apps/web/components/admin/my-content/content.ts
index f3d3062f0..2a710e9c2 100644
--- a/apps/web/components/admin/my-content/content.ts
+++ b/apps/web/components/admin/my-content/content.ts
@@ -16,6 +16,7 @@ export interface Entity {
     type:
         | typeof Constants.CourseType.COURSE
         | typeof Constants.CourseType.DOWNLOAD;
+    certificateId?: string;
 }
 
 export interface ContentItem {
diff --git a/apps/web/components/admin/payments/payment-plan-form.tsx b/apps/web/components/admin/payments/payment-plan-form.tsx
index d0fe3825a..3eb753eee 100644
--- a/apps/web/components/admin/payments/payment-plan-form.tsx
+++ b/apps/web/components/admin/payments/payment-plan-form.tsx
@@ -35,6 +35,7 @@ import {
 import { usePaymentPlanOperations } from "@/hooks/use-payment-plan-operations";
 import { useRouter } from "next/navigation";
 import { getSymbolFromCurrency, useToast } from "@courselit/components-library";
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
 import {
     BUTTON_SAVE,
     BUTTON_SAVING,
@@ -46,6 +47,8 @@ import {
     PAYMENT_PLAN_SUBSCRIPTION_LABEL,
     PAYMENT_PLAN_EMI_LABEL,
     SEO_FORM_DESC_LABEL,
+    TOAST_TITLE_SUCCESS,
+    TOAST_DESCRIPTION_CHANGES_SAVED,
 } from "@/ui-config/strings";
 import { SiteInfoContext } from "@components/contexts";
 import { useProducts } from "@/hooks/use-products";
@@ -151,6 +154,7 @@ export function PaymentPlanForm({
     const router = useRouter();
     const { toast } = useToast();
     const siteinfo = useContext(SiteInfoContext);
+    const fetch = useGraphQLFetch();
     const currencySymbol = getSymbolFromCurrency(
         siteinfo.currencyISOCode || "USD",
     );
@@ -173,18 +177,134 @@ export function PaymentPlanForm({
         },
     });
 
+    const onPlanUpdated = async (plan: any) => {
+        const query = `
+            mutation UpdatePlan(
+                $planId: String!
+                $name: String
+                $type: PaymentPlanType
+                $oneTimeAmount: Int
+                $emiAmount: Int
+                $emiTotalInstallments: Int
+                $subscriptionMonthlyAmount: Int
+                $subscriptionYearlyAmount: Int
+                $description: String
+                $includedProducts: [String]
+            ) {
+                plan: updatePlan(
+                    planId: $planId
+                    name: $name
+                    type: $type
+                    oneTimeAmount: $oneTimeAmount
+                    emiAmount: $emiAmount
+                    emiTotalInstallments: $emiTotalInstallments
+                    subscriptionMonthlyAmount: $subscriptionMonthlyAmount
+                    subscriptionYearlyAmount: $subscriptionYearlyAmount
+                    description: $description
+                    includedProducts: $includedProducts
+                ) {
+                    planId
+                    name
+                    type
+                    oneTimeAmount
+                    emiAmount
+                    emiTotalInstallments
+                    subscriptionMonthlyAmount
+                    subscriptionYearlyAmount
+                    description
+                    includedProducts
+                }
+            }
+        `;
+
+        const fetchRequest = fetch
+            .setPayload({
+                query,
+                variables: {
+                    planId: plan.planId,
+                    ...plan,
+                },
+            })
+            .build();
+        try {
+            const response = await fetchRequest.exec();
+            return response.plan;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    const onPlanSubmitted = async (plan: any) => {
+        const query = `
+            mutation CreatePlan(
+                $name: String!
+                $type: PaymentPlanType!
+                $entityId: String!
+                $entityType: MembershipEntityType!
+                $oneTimeAmount: Int
+                $emiAmount: Int
+                $emiTotalInstallments: Int
+                $subscriptionMonthlyAmount: Int
+                $subscriptionYearlyAmount: Int
+                $description: String
+                $includedProducts: [String]
+            ) {
+                plan: createPlan(
+                    name: $name
+                    type: $type
+                    entityId: $entityId
+                    entityType: $entityType
+                    oneTimeAmount: $oneTimeAmount
+                    emiAmount: $emiAmount
+                    emiTotalInstallments: $emiTotalInstallments
+                    subscriptionMonthlyAmount: $subscriptionMonthlyAmount
+                    subscriptionYearlyAmount: $subscriptionYearlyAmount
+                    description: $description
+                    includedProducts: $includedProducts
+                ) {
+                    planId
+                    name
+                    type
+                    oneTimeAmount
+                    emiAmount
+                    emiTotalInstallments
+                    subscriptionMonthlyAmount
+                    subscriptionYearlyAmount
+                    description
+                    includedProducts
+                }
+            }
+        `;
+
+        const fetchRequest = fetch
+            .setPayload({
+                query,
+                variables: {
+                    ...plan,
+                    entityId: entityId,
+                    entityType: entityType.toUpperCase(),
+                },
+            })
+            .build();
+        try {
+            const response = await fetchRequest.exec();
+            return response.plan;
+        } catch (error) {
+            throw error;
+        }
+    };
+
     async function handleSubmit(values: PaymentPlanFormData) {
         setIsFormSubmitting(true);
         try {
             if (initialData?.planId) {
-                await paymentPlanOperations.onPlanUpdated(values);
+                await onPlanUpdated(values);
                 toast({
-                    title: "Payment plan updated",
-                    description: "Payment plan updated successfully",
+                    title: TOAST_TITLE_SUCCESS,
+                    description: TOAST_DESCRIPTION_CHANGES_SAVED,
                 });
             } else {
-                const { planId } =
-                    await paymentPlanOperations.onPlanSubmitted(values);
+                const { planId } = await onPlanSubmitted(values);
                 const type =
                     entityType.toLowerCase() ===
                     Constants.MembershipEntityType.COMMUNITY
diff --git a/apps/web/components/admin/payments/payment-plan-list.tsx b/apps/web/components/admin/payments/payment-plan-list.tsx
index 13d747cca..d4886a5d3 100644
--- a/apps/web/components/admin/payments/payment-plan-list.tsx
+++ b/apps/web/components/admin/payments/payment-plan-list.tsx
@@ -78,6 +78,7 @@ export default function PaymentPlanList({
     defaultPaymentPlanId,
     entityId,
     entityType,
+    disabled = false,
 }: {
     paymentPlans: PaymentPlan[];
     onPlanArchived: (planId: PaymentPlan["planId"]) => void;
@@ -85,6 +86,7 @@ export default function PaymentPlanList({
     defaultPaymentPlanId?: string;
     entityId: string;
     entityType: "community" | "product";
+    disabled?: boolean;
 }) {
     const [planToArchive, setPlanToArchive] = useState<PaymentPlan | null>(
         null,
@@ -131,8 +133,9 @@ export default function PaymentPlanList({
                                                     );
                                                 }}
                                                 disabled={
+                                                    disabled ||
                                                     defaultPaymentPlanId ===
-                                                    plan.planId
+                                                        plan.planId
                                                 }
                                             >
                                                 <Star
@@ -147,7 +150,7 @@ export default function PaymentPlanList({
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
-                                            <p>Make default</p>
+                                            <p>Make recommended</p>
                                         </TooltipContent>
                                     </Tooltip>
                                 </TooltipProvider>
@@ -172,6 +175,7 @@ export default function PaymentPlanList({
                                                                 true,
                                                             );
                                                         }}
+                                                        disabled={disabled}
                                                     >
                                                         <Archive className="h-3 w-3" />
                                                     </Button>
@@ -212,6 +216,7 @@ export default function PaymentPlanList({
                                                     planToArchive &&
                                                     handleArchive(planToArchive)
                                                 }
+                                                disabled={disabled}
                                             >
                                                 Archive
                                             </Button>
diff --git a/apps/web/components/admin/products/course-hook.ts.notused b/apps/web/components/admin/products/course-hook.ts.notused
deleted file mode 100644
index 3ab58857f..000000000
--- a/apps/web/components/admin/products/course-hook.ts.notused
+++ /dev/null
@@ -1,108 +0,0 @@
-import { InternalCourse } from "@courselit/common-logic";
-import { Lesson } from "@courselit/common-models";
-import { useToast } from "@courselit/components-library";
-import { FetchBuilder } from "@courselit/utils";
-import { TOAST_TITLE_ERROR } from "@ui-config/strings";
-import { useCallback, useContext, useEffect, useState } from "react";
-import { AddressContext } from "@components/contexts";
-
-export type CourseWithAdminProps = Partial<
-    InternalCourse & {
-        lessons: Pick<Lesson, "title" | "groupId" | "lessonId" | "type"> &
-            { id: string }[];
-    }
->;
-
-export default function useCourse(
-    id: string,
-): CourseWithAdminProps | undefined | null {
-    const [course, setCourse] = useState<
-        CourseWithAdminProps | undefined | null
-    >();
-    const address = useContext(AddressContext)
-    const { toast } = useToast();
-
-    const loadCourse = useCallback(
-        async (courseId: string) => {
-            const query = `
-            query {
-                course: getCourse(id: "${courseId}") {
-                    title,
-                    description,
-                    type,
-                    slug,
-                    lessons {
-                        id,
-                        title,
-                        groupId,
-                        lessonId,
-                        type
-                    },
-                    groups {
-                        id,
-                        name,
-                        rank,
-                        lessonsOrder,
-                        drip {
-                            type,
-                            status,
-                            delayInMillis,
-                            dateInUTC,
-                            email {
-                                content,
-                                subject
-                            }
-                        }
-                    },
-                    courseId,
-                    cost,
-                    costType,
-                    featuredImage {
-                        mediaId,
-                        originalFileName,
-                        mimeType,
-                        size,
-                        access,
-                        file,
-                        thumbnail,
-                        caption
-                    },
-                    published,
-                    privacy,
-                    pageId
-                }
-            }
-        `;
-            const fetch = new FetchBuilder()
-                .setUrl(`${address.backend}/api/graph`)
-                .setPayload(query)
-                .setIsGraphQLEndpoint(true)
-                .build();
-            try {
-                const response = await fetch.exec();
-                if (response.course) {
-                    setCourse(response.course);
-                } else {
-                    setCourse(null);
-                }
-            } catch (err: any) {
-                setCourse(null);
-                toast({
-                    title: TOAST_TITLE_ERROR,
-                    description: err.message,
-                    variant: "destructive",
-                });
-            } finally {
-            }
-        },
-        [address?.backend],
-    );
-
-    useEffect(() => {
-        if (id && address) {
-            loadCourse(id);
-        }
-    }, [id, address, loadCourse]);
-
-    return course;
-}
\ No newline at end of file
diff --git a/apps/web/components/admin/products/new-customer.tsx b/apps/web/components/admin/products/new-customer.tsx
index 9060724c3..f658ca7d5 100644
--- a/apps/web/components/admin/products/new-customer.tsx
+++ b/apps/web/components/admin/products/new-customer.tsx
@@ -29,7 +29,6 @@ export default function NewCustomer({ courseId }: NewCustomerProps) {
     const [tags, setTags] = useState<string[]>([]);
     const [systemTags, setSystemTags] = useState<string[]>([]);
     const address = useContext(AddressContext);
-    // const course = useCourse(courseId);
     const { toast } = useToast();
 
     const getTags = useCallback(async () => {
diff --git a/apps/web/components/community/banner.tsx b/apps/web/components/community/banner.tsx
index 13ef93730..013127e2d 100644
--- a/apps/web/components/community/banner.tsx
+++ b/apps/web/components/community/banner.tsx
@@ -9,7 +9,7 @@ import {
     useToast,
 } from "@courselit/components-library";
 import { isTextEditorNonEmpty } from "@ui-lib/utils";
-import { TOAST_TITLE_SUCCESS } from "@ui-config/strings";
+import { BUTTON_SAVING, TOAST_TITLE_SUCCESS } from "@ui-config/strings";
 
 interface BannerComponentProps {
     canEdit: boolean;
@@ -121,7 +121,7 @@ export default function Banner({
                                 {isSaving ? (
                                     <>
                                         <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-                                        Saving...
+                                        {BUTTON_SAVING}
                                     </>
                                 ) : (
                                     <>
diff --git a/apps/web/components/public/payments/login-form.tsx b/apps/web/components/public/payments/login-form.tsx
index bdc21067d..2ba211c72 100644
--- a/apps/web/components/public/payments/login-form.tsx
+++ b/apps/web/components/public/payments/login-form.tsx
@@ -21,7 +21,7 @@ import {
 import { useToast } from "@courselit/components-library";
 import { TOAST_TITLE_ERROR } from "@ui-config/strings";
 import { signIn } from "next-auth/react";
-import { FetchBuilder } from "@courselit/utils";
+import { getUserProfile } from "@/app/(with-contexts)/helpers";
 
 const loginFormSchema = z.object({
     email: z.string().email("Invalid email address"),
@@ -115,54 +115,16 @@ export function LoginForm({ onLoginComplete }: LoginFormProps) {
                     description: `Can't sign you in at this time`,
                 });
             } else {
-                await getProfile();
+                const profile = await getUserProfile(address.backend);
+                if (profile) {
+                    setProfile(profile);
+                }
             }
         } finally {
             setLoading(false);
         }
     };
 
-    // TODO: refactor this to use the getUserProfile function from helpers.ts
-    const getProfile = async () => {
-        const query = `
-            { profile: getUser {
-                name,
-                id,
-                email,
-                userId,
-                bio,
-                permissions,
-                purchases {
-                    courseId,
-                    completedLessons,
-                    accessibleGroups
-                }
-                avatar {
-                        mediaId,
-                        originalFileName,
-                        mimeType,
-                        size,
-                        access,
-                        file,
-                        thumbnail,
-                        caption
-                    },
-                }
-            }
-            `;
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload(query)
-            .setIsGraphQLEndpoint(true)
-            .build();
-        try {
-            const response = await fetch.exec();
-            if (response.profile) {
-                setProfile(response.profile);
-            }
-        } catch (e) {}
-    };
-
     const handleNameSubmit = () => {
         const { email, name } = form.getValues();
         onLoginComplete(email, name || "");
diff --git a/apps/web/config/strings.ts b/apps/web/config/strings.ts
index 509b6dd40..786c8499e 100644
--- a/apps/web/config/strings.ts
+++ b/apps/web/config/strings.ts
@@ -134,6 +134,7 @@ export const responses = {
     cannot_delete_last_category: "Cannot delete the last category",
     lead_magnet_invalid_settings:
         "Product must have exactly one free payment plan to enable lead magnet",
+    certificate_invalid_settings: "Certificate can only be enabled for courses",
 
     // api responses
     digital_download_no_files:
@@ -145,6 +146,8 @@ export const responses = {
     download_course_cannot_have_groups: "Digital download cannot have sections",
     download_course_last_group_cannot_be_removed:
         "Last section cannot be removed from a digital download",
+    certificate_demo_course_id_required:
+        "CourseID is required for demo certificate",
 };
 
 export const internal = {
diff --git a/apps/web/graphql/courses/helpers.ts b/apps/web/graphql/courses/helpers.ts
index 56a981fc4..107f79a0d 100644
--- a/apps/web/graphql/courses/helpers.ts
+++ b/apps/web/graphql/courses/helpers.ts
@@ -92,6 +92,13 @@ export const validateCourse = async (
         }
     }
 
+    if (
+        courseData.certificate &&
+        courseData.type !== Constants.CourseType.COURSE
+    ) {
+        throw new Error(responses.certificate_invalid_settings);
+    }
+
     return courseData;
 };
 
diff --git a/apps/web/graphql/courses/logic.ts b/apps/web/graphql/courses/logic.ts
index 1fac4c502..c731d1f26 100644
--- a/apps/web/graphql/courses/logic.ts
+++ b/apps/web/graphql/courses/logic.ts
@@ -45,6 +45,7 @@ import { ActivityType } from "@courselit/common-models/dist/constants";
 import { verifyMandatoryTags } from "../mails/helpers";
 import { Email } from "@courselit/email-editor";
 import PaymentPlanModel from "@models/PaymentPlan";
+import CertificateTemplateModel from "@models/CertificateTemplate";
 
 const { open, itemsPerPage, blogPostSnippetLength, permissions } = constants;
 
@@ -129,10 +130,10 @@ export const getCourse = async (
     ctx: GQLContext,
     asGuest: boolean = false,
 ) => {
-    const course: InternalCourse | null = await CourseModel.findOne({
+    const course: InternalCourse | null = (await CourseModel.findOne({
         courseId: id,
         domain: ctx.subdomain._id,
-    }).lean();
+    }).lean()) as unknown as InternalCourse | null;
 
     if (!course) {
         throw new Error(responses.item_not_found);
@@ -150,20 +151,6 @@ export const getCourse = async (
     }
 
     if (course.published) {
-        // if (
-        //     [constants.course, constants.download].includes(
-        //         course.type as
-        //             | typeof constants.course
-        //             | typeof constants.download,
-        //     )
-        // ) {
-        //     const { nextLesson } = await getPrevNextCursor(
-        //         course.courseId,
-        //         ctx.subdomain._id,
-        //     );
-        //     (course as any).firstLesson = nextLesson;
-        // }
-        // course.groups = accessibleGroups;
         return await formatCourse(course.courseId, ctx);
     } else {
         return null;
@@ -918,3 +905,67 @@ export const getStudents = async ({
 
     return result;
 };
+
+export const getCourseCertificateTemplate = async (
+    courseId: string,
+    ctx: GQLContext,
+) => {
+    const course = await getCourseOrThrow(undefined, ctx, courseId);
+
+    const certificateTemplate = await CertificateTemplateModel.findOne({
+        domain: ctx.subdomain._id,
+        courseId: course.courseId,
+    });
+
+    return certificateTemplate;
+};
+
+export const updateCourseCertificateTemplate = async ({
+    courseId,
+    ctx,
+    title,
+    subtitle,
+    description,
+    signatureImage,
+    signatureName,
+    signatureDesignation,
+    logo,
+}: {
+    courseId: string;
+    ctx: GQLContext;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    signatureImage?: string;
+    signatureName?: string;
+    signatureDesignation?: string;
+    logo?: string;
+}) => {
+    const course = await getCourseOrThrow(undefined, ctx, courseId);
+
+    const updatedTemplate = await CertificateTemplateModel.findOneAndUpdate(
+        {
+            domain: ctx.subdomain._id,
+            courseId: course.courseId,
+        },
+        {
+            title,
+            subtitle,
+            description,
+            signatureImage,
+            signatureName,
+            signatureDesignation,
+            logo,
+        },
+        { upsert: true, new: true },
+    );
+    return {
+        title: updatedTemplate.title,
+        subtitle: updatedTemplate.subtitle,
+        description: updatedTemplate.description,
+        signatureImage: updatedTemplate.signatureImage,
+        signatureName: updatedTemplate.signatureName,
+        signatureDesignation: updatedTemplate.signatureDesignation,
+        logo: updatedTemplate.logo,
+    };
+};
diff --git a/apps/web/graphql/courses/mutation.ts b/apps/web/graphql/courses/mutation.ts
index 3a54f9ebd..540f9c5c0 100644
--- a/apps/web/graphql/courses/mutation.ts
+++ b/apps/web/graphql/courses/mutation.ts
@@ -14,8 +14,10 @@ import {
     removeGroup,
     addGroup,
     updateGroup,
+    updateCourseCertificateTemplate,
 } from "./logic";
 import GQLContext from "../../models/GQLContext";
+import mediaTypes from "../media/types";
 
 export default {
     createCourse: {
@@ -121,4 +123,67 @@ export default {
                 ctx: context,
             }),
     },
+    updateCourseCertificateTemplate: {
+        type: types.certificateTemplateType,
+        args: {
+            courseId: {
+                type: new GraphQLNonNull(GraphQLString),
+            },
+            title: {
+                type: GraphQLString,
+            },
+            subtitle: {
+                type: GraphQLString,
+            },
+            description: {
+                type: GraphQLString,
+            },
+            signatureImage: {
+                type: mediaTypes.mediaInputType,
+            },
+            signatureName: {
+                type: GraphQLString,
+            },
+            signatureDesignation: {
+                type: GraphQLString,
+            },
+            logo: {
+                type: mediaTypes.mediaInputType,
+            },
+        },
+        resolve: (
+            _: any,
+            {
+                courseId,
+                title,
+                subtitle,
+                description,
+                signatureImage,
+                signatureName,
+                signatureDesignation,
+                logo,
+            }: {
+                courseId: string;
+                title: string;
+                subtitle: string;
+                description: string;
+                signatureImage: string;
+                signatureName: string;
+                signatureDesignation: string;
+                logo: string;
+            },
+            context: GQLContext,
+        ) =>
+            updateCourseCertificateTemplate({
+                courseId,
+                ctx: context,
+                title,
+                subtitle,
+                description,
+                signatureImage,
+                signatureName,
+                signatureDesignation,
+                logo,
+            }),
+    },
 };
diff --git a/apps/web/graphql/courses/query.ts b/apps/web/graphql/courses/query.ts
index c41a2c69b..1fc2438f5 100644
--- a/apps/web/graphql/courses/query.ts
+++ b/apps/web/graphql/courses/query.ts
@@ -10,12 +10,11 @@ import types from "./types";
 import {
     getCourse,
     getCoursesAsAdmin,
-    // getCourses,
-    // getEnrolledCourses,
     getCourseOrThrow,
     getMembers,
     getProducts,
     getProductsCount,
+    getCourseCertificateTemplate,
 } from "./logic";
 import GQLContext from "../../models/GQLContext";
 import Filter from "./models/filter";
@@ -207,4 +206,17 @@ export default {
                 status,
             }),
     },
+    getCourseCertificateTemplate: {
+        type: types.certificateTemplateType,
+        args: {
+            courseId: {
+                type: new GraphQLNonNull(GraphQLString),
+            },
+        },
+        resolve: (
+            _: any,
+            { courseId }: { courseId: string },
+            context: GQLContext,
+        ) => getCourseCertificateTemplate(courseId, context),
+    },
 };
diff --git a/apps/web/graphql/courses/types/index.ts b/apps/web/graphql/courses/types/index.ts
index 69c7550cc..f1e87fe0f 100644
--- a/apps/web/graphql/courses/types/index.ts
+++ b/apps/web/graphql/courses/types/index.ts
@@ -166,6 +166,7 @@ const courseType = new GraphQLObjectType({
         defaultPaymentPlan: { type: GraphQLString },
         sales: { type: GraphQLFloat },
         customers: { type: GraphQLInt },
+        certificate: { type: GraphQLBoolean },
     },
 });
 
@@ -190,6 +191,7 @@ const courseUpdateInput = new GraphQLInputObjectType({
         description: { type: GraphQLString },
         featuredImage: { type: mediaTypes.mediaInputType },
         leadMagnet: { type: GraphQLBoolean },
+        certificate: { type: GraphQLBoolean },
     },
 });
 
@@ -266,6 +268,19 @@ const enrolledCourses = new GraphQLObjectType({
     },
 });
 
+const certificateTemplateType = new GraphQLObjectType({
+    name: "CertificateTemplate",
+    fields: {
+        title: { type: GraphQLString },
+        subtitle: { type: GraphQLString },
+        description: { type: GraphQLString },
+        signatureImage: { type: mediaTypes.mediaType },
+        signatureName: { type: GraphQLString },
+        signatureDesignation: { type: GraphQLString },
+        logo: { type: mediaTypes.mediaType },
+    },
+});
+
 export default {
     courseType,
     courseStatusType,
@@ -278,4 +293,5 @@ export default {
     reports,
     dripType,
     dripInputType,
+    certificateTemplateType,
 };
diff --git a/apps/web/graphql/lessons/logic.ts b/apps/web/graphql/lessons/logic.ts
index f5d4faf6b..4c47d8275 100644
--- a/apps/web/graphql/lessons/logic.ts
+++ b/apps/web/graphql/lessons/logic.ts
@@ -24,6 +24,8 @@ import LessonEvaluation from "../../models/LessonEvaluation";
 import { checkPermission } from "@courselit/utils";
 import { recordActivity } from "../../lib/record-activity";
 import { InternalCourse } from "@courselit/common-logic";
+import CertificateModel from "../../models/Certificate";
+import { error } from "@/services/logger";
 
 const { permissions, quiz } = constants;
 
@@ -151,10 +153,10 @@ export const createLesson = async (
         });
 
         course.lessons.push(lesson.lessonId);
-        const group = course.groups.find(
+        const group = course.groups?.find(
             (group) => group._id === lessonData.groupId,
         );
-        group.lessonsOrder.push(lesson.lessonId);
+        group?.lessonsOrder.push(lesson.lessonId);
         await (course as any).save();
 
         return lesson;
@@ -290,9 +292,9 @@ export const markLessonCompleted = async (
 
     if (await isPartOfDripGroup(lesson, ctx.subdomain._id)) {
         const groupIsNotInAccessibleGroups =
-            ctx.user.purchases
-                .find((x) => x.courseId === lesson.courseId)
-                .accessibleGroups.indexOf(lesson.groupId) === -1;
+            ctx.user.purchases[enrolledItemIndex].accessibleGroups.indexOf(
+                lesson.groupId,
+            ) === -1;
         if (groupIsNotInAccessibleGroups) {
             throw new Error(responses.drip_not_released);
         }
@@ -326,12 +328,15 @@ export const markLessonCompleted = async (
         },
     });
 
-    await recordCourseCompleted(lesson.courseId, ctx);
+    await checkAndRecordCourseCompletion(lesson.courseId, ctx);
 
     return true;
 };
 
-const recordCourseCompleted = async (courseId: string, ctx: GQLContext) => {
+const checkAndRecordCourseCompletion = async (
+    courseId: string,
+    ctx: GQLContext,
+) => {
     const course = await CourseModel.findOne({ courseId });
     if (!course) {
         throw new Error(responses.item_not_found);
@@ -339,7 +344,7 @@ const recordCourseCompleted = async (courseId: string, ctx: GQLContext) => {
 
     const isCourseCompleted = course.lessons.every((lessonId) => {
         const progress = ctx.user.purchases.find(
-            (progress: Progress) => progress.courseId === courseId,
+            (progress: Progress) => progress.courseId === course.courseId,
         );
         if (!progress) {
             return false;
@@ -348,7 +353,7 @@ const recordCourseCompleted = async (courseId: string, ctx: GQLContext) => {
     });
 
     if (!isCourseCompleted) {
-        return;
+        return false;
     }
 
     await recordActivity({
@@ -357,6 +362,58 @@ const recordCourseCompleted = async (courseId: string, ctx: GQLContext) => {
         type: Constants.ActivityType.COURSE_COMPLETED,
         entityId: courseId,
     });
+
+    if (course.certificate) {
+        await issueCertificate(course, ctx);
+    }
+
+    return true;
+};
+
+const issueCertificate = async (
+    course: InternalCourse,
+    ctx: GQLContext,
+): Promise<void> => {
+    const existingCertificate = await CertificateModel.findOne({
+        domain: ctx.subdomain._id,
+        courseId: course.courseId,
+        userId: ctx.user.userId,
+    });
+    if (existingCertificate) {
+        return;
+    }
+
+    const certificate = await CertificateModel.create({
+        domain: ctx.subdomain._id,
+        courseId: course.courseId,
+        userId: ctx.user.userId,
+    });
+
+    const enrolledItemIndex = ctx.user.purchases.findIndex(
+        (progress: Progress) => progress.courseId === course.courseId,
+    );
+
+    if (enrolledItemIndex === -1) {
+        error(
+            `Error in issuing certificate due to course not found in user's purchases`,
+            {
+                courseId: course.courseId,
+                userId: ctx.user.userId,
+            },
+        );
+        return;
+    }
+
+    ctx.user.purchases[enrolledItemIndex].certificateId =
+        certificate.certificateId;
+    await (ctx.user as any).save();
+
+    await recordActivity({
+        domain: ctx.subdomain._id,
+        userId: ctx.user.userId,
+        type: Constants.ActivityType.CERTIFICATE_ISSUED,
+        entityId: course.courseId,
+    });
 };
 
 export const evaluateLesson = async (
diff --git a/apps/web/graphql/users/__tests__/logic.test.ts b/apps/web/graphql/users/__tests__/logic.test.ts
new file mode 100644
index 000000000..dfe58758a
--- /dev/null
+++ b/apps/web/graphql/users/__tests__/logic.test.ts
@@ -0,0 +1,666 @@
+/**
+ * @jest-environment node
+ */
+
+import { getCertificate } from "../logic";
+import CertificateModel from "@models/Certificate";
+import UserModel from "@models/User";
+import CourseModel from "@models/Course";
+import CertificateTemplateModel from "@models/CertificateTemplate";
+import { responses } from "@/config/strings";
+import Domain from "@models/Domain";
+
+// Using real MongoDB with @shelf/jest-mongodb - no mocking needed
+
+describe("Certificate generation", () => {
+    let mockCtx: any;
+    let mockDomain: any;
+    let testDomain: any;
+
+    beforeAll(async () => {
+        // Create a test domain
+        testDomain = await Domain.create({
+            name: "Test Domain",
+            email: "test@example.com",
+            settings: {
+                logo: {
+                    mediaId: "logo-123",
+                    file: "logo.png",
+                    originalFileName: "logo.png",
+                    mimeType: "image/png",
+                    size: 1024,
+                    access: "public",
+                },
+            },
+        });
+    });
+
+    beforeEach(() => {
+        mockDomain = testDomain;
+
+        mockCtx = {
+            subdomain: mockDomain as any,
+            user: {
+                userId: "test-user",
+                name: "Test User",
+                email: "test@example.com",
+                permissions: [],
+            } as any,
+            address: "https://test.com",
+        } as any;
+    });
+
+    afterEach(async () => {
+        // Clean up collections after each test
+        await CertificateModel.deleteMany({});
+        await UserModel.deleteMany({});
+        await CourseModel.deleteMany({});
+        await CertificateTemplateModel.deleteMany({});
+    });
+
+    it("should throw error when certificateId is 'demo' but courseId is not provided", async () => {
+        await expect(getCertificate("demo", mockCtx)).rejects.toThrow(
+            responses.certificate_demo_course_id_required,
+        );
+    });
+
+    it("should generate demo certificate when courseId is provided", async () => {
+        // Create a test course
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course",
+        });
+
+        const result = await getCertificate("demo", mockCtx, "course-123");
+
+        expect(result).toEqual({
+            certificateId: "demo",
+            title: "Certificate of Completion",
+            subtitle: "This certificate is awarded to",
+            description: "for completing the course.",
+            signatureImage: null,
+            signatureName: undefined,
+            signatureDesignation: null,
+            logo: mockDomain.settings.logo,
+            productTitle: "Test Course",
+            userName: "John Doe",
+            createdAt: expect.any(Date),
+            userImage: null,
+            productPageId: "page-123",
+        });
+    });
+
+    it("should generate certificate with complete data", async () => {
+        // Create test data
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: {
+                mediaId: "avatar-123",
+                file: "avatar.jpg",
+                originalFileName: "avatar.jpg",
+                mimeType: "image/jpeg",
+                size: 2048,
+                access: "public",
+            },
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-123",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Advanced Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "advanced-course",
+        });
+
+        const testTemplate = await CertificateTemplateModel.create({
+            templateId: "template-123",
+            title: "Custom Certificate Title",
+            subtitle: "Custom subtitle",
+            description: "Custom description",
+            signatureImage: {
+                mediaId: "signature-123",
+                file: "signature.png",
+                originalFileName: "signature.png",
+                mimeType: "image/png",
+                size: 1024,
+                access: "public",
+            },
+            signatureName: "Jane Smith",
+            signatureDesignation: "Course Instructor",
+            logo: {
+                mediaId: "template-logo-123",
+                file: "template-logo.png",
+                originalFileName: "template-logo.png",
+                mimeType: "image/png",
+                size: 1024,
+                access: "public",
+            },
+            courseId: "course-123",
+            domain: testDomain._id,
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.certificateId).toBe("cert-123");
+        expect(result.title).toBe("Custom Certificate Title");
+        expect(result.subtitle).toBe("Custom subtitle");
+        expect(result.description).toBe("Custom description");
+        expect(result.signatureImage).toBeDefined();
+        expect(result.signatureImage.file).toBe("signature.png");
+        expect(result.signatureName).toBe("Jane Smith");
+        expect(result.signatureDesignation).toBe("Course Instructor");
+        expect(result.logo).toBeDefined();
+        expect(result.logo!.file).toBe("template-logo.png");
+        expect(result.productTitle).toBe("Advanced Course");
+        expect(result.userName).toBe("John Doe");
+        expect(result.createdAt).toEqual(new Date("2024-01-01"));
+        expect(result.userImage).toBeDefined();
+        expect(result.userImage!.file).toBe("avatar.jpg");
+        expect(result.productPageId).toBe("page-123");
+    });
+
+    it("should throw error when certificate is not found", async () => {
+        await expect(
+            getCertificate("nonexistent-cert", mockCtx),
+        ).rejects.toThrow(responses.item_not_found);
+    });
+
+    it("should throw error when course is not found", async () => {
+        // Create a certificate but no corresponding course
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "nonexistent-course",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        await expect(getCertificate("cert-123", mockCtx)).rejects.toThrow(
+            responses.item_not_found,
+        );
+    });
+
+    it("should use fallback values when template is missing", async () => {
+        // Create test data without template
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-2",
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result).toEqual({
+            certificateId: "cert-123",
+            title: "Certificate of Completion",
+            subtitle: "This certificate is awarded to",
+            description: "for completing the course.",
+            signatureImage: null,
+            signatureName: "Jane Smith",
+            signatureDesignation: null,
+            logo: mockDomain.settings.logo,
+            productTitle: "Test Course",
+            userName: "John Doe",
+            createdAt: new Date("2024-01-01"),
+            userImage: null,
+            productPageId: "page-123",
+        });
+    });
+
+    it("should use fallback values when template has partial data", async () => {
+        // Create test data with partial template
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-2",
+        });
+
+        const testTemplate = await CertificateTemplateModel.create({
+            templateId: "template-partial-123",
+            title: "Custom Title",
+            subtitle: "Custom subtitle",
+            description: "Custom description",
+            // Missing signatureImage, signatureDesignation, logo
+            signatureName: "Custom Signature",
+            courseId: "course-123",
+            domain: testDomain._id,
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.certificateId).toBe("cert-123");
+        expect(result.title).toBe("Custom Title");
+        expect(result.subtitle).toBe("Custom subtitle");
+        expect(result.description).toBe("Custom description");
+        expect(result.signatureImage).toBe(null);
+        expect(result.signatureName).toBe("Custom Signature");
+        expect(result.signatureDesignation).toBe(null);
+        expect(result.logo).toBeDefined();
+        if (result.logo === null) {
+            throw new Error("Expected logo to be defined");
+        }
+        expect(result.logo.file).toBe("logo.png");
+        expect(result.productTitle).toBe("Test Course");
+        expect(result.userName).toBe("John Doe");
+        expect(result.createdAt).toEqual(new Date("2024-01-01"));
+        expect(result.userImage).toBe(null);
+        expect(result.productPageId).toBe("page-123");
+    });
+
+    it("should use user email as fallback when user name is missing", async () => {
+        // Create test data with user having no name
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: null,
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-2",
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.userName).toBe("john@example.com");
+    });
+
+    it("should use creator name as fallback when template signatureName is missing", async () => {
+        // Create test data with template missing signatureName
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-2",
+        });
+
+        const testTemplate = await CertificateTemplateModel.create({
+            templateId: "template-no-signature-123",
+            title: "Custom Title",
+            subtitle: "Custom subtitle",
+            description: "Custom description",
+            signatureName: "Template Signature", // Valid signatureName
+            courseId: "course-123",
+            domain: testDomain._id,
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.signatureName).toBe("Template Signature");
+    });
+
+    it("should use domain logo as fallback when template logo is missing", async () => {
+        // Create test data with template missing logo
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-2",
+        });
+
+        const testTemplate = await CertificateTemplateModel.create({
+            templateId: "template-no-logo-123",
+            title: "Custom Title",
+            subtitle: "Custom subtitle",
+            description: "Custom description",
+            signatureName: "Custom Signature",
+            // Missing logo
+            courseId: "course-123",
+            domain: testDomain._id,
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.logo).toBe(mockDomain.settings.logo);
+    });
+
+    it("should use null as fallback when domain logo is missing", async () => {
+        // Create a domain without logo settings
+        const testDomainWithoutLogo = await Domain.create({
+            name: "Test Domain Without Logo",
+            email: "test@example.com",
+            settings: {},
+        });
+
+        const mockCtxWithoutLogo = {
+            subdomain: testDomainWithoutLogo as any,
+            user: {
+                userId: "test-user",
+                name: "Test User",
+                email: "test@example.com",
+                permissions: [],
+            } as any,
+            address: "https://test.com",
+        } as any;
+
+        // Create test data
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomainWithoutLogo._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomainWithoutLogo._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: "page-123",
+            domain: testDomainWithoutLogo._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-no-logo",
+        });
+
+        const testTemplate = await CertificateTemplateModel.create({
+            templateId: "template-no-logo-domain-123",
+            title: "Custom Title",
+            subtitle: "Custom subtitle",
+            description: "Custom description",
+            signatureName: "Custom Signature",
+            // Missing logo
+            courseId: "course-123",
+            domain: testDomainWithoutLogo._id,
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomainWithoutLogo._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtxWithoutLogo);
+
+        expect(result.logo).toBe(null);
+    });
+
+    it("should handle missing creator gracefully", async () => {
+        // Create test data with missing creator
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "nonexistent-creator",
+            pageId: "page-123",
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-edge-1",
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.signatureName).toBe(undefined);
+    });
+
+    it("should handle missing course pageId gracefully", async () => {
+        // Create test data with course missing pageId
+        const testUser = await UserModel.create({
+            userId: "user-123",
+            name: "John Doe",
+            email: "john@example.com",
+            avatar: null,
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-user",
+        });
+
+        const testCreator = await UserModel.create({
+            userId: "creator-123",
+            name: "Jane Smith",
+            email: "jane@example.com",
+            domain: testDomain._id,
+            unsubscribeToken: "unsubscribe-token-creator",
+        });
+
+        const testCourse = await CourseModel.create({
+            courseId: "course-123",
+            title: "Test Course",
+            creatorId: "creator-123",
+            pageId: null, // Missing pageId
+            domain: testDomain._id,
+            type: "course",
+            privacy: "public",
+            costType: "free",
+            cost: 0,
+            slug: "test-course-edge-2",
+        });
+
+        const testCertificate = await CertificateModel.create({
+            certificateId: "cert-123",
+            userId: "user-123",
+            courseId: "course-123",
+            createdAt: new Date("2024-01-01"),
+            domain: testDomain._id,
+        });
+
+        const result = await getCertificate("cert-123", mockCtx);
+
+        expect(result.productPageId).toBe(null);
+    });
+});
diff --git a/apps/web/graphql/users/logic.ts b/apps/web/graphql/users/logic.ts
index 4ab32c7be..e2b276f04 100644
--- a/apps/web/graphql/users/logic.ts
+++ b/apps/web/graphql/users/logic.ts
@@ -15,7 +15,7 @@ import {
     InternalUser,
     UserSegment,
 } from "@courselit/common-logic";
-import { User } from "@courselit/common-models";
+import { Course, User } from "@courselit/common-models";
 import mongoose from "mongoose";
 import {
     Constants,
@@ -50,6 +50,10 @@ import {
     InternalMembership,
 } from "@courselit/common-logic";
 import { getPlanPrice } from "@courselit/utils";
+import CertificateModel from "@models/Certificate";
+import CertificateTemplateModel, {
+    CertificateTemplate,
+} from "@models/CertificateTemplate";
 
 const removeAdminFieldsFromUserObject = (
     user: User & { _id: mongoose.Types.ObjectId },
@@ -664,6 +668,10 @@ async function getUserContentInternal(ctx: GQLContext, user: User) {
                                 progress.courseId === course.courseId,
                         )?.completedLessons.length,
                         featuredImage: course.featuredImage,
+                        certificateId: user.purchases.find(
+                            (progress: Progress) =>
+                                progress.courseId === course.courseId,
+                        )?.certificateId,
                     },
                 });
             }
@@ -859,3 +867,83 @@ async function addProductToUser({
         await (user as any).save();
     }
 }
+
+export const getCertificate = async (
+    certificateId: string,
+    ctx: GQLContext,
+    courseId?: string,
+) => {
+    if (certificateId === "demo" && !courseId) {
+        throw new Error(responses.certificate_demo_course_id_required);
+    }
+
+    return await getCertificateInternal(certificateId, ctx.subdomain, courseId);
+};
+
+export const getCertificateInternal = async (
+    certificateId: string,
+    domain: Domain,
+    courseId?: string,
+) => {
+    const certificate =
+        certificateId !== "demo"
+            ? await CertificateModel.findOne({
+                  domain: domain._id,
+                  certificateId,
+              })
+            : {
+                  certificateId: "demo",
+                  createdAt: new Date(),
+              };
+
+    if (!certificate) {
+        throw new Error(responses.item_not_found);
+    }
+
+    const user =
+        certificateId !== "demo"
+            ? ((await UserModel.findOne({
+                  domain: domain._id,
+                  userId: certificate.userId,
+              }).lean()) as unknown as User)
+            : {
+                  name: "John Doe",
+                  email: "john.doe@example.com",
+                  avatar: null,
+              };
+
+    const course = (await CourseModel.findOne({
+        domain: domain._id,
+        courseId: certificateId !== "demo" ? certificate.courseId : courseId,
+    }).lean()) as unknown as Course;
+
+    if (!course) {
+        throw new Error(responses.item_not_found);
+    }
+
+    const creator = (await UserModel.findOne({
+        domain: domain._id,
+        userId: course.creatorId,
+    }).lean()) as unknown as User;
+
+    const template = (await CertificateTemplateModel.findOne({
+        domain: domain._id,
+        courseId: course.courseId,
+    }).lean()) as unknown as CertificateTemplate;
+
+    return {
+        certificateId: certificate.certificateId,
+        title: template?.title || "Certificate of Completion",
+        subtitle: template?.subtitle || "This certificate is awarded to",
+        description: template?.description || "for completing the course.",
+        signatureImage: template?.signatureImage || null,
+        signatureName: template?.signatureName || creator?.name,
+        signatureDesignation: template?.signatureDesignation || null,
+        logo: template?.logo || domain.settings?.logo || null,
+        productTitle: course?.title,
+        userName: user?.name || user?.email,
+        createdAt: certificate.createdAt,
+        userImage: user?.avatar || null,
+        productPageId: course?.pageId || null,
+    };
+};
diff --git a/apps/web/graphql/users/query.ts b/apps/web/graphql/users/query.ts
index bfc0b2ebf..ca9508b80 100644
--- a/apps/web/graphql/users/query.ts
+++ b/apps/web/graphql/users/query.ts
@@ -16,6 +16,7 @@ import {
     inviteCustomer,
     getUserContent,
     getMembershipStatus,
+    getCertificate,
 } from "./logic";
 import GQLContext from "../../models/GQLContext";
 import { MembershipEntityType } from "@courselit/common-models";
@@ -115,6 +116,21 @@ const queries = {
             context: GQLContext,
         ) => getMembershipStatus({ entityId, entityType, ctx: context }),
     },
+    getCertificate: {
+        type: types.certificateType,
+        args: {
+            certificateId: { type: new GraphQLNonNull(GraphQLString) },
+            courseId: { type: GraphQLString },
+        },
+        resolve: (
+            _: any,
+            {
+                certificateId,
+                courseId,
+            }: { certificateId: string; courseId?: string },
+            context: GQLContext,
+        ) => getCertificate(certificateId, context, courseId),
+    },
 };
 
 export default queries;
diff --git a/apps/web/graphql/users/types.ts b/apps/web/graphql/users/types.ts
index 92cdfb1c1..7bb0efa69 100644
--- a/apps/web/graphql/users/types.ts
+++ b/apps/web/graphql/users/types.ts
@@ -61,6 +61,7 @@ const progress = new GraphQLObjectType({
         courseId: { type: new GraphQLNonNull(GraphQLString) },
         completedLessons: { type: new GraphQLList(GraphQLString) },
         accessibleGroups: { type: new GraphQLList(GraphQLString) },
+        certificateId: { type: GraphQLString },
     },
 });
 
@@ -79,6 +80,7 @@ const entityType = new GraphQLObjectType({
                 getMedia(content.featuredImage),
         },
         type: { type: GraphQLString },
+        certificateId: { type: GraphQLString },
     },
 });
 
@@ -199,6 +201,25 @@ const tagWithDetails = new GraphQLObjectType({
     },
 });
 
+const certificateType = new GraphQLObjectType({
+    name: "Certificate",
+    fields: {
+        certificateId: { type: new GraphQLNonNull(GraphQLString) },
+        title: { type: new GraphQLNonNull(GraphQLString) },
+        subtitle: { type: new GraphQLNonNull(GraphQLString) },
+        description: { type: new GraphQLNonNull(GraphQLString) },
+        signatureName: { type: new GraphQLNonNull(GraphQLString) },
+        productTitle: { type: new GraphQLNonNull(GraphQLString) },
+        userName: { type: new GraphQLNonNull(GraphQLString) },
+        createdAt: { type: new GraphQLNonNull(GraphQLString) },
+        productPageId: { type: new GraphQLNonNull(GraphQLString) },
+        signatureImage: { type: mediaTypes.mediaType },
+        signatureDesignation: { type: GraphQLString },
+        logo: { type: mediaTypes.mediaType },
+        userImage: { type: mediaTypes.mediaType },
+    },
+});
+
 const userTypes = {
     filter,
     filterInput,
@@ -214,6 +235,7 @@ const userTypes = {
     membershipStatusType,
     membershipEntityType,
     membershipRoleType,
+    certificateType,
 };
 
 export default userTypes;
diff --git a/apps/web/hooks/use-certificate.ts b/apps/web/hooks/use-certificate.ts
new file mode 100644
index 000000000..d0b1c2ce5
--- /dev/null
+++ b/apps/web/hooks/use-certificate.ts
@@ -0,0 +1,73 @@
+import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+import { redirect } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function useCertificate(certId: string, courseId?: string) {
+    const [certificate, setCertificate] = useState<any>(null);
+    const [loaded, setLoaded] = useState(false);
+    const fetch = useGraphQLFetch();
+
+    useEffect(() => {
+        async function getCertificate() {
+            const query = `
+                query GetCertificate($certificateId: String!, $courseId: String) {
+                    certificate: getCertificate(certificateId: $certificateId, courseId: $courseId) {
+                        certificateId
+                        title
+                        subtitle
+                        description
+                        signatureImage {
+                            mediaId
+                            file
+                            thumbnail
+                        }
+                        signatureName
+                        signatureDesignation
+                        logo {
+                            mediaId
+                            file
+                            thumbnail
+                        }
+                        productTitle
+                        userName
+                        createdAt
+                        userImage {
+                            mediaId
+                            file
+                            thumbnail
+                        }
+                        productPageId
+                    }
+                }
+            `;
+            const fetchRequest = fetch
+                .setPayload({
+                    query,
+                    variables: {
+                        certificateId: certId,
+                        courseId,
+                    },
+                })
+                .build();
+
+            try {
+                const response = await fetchRequest.exec();
+                if (response.certificate) {
+                    setCertificate(response.certificate);
+                } else {
+                    redirect("/");
+                }
+            } catch (error) {
+                redirect("/");
+            } finally {
+                setLoaded(true);
+            }
+        }
+
+        if (certId && !loaded) {
+            getCertificate();
+        }
+    }, [certId]);
+
+    return { certificate, loaded };
+}
diff --git a/apps/web/hooks/use-payment-plan-operations.ts b/apps/web/hooks/use-payment-plan-operations.ts
index 5268794fc..a0ec8e0e0 100644
--- a/apps/web/hooks/use-payment-plan-operations.ts
+++ b/apps/web/hooks/use-payment-plan-operations.ts
@@ -1,10 +1,11 @@
-import { useState, useContext } from "react";
-import { FetchBuilder } from "@courselit/utils";
+import { useState } from "react";
 import type {
     MembershipEntityType,
     PaymentPlan,
 } from "@courselit/common-models";
-import { AddressContext } from "@components/contexts";
+import { useGraphQLFetch } from "./use-graphql-fetch";
+import { useToast } from "@courselit/components-library";
+import { TOAST_TITLE_ERROR } from "@ui-config/strings";
 
 interface UsePaymentPlanOperationsProps {
     id: string;
@@ -17,68 +18,9 @@ export function usePaymentPlanOperations({
 }: UsePaymentPlanOperationsProps) {
     const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([]);
     const [defaultPaymentPlan, setDefaultPaymentPlan] = useState<string>();
-    const address = useContext(AddressContext);
-
-    const onPlanSubmitted = async (plan: any) => {
-        const query = `
-            mutation CreatePlan(
-                $name: String!
-                $type: PaymentPlanType!
-                $entityId: String!
-                $entityType: MembershipEntityType!
-                $oneTimeAmount: Int
-                $emiAmount: Int
-                $emiTotalInstallments: Int
-                $subscriptionMonthlyAmount: Int
-                $subscriptionYearlyAmount: Int
-                $description: String
-                $includedProducts: [String]
-            ) {
-                plan: createPlan(
-                    name: $name
-                    type: $type
-                    entityId: $entityId
-                    entityType: $entityType
-                    oneTimeAmount: $oneTimeAmount
-                    emiAmount: $emiAmount
-                    emiTotalInstallments: $emiTotalInstallments
-                    subscriptionMonthlyAmount: $subscriptionMonthlyAmount
-                    subscriptionYearlyAmount: $subscriptionYearlyAmount
-                    description: $description
-                    includedProducts: $includedProducts
-                ) {
-                    planId
-                    name
-                    type
-                    oneTimeAmount
-                    emiAmount
-                    emiTotalInstallments
-                    subscriptionMonthlyAmount
-                    subscriptionYearlyAmount
-                    description
-                    includedProducts
-                }
-            }
-        `;
-
-        const fetchRequest = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload({
-                query,
-                variables: {
-                    ...plan,
-                    entityId: id,
-                    entityType: entityType.toUpperCase(),
-                },
-            })
-            .setIsGraphQLEndpoint(true)
-            .build();
-        const response = await fetchRequest.exec();
-        if (response.plan) {
-            setPaymentPlans([...paymentPlans, response.plan]);
-        }
-        return response.plan;
-    };
+    const [loading, setLoading] = useState(false);
+    const fetch = useGraphQLFetch();
+    const { toast } = useToast();
 
     const onPlanArchived = async (planId: string) => {
         const query = `
@@ -97,34 +39,52 @@ export function usePaymentPlanOperations({
             }
         `;
 
-        const fetchRequest = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
+        const fetchRequest = fetch
             .setPayload({
                 query,
                 variables: {
                     planId,
                 },
             })
-            .setIsGraphQLEndpoint(true)
             .build();
-        const response = await fetchRequest.exec();
-        if (response.plan) {
-            setPaymentPlans(paymentPlans.filter((p) => p.planId !== planId));
+        setLoading(true);
+        try {
+            const response = await fetchRequest.exec();
+            if (response.plan) {
+                setPaymentPlans(
+                    paymentPlans.filter((p) => p.planId !== planId),
+                );
+            }
+            return response.plan;
+        } catch (error) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: "Failed to archive payment plan",
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
         }
-        return response.plan;
     };
 
     const onDefaultPlanChanged = async (planId: string) => {
         const query = `
-            mutation ChangeDefaultPlan($planId: String!, $entityId: String!, $entityType: MembershipEntityType!) {
-                plan: changeDefaultPlan(planId: $planId, entityId: $entityId, entityType: $entityType) {
+            mutation ChangeDefaultPlan(
+                $planId: String!, 
+                $entityId: String!, 
+                $entityType: MembershipEntityType!
+            ) {
+                plan: changeDefaultPlan(
+                    planId: $planId, 
+                    entityId: $entityId, 
+                    entityType: $entityType
+                ) {
                     planId
                 }
             }
         `;
 
-        const fetchRequest = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
+        const fetchRequest = fetch
             .setPayload({
                 query,
                 variables: {
@@ -133,71 +93,23 @@ export function usePaymentPlanOperations({
                     entityType: entityType.toUpperCase(),
                 },
             })
-            .setIsGraphQLEndpoint(true)
             .build();
-        const response = await fetchRequest.exec();
-        if (response.plan) {
-            setDefaultPaymentPlan(response.plan.planId);
-        }
-        return response.plan;
-    };
-
-    const onPlanUpdated = async (plan: any) => {
-        const query = `
-            mutation UpdatePlan(
-                $planId: String!
-                $name: String
-                $type: PaymentPlanType
-                $oneTimeAmount: Int
-                $emiAmount: Int
-                $emiTotalInstallments: Int
-                $subscriptionMonthlyAmount: Int
-                $subscriptionYearlyAmount: Int
-                $description: String
-                $includedProducts: [String]
-            ) {
-                plan: updatePlan(
-                    planId: $planId
-                    name: $name
-                    type: $type
-                    oneTimeAmount: $oneTimeAmount
-                    emiAmount: $emiAmount
-                    emiTotalInstallments: $emiTotalInstallments
-                    subscriptionMonthlyAmount: $subscriptionMonthlyAmount
-                    subscriptionYearlyAmount: $subscriptionYearlyAmount
-                    description: $description
-                    includedProducts: $includedProducts
-                ) {
-                    planId
-                    name
-                    type
-                    oneTimeAmount
-                    emiAmount
-                    emiTotalInstallments
-                    subscriptionMonthlyAmount
-                    subscriptionYearlyAmount
-                    description
-                    includedProducts
-                }
+        setLoading(true);
+        try {
+            const response = await fetchRequest.exec();
+            if (response.plan) {
+                setDefaultPaymentPlan(response.plan.planId);
             }
-        `;
-
-        const fetchRequest = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload({
-                query,
-                variables: {
-                    planId: plan.planId,
-                    ...plan,
-                },
-            })
-            .setIsGraphQLEndpoint(true)
-            .build();
-        const response = await fetchRequest.exec();
-        if (response.plan) {
-            setPaymentPlans([...paymentPlans, response.plan]);
+            return response.plan;
+        } catch (error) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: "Failed to change default payment plan",
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
         }
-        return response.plan;
     };
 
     return {
@@ -205,9 +117,8 @@ export function usePaymentPlanOperations({
         setPaymentPlans,
         defaultPaymentPlan,
         setDefaultPaymentPlan,
-        onPlanSubmitted,
         onPlanArchived,
         onDefaultPlanChanged,
-        onPlanUpdated,
+        loading,
     };
 }
diff --git a/apps/web/hooks/use-product.ts b/apps/web/hooks/use-product.ts
index 425bf2a67..f006c1198 100644
--- a/apps/web/hooks/use-product.ts
+++ b/apps/web/hooks/use-product.ts
@@ -4,9 +4,10 @@ import { useToast } from "@courselit/components-library";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { useGraphQLFetch } from "./use-graphql-fetch";
 import { AddressContext } from "@components/contexts";
+import { InternalCourse } from "@courselit/common-logic";
 
 export type ProductWithAdminProps = Partial<
-    Omit<Course, "paymentPlans"> &
+    Omit<InternalCourse, "paymentPlans"> &
         Pick<Course, "paymentPlans"> & {
             lessons: Pick<Lesson, "title" | "groupId" | "lessonId" | "type"> &
                 { id: string }[];
@@ -101,6 +102,7 @@ export default function useProduct(id?: string | null): {
                     }
                     leadMagnet
                     defaultPaymentPlan
+                    certificate
                 }
             }
         `;
@@ -115,11 +117,6 @@ export default function useProduct(id?: string | null): {
             } catch (err: any) {
                 setHasError(true);
                 setProduct(null);
-                // toast({
-                //     title: TOAST_TITLE_ERROR,
-                //     description: err.message,
-                //     variant: "destructive",
-                // });
             } finally {
                 setLoaded(true);
             }
diff --git a/apps/web/jest-mongodb-config.js b/apps/web/jest-mongodb-config.js
new file mode 100644
index 000000000..46c2e0e23
--- /dev/null
+++ b/apps/web/jest-mongodb-config.js
@@ -0,0 +1,13 @@
+module.exports = {
+    mongodbMemoryServerOptions: {
+        binary: {
+            version: "7.0.0",
+            skipMD5: true,
+        },
+        instance: {
+            dbName: "jest",
+        },
+        autoStart: false,
+    },
+    useSharedDBForAllJestWorkers: true,
+};
diff --git a/apps/web/jest.config.ts b/apps/web/jest.client.config.ts
similarity index 52%
rename from apps/web/jest.config.ts
rename to apps/web/jest.client.config.ts
index 207322052..50ce65370 100644
--- a/apps/web/jest.config.ts
+++ b/apps/web/jest.client.config.ts
@@ -6,9 +6,16 @@ const createJestConfig = nextJest({
 });
 
 const config: Config = {
-    coverageProvider: "v8",
     testEnvironment: "jsdom",
-    setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+    setupFilesAfterEnv: ["<rootDir>/setupTests.client.ts"],
+    watchPathIgnorePatterns: ["globalConfig"],
+    testPathIgnorePatterns: [
+        "/node_modules/",
+        "/.next/",
+        // Exclude MongoDB tests - they will be handled by the MongoDB config
+        ".*/graphql/.*/__tests__/.*\\.test\\.(ts|tsx)$",
+        ".*/api/.*/__tests__/.*\\.test\\.(ts|tsx)$",
+    ],
     // collectCoverage: true,
     // collectCoverageFrom: [
     //     '**/*.{js,jsx,ts,tsx}',
@@ -33,7 +40,28 @@ const config: Config = {
         "@/auth": "<rootDir>/auth.ts",
         "@/payments-new": "<rootDir>/payments-new",
         "@/graphql/(.*)": "<rootDir>/graphql/$1",
+        "@/config/(.*)": "<rootDir>/config/$1",
+        "@/lib/(.*)": "<rootDir>/lib/$1",
+        "@/services/(.*)": "<rootDir>/services/$1",
+        "@/templates/(.*)": "<rootDir>/templates/$1",
+        "@/app/(.*)": "<rootDir>/app/$1",
+        "@ui-lib/(.*)": "<rootDir>/ui-lib/$1",
+        "@config/(.*)": "<rootDir>/config/$1",
+        "@/models/(.*)": "<rootDir>/models/$1",
+        "\\.(css|less|scss|sass)$": "identity-obj-proxy",
     },
+    transform: {
+        "^.+\\.(ts|tsx)$": [
+            "ts-jest",
+            {
+                tsconfig: {
+                    jsx: "react-jsx",
+                },
+            },
+        ],
+    },
+    testMatch: ["**/__tests__/**/*.(test|spec).(ts|tsx|js)"],
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
 };
 
 export default createJestConfig(config);
diff --git a/apps/web/jest.server.config.ts b/apps/web/jest.server.config.ts
new file mode 100644
index 000000000..d3b9cc17c
--- /dev/null
+++ b/apps/web/jest.server.config.ts
@@ -0,0 +1,52 @@
+import type { Config } from "jest";
+
+const config: Config = {
+    preset: "@shelf/jest-mongodb",
+    setupFilesAfterEnv: ["<rootDir>/setupTests.server.ts"],
+    watchPathIgnorePatterns: ["globalConfig"],
+    moduleNameMapper: {
+        "next-auth": "<rootDir>/__mocks__/next-auth.ts",
+        "@courselit/utils": "<rootDir>/../../packages/utils/src",
+        "@courselit/common-logic": "<rootDir>/../../packages/common-logic/src",
+        "@courselit/page-primitives":
+            "<rootDir>/../../packages/page-primitives/src",
+        nanoid: "<rootDir>/__mocks__/nanoid.ts",
+        slugify: "<rootDir>/__mocks__/slugify.ts",
+        "@models/(.*)": "<rootDir>/models/$1",
+        "@/auth": "<rootDir>/auth.ts",
+        "@/payments-new": "<rootDir>/payments-new",
+        "@/graphql/(.*)": "<rootDir>/graphql/$1",
+        "@/config/(.*)": "<rootDir>/config/$1",
+        "@/lib/(.*)": "<rootDir>/lib/$1",
+        "@/services/(.*)": "<rootDir>/services/$1",
+        "@/templates/(.*)": "<rootDir>/templates/$1",
+        "@/app/(.*)": "<rootDir>/app/$1",
+        "@ui-lib/(.*)": "<rootDir>/ui-lib/$1",
+        "@config/(.*)": "<rootDir>/config/$1",
+        "@/models/(.*)": "<rootDir>/models/$1",
+        "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    },
+    transform: {
+        "^.+\\.(ts|tsx)$": [
+            "ts-jest",
+            {
+                tsconfig: {
+                    jsx: "react-jsx",
+                },
+            },
+        ],
+    },
+    testMatch: [
+        "**/graphql/**/__tests__/**/*.test.ts",
+        "**/api/**/__tests__/**/*.test.ts",
+    ],
+    testPathIgnorePatterns: [
+        "/node_modules/",
+        "/.next/",
+        // Exclude component tests - they should run in the regular config
+        ".*/components/.*/__tests__/.*\\.test\\.(tsx|ts)$",
+    ],
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+};
+
+export default config;
diff --git a/apps/web/models/Certificate.ts b/apps/web/models/Certificate.ts
new file mode 100644
index 000000000..28ac84a2b
--- /dev/null
+++ b/apps/web/models/Certificate.ts
@@ -0,0 +1,31 @@
+import { generateUniqueId } from "@courselit/utils";
+import mongoose from "mongoose";
+
+export interface Certificate {
+    domain: mongoose.Types.ObjectId;
+    certificateId: string;
+    userId: string;
+    courseId: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+const CertificateSchema = new mongoose.Schema(
+    {
+        domain: { type: mongoose.Schema.Types.ObjectId, required: true },
+        certificateId: {
+            type: String,
+            required: true,
+            unique: true,
+            default: generateUniqueId,
+        },
+        userId: { type: String, required: true },
+        courseId: { type: String, required: true },
+    },
+    {
+        timestamps: true,
+    },
+);
+
+export default mongoose.models.Certificate ||
+    mongoose.model("Certificate", CertificateSchema);
diff --git a/apps/web/models/CertificateTemplate.ts b/apps/web/models/CertificateTemplate.ts
new file mode 100644
index 000000000..350f0f77c
--- /dev/null
+++ b/apps/web/models/CertificateTemplate.ts
@@ -0,0 +1,45 @@
+import { MediaSchema } from "@courselit/common-logic";
+import { Media } from "@courselit/common-models";
+import { generateUniqueId } from "@courselit/utils";
+import mongoose from "mongoose";
+
+export interface CertificateTemplate {
+    domain: mongoose.Types.ObjectId;
+    templateId: string;
+    courseId: string;
+    title: string;
+    subtitle: string;
+    description: string;
+    signatureImage: Media;
+    signatureName: string;
+    signatureDesignation?: string;
+    logo?: Media;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+const CertificateTemplateSchema = new mongoose.Schema(
+    {
+        domain: { type: mongoose.Schema.Types.ObjectId, required: true },
+        templateId: {
+            type: String,
+            required: true,
+            unique: true,
+            default: generateUniqueId,
+        },
+        courseId: { type: String, required: true },
+        title: { type: String, required: true },
+        subtitle: { type: String, required: true },
+        description: { type: String, required: true },
+        signatureImage: MediaSchema,
+        signatureName: { type: String, required: true },
+        signatureDesignation: { type: String },
+        logo: MediaSchema,
+    },
+    {
+        timestamps: true,
+    },
+);
+
+export default mongoose.models.CertificateTemplate ||
+    mongoose.model("CertificateTemplate", CertificateTemplateSchema);
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 36a4fe488..830fb594c 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 /// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
diff --git a/apps/web/package.json b/apps/web/package.json
index 87ec9416c..881c64188 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,105 +1,109 @@
 {
-  "name": "@courselit/web",
-  "version": "0.63.2",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prettier": "prettier --write **/*.ts"
-  },
-  "dependencies": {
-    "@courselit/common-logic": "workspace:^",
-    "@courselit/common-models": "workspace:^",
-    "@courselit/components-library": "workspace:^",
-    "@courselit/email-editor": "workspace:^",
-    "@courselit/icons": "workspace:^",
-    "@courselit/page-blocks": "workspace:^",
-    "@courselit/page-models": "workspace:^",
-    "@courselit/page-primitives": "workspace:^",
-    "@courselit/utils": "workspace:^",
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-compose-refs": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-toggle": "^1.1.6",
-    "@radix-ui/react-toggle-group": "^1.1.7",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@stripe/stripe-js": "^5.4.0",
-    "@types/base-64": "^1.0.0",
-    "archiver": "^5.3.1",
-    "aws4": "^1.13.2",
-    "base-64": "^1.0.0",
-    "chart.js": "^4.4.7",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "color-convert": "^3.1.0",
-    "cookie": "^0.4.2",
-    "date-fns": "^4.1.0",
-    "graphql": "^16.10.0",
-    "graphql-type-json": "^0.3.2",
-    "jsdom": "^26.1.0",
-    "lodash.debounce": "^4.0.8",
-    "lucide-react": "^0.475.0",
-    "mongodb": "^6.15.0",
-    "mongoose": "^8.13.1",
-    "next": "^15.5.4",
-    "next-auth": "^5.0.0-beta.29",
-    "next-themes": "^0.4.6",
-    "nodemailer": "^6.7.2",
-    "pug": "^3.0.2",
-    "razorpay": "^2.9.4",
-    "react": "19.1.1",
-    "react-chartjs-2": "^5.3.0",
-    "react-csv": "^2.2.2",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.54.1",
-    "recharts": "^2.15.1",
-    "remirror": "^3.0.1",
-    "sharp": "^0.33.2",
-    "slugify": "^1.6.5",
-    "stripe": "^17.5.0",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.1"
-  },
-  "devDependencies": {
-    "@types/bcryptjs": "^2.4.2",
-    "@types/cookie": "^0.4.1",
-    "@types/mongodb": "^4.0.7",
-    "@types/node": "17.0.21",
-    "@types/nodemailer": "^6.4.4",
-    "@types/pug": "^2.0.6",
-    "@types/react": "19.1.13",
-    "eslint": "8.48.0",
-    "eslint-config-next": "^15.5.4",
-    "eslint-config-prettier": "^9.0.0",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.2",
-    "tailwind-config": "workspace:^",
-    "tailwindcss": "^3.4.1",
-    "tsconfig": "workspace:^",
-    "typescript": "^5.6.2"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "19.1.13"
+    "name": "@courselit/web",
+    "version": "0.63.2",
+    "private": true,
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "prettier": "prettier --write **/*.ts"
+    },
+    "dependencies": {
+        "@courselit/common-logic": "workspace:^",
+        "@courselit/common-models": "workspace:^",
+        "@courselit/components-library": "workspace:^",
+        "@courselit/email-editor": "workspace:^",
+        "@courselit/icons": "workspace:^",
+        "@courselit/page-blocks": "workspace:^",
+        "@courselit/page-models": "workspace:^",
+        "@courselit/page-primitives": "workspace:^",
+        "@courselit/utils": "workspace:^",
+        "@hookform/resolvers": "^3.9.1",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-avatar": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-collapsible": "^1.1.3",
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-radio-group": "^1.2.3",
+        "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.1.3",
+        "@radix-ui/react-tabs": "^1.1.3",
+        "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.6",
+        "@radix-ui/react-toggle-group": "^1.1.7",
+        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
+        "@stripe/stripe-js": "^5.4.0",
+        "@types/base-64": "^1.0.0",
+        "archiver": "^5.3.1",
+        "aws4": "^1.13.2",
+        "base-64": "^1.0.0",
+        "chart.js": "^4.4.7",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "color-convert": "^3.1.0",
+        "cookie": "^0.4.2",
+        "date-fns": "^4.1.0",
+        "graphql": "^16.10.0",
+        "graphql-type-json": "^0.3.2",
+        "jsdom": "^26.1.0",
+        "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.544.0",
+        "mongodb": "^6.15.0",
+        "mongoose": "^8.13.1",
+        "next": "^15.5.4",
+        "next-auth": "^5.0.0-beta.29",
+        "next-themes": "^0.4.6",
+        "nodemailer": "^6.7.2",
+        "pug": "^3.0.2",
+        "razorpay": "^2.9.4",
+        "react": "19.1.1",
+        "react-chartjs-2": "^5.3.0",
+        "react-csv": "^2.2.2",
+        "react-dom": "19.1.1",
+        "react-hook-form": "^7.54.1",
+        "recharts": "^2.15.1",
+        "remirror": "^3.0.1",
+        "sharp": "^0.33.2",
+        "slugify": "^1.6.5",
+        "stripe": "^17.5.0",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.1"
+    },
+    "devDependencies": {
+        "@shelf/jest-mongodb": "^5.2.2",
+        "@types/bcryptjs": "^2.4.2",
+        "@types/cookie": "^0.4.1",
+        "@types/mongodb": "^4.0.7",
+        "@types/node": "17.0.21",
+        "@types/nodemailer": "^6.4.4",
+        "@types/pug": "^2.0.6",
+        "@types/react": "19.1.13",
+        "eslint": "8.48.0",
+        "eslint-config-next": "^15.5.4",
+        "eslint-config-prettier": "^9.0.0",
+        "identity-obj-proxy": "^3.0.0",
+        "mongodb-memory-server": "^10.1.4",
+        "postcss": "^8.4.27",
+        "prettier": "^3.0.2",
+        "tailwind-config": "workspace:^",
+        "tailwindcss": "^3.4.1",
+        "ts-jest": "^29.4.4",
+        "tsconfig": "workspace:^",
+        "typescript": "^5.6.2"
+    },
+    "pnpm": {
+        "overrides": {
+            "@types/react": "19.1.13"
+        }
     }
-  }
 }
diff --git a/apps/web/services/medialit.ts b/apps/web/services/medialit.ts
index 73b534742..dbbe85404 100644
--- a/apps/web/services/medialit.ts
+++ b/apps/web/services/medialit.ts
@@ -1,5 +1,5 @@
 import { Media } from "@courselit/common-models";
-import { responses } from "../config/strings.ts";
+import { responses } from "../config/strings";
 
 const medialitServer = process.env.MEDIALIT_SERVER || "https://medialit.cloud";
 
diff --git a/apps/web/setupTests.ts b/apps/web/setupTests.client.ts
similarity index 100%
rename from apps/web/setupTests.ts
rename to apps/web/setupTests.client.ts
diff --git a/apps/web/setupTests.server.ts b/apps/web/setupTests.server.ts
new file mode 100644
index 000000000..ac9419ec6
--- /dev/null
+++ b/apps/web/setupTests.server.ts
@@ -0,0 +1,24 @@
+import mongoose from "mongoose";
+
+// Suppress console.error during tests to reduce noise
+const originalError = console.error;
+beforeAll(() => {
+    console.error = jest.fn();
+});
+
+afterAll(() => {
+    console.error = originalError;
+});
+
+// Ensure MongoDB connection is established
+beforeAll(async () => {
+    if (mongoose.connection.readyState === 0) {
+        await mongoose.connect(global.__MONGO_URI__ || process.env.MONGO_URL);
+    }
+});
+
+afterAll(async () => {
+    if (mongoose.connection.readyState !== 0) {
+        await mongoose.connection.close();
+    }
+});
diff --git a/apps/web/templates/certificates/default.pug b/apps/web/templates/certificates/default.pug
new file mode 100644
index 000000000..584359589
--- /dev/null
+++ b/apps/web/templates/certificates/default.pug
@@ -0,0 +1,244 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    title Certificate
+    style.
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        background: white;
+        margin: 0;
+        padding: 0;
+      }
+      
+      .certificate-container {
+        width: 11in;
+        height: 8.5in;
+        margin: 0 auto;
+        background: white;
+        padding: 0.75in;
+        position: relative;
+        box-sizing: border-box;
+      }
+      
+      .certificate-border {
+        position: absolute;
+        top: 0.25in;
+        left: 0.25in;
+        right: 0.25in;
+        bottom: 0.25in;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      
+      .header {
+        text-align: center;
+        margin-bottom: 2rem;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .logo {
+        margin-bottom: 1rem;
+      }
+      
+      .logo img {
+        max-width: 80px;
+        max-height: 80px;
+      }
+      
+      .title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 0.5rem;
+        letter-spacing: 1px;
+      }
+      
+      .divider {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 1.5rem;
+      }
+      
+      .content {
+        text-align: center;
+        margin-bottom: 3rem;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .subtitle {
+        font-size: 1.2rem;
+        color: #1A202C;
+        margin-bottom: 1rem;
+        font-weight: normal;
+      }
+      
+      .recipient-name {
+        font-size: 2.2rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 1rem;
+        letter-spacing: 1px;
+      }
+      
+      .description {
+        font-size: 1rem;
+        color: #1A202C;
+        max-width: 24rem;
+        margin: 0 auto 1rem;
+        line-height: 1.5;
+        font-weight: normal;
+      }
+      
+      .course-title {
+        font-size: 1.3rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 0.5rem;
+      }
+      
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: auto;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .signature-section {
+        flex: 1;
+        text-align: center;
+      }
+      
+      .signature-image {
+        margin-bottom: 0.5rem;
+      }
+      
+      .signature-image img {
+        max-width: 100px;
+        max-height: 50px;
+      }
+      
+      .signature-line {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 0.5rem;
+      }
+      
+      .signature-name {
+        font-size: 0.9rem;
+        font-weight: normal;
+        color: #1A202C;
+      }
+      
+      .signature-designation {
+        font-size: 0.8rem;
+        color: #1A202C;
+        font-weight: normal;
+      }
+      
+      .date-section {
+        flex: 1;
+        text-align: center;
+      }
+      
+      .date-line {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 0.5rem;
+      }
+      
+      .date-label {
+        font-size: 0.9rem;
+        font-weight: normal;
+        color: #1A202C;
+      }
+      
+      .date-value {
+        font-size: 0.8rem;
+        color: #1A202C;
+        font-weight: normal;
+      }
+      
+      .certificate-id {
+        position: absolute;
+        bottom: 0.75in;
+        left: 0.75in;
+        right: 0.75in;
+        text-align: center;
+        border-top: 1px solid #ccc;
+        padding-top: 0.5rem;
+        z-index: 10;
+      }
+      
+      .certificate-id-text {
+        font-size: 0.7rem;
+        color: #888;
+        font-weight: normal;
+      }
+      
+      @media print {
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        
+        .certificate-container {
+          margin: 0;
+          box-shadow: none;
+        }
+        
+        @page {
+          size: letter landscape;
+          margin: 0;
+        }
+      }
+  body
+    .certificate-container
+      .certificate-border
+      
+      .header
+        if certificate && certificate.logo
+          .logo
+            img(src=certificate.logo.file, alt="Logo")
+        h1.title= certificate ? certificate.title : "Congratulations"
+        .divider
+      
+      .content
+        if certificate && certificate.subtitle
+          p.subtitle= certificate.subtitle
+        h2.recipient-name= certificate ? certificate.userName : "Student Name"
+        if certificate && certificate.description
+          p.description= certificate.description
+        h3.course-title= certificate ? certificate.productTitle : "Certified Course"
+      
+      .footer
+        .signature-section
+          if certificate && certificate.signatureImage
+            .signature-image
+              img(src=certificate.signatureImage.file, alt="Signature")
+          .signature-line
+          p.signature-name= certificate ? certificate.signatureName : "Instructor"
+          if certificate && certificate.signatureDesignation
+            p.signature-designation= certificate.signatureDesignation
+        
+        .date-section
+          .date-line
+          p.date-label Date of Completion
+          p.date-value= createdAt || "Date"
+      
+      .certificate-id
+        p.certificate-id-text ID: #{certificate ? certificate.certificateId : "N/A"}
diff --git a/apps/web/templates/certificates/default.tsx b/apps/web/templates/certificates/default.tsx
new file mode 100644
index 000000000..545676eed
--- /dev/null
+++ b/apps/web/templates/certificates/default.tsx
@@ -0,0 +1,302 @@
+import { formattedLocaleDate } from "@ui-lib/utils";
+
+export default function DefaultCertificate({
+    certificate,
+}: {
+    certificate: Record<string, any>;
+}) {
+    const logoSrc = certificate?.logo?.file as string | undefined;
+    const signatureSrc = certificate?.signatureImage?.file as
+        | string
+        | undefined;
+    const createdAt = (certificate?.createdAt as string | undefined) || "Date";
+
+    return (
+        <div className="print-root">
+            <div className="certificate-container">
+                <div className="certificate-border" />
+
+                <div className="header">
+                    {logoSrc ? (
+                        <div className="logo">
+                            <img src={logoSrc} alt="Logo" />
+                        </div>
+                    ) : null}
+                    <h1 className="title">
+                        {certificate?.title || "Congratulations"}
+                    </h1>
+                    <div className="divider" />
+                </div>
+
+                <div className="content">
+                    {certificate?.subtitle ? (
+                        <p className="subtitle">{certificate.subtitle}</p>
+                    ) : null}
+                    <h2 className="recipient-name">
+                        {certificate?.userName || "Student Name"}
+                    </h2>
+                    {certificate?.description ? (
+                        <p className="description">{certificate.description}</p>
+                    ) : null}
+                    <h3 className="course-title">
+                        {certificate?.productTitle || "Certified Course"}
+                    </h3>
+                </div>
+
+                <div className="footer">
+                    <div className="signature-section">
+                        {signatureSrc ? (
+                            <div className="signature-image">
+                                <img src={signatureSrc} alt="Signature" />
+                            </div>
+                        ) : null}
+                        <div className="signature-line" />
+                        <p className="signature-name">
+                            {certificate?.signatureName || "Instructor"}
+                        </p>
+                        {certificate?.signatureDesignation ? (
+                            <p className="signature-designation">
+                                {certificate.signatureDesignation}
+                            </p>
+                        ) : null}
+                    </div>
+
+                    <div className="date-section">
+                        <div className="date-line" />
+                        <p className="date-label">Date of Completion</p>
+                        <p className="date-value">
+                            {formattedLocaleDate(+createdAt, "long")}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="certificate-id">
+                    <p className="certificate-id-text">
+                        ID: {certificate?.certificateId || "N/A"}
+                    </p>
+                </div>
+
+                <style>{`
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      
+      :root { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+      body { font-family: Arial, Helvetica, sans-serif; }
+
+      .print-root {
+        min-height: 100vh;
+        background: #F3F4F6; /* screen preview background */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+      }
+      
+      .certificate-container {
+        width: 11in;
+        height: 8.5in;
+        margin: 0 auto;
+        background: white;
+        padding: 0.75in;
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+        page-break-inside: avoid;
+        break-inside: avoid;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+      }
+      
+      .certificate-border {
+        position: absolute;
+        top: 0.25in;
+        left: 0.25in;
+        right: 0.25in;
+        bottom: 0.25in;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      
+      .header {
+        text-align: center;
+        margin-bottom: 2rem;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .logo {
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .logo img {
+        max-width: 80px;
+        max-height: 80px;
+        image-rendering: auto;
+      }
+      
+      .title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 0.5rem;
+        letter-spacing: 1px;
+      }
+      
+      .divider {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 1.5rem;
+      }
+      
+      .content {
+        text-align: center;
+        margin-bottom: 3rem;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .subtitle {
+        font-size: 1.2rem;
+        color: #1A202C;
+        margin-bottom: 1rem;
+        font-weight: normal;
+      }
+      
+      .recipient-name {
+        font-size: 2.2rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 1rem;
+        letter-spacing: 1px;
+      }
+      
+      .description {
+        font-size: 1rem;
+        color: #1A202C;
+        max-width: 24rem;
+        margin: 0 auto 1rem;
+        line-height: 1.5;
+        font-weight: normal;
+      }
+      
+      .course-title {
+        font-size: 1.3rem;
+        font-weight: bold;
+        color: #1A202C;
+        margin-bottom: 0.5rem;
+      }
+      
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: auto;
+        position: relative;
+        z-index: 10;
+      }
+      
+      .signature-section {
+        flex: 1;
+        text-align: center;
+      }
+      
+      .signature-image {
+        margin-bottom: 0.5rem;
+        text-align: center; /* center the image within this block */
+      }
+      
+      .signature-image img {
+        max-width: 100px;
+        max-height: 50px;
+        image-rendering: auto;
+        display: block; /* ensure centering works regardless of parent text alignment */
+        margin: 0 auto; /* horizontally center */
+      }
+      
+      .signature-line {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 0.5rem;
+      }
+      
+      .signature-name {
+        font-size: 0.9rem;
+        font-weight: normal;
+        color: #1A202C;
+      }
+      
+      .signature-designation {
+        font-size: 0.8rem;
+        color: #1A202C;
+        font-weight: normal;
+      }
+      
+      .date-section {
+        flex: 1;
+        text-align: center;
+      }
+      
+      .date-line {
+        width: 8rem;
+        height: 2px;
+        background: #000;
+        margin: 0 auto 0.5rem;
+      }
+      
+      .date-label {
+        font-size: 0.9rem;
+        font-weight: normal;
+        color: #1A202C;
+      }
+      
+      .date-value {
+        font-size: 0.8rem;
+        color: #1A202C;
+        font-weight: normal;
+      }
+      
+      .certificate-id {
+        position: absolute;
+        bottom: 0.75in;
+        left: 0.75in;
+        right: 0.75in;
+        text-align: center;
+        border-top: 1px solid #ccc;
+        padding-top: 0.5rem;
+        z-index: 10;
+      }
+      
+      .certificate-id-text {
+        font-size: 0.7rem;
+        color: #888;
+        font-weight: normal;
+      }
+      
+      @media screen {
+        /* Ensure on-screen preview keeps full page visible */
+        .certificate-container { transform: none; }
+      }
+
+      @media print {
+        html, body { height: auto; }
+        body { margin: 0; padding: 0; background: white !important; }
+        .print-root { background: transparent; padding: 0; display: block; }
+        .certificate-container { margin: 0; box-shadow: none; width: 11in; height: 8.5in; }
+        .certificate-border { border-color: #ccc; }
+        @page { size: letter landscape; margin: 0; }
+      }
+            `}</style>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/ui-config/strings.ts b/apps/web/ui-config/strings.ts
index 21ea59b96..98048dbea 100644
--- a/apps/web/ui-config/strings.ts
+++ b/apps/web/ui-config/strings.ts
@@ -645,3 +645,4 @@ export const BLOG_UPDATED_PREFIX = "Updated";
 export const HEADER_HELP = "Help";
 export const CHECKOUT_PAGE_ORDER_SUMMARY = "Order summary";
 export const TEXT_EDITOR_PLACEHOLDER = "Type here...";
+export const BTN_VIEW_CERTIFICATE = "View certificate";
diff --git a/apps/web/ui-lib/utils.ts b/apps/web/ui-lib/utils.ts
index 89e414603..bd642a35c 100644
--- a/apps/web/ui-lib/utils.ts
+++ b/apps/web/ui-lib/utils.ts
@@ -237,50 +237,6 @@ export const getFullSiteSetup = async (
     }
 };
 
-export const getProfile = async (
-    backend: string,
-): Promise<Partial<Profile> | null> => {
-    const query = `
-        { profile: getUser {
-            name,
-            id,
-            email,
-            userId,
-            bio,
-            permissions,
-            purchases {
-                courseId,
-                completedLessons,
-                accessibleGroups
-            }
-            avatar {
-                    mediaId,
-                    originalFileName,
-                    mimeType,
-                    size,
-                    access,
-                    file,
-                    thumbnail,
-                    caption
-                },
-            }
-        }
-        `;
-    const fetch = new FetchBuilder()
-        .setUrl(`${backend}/api/graph`)
-        .setPayload(query)
-        .setIsGraphQLEndpoint(true)
-        .build();
-
-    try {
-        const response = await fetch.exec();
-        return response.profile;
-    } catch (e: any) {
-        console.log("getProfile", e.message); // eslint-disable-line no-console
-        return null;
-    }
-};
-
 export const isEnrolled = (courseId: string, profile: Profile) =>
     profile.purchases.some((purchase: any) => purchase.courseId === courseId);
 
diff --git a/jest.config.js b/jest.config.js
index 09c3a17fd..5b8205b44 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,6 @@
 module.exports = {
-    projects: ["<rootDir>/apps/web/jest.config.ts"],
+    projects: [
+        "<rootDir>/apps/web/jest.client.config.ts",
+        "<rootDir>/apps/web/jest.server.config.ts",
+    ],
 };
diff --git a/packages/common-logic/src/models/course.ts b/packages/common-logic/src/models/course.ts
index c52a1fb31..1e7786bf8 100644
--- a/packages/common-logic/src/models/course.ts
+++ b/packages/common-logic/src/models/course.ts
@@ -19,6 +19,7 @@ export interface InternalCourse extends Omit<Course, "paymentPlans"> {
     lessons: any[];
     sales: number;
     customers: string[];
+    certificate?: boolean;
 }
 
 export const CourseSchema = new mongoose.Schema<InternalCourse>(
@@ -80,6 +81,7 @@ export const CourseSchema = new mongoose.Schema<InternalCourse>(
         // paymentPlans: [String],
         defaultPaymentPlan: { type: String },
         leadMagnet: { type: Boolean, required: true, default: false },
+        certificate: Boolean,
     },
     {
         timestamps: true,
diff --git a/packages/common-logic/src/models/user/progress.ts b/packages/common-logic/src/models/user/progress.ts
index a7e98cb24..8500734e2 100644
--- a/packages/common-logic/src/models/user/progress.ts
+++ b/packages/common-logic/src/models/user/progress.ts
@@ -7,6 +7,8 @@ export const ProgressSchema = new mongoose.Schema<Progress>(
         completedLessons: { type: [String] },
         downloaded: { type: Boolean },
         accessibleGroups: { type: [String] },
+        lastDripAt: { type: Date },
+        certificateId: { type: String },
     },
     {
         timestamps: true,
diff --git a/packages/common-models/src/progress.ts b/packages/common-models/src/progress.ts
index 4730f0f3d..28dbfa710 100644
--- a/packages/common-models/src/progress.ts
+++ b/packages/common-models/src/progress.ts
@@ -4,6 +4,7 @@ export interface Progress {
     downloaded?: boolean;
     accessibleGroups: string[];
     lastDripAt?: Date;
+    certificateId?: string;
     createdAt?: Date;
     updatedAt?: Date;
 }
diff --git a/packages/components-library/src/media-selector/index.tsx b/packages/components-library/src/media-selector/index.tsx
index cf7677752..cfa68cbc9 100644
--- a/packages/components-library/src/media-selector/index.tsx
+++ b/packages/components-library/src/media-selector/index.tsx
@@ -54,7 +54,14 @@ interface MediaSelectorProps {
     access?: Access;
     strings: Strings;
     mediaId?: string;
-    type: "course" | "lesson" | "page" | "user" | "domain" | "community";
+    type:
+        | "course"
+        | "lesson"
+        | "page"
+        | "user"
+        | "domain"
+        | "community"
+        | "certificate";
     hidePreview?: boolean;
     tooltip?: string;
     disabled?: boolean;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ce53e94d..d227828be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -327,8 +327,8 @@ importers:
         specifier: ^4.0.8
         version: 4.0.8
       lucide-react:
-        specifier: ^0.475.0
-        version: 0.475.0(react@18.3.1)
+        specifier: ^0.544.0
+        version: 0.544.0(react@18.3.1)
       mongodb:
         specifier: ^6.15.0
         version: 6.16.0(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4)
@@ -393,6 +393,9 @@ importers:
         specifier: ^3.24.1
         version: 3.24.3
     devDependencies:
+      '@shelf/jest-mongodb':
+        specifier: ^5.2.2
+        version: 5.2.2(@aws-sdk/credential-providers@3.797.0)(jest-environment-node@29.7.0)(mongodb@6.16.0(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4))(socks@2.8.4)
       '@types/bcryptjs':
         specifier: ^2.4.2
         version: 2.4.6
@@ -423,6 +426,12 @@ importers:
       eslint-config-prettier:
         specifier: ^9.0.0
         version: 9.1.0(eslint@8.48.0)
+      identity-obj-proxy:
+        specifier: ^3.0.0
+        version: 3.0.0
+      mongodb-memory-server:
+        specifier: ^10.1.4
+        version: 10.1.4(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4)
       postcss:
         specifier: ^8.4.27
         version: 8.5.3
@@ -435,6 +444,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.17(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      ts-jest:
+        specifier: ^29.4.4
+        version: 29.4.4(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest-util@29.7.0)(jest@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)))(typescript@4.9.5)
       tsconfig:
         specifier: workspace:^
         version: link:../../packages/tsconfig
@@ -4334,6 +4346,13 @@ packages:
   '@seznam/compose-react-refs@1.0.6':
     resolution: {integrity: sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==}
 
+  '@shelf/jest-mongodb@5.2.2':
+    resolution: {integrity: sha512-kQwMjswHVjxElsXhCwBxG1NncZK0GtHd8o+U/OQLx+noer4mc/mO5KD46NmmF3oRIjgfGtvf6WB2OyO1FTKAqA==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      jest-environment-node: 28.x || 29.x
+      mongodb: 3.x.x || 4.x || 5.x || 6.x
+
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -5396,6 +5415,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  bs-logger@0.2.6:
+    resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
+    engines: {node: '>= 6'}
+
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
@@ -5873,6 +5896,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
@@ -6855,6 +6887,14 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  harmony-reflect@1.6.2:
+    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -6997,6 +7037,10 @@ packages:
   idb-keyval@5.1.5:
     resolution: {integrity: sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==}
 
+  identity-obj-proxy@3.0.0:
+    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
+    engines: {node: '>=4'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -7686,6 +7730,9 @@ packages:
   lodash.isstring@4.0.1:
     resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
 
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
@@ -7730,11 +7777,6 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
-  lucide-react@0.475.0:
-    resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==}
-    peerDependencies:
-      react: ^18.3.1
-
   lucide-react@0.503.0:
     resolution: {integrity: sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==}
     peerDependencies:
@@ -8161,6 +8203,9 @@ packages:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
 
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
   new-find-package-json@2.0.0:
     resolution: {integrity: sha512-lDcBsjBSMlj3LXH2v/FW3txlh2pYTjmbOXPYJD93HI5EwuLzI11tdHSIpUMmfq/IOsldj4Ps8M8flhm+pCK4Ew==}
     engines: {node: '>=12.22.0'}
@@ -9691,6 +9736,33 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  ts-jest@29.4.4:
+    resolution: {integrity: sha512-ccVcRABct5ZELCT5U0+DZwkXMCcOCLi2doHRrKy1nK/s7J7bch6TzJMsrY09WxgUUIP/ITfmcDS8D2yl63rnXw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@jest/transform': ^29.0.0 || ^30.0.0
+      '@jest/types': ^29.0.0 || ^30.0.0
+      babel-jest: ^29.0.0 || ^30.0.0
+      esbuild: '*'
+      jest: ^29.0.0 || ^30.0.0
+      jest-util: ^29.0.0 || ^30.0.0
+      typescript: ^4.9.5
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@jest/transform':
+        optional: true
+      '@jest/types':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+      jest-util:
+        optional: true
+
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -9802,6 +9874,10 @@ packages:
     resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
     engines: {node: '>=14.16'}
 
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
   type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -9837,6 +9913,11 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
@@ -10185,6 +10266,9 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -11182,7 +11266,7 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@changesets/assemble-release-plan@6.0.8':
     dependencies:
@@ -11191,7 +11275,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@changesets/changelog-git@0.2.1':
     dependencies:
@@ -11247,7 +11331,7 @@ snapshots:
       '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       picocolors: 1.1.1
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@changesets/get-release-plan@4.0.12':
     dependencies:
@@ -12159,6 +12243,41 @@ snapshots:
       jest-util: 29.7.0
       slash: 3.0.0
 
+  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))':
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.0
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5))':
     dependencies:
       '@jest/console': 29.7.0
@@ -12439,7 +12558,7 @@ snapshots:
 
   '@linaria/logger@4.5.0':
     dependencies:
-      debug: 4.4.0
+      debug: 4.4.1
       picocolors: 1.1.1
     transitivePeerDependencies:
       - supports-color
@@ -15540,6 +15659,22 @@ snapshots:
 
   '@seznam/compose-react-refs@1.0.6': {}
 
+  '@shelf/jest-mongodb@5.2.2(@aws-sdk/credential-providers@3.797.0)(jest-environment-node@29.7.0)(mongodb@6.16.0(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4))(socks@2.8.4)':
+    dependencies:
+      debug: 4.4.1
+      jest-environment-node: 29.7.0
+      mongodb: 6.16.0(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4)
+      mongodb-memory-server: 10.1.4(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4)
+    transitivePeerDependencies:
+      - '@aws-sdk/credential-providers'
+      - '@mongodb-js/zstd'
+      - gcp-metadata
+      - kerberos
+      - mongodb-client-encryption
+      - snappy
+      - socks
+      - supports-color
+
   '@sinclair/typebox@0.27.8': {}
 
   '@sindresorhus/slugify@2.2.1':
@@ -16381,7 +16516,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@4.9.5)
       '@typescript-eslint/utils': 7.18.0(eslint@8.57.1)(typescript@4.9.5)
-      debug: 4.4.0
+      debug: 4.4.1
       eslint: 8.57.1
       ts-api-utils: 1.4.3(typescript@4.9.5)
     optionalDependencies:
@@ -16400,7 +16535,7 @@ snapshots:
       debug: 4.4.0
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.7.1
+      semver: 7.7.2
       tsutils: 3.21.0(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
@@ -16411,11 +16546,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
-      debug: 4.4.0
+      debug: 4.4.1
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-api-utils: 1.4.3(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
@@ -16432,7 +16567,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
       eslint: 8.48.0
       eslint-scope: 5.1.1
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -16447,7 +16582,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
       eslint: 8.57.1
       eslint-scope: 5.1.1
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -16574,7 +16709,7 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.4.0
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -16880,7 +17015,7 @@ snapshots:
 
   axios@1.9.0:
     dependencies:
-      follow-redirects: 1.15.9(debug@4.4.0)
+      follow-redirects: 1.15.9(debug@4.4.1)
       form-data: 4.0.2
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -17051,6 +17186,10 @@ snapshots:
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
+  bs-logger@0.2.6:
+    dependencies:
+      fast-json-stable-stringify: 2.1.0
+
   bser@2.1.1:
     dependencies:
       node-int64: 0.4.0
@@ -17079,7 +17218,7 @@ snapshots:
 
   builtins@5.1.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   bullmq@4.18.2:
     dependencies:
@@ -17349,6 +17488,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.20
 
+  create-jest@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   create-jest@29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5)):
     dependencies:
       '@jest/types': 29.6.3
@@ -17490,6 +17644,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
   decimal.js-light@2.5.1: {}
 
   decimal.js@10.5.0: {}
@@ -18524,9 +18682,9 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  follow-redirects@1.15.9(debug@4.4.0):
+  follow-redirects@1.15.9(debug@4.4.1):
     optionalDependencies:
-      debug: 4.4.0
+      debug: 4.4.1
 
   for-each@0.3.5:
     dependencies:
@@ -18683,7 +18841,7 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.7.1
+      semver: 7.7.2
       serialize-error: 7.0.1
 
   globals@11.12.0: {}
@@ -18725,6 +18883,17 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  harmony-reflect@1.6.2: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -18918,6 +19087,10 @@ snapshots:
     dependencies:
       safari-14-idb-fix: 1.0.6
 
+  identity-obj-proxy@3.0.0:
+    dependencies:
+      harmony-reflect: 1.6.2
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -19204,7 +19377,7 @@ snapshots:
       '@babel/parser': 7.27.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
@@ -19216,7 +19389,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.4.0
+      debug: 4.4.1
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -19274,6 +19447,25 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
+  jest-cli@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      exit: 0.1.2
+      import-local: 3.2.0
+      jest-config: 29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jest-cli@29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5)):
     dependencies:
       '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5))
@@ -19293,6 +19485,68 @@ snapshots:
       - supports-color
       - ts-node
 
+  jest-config@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)):
+    dependencies:
+      '@babel/core': 7.26.10
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.26.10)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0(babel-plugin-macros@3.1.0)
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 17.0.21
+      ts-node: 10.9.2(@types/node@17.0.21)(typescript@4.9.5)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-config@29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)):
+    dependencies:
+      '@babel/core': 7.26.10
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.26.10)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0(babel-plugin-macros@3.1.0)
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.19.0
+      ts-node: 10.9.2(@types/node@17.0.21)(typescript@4.9.5)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
   jest-config@29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5)):
     dependencies:
       '@babel/core': 7.26.10
@@ -19514,7 +19768,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
@@ -19554,6 +19808,18 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
+  jest@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)):
+    dependencies:
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      '@jest/types': 29.6.3
+      import-local: 3.2.0
+      jest-cli: 29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   jest@29.7.0(@types/node@20.19.0)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5)):
     dependencies:
       '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.19.0)(typescript@4.9.5))
@@ -19822,6 +20088,8 @@ snapshots:
 
   lodash.isstring@4.0.1: {}
 
+  lodash.memoize@4.1.2: {}
+
   lodash.merge@4.6.2: {}
 
   lodash.once@4.1.1: {}
@@ -19863,10 +20131,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  lucide-react@0.475.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   lucide-react@0.503.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -19889,7 +20153,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   make-error@1.3.6: {}
 
@@ -20270,7 +20534,7 @@ snapshots:
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.4.0
+      debug: 4.4.1
       decode-named-character-reference: 1.1.0
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -20352,13 +20616,13 @@ snapshots:
     dependencies:
       async-mutex: 0.5.0
       camelcase: 6.3.0
-      debug: 4.4.0
+      debug: 4.4.1
       find-cache-dir: 3.3.2
-      follow-redirects: 1.15.9(debug@4.4.0)
+      follow-redirects: 1.15.9(debug@4.4.1)
       https-proxy-agent: 7.0.6
       mongodb: 6.16.0(@aws-sdk/credential-providers@3.797.0)(socks@2.8.4)
       new-find-package-json: 2.0.0
-      semver: 7.7.1
+      semver: 7.7.2
       tar-stream: 3.1.7
       tslib: 2.8.1
       yauzl: 3.2.0
@@ -20497,9 +20761,11 @@ snapshots:
 
   negotiator@0.6.3: {}
 
+  neo-async@2.6.2: {}
+
   new-find-package-json@2.0.0:
     dependencies:
-      debug: 4.4.0
+      debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -22502,6 +22768,26 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  ts-jest@29.4.4(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest-util@29.7.0)(jest@29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5)))(typescript@4.9.5):
+    dependencies:
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      handlebars: 4.7.8
+      jest: 29.7.0(@types/node@17.0.21)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5))
+      json5: 2.2.3
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.7.2
+      type-fest: 4.41.0
+      typescript: 4.9.5
+      yargs-parser: 21.1.1
+    optionalDependencies:
+      '@babel/core': 7.26.10
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.26.10)
+      jest-util: 29.7.0
+
   ts-node@10.9.2(@types/node@17.0.21)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -22659,6 +22945,8 @@ snapshots:
 
   type-fest@3.13.1: {}
 
+  type-fest@4.41.0: {}
+
   type-is@1.6.18:
     dependencies:
       media-typer: 0.3.0
@@ -22710,6 +22998,9 @@ snapshots:
 
   typescript@4.9.5: {}
 
+  uglify-js@3.19.3:
+    optional: true
+
   unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -23110,6 +23401,8 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  wordwrap@1.0.0: {}
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0