diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..76de8c34cd4247c5d9bef1bada7d1c76bdc2e2c7
--- /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;
+
+  &: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..6f9137cb5929efbd9848f2b2e533d5210d4962e2
--- /dev/null
+++ b/src/components/Card/index.jsx
@@ -0,0 +1,23 @@
+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(styles.card, customClass )}>
+      {children}
+    </div>
+  );
+}
+
+Card.propTypes = {
+  children: PropTypes.element,
+  customClass: PropTypes.string,
+};
+
+Card.defaultProps = {
+  customClass: "",
+}
+
+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 = {};