diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
new file mode 100644
index 0000000..19c0089
--- /dev/null
+++ b/src/components/Card/Card.jsx
@@ -0,0 +1,23 @@
+import "./styles.sass";
+
+export const Card = ({game}) => {
+
+    const openGame = () => {
+        window.open(game.url, "_blank");
+    }
+
+    return (
+        <div className="card">
+            {game.banner && <img src={game.banner} alt={game.title} />}
+            <div className="card-content">
+                <h2>{game.name}</h2>
+                <p>{game.description}</p>
+                <div className="btn-area">
+                    <button className="btn btn-full" onClick={openGame}>Spielen</button>
+                    <button className="btn btn-light">Informationen</button>
+                </div>
+            </div>
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Card/styles.sass b/src/components/Card/styles.sass
new file mode 100644
index 0000000..178c82e
--- /dev/null
+++ b/src/components/Card/styles.sass
@@ -0,0 +1,23 @@
+@use "@/styles/colors" as *
+
+.card
+  width: 25rem
+  border-radius: 2rem
+  background-color: rgba($primary, 0.05)
+
+  .card-content
+    padding: 1rem 2rem 2rem 2rem
+
+    h2
+      margin: 0
+
+    p
+      color: $text-light
+
+  img
+    width: 100%
+    border-radius: 2rem 2rem 0 0
+
+  .btn-area
+    display: flex
+    gap: 0.5rem
\ No newline at end of file