diff --git a/client/src/asstes/avatar.png b/client/src/asstes/avatar.png
new file mode 100644
index 0000000..57ac67e
Binary files /dev/null and b/client/src/asstes/avatar.png differ
diff --git a/client/src/asstes/logo.png b/client/src/asstes/logo.png
new file mode 100644
index 0000000..b00a296
Binary files /dev/null and b/client/src/asstes/logo.png differ
diff --git a/client/src/components/Navbar/index.js b/client/src/components/Navbar/index.js
new file mode 100644
index 0000000..9108c77
--- /dev/null
+++ b/client/src/components/Navbar/index.js
@@ -0,0 +1,77 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import Link from '@mui/material/Link';
+import {
+  ListItem, ListItemText, Button, Avatar, Container, List,
+} from '@mui/material';
+import './style.css';
+
+import Logo from '../../asstes/logo.png';
+import PresonImg from '../../asstes/avatar.png';
+
+function NavBar() {
+  const [state, setstate] = useState(true);
+  return (
+    <Container maxWidth="xl">
+      <nav className="container">
+        <Link component={RouterLink} to="/">
+          <img src={Logo} alt="logo-housy" className="img-logo" />
+        </Link>
+        {' '}
+        <List
+          className="list"
+          sx={{ justifyContent: 'space-between' }}
+          style={{
+            marginRight: '150px', alignSelf: 'center', color: '#797B7D',
+          }}
+        >
+          <Link component={RouterLink} to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button style={{ textDecoration: 'none' }}>
+              <ListItemText primary="Home" />
+            </ListItem>
+          </Link>
+
+          <Link component={RouterLink} to="/signup" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="About" />
+            </ListItem>
+          </Link>
+          <Link component={RouterLink} to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Buy" />
+            </ListItem>
+          </Link>
+          <Link component={RouterLink} to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Rent" />
+            </ListItem>
+          </Link>
+        </List>
+        {/* </Stack> */}
+
+        <div className="agent">
+          <Button style={{
+            marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
+          }}
+          >
+            {' '}
+            <Link component={RouterLink} to="/login" className="btn-host">
+              <ListItemText primary="Host my House" style={{ color: '#fff' }} />
+            </Link>
+          </Button>
+          {state ? (
+            <Link component={RouterLink} to="/">
+              <Avatar src={PresonImg} />
+            </Link>
+          ) : (
+            ''
+          )}
+        </div>
+
+      </nav>
+    </Container>
+
+  );
+}
+export default NavBar;
diff --git a/client/src/components/Navbar/style.css b/client/src/components/Navbar/style.css
new file mode 100644
index 0000000..9a6bcc2
--- /dev/null
+++ b/client/src/components/Navbar/style.css
@@ -0,0 +1,23 @@
+.container{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    
+}
+.img-logo{
+    width: 90px;
+    height: 80px;
+
+}
+.list{
+    display: flex ;
+    align-self: center;
+
+}
+.agent{
+
+    display: flex ;
+    flex-direction: row ;
+    align-self: center;
+
+}
\ No newline at end of file
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'),
 );
-