diff --git a/packages/admin-ui/src/Accordion/Accordion.stories.tsx b/packages/admin-ui/src/Accordion/Accordion.stories.tsx
index aa4c098762..54072bd834 100644
--- a/packages/admin-ui/src/Accordion/Accordion.stories.tsx
+++ b/packages/admin-ui/src/Accordion/Accordion.stories.tsx
@@ -99,6 +99,22 @@ export const WithIcon: Story = {
     }
 };
 
+export const WithColorMark: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    colorMark={"#ff6584"}
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
 export const WithActionsIcon: Story = {
     ...Default,
     args: {
diff --git a/packages/admin-ui/src/Accordion/Accordion.tsx b/packages/admin-ui/src/Accordion/Accordion.tsx
index 9e92149f58..11ec74ed19 100644
--- a/packages/admin-ui/src/Accordion/Accordion.tsx
+++ b/packages/admin-ui/src/Accordion/Accordion.tsx
@@ -24,6 +24,7 @@ const accordionVariants = cva("wby-group wby-w-full", {
 type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &
     VariantProps<typeof accordionVariants> & {
         children: React.ReactNode;
+        colorMark?: string;
     };
 
 const AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {
diff --git a/packages/admin-ui/src/Accordion/components/AccordionItem.tsx b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
index 7edbd3f5c9..302c59355f 100644
--- a/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
+++ b/packages/admin-ui/src/Accordion/components/AccordionItem.tsx
@@ -9,6 +9,7 @@ import { AccordionRoot, type AccordionRootProps } from "~/Accordion/components/A
 interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     title: React.ReactNode;
     description?: React.ReactNode;
+    colorMark?: string;
     icon?: React.ReactNode;
     handle?: React.ReactNode;
     interactive?: boolean;
diff --git a/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx b/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
index 89ca285666..780ec05db2 100644
--- a/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
+++ b/packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx
@@ -9,13 +9,21 @@ import { AccordionItemDragHandle } from "~/Accordion/components/AccordionItemDra
 
 type AccordionTriggerProps = Pick<
     AccordionItemProps,
-    "title" | "description" | "icon" | "handle" | "interactive" | "actions" | "draggable"
+    | "title"
+    | "description"
+    | "colorMark"
+    | "icon"
+    | "handle"
+    | "interactive"
+    | "actions"
+    | "draggable"
 >;
 
 const AccordionTrigger = ({
     title,
     description,
     actions,
+    colorMark,
     icon,
     interactive = true,
     draggable
@@ -53,6 +61,12 @@ const AccordionTrigger = ({
                 )}
             >
                 {draggable ? <AccordionItemDragHandle /> : null}
+                {colorMark && (
+                    <div
+                        style={{ backgroundColor: colorMark }}
+                        className={"wby-block wby-w-[4px] wby-h-[48px] wby-rounded-sm wby-ml-sm"}
+                    />
+                )}
                 <div
                     className={
                         "wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra"
diff --git a/packages/admin-ui/src/Card/Card.mdx b/packages/admin-ui/src/Card/Card.mdx
index 57843e9bb2..6801397869 100644
--- a/packages/admin-ui/src/Card/Card.mdx
+++ b/packages/admin-ui/src/Card/Card.mdx
@@ -4,43 +4,46 @@ import * as CardStories from './Card.stories';
 
 <Meta of={CardStories} />
 
-# Cards
+# Card
 
-A Card component in design systems is a versatile UI element used to encapsulate content and actions about a single subject. It serves as a modular container that can include images, text, links, buttons, and other interactive elements. Cards are designed to present information in a concise and organized manner, making it easier for users to scan and interact with multiple pieces of content.
+A Card is used to display content or actions in a focused, overlay window that requires user interaction before returning to the main interface. Modals are valuable for drawing attention to important information, capturing user input, and streamlining workflows without navigating away from the current page.
 
 ## Usage
 
 <Canvas of={CardStories.Documentation} source={ { code: `
-import React from 'react';
-import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
-import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
 
 const CardExample = () => {
+    const [open, setOpen] = useState(false);
+
     return (
-        <Card
-            title="Card title"
-            description="Card description"
-            padding="standard"
-            elevation="sm"
-            borderRadius="md"
-            actions={
-                <>
-                    <Button variant="secondary" text="Cancel" />
-                    <Button variant="primary" text="Confirm" />
-                </>
-            }
-            options={
-                <IconButton
-                    variant={"ghost"}
-                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                    size={"sm"}
-                    iconSize={"lg"}
-                    onClick={() => alert("Custom action button clicked.")}
-                />
-            }
-        >
-            This is card content. Anything can go in here.
-        </Card>
+        <>
+            <Button
+                variant="primary"
+                text="Open Card"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Card Title"
+                description="A short card description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+                showCloseButton={true}
+                dismissible={true}
+            >
+                This is the card content area. You can place any content here including
+                forms, text, images, or other components.
+            </Card>
+        </>
     );
 };
 
@@ -60,68 +63,363 @@ export default CardExample;
         ]}
 />
 
-<Controls of={CardStories.Documentation} />
+<Controls of={CardStories.Documentation} exclude={["onOpenChange", "trigger"]}/>
 
 ```tsx
-import React from 'react';
-import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
-import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
 
 const CardExample = () => {
+    const [open, setOpen] = useState(false);
+
     return (
-        <Card
-            title="Card title"
-            description="Card description"
-            padding="standard"
-            elevation="sm"
-            borderRadius="md"
-            actions={
-                <>
-                    <Button variant="secondary" text="Cancel" />
-                    <Button variant="primary" text="Confirm" />
-                </>
-            }
-            options={
-                <IconButton
-                    variant={"ghost"}
-                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                    size={"sm"}
-                    iconSize={"lg"}
-                    onClick={() => alert("Custom action button clicked.")}
-                />
-            }
-        >
-            This is card content. Anything can go in here.
-        </Card>
+        <>
+            <Button
+                variant="primary"
+                text="Open Card"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Card Title"
+                description="A short card description."
+                info={<>Learn more about this <a href={"#"}>here</a>.</>}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+                showCloseButton={true}
+                dismissible={true}
+            >
+                This is the card content area. You can place any content here including
+                forms, text, images, or other components.
+            </Card>
+        </>
     );
 };
 
 export default CardExample;
 ```
 
+## Examples
 
-## Anatomy
+### Controlled Visibility
 
-### Construction
-Depending on the content type and card usage, there are several elevation options available.
+Controlled Visibility demonstrates how to manually control the open/close state of the Card component from the outside, using React useState. Here we are following the “controlled component” pattern, where the visibility (open state) of the Card is not managed internally by the component itself, but instead controlled by the parent using React state.
 
-<img src="/images/storybook/card/construction.png" alt="Construction"/>
+<Canvas of={CardStories.ControlledVisibility} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
 
-### Elevation
+const ControlledVisibilityExample = () => {
+    const [open, setOpen] = useState(false);
 
-<img src="/images/storybook/card/elevation.png" alt="Elevation"/>
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Card"
+                onClick={() => setOpen(true)}
+            />
 
-### Radius
-Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
+            <Card
+                open={open}
+                onOpenChange={open => {
+                    if (!open) {
+                        setOpen(false);
+                    }
+                }}
+                title="Card Title"
+                description="A short card description."
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+            >
+                This card&apos;s visibility is controlled by the open state.
+            </Card>
+        </>
+    );
+};
 
-<img src="/images/storybook/card/radius.png" alt="Radius"/>
+export default ControlledVisibilityExample;
+` } } />
 
-### Padding
+### With Dropdown Menu
 
-<img src="/images/storybook/card/padding.png" alt="Padding"/>
+<Canvas of={CardStories.WithDropdownMenu} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button, DropdownMenu } from "@webiny/admin-ui";
 
-## Usage
+const WithDropdownMenuExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <DropdownMenu trigger={<Button variant="primary" text="Open Menu" />}>
+                <DropdownMenu.Item text={"Open Card"} content="Open Card" onClick={() => setOpen(true)} />
+            </DropdownMenu>
+
+            <Card
+                open={open}
+                onOpenChange={() => setOpen(false)}
+                title="Card Title"
+                description="A short card description."
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+            >
+                This card is opened from a dropdown menu item.
+            </Card>
+        </>
+    );
+};
+
+export default WithDropdownMenuExample;
+` } } />
+
+### Without Close Button
+
+<Canvas of={CardStories.WithoutCloseButton} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
+
+const WithoutCloseButtonExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Card"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Card Title"
+                description="A short card description."
+                showCloseButton={false}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+            >
+                This card doesn&apos;st have a close button in the top-right corner.
+            </Card>
+        </>
+    );
+};
+
+export default WithoutCloseButtonExample;
+` } } />
+
+### Alert Card
+
+<Canvas of={CardStories.AlertCard} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
 
-### Stacked
+const AlertCardExample = () => {
+    const [open, setOpen] = useState(false);
 
-<img src="/images/storybook/card/stacked.png" alt="Stacked"/>
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Alert Card"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Confirm Action"
+                description="Are you sure you want to delete this item?"
+                showCloseButton={false}
+                actions={
+                    <>
+                        <Card.CancelButton text="Cancel" />
+                        <Card.ConfirmButton text="Delete" />
+                    </>
+                }
+            >
+                <p>This action cannot be undone.</p>
+                <p>Deleted items cannot be recovered.</p>
+            </Card>
+        </>
+    );
+};
+
+export default AlertCardExample;
+` } } />
+
+### With Icon
+
+<Canvas of={CardStories.WithIcon} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
+import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+
+const WithIconExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Card with Icon"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Card with Icon"
+                description="This card has an icon in the header."
+                icon={<Card.Icon icon={<DoorbellIcon />} label="Title icon" />}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+            >
+                The icon helps to visually identify the purpose of this card.
+            </Card>
+        </>
+    );
+};
+
+export default WithIconExample;
+` } } />
+
+### Prevent Outside Dismiss
+
+<Canvas of={CardStories.PreventOutsideDismiss} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button } from "@webiny/admin-ui";
+
+const PreventOutsideDismissExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Modal Card"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Important Action"
+                description="This card requires explicit action."
+                dismissible={false}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton />
+                    </>
+                }
+            >
+                This card cannot be dismissed by clicking outside or pressing Escape.
+                You must use one of the action buttons to close it.
+            </Card>
+        </>
+    );
+};
+
+export default PreventOutsideDismissExample;
+` } } />
+
+### With Tabs
+
+<Canvas of={CardStories.WithTabs} source={ { code: `
+import React, { useState } from "react";
+import { Card, Button, Tabs } from "@webiny/admin-ui";
+
+const WithTabsExample = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Button
+                variant="primary"
+                text="Open Card with Tabs"
+                onClick={() => setOpen(true)}
+            />
+
+            <Card
+                open={open}
+                onOpenChange={open => setOpen(open)}
+                title="Settings"
+                description="Configure your preferences"
+                bodyPadding={false}
+                actions={
+                    <>
+                        <Card.CancelButton />
+                        <Card.ConfirmButton text="Save" />
+                    </>
+                }
+            >
+                <Tabs
+                    spacing="lg"
+                    tabs={[
+                        <Tabs.Tab
+                            key="account"
+                            value="account"
+                            trigger="Account"
+                            content="Make changes to your account here."
+                        />,
+                        <Tabs.Tab
+                            key="company"
+                            value="company"
+                            trigger="Company"
+                            content="Make changes to your company info here."
+                        />,
+                        <Tabs.Tab
+                            key="security"
+                            value="security"
+                            trigger="Security"
+                            content="Make changes to your security settings here."
+                        />,
+                        <Tabs.Tab
+                            key="development"
+                            value="development"
+                            trigger="Development"
+                            content="Make changes to your development settings here."
+                        />
+                    ]}
+                />
+            </Card>
+        </>
+    );
+};
+
+export default WithTabsExample;
+` } } />
+
+## Anatomy
+
+### Card Construction
+<img src="/images/storybook/card/anatomy.png" alt="Anatomy"/>
+
+### Overlay and Positioning
+<img src="/images/storybook/card/overlay-and-positioning.png" alt="Card Overlay and Positioning"/>
+
+## Usage
+<img src="/images/storybook/card/usage.png" alt="Usage"/>
diff --git a/packages/admin-ui/src/Card/Card.stories.tsx b/packages/admin-ui/src/Card/Card.stories.tsx
index 59bc9b3941..fad0e77af6 100644
--- a/packages/admin-ui/src/Card/Card.stories.tsx
+++ b/packages/admin-ui/src/Card/Card.stories.tsx
@@ -1,19 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
-import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
 import { Card } from "./Card.js";
-import { Button, IconButton } from "~/Button/index.js";
-import { Icon } from "~/Icon/index.js";
+import { Button } from "~/Button/index.js";
+import { DropdownMenu } from "~/DropdownMenu/index.js";
+import { ReactComponent as NotificationIcon } from "@webiny/icons/notifications_active.svg";
+import { Tabs } from "~/Tabs/index.js";
 
 const meta: Meta<typeof Card> = {
     title: "Components/Card",
     component: Card,
+    argTypes: {},
     decorators: [
         Story => (
-            <div className="wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[700px] wby-rounded-[5px] wby-px-[50px] wby-content-center">
-                <div className={"wby-m-auto wby-w-[300px]"}>
-                    <Story />
-                </div>
+            <div className="wby-bg-[#f9fafa] wby-p-[350px] wby-rounded-[5px] wby-text-neutral-dimmed">
+                <Story />
             </div>
         )
     ]
@@ -25,156 +25,118 @@ type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {
     args: {
-        title: "Card title goes here",
-        description: "Card description goes here",
-        children: <>This is card content. Anything can go in here.</>,
+        size: "md",
+        title: "Card Title",
+        description: "A short card description.",
+        info: (
+            <>
+                Learn more about this <a href={"#"}>here</a>.
+            </>
+        ),
+        children: (
+            <>
+                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to
+                winds, is something that deserves all admiration. Crafted with perfect textures, it
+                bravely withstands storms and gently shades the rays of the sun. A remarkable
+                innovation, with an ergonomically designed grip most suited to the hand, it remains
+                stable even in the fiercest weather.
+            </>
+        ),
         actions: (
             <>
-                <Button variant={"secondary"} text={"Cancel"} />
-                <Button variant={"primary"} text={"Confirm"} />
+                <Card.CancelButton />
+                <Card.ConfirmButton />
             </>
         ),
-        padding: "standard",
-        elevation: "sm",
-        borderRadius: "md"
+        topActions: (
+            <>
+                <Card.CancelButton />
+                <Card.ConfirmButton />
+            </>
+        )
     },
-    argTypes: {
-        padding: {
-            control: "select",
-            options: ["none", "standard", "comfortable"]
-        },
-        elevation: {
-            control: "select",
-            options: ["none", "xs", "sm", "md", "lg", "xl"]
-        },
-        borderRadius: {
-            control: "select",
-            options: ["none", "sm", "md", "lg"]
-        }
-    }
+    argTypes: {}
 };
 
-export const NoTitleDescriptionActionsHeaderAndFooter: Story = {
-    name: "Only Body (Without Body, Title, Actions)",
-    args: {
-        children: <>This is card content. Anything can go in here.</>
-    }
-};
-
-export const WithMorePadding: Story = {
+export const SizeSmall: Story = {
     args: {
         ...Default.args,
-        actions: null,
-        padding: "comfortable"
+        size: "sm"
     }
 };
 
-export const WithMoreElevation: Story = {
+export const SizeMedium: Story = {
     args: {
         ...Default.args,
-        actions: null,
-        elevation: "md"
+        size: "md"
     }
 };
 
-export const NoElevation: Story = {
+export const SizeLarge: Story = {
     args: {
         ...Default.args,
-        actions: null,
-        elevation: "none"
+        size: "lg"
     }
 };
 
-export const NoBorderRadius: Story = {
+export const DropdownMenuInCard: Story = {
     args: {
         ...Default.args,
-        actions: null,
-        borderRadius: "none"
+        children: (
+            <>
+                <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
+                    <DropdownMenu.Item text={"Billing"} />
+                    <DropdownMenu.Item text={"Settings"} />
+                    <DropdownMenu.Item text={"Keyboard shortcuts"} />
+                </DropdownMenu>
+            </>
+        )
     }
 };
 
-export const WithOptions: Story = {
+export const WithIcon: Story = {
     args: {
         ...Default.args,
-        actions: null,
-        options: (
-            <IconButton
-                variant={"ghost"}
-                icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                size={"sm"}
-                iconSize={"lg"}
-                onClick={() => alert("Custom action button clicked.")}
-            />
-        )
+        icon: <Card.Icon icon={<NotificationIcon />} label={"Title icon"} />
     }
 };
 
-export const WithActions: Story = {
-    args: Default.args
-};
-
-export const Documentation: Story = {
-    render: args => {
-        return <Card {...args} />;
-    },
+export const WithTabs: Story = {
     args: {
-        title: "Card title goes here",
-        description: "Card description goes here",
-        children: <>This is card content. Anything can go in here.</>,
-        actions: (
+        ...Default.args,
+        bodyPadding: false,
+        children: (
             <>
-                <Button variant={"secondary"} text={"Cancel"} />
-                <Button variant={"primary"} text={"Confirm"} />
+                <Tabs
+                    spacing={"lg"}
+                    tabs={[
+                        <Tabs.Tab
+                            key={"account"}
+                            value={"account"}
+                            trigger={"Account"}
+                            content={"Make changes to your account here."}
+                        />,
+                        <Tabs.Tab
+                            key={"company"}
+                            value={"company"}
+                            trigger={"Company"}
+                            content={"Make changes to your company info here."}
+                        />,
+                        <Tabs.Tab
+                            key={"security"}
+                            value={"security"}
+                            trigger={"Security"}
+                            content={"Make changes to your security settings here."}
+                        />,
+                        <Tabs.Tab
+                            key={"development"}
+                            value={"development"}
+                            trigger={"Development"}
+                            content={"Make changes to your development settings here."}
+                        />
+                    ]}
+                />
             </>
-        ),
-        padding: "standard",
-        elevation: "sm",
-        borderRadius: "md",
-        options: (
-            <IconButton
-                variant={"ghost"}
-                icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                size={"sm"}
-                iconSize={"lg"}
-                onClick={() => alert("Custom action button clicked.")}
-            />
         )
-    },
-    argTypes: {
-        title: {
-            description: "The title displayed at the top of the card",
-            control: "text"
-        },
-        description: {
-            description: "A description displayed below the title",
-            control: "text"
-        },
-        children: {
-            description:
-                "The main content of the card. Please refer to the example code for details on usage."
-        },
-        actions: {
-            description:
-                "Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage."
-        },
-        options: {
-            description:
-                "Additional options or actions displayed in the top-right corner. Please refer to the example code for details on usage."
-        },
-        padding: {
-            description: "Controls the amount of padding inside the card",
-            control: "select",
-            options: ["none", "standard", "comfortable"]
-        },
-        elevation: {
-            description: "Controls the shadow depth of the card",
-            control: "select",
-            options: ["none", "xs", "sm", "md", "lg", "xl"]
-        },
-        borderRadius: {
-            description: "Controls the roundness of the card corners",
-            control: "select",
-            options: ["none", "sm", "md", "lg"]
-        }
     }
 };
diff --git a/packages/admin-ui/src/Card/Card.tsx b/packages/admin-ui/src/Card/Card.tsx
index 4386a77321..9b0fcff898 100644
--- a/packages/admin-ui/src/Card/Card.tsx
+++ b/packages/admin-ui/src/Card/Card.tsx
@@ -1,27 +1,83 @@
-import React from "react";
-import { makeDecoratable, type VariantProps } from "~/utils.js";
-import type { cardRootVariants } from "./components/index.js";
-import { CardFooter, CardHeader, CardRoot, type CardRootProps } from "./components/index.js";
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "~/utils.js";
+import { CardContent } from "./components/CardContent.js";
+import { CardHeader } from "~/Card/components/CardHeader.js";
+import { CardBody } from "~/Card/components/CardBody.js";
+import { CardFooter } from "~/Card/components/CardFooter.js";
+import { CardRoot } from "./components/CardRoot.js";
+import { Icon } from "./components/Icon.js";
+import { ConfirmButton } from "./components/ConfirmButton.js";
+import { CancelButton } from "./components/CancelButton.js";
 
-interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
+interface CardProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof CardRoot>, "title">,
+        Omit<React.ComponentPropsWithoutRef<typeof CardContent>, "title"> {
     title?: React.ReactNode;
+    icon?: React.ReactElement;
+    bodyPadding?: boolean;
     description?: React.ReactNode;
+    children: React.ReactNode;
     actions?: React.ReactNode;
-    options?: React.ReactNode;
+    topActions?: React.ReactNode;
+    info?: React.ReactNode;
 }
 
 const CardBase = (props: CardProps) => {
-    const { title, description, actions, children, options, ...rest } = props;
+    const {
+        contentProps,
+        headerProps,
+        bodyProps,
+        footerProps,
+    } = React.useMemo(() => {
+        const {
+            // Shared props.
+            size,
+
+            // Header props.
+            title,
+            icon,
+            description,
+            topActions,
+
+            // Body props.
+            children,
+            bodyPadding,
+
+            // Footer props.
+            actions,
+            info,
+
+            // Content props.
+            ...rest
+        } = props;
+
+        return {
+            headerProps: { title, icon, description, size, actions: topActions },
+            bodyProps: { children, bodyPadding, size },
+            footerProps: { info, actions, size },
+            contentProps: { ...rest, size }
+        };
+    }, [props]);
 
     return (
-        <CardRoot {...rest}>
-            <CardHeader title={title} description={description} options={options} />
-            {children}
-            <CardFooter actions={actions} />
+        <CardRoot>
+            <CardContent {...contentProps}>
+                <CardHeader {...headerProps} />
+                <CardBody {...bodyProps} />
+                <CardFooter {...footerProps} />
+            </CardContent>
         </CardRoot>
     );
 };
 
-const Card = makeDecoratable("Card", CardBase);
+CardBase.displayName = "Card";
+
+const DecoratableCard = makeDecoratable("Card", CardBase);
+
+const Card = withStaticProps(DecoratableCard, {
+    ConfirmButton,
+    CancelButton,
+    Icon
+});
 
 export { Card, type CardProps };
diff --git a/packages/admin-ui/src/Card/components/ActionsAreaProvider.tsx b/packages/admin-ui/src/Card/components/ActionsAreaProvider.tsx
new file mode 100644
index 0000000000..78ffe825de
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/ActionsAreaProvider.tsx
@@ -0,0 +1,31 @@
+import React, { createContext, useContext, ReactNode } from "react";
+
+type AreaName = "header" | "footer";
+
+interface ActionsAreaContextValue {
+    areaName: AreaName;
+}
+
+const ActionsAreaContext = createContext<ActionsAreaContextValue | undefined>(undefined);
+
+interface ActionsAreaProviderProps {
+    areaName: AreaName;
+    children: ReactNode;
+}
+
+export const ActionsAreaProvider = ({ areaName, children }: ActionsAreaProviderProps) => {
+    return (
+        <ActionsAreaContext.Provider value={{ areaName }}>
+            {children}
+        </ActionsAreaContext.Provider>
+    );
+};
+
+export const useActionsAreaProvider = (): ActionsAreaContextValue => {
+    const context = useContext(ActionsAreaContext);
+    if (!context) {
+        throw new Error("useActionsAreaProvider must be used within ActionsAreaProvider");
+    }
+    return context;
+};
+
diff --git a/packages/admin-ui/src/Card/components/CancelButton.tsx b/packages/admin-ui/src/Card/components/CancelButton.tsx
new file mode 100644
index 0000000000..530faff89c
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CancelButton.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils.js";
+import { Button, ButtonProps } from "~/Button/index.js";
+import { useActionsAreaProvider } from "./ActionsAreaProvider";
+
+const CancelButtonBase = (props: ButtonProps) => {
+    const { areaName } = useActionsAreaProvider();
+    const buttonSize = areaName === "header" ? "sm" : "md";
+    return <Button text={"Cancel"} {...props} variant="secondary" size={buttonSize} />;
+};
+export const CancelButton = makeDecoratable("CancelButton", CancelButtonBase);
diff --git a/packages/admin-ui/src/Card/components/CardBody.tsx b/packages/admin-ui/src/Card/components/CardBody.tsx
new file mode 100644
index 0000000000..5f1148af81
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardBody.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn, cva } from "~/utils.js";
+import type { CardProps } from "~/Card/index.js";
+
+const cardBodyVariants = cva("wby-flex-1", {
+    variants: {
+        size: {
+            sm: "wby-px-md-extra",
+            md: "wby-px-md-extra",
+            lg: "wby-px-lg",
+        },
+        bodyPadding: {
+            true: "",
+            false: "!wby-px-none"
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        bodyPadding: true
+    }
+});
+
+export type CardBodyProps = Pick<CardProps, "children" | "bodyPadding" | "size">;
+
+export const CardBody = ({ bodyPadding, size, children }: CardBodyProps) => {
+    return <div className={cn(cardBodyVariants({ size, bodyPadding }))}>{children}</div>;
+};
diff --git a/packages/admin-ui/src/Card/components/CardContent.tsx b/packages/admin-ui/src/Card/components/CardContent.tsx
new file mode 100644
index 0000000000..b92ac3566d
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardContent.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils.js";
+
+const cardContentVariants = cva(
+    [
+        "wby-fixed wby-left-[50%] wby-top-[50%] wby-border wby-bg-neutral-base focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong wby-max-h-screen",
+        "wby-translate-x-[-50%] wby-translate-y-[-50%] wby-duration-200 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[state=closed]:wby-slide-out-to-left-1/2 data-[state=closed]:wby-slide-out-to-top-[48%] data-[state=open]:wby-slide-in-from-left-1/2 data-[state=open]:wby-slide-in-from-top-[48%]",
+        "focus:wby-outline-none focus-visible:wby-outline-none",
+        "wby-max-w-[calc(100vw-theme(spacing.lg))] wby-max-h-[calc(100vh-theme(spacing.lg))]"
+    ],
+    {
+        variants: {
+            size: {
+                sm: "wby-w-[384px]",
+                md: "wby-w-[520px]",
+                lg: "wby-w-[640px]"
+            }
+        },
+        defaultVariants: {
+            size: "md"
+        }
+    }
+);
+
+export interface CardContentProps extends VariantProps<typeof cardContentVariants> {
+    className?: string;
+    children: React.ReactNode;
+}
+
+const CardContent = ({ className, size, children, ...props }: CardContentProps) => {
+    return (
+        <div {...props} className={cn(cardContentVariants({ size }), className)}>
+            <div
+                className={cn([
+                    [
+                        "wby-flex wby-flex-col wby-justify-between",
+                        "wby-w-full wby-max-w-full",
+                        "wby-h-full",
+                        "wby-relative"
+                    ]
+                ])}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+CardContent.displayName = "CardContent"
+
+export { CardContent };
diff --git a/packages/admin-ui/src/Card/components/CardDescription.tsx b/packages/admin-ui/src/Card/components/CardDescription.tsx
new file mode 100644
index 0000000000..02a9517965
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardDescription.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { cn } from "~/utils.js";
+
+export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
+    <div
+        {...props}
+        className={cn("wby-text-sm wby-text-neutral-strong wby-text-left", className)}
+    />
+);
diff --git a/packages/admin-ui/src/Card/components/CardFooter.tsx b/packages/admin-ui/src/Card/components/CardFooter.tsx
index a0a8c33a98..e0f22618cf 100644
--- a/packages/admin-ui/src/Card/components/CardFooter.tsx
+++ b/packages/admin-ui/src/Card/components/CardFooter.tsx
@@ -1,14 +1,44 @@
-import React from "react";
-import type { CardProps } from "~/Card/index.js";
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils.js";
+import { ActionsAreaProvider } from "./ActionsAreaProvider.js";
 
-type CardFooterProps = Pick<CardProps, "actions">;
+const cardFooterVariants = cva("wby-flex wby-justify-between", {
+    variants: {
+        size: {
+            sm: "wby-p-md-extra",
+            md: "wby-p-md-extra",
+            lg: "wby-p-lg"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+export interface CardFooterProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof cardFooterVariants> {
+    actions?: React.ReactNode;
+    info?: React.ReactNode;
+}
 
-const CardFooter = ({ actions }: CardFooterProps) => {
-    if (!actions) {
+export const CardFooter = ({ actions, info, className, size, ...props }: CardFooterProps) => {
+    if (!actions && !info) {
         return null;
     }
 
-    return <div className={"wby-flex wby-justify-end wby-gap-sm"}>{actions}</div>;
+    return (
+        <div {...props} className={cn(cardFooterVariants({ size }), className)}>
+            {info && (
+                <div className={"wby-text-sm wby-flex wby-items-center"}>
+                    <div>{info}</div>
+                </div>
+            )}
+            {actions && (
+                <div className={"wby-flex wby-gap-x-sm wby-ml-auto"}>
+                    <ActionsAreaProvider areaName={"footer"}>{actions}</ActionsAreaProvider>
+                </div>
+            )}
+        </div>
+    );
 };
-
-export { CardFooter, type CardFooterProps };
diff --git a/packages/admin-ui/src/Card/components/CardHeader.tsx b/packages/admin-ui/src/Card/components/CardHeader.tsx
index f1bdb81477..3cdfb4bb51 100644
--- a/packages/admin-ui/src/Card/components/CardHeader.tsx
+++ b/packages/admin-ui/src/Card/components/CardHeader.tsx
@@ -1,36 +1,62 @@
-import React from "react";
-import { Heading } from "~/Heading/index.js";
-import { Text } from "~/Text/index.js";
-import type { CardProps } from "~/Card/index.js";
+import * as React from "react";
+import { cn, cva } from "~/utils.js";
+import { type CardProps } from "../Card.js";
+import { CardTitle } from "./CardTitle.js";
+import { ActionsAreaProvider } from "./ActionsAreaProvider.js";
+import { CardDescription } from "./CardDescription.js";
 
-type CardHeaderProps = Pick<CardProps, "title" | "description" | "options">;
+const cardHeaderVariants = cva("wby-text-neutral-primary", {
+    variants: {
+        size: {
+            sm: "wby-pt-md wby-pb-md-extra wby-px-md-extra wby-mr-xl",
+            md: "wby-pt-md wby-pb-md-extra wby-px-md-extra wby-mr-xl",
+            lg: "wby-pt-md wby-pb-md-extra wby-px-lg wby-mr-xl"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+export type CardHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+    Pick<CardProps, "title" | "icon" | "description" | "size"> & {
+        actions?: React.ReactNode;
+    };
 
-const CardHeader = ({ title, description, options }: CardHeaderProps) => {
-    if (!title && !description && !options) {
+export const CardHeader = ({
+    actions,
+    title,
+    icon,
+    description,
+    size,
+    className,
+    ...props
+}: CardHeaderProps) => {
+    const nothingToRender = React.useMemo(() => {
+        return !title && !description && !icon;
+    }, [title, description, icon]);
+
+    if (nothingToRender) {
         return null;
     }
 
     return (
-        <div className={"wby-flex wby-flex-row wby-justify-between"}>
-            <div className={"wby-flex wby-flex-col wby-gap-y-xs"}>
-                {typeof title === "string" ? (
-                    <Heading level={6} as={"h1"}>
+        <div {...props} className={cn(cardHeaderVariants({ size }), className)}>
+            <div className={"wby-flex wby-justify-between"}>
+                <div className="wby-mb-sm wby-text-sm wby-text-neutral-strong">
+                    <CardTitle size={size}>
+                        {icon &&
+                            React.cloneElement(icon, {
+                                size: size && ["lg", "xl", "full"].includes(size) ? "lg" : "md" // Adjust icon size based on card size
+                            })}
                         {title}
-                    </Heading>
-                ) : (
-                    title
-                )}
-                {typeof description === "string" ? (
-                    <Text size="sm" className={"wby-text-neutral-strong"}>
-                        {description}
-                    </Text>
-                ) : (
-                    description
-                )}
+                    </CardTitle>
+                    {description && <CardDescription>{description}</CardDescription>}
+                </div>
+                <div>
+                    <ActionsAreaProvider areaName={"header"}>{actions}</ActionsAreaProvider>
+                </div>
             </div>
-            <div>{options}</div>
         </div>
     );
 };
-
-export { CardHeader, type CardHeaderProps };
diff --git a/packages/admin-ui/src/Card/components/CardRoot.tsx b/packages/admin-ui/src/Card/components/CardRoot.tsx
index b98df2a05d..19dd6e8c22 100644
--- a/packages/admin-ui/src/Card/components/CardRoot.tsx
+++ b/packages/admin-ui/src/Card/components/CardRoot.tsx
@@ -1,47 +1,7 @@
-import React from "react";
-import type { VariantProps } from "~/utils.js";
-import { cn, cva } from "~/utils.js";
+import React from 'react';
 
-const cardRootVariants = cva(
-    "wby-flex wby-flex-col wby-bg-neutral-base wby-gap-y-md-plus wby-text-sm",
-    {
-        variants: {
-            padding: {
-                standard: "wby-p-lg",
-                comfortable: "wby-p-xl",
-                compact: "wby-p-md"
-            },
-            elevation: {
-                none: "",
-                xs: "wby-shadow-xs",
-                sm: "wby-shadow-sm",
-                md: "wby-shadow-md",
-                lg: "wby-shadow-lg",
-                xl: "wby-shadow-xl"
-            },
-            borderRadius: {
-                none: "wby-rounded-none",
-                sm: "wby-rounded-sm",
-                md: "wby-rounded-md"
-            }
-        },
-        defaultVariants: {
-            padding: "standard",
-            elevation: "none",
-            borderRadius: "md"
-        }
-    }
-);
+export type CardRootProps = React.HTMLAttributes<HTMLDivElement>;
 
-interface CardRootProps
-    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
-        VariantProps<typeof cardRootVariants> {}
-
-const CardRoot = ({ className, padding, elevation, borderRadius, ...props }: CardRootProps) => (
-    <div
-        className={cn(cardRootVariants({ padding, elevation, borderRadius }), className)}
-        {...props}
-    />
-);
-
-export { CardRoot, type CardRootProps, cardRootVariants };
+export const CardRoot = ({ children, ...props }: CardRootProps) => {
+    return <div {...props}>{children}</div>;
+};
diff --git a/packages/admin-ui/src/Card/components/CardTitle.tsx b/packages/admin-ui/src/Card/components/CardTitle.tsx
new file mode 100644
index 0000000000..ee32962f28
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/CardTitle.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn, cva, type VariantProps } from "~/utils.js";
+
+const cardTitleVariants = cva("wby-flex wby-items-center wby-gap-sm", {
+    variants: {
+        size: {
+            sm: "wby-text-h5",
+            md: "wby-text-h5",
+            lg: "wby-text-h4"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+export type CardTitleProps = React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof cardTitleVariants>;
+
+export const CardTitle = ({ className, size, ...props }: CardTitleProps) => (
+    <div {...props} className={cn(cardTitleVariants({ size }), className)} />
+);
diff --git a/packages/admin-ui/src/Card/components/ConfirmButton.tsx b/packages/admin-ui/src/Card/components/ConfirmButton.tsx
new file mode 100644
index 0000000000..7c12a55182
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/ConfirmButton.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils.js";
+import { Button, ButtonProps } from "~/Button/index.js";
+import { useActionsAreaProvider } from "./ActionsAreaProvider";
+
+const ConfirmButtonBase = (props: ButtonProps) => {
+    const { areaName } = useActionsAreaProvider();
+    const buttonSize = areaName === "header" ? "sm" : "md";
+    return <Button text={"Confirm"} {...props} variant="primary" size={buttonSize} />;
+};
+export const ConfirmButton = makeDecoratable("ConfirmButton", ConfirmButtonBase);
diff --git a/packages/admin-ui/src/Card/components/Icon.tsx b/packages/admin-ui/src/Card/components/Icon.tsx
new file mode 100644
index 0000000000..22a473f834
--- /dev/null
+++ b/packages/admin-ui/src/Card/components/Icon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { IconProps as IconComponentProps } from "~/Icon/index.js";
+import { Icon as IconComponent } from "~/Icon/index.js";
+import { makeDecoratable } from "~/utils.js";
+
+type IconProps = IconComponentProps;
+
+const IconBase = (props: IconProps) => {
+    return <IconComponent size={"md"} color={"neutral-strong"} {...props} />;
+};
+
+export const Icon = makeDecoratable("Icon", IconBase);
diff --git a/packages/admin-ui/src/Card/components/index.ts b/packages/admin-ui/src/Card/components/index.ts
deleted file mode 100644
index 1b3f09da17..0000000000
--- a/packages/admin-ui/src/Card/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./CardFooter.js";
-export * from "./CardHeader.js";
-export * from "./CardRoot.js";
diff --git a/packages/admin-ui/src/Link/DefaultLinkComponent.tsx b/packages/admin-ui/src/Link/DefaultLinkComponent.tsx
index 72f71b8852..359e4a20dc 100644
--- a/packages/admin-ui/src/Link/DefaultLinkComponent.tsx
+++ b/packages/admin-ui/src/Link/DefaultLinkComponent.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { LinkComponent } from "./LinkComponent";
+import { LinkComponent } from "./LinkComponent.js";
 
 export const DefaultLinkComponent: LinkComponent = ({ to, ...props }) => {
     return <a href={to} {...props} />;
diff --git a/packages/admin-ui/src/Link/Link.stories.tsx b/packages/admin-ui/src/Link/Link.stories.tsx
index d705fdb0f8..527e01f887 100644
--- a/packages/admin-ui/src/Link/Link.stories.tsx
+++ b/packages/admin-ui/src/Link/Link.stories.tsx
@@ -2,8 +2,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { BrowserRouter } from "react-router";
-import { Link } from "./Link";
-import { Text } from "~/Text";
+import { Link } from "./Link.js";
+import { Text } from "~/Text/index.js";
 
 const meta: Meta<typeof Link> = {
     title: "Components/Link",
diff --git a/packages/app-website-builder/src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx b/packages/app-website-builder/src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx
index d4ebde7366..5e2cdb1872 100644
--- a/packages/app-website-builder/src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx
+++ b/packages/app-website-builder/src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx
@@ -47,8 +47,8 @@ export const InsertElements = () => {
                         key={group.name}
                         title={group.label}
                         description={group.description}
-                        borderRadius={"none"}
-                        padding={"compact"}
+                        // borderRadius={"none"}
+                        // padding={"compact"}
                     >
                         <div className="wby-flex wby-flex-col wby-gap-sm wby-p-sm wby-justify-start">
                             {group.items.map(item => {