diff --git a/SerpentRace_Frontend/src/components/Card/Card.jsx b/SerpentRace_Frontend/src/components/Card/Card.jsx
new file mode 100644
index 00000000..675a6cb6
--- /dev/null
+++ b/SerpentRace_Frontend/src/components/Card/Card.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Card({ title, children, onClose }) {
+  return (
+    <div className="relative bg-white rounded-xl shadow-lg p-6 w-[400px] h-[300px]">
+      <button
+        onClick={onClose}
+        className="absolute top-2 right-2 text-gray-500 hover:text-black text-xl font-bold leading-none"
+        aria-label="Close"
+      >
+        ×
+      </button>
+      {title && <h2 className="text-xl font-semibold mb-4">{title}</h2>}
+      <div className="overflow-auto h-[calc(100%-3.5rem)]">{children}</div>
+    </div>
+  );
+}
+
+