diff --git a/package-lock.json b/package-lock.json
index cb2cffea185eb53754d882d69a675e26fef1799b..0a691e3974459c4c2840d4ec8332184c3db55ed6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^4.6.0",
         "classnames": "^2.3.1",
+        "jquery": "^3.6.0",
         "node-sass": "^7.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -4862,6 +4864,19 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10859,6 +10874,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -12492,6 +12512,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -20802,6 +20833,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -25164,6 +25201,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -26365,6 +26407,12 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
diff --git a/package.json b/package.json
index f3b5c45f9956015e36ec55c11f3d55e9cbfc42a3..5887a5b86a9f9679a709552293f03c8d08c88a95 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^4.6.0",
     "classnames": "^2.3.1",
+    "jquery": "^3.6.0",
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index acc1b1f6c799ea2f480a83ab5ab36f4ca2e17aea..9834b93025332a53d8323c4b49751fff212457a5 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -1,3 +1,11 @@
 .customButton {
-  background-color: red;
+  /* background-color: red; */
+  background-color: blue;
+  color: brown;
 }
+
+/* // .btn{
+//   .btn-abc{
+//     background-color: aqua;
+//   }
+// } */
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 81d9f273cf0dc01672cda8f26e51b6cc500a58a5..9118e88da4eaae60b4d07e372362f1e8b174a9bf 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -1,12 +1,12 @@
-import React from "react";
-import PropTypes from "prop-types";
-import cs from "classnames";
-import styles from "./Button.module.scss";
 
-function Button(props) {
-  return <div className={cs(styles.customButton)}>here</div>;
-}
+function Button(props){
+return (
+  <div className="btn btn-primary">
+   
+    {props.buttonName}
 
-Button.propTypes = {};
+  </div>
+)
+}
 
 export default Button;
diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2e6768d96587f10d3178fc1a4a2839d35d57a732
--- /dev/null
+++ b/src/components/Image/Image.scss
@@ -0,0 +1,11 @@
+
+.card-profile-image  {
+  position: absolute;
+  left: 50%;
+  max-width: 140px;
+  transition: all .15s ease;
+  transform: translate(-50%,-50%) scale(1);
+  border: 3px solid #fff;
+  border-radius: 0.375rem;
+  vertical-align: middle;
+}
diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6e840ed42e527c5f6a3c0cf2bdd920c34344812
--- /dev/null
+++ b/src/components/Image/index.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./Image.scss";
+
+// Profile Image common components
+function Image({src, width}) {
+    return (
+        <>
+            <div className="mt-7 card-profile-image">  
+                <img src={src} width={width}  className="rounded-circle card-profile-image"/>
+            </div>
+        </>
+    );
+}
+
+Image.propTypes = {
+    src: PropTypes.string,
+    width: PropTypes.string
+};
+
+export default Image;
diff --git a/src/components/index.js b/src/components/index.js
index 1fdf4382e5bd73f112a978acdddd4aa444265db1..e4f3c34bc38bfd1e20de5b11d630b343c8349734 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,3 @@
 export { default as Button } from "./Button";
+export { default as Image } from "./image";
+
diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx
index 2f53370911e3e79719d28ed0e9c12a0d0fb83cb2..eef0abf04c6b797c6a7d201447959caea3848e74 100644
--- a/src/containers/Login/index.jsx
+++ b/src/containers/Login/index.jsx
@@ -1,8 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Button from "components/Button";
 
 function Login(props) {
-  return <div>login</div>;
+  // return <div>login</div>;
+  return <>
+  <Button buttonName="pwe"/>
+  {/* <Button type="password" name="password" /> */}
+  </>
 }
 
 Login.propTypes = {};
diff --git a/src/index.js b/src/index.js
index 3b0bb3361e032a28facd5fb46dc83cc746bc4111..532e1b57444ef19873800abb716ccb959e65e2ee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,9 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "./assets/scss/argon.scss";
+import "jquery/dist/jquery.slim.min";
+import "bootstrap/dist/js/bootstrap.bundle.min";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(
   <React.StrictMode>