diff --git a/app/react/components/Card/Card.stories.tsx b/app/react/components/Card/Card.stories.tsx
new file mode 100644
index 000000000..985a9972c
--- /dev/null
+++ b/app/react/components/Card/Card.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/react';
+import { PropsWithChildren } from 'react';
+
+import { Card, Props } from './Card';
+
+export default {
+  component: Card,
+  title: 'Components/Card/Card',
+} as Meta;
+
+function Template({
+  children,
+}: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
+  return <Card>{children}</Card>;
+}
+
+export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
+Primary.args = {};
diff --git a/app/react/components/Card/Card.tsx b/app/react/components/Card/Card.tsx
new file mode 100644
index 000000000..1839f649e
--- /dev/null
+++ b/app/react/components/Card/Card.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+
+export interface Props {
+  className?: string;
+}
+
+export function Card({ className, children }: PropsWithChildren<Props>) {
+  return (
+    <div
+      className={clsx(
+        className,
+        'rounded border border-solid border-gray-5 bg-gray-neutral-3 p-5 th-highcontrast:border-white th-highcontrast:bg-black th-dark:border-legacy-grey-3 th-dark:bg-gray-iron-11'
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/app/react/components/Card/index.ts b/app/react/components/Card/index.ts
new file mode 100644
index 000000000..1e15afd14
--- /dev/null
+++ b/app/react/components/Card/index.ts
@@ -0,0 +1 @@
+export { Card } from './Card';