diff --git a/packages/react/src/components/card/Card.tsx b/packages/react/src/components/card/Card.tsx
index 08facf2..03301f1 100644
--- a/packages/react/src/components/card/Card.tsx
+++ b/packages/react/src/components/card/Card.tsx
@@ -24,11 +24,11 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, ...rest } = props
+    const { as, children, className, size, ...rest } = props
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useCardValue()
+    const context = useCardValue({ size })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
diff --git a/packages/react/src/components/card/use-card.hook.ts b/packages/react/src/components/card/use-card.hook.ts
index 763787e..17440e1 100644
--- a/packages/react/src/components/card/use-card.hook.ts
+++ b/packages/react/src/components/card/use-card.hook.ts
@@ -1,14 +1,17 @@
 'use client'
 
+import type { CardVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { card } from '@giantnodes/theme'
 
 import { create } from '~/utilities/create-context'
 
+type UseCardProps = CardVariantProps
+
 type CardContextType = ReturnType<typeof useCardValue>
 
-export const useCardValue = () => {
-  const slots = React.useMemo(() => card({}), [])
+export const useCardValue = ({ size }: UseCardProps) => {
+  const slots = React.useMemo(() => card({ size }), [size])
 
   return {
     slots,
diff --git a/packages/theme/src/components/card.ts b/packages/theme/src/components/card.ts
index 1c12a9c..370edc9 100644
--- a/packages/theme/src/components/card.ts
+++ b/packages/theme/src/components/card.ts
@@ -11,11 +11,32 @@ export const card = tv({
       'rounded-lg',
       'overflow-auto',
     ],
-    header: ['text-title', 'p-3'],
-    body: ['flex-grow', 'text-content', 'p-3', 'overflow-auto'],
-    footer: ['text-content', 'p-3'],
+    header: ['text-title'],
+    body: ['flex-grow', 'text-content', 'overflow-auto'],
+    footer: ['text-content'],
+  },
+  variants: {
+    size: {
+      sm: {
+        header: ['py-1', 'px-2'],
+        body: ['p-2'],
+        footer: ['py-1', 'px-2'],
+      },
+      md: {
+        header: ['py-2', 'px-3'],
+        body: ['p-2'],
+        footer: ['py-2', 'px-3'],
+      },
+      lg: {
+        header: ['py-3', 'px-4'],
+        body: ['p-3'],
+        footer: ['py-3', 'px-4'],
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
   },
-  variants: {},
 })
 
 export type CardVariantProps = VariantProps<typeof card>