diff --git a/src/App.css b/src/App.css
index 13c8e37..dc55806 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,7 +23,7 @@ a:hover {
   color: var( --main);
 }
 
-.header {
+.navbar {
   width: 100%;
   display: flex;
   justify-content: space-between;
diff --git a/src/App.jsx b/src/App.jsx
index b5d1a76..be49411 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import * as Bowser from 'bowser';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+import Navbar from './Navbar';
 import './App.css';
 
 const updateDOM = (id, text) => {
@@ -64,17 +63,7 @@ const App = () => {
 
   return (
     <div className="App">
-      <div className="header">
-        <div className="logoImage" />
-        <div className="menu">
-          <a href="url" target="_blank">
-            <FontAwesomeIcon icon={faExternalLinkAlt} size="lg" />
-          </a>
-          <a href="url" target="_blank">
-            <FontAwesomeIcon icon={faCog} size="lg" />
-          </a>
-        </div>
-      </div>
+      <Navbar />
       <table>
         <col className="column-one" />
         <div className="title">Connection</div>
diff --git a/src/Navbar.js b/src/Navbar.js
new file mode 100644
index 0000000..1399067
--- /dev/null
+++ b/src/Navbar.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+
+const Navbar = () => (
+  <div className="navbar">
+    <div className="logoImage" />
+    <div className="menu">
+      <a href="url" target="_blank">
+        <FontAwesomeIcon icon={faExternalLinkAlt} size="lg" />
+      </a>
+      <a href="url" target="_blank">
+        <FontAwesomeIcon icon={faCog} size="lg" />
+      </a>
+    </div>
+  </div>
+);
+
+export default Navbar;