diff --git a/apps/react/src/app/components/card/card.scss b/apps/react/src/app/components/card/card.scss
new file mode 100644
index 000000000..7decf5228
--- /dev/null
+++ b/apps/react/src/app/components/card/card.scss
@@ -0,0 +1,6 @@
+.card {
+  padding: 16px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+}
diff --git a/apps/react/src/app/components/card/card.tsx b/apps/react/src/app/components/card/card.tsx
new file mode 100644
index 000000000..6d3100244
--- /dev/null
+++ b/apps/react/src/app/components/card/card.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import './card.scss'
+
+export interface CardProps {
+  className?: string
+  children: React.ReactNode
+  'data-testid'?: string
+}
+
+export const Card: React.FC<CardProps> = ({ className, children, 'data-testid': dataTestId }) => {
+  return (
+    <section className={`card ${className || ''}`} data-testid={dataTestId}>
+      {children}
+    </section>
+  )
+}
diff --git a/apps/react/src/app/components/card/index.ts b/apps/react/src/app/components/card/index.ts
new file mode 100644
index 000000000..2a865313b
--- /dev/null
+++ b/apps/react/src/app/components/card/index.ts
@@ -0,0 +1,2 @@
+export { Card } from './card'
+export type { CardProps } from './card'