diff --git a/public/index.html b/public/index.html
index 626bacdf539698fbd4cf59e6865a261ec98e56a5..a46d305ec0a24e254b6f92bcf888e7703e044938 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01690d459a8020f8cd7c2dfff08fe8efc453ce0d
--- /dev/null
+++ b/src/components/Button/Button.module.scss
@@ -0,0 +1,5 @@
+.customButton {
+   background-color: red; 
+}
+
+
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..afee0bad4344e3887667f851a4fe01395f84d8c0
--- /dev/null
+++ b/src/components/Button/index.jsx
@@ -0,0 +1,11 @@
+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>;
+}
+
+Button.propTypes = {};
+export default Button;
diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..73875de3ddc68689c666760190bc1a35f5b99b84
--- /dev/null
+++ b/src/components/Image/Image.scss
@@ -0,0 +1,6 @@
+
+.card-profile-image  {
+  max-width: 140px;
+  border: 3px solid #fff;
+  border-radius: 0.375rem;
+}
diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3e07be5c2b129ac1be955ef60b9d12215915aaf0
--- /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="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/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f9e83dbaa25472ea332044930a9ced5a8a38f8e9
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import './SearchBar.scss'
+
+export default function SearchBar(props) {
+    const [isFocus, setIsFocus] = useState(false);
+
+const handleChange =(value)=>{
+    props.onSearch(value)
+
+}
+    return (
+        <div className={isFocus ?'inputBox focused' :'inputBox'}>
+            <i className="fa fa-search icon" aria-hidden="true"></i>
+            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} onChange={(e)=>handleChange(e.target.value)} />
+        </div>
+    )
+}
diff --git a/src/components/SearchBar/SearchBar.scss b/src/components/SearchBar/SearchBar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ff3f686d555b5ade8392350e0ae1d3f3e1f5a205
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.scss
@@ -0,0 +1,35 @@
+
+.inputBox{
+    display: flex;
+    width: 250px;
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: #fff;
+    padding: 5px;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.focused{
+    width: 380px!important;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.search-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 2px;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    outline: #fff;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0px solid #fff !important;
+    border-color: #fff !important;
+    border-radius: 50px;
+}
+.icon{
+    margin:10px;
+    font-size: 15px;
+   cursor: pointer;
+  color: gray;
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 50ebe2f70d204e68bb599729ddef166bd132053c..dfd77b0712e18d7f6fdbac546e6ac39418f35bc2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,2 @@
-export { default as Button } from "./Btn";
+export { default as Button } from "./Button";
+export{default as SearchBar} from './SearchBar'