diff --git a/docs/charts/introduction.mdx b/docs/charts/introduction.mdx
index d7bba70..e4f4c65 100644
--- a/docs/charts/introduction.mdx
+++ b/docs/charts/introduction.mdx
@@ -1,2 +1,9 @@
 # Charts
 
+import { Card } from '@/ui/components/Card';
+import { chartDataMedium } from "@/docs/charts/_lib/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+<Card className="h-64 w-96">
+  <BarChart data={chartDataMedium} isAnimationActive={false} />
+</Card>
diff --git a/ui/components/Card.tsx b/ui/components/Card.tsx
index f815c6d..55b825b 100644
--- a/ui/components/Card.tsx
+++ b/ui/components/Card.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 import { tv } from "tailwind-variants";
 
 const cardStyles = tv({
-  base: "flex flex-col gap-2 bg-card text-card-foreground border-2 border-border rounded-lg shadow-sm p-2 w-fit items-center"
+  base: "flex flex-col gap-2 bg-card text-card-foreground border-2 border-border rounded-lg shadow-sm p-4 w-fit items-center justify-center",
 });
 
 type CardProps = {