diff --git a/package-lock.json b/package-lock.json
index cb2cffea185eb53754d882d69a675e26fef1799b..1631057d87271924175bf2fe4f25c3fe0a346986 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "node-sass": "^7.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.2"
@@ -13949,6 +13950,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27317,6 +27326,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index f3b5c45f9956015e36ec55c11f3d55e9cbfc42a3..494d872e8d79fa97b6faebf75d586ce225cdb2f0 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1e61af739c1ca6b3c77222ec3da87e0c86200369
--- /dev/null
+++ b/src/components/Card/Card.module.scss
@@ -0,0 +1,18 @@
+.card {
+  display: flex;
+  background-color: #f8f9fa;
+  flex-direction: row;
+  justify-content: center;
+  width: 200px;
+  position: relative;
+  height: 8vh;
+  border: none;
+  padding: 10px 10px;
+  margin: 20px;
+}
+
+.card:hover {
+  border: 1px solid grey;
+  box-shadow: 1px 1px 6px -3px grey;
+  cursor: pointer;
+}
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..12bbfee75956aa4c2b4e3497e71606cf102da994
--- /dev/null
+++ b/src/components/Card/index.jsx
@@ -0,0 +1,19 @@
+import PropTypes from "prop-types";
+import cs from "classnames";
+import styles from "./Card.module.scss";
+
+function Card(props) {
+  const {customClass, children } = props;
+  return (
+    <div className={cs(customClass, styles.card)} title="Copy to clipboard">
+      {children}
+    </div>
+  );
+}
+
+Card.propTypes = {
+  children: PropTypes.element,
+  customClass: PropTypes.string,
+};
+
+export default Card;
diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx
index 2f53370911e3e79719d28ed0e9c12a0d0fb83cb2..369a4a4e1dee62a2f47b9386d436f0c27057565e 100644
--- a/src/containers/Login/index.jsx
+++ b/src/containers/Login/index.jsx
@@ -1,8 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Card from "components/Card";
+import { FaDiscord } from "react-icons/fa";
 
-function Login(props) {
-  return <div>login</div>;
+function Login() {
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      login
+      <Card customClass="card">
+        <FaDiscord style={{ fontSize: "27px", paddingRight: "10px" }} />
+        <p style={{fontSize: '16px'}}>Text 3</p>
+      </Card>
+    </div>
+  );
 }
 
 Login.propTypes = {};