diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index acc1b1f6c799ea2f480a83ab5ab36f4ca2e17aea..66842d06a34b1774d7ba6442c85eff3b2c657c83 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -1,3 +1,43 @@
-.customButton {
-  background-color: red;
+.button {
+  font-size: 0.75rem;
+  color: #5e72e4 !important;
+  position: relative;
+  transition: all 0.15s ease !important;
+  letter-spacing: 0.025em;
+  text-transform: none;
+  will-change: transform;
+  line-height: 1.5 !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 0.25rem !important;
+  border-color: #fff;
+  background-color: #fff !important;
+  box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11),
+    0 1px 3px rgba(0.1, 0.1, 0.1, 0.8);
+  font-weight: 600;
+  line-height: 1.5 !important;
+  display: inline-block;
+  /* padding: 0.625rem 1.25rem!important; */
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0.25rem !important;
+  margin-right: 16px;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1),
+      0 3px 6px rgba(0, 0, 0, 0.8);
+    color: #212529 !important;
+    border-color: #fff !important;
+    background-color: #fff !important;
+  }
+  &.filledbutton {
+    color: #fff;
+    background-color: #5e72e4;
+  }
 }
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 81d9f273cf0dc01672cda8f26e51b6cc500a58a5..e3f6dbfd649200dfd915a57aed174179cca694eb 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -1,12 +1,33 @@
 import React from "react";
 import PropTypes from "prop-types";
 import cs from "classnames";
-import styles from "./Button.module.scss";
+import style from "./Button.module.scss";
 
 function Button(props) {
-  return <div className={cs(styles.customButton)}>here</div>;
+  const { label, customClass, disabled, variant, handleButtonClick } = props;
+  return (
+    <button
+      onClick={handleButtonClick}
+      className={cs(style.button, style[variant], customClass)}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
 }
 
-Button.propTypes = {};
+Button.propTypes = {
+  customClass: PropTypes.string,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  variant: PropTypes.oneOf(["filledbutton"]),
+  handleButtonClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  label: "Button",
+  variant: "filledbutton",
+  customClass: "",
+};
 
 export default Button;