diff --git a/apps/workshop/package.json b/apps/workshop/package.json
index ab1a6c0..437a9c7 100644
--- a/apps/workshop/package.json
+++ b/apps/workshop/package.json
@@ -36,14 +36,9 @@
     "@storybook/test": "^7.6.17",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
-    "@vanilla-extract/vite-plugin": "latest",
-    "@vitejs/plugin-react-swc": "latest",
-    "@vitest/coverage-v8": "^1.3.1",
-    "@vitest/ui": "^1.3.1",
     "chromatic": "^11.3.2",
     "storybook": "^7.6.17",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4",
-    "vitest": "^1.3.1"
+    "vite": "^5.1.4"
   }
 }
diff --git a/apps/workshop/src/stories/Card/Card.stories.tsx b/apps/workshop/src/stories/Card/Card.stories.tsx
index 80ed175..41087a6 100644
--- a/apps/workshop/src/stories/Card/Card.stories.tsx
+++ b/apps/workshop/src/stories/Card/Card.stories.tsx
@@ -1,4 +1,3 @@
-// Card.stories.tsx
 import { Button, Card, type CardProps } from '@jung/design-system';
 import type { Meta, StoryObj } from '@storybook/react';
 
diff --git a/apps/workshop/vite.config.mts b/apps/workshop/vite.config.mts
index 29bf350..49c35f7 100644
--- a/apps/workshop/vite.config.mts
+++ b/apps/workshop/vite.config.mts
@@ -13,4 +13,5 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
+  
 });
diff --git a/packages/design-system/components/Card/Card.tsx b/packages/design-system/components/Card/Card.tsx
index 5caa413..958f425 100644
--- a/packages/design-system/components/Card/Card.tsx
+++ b/packages/design-system/components/Card/Card.tsx
@@ -6,13 +6,6 @@ import { Box } from '../Box';
 import { createContext, useContext } from 'react';
 import type { OmitAtomProps } from '../../types/atoms';
 import * as styles from './Card.css';
-import { CardContent } from './CardBody';
-import { CardDescription } from './CardDescription';
-import { CardFooter } from './CardFooter';
-import { CardHeader } from './CardHeader';
-import { CardMedia } from './CardMedia';
-import { CardSubTitle } from './CardSubTitle';
-import { CardTitle } from './CardTitle';
 import type { Product } from './types/product';
 
 const DEFAULT_VALUE: Product = {
@@ -44,7 +37,7 @@ export interface CardProps
 	layout?: 'horizontal' | 'stacked';
 }
 
-const Card = forwardRef<HTMLDivElement, CardProps>(
+export const Card = forwardRef<HTMLDivElement, CardProps>(
 	(
 		{
 			product,
@@ -75,13 +68,3 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
 		);
 	},
 );
-const CardCompound = Object.assign(Card, {
-	Header: CardHeader,
-	Content: CardContent,
-	Footer: CardFooter,
-	Media: CardMedia,
-	Title: CardTitle,
-	SubTitle: CardSubTitle,
-	Description: CardDescription,
-});
-export { CardCompound as Card };
diff --git a/packages/design-system/components/Card/index.ts b/packages/design-system/components/Card/index.ts
new file mode 100644
index 0000000..efcc72d
--- /dev/null
+++ b/packages/design-system/components/Card/index.ts
@@ -0,0 +1,19 @@
+import { Card } from './Card';
+import { CardContent } from './CardBody';
+import { CardDescription } from './CardDescription';
+import { CardFooter } from './CardFooter';
+import { CardHeader } from './CardHeader';
+import { CardMedia } from './CardMedia';
+import { CardSubTitle } from './CardSubTitle';
+import { CardTitle } from './CardTitle';
+
+const CompoundCard = Object.assign(Card, {
+	Header: CardHeader,
+	Content: CardContent,
+	Footer: CardFooter,
+	Media: CardMedia,
+	Title: CardTitle,
+	SubTitle: CardSubTitle,
+	Description: CardDescription,
+});
+export { CompoundCard as Card };
diff --git a/packages/design-system/components/index.ts b/packages/design-system/components/index.ts
index 6633065..604ea88 100644
--- a/packages/design-system/components/index.ts
+++ b/packages/design-system/components/index.ts
@@ -4,4 +4,5 @@ export { Tabs } from './Tabs';
 export { Input } from './Input/Input';
 export { Button } from './Button/Button';
 export { Box, type BoxProps } from './Box';
-export { Card, type CardProps } from './Card/Card';
+export { type CardProps } from './Card/Card';
+export { Card } from './Card';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index e1af033..2581115 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -13,5 +13,8 @@
   },
   "dependencies": {
     "@jung/typescript-config": "workspace:*"
+  },
+  "devDependencies": {
+    "react": "^18.2.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d36531..5d8b09f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,10 @@ importers:
       '@jung/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
+    devDependencies:
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
 
   packages/typescript-config: {}