diff --git a/src/components/NavBar.js b/src/components/NavBar.js
new file mode 100644
index 0000000..25cef64
--- /dev/null
+++ b/src/components/NavBar.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Navbar = () => {
+
+    return(
+        <>
+            <Nav>
+                <NavLink to="/">
+                    <h1 class="brand-name">Locaft</h1>
+                </NavLink>
+                <Bars />
+                <NavMenu>
+                    <NavLink to="/about" activeStyle>About</NavLink>
+                    <NavLink to="/services" activeStyle>services</NavLink>
+                    <NavLink to="/contact-us" activeStyle>contact-us</NavLink>
+                    <NavLink to="/Users/sign-up" activeStyle>Sign-in</NavLink>
+                    
+            
+
+
+                </NavMenu>
+            </Nav>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/NavBarElements.js b/src/components/NavBarElements.js
new file mode 100644
index 0000000..8f6e9b1
--- /dev/null
+++ b/src/components/NavBarElements.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+import { NavLink as Link } from 'react-router-dom';
+import {FaBars} from 'react-icons/fa';
+
+export const Nav = styled.nav`
+    background: #000;
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem calc((100vw - 1000px) / 2);
+    z-index: 10;
+
+`
+export const NavLink = styled(Link) `
+    
+`