diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index 19d7e67..db5c5e8 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -21,6 +21,7 @@
         "react"
     ],
     "rules": {
-        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+        "import/prefer-default-export": "off"
     }
 }
diff --git a/client/.gitignore b/client/.gitignore
index 9779ad4..d21fdc8 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -17,7 +17,7 @@ package-lock.json
 .env.development.local
 .env.test.local
 .env.production.local
-
+.env
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
diff --git a/client/src/App.js b/client/src/App.js
index 2a4bc88..6c1dc7c 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,10 @@
+import { Search } from './components';
+
 function App() {
   return (
-    <div className="App" />
+    <div className="App">
+      <Search />
+    </div>
 
   );
 }
diff --git a/client/src/assets/Solid.svg b/client/src/assets/Solid.svg
new file mode 100644
index 0000000..7626394
--- /dev/null
+++ b/client/src/assets/Solid.svg
@@ -0,0 +1,4 @@
+<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.97527 17.6284C9.4056 17.6284 10.567 17.1359 11.4515 16.5323C11.6364 16.4061 11.8776 16.4061 12.0625 16.5323C12.947 17.1359 14.1084 17.6284 15.5388 17.6284C16.9691 17.6284 18.1305 17.1359 19.015 16.5323C19.1999 16.4061 19.4411 16.4061 19.626 16.5323C20.5105 17.1359 21.6719 17.6284 23.1023 17.6284C23.6587 17.6284 24.221 17.5798 24.7705 17.465C25.1949 17.3764 25.6234 17.6924 25.6234 18.1392V24.1312C25.6234 26.286 23.9303 28.0328 21.8417 28.0328H19.3205C18.6243 28.0328 18.0599 27.4505 18.0599 26.7323V22.8306C18.0599 21.3941 16.9312 20.2295 15.5388 20.2295C14.1464 20.2295 13.0176 21.3941 13.0176 22.8306V26.7323C13.0176 27.4505 12.4532 28.0328 11.757 28.0328H9.23585C7.14725 28.0328 5.4541 26.286 5.4541 24.1312V18.1392C5.4541 17.6924 5.88264 17.3764 6.30704 17.465C6.85658 17.5798 7.41881 17.6284 7.97527 17.6284Z" fill="#2E72DB"/>
+<path d="M6.58865 6.23278C7.43155 5.16164 8.7264 4.62296 10.0637 4.62296H21.0135C22.3508 4.62296 23.6457 5.16164 24.4886 6.23278C25.5679 7.60442 26.8839 9.59133 26.8839 11.1257C26.8839 13.7268 25.6233 15.0273 23.1021 15.0273C21.2428 15.0273 20.069 13.6126 19.581 12.8698C19.4644 12.6924 19.1764 12.6924 19.0598 12.8698C18.5717 13.6126 17.398 15.0273 15.5386 15.0273C13.6793 15.0273 12.5055 13.6126 12.0175 12.8698C11.9009 12.6924 11.6129 12.6924 11.4963 12.8698C11.0082 13.6126 9.83446 15.0273 7.97511 15.0273C5.45394 15.0273 4.19336 13.7268 4.19336 11.1257C4.19336 9.59133 5.50929 7.60442 6.58865 6.23278Z" fill="#2E72DB"/>
+</svg>
diff --git a/client/src/assets/index.js b/client/src/assets/index.js
new file mode 100644
index 0000000..96bb1bb
--- /dev/null
+++ b/client/src/assets/index.js
@@ -0,0 +1,3 @@
+export { default as marker } from './marker.svg';
+export { default as money } from './money.svg';
+export { default as room } from './Solid.svg';
diff --git a/client/src/assets/marker.svg b/client/src/assets/marker.svg
new file mode 100644
index 0000000..943ad7b
--- /dev/null
+++ b/client/src/assets/marker.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5081 27.8762C20.6494 25.3201 26.5149 19.6593 26.5149 13.0273C26.5149 7.0246 21.6169 2.15845 15.5748 2.15845C9.5328 2.15845 4.63477 7.0246 4.63477 13.0273C4.63477 19.6593 10.5003 25.3201 13.6416 27.8762C14.7805 28.803 16.3691 28.803 17.5081 27.8762ZM15.5748 15.4426C17.5888 15.4426 19.2215 13.8205 19.2215 11.8196C19.2215 9.81875 17.5888 8.1967 15.5748 8.1967C13.5608 8.1967 11.9281 9.81875 11.9281 11.8196C11.9281 13.8205 13.5608 15.4426 15.5748 15.4426Z" fill="#2E72DB"/>
+</svg>
diff --git a/client/src/assets/money.svg b/client/src/assets/money.svg
new file mode 100644
index 0000000..d6bcc39
--- /dev/null
+++ b/client/src/assets/money.svg
@@ -0,0 +1,8 @@
+<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_333:8353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="6" width="25" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4186 6.23178C22.8356 6.23178 24.2534 6.46502 25.6701 7.07808C26.0941 7.26158 26.3582 7.71224 26.3586 8.18851V20.1426C26.3586 20.8393 25.8093 21.3412 25.1807 21.3412C25.0565 21.3412 24.9295 21.3216 24.8027 21.2801C23.6745 20.9109 22.5471 20.7631 21.4189 20.7631C19.1697 20.7631 16.9205 21.3505 14.6712 21.9378C12.422 22.5252 10.1728 23.1125 7.92354 23.1125C6.50647 23.1125 5.08867 22.8793 3.67197 22.2658C3.24794 22.0827 2.98389 21.6317 2.98389 21.1558V9.20136C2.98389 8.50465 3.53318 8.00275 4.16173 8.00275C4.28591 8.00275 4.41301 8.02234 4.53974 8.06379C5.66792 8.43306 6.79536 8.58076 7.92354 8.58076C10.1726 8.58076 12.4215 7.99352 14.6705 7.40627C16.9198 6.81893 19.1691 6.23159 21.4186 6.23178ZM7.02768 10.3446C6.23879 10.2933 5.47182 10.198 4.73699 10.0081V12.2866C5.86919 12.2866 6.81293 11.452 7.02768 10.3446ZM4.73699 20.7469V18.9466C5.99227 18.9466 7.00796 19.9741 7.06384 21.2602C6.24099 21.1919 5.47182 21.0224 4.73699 20.7469ZM11.7493 14.6722C11.7493 16.6696 13.0571 18.2895 14.671 18.2895C16.2842 18.2895 17.5928 16.6703 17.5928 14.6722C17.5928 12.6743 16.2846 11.0549 14.671 11.0549C13.0575 11.0549 11.7493 12.6743 11.7493 14.6722ZM24.605 19.3362C23.9652 19.1708 23.3008 19.0781 22.6211 19.0182C22.8355 18.0355 23.6255 17.2894 24.605 17.1613V19.3362ZM22.5669 8.12031C22.6016 9.32043 23.477 10.2922 24.6052 10.4395V8.59734C23.958 8.35506 23.2805 8.20208 22.5669 8.12031Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_333:8353)">
+<rect x="0.642578" y="0.180328" width="28.093" height="28.9836" fill="#2E72DB"/>
+</g>
+</svg>
diff --git a/client/src/components/Search/index.js b/client/src/components/Search/index.js
new file mode 100644
index 0000000..507787e
--- /dev/null
+++ b/client/src/components/Search/index.js
@@ -0,0 +1,67 @@
+import { Container, Button, TextField } from '@mui/material';
+import { marker, money, room } from '../../assets';
+import './style.css';
+
+function Search() {
+  return (
+    <Container maxWidth="xl">
+      <div className="search-container">
+        <Button variant="contained" size="medium" className="btn active-search">
+          Rent
+        </Button>
+        <Button variant="contained" size="medium" className="btn">
+          Sale
+        </Button>
+        <div className="search-bar">
+          <div className="search-bar-container">
+            <TextField
+              InputProps={{
+                startAdornment: (
+                  <span>
+                    <img src={marker} alt="marker" />
+                  </span>
+                ),
+              }}
+              hiddenLabel
+              id="filled-hidden-label-normal"
+              placeholder="Enter your location"
+              variant="filled"
+            />
+            <TextField
+              InputProps={{
+                startAdornment: (
+                  <span>
+                    <img src={money} alt="marker" />
+                  </span>
+                ),
+              }}
+              hiddenLabel
+              id="filled-hidden-label-normal"
+              placeholder=" max price"
+              variant="filled"
+            />
+            <TextField
+              InputProps={{
+                startAdornment: (
+                  <span>
+                    <img src={room} alt="marker" />
+                  </span>
+                ),
+              }}
+              hiddenLabel
+              id="filled-hidden-label-normal"
+              placeholder="room number"
+              variant="filled"
+            />
+            <Button variant="contained" size="large" className="btn btn-search">
+              Search
+            </Button>
+          </div>
+        </div>
+
+      </div>
+    </Container>
+  );
+}
+
+export default Search;
diff --git a/client/src/components/Search/style.css b/client/src/components/Search/style.css
new file mode 100644
index 0000000..9f3c749
--- /dev/null
+++ b/client/src/components/Search/style.css
@@ -0,0 +1,58 @@
+.search-container .css-sghohy-MuiButtonBase-root-MuiButton-root {
+        background-color: #fff;
+        text-transform: capitalize;
+        border-radius: 4px;
+        color:#2E72DB;
+        box-shadow: none;
+        border-radius: 4px 0px 0px 0px;
+        padding: 0.5rem 2rem;
+}
+.search-container .css-sghohy-MuiButtonBase-root-MuiButton-root:hover {
+   background-color: #123B65;
+   color:#fff;
+   box-shadow: none;
+}
+.search-container .active-search{
+   background-color: #123B65;
+   color:#fff;
+}
+.search-container .active-search:hover{
+       background-color: #fff;
+        color:#2E72DB;
+}
+.search-container{
+    width:75%
+}
+.search-bar{
+    background: #fff;
+    display: flex;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    padding: 0 0.5rem;
+}
+.search-bar-container{
+   display: flex; 
+   padding: 0.35rem 0;
+    width: 100%;
+    justify-content: space-between;
+}
+.search-bar-container img{
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.5rem;
+}
+.search-container input#filled-hidden-label-normal {
+    width: 10rem;
+    font-size: .8em;
+    color: #1e74da;
+}
+.btn-search.css-jh47zj-MuiButtonBase-root-MuiButton-root{
+    text-transform: capitalize;
+    width: 10rem;
+    font-weight: 700;
+}
+.search-container .css-sgvi9r-MuiInputBase-root-MuiFilledInput-root:before {
+    border:none
+}
+.search-container .css-sgvi9r-MuiInputBase-root-MuiFilledInput-root{
+    border-radius: 4px;
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index e69de29..1d53a98 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -0,0 +1 @@
+export { default as Search } from './Search';
diff --git a/client/src/index.js b/client/src/index.js
index 62adcf3..f452ad2 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -7,6 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-