diff --git a/packages/api/.storybook/preview.jsx b/packages/api/.storybook/preview.jsx
index b776c7a4..a2c3fef4 100644
--- a/packages/api/.storybook/preview.jsx
+++ b/packages/api/.storybook/preview.jsx
@@ -25,7 +25,7 @@ const preview = {
 						"Release Tags",
 					],
 					"Components",
-					["Bubble", "Button", "ButtonIcon", "buttonLink"],
+					["Bubble", "Button", "ButtonIcon", "ButtonLink", "Card"],
 				],
 			},
 		},
diff --git a/packages/api/src/stories/Card.mdx b/packages/api/src/stories/Card.mdx
new file mode 100644
index 00000000..1d5fc8fb
--- /dev/null
+++ b/packages/api/src/stories/Card.mdx
@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+import AutoDoc from "../helpers/AutoDoc";
+import * as Stories from "./Card.stories";
+
+<Meta title="Components/Card" of={Stories} />
+<AutoDoc importName="Card" stage="stable" />
diff --git a/packages/api/src/stories/Card.stories.tsx b/packages/api/src/stories/Card.stories.tsx
new file mode 100644
index 00000000..7970df3b
--- /dev/null
+++ b/packages/api/src/stories/Card.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "@versini/ui-card/src/components";
+
+type Story = StoryObj<typeof Card>;
+
+const meta: Meta<typeof Card> = {
+	parameters: {
+		layout: "centered",
+		docs: {
+			controls: { exclude: ["spacing"] },
+		},
+	},
+	title: "Components/Card",
+
+	component: Card,
+	args: {},
+};
+
+export default meta;
+
+export const Basic: Story = {
+	args: {
+		header: "Dune",
+		footer: "Frank Herbert",
+	},
+	render: (args) => (
+		<div className="min-h-10">
+			<div className="flex flex-wrap gap-2">
+				<Card {...args}>
+					<p>
+						In the year 10191, a spice called melange is the most valuable
+						substance known in the universe, and its only source is the desert
+						planet Arrakis.
+					</p>
+
+					<p className="pt-4">
+						Paul Atreides, a brilliant and gifted young man born into a great
+						destiny beyond his understanding, must travel to the most dangerous
+						planet in the universe.
+					</p>
+				</Card>
+			</div>
+		</div>
+	),
+};
+
+export const Custom: Story = {
+	args: {
+		header: <h2 className="text-red-500">Dune</h2>,
+		footer: <h4 className="text-xs text-slate-400">Frank Herbert</h4>,
+	},
+	render: (args) => (
+		<div className="min-h-10">
+			<div className="flex flex-wrap gap-2">
+				<Card {...args}>
+					<p>
+						In the year 10191, a spice called melange is the most valuable
+						substance known in the universe, and its only source is the desert
+						planet Arrakis.
+					</p>
+
+					<p className="pt-4">
+						Paul Atreides, a brilliant and gifted young man born into a great
+						destiny beyond his understanding, must travel to the most dangerous
+						planet in the universe.
+					</p>
+				</Card>
+			</div>
+		</div>
+	),
+};