diff --git a/client/src/App.js b/client/src/App.js
index 176bf21..056fe98 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,8 +1,15 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+import NavBar from './components/Navbar';
 import { Footer } from './components';
 
 function App() {
   return (
     <div className="App">
+
+      <Router>
+        <NavBar />
+
+      </Router>
       <Footer />
     </div>
 
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..4d2c5ca
--- /dev/null
+++ b/client/src/components/Navbar/index.js
@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+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 [logged, setLogged] = useState(true);
+  return (
+    <Container maxWidth="xl">
+      <nav className="container">
+        <Link 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 to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button style={{ textDecoration: 'none' }}>
+              <ListItemText primary="Home" />
+            </ListItem>
+          </Link>
+
+          <Link to="/signup" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="About" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Buy" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Rent" />
+            </ListItem>
+          </Link>
+        </List>
+
+        <div className="agent">
+          <Button style={{
+            marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
+          }}
+          >
+            {' '}
+            <Link to="/login" className="btn-host">
+              <ListItemText primary="Host my House" style={{ color: '#fff' }} />
+            </Link>
+          </Button>
+          {logged ? (
+            <Link 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..63b5d4a
--- /dev/null
+++ b/client/src/components/Navbar/style.css
@@ -0,0 +1,18 @@
+.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;
+}