diff --git a/src/plays/github-user-search/GitHubUserCard.jsx b/src/plays/github-user-search/GitHubUserCard.jsx
new file mode 100644
index 000000000..ea42e82dd
--- /dev/null
+++ b/src/plays/github-user-search/GitHubUserCard.jsx
@@ -0,0 +1,15 @@
+export const GitHubUserCard = ({username, avatar, link}) => {
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+      style={{backgroundImage: `url(${avatar})`}}
+      className=" bg-cover bg-center h-[15rem] w-[15rem] flex rounded-lg"
+    >
+      <h1 className="text-2xl p-2 w-full h-full text-white opacity-0 hover:opacity-80 hover:bg-black rounded-lg">
+        {username}
+      </h1>
+    </a>
+  );
+};