diff --git a/src/components/MapContainer/NavBar.tsx b/src/components/MapContainer/NavBar.tsx
new file mode 100644
index 0000000..2d82a8b
--- /dev/null
+++ b/src/components/MapContainer/NavBar.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Nav: React.FC = () => {
+  return (
+    <div
+      style={{
+        backgroundColor: '#333',
+        marginBottom: '10px',
+        paddingBottom: '10px',
+      }}
+      className="container"
+    >
+      <h1 style={{ display: 'flex', justifyContent: 'center', color: 'white' }}>
+        {' '}
+        (Test OL) Orca Map
+      </h1>
+    </div>
+  )
+}
+
+export default Nav
diff --git a/src/views/App.tsx b/src/views/App.tsx
index 30eb70c..5a9fd9c 100644
--- a/src/views/App.tsx
+++ b/src/views/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-
+import Nav from '../components/MapContainer/NavBar'
 import MapContainer from '../components/MapContainer/MapContainer'
 
 const App: React.FC = () => {
   return (
     <div className="App">
-      <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
+      <Nav />
       <MapContainer />
     </div>
   )