From e3a1b7b3481cdf107eaf2a5fe385fe197ccf2f16 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@rajatsaxena.dev>
Date: Mon, 11 Aug 2025 00:42:49 +0530
Subject: [PATCH 1/3] Embed and Marquee page blocks and icons for grid blocks

---
 .../components/admin/page-editor/index.tsx    |   2 +-
 apps/web/graphql/pages/logic.ts               | 148 ++++----
 apps/web/ui-config/widgets.tsx                |  13 +-
 .../src/admin-widget-panel.tsx                |  63 +++-
 .../src/components/ui/alert.tsx               |  62 ++++
 packages/components-library/src/index.ts      |   8 +-
 .../src/page-builder-slider.tsx               |  31 +-
 .../banner/admin-widget/custom-settings.tsx   | 210 ++++++-----
 .../src/blocks/content/admin-widget.tsx       |  14 +-
 .../src/blocks/email-form/admin-widget.tsx    |  16 +-
 .../src/blocks/embed/admin-widget.tsx         | 224 ++++++++++++
 .../page-blocks/src/blocks/embed/defaults.ts  |   4 +
 .../page-blocks/src/blocks/embed/index.ts     |  10 +
 .../page-blocks/src/blocks/embed/metadata.ts  |  10 +
 .../page-blocks/src/blocks/embed/settings.ts  |   9 +
 .../page-blocks/src/blocks/embed/widget.tsx   | 104 ++++++
 .../src/blocks/faq/admin-widget/index.tsx     |  16 +-
 .../blocks/faq/admin-widget/item-editor.tsx   |  63 ++--
 .../src/blocks/featured/admin-widget.tsx      |  16 +-
 .../src/blocks/footer/admin-widget/index.tsx  |  14 +-
 .../src/blocks/grid/admin-widget/index.tsx    |  84 ++++-
 .../blocks/grid/admin-widget/item-editor.tsx  | 167 +++++----
 .../blocks/grid/admin-widget/svg-editor.tsx   | 214 ++++++++++++
 .../grid/admin-widget/svg-style-editor.tsx    | 172 +++++++++
 .../page-blocks/src/blocks/grid/helpers.ts    |  35 ++
 .../page-blocks/src/blocks/grid/settings.ts   |  15 +
 .../src/blocks/grid/widget/index.tsx          |   4 +
 .../src/blocks/grid/widget/item.tsx           |  38 +-
 .../src/blocks/header/admin-widget/index.tsx  |  16 +-
 .../src/blocks/header/widget/index.tsx        |   2 +-
 .../src/blocks/hero/admin-widget.tsx          |  18 +-
 packages/page-blocks/src/blocks/index.tsx     |   2 +
 .../src/blocks/marquee/admin-widget/index.tsx | 330 ++++++++++++++++++
 .../marquee/admin-widget/item-editor.tsx      | 108 ++++++
 .../src/blocks/marquee/defaults.ts            |  10 +
 .../page-blocks/src/blocks/marquee/index.ts   |  10 +
 .../src/blocks/marquee/metadata.ts            |  10 +
 .../src/blocks/marquee/settings.ts            |  37 ++
 .../src/blocks/marquee/widget/index.tsx       | 123 +++++++
 .../src/blocks/marquee/widget/marquee.tsx     | 105 ++++++
 .../src/blocks/media/admin-widget.tsx         |  14 +-
 .../src/blocks/pricing/admin-widget/index.tsx |  14 +-
 .../pricing/admin-widget/item-editor.tsx      | 168 ++++-----
 .../src/blocks/rich-text/admin-widget.tsx     |  14 +-
 44 files changed, 2282 insertions(+), 465 deletions(-)
 create mode 100644 packages/components-library/src/components/ui/alert.tsx
 create mode 100644 packages/page-blocks/src/blocks/embed/admin-widget.tsx
 create mode 100644 packages/page-blocks/src/blocks/embed/defaults.ts
 create mode 100644 packages/page-blocks/src/blocks/embed/index.ts
 create mode 100644 packages/page-blocks/src/blocks/embed/metadata.ts
 create mode 100644 packages/page-blocks/src/blocks/embed/settings.ts
 create mode 100644 packages/page-blocks/src/blocks/embed/widget.tsx
 create mode 100644 packages/page-blocks/src/blocks/grid/admin-widget/svg-editor.tsx
 create mode 100644 packages/page-blocks/src/blocks/grid/admin-widget/svg-style-editor.tsx
 create mode 100644 packages/page-blocks/src/blocks/grid/helpers.ts
 create mode 100644 packages/page-blocks/src/blocks/marquee/admin-widget/index.tsx
 create mode 100644 packages/page-blocks/src/blocks/marquee/admin-widget/item-editor.tsx
 create mode 100644 packages/page-blocks/src/blocks/marquee/defaults.ts
 create mode 100644 packages/page-blocks/src/blocks/marquee/index.ts
 create mode 100644 packages/page-blocks/src/blocks/marquee/metadata.ts
 create mode 100644 packages/page-blocks/src/blocks/marquee/settings.ts
 create mode 100644 packages/page-blocks/src/blocks/marquee/widget/index.tsx
 create mode 100644 packages/page-blocks/src/blocks/marquee/widget/marquee.tsx

