diff --git a/sparkle/src/components/AssistantCard.tsx b/sparkle/src/components/AssistantCard.tsx
index aca107a178d15..bb204f61a08cb 100644
--- a/sparkle/src/components/AssistantCard.tsx
+++ b/sparkle/src/components/AssistantCard.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 
-import { Avatar, Button, ButtonProps, Card } from "@sparkle/components/";
+import {
+  Avatar,
+  ButtonProps,
+  Card,
+  CardActionButton,
+} from "@sparkle/components/";
 import { MoreIcon } from "@sparkle/icons/";
 import { cn } from "@sparkle/lib/utils";
 
@@ -13,76 +18,13 @@ interface BaseAssistantCardProps {
   onClick?: () => void;
 }
 
-interface MetaAssistantCardProps {
-  className?: string;
-  variant: "sm" | "lg";
-  onClick?: () => void;
-  children: React.ReactNode;
-  action?: React.ReactNode;
-}
-
-const MetaAssistantCard = React.forwardRef<
-  HTMLDivElement,
-  MetaAssistantCardProps
->(({ className, variant, action, onClick, children }, ref) => {
-  return (
-    <div
-      className={cn("s-group/assistant-card s-relative", className)}
-      ref={ref}
-    >
-      <Card
-        variant={variant === "sm" ? "primary" : "tertiary"}
-        className={cn("s-flex s-h-full s-w-full s-flex-col s-gap-3")}
-        size={variant === "sm" ? "sm" : "md"}
-        onClick={onClick}
-      >
-        {children}
-      </Card>
-      {action && <AssistantCardAction>{action}</AssistantCardAction>}
-    </div>
-  );
-});
-MetaAssistantCard.displayName = "MetaAssistantCard";
-
-const AssistantCardAction = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div"> & {
-    children: React.ReactNode;
-  }
->(({ children, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-absolute s-right-3 s-top-3 s-opacity-0 s-transition-opacity",
-        "s-opacity-0 group-focus-within/assistant-card:s-opacity-100 group-hover/assistant-card:s-opacity-100"
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-AssistantCardAction.displayName = "AssistantCardAction";
-
 type AssistantCardMore = ButtonProps;
 
 export const AssistantCardMore = React.forwardRef<
   HTMLButtonElement,
-  AssistantCardMore & {
-    className?: string;
-  }
->(({ className }, ref) => {
-  return (
-    <Button
-      ref={ref}
-      size="mini"
-      variant="outline"
-      icon={MoreIcon}
-      className={className}
-    />
-  );
+  AssistantCardMore
+>(({ ...props }, ref) => {
+  return <CardActionButton ref={ref} icon={MoreIcon} {...props} />;
 });
 AssistantCardMore.displayName = "AssistantCardMore";
 
@@ -99,10 +41,10 @@ export const AssistantCard = React.forwardRef<
     ref
   ) => {
     return (
-      <MetaAssistantCard
+      <Card
         ref={ref}
-        variant="sm"
-        className={cn("s-flex s-gap-3", className)}
+        size="md"
+        className={cn("s-flex s-flex-col s-gap-3", className)}
         onClick={onClick}
         action={action}
       >
@@ -124,7 +66,7 @@ export const AssistantCard = React.forwardRef<
             {description}
           </p>
         )}
-      </MetaAssistantCard>
+      </Card>
     );
   }
 );
@@ -137,12 +79,7 @@ export const LargeAssistantCard = React.forwardRef<
   LargeAssistantCardProps
 >(({ className, onClick, title, description, pictureUrl }, ref) => {
   return (
-    <MetaAssistantCard
-      ref={ref}
-      variant="lg"
-      className={className}
-      onClick={onClick}
-    >
+    <Card ref={ref} size="lg" className={className} onClick={onClick}>
       <div className="s-flex s-gap-3">
         <Avatar visual={pictureUrl} size="lg" />
         <div className="s-flex s-flex-col s-gap-2 s-text-base s-text-foreground">
@@ -150,7 +87,7 @@ export const LargeAssistantCard = React.forwardRef<
           <p className="s-text-muted-foreground">{description}</p>
         </div>
       </div>
-    </MetaAssistantCard>
+    </Card>
   );
 });
 LargeAssistantCard.displayName = "LargeAssistantCard";
diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
index 03bfe73e30243..1932c93cdc7de 100644
--- a/sparkle/src/components/Button.tsx
+++ b/sparkle/src/components/Button.tsx
@@ -112,7 +112,7 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
     tooltip?: string;
   };
 
