diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..e823933
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import clsx from 'clsx'
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  hover?: boolean
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+const paddingClasses = {
+  none: '',
+  sm:   'p-4',
+  md:   'p-5',
+  lg:   'p-6',
+}
+
+export function Card({ hover, padding = 'md', className, children, ...props }: CardProps) {
+  return (
+    <div
+      className={clsx(
+        'bg-white rounded-xl border border-slate-200 shadow-card',
+        hover && 'transition-all duration-200 hover:shadow-card-md hover:border-slate-300 hover:-translate-y-px',
+        paddingClasses[padding],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function CardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={clsx('flex items-center justify-between mb-4', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 className={clsx('text-base font-semibold text-slate-900', className)} {...props}>
+      {children}
+    </h3>
+  )
+}
+
+export function CardDescription({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={clsx('text-sm text-slate-500', className)} {...props}>
+      {children}
+    </p>
+  )
+}
+
+export function CardFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={clsx('mt-4 pt-4 border-t border-slate-100 flex items-center gap-3', className)} {...props}>
+      {children}
+    </div>
+  )
+}