diff --git a/src/components/HomePage.js b/src/components/HomePage.js
index ddcbb99..75dfe10 100644
--- a/src/components/HomePage.js
+++ b/src/components/HomePage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import '../homepage.css';
 import LogInContainer from './LogInContainer';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import Navbar from './NavBar';
 
 
 class  HomePage extends Component {
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 25cef64..5d15aa3 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,25 +1,34 @@
-import React from 'react';
+import React, {Component} from 'react';
+import '../navbar.css';
 
-const Navbar = () => {
+class  NavBar extends Component {
 
+    render(){
     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>
-        </>
+      <div class="nav">
+  <input type="checkbox" id="nav-check" />
+  <div class="nav-header">
+    <div class="nav-title">
+        locaft
+    </div>
+  </div>
+  <div class="nav-btn">
+    <label for="nav-check">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </div>
+  
+  <div class="nav-links">
+    <a href="//github.io/jo_geek" target="_blank">Github</a>
+    <a href="http://stackoverflow.com/users/4084003/" target="_blank">Stackoverflow</a>
+    <a href="https://in.linkedin.com/in/jonesvinothjoseph" target="_blank">LinkedIn</a>
+    <a href="https://codepen.io/jo_Geek/" target="_blank">Codepen</a>
+    <a href="https://jsfiddle.net/user/jo_Geek/" target="_blank">JsFiddle</a>
+  </div>
+    </div> 
     )
-}
\ No newline at end of file
+    }
+}
+export default NavBar;
\ No newline at end of file
diff --git a/src/components/NavBarElements.js b/src/components/NavBarElements.js
deleted file mode 100644
index 8f6e9b1..0000000
--- a/src/components/NavBarElements.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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) `
-    
-`
diff --git a/src/components/PricingPlan.js b/src/components/PricingPlan.js
index be09e97..c40e071 100644
--- a/src/components/PricingPlan.js
+++ b/src/components/PricingPlan.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import './pricing-plan.css';
+import NavBar from './NavBar';
 
 class PricingPlan extends Component {
 
     render(){
         return(
             <div className="body">
+                <NavBar />
                 <div class='pricing-plan-container'>
 
                 <section class='pricing-plan '>
diff --git a/src/navbar.css b/src/navbar.css
new file mode 100644
index 0000000..43eb842
--- /dev/null
+++ b/src/navbar.css
@@ -0,0 +1,99 @@
+
+* {
+
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0px;
+  font-family: 'segoe ui';
+}
+
+.nav {
+  height: 50px;
+  width: 100%;
+  background-color: #4d4d4d;
+  position: relative;
+}
+
+.nav > .nav-header {
+  display: inline;
+}
+
+.nav > .nav-header > .nav-title {
+  display: inline-block;
+  font-size: 22px;
+  color: #fff;
+  padding: 10px 10px 10px 10px;
+}
+
+.nav > .nav-btn {
+  display: none;
+}
+
+.nav > .nav-links {
+  display: inline;
+  float: right;
+  font-size: 18px;
+}
+
+.nav > .nav-links > a {
+  display: inline-block;
+  padding: 13px 10px 13px 10px;
+  text-decoration: none;
+  color: #efefef;
+}
+
+.nav > .nav-links > a:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.nav > #nav-check {
+  display: none;
+}
+
+@media (max-width:600px) {
+  .nav > .nav-btn {
+    display: inline-block;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+  }
+  .nav > .nav-btn > label {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    padding: 13px;
+  }
+  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .nav > .nav-btn > label > span {
+    display: block;
+    width: 25px;
+    height: 10px;
+    border-top: 2px solid #eee;
+  }
+  .nav > .nav-links {
+    position: absolute;
+    display: block;
+    width: 100%;
+    background-color: #333;
+    height: 0px;
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 50px;
+    left: 0px;
+  }
+  .nav > .nav-links > a {
+    display: block;
+    width: 100%;
+  }
+  .nav > #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+  }
+  .nav > #nav-check:checked ~ .nav-links {
+    height: calc(100vh - 50px);
+    overflow-y: auto;
+  }
+}
\ No newline at end of file