diff --git a/src/App.js b/src/App.js
index a6b0e694..b284bb90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,18 @@
 import React, { useState, useCallback} from 'react';
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import  * as BS from 'react-bootstrap'
-import Toggle from 'react-toggle'
-import useDarkMode from 'use-dark-mode';
 
 import './App.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "react-toggle/style.css"
-import { FaSun, FaMoon } from "react-icons/fa";
 
 import Dash from './Pages/Dash.js'
-import history from "./History.js";
+import history from "./History.js"
 import Footer from './Components/Footer.js'
 import Public from './Pages/Public.js'
 import Home from './Pages/Home.js'
 import Settings from './Pages/Settings.js'
+import Navbar from './Components/Navbar.js'
 
 export default function App() {
   const [isLoading, setIsLoading] = useState(false);
@@ -23,38 +21,11 @@ export default function App() {
 
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({}), []);
-  const darkMode = useDarkMode(false);
-
-  function logOut() {
-    setIsSubmit(false);
-    localStorage.removeItem("token");
-    localStorage.removeItem("user");
-    history.push("/pk-webs");
-    forceUpdate();
-  }
 
   return (
     <div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
       <Router history={history} basename="/pk-webs">
-      <BS.Navbar className="mb-5 align-items-center">
-            <BS.Navbar.Brand href="/pk-webs">
-                pk-webs
-            </BS.Navbar.Brand>
-            <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
-            { localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
-
-            </BS.NavDropdown>
-            <BS.Nav className="mr-2 d-flex align-items-center row">
-            <Toggle
-                defaultChecked={true}
-                icons={false}
-                onChange={darkMode.toggle} />
-                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
-            </BS.Nav>
-        </BS.Navbar>
+        <Navbar forceUpdate={forceUpdate} setIsSumbit={setIsSubmit} />
         <div className="content">
           <BS.Container>
             <Switch>
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
new file mode 100644
index 00000000..160c0bc3
--- /dev/null
+++ b/src/Components/Navbar.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import  * as BS from 'react-bootstrap'
+import Toggle from 'react-toggle'
+import { FaSun, FaMoon } from "react-icons/fa";
+import useDarkMode from 'use-dark-mode';
+
+import history from "../History.js";
+
+const Navbar = ({ setIsSubmit, forceUpdate}) => {
+    const darkMode = useDarkMode(false);
+
+    function logOut() {
+        setIsSubmit(false);
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        history.push("/pk-webs");
+        forceUpdate();
+      }
+
+    return(
+        <BS.Navbar className="mb-5 align-items-center">
+            <BS.Navbar.Brand href="/pk-webs">
+                pk-webs
+            </BS.Navbar.Brand>
+            <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
+            { localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
+
+            </BS.NavDropdown>
+            <BS.Nav className="mr-2 d-flex align-items-center row">
+            <Toggle
+                defaultChecked={true}
+                icons={false}
+                onChange={darkMode.toggle} />
+                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
+            </BS.Nav>
+        </BS.Navbar>
+    );
+}
+
+export default Navbar;
\ No newline at end of file