diff --git a/apps/web/components/admin/page-editor/index.tsx b/apps/web/components/admin/page-editor/index.tsx
index ba9e47f1a..c508f8034 100644
--- a/apps/web/components/admin/page-editor/index.tsx
+++ b/apps/web/components/admin/page-editor/index.tsx
@@ -829,7 +829,7 @@ export default function PageEditor({
                                     leftPaneContent === "widgets"
                                         ? EDIT_PAGE_ADD_WIDGET_TITLE
                                         : leftPaneContent === "editor"
-                                          ? "Edit Widget"
+                                          ? "Edit Block"
                                           : leftPaneContent === "fonts"
                                             ? "Fonts"
                                             : leftPaneContent === "theme"
diff --git a/apps/web/graphql/pages/logic.ts b/apps/web/graphql/pages/logic.ts
index e601aa668..2f31225a3 100644
--- a/apps/web/graphql/pages/logic.ts
+++ b/apps/web/graphql/pages/logic.ts
@@ -265,91 +265,91 @@ export const getPages = async (
 };
 
 export const initMandatoryPages = async (domain: Domain, user: User) => {
-    await PageModel.insertMany<Page>([
+    await PageModel.bulkWrite([
         {
-            domain: domain._id,
-            pageId: defaultPages[0],
-            type: site,
-            creatorId: user.userId,
-            name: pageNames.home,
-            entityId: domain.name,
-            layout: [
-                {
-                    name: "header",
-                    deleteable: false,
-                    shared: true,
-                },
-                ...homePageTemplate,
-                {
-                    name: "footer",
-                    deleteable: false,
-                    shared: true,
+            updateOne: {
+                filter: { domain: domain._id, pageId: defaultPages[0] },
+                update: {
+                    $setOnInsert: {
+                        domain: domain._id,
+                        pageId: defaultPages[0],
+                        type: site,
+                        creatorId: user.userId,
+                        name: pageNames.home,
+                        entityId: domain.name,
+                        layout: [
+                            { name: "header", deleteable: false, shared: true },
+                            ...homePageTemplate,
+                            { name: "footer", deleteable: false, shared: true },
+                        ],
+                        draftLayout: [],
+                    },
                 },
-            ],
-            draftLayout: [],
+                upsert: true,
+            },
         },
         {
-            domain: domain._id,
-            pageId: defaultPages[2],
-            type: site,
-            creatorId: user.userId,
-            name: pageNames.privacy,
-            entityId: domain.name,
-            layout: [
-                {
-                    name: "header",
-                    deleteable: false,
-                    shared: true,
-                },
-                {
-                    name: "footer",
-                    deleteable: false,
-                    shared: true,
+            updateOne: {
+                filter: { domain: domain._id, pageId: defaultPages[2] },
+                update: {
+                    $setOnInsert: {
+                        domain: domain._id,
+                        pageId: defaultPages[2],
+                        type: site,
+                        creatorId: user.userId,
+                        name: pageNames.privacy,
+                        entityId: domain.name,
+                        layout: [
+                            { name: "header", deleteable: false, shared: true },
+                            { name: "footer", deleteable: false, shared: true },
+                        ],
+                        draftLayout: [],
+                    },
                 },
-            ],
-            draftLayout: [],
+                upsert: true,
+            },
         },
         {
-            domain: domain._id,
-            pageId: defaultPages[1],
-            type: site,
-            creatorId: user.userId,
-            name: pageNames.terms,
-            entityId: domain.name,
-            layout: [
-                {
-                    name: "header",
-                    deleteable: false,
-                    shared: true,
-                },
-                {
-                    name: "footer",
-                    deleteable: false,
-                    shared: true,
+            updateOne: {
+                filter: { domain: domain._id, pageId: defaultPages[1] },
+                update: {
+                    $setOnInsert: {
+                        domain: domain._id,
+                        pageId: defaultPages[1],
+                        type: site,
+                        creatorId: user.userId,
+                        name: pageNames.terms,
+                        entityId: domain.name,
+                        layout: [
+                            { name: "header", deleteable: false, shared: true },
+                            { name: "footer", deleteable: false, shared: true },
+                        ],
+                        draftLayout: [],
+                    },
                 },
-            ],
-            draftLayout: [],
+                upsert: true,
+            },
         },
         {
-            domain: domain._id,
-            pageId: defaultPages[3],
-            type: blogPage,
-            creatorId: user.userId,
-            name: pageNames.blog,
-            entityId: domain.name,
-            layout: [
-                {
-                    name: "header",
-                    deleteable: false,
-                    shared: true,
-                },
-                {
-                    name: "footer",
-                    deleteable: false,
-                    shared: true,
+            updateOne: {
+                filter: { domain: domain._id, pageId: defaultPages[3] },
+                update: {
+                    $setOnInsert: {
+                        domain: domain._id,
+                        pageId: defaultPages[3],
+                        type: blogPage,
+                        creatorId: user.userId,
+                        name: pageNames.blog,
+                        entityId: domain.name,
+                        layout: [
+                            { name: "header", deleteable: false, shared: true },
+                            { name: "footer", deleteable: false, shared: true },
+                        ],
+                        draftLayout: [],
+                    },
                 },
-            ],
-            draftLayout: [],
+                upsert: true,
+            },
         },
     ]);
 };
diff --git a/apps/web/ui-config/widgets.tsx b/apps/web/ui-config/widgets.tsx
index 3e54d2125..535cfcf2d 100644
--- a/apps/web/ui-config/widgets.tsx
+++ b/apps/web/ui-config/widgets.tsx
@@ -12,12 +12,14 @@ import {
     FAQ,
     Pricing,
     Media,
+    Marquee,
+    Embed,
 } from "@courselit/page-blocks";
 
 function loadWidgets(): Record<string, any> {
     const widgets: Record<string, Widget> = {};
 
-    // Add common widgets to CourseLit
+    // Adding page blocks to CourseLit
     widgets[RichText.metadata.name] = RichText;
     widgets[Featured.metadata.name] = Featured;
     widgets[Banner.metadata.name] = Banner;
@@ -27,14 +29,11 @@ function loadWidgets(): Record<string, any> {
     widgets[FAQ.metadata.name] = FAQ;
     widgets[Pricing.metadata.name] = Pricing;
     widgets[Media.metadata.name] = Media;
+    widgets[Marquee.metadata.name] = Marquee;
+    widgets[Embed.metadata.name] = Embed;
+    widgets[EmailForm.metadata.name] = EmailForm;
     widgets[Footer.metadata.name] = Object.assign({}, Footer, { shared: true });
     widgets[Header.metadata.name] = Object.assign({}, Header, { shared: true });
-    widgets[EmailForm.metadata.name] = Object.assign({}, EmailForm, {
-        shared: true,
-    });
-
-    // Additional widgets are added here
-    // widgets[buttondown.metadata.name] = buttondown;
 
     return widgets;
 }
diff --git a/packages/components-library/src/admin-widget-panel.tsx b/packages/components-library/src/admin-widget-panel.tsx
index 21ec4f2f3..963ededdd 100644
--- a/packages/components-library/src/admin-widget-panel.tsx
+++ b/packages/components-library/src/admin-widget-panel.tsx
@@ -1,21 +1,74 @@
 import * as React from "react";
 import Section from "./section";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "./components/ui/accordion";
+
+interface AdminWidgetPanelContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+}
+
+export function AdminWidgetPanelContainer({
+    children,
+    className = "",
+    type = "multiple",
+    defaultValue,
+}: AdminWidgetPanelContainerProps) {
+    return (
+        <div className={`flex flex-col gap-4 mb-4 ${className}`}>
+            {type === "single" ? (
+                <Accordion
+                    type="single"
+                    collapsible
+                    defaultValue={defaultValue as string}
+                >
+                    {children}
+                </Accordion>
+            ) : (
+                <Accordion
+                    type="multiple"
+                    defaultValue={defaultValue as string[]}
+                >
+                    {children}
+                </Accordion>
+            )}
+        </div>
+    );
+}
 
 interface AdminWidgetPanelProps {
     title?: string;
     children: React.ReactNode;
     className?: string;
+    value: string;
+    defaultExpanded?: boolean;
 }
 
-export default function AdminWidgetPanel({
+export function AdminWidgetPanel({
     title,
     children,
     className = "",
+    value,
 }: AdminWidgetPanelProps) {
+    if (!title) {
+        // If no title, render as non-collapsible section
+        return <Section className={className}>{children}</Section>;
+    }
+
     return (
-        <Section className={className}>
-            {title && <h2 className="text-lg font-semibold">{title}</h2>}
-            {children}
-        </Section>
+        <AccordionItem value={value} className={className}>
+            <AccordionTrigger className="text-base hover:no-underline">
+                {title}
+            </AccordionTrigger>
+            <AccordionContent className="flex flex-col gap-4">
+                {children}
+            </AccordionContent>
+        </AccordionItem>
     );
 }
diff --git a/packages/components-library/src/components/ui/alert.tsx b/packages/components-library/src/components/ui/alert.tsx
new file mode 100644
index 000000000..f9fee9e55
--- /dev/null
+++ b/packages/components-library/src/components/ui/alert.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+    "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h5
+        ref={ref}
+        className={cn(
+            "mb-1 font-medium leading-none tracking-tight",
+            className,
+        )}
+        {...props}
+    />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        {...props}
+    />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/components-library/src/index.ts b/packages/components-library/src/index.ts
index 2a09825e6..2c37c6571 100644
--- a/packages/components-library/src/index.ts
+++ b/packages/components-library/src/index.ts
@@ -11,7 +11,6 @@ import TextEditor, { emptyDoc as TextEditorEmptyDoc } from "./text-editor";
 import TextRenderer from "./text-renderer";
 import LessonIcon from "./lesson-icon";
 import ColorSelector from "./color-selector";
-import AdminWidgetPanel from "./admin-widget-panel";
 import Button from "./button";
 import IconButton from "./icon-button";
 import Form from "./form";
@@ -41,14 +40,17 @@ import Tooltip from "./tooltip";
 import DragAndDrop from "./drag-and-drop";
 
 export { Button as Button2 } from "./components/ui/button";
-export * from "./menu";
 export * from "./components/ui/avatar";
 export * from "./components/ui/accordion";
 export * from "./components/ui/slider";
 export * from "./components/ui/card";
 export * from "./components/ui/badge";
 export * from "./components/ui/skeleton";
+export * from "./components/ui/textarea";
+export * from "./components/ui/alert";
 
+export * from "./admin-widget-panel";
+export * from "./menu";
 export * from "./toast2";
 export * from "./paginated-table";
 import getSymbolFromCurrency from "currency-symbol-map";
@@ -58,6 +60,7 @@ export * from "./video-with-preview";
 export * from "./image";
 export * from "./vertical-padding-selector";
 export * from "./max-width-selector";
+export * from "./lib/utils";
 
 export {
     PriceTag,
@@ -72,7 +75,6 @@ export {
     TextRenderer,
     LessonIcon,
     ColorSelector,
-    AdminWidgetPanel,
     Button,
     IconButton,
     Form,
diff --git a/packages/components-library/src/page-builder-slider.tsx b/packages/components-library/src/page-builder-slider.tsx
index a1083f7d6..a806e7a1e 100644
--- a/packages/components-library/src/page-builder-slider.tsx
+++ b/packages/components-library/src/page-builder-slider.tsx
@@ -1,5 +1,6 @@
 import { Help } from "@courselit/icons";
 import { Slider } from "./components/ui/slider";
+import { Input } from "./components/ui/input";
 import Tooltip from "./tooltip";
 import { X } from "lucide-react";
 import IconButton from "./icon-button";
@@ -34,10 +35,32 @@ export default function PageBuilderSlider({
                         </Tooltip>
                     )}
                 </div>
-                <div className="flex gap-2">
-                    <p className="text-xs bg-gray-100 p-1 rounded border">
-                        {value}
-                    </p>
+                <div className="flex gap-2 items-center">
+                    <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2">
+                            <Input
+                                type="number"
+                                inputMode="numeric"
+                                min={min}
+                                max={max}
+                                value={Number.isFinite(value) ? value : 0}
+                                onChange={(e) => {
+                                    const raw = e.currentTarget.value;
+                                    const parsed = Number(raw);
+                                    if (Number.isNaN(parsed)) return;
+                                    const clamped = Math.min(
+                                        Math.max(parsed, min),
+                                        max,
+                                    );
+                                    onChange(clamped);
+                                }}
+                                className="h-7 w-16 rounded-md border px-2 py-1 text-xs text-center bg-gray-50"
+                            />
+                            <span className="text-xs text-muted-foreground">
+                                px
+                            </span>
+                        </div>
+                    </div>
                     {allowsReset && (
                         <Tooltip title="Reset">
                             <IconButton
diff --git a/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx b/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
index 276eddfb8..ec9b070fa 100644
--- a/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
+++ b/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
@@ -5,6 +5,7 @@ import {
     TextEditor,
     Select,
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Form,
     FormField,
     VerticalPaddingSelector,
@@ -115,128 +116,121 @@ export default function CustomSettings({
     ]);
 
     return (
-        <div className="flex flex-col">
-            <div className="mb-4">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["basic", "call-to-action", "design"]}
+        >
+            <AdminWidgetPanel title="Basic" value="basic">
                 <Form
                     onSubmit={(e: React.FormEvent) => {
                         e.preventDefault();
                     }}
                 >
-                    <AdminWidgetPanel title="Basic">
-                        <FormField
-                            value={title}
-                            label="Custom title"
-                            onChange={(e) => setTitle(e.target.value)}
+                    <FormField
+                        value={title}
+                        label="Custom title"
+                        onChange={(e) => setTitle(e.target.value)}
+                    />
+                    <div>
+                        <p className="mb-1 font-medium">Custom description</p>
+                        <TextEditor
+                            initialContent={description}
+                            onChange={(state: any) => setDescription(state)}
+                            showToolbar={false}
+                            url={address.backend}
                         />
-                        <div>
-                            <p className="mb-1 font-medium">
-                                Custom description
-                            </p>
-                            <TextEditor
-                                initialContent={description}
-                                onChange={(state: any) => setDescription(state)}
-                                showToolbar={false}
-                                url={address.backend}
-                            />
-                        </div>
-                    </AdminWidgetPanel>
+                    </div>
                 </Form>
-            </div>
-            <div className="mb-4">
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Call to action" value="call-to-action">
                 <Form>
-                    <AdminWidgetPanel title="Call to action">
+                    <FormField
+                        value={buttonCaption}
+                        label="Button caption"
+                        onChange={(e) => setButtonCaption(e.target.value)}
+                    />
+                    {type === "site" && (
                         <FormField
-                            value={buttonCaption}
-                            label="Button caption"
-                            onChange={(e) => setButtonCaption(e.target.value)}
+                            value={buttonAction}
+                            label="Button Action (URL)"
+                            onChange={(e) => setButtonAction(e.target.value)}
                         />
-                        {type === "site" && (
+                    )}
+                    {isLeadMagnet && (
+                        <>
+                            <div>
+                                <p className="mb-1 font-medium">
+                                    Success message
+                                </p>
+                                <TextEditor
+                                    initialContent={successMessage}
+                                    onChange={(state: any) =>
+                                        setSuccessMessage(state)
+                                    }
+                                    showToolbar={false}
+                                    url={address.backend}
+                                />
+                            </div>
                             <FormField
-                                value={buttonAction}
-                                label="Button Action (URL)"
+                                label="Failure message"
+                                value={failureMessage}
+                                placeholder={DEFAULT_FAILURE_MESSAGE}
                                 onChange={(e) =>
-                                    setButtonAction(e.target.value)
+                                    setFailureMessage(e.target.value)
                                 }
                             />
-                        )}
-                        {isLeadMagnet && (
-                            <>
-                                <div>
-                                    <p className="mb-1 font-medium">
-                                        Success message
-                                    </p>
-                                    <TextEditor
-                                        initialContent={successMessage}
-                                        onChange={(state: any) =>
-                                            setSuccessMessage(state)
-                                        }
-                                        showToolbar={false}
-                                        url={address.backend}
-                                    />
-                                </div>
-                                <FormField
-                                    label="Failure message"
-                                    value={failureMessage}
-                                    placeholder={DEFAULT_FAILURE_MESSAGE}
-                                    onChange={(e) =>
-                                        setFailureMessage(e.target.value)
-                                    }
-                                />
-                                <Select
-                                    title="Editing view"
-                                    value={editingViewShowSuccess}
-                                    options={[
-                                        { label: "Before submit", value: "0" },
-                                        { label: "After submit", value: "1" },
-                                    ]}
-                                    onChange={(value: "1" | "0") =>
-                                        setEditingViewShowSuccess(value)
-                                    }
-                                />
-                            </>
-                        )}
-                    </AdminWidgetPanel>
+                            <Select
+                                title="Editing view"
+                                value={editingViewShowSuccess}
+                                options={[
+                                    { label: "Before submit", value: "0" },
+                                    { label: "After submit", value: "1" },
+                                ]}
+                                onChange={(value: "1" | "0") =>
+                                    setEditingViewShowSuccess(value)
+                                }
+                            />
+                        </>
+                    )}
                 </Form>
-            </div>
-            <div className="mb-4">
-                <AdminWidgetPanel title="Design">
-                    <Select
-                        title="Text content position"
-                        value={alignment}
-                        options={[
-                            { label: "Top", value: "top" },
-                            { label: "Bottom", value: "bottom" },
-                            { label: "Left", value: "left" },
-                            { label: "Right", value: "right" },
-                        ]}
-                        onChange={(
-                            value: "top" | "bottom" | "left" | "right",
-                        ) => setAlignment(value)}
-                    />
-                    <Select
-                        title="Text alignment"
-                        value={textAlignment}
-                        options={[
-                            { label: "Left", value: "left" },
-                            { label: "Center", value: "center" },
-                            { label: "Right", value: "right" },
-                        ]}
-                        onChange={(value: Alignment) => setTextAlignment(value)}
-                    />
-                    <MaxWidthSelector value={maxWidth} onChange={setMaxWidth} />
-                    <VerticalPaddingSelector
-                        value={verticalPadding}
-                        onChange={setVerticalPadding}
-                    />
-                    <PageBuilderSlider
-                        title="Media border radius"
-                        value={mediaBorderRadius}
-                        min={0}
-                        max={8}
-                        onChange={setMediaBorderRadius}
-                    />
-                </AdminWidgetPanel>
-            </div>
-        </div>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Design" value="design">
+                <Select
+                    title="Text content position"
+                    value={alignment}
+                    options={[
+                        { label: "Top", value: "top" },
+                        { label: "Bottom", value: "bottom" },
+                        { label: "Left", value: "left" },
+                        { label: "Right", value: "right" },
+                    ]}
+                    onChange={(value: "top" | "bottom" | "left" | "right") =>
+                        setAlignment(value)
+                    }
+                />
+                <Select
+                    title="Text alignment"
+                    value={textAlignment}
+                    options={[
+                        { label: "Left", value: "left" },
+                        { label: "Center", value: "center" },
+                        { label: "Right", value: "right" },
+                    ]}
+                    onChange={(value: Alignment) => setTextAlignment(value)}
+                />
+                <MaxWidthSelector value={maxWidth} onChange={setMaxWidth} />
+                <VerticalPaddingSelector
+                    value={verticalPadding}
+                    onChange={setVerticalPadding}
+                />
+                <PageBuilderSlider
+                    title="Media border radius"
+                    value={mediaBorderRadius}
+                    min={0}
+                    max={8}
+                    onChange={setMediaBorderRadius}
+                />
+            </AdminWidgetPanel>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/content/admin-widget.tsx b/packages/page-blocks/src/blocks/content/admin-widget.tsx
index 1c3ce48d6..164938a15 100644
--- a/packages/page-blocks/src/blocks/content/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/content/admin-widget.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Settings from "./settings";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     Form,
@@ -51,8 +52,11 @@ export default function AdminWidget({
     }, [title, description, headerAlignment, maxWidth, verticalPadding, cssId]);
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Header">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["header", "design"]}
+        >
+            <AdminWidgetPanel title="Header" value="header">
                 <Form>
                     <FormField
                         label="Title"
@@ -79,16 +83,16 @@ export default function AdminWidget({
                     onChange={(value: Alignment) => setHeaderAlignment(value)}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <MaxWidthSelector value={maxWidth} onChange={setMaxWidth} />
                 <VerticalPaddingSelector
                     value={verticalPadding}
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/email-form/admin-widget.tsx b/packages/page-blocks/src/blocks/email-form/admin-widget.tsx
index dd426fa72..503dd9516 100644
--- a/packages/page-blocks/src/blocks/email-form/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/email-form/admin-widget.tsx
@@ -4,6 +4,7 @@ import { AppDispatch } from "@courselit/state-management";
 import type Settings from "./settings";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     Form,
     FormField,
@@ -77,8 +78,11 @@ export default function AdminWidget({
     ]);
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Basic">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["basic", "call-to-action", "design"]}
+        >
+            <AdminWidgetPanel title="Basic" value="basic">
                 <Form>
                     <FormField
                         label="Title"
@@ -105,7 +109,7 @@ export default function AdminWidget({
                     />
                 </Form>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Call to action">
+            <AdminWidgetPanel title="Call to action" value="call-to-action">
                 <Form
                     onSubmit={(e) => {
                         e.preventDefault();
@@ -119,7 +123,7 @@ export default function AdminWidget({
                     />
                 </Form>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     value={alignment}
                     title="Alignment"
@@ -138,9 +142,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/embed/admin-widget.tsx b/packages/page-blocks/src/blocks/embed/admin-widget.tsx
new file mode 100644
index 000000000..8f82110c8
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/admin-widget.tsx
@@ -0,0 +1,224 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import Settings from "./settings";
+import {
+    aspectRatio as defaultAspectRatio,
+    height as defaultHeight,
+} from "./defaults";
+import {
+    CssIdField,
+    AdminWidgetPanel,
+    AdminWidgetPanelContainer,
+    Form,
+    FormField,
+    Select,
+    Textarea,
+    AlertTitle,
+    AlertDescription,
+    Alert,
+    VerticalPaddingSelector,
+    MaxWidthSelector,
+} from "@courselit/components-library";
+import { AlertCircle, Lightbulb } from "lucide-react";
+import { Theme, ThemeStyle } from "@courselit/page-models";
+
+// Helper functions for content detection
+const hasYouTubeContent = (content: string): boolean => {
+    const lowerContent = content.toLowerCase();
+    return (
+        lowerContent.includes("youtube.com") ||
+        lowerContent.includes("youtu.be") ||
+        lowerContent.includes("youtube-nocookie.com") ||
+        lowerContent.includes("youtube.com/embed/")
+    );
+};
+
+const hasVimeoContent = (content: string): boolean => {
+    const lowerContent = content.toLowerCase();
+    return (
+        lowerContent.includes("vimeo.com") ||
+        lowerContent.includes("player.vimeo.com")
+    );
+};
+
+export default function AdminWidget({
+    settings,
+    onChange,
+    theme,
+}: {
+    settings: Settings;
+    onChange: (...args: any[]) => void;
+    theme: Theme;
+}) {
+    const [contentType, setContentType] = useState(
+        settings.contentType || "script",
+    );
+    const [content, setContent] = useState(settings.content);
+    const [aspectRatio, setAspectRatio] = useState(
+        settings.aspectRatio || defaultAspectRatio,
+    );
+    const [height, setHeight] = useState(settings.height || defaultHeight);
+    const [maxWidth, setMaxWidth] = useState<
+        ThemeStyle["structure"]["page"]["width"]
+    >(settings.maxWidth);
+    const [verticalPadding, setVerticalPadding] = useState<
+        ThemeStyle["structure"]["section"]["padding"]["y"]
+    >(settings.verticalPadding);
+    const [cssId, setCssId] = useState(settings.cssId);
+
+    useEffect(() => {
+        onChange({
+            contentType,
+            content,
+            aspectRatio,
+            height,
+            maxWidth,
+            verticalPadding,
+            cssId,
+        });
+    }, [
+        contentType,
+        content,
+        aspectRatio,
+        height,
+        maxWidth,
+        verticalPadding,
+        cssId,
+    ]);
+
+    return (
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["content", "design"]}
+        >
+            <Alert variant="destructive" className="mb-4">
+                <AlertTitle>
+                    <span className="flex items-center gap-2">
+                        <AlertCircle className="w-4 h-4" /> Beware
+                    </span>
+                </AlertTitle>
+                <AlertDescription className="text-sm">
+                    Embedding external content may have security implications.
+                    Only embed content from trusted sources.
+                </AlertDescription>
+            </Alert>
+            <AdminWidgetPanel title="Content" value="content">
+                <Form className="flex flex-col gap-4">
+                    <Select
+                        title="Type"
+                        value={contentType}
+                        onChange={(value?: string) =>
+                            setContentType(value as "url" | "script")
+                        }
+                        options={[
+                            { label: "URL", value: "url" },
+                            { label: "Script", value: "script" },
+                        ]}
+                    />
+
+                    {contentType === "url" && (
+                        <FormField
+                            label="URL"
+                            value={content}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                setContent(e.target.value)
+                            }
+                        />
+                    )}
+
+                    {contentType === "script" && (
+                        <div className="flex flex-col gap-2">
+                            <label className="mb-1 font-semibold">Script</label>
+                            <Textarea
+                                value={content}
+                                rows={10}
+                                onChange={(
+                                    e: ChangeEvent<HTMLTextAreaElement>,
+                                ) => setContent(e.target.value)}
+                            />
+                            {content
+                                ?.trim()
+                                .toLowerCase()
+                                .startsWith("<iframe") && (
+                                <Alert className="text-xs">
+                                    <Lightbulb className="w-4 h-4" />
+                                    <AlertDescription>
+                                        For iframes, please set the height and
+                                        width in the code to 100% for the best
+                                        experience.
+                                    </AlertDescription>
+                                </Alert>
+                            )}
+                            {content?.trim() &&
+                                (() => {
+                                    const hasYouTube =
+                                        hasYouTubeContent(content);
+                                    const hasVimeo = hasVimeoContent(content);
+
+                                    if (hasYouTube || hasVimeo) {
+                                        return (
+                                            <Alert className="text-xs">
+                                                <AlertCircle className="w-4 h-4" />
+                                                <AlertDescription>
+                                                    {hasYouTube && hasVimeo
+                                                        ? "For YouTube and Vimeo content, consider using the Media block instead for better integration."
+                                                        : hasYouTube
+                                                          ? "For YouTube content, consider using the Media block instead for better integration."
+                                                          : "For Vimeo content, consider using the Media block instead for better integration."}
+                                                </AlertDescription>
+                                            </Alert>
+                                        );
+                                    }
+                                    return null;
+                                })()}
+                        </div>
+                    )}
+                </Form>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Design" value="design">
+                <Form
+                    className="flex flex-col gap-4"
+                    onSubmit={(e) => e.preventDefault()}
+                >
+                    <Select
+                        title="Aspect ratio"
+                        value={aspectRatio}
+                        onChange={(value?: string) =>
+                            setAspectRatio(value as "16:9" | "4:3" | "1:1")
+                        }
+                        options={[
+                            { label: "Default", value: "default" },
+                            { label: "16:9", value: "16:9" },
+                            { label: "4:3", value: "4:3" },
+                            { label: "1:1", value: "1:1" },
+                        ]}
+                    />
+                    {aspectRatio === "default" && (
+                        <FormField
+                            label="Height"
+                            type="number"
+                            value={height}
+                            min={0}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                setHeight(Number(e.target.value))
+                            }
+                        />
+                    )}
+                </Form>
+                <MaxWidthSelector
+                    value={maxWidth || theme.theme.structure.page.width}
+                    onChange={setMaxWidth}
+                />
+                <VerticalPaddingSelector
+                    value={
+                        verticalPadding ||
+                        theme.theme.structure.section.padding.y
+                    }
+                    onChange={setVerticalPadding}
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Advanced" value="advanced">
+                <CssIdField value={cssId} onChange={setCssId} />
+            </AdminWidgetPanel>
+        </AdminWidgetPanelContainer>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/embed/defaults.ts b/packages/page-blocks/src/blocks/embed/defaults.ts
new file mode 100644
index 000000000..e2587b6eb
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/defaults.ts
@@ -0,0 +1,4 @@
+export const horizontalPadding = 100;
+export const verticalPadding = 50;
+export const height = 500;
+export const aspectRatio = "default";
diff --git a/packages/page-blocks/src/blocks/embed/index.ts b/packages/page-blocks/src/blocks/embed/index.ts
new file mode 100644
index 000000000..9a89ef665
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/index.ts
@@ -0,0 +1,10 @@
+import AdminWidget from "./admin-widget";
+import metadata from "./metadata";
+import Widget from "./widget";
+import { Widget as WidgetType } from "@courselit/common-models";
+
+export const Embed: WidgetType = {
+    widget: Widget,
+    metadata,
+    adminWidget: AdminWidget,
+};
diff --git a/packages/page-blocks/src/blocks/embed/metadata.ts b/packages/page-blocks/src/blocks/embed/metadata.ts
new file mode 100644
index 000000000..b29b94ae4
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/metadata.ts
@@ -0,0 +1,10 @@
+import { WidgetMetadata, Constants } from "@courselit/common-models";
+const { PageType } = Constants;
+
+const metadata: WidgetMetadata = {
+    name: "embed",
+    displayName: "Embed",
+    compatibleWith: [PageType.PRODUCT, PageType.SITE, PageType.COMMUNITY],
+};
+
+export default metadata;
diff --git a/packages/page-blocks/src/blocks/embed/settings.ts b/packages/page-blocks/src/blocks/embed/settings.ts
new file mode 100644
index 000000000..9feb98adb
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/settings.ts
@@ -0,0 +1,9 @@
+import { WidgetDefaultSettings } from "@courselit/common-models";
+
+export default interface Settings extends WidgetDefaultSettings {
+    contentType: "url" | "script";
+    content: string;
+    aspectRatio?: "16:9" | "4:3" | "1:1" | "default";
+    height?: number;
+    cssId?: string;
+}
diff --git a/packages/page-blocks/src/blocks/embed/widget.tsx b/packages/page-blocks/src/blocks/embed/widget.tsx
new file mode 100644
index 000000000..d036cf5ae
--- /dev/null
+++ b/packages/page-blocks/src/blocks/embed/widget.tsx
@@ -0,0 +1,104 @@
+import React, { useRef, useEffect } from "react";
+import { WidgetProps } from "@courselit/common-models";
+import {
+    height as defaultHeight,
+} from "./defaults";
+import Settings from "./settings";
+import { ThemeStyle } from "@courselit/page-models";
+import { Section } from "@courselit/page-primitives";
+
+export default function Widget({
+    settings: {
+        contentType,
+        content,
+        aspectRatio,
+        height = defaultHeight,
+        cssId,
+        maxWidth,
+        verticalPadding,
+    },
+    state,
+}: WidgetProps<Settings>) {
+    const { theme } = state;
+    const overiddenTheme: ThemeStyle = JSON.parse(JSON.stringify(theme.theme));
+    overiddenTheme.structure.page.width =
+        maxWidth || theme.theme.structure.page.width;
+    overiddenTheme.structure.section.padding.y =
+        verticalPadding || theme.theme.structure.section.padding.y;
+
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const formattedHeight = `${height}px`;
+
+    const containerStyle =
+        aspectRatio && aspectRatio !== "default"
+            ? ({
+                  position: "relative",
+                  width: "100%",
+                  paddingTop: `calc(100% / (${aspectRatio.split(":")[0]} / ${aspectRatio.split(":")[1]}))`,
+              } as React.CSSProperties)
+            : ({ height: formattedHeight } as React.CSSProperties);
+
+    const iframeStyle =
+        aspectRatio && aspectRatio !== "default"
+            ? ({
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+              } as React.CSSProperties)
+            : ({ height: "100%" } as React.CSSProperties);
+
+    useEffect(() => {
+        if (contentType === "script" && content && containerRef.current) {
+            const tempContainer = document.createElement("div");
+            tempContainer.innerHTML = content;
+
+            // Append all elements to the container
+            Array.from(tempContainer.children).forEach((elem) => {
+                if (elem.nodeName === "SCRIPT") {
+                    const script = document.createElement("script");
+                    script.innerHTML = elem.innerHTML;
+                    Array.from(elem.attributes).forEach((attr) => {
+                        script.setAttribute(attr.name, attr.value);
+                    });
+                    containerRef.current?.appendChild(script);
+                } else {
+                    containerRef.current?.appendChild(elem.cloneNode(true));
+                }
+            });
+        }
+    }, [contentType, content]);
+
+    return (
+        <Section theme={overiddenTheme} id={cssId}>
+            <div className="mx-auto lg:max-w-[1200px]">
+                <div className={`flex flex-col px-4 w-full mx-auto`}>
+                    <div
+                        className={`w-full overflow-hidden relative`}
+                        style={containerStyle}
+                    >
+                        {contentType === "script" ? (
+                            <div
+                                ref={containerRef}
+                                className="w-full h-full"
+                                style={iframeStyle}
+                            />
+                        ) : (
+                            <iframe
+                                ref={iframeRef}
+                                src={content}
+                                className="w-full border-0"
+                                style={iframeStyle}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowFullScreen
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Section>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx b/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
index 82dd1353d..64c0a0f0a 100644
--- a/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
@@ -6,6 +6,7 @@ import { Theme, ThemeStyle } from "@courselit/page-models";
 import { AppDispatch } from "@courselit/state-management";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     Button,
@@ -159,8 +160,11 @@ export default function AdminWidget({
     }
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Header">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["header", "items", "design"]}
+        >
+            <AdminWidgetPanel title="Header" value="header">
                 <Form>
                     <FormField
                         label="Title"
@@ -178,7 +182,7 @@ export default function AdminWidget({
                     </div>
                 </Form>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Items">
+            <AdminWidgetPanel title="Items" value="items">
                 <ul className="flex flex-col gap-2">
                     {items.map((item: Item, index: number) => (
                         <li
@@ -200,7 +204,7 @@ export default function AdminWidget({
                     </Button>
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Header alignment"
                     value={headerAlignment}
@@ -222,9 +226,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
index ec8040075..537448c82 100644
--- a/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
@@ -6,7 +6,6 @@ import {
     Form,
     FormField,
     Tooltip,
-    AdminWidgetPanel,
 } from "@courselit/components-library";
 import { Address, Auth, Profile } from "@courselit/common-models";
 import { AppDispatch } from "@courselit/state-management";
@@ -39,39 +38,37 @@ export default function ItemEditor({
 
     return (
         <div className="flex flex-col">
-            <Form>
-                <AdminWidgetPanel title="Edit item">
-                    <FormField
-                        label="Title"
-                        value={title}
-                        onChange={(e) => setTitle(e.target.value)}
+            <Form onSubmit={(e) => e.preventDefault()}>
+                <FormField
+                    label="Title"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                />
+                <div>
+                    <p className="mb-1 font-medium">Description</p>
+                    <TextEditor
+                        initialContent={description}
+                        onChange={(state: any) => setDescription(state)}
+                        showToolbar={false}
+                        url={address.backend}
                     />
-                    <div>
-                        <p className="mb-1 font-medium">Description</p>
-                        <TextEditor
-                            initialContent={description}
-                            onChange={(state: any) => setDescription(state)}
-                            showToolbar={false}
-                            url={address.backend}
-                        />
-                    </div>
-                    <div className="flex justify-between">
-                        <Tooltip title="Delete">
-                            <Button
-                                component="button"
-                                onClick={onDelete}
-                                variant="soft"
-                            >
-                                Delete
-                            </Button>
-                        </Tooltip>
-                        <Tooltip title="Go back">
-                            <Button component="button" onClick={itemChanged}>
-                                Done
-                            </Button>
-                        </Tooltip>
-                    </div>
-                </AdminWidgetPanel>
+                </div>
+                <div className="flex justify-between">
+                    <Tooltip title="Delete">
+                        <Button
+                            component="button"
+                            onClick={onDelete}
+                            variant="soft"
+                        >
+                            Delete
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title="Go back">
+                        <Button component="button" onClick={itemChanged}>
+                            Done
+                        </Button>
+                    </Tooltip>
+                </div>
             </Form>
         </div>
     );
diff --git a/packages/page-blocks/src/blocks/featured/admin-widget.tsx b/packages/page-blocks/src/blocks/featured/admin-widget.tsx
index 0fe86e121..0361dfead 100644
--- a/packages/page-blocks/src/blocks/featured/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/featured/admin-widget.tsx
@@ -5,6 +5,7 @@ import { capitalize, FetchBuilder } from "@courselit/utils";
 import { actionCreators, AppDispatch } from "@courselit/state-management";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     IconButton,
@@ -135,8 +136,11 @@ export default function AdminWidget({
     };
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Header">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["header", "products", "design"]}
+        >
+            <AdminWidgetPanel title="Header" value="header">
                 <Form>
                     <FormField
                         value={title}
@@ -171,7 +175,7 @@ export default function AdminWidget({
                 </div>
             )}
             {productsLoaded && (
-                <AdminWidgetPanel title="Products">
+                <AdminWidgetPanel title="Products" value="products">
                     <Select
                         title="Select a product"
                         value={""}
@@ -213,7 +217,7 @@ export default function AdminWidget({
                     </ul>
                 </AdminWidgetPanel>
             )}
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <MaxWidthSelector
                     value={maxWidth || theme.theme.structure.page.width}
                     onChange={setMaxWidth}
@@ -226,9 +230,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/footer/admin-widget/index.tsx b/packages/page-blocks/src/blocks/footer/admin-widget/index.tsx
index d8ba1f0d7..a458d37db 100644
--- a/packages/page-blocks/src/blocks/footer/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/footer/admin-widget/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import type Settings from "../settings";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Button,
     IconButton,
     PageBuilderSlider,
@@ -154,8 +155,11 @@ export default function AdminWidget({
     };
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Sections">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["sections", "design", "socials"]}
+        >
+            <AdminWidgetPanel title="Sections" value="sections">
                 {sections && (
                     <Accordion type="single" collapsible className="w-full">
                         {sections.map((section, sectionIndex) => (
@@ -255,7 +259,7 @@ export default function AdminWidget({
                     </Button>
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <PageBuilderSlider
                     title="Title font size"
                     value={titleFontSize}
@@ -275,7 +279,7 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Socials">
+            <AdminWidgetPanel title="Socials" value="socials">
                 <Form>
                     <FormField
                         label="Facebook"
@@ -321,6 +325,6 @@ export default function AdminWidget({
                     max={32}
                 />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
index 4910257b0..9492dcd1b 100644
--- a/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
-import Settings, { Item } from "../settings";
+import Settings, { Item, SvgStyle } from "../settings";
 import ItemEditor from "./item-editor";
 import { Address, Profile, Alignment } from "@courselit/common-models";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     Button,
@@ -14,10 +15,13 @@ import {
     MaxWidthSelector,
     VerticalPaddingSelector,
     Button2,
+    Checkbox,
+    Tooltip,
 } from "@courselit/components-library";
 import { columns as defaultColumns } from "../defaults";
 import { Theme, ThemeStyle } from "@courselit/page-models";
-import { PencilIcon } from "lucide-react";
+import { PencilIcon, WandSparkles, HelpCircle } from "lucide-react";
+import SvgStyleEditor from "./svg-style-editor";
 
 export interface AdminWidgetProps {
     settings: Settings;
@@ -97,6 +101,20 @@ export default function AdminWidget({
     >(settings.verticalPadding);
     const [cssId, setCssId] = useState(settings.cssId);
     const [columns, setColumns] = useState(settings.columns || defaultColumns);
+    const [svgStyle, setSvgStyle] = useState<SvgStyle>(
+        settings.svgStyle || {
+            width: 36,
+            height: 36,
+            svgColor: "#000000",
+            backgroundColor: "#ffffff",
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#e2e8f0",
+        },
+    );
+    const [svgInline, setSvgInline] = useState(settings.svgInline || false);
+    const [editingSvgStyle, setEditingSvgStyle] = useState(false);
 
     const onSettingsChanged = () =>
         onChange({
@@ -111,6 +129,8 @@ export default function AdminWidget({
             verticalPadding,
             cssId,
             columns,
+            svgStyle,
+            svgInline,
         });
 
     useEffect(() => {
@@ -127,6 +147,8 @@ export default function AdminWidget({
         verticalPadding,
         cssId,
         columns,
+        svgStyle,
+        svgInline,
     ]);
 
     const onItemChange = (newItemData: Item) => {
@@ -165,13 +187,30 @@ export default function AdminWidget({
                 onDelete={onDelete}
                 profile={profile}
                 address={address}
+                svgStyle={svgStyle}
+            />
+        );
+    }
+
+    if (editingSvgStyle) {
+        return (
+            <SvgStyleEditor
+                svgStyle={svgStyle}
+                onChange={(style: SvgStyle) => {
+                    setSvgStyle(style);
+                    setEditingSvgStyle(false);
+                    hideActionButtons(false, {});
+                }}
             />
         );
     }
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Header">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["header", "call-to-action", "items", "design"]}
+        >
+            <AdminWidgetPanel title="Header" value="header">
                 <Form>
                     <FormField
                         label="Title"
@@ -198,7 +237,7 @@ export default function AdminWidget({
                     onChange={(value: Alignment) => setHeaderAlignment(value)}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Call to action">
+            <AdminWidgetPanel title="Call to action" value="call-to-action">
                 <Form>
                     <FormField
                         label="Button Text"
@@ -212,7 +251,7 @@ export default function AdminWidget({
                     />
                 </Form>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Items">
+            <AdminWidgetPanel title="Items" value="items">
                 <div className="flex flex-col gap-4">
                     {items.map((item, index) => (
                         <div
@@ -245,7 +284,7 @@ export default function AdminWidget({
                     </Button>
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Items alignment"
                     value={itemsAlignment}
@@ -273,8 +312,37 @@ export default function AdminWidget({
                     }
                     onChange={setVerticalPadding}
                 />
+                <div className="flex justify-between mt-2">
+                    <div className="flex grow items-center gap-1">
+                        <p>Icon inline</p>
+                        <Tooltip title="The icon (if used) will show inline with the item header">
+                            <HelpCircle className="w-4 h-4" />
+                        </Tooltip>
+                    </div>
+                    <Checkbox
+                        checked={svgInline}
+                        onChange={(value: boolean) => setSvgInline(value)}
+                    />
+                </div>
+                <div className="flex justify-between mt-2">
+                    <div className="flex grow items-center gap-1">
+                        <p>Icon style</p>
+                    </div>
+                    <Button2
+                        size="icon"
+                        variant="outline"
+                        onClick={() => {
+                            setEditingSvgStyle(true);
+                            hideActionButtons(true, {});
+                        }}
+                    >
+                        <WandSparkles className="w-4 h-4" />
+                    </Button2>
+                </div>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
index f9b759173..18a790202 100644
--- a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useState } from "react";
-import { Item } from "../settings";
+import { Item, SvgStyle } from "../settings";
 import {
     MediaSelector,
     TextEditor,
@@ -7,7 +9,6 @@ import {
     Form,
     FormField,
     Tooltip,
-    AdminWidgetPanel,
     Select,
 } from "@courselit/components-library";
 import {
@@ -16,9 +17,10 @@ import {
     Profile,
     VerticalAlignment,
 } from "@courselit/common-models";
-
+import SvgEditor from "./svg-editor";
 interface ItemProps {
     item: Item;
+    svgStyle: SvgStyle;
     index: number;
     onChange: (newItemData: Item) => void;
     onDelete: () => void;
@@ -28,6 +30,7 @@ interface ItemProps {
 
 export default function ItemEditor({
     item,
+    svgStyle,
     onChange,
     onDelete,
     address,
@@ -41,6 +44,17 @@ export default function ItemEditor({
     const [mediaAlignment, setMediaAlignment] = useState<VerticalAlignment>(
         item.mediaAlignment || "bottom",
     );
+    const [svgText, setSvgText] = useState(item.svgText);
+    const [deleteConfirmation, setDeleteConfirmation] = useState(false);
+
+    const onDeleteItem = () => {
+        if (deleteConfirmation) {
+            onDelete();
+        } else {
+            setDeleteConfirmation(true);
+            setTimeout(() => setDeleteConfirmation(false), 2000);
+        }
+    };
 
     const itemChanged = () =>
         onChange({
@@ -50,83 +64,88 @@ export default function ItemEditor({
             buttonAction,
             media,
             mediaAlignment,
+            svgText,
         });
 
     return (
         <div className="flex flex-col">
-            <Form>
-                <AdminWidgetPanel title="Edit item">
-                    <FormField
-                        label="Title"
-                        value={title}
-                        onChange={(e) => setTitle(e.target.value)}
-                    />
-                    <div>
-                        <p className="mb-1 font-medium">Description</p>
-                        <TextEditor
-                            initialContent={description}
-                            onChange={(state: any) => setDescription(state)}
-                            showToolbar={false}
-                            url={address.backend}
-                        />
-                    </div>
-                    <FormField
-                        label="Button Text"
-                        value={buttonCaption}
-                        onChange={(e) => setButtonCaption(e.target.value)}
+            <Form onSubmit={(e) => e.preventDefault()}>
+                <FormField
+                    label="Title"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                />
+                <div>
+                    <p className="mb-1 font-medium">Description</p>
+                    <TextEditor
+                        initialContent={description}
+                        onChange={(state: any) => setDescription(state)}
+                        showToolbar={false}
+                        url={address.backend}
                     />
-                    <FormField
-                        label="Button Action"
-                        value={buttonAction}
-                        onChange={(e) => setButtonAction(e.target.value)}
-                    />
-                    <MediaSelector
-                        title=""
-                        src={media && media.thumbnail}
-                        srcTitle={media && media.originalFileName}
-                        profile={profile}
-                        address={address}
-                        onSelection={(media: Media) => {
-                            if (media) {
-                                setMedia(media);
-                            }
-                        }}
-                        strings={{}}
-                        access="public"
-                        mediaId={media?.mediaId}
-                        onRemove={() => {
-                            setMedia({});
-                        }}
-                        type="page"
-                    />
-                    <Select
-                        title="Media alignment"
-                        value={mediaAlignment}
-                        options={[
-                            { label: "Above title", value: "top" },
-                            { label: "Below title", value: "bottom" },
-                        ]}
-                        onChange={(value: VerticalAlignment) =>
-                            setMediaAlignment(value)
+                </div>
+                <FormField
+                    label="Button Text"
+                    value={buttonCaption}
+                    onChange={(e) => setButtonCaption(e.target.value)}
+                />
+                <FormField
+                    label="Button Action"
+                    value={buttonAction}
+                    onChange={(e) => setButtonAction(e.target.value)}
+                />
+                <p className="mb-1 font-medium">Icon</p>
+                <SvgEditor
+                    svgText={svgText}
+                    svgStyle={svgStyle}
+                    onSvgChange={(svgText: string) => setSvgText(svgText)}
+                />
+                <MediaSelector
+                    title="Media"
+                    src={media && media.thumbnail}
+                    srcTitle={media && media.originalFileName}
+                    profile={profile}
+                    address={address}
+                    onSelection={(media: Media) => {
+                        if (media) {
+                            setMedia(media);
                         }
-                    />
-                    <div className="flex justify-between">
-                        <Tooltip title="Delete">
-                            <Button
-                                component="button"
-                                onClick={onDelete}
-                                variant="soft"
-                            >
-                                Delete
-                            </Button>
-                        </Tooltip>
-                        <Tooltip title="Go back">
-                            <Button component="button" onClick={itemChanged}>
-                                Done
-                            </Button>
-                        </Tooltip>
-                    </div>
-                </AdminWidgetPanel>
+                    }}
+                    strings={{}}
+                    access="public"
+                    mediaId={media?.mediaId}
+                    onRemove={() => {
+                        setMedia({});
+                    }}
+                    type="page"
+                />
+                <Select
+                    title="Media alignment"
+                    value={mediaAlignment}
+                    options={[
+                        { label: "Above title", value: "top" },
+                        { label: "Below title", value: "bottom" },
+                    ]}
+                    onChange={(value: VerticalAlignment) =>
+                        setMediaAlignment(value)
+                    }
+                />
+                <div className="flex justify-between">
+                    <Tooltip title="Delete">
+                        <Button
+                            component="button"
+                            onClick={onDelete}
+                            variant="soft"
+                        >
+                            Delete
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title="Go back">
+                        <Button component="button" onClick={itemChanged}>
+                            Done
+                        </Button>
+                    </Tooltip>
+                </div>
             </Form>
         </div>
     );
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/svg-editor.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/svg-editor.tsx
new file mode 100644
index 000000000..f5dee7916
--- /dev/null
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/svg-editor.tsx
@@ -0,0 +1,214 @@
+import React, { useState, useRef, useEffect } from "react";
+import { SvgStyle } from "../settings";
+import {
+    Alert,
+    Button2,
+    Textarea,
+    AlertDescription,
+} from "@courselit/components-library";
+import { Check, Pencil, Trash, AlertCircle } from "lucide-react";
+import { validateSvg, processedSvg } from "../helpers";
+
+export default function SvgEditor({
+    svgText,
+    svgStyle,
+    onSvgChange,
+}: {
+    svgText: string;
+    svgStyle: SvgStyle;
+    onSvgChange: (svgCode: string) => void;
+}) {
+    const [svgCode, setSvgCode] = useState<string>(svgText);
+    const [isEditing, setIsEditing] = useState<boolean>(false);
+    const [tempSvgCode, setTempSvgCode] = useState<string>(svgText);
+    const [error, setError] = useState<string | null>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+        if (isEditing && textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, [isEditing]);
+
+    useEffect(() => {
+        onSvgChange(svgCode);
+    }, [svgCode]);
+
+    const handleSvgChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setTempSvgCode(e.target.value);
+        setError(null);
+    };
+
+    // const validateSvg = (code: string): boolean => {
+    //     if (!code.trim()) return false
+
+    //     // Basic validation - check if it starts with <svg and ends with </svg>
+    //     const hasSvgTags = code.trim().startsWith("<svg") && code.trim().endsWith("</svg>")
+
+    //     if (!hasSvgTags) {
+    //         setError("Invalid SVG format. Make sure your code starts with <svg and ends with </svg>")
+    //         return false
+    //     }
+
+    //     return true
+    // }
+
+    const saveSvgChanges = () => {
+        try {
+            if (validateSvg(tempSvgCode)) {
+                setSvgCode(tempSvgCode);
+                setIsEditing(false);
+            }
+        } catch (error) {
+            setError(error.message);
+        }
+    };
+
+    const cancelEditing = () => {
+        setTempSvgCode(svgCode);
+        setIsEditing(false);
+        setError(null);
+    };
+
+    const removeSvg = () => {
+        setSvgCode("");
+        setTempSvgCode("");
+        setIsEditing(false);
+        setError(null);
+    };
+
+    //    const processedSvg = () => {
+    //     if (!validateSvg(svgCode)) return ""
+
+    //     // Replace currentColor with the selected color
+    //     return svgCode.replace(/currentColor/g, svgStyle.svgColor)
+    //   }
+
+    return !isEditing ? (
+        <div>
+            <div className="flex items-center justify-between gap-2">
+                {svgCode ? (
+                    <div className="flex justify-center items-center py-4">
+                        <div
+                            className="flex justify-center items-center"
+                            style={{
+                                width: `${svgStyle.width}px`,
+                                height: `${svgStyle.height}px`,
+                                backgroundColor: svgStyle.backgroundColor,
+                                borderRadius: `${svgStyle.borderRadius}px`,
+                                borderWidth: `${svgStyle.borderWidth}px`,
+                                borderStyle: svgStyle.borderStyle,
+                                borderColor: svgStyle.borderColor,
+                                padding: "8px",
+                            }}
+                            dangerouslySetInnerHTML={{
+                                __html:
+                                    processedSvg(svgCode, svgStyle) ||
+                                    '<div class="text-red-500">Invalid SVG</div>',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <div
+                        className="flex justify-center items-center"
+                        style={{
+                            width: `${svgStyle.width}px`,
+                            height: `${svgStyle.height}px`,
+                            backgroundColor: svgStyle.backgroundColor,
+                            borderRadius: `${svgStyle.borderRadius}px`,
+                            borderWidth: `${svgStyle.borderWidth}px`,
+                            borderStyle: svgStyle.borderStyle,
+                            borderColor: svgStyle.borderColor,
+                            padding: "8px",
+                        }}
+                        //   dangerouslySetInnerHTML={{
+                        //     __html: '<div class="text-center text-muted-foreground">No SVG added yet. Click the edit button to add SVG.</div>',
+                        //   }}
+                    ></div>
+                )}
+                <div className="flex gap-2">
+                    <Button2
+                        variant="outline"
+                        size="icon"
+                        onClick={() => {
+                            setIsEditing(true);
+                        }}
+                    >
+                        <Pencil />
+                    </Button2>
+                    {svgText && (
+                        <Button2
+                            variant="outline"
+                            size="icon"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                removeSvg();
+                            }}
+                        >
+                            <Trash />
+                        </Button2>
+                    )}
+                </div>
+            </div>
+        </div>
+    ) : (
+        <div>
+            {/* <FormField
+                label="SVG Code"
+                value={svgCode}
+                onChange={(e) => setTempSvgCode(e.target.value)}
+                multiline
+                rows={10}
+            /> */}
+            <Textarea
+                ref={textareaRef}
+                placeholder="Enter SVG code here..."
+                className="min-h-[150px] font-mono text-sm mb-4"
+                rows={10}
+                value={tempSvgCode}
+                onChange={handleSvgChange}
+            />
+            <p className="text-xs text-muted-foreground mb-4">
+                <a
+                    href="https://lucide.dev/icons/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                >
+                    Lucide icons
+                </a>{" "}
+                works the best with CourseLit.
+            </p>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertDescription>{error}</AlertDescription>
+                </Alert>
+            )}
+            <div className="flex justify-end gap-2">
+                <Button2
+                    type="button"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        cancelEditing();
+                    }}
+                    variant="outline"
+                    size="sm"
+                >
+                    Cancel
+                </Button2>
+                <Button2
+                    type="submit"
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        saveSvgChanges();
+                    }}
+                >
+                    <Check /> Save
+                </Button2>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/svg-style-editor.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/svg-style-editor.tsx
new file mode 100644
index 000000000..a2e97eac9
--- /dev/null
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/svg-style-editor.tsx
@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import {
+    Form,
+    Button,
+    Tooltip,
+    FormField,
+    ColorSelector,
+    Select,
+    PageBuilderSlider,
+} from "@courselit/components-library";
+import { SvgStyle } from "../settings";
+import { processedSvg } from "../helpers";
+
+export default function SvgStyleEditor({
+    svgStyle,
+    onChange,
+}: {
+    svgStyle: SvgStyle;
+    onChange: (svgStyle: SvgStyle) => void;
+}) {
+    const [internalSvgStyle, setInternalSvgStyle] =
+        useState<SvgStyle>(svgStyle);
+
+    return (
+        <div className="flex flex-col">
+            <Form
+                className="flex flex-col gap-4"
+                onSubmit={(e) => e.preventDefault()}
+            >
+                <div className="flex justify-center items-center py-4">
+                    <div
+                        className="flex justify-center items-center"
+                        style={{
+                            width: `${internalSvgStyle.width}px`,
+                            height: `${internalSvgStyle.height}px`,
+                            backgroundColor: internalSvgStyle.backgroundColor,
+                            borderRadius: `${internalSvgStyle.borderRadius}px`,
+                            borderWidth: `${internalSvgStyle.borderWidth}px`,
+                            borderStyle: internalSvgStyle.borderStyle,
+                            borderColor: internalSvgStyle.borderColor,
+                            padding: "8px",
+                        }}
+                        dangerouslySetInnerHTML={{
+                            __html: processedSvg(
+                                '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>',
+                                internalSvgStyle,
+                            ),
+                        }}
+                    />
+                </div>
+                <div className="flex gap-2">
+                    <FormField
+                        label="Height"
+                        type="number"
+                        max={100}
+                        min={0}
+                        value={internalSvgStyle.height}
+                        onChange={(e) =>
+                            setInternalSvgStyle({
+                                ...internalSvgStyle,
+                                height: Math.min(Number(e.target.value), 100),
+                            })
+                        }
+                        className="w-1/2"
+                    />
+                    <FormField
+                        label="Width"
+                        type="number"
+                        max={100}
+                        min={0}
+                        value={internalSvgStyle.width}
+                        onChange={(e) =>
+                            setInternalSvgStyle({
+                                ...internalSvgStyle,
+                                width: Math.min(Number(e.target.value), 100),
+                            })
+                        }
+                        className="w-1/2"
+                    />
+                </div>
+                <PageBuilderSlider
+                    title="Border width"
+                    min={0}
+                    max={10}
+                    value={internalSvgStyle.borderWidth}
+                    onChange={(value) =>
+                        setInternalSvgStyle({
+                            ...internalSvgStyle,
+                            borderWidth: value,
+                        })
+                    }
+                />
+                <PageBuilderSlider
+                    title="Border radius"
+                    min={0}
+                    max={50}
+                    value={internalSvgStyle.borderRadius}
+                    onChange={(value) =>
+                        setInternalSvgStyle({
+                            ...internalSvgStyle,
+                            borderRadius: value,
+                        })
+                    }
+                />
+                <Select
+                    title="Border style"
+                    value={internalSvgStyle.borderStyle}
+                    options={[
+                        { label: "Solid", value: "solid" },
+                        { label: "Dashed", value: "dashed" },
+                        { label: "Dotted", value: "dotted" },
+                        { label: "Double", value: "double" },
+                        { label: "None", value: "none" },
+                    ]}
+                    onChange={(
+                        value:
+                            | "solid"
+                            | "dashed"
+                            | "dotted"
+                            | "double"
+                            | "none",
+                    ) =>
+                        setInternalSvgStyle({
+                            ...internalSvgStyle,
+                            borderStyle: value,
+                        })
+                    }
+                />
+            </Form>
+            <ColorSelector
+                title="Icon color"
+                value={internalSvgStyle.svgColor}
+                onChange={(value?: string) =>
+                    setInternalSvgStyle({
+                        ...internalSvgStyle,
+                        svgColor: value as `#${string}`,
+                    })
+                }
+            />
+            <ColorSelector
+                title="Background color"
+                value={internalSvgStyle.backgroundColor}
+                onChange={(value?: string) =>
+                    setInternalSvgStyle({
+                        ...internalSvgStyle,
+                        backgroundColor: value as `#${string}`,
+                    })
+                }
+            />
+            <ColorSelector
+                title="Border color"
+                value={internalSvgStyle.borderColor}
+                onChange={(value?: string) =>
+                    setInternalSvgStyle({
+                        ...internalSvgStyle,
+                        borderColor: value as `#${string}`,
+                    })
+                }
+            />
+            <div className="flex justify-end">
+                <Tooltip title="Go back">
+                    <Button
+                        component="button"
+                        onClick={() => onChange(internalSvgStyle)}
+                    >
+                        Done
+                    </Button>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/grid/helpers.ts b/packages/page-blocks/src/blocks/grid/helpers.ts
new file mode 100644
index 000000000..6538575a7
--- /dev/null
+++ b/packages/page-blocks/src/blocks/grid/helpers.ts
@@ -0,0 +1,35 @@
+import Settings from "./settings";
+
+export const validateSvg = (code: string): boolean => {
+    if (!code.trim()) return false;
+
+    // Basic validation - check if it starts with <svg and ends with </svg>
+    const hasSvgTags =
+        code.trim().startsWith("<svg") && code.trim().endsWith("</svg>");
+
+    if (!hasSvgTags) {
+        throw new Error(
+            "Invalid SVG format. Make sure your code starts with <svg and ends with </svg>",
+        );
+    }
+
+    return true;
+};
+
+export const processedSvg = (
+    svgCode: string,
+    svgStyle: Settings["svgStyle"],
+) => {
+    if (!validateSvg(svgCode)) return "";
+
+    // Replace currentColor with the selected color
+    // For Lucide icons, replace currentColor with the selected color
+    // For other SVGs, replace the fill attribute if it exists
+    return svgCode
+        .replace(/currentColor/g, svgStyle.svgColor)
+        .replace(/fill="([^"]*)"(?!.*fill=)/g, (match, fillValue) => {
+            // Only replace the fill if it's not already set to a specific color
+            return fillValue === "none" ? match : `fill="${svgStyle.svgColor}"`;
+        })
+        .replace(/<svg/, '<svg width="100%" height="100%"');
+};
diff --git a/packages/page-blocks/src/blocks/grid/settings.ts b/packages/page-blocks/src/blocks/grid/settings.ts
index 91623e3f0..a928d6f2b 100644
--- a/packages/page-blocks/src/blocks/grid/settings.ts
+++ b/packages/page-blocks/src/blocks/grid/settings.ts
@@ -12,6 +12,18 @@ export interface Item {
     buttonAction?: string;
     media?: Partial<Media>;
     mediaAlignment?: VerticalAlignment;
+    svgText?: string;
+}
+
+export interface SvgStyle {
+    width: number;
+    height: number;
+    svgColor: `#${string}`;
+    backgroundColor: `#${string}`;
+    borderRadius: number;
+    borderWidth: number;
+    borderStyle: "solid" | "dashed" | "double" | "dotted" | "none";
+    borderColor: `#${string}`;
 }
 
 export default interface Settings extends WidgetDefaultSettings {
@@ -24,4 +36,7 @@ export default interface Settings extends WidgetDefaultSettings {
     items?: Item[];
     cssId?: string;
     columns?: number;
+    svgText?: string;
+    svgStyle?: SvgStyle;
+    svgInline?: boolean;
 }
diff --git a/packages/page-blocks/src/blocks/grid/widget/index.tsx b/packages/page-blocks/src/blocks/grid/widget/index.tsx
index 6521b092a..605ccbeb8 100644
--- a/packages/page-blocks/src/blocks/grid/widget/index.tsx
+++ b/packages/page-blocks/src/blocks/grid/widget/index.tsx
@@ -30,6 +30,8 @@ export default function Widget({
         columns = defaultColumns,
         maxWidth,
         verticalPadding,
+        svgInline,
+        svgStyle,
     },
     state: { theme },
 }: WidgetProps<Settings>): JSX.Element {
@@ -85,6 +87,8 @@ export default function Widget({
                                             item={item}
                                             alignment={itemsAlignment}
                                             theme={overiddenTheme}
+                                            svgStyle={svgStyle}
+                                            svgInline={svgInline}
                                         />
                                     </div>
                                 </div>
diff --git a/packages/page-blocks/src/blocks/grid/widget/item.tsx b/packages/page-blocks/src/blocks/grid/widget/item.tsx
index afde9b3e2..5940d8543 100644
--- a/packages/page-blocks/src/blocks/grid/widget/item.tsx
+++ b/packages/page-blocks/src/blocks/grid/widget/item.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Item } from "../settings";
+import { Item, SvgStyle } from "../settings";
 import { TextRenderer, Link } from "@courselit/components-library";
 import { Alignment } from "@courselit/common-models";
 import { ThemeStyle } from "@courselit/page-models";
@@ -11,12 +11,15 @@ import {
     PageCardImage,
     Text1,
 } from "@courselit/page-primitives";
+import { processedSvg } from "../helpers";
 
 interface ItemmProps {
     item: Item;
     alignment: Alignment;
     borderRadius?: number;
     theme: ThemeStyle;
+    svgStyle: SvgStyle;
+    svgInline: boolean;
 }
 
 export default function Itemm({
@@ -27,10 +30,12 @@ export default function Itemm({
         buttonCaption,
         media,
         mediaAlignment,
+        svgText,
     },
     alignment,
-    // borderRadius,
     theme,
+    svgStyle,
+    svgInline,
 }: ItemmProps) {
     return (
         <PageCard className="h-full" theme={theme}>
@@ -45,13 +50,32 @@ export default function Itemm({
                                 : "flex-col"
                         }`}
                     >
-                        <span
-                            className={`${
-                                alignment === "center" ? "text-center" : ""
-                            }`}
+                        <div
+                            className={`flex ${svgInline ? "flex-row gap-2 items-center" : `flex-col gap-4 ${alignment === "center" ? "items-center" : "items-start"}`}`}
                         >
+                            {svgText && (
+                                <div
+                                    className="flex justify-center items-center"
+                                    style={{
+                                        width: `${svgStyle.width}px`,
+                                        height: `${svgStyle.height}px`,
+                                        backgroundColor:
+                                            svgStyle.backgroundColor,
+                                        borderRadius: `${svgStyle.borderRadius}px`,
+                                        borderWidth: `${svgStyle.borderWidth}px`,
+                                        borderStyle: svgStyle.borderStyle,
+                                        borderColor: svgStyle.borderColor,
+                                        padding: "8px",
+                                    }}
+                                    dangerouslySetInnerHTML={{
+                                        __html:
+                                            processedSvg(svgText, svgStyle) ||
+                                            '<div class="text-red-500">Invalid SVG</div>',
+                                    }}
+                                />
+                            )}
                             {title}
-                        </span>
+                        </div>
                         {media && media.file && (
                             <div className="mb-4">
                                 <PageCardImage
diff --git a/packages/page-blocks/src/blocks/header/admin-widget/index.tsx b/packages/page-blocks/src/blocks/header/admin-widget/index.tsx
index e43743fe1..aa7cf0d59 100644
--- a/packages/page-blocks/src/blocks/header/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/header/admin-widget/index.tsx
@@ -3,6 +3,7 @@ import Settings, { Link } from "../settings";
 import LinkEditor from "./link-editor";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     Checkbox,
     Tooltip,
@@ -99,8 +100,11 @@ export default function AdminWidget({
     };
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Links">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["links", "github-repo", "design"]}
+        >
+            <AdminWidgetPanel title="Links" value="links">
                 <DragAndDrop
                     items={links.map((link: Link, index: number) => ({
                         link,
@@ -127,7 +131,7 @@ export default function AdminWidget({
                 </div>
             </AdminWidgetPanel>
 
-            <AdminWidgetPanel title="Github Repo">
+            <AdminWidgetPanel title="Github Repo" value="github-repo">
                 <Form>
                     <FormField
                         label="Github Repo"
@@ -146,7 +150,7 @@ export default function AdminWidget({
                     />
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Link font weight"
                     value={linkFontWeight}
@@ -183,7 +187,7 @@ export default function AdminWidget({
                     onChange={setMaxWidth}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Other settings">
+            <AdminWidgetPanel title="Other settings" value="other-settings">
                 <div className="flex justify-between">
                     <div className="flex grow items-center gap-1">
                         <p>Show login button</p>
@@ -199,6 +203,6 @@ export default function AdminWidget({
                     />
                 </div>
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/header/widget/index.tsx b/packages/page-blocks/src/blocks/header/widget/index.tsx
index b4928a8a1..bf01dcab1 100644
--- a/packages/page-blocks/src/blocks/header/widget/index.tsx
+++ b/packages/page-blocks/src/blocks/header/widget/index.tsx
@@ -57,7 +57,7 @@ export default function Widget({
     return (
         <Section
             theme={overiddenTheme}
-            className={clsx("sticky top-0 z-10 backdrop-blur border-b")}
+            className={clsx("sticky top-0 z-20 backdrop-blur border-b")}
             component="header"
         >
             <div className={`flex justify-between items-center w-full`}>
diff --git a/packages/page-blocks/src/blocks/hero/admin-widget.tsx b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
index e904ee0af..904fd5ed9 100644
--- a/packages/page-blocks/src/blocks/hero/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
@@ -9,6 +9,7 @@ import { Theme, ThemeStyle } from "@courselit/page-models";
 import Settings from "./settings";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     MediaSelector,
     Select,
     TextEditor,
@@ -157,8 +158,11 @@ export default function AdminWidget({
     ]);
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Basic">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["basic", "media", "calls-to-action", "design"]}
+        >
+            <AdminWidgetPanel title="Basic" value="basic">
                 <Form>
                     <FormField
                         label="Title"
@@ -176,7 +180,7 @@ export default function AdminWidget({
                     />
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Media">
+            <AdminWidgetPanel title="Media" value="media">
                 <Form>
                     <FormField
                         label="YouTube/Vimeo Link"
@@ -259,7 +263,7 @@ export default function AdminWidget({
                     onChange={(value: AspectRatio) => setAspectRatio(value)}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Calls to action">
+            <AdminWidgetPanel title="Calls to action" value="calls-to-action">
                 <Accordion type="single" collapsible>
                     <AccordionItem value="primary">
                         <AccordionTrigger>Primary button</AccordionTrigger>
@@ -307,7 +311,7 @@ export default function AdminWidget({
                     </AccordionItem>
                 </Accordion>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Style"
                     value={style}
@@ -371,9 +375,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/index.tsx b/packages/page-blocks/src/blocks/index.tsx
index eb01003f4..ec99547bd 100644
--- a/packages/page-blocks/src/blocks/index.tsx
+++ b/packages/page-blocks/src/blocks/index.tsx
@@ -10,3 +10,5 @@ export * from "./content";
 export * from "./faq";
 export * from "./pricing";
 export * from "./media";
+export * from "./marquee";
+export * from "./embed";
diff --git a/packages/page-blocks/src/blocks/marquee/admin-widget/index.tsx b/packages/page-blocks/src/blocks/marquee/admin-widget/index.tsx
new file mode 100644
index 000000000..6f1f651d4
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/admin-widget/index.tsx
@@ -0,0 +1,330 @@
+import React, { useEffect, useState } from "react";
+import Settings, { Item } from "../settings";
+import {
+    direction as defaultDirection,
+    speed as defaultSpeed,
+    pauseOnHover as defaultPauseOnHover,
+    fadeWidth as defaultFadeWidth,
+    itemBorderWidth as defaultItemBorderWidth,
+    itemBorderRadius as defaultItemBorderRadius,
+    itemBorderStyle as defaultItemBorderStyle,
+} from "../defaults";
+import {
+    CssIdField,
+    AdminWidgetPanel,
+    AdminWidgetPanelContainer,
+    ColorSelector,
+    Select,
+    PageBuilderSlider,
+    Tooltip,
+    Checkbox,
+    Button,
+    MaxWidthSelector,
+    VerticalPaddingSelector,
+} from "@courselit/components-library";
+import { Help } from "@courselit/icons";
+import ItemEditor from "./item-editor";
+import { Theme, ThemeStyle } from "@courselit/page-models";
+import { truncate } from "@courselit/utils";
+
+export default function AdminWidget({
+    settings,
+    onChange,
+    hideActionButtons,
+    preservedStateAcrossRerender,
+    theme,
+}: {
+    settings: Settings;
+    onChange: (...args: any[]) => void;
+    hideActionButtons: (
+        e: boolean,
+        preservedStateAcrossRerender: Record<string, unknown>,
+    ) => void;
+    preservedStateAcrossRerender: Record<string, unknown>;
+    theme: Theme;
+}) {
+    const [items, setItems] = useState(
+        settings.items || [
+            {
+                // title: "Item 1",
+                href: "https://courselit.app",
+                text: "Add text",
+            },
+            {
+                // title: "Item 2",
+                svgText: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-armchair-icon lucide-armchair"><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3"/><path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z"/><path d="M5 18v2"/><path d="M19 18v2"/></svg>`,
+            },
+            {
+                // title: "Item 3",
+                text: "Or SVG icons",
+            },
+            {
+                // title: "Item 4",
+                svgText: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple-icon lucide-apple"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg>`,
+            },
+        ],
+    );
+    const [scrollEffect, setScrollEffect] = useState(
+        settings.scrollEffect || {
+            direction: defaultDirection,
+            speed: defaultSpeed,
+            pauseOnHover: defaultPauseOnHover,
+        },
+    );
+    const [itemStyle, setItemStyle] = useState(
+        settings.itemStyle || {
+            backgroundColor: undefined,
+            foregroundColor: undefined,
+            borderColor: undefined,
+            borderRadius: defaultItemBorderRadius,
+            borderWidth: defaultItemBorderWidth,
+            borderStyle: defaultItemBorderStyle,
+        },
+    );
+    const [fadeEffect, setFadeEffect] = useState(
+        settings.fadeEffect || {
+            width: defaultFadeWidth,
+        },
+    );
+    const [maxWidth, setMaxWidth] = useState<
+        ThemeStyle["structure"]["page"]["width"]
+    >(settings.maxWidth);
+    const [verticalPadding, setVerticalPadding] = useState<
+        ThemeStyle["structure"]["section"]["padding"]["y"]
+    >(settings.verticalPadding);
+    const [cssId, setCssId] = useState(settings.cssId);
+    const [itemBeingEditedIndex, setItemBeingEditedIndex] = useState(-1);
+
+    useEffect(() => {
+        onChange({
+            items,
+            scrollEffect,
+            itemStyle,
+            fadeEffect,
+            maxWidth,
+            verticalPadding,
+            cssId,
+        });
+    }, [
+        items,
+        scrollEffect,
+        itemStyle,
+        fadeEffect,
+        maxWidth,
+        verticalPadding,
+        cssId,
+    ]);
+
+    const onItemChange = (newItemData: Item) => {
+        items[itemBeingEditedIndex] = newItemData;
+        setItems([...items]);
+        setItemBeingEditedIndex(-1);
+        hideActionButtons(false, {});
+    };
+
+    const onDelete = () => {
+        items.splice(itemBeingEditedIndex, 1);
+        setItems([...items]);
+        setItemBeingEditedIndex(-1);
+        hideActionButtons(false, {});
+    };
+
+    useEffect(() => {
+        if (typeof preservedStateAcrossRerender.selectedItem === "number") {
+            if (preservedStateAcrossRerender.selectedItem === items.length) {
+                setItems([...items, { text: `Item ${items.length + 1}` }]);
+            }
+            setItemBeingEditedIndex(preservedStateAcrossRerender.selectedItem);
+        }
+    }, [preservedStateAcrossRerender]);
+
+    const addNewItem = () => {
+        hideActionButtons(true, { selectedItem: items.length });
+    };
+
+    if (itemBeingEditedIndex !== -1) {
+        return (
+            <ItemEditor
+                item={items[itemBeingEditedIndex]}
+                index={itemBeingEditedIndex}
+                onChange={onItemChange}
+                onDelete={onDelete}
+            />
+        );
+    }
+
+    return (
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["content", "scroll-effect", "fade-effect", "design"]}
+        >
+            <AdminWidgetPanel title="Content" value="content">
+                <p className="text-sm text-muted-foreground mb-2">
+                    Add text or SVG Icons.
+                </p>
+                <ul className="flex flex-col gap-2 mb-2">
+                    {items.map((item: Item, index: number) => (
+                        <li
+                            key={item.text || item.svgText}
+                            onClick={() => {
+                                hideActionButtons(true, {
+                                    selectedItem: index,
+                                });
+                            }}
+                            className="p-1 border border-transparent hover:border-slate-300 rounded"
+                        >
+                            {item.svgText ? (
+                                <div
+                                    dangerouslySetInnerHTML={{
+                                        __html: item.svgText,
+                                    }}
+                                    className="w-4 h-4"
+                                />
+                            ) : (
+                                truncate(item.text, 20)
+                            )}
+                        </li>
+                    ))}
+                </ul>
+                <div>
+                    <Button onClick={addNewItem}>Add new item</Button>
+                </div>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Scroll Effect" value="scroll-effect">
+                <p className="text-sm text-muted-foreground">
+                    Control how the marquee scrolls.
+                </p>
+                <Select
+                    title="Direction"
+                    value={scrollEffect.direction}
+                    onChange={(value?: string) =>
+                        setScrollEffect({ ...scrollEffect, direction: value })
+                    }
+                    options={[
+                        { label: "Left to Right", value: "left" },
+                        { label: "Right to Left", value: "right" },
+                    ]}
+                />
+                <PageBuilderSlider
+                    title="Speed"
+                    max={100}
+                    min={10}
+                    value={scrollEffect.speed}
+                    onChange={(value?: number) =>
+                        setScrollEffect({ ...scrollEffect, speed: value })
+                    }
+                />
+                <div className="flex justify-between mt-2">
+                    <div className="flex grow items-center gap-1">
+                        <p>Pause on hover</p>
+                        <Tooltip title="The marquee will pause when the mouse is over it">
+                            <Help className="w-4 h-4" />
+                        </Tooltip>
+                    </div>
+                    <Checkbox
+                        checked={scrollEffect.pauseOnHover}
+                        onChange={(value: boolean) =>
+                            setScrollEffect({
+                                ...scrollEffect,
+                                pauseOnHover: value,
+                            })
+                        }
+                    />
+                </div>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Fade Effect" value="fade-effect">
+                <p className="text-sm text-muted-foreground">
+                    The marquee will fade out on the sides.
+                </p>
+                <PageBuilderSlider
+                    title="Fade width"
+                    max={200}
+                    min={0}
+                    value={fadeEffect.width}
+                    onChange={(value?: number) =>
+                        setFadeEffect({ ...fadeEffect, width: value })
+                    }
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Design" value="design">
+                <ColorSelector
+                    title="Item background color"
+                    value={itemStyle.backgroundColor || "inherit"}
+                    onChange={(value?: string) =>
+                        setItemStyle({ ...itemStyle, backgroundColor: value })
+                    }
+                />
+                <ColorSelector
+                    title="Item foreground color"
+                    value={itemStyle.foregroundColor || "inherit"}
+                    onChange={(value?: string) =>
+                        setItemStyle({ ...itemStyle, foregroundColor: value })
+                    }
+                />
+                <ColorSelector
+                    title="Border color"
+                    value={itemStyle.borderColor || "inherit"}
+                    onChange={(value?: string) =>
+                        setItemStyle({ ...itemStyle, borderColor: value })
+                    }
+                />
+                <PageBuilderSlider
+                    title="Border radius"
+                    min={0}
+                    max={50}
+                    value={itemStyle.borderRadius}
+                    onChange={(value?: number) =>
+                        setItemStyle({ ...itemStyle, borderRadius: value })
+                    }
+                />
+                <PageBuilderSlider
+                    title="Border width"
+                    min={0}
+                    max={10}
+                    value={itemStyle.borderWidth}
+                    onChange={(value?: number) =>
+                        setItemStyle({ ...itemStyle, borderWidth: value })
+                    }
+                />
+                <Select
+                    title="Border style"
+                    value={itemStyle.borderStyle}
+                    options={[
+                        { label: "Solid", value: "solid" },
+                        { label: "Dashed", value: "dashed" },
+                        { label: "Dotted", value: "dotted" },
+                        { label: "Double", value: "double" },
+                        { label: "None", value: "none" },
+                    ]}
+                    onChange={(
+                        value:
+                            | "solid"
+                            | "dashed"
+                            | "dotted"
+                            | "double"
+                            | "none",
+                    ) =>
+                        setItemStyle({
+                            ...itemStyle,
+                            borderStyle: value,
+                        })
+                    }
+                />
+                <MaxWidthSelector
+                    value={maxWidth || theme.theme.structure.page.width}
+                    onChange={setMaxWidth}
+                />
+                <VerticalPaddingSelector
+                    value={
+                        verticalPadding ||
+                        theme.theme.structure.section.padding.y
+                    }
+                    onChange={setVerticalPadding}
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Advanced" value="advanced">
+                <CssIdField value={cssId} onChange={setCssId} />
+            </AdminWidgetPanel>
+        </AdminWidgetPanelContainer>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/marquee/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/marquee/admin-widget/item-editor.tsx
new file mode 100644
index 000000000..1bb0d5b04
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/admin-widget/item-editor.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import {
+    Button,
+    FormField,
+    Form,
+    Tooltip,
+    Textarea,
+} from "@courselit/components-library";
+import { Item } from "../settings";
+import { ChangeEvent, useState } from "react";
+import { Lightbulb } from "lucide-react";
+
+export default function ItemEditor({
+    item,
+    index,
+    onChange,
+    onDelete,
+}: {
+    item: Item;
+    index: number;
+    onChange: (item: Item) => void;
+    onDelete: () => void;
+}) {
+    const [text, setText] = useState(item.text);
+    const [svgText, setSvgText] = useState(item.svgText);
+    const [href, setHref] = useState(item.href);
+
+    const itemChanged = () =>
+        onChange({
+            text,
+            svgText,
+            href,
+        });
+
+    return (
+        <div className="flex flex-col">
+            <Form
+                className="flex flex-col gap-4"
+                onSubmit={(e) => e.preventDefault()}
+            >
+                <FormField
+                    label="Text"
+                    value={text}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setText(e.target.value)
+                    }
+                />
+                <div className="flex items-center gap-4 my-1">
+                    <hr className="flex-grow border-t border-gray-300" />
+                    <span className="text-gray-500 text-sm font-medium">
+                        OR
+                    </span>
+                    <hr className="flex-grow border-t border-gray-300" />
+                </div>
+                <div className="flex flex-col gap-2">
+                    <label className="mb-1 font-semibold">Icon</label>
+                    <Textarea
+                        placeholder="Enter SVG text here"
+                        className="min-h-[150px] font-mono text-sm mb-4"
+                        value={svgText}
+                        rows={10}
+                        onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+                            setSvgText(e.target.value)
+                        }
+                    />
+                    <div>
+                        <p className="font-semibold text-sm">Icon preview</p>
+                        <div
+                            className="w-[100px] h-[60px] flex items-center justify-center"
+                            dangerouslySetInnerHTML={{ __html: svgText }}
+                        />
+                    </div>
+                </div>
+                <div className="text-xs text-gray-500 flex items-center gap-1">
+                    <Lightbulb className="w-4 h-4" />
+                    <p>
+                        If you use the icon option, the text option will be
+                        ignored.
+                    </p>
+                </div>
+                <FormField
+                    label="Link"
+                    tooltip="Optional link for the item"
+                    value={href}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        setHref(e.target.value)
+                    }
+                />
+            </Form>
+            <div className="flex justify-between">
+                <Tooltip title="Delete">
+                    <Button
+                        component="button"
+                        onClick={onDelete}
+                        variant="soft"
+                    >
+                        Delete
+                    </Button>
+                </Tooltip>
+                <Tooltip title="Go back">
+                    <Button component="button" onClick={itemChanged}>
+                        Done
+                    </Button>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/marquee/defaults.ts b/packages/page-blocks/src/blocks/marquee/defaults.ts
new file mode 100644
index 000000000..2fed44980
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/defaults.ts
@@ -0,0 +1,10 @@
+export const direction = "right";
+export const speed = 60;
+export const pauseOnHover = false;
+export const fadeWidth = 50;
+export const itemBackgroundColor = "";
+export const itemForegroundColor = "#000";
+export const itemBorderColor = "#ffffff00";
+export const itemBorderRadius = 12;
+export const itemBorderWidth = 1;
+export const itemBorderStyle = "solid";
diff --git a/packages/page-blocks/src/blocks/marquee/index.ts b/packages/page-blocks/src/blocks/marquee/index.ts
new file mode 100644
index 000000000..ef54c4519
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/index.ts
@@ -0,0 +1,10 @@
+import AdminWidget from "./admin-widget";
+import metadata from "./metadata";
+import { Widget as WidgetType } from "@courselit/common-models";
+import Widget from "./widget";
+
+export const Marquee: WidgetType = {
+    widget: Widget,
+    metadata,
+    adminWidget: AdminWidget,
+};
diff --git a/packages/page-blocks/src/blocks/marquee/metadata.ts b/packages/page-blocks/src/blocks/marquee/metadata.ts
new file mode 100644
index 000000000..97252e150
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/metadata.ts
@@ -0,0 +1,10 @@
+import { WidgetMetadata, Constants } from "@courselit/common-models";
+const { PageType } = Constants;
+
+const metadata: WidgetMetadata = {
+    name: "marquee",
+    displayName: "Marquee",
+    compatibleWith: [PageType.PRODUCT, PageType.SITE, PageType.COMMUNITY],
+};
+
+export default metadata;
diff --git a/packages/page-blocks/src/blocks/marquee/settings.ts b/packages/page-blocks/src/blocks/marquee/settings.ts
new file mode 100644
index 000000000..1e6b12e92
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/settings.ts
@@ -0,0 +1,37 @@
+import { WidgetDefaultSettings } from "@courselit/common-models";
+
+export interface Item {
+    // title: string;
+    href?: string;
+    text?: string;
+    svgText?: string;
+}
+
+export interface FadeEffect {
+    // enabled: boolean;
+    width: number;
+    color?: string;
+}
+
+export interface ScrollEffect {
+    speed: number;
+    direction: "left" | "right";
+    pauseOnHover: boolean;
+}
+
+export interface ItemStyle {
+    backgroundColor?: string;
+    foregroundColor?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderStyle?: "solid" | "dashed" | "dotted" | "double" | "none";
+}
+
+export default interface Settings extends WidgetDefaultSettings {
+    items: Item[];
+    scrollEffect: ScrollEffect;
+    itemStyle: ItemStyle;
+    fadeEffect: FadeEffect;
+    cssId?: string;
+}
diff --git a/packages/page-blocks/src/blocks/marquee/widget/index.tsx b/packages/page-blocks/src/blocks/marquee/widget/index.tsx
new file mode 100644
index 000000000..5acc78711
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/widget/index.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { WidgetProps } from "@courselit/common-models";
+import {
+    itemBorderColor as defaultItemBorderColor,
+    itemBackgroundColor as defaultItemBackgroundColor,
+    itemForegroundColor as defaultItemForegroundColor,
+} from "../defaults";
+import Settings, { Item } from "../settings";
+import Marquee from "./marquee";
+import { cn, Link } from "@courselit/components-library";
+import { Section } from "@courselit/page-primitives";
+import { ThemeStyle } from "@courselit/page-models";
+
+export default function Widget({
+    settings: {
+        items = [],
+        scrollEffect,
+        itemStyle,
+        fadeEffect,
+        cssId,
+        maxWidth,
+        verticalPadding,
+    },
+    state,
+}: WidgetProps<Settings>) {
+    const { theme } = state;
+    const overiddenTheme: ThemeStyle = JSON.parse(JSON.stringify(theme.theme));
+    overiddenTheme.structure.page.width =
+        maxWidth || theme.theme.structure.page.width;
+    overiddenTheme.structure.section.padding.y =
+        verticalPadding || theme.theme.structure.section.padding.y;
+
+    const renderItem = (item: Item, index: number) => {
+        const key = item.text || item.svgText || index;
+
+        const component = (
+            <>
+                {item.svgText && (
+                    <div
+                        className="w-full h-[100px] flex items-center justify-center"
+                        dangerouslySetInnerHTML={{ __html: item.svgText }}
+                    />
+                )}
+                {!item.svgText && item.text && (
+                    <div className="text-center font-medium text-lg whitespace-nowrap">
+                        {item.text}
+                    </div>
+                )}
+            </>
+        );
+
+        return (
+            <div
+                key={key}
+                className={cn(
+                    "flex items-center justify-center mx-4 my-2 min-w-[200px] min-h-[100px] px-4 box-border",
+                    itemStyle?.backgroundColor,
+                )}
+                style={{
+                    backgroundColor:
+                        itemStyle?.backgroundColor ||
+                        defaultItemBackgroundColor,
+                    color:
+                        itemStyle?.foregroundColor ||
+                        defaultItemForegroundColor,
+                    border: `${itemStyle?.borderWidth}px solid ${itemStyle?.borderColor || defaultItemBorderColor}`,
+                    borderRadius: `${itemStyle?.borderRadius}px`,
+                    borderStyle: itemStyle?.borderStyle,
+                }}
+            >
+                {item.href ? (
+                    <Link
+                        href={item.href}
+                        openInSameTab={false}
+                        className="w-full h-full flex items-center justify-center"
+                    >
+                        {component}
+                    </Link>
+                ) : (
+                    component
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <Section theme={overiddenTheme} id={cssId}>
+            <div className="mx-auto">
+                <div className={`flex flex-col px-4 w-full mx-auto`}>
+                    <div className="relative">
+                        {fadeEffect?.width > 0 && (
+                            <>
+                                <div
+                                    className="absolute top-0 bottom-0 left-0 z-10 pointer-events-none"
+                                    style={{
+                                        width: `${fadeEffect.width}px`,
+                                        background: `linear-gradient(to right, hsl(var(--background)), transparent)`,
+                                    }}
+                                />
+                                <div
+                                    className="absolute top-0 bottom-0 right-0 z-10 pointer-events-none"
+                                    style={{
+                                        width: `${fadeEffect.width}px`,
+                                        background: `linear-gradient(to left, hsl(var(--background)), transparent)`,
+                                    }}
+                                />
+                            </>
+                        )}
+                        {items.length > 0 && (
+                            <Marquee
+                                direction={scrollEffect?.direction}
+                                speed={scrollEffect?.speed}
+                                pauseOnHover={scrollEffect?.pauseOnHover}
+                            >
+                                {items.map(renderItem)}
+                            </Marquee>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Section>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx b/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx
new file mode 100644
index 000000000..5f0b7e592
--- /dev/null
+++ b/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx
@@ -0,0 +1,105 @@
+import React, { type ReactNode, useEffect, useRef, useState } from "react";
+import { cn } from "@courselit/components-library";
+
+interface MarqueeProps {
+    children: ReactNode;
+    direction?: "left" | "right";
+    speed?: number;
+    pauseOnHover?: boolean;
+    className?: string;
+    itemClassName?: string;
+}
+
+export default function Marquee({
+    children,
+    direction = "right",
+    speed = 40,
+    pauseOnHover = false,
+    className,
+    itemClassName,
+}: MarqueeProps) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [duration, setDuration] = useState(0);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    // Convert children to array
+    const childrenArray = React.Children.toArray(children);
+
+    useEffect(() => {
+        if (containerRef.current && contentRef.current) {
+            const calculateWidth = () => {
+                const containerWidth = containerRef.current?.offsetWidth || 0;
+                const contentWidth = contentRef.current?.offsetWidth || 0;
+
+                setContainerWidth(containerWidth);
+                setContentWidth(contentWidth);
+
+                // Calculate duration based on content width and speed
+                // The larger the content, the longer the duration needs to be
+                const calculatedDuration = contentWidth / speed;
+                setDuration(calculatedDuration);
+            };
+
+            calculateWidth();
+
+            // Recalculate on window resize
+            window.addEventListener("resize", calculateWidth);
+            return () => window.removeEventListener("resize", calculateWidth);
+        }
+    }, [speed, children]);
+
+    // We need to duplicate the content to create a seamless loop
+    // If the content is shorter than the container, we need to duplicate it multiple times
+    const duplicatesNeeded = Math.max(
+        2,
+        Math.ceil((containerWidth * 2) / contentWidth),
+    );
+
+    return (
+        <div
+            ref={containerRef}
+            className={cn("relative overflow-hidden w-full", className)}
+            aria-hidden="true" // Hide from screen readers as this is decorative
+        >
+            <div
+                className={cn(
+                    "inline-flex",
+                    pauseOnHover && "hover:[animation-play-state:paused]",
+                )}
+                style={{
+                    animationDuration: `${duration}s`,
+                    animationName: "marquee",
+                    animationTimingFunction: "linear",
+                    animationIterationCount: "infinite",
+                    animationDirection:
+                        direction === "left" ? "reverse" : "normal",
+                }}
+            >
+                <div ref={contentRef} className={cn("flex", itemClassName)}>
+                    {children}
+                </div>
+
+                {/* Duplicate the content to create a seamless loop */}
+                {Array.from({ length: duplicatesNeeded }).map((_, index) => (
+                    <div key={index} className={cn("flex", itemClassName)}>
+                        {children}
+                    </div>
+                ))}
+            </div>
+
+            <style>{`
+        @keyframes marquee {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(-${contentWidth}px);
+          }
+        }
+      `}</style>
+        </div>
+    );
+}
diff --git a/packages/page-blocks/src/blocks/media/admin-widget.tsx b/packages/page-blocks/src/blocks/media/admin-widget.tsx
index b1db5c440..d91db546e 100644
--- a/packages/page-blocks/src/blocks/media/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/media/admin-widget.tsx
@@ -3,6 +3,7 @@ import type { Address, Media, Profile } from "@courselit/common-models";
 import Settings from "./settings";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     MediaSelector,
     Form,
     FormField,
@@ -86,8 +87,11 @@ export default function AdminWidget({
     ]);
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Media">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["media", "design"]}
+        >
+            <AdminWidgetPanel title="Media" value="media">
                 <Form>
                     <FormField
                         label="YouTube/Vimeo Link"
@@ -165,7 +169,7 @@ export default function AdminWidget({
                     </div>
                 )}
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <PageBuilderSlider
                     title="Media border radius"
                     value={mediaBorderRadius}
@@ -185,9 +189,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx b/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
index 58549574c..9bf4dbd1f 100644
--- a/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
@@ -4,6 +4,7 @@ import ItemEditor from "./item-editor";
 import { Address, Alignment } from "@courselit/common-models";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     Form,
@@ -183,8 +184,11 @@ export default function AdminWidget({
     }
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Header">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["header", "design"]}
+        >
+            <AdminWidgetPanel title="Header" value="header">
                 <Form className="flex flex-col gap-4">
                     <FormField
                         label="Title"
@@ -231,7 +235,7 @@ export default function AdminWidget({
                     )}
                 </Form>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Header alignment"
                     value={headerAlignment}
@@ -260,9 +264,9 @@ export default function AdminWidget({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 }
diff --git a/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
index 09af41bcd..23bc3e0e3 100644
--- a/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
@@ -6,7 +6,6 @@ import {
     Form,
     FormField,
     Tooltip,
-    AdminWidgetPanel,
 } from "@courselit/components-library";
 import { Address } from "@courselit/common-models";
 import { Checkbox } from "@courselit/components-library";
@@ -47,103 +46,104 @@ export default function ItemEditor({
         });
 
     return (
-        <AdminWidgetPanel title="Edit item">
-            <Form className="flex flex-col gap-4 mb-4">
+        <Form
+            className="flex flex-col gap-4 mb-4"
+            onSubmit={(e) => e.preventDefault()}
+        >
+            <FormField
+                label="Title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+            />
+            <div>
+                <p className="mb-1 font-medium">Description</p>
+                <TextEditor
+                    initialContent={description}
+                    onChange={(state: any) => setDescription(state)}
+                    showToolbar={false}
+                    url={address.backend}
+                />
+            </div>
+            <FormField
+                label="Price"
+                value={price}
+                onChange={(e) => setPrice(e.target.value)}
+            />
+            {pricingSwitcherEnabled && (
                 <FormField
-                    label="Title"
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
+                    label="Yearly price"
+                    value={priceYearly}
+                    onChange={(e) => setPriceYearly(e.target.value)}
                 />
-                <div>
-                    <p className="mb-1 font-medium">Description</p>
-                    <TextEditor
-                        initialContent={description}
-                        onChange={(state: any) => setDescription(state)}
-                        showToolbar={false}
-                        url={address.backend}
-                    />
+            )}
+            <FormField
+                label="Features"
+                value={features}
+                onChange={(e) => setFeatures(e.target.value)}
+            />
+            <div className="flex justify-between">
+                <div className="flex grow items-center gap-1">
+                    <p className="font-medium">Is recommended</p>
                 </div>
+                <Checkbox
+                    checked={primary}
+                    onChange={(value: boolean) => setPrimary(value)}
+                />
+            </div>
+            <div className="flex flex-col gap-2">
+                <h2 className="text-lg font-medium">Call to action</h2>
                 <FormField
-                    label="Price"
-                    value={price}
-                    onChange={(e) => setPrice(e.target.value)}
+                    label="Label"
+                    value={action.label}
+                    onChange={(e) =>
+                        setAction(
+                            Object.assign({}, action, {
+                                label: e.target.value,
+                            }),
+                        )
+                    }
                 />
-                {pricingSwitcherEnabled && (
-                    <FormField
-                        label="Yearly price"
-                        value={priceYearly}
-                        onChange={(e) => setPriceYearly(e.target.value)}
-                    />
-                )}
                 <FormField
-                    label="Features"
-                    value={features}
-                    onChange={(e) => setFeatures(e.target.value)}
+                    label="Href"
+                    value={action.href}
+                    onChange={(e) =>
+                        setAction(
+                            Object.assign({}, action, {
+                                href: e.target.value,
+                            }),
+                        )
+                    }
                 />
-                <div className="flex justify-between">
-                    <div className="flex grow items-center gap-1">
-                        <p className="font-medium">Is recommended</p>
-                    </div>
-                    <Checkbox
-                        checked={primary}
-                        onChange={(value: boolean) => setPrimary(value)}
-                    />
-                </div>
-                <div className="flex flex-col gap-2">
-                    <h2 className="text-lg font-medium">Call to action</h2>
-                    <FormField
-                        label="Label"
-                        value={action.label}
-                        onChange={(e) =>
-                            setAction(
-                                Object.assign({}, action, {
-                                    label: e.target.value,
-                                }),
-                            )
-                        }
-                    />
+                {pricingSwitcherEnabled && (
                     <FormField
-                        label="Href"
-                        value={action.href}
+                        label="Href (Yearly)"
+                        value={action.yearlyHref}
                         onChange={(e) =>
                             setAction(
                                 Object.assign({}, action, {
-                                    href: e.target.value,
+                                    yearlyHref: e.target.value,
                                 }),
                             )
                         }
                     />
-                    {pricingSwitcherEnabled && (
-                        <FormField
-                            label="Href (Yearly)"
-                            value={action.yearlyHref}
-                            onChange={(e) =>
-                                setAction(
-                                    Object.assign({}, action, {
-                                        yearlyHref: e.target.value,
-                                    }),
-                                )
-                            }
-                        />
-                    )}
-                </div>
-                <div className="flex justify-between">
-                    <Tooltip title="Delete">
-                        <Button
-                            component="button"
-                            onClick={onDelete}
-                            variant="soft"
-                        >
-                            Delete
-                        </Button>
-                    </Tooltip>
-                    <Tooltip title="Go back">
-                        <Button component="button" onClick={itemChanged}>
-                            Done
-                        </Button>
-                    </Tooltip>
-                </div>
-            </Form>
-        </AdminWidgetPanel>
+                )}
+            </div>
+            <div className="flex justify-between">
+                <Tooltip title="Delete">
+                    <Button
+                        component="button"
+                        onClick={onDelete}
+                        variant="soft"
+                    >
+                        Delete
+                    </Button>
+                </Tooltip>
+                <Tooltip title="Go back">
+                    <Button component="button" onClick={itemChanged}>
+                        Done
+                    </Button>
+                </Tooltip>
+            </div>
+        </Form>
     );
 }
diff --git a/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx b/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
index d68ad5973..858c7d1e8 100644
--- a/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import {
     AdminWidgetPanel,
+    AdminWidgetPanelContainer,
     Select,
     TextEditor,
     PageBuilderSlider,
@@ -67,8 +68,11 @@ const AdminWidget = ({
     }, [content, alignment, maxWidth, verticalPadding, cssId, fontSize]);
 
     return (
-        <div className="flex flex-col gap-4 mb-4">
-            <AdminWidgetPanel title="Basic">
+        <AdminWidgetPanelContainer
+            type="multiple"
+            defaultValue={["basic", "design"]}
+        >
+            <AdminWidgetPanel title="Basic" value="basic">
                 <div>
                     <p className="mb-1 font-medium">Text</p>
                     <TextEditor
@@ -79,7 +83,7 @@ const AdminWidget = ({
                     />
                 </div>
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Design">
+            <AdminWidgetPanel title="Design" value="design">
                 <Select
                     title="Alignment"
                     value={alignment}
@@ -111,10 +115,10 @@ const AdminWidget = ({
                     onChange={setVerticalPadding}
                 />
             </AdminWidgetPanel>
-            <AdminWidgetPanel title="Advanced">
+            <AdminWidgetPanel title="Advanced" value="advanced">
                 <CssIdField value={cssId} onChange={setCssId} />
             </AdminWidgetPanel>
-        </div>
+        </AdminWidgetPanelContainer>
     );
 };
 

From 668e0bbbeefaa8f3fbb2a933e377ad45e7979080 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@rajatsaxena.dev>
Date: Mon, 11 Aug 2025 12:45:30 +0530
Subject: [PATCH 2/3] CodeQL fixes

---
 .../src/blocks/embed/admin-widget.tsx         | 19 +++++++++++++------
 .../blocks/grid/admin-widget/item-editor.tsx  | 10 ----------
 .../src/blocks/marquee/widget/marquee.tsx     |  3 ---
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/page-blocks/src/blocks/embed/admin-widget.tsx b/packages/page-blocks/src/blocks/embed/admin-widget.tsx
index 8f82110c8..40caf940d 100644
--- a/packages/page-blocks/src/blocks/embed/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/embed/admin-widget.tsx
@@ -25,18 +25,25 @@ import { Theme, ThemeStyle } from "@courselit/page-models";
 const hasYouTubeContent = (content: string): boolean => {
     const lowerContent = content.toLowerCase();
     return (
-        lowerContent.includes("youtube.com") ||
-        lowerContent.includes("youtu.be") ||
-        lowerContent.includes("youtube-nocookie.com") ||
-        lowerContent.includes("youtube.com/embed/")
+        lowerContent.startsWith("https://www.youtube.com") ||
+        lowerContent.startsWith("https://www.youtube-nocookie.com") ||
+        lowerContent.startsWith("https://youtube.com") ||
+        lowerContent.startsWith("https://youtube-nocookie.com") ||
+        lowerContent.startsWith("https://youtu.be") ||
+        lowerContent.startsWith("https://youtube.com/embed/") ||
+        lowerContent.startsWith("https://www.youtube.com/embed/") ||
+        lowerContent.startsWith("https://www.youtube-nocookie.com/embed/") ||
+        lowerContent.startsWith("https://youtube.com/watch?v=") ||
+        lowerContent.startsWith("https://www.youtube.com/watch?v=") ||
+        lowerContent.startsWith("https://www.youtube-nocookie.com/watch?v=")
     );
 };
 
 const hasVimeoContent = (content: string): boolean => {
     const lowerContent = content.toLowerCase();
     return (
-        lowerContent.includes("vimeo.com") ||
-        lowerContent.includes("player.vimeo.com")
+        lowerContent.startsWith("https://vimeo.com") ||
+        lowerContent.startsWith("https://player.vimeo.com")
     );
 };
 
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
index 18a790202..b5d83380f 100644
--- a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
@@ -45,16 +45,6 @@ export default function ItemEditor({
         item.mediaAlignment || "bottom",
     );
     const [svgText, setSvgText] = useState(item.svgText);
-    const [deleteConfirmation, setDeleteConfirmation] = useState(false);
-
-    const onDeleteItem = () => {
-        if (deleteConfirmation) {
-            onDelete();
-        } else {
-            setDeleteConfirmation(true);
-            setTimeout(() => setDeleteConfirmation(false), 2000);
-        }
-    };
 
     const itemChanged = () =>
         onChange({
diff --git a/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx b/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx
index 5f0b7e592..2b43c456f 100644
--- a/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx
+++ b/packages/page-blocks/src/blocks/marquee/widget/marquee.tsx
@@ -25,9 +25,6 @@ export default function Marquee({
     const containerRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
-    // Convert children to array
-    const childrenArray = React.Children.toArray(children);
-
     useEffect(() => {
         if (containerRef.current && contentRef.current) {
             const calculateWidth = () => {

From d0550dbd7fa35af62317ccd014036fa8c0c7e424 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@rajatsaxena.dev>
Date: Mon, 11 Aug 2025 12:47:18 +0530
Subject: [PATCH 3/3] Lint fixes

---
 packages/page-blocks/src/blocks/embed/widget.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/page-blocks/src/blocks/embed/widget.tsx b/packages/page-blocks/src/blocks/embed/widget.tsx
index d036cf5ae..7a22623c8 100644
--- a/packages/page-blocks/src/blocks/embed/widget.tsx
+++ b/packages/page-blocks/src/blocks/embed/widget.tsx
@@ -1,8 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import { WidgetProps } from "@courselit/common-models";
-import {
-    height as defaultHeight,
-} from "./defaults";
+import { height as defaultHeight } from "./defaults";
 import Settings from "./settings";
 import { ThemeStyle } from "@courselit/page-models";
 import { Section } from "@courselit/page-primitives";