-type MiniButtonProps = CommonButtonProps & {
+export type MiniButtonProps = CommonButtonProps & {
   size: "mini";
   icon: React.ComponentType;
   label?: never;
diff --git a/sparkle/src/components/Card.tsx b/sparkle/src/components/Card.tsx
index 017fcd8909a1a..b556adabd10e9 100644
--- a/sparkle/src/components/Card.tsx
+++ b/sparkle/src/components/Card.tsx
@@ -1,12 +1,13 @@
 import { cva } from "class-variance-authority";
 import React from "react";
 
-import { LinkWrapperProps } from "@sparkle/components/";
+import { Button, ButtonProps, LinkWrapperProps } from "@sparkle/components/";
 import {
   noHrefLink,
   SparkleContext,
   SparkleContextLinkType,
 } from "@sparkle/context";
+import { XMarkIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
 export const CARD_VARIANTS = ["primary", "secondary", "tertiary"] as const;
@@ -24,9 +25,9 @@ export const CARD_VARIANTS_SIZES = ["sm", "md", "lg"] as const;
 export type CardSizeType = (typeof CARD_VARIANTS_SIZES)[number];
 
 const sizeVariants: Record<CardSizeType, string> = {
-  sm: "s-p-3 s-rounded-2xl",
-  md: "s-p-4 s-rounded-3xl",
-  lg: "s-p-5 s-rounded-4xl",
+  sm: "s-p-3 s-rounded-xl",
+  md: "s-p-4 s-rounded-2xl",
+  lg: "s-p-5 s-rounded-3xl",
 };
 
 const cardVariants = cva(
@@ -49,11 +50,11 @@ interface CommonProps {
   className?: string;
 }
 
-interface LinkProps extends CommonProps, LinkWrapperProps {
+interface CardLinkProps extends CommonProps, LinkWrapperProps {
   onClick?: never;
 }
 
-interface ButtonProps
+interface CardButtonProps
   extends CommonProps,
     React.ButtonHTMLAttributes<HTMLDivElement> {
   href?: never;
@@ -63,9 +64,9 @@ interface ButtonProps
   shallow?: never;
 }
 
-export type CardProps = LinkProps | ButtonProps;
+type InnerCardProps = CardLinkProps | CardButtonProps;
 
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
   (
     {
       children,
@@ -120,8 +121,95 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
   }
 );
 
+interface CardPropsBase {
+  action?: React.ReactNode;
+  containerClassName?: string;
+  className?: string;
+  variant?: CardVariantType;
+  size?: CardSizeType;
+}
+
+interface CardPropsWithLink
+  extends CardPropsBase,
+    Omit<CardLinkProps, keyof CardPropsBase> {
+  href: string;
+  onClick?: never;
+}
+
+interface CardPropsWithButton
+  extends CardPropsBase,
+    Omit<CardButtonProps, keyof CardPropsBase> {
+  href?: never;
+}
+
+export type CardProps = CardPropsWithLink | CardPropsWithButton;
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ containerClassName, className, action, ...props }, ref) => {
+    return (
+      <div
+        className={cn("s-group/card s-relative", containerClassName)}
+        ref={ref}
+      >
+        <InnerCard className={cn("s-h-full s-w-full", className)} {...props} />
+        {action && <CardActions>{action}</CardActions>}
+      </div>
+    );
+  }
+);
 Card.displayName = "Card";
 
+const CardActions = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    children: React.ReactNode;
+  }
+>(({ children, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "s-absolute s-right-3 s-top-3 s-opacity-0 s-transition-opacity",
+        "s-opacity-0 group-focus-within/card:s-opacity-100 group-hover/card:s-opacity-100"
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+CardActions.displayName = "CardActions";
+
+export const CardActionButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(
+  (
+    {
+      className,
+      size = "mini",
+      variant = "outline",
+      icon = XMarkIcon,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Button
+        ref={ref}
+        size={size}
+        variant={variant}
+        icon={icon}
+        className={className}
+        {...props}
+      />
+    );
+  }
+);
+
+CardActionButton.displayName = "CardActionButton";
+
 export const CardGrid = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
index 96bc837973660..97ffa62db27d8 100644
--- a/sparkle/src/components/index.ts
+++ b/sparkle/src/components/index.ts
@@ -9,10 +9,14 @@ export { AssistantPreview } from "./AssistantPreview";
 export { Avatar } from "./Avatar";
 export { BarHeader } from "./BarHeader";
 export { Breadcrumbs } from "./Breadcrumbs";
-export type { ButtonProps, RegularButtonProps } from "./Button";
+export type {
+  ButtonProps,
+  MiniButtonProps,
+  RegularButtonProps,
+} from "./Button";
 export { Button } from "./Button";
 export type { CardProps } from "./Card";
-export { Card, CardGrid } from "./Card";
+export { Card, CardActionButton, CardGrid } from "./Card";
 export type { CheckboxProps } from "./Checkbox";
 export {
   Checkbox,
diff --git a/sparkle/src/stories/AssistantCard.stories.tsx b/sparkle/src/stories/AssistantCard.stories.tsx
index ffe4a2afe1769..aa0779616c3f0 100644
--- a/sparkle/src/stories/AssistantCard.stories.tsx
+++ b/sparkle/src/stories/AssistantCard.stories.tsx
@@ -35,7 +35,7 @@ const ddMenu = (
 export const AssistantCardExample = () => (
   <div className="s-flex s-flex-col s-gap-4">
     <h2>List</h2>
-    <div className="s-grid s-grid-cols-2">
+    <div className="s-grid s-grid-cols-2 s-gap-4">
       <LargeAssistantCard
         title={"@gpt4"}
         description={"OpenAI's most powerful and recent model (128k context)."}
diff --git a/sparkle/src/stories/Card.stories.tsx b/sparkle/src/stories/Card.stories.tsx
index 346a444343cc6..92b299d93ce9e 100644
--- a/sparkle/src/stories/Card.stories.tsx
+++ b/sparkle/src/stories/Card.stories.tsx
@@ -1,17 +1,21 @@
 import type { Meta } from "@storybook/react";
 import React, { ComponentType } from "react";
 
-import { Button, Card, Icon } from "@sparkle/components";
-import { CARD_VARIANTS, CARD_VARIANTS_SIZES } from "@sparkle/components/Card";
+import { Card, Icon } from "@sparkle/components";
 import {
-  BookOpenStrokeIcon,
-  BracesStrokeIcon,
-  CommandLineStrokeIcon,
-  MagnifyingGlassStrokeIcon,
-  PlanetStrokeIcon,
-  ScanStrokeIcon,
-  TableStrokeIcon,
-  XMarkIcon,
+  CARD_VARIANTS,
+  CARD_VARIANTS_SIZES,
+  CardActionButton,
+  CardGrid,
+} from "@sparkle/components/Card";
+import {
+  BookOpenIcon,
+  BracesIcon,
+  CommandLineIcon,
+  MagnifyingGlassIcon,
+  PlanetIcon,
+  ScanIcon,
+  TableIcon,
 } from "@sparkle/icons";
 
 const meta = {
@@ -79,66 +83,58 @@ interface CardData {
 
 const cardData: CardData[] = [
   {
-    icon: MagnifyingGlassStrokeIcon,
+    icon: MagnifyingGlassIcon,
     title: "Search",
     description: "Architecture Projects Descriptions",
   },
   {
-    icon: TableStrokeIcon,
+    icon: TableIcon,
     title: "Table Query",
     description: "Find product references",
   },
   {
-    icon: PlanetStrokeIcon,
+    icon: PlanetIcon,
     title: "Web",
     description: "Search & browse the web",
   },
   {
-    icon: BracesStrokeIcon,
+    icon: BracesIcon,
     title: "Code Interpreter",
     description: "Write a description for it",
   },
   {
-    icon: CommandLineStrokeIcon,
+    icon: CommandLineIcon,
     title: "Dust App",
     description: "Dust App Name",
   },
   {
-    icon: BookOpenStrokeIcon,
+    icon: BookOpenIcon,
     title: "Include",
     description: "Description of the Data",
   },
   {
-    icon: ScanStrokeIcon,
+    icon: ScanIcon,
     title: "Extract Data",
     description: "Description of the Data",
   },
 ];
 
 export const ActionCardDemo: React.FC = () => (
-  <div className="s-grid s-grid-cols-3 s-gap-3">
+  <CardGrid>
     {cardData.map((card, index) => (
       <Card
         key={index}
         variant="primary"
+        size="md"
         onClick={() => {
           alert(`You clicked on ${card.title}`);
         }}
+        action={<CardActionButton variant="ghost" />}
       >
-        <div className="s-flex s-w-full s-flex-col s-text-sm">
-          <div className="s-flex s-w-full s-gap-1 s-font-medium s-text-element-900">
-            <Icon visual={card.icon} size="sm" className="s-text-element-900" />
+        <div className="s-flex s-w-full s-flex-col s-gap-1 s-text-sm">
+          <div className="s-flex s-w-full s-gap-1 s-font-medium s-text-foreground">
+            <Icon visual={card.icon} size="sm" />
             <div className="s-w-full">{card.title}</div>
-            <Button
-              icon={XMarkIcon}
-              className="-s-mr-2 -s-mt-2"
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                alert(`You clicked on close button of ${card.title}`);
-                e.stopPropagation();
-              }}
-            />
           </div>
           <div className="s-w-full s-truncate s-text-sm s-text-muted-foreground">
             {card.description}
@@ -146,5 +142,5 @@ export const ActionCardDemo: React.FC = () => (
         </div>
       </Card>
     ))}
-  </div>
+  </CardGrid>
 );