diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index ca131ccb9705f00e74ffca341b8600f66ec4359c..f9e83dbaa25472ea332044930a9ced5a8a38f8e9 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -1,12 +1,17 @@
 import React, { useState } from 'react'
 import './SearchBar.scss'
 
-export default function SearchBar() {
+export default function SearchBar(props) {
     const [isFocus, setIsFocus] = useState(false);
+
+const handleChange =(value)=>{
+    props.onSearch(value)
+
+}
     return (
         <div className={isFocus ?'inputBox focused' :'inputBox'}>
-            <i style={{margin:'10px',fontSize:'15px',cursor:'pointer',color:'gray'}} class="fa fa-search" aria-hidden="true"></i>
-            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} />
+            <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
index 540b812a4c39de561bacf22e9355c9a5422867a1..ff3f686d555b5ade8392350e0ae1d3f3e1f5a205 100644
--- a/src/components/SearchBar/SearchBar.scss
+++ b/src/components/SearchBar/SearchBar.scss
@@ -1,17 +1,16 @@
 
 .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;
@@ -27,8 +26,10 @@
     border: 0px solid #fff !important;
     border-color: #fff !important;
     border-radius: 50px;
-  
-    transition: width 10s ease-in-out;
-     
-
 }
+.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 1fdf4382e5bd73f112a978acdddd4aa444265db1..dfd77b0712e18d7f6fdbac546e6ac39418f35bc2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,2 @@
 export { default as Button } from "./Button";
+export{default as SearchBar} from './SearchBar'
diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx
index 9c29213612ed3de5543876fec507bed56619bf31..8f682e2abff5daff6dadcde3c884414e47b60f06 100644
--- a/src/containers/Login/index.jsx
+++ b/src/containers/Login/index.jsx
@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
 import SearchBar from "components/SearchBar/SearchBar";
 
 function Login(props) {
+const onSearch =(value)=>{
+}
   return (
     <>
   <div style={{backgroundColor:'blue',padding:'50px'}}> login
-  <SearchBar/>
+  <SearchBar onSearch={onSearch}/>
   </div>
  
   </>