diff --git a/devnotes/index.html b/devnotes/index.html
index c86c920..173acfb 100644
--- a/devnotes/index.html
+++ b/devnotes/index.html
@@ -3,9 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <title>Dev Notes | Atom596.com</title>
+    <script type="text/javascript" src="/script/topbar.js"></script>
     <link rel="stylesheet" href="/style/main.css">
 </head>
 <body>
     <h1>Dev Notes</h1>
+    <div id="topbar"></div>
 </body>
 </html>
diff --git a/style/home.css b/style/home.css
index dd26ba8..0857e29 100644
--- a/style/home.css
+++ b/style/home.css
@@ -1,7 +1,3 @@
-h1 {
-    text-align: center;
-}
-
 .plans {
     padding: 10px;
     width: 70%;
diff --git a/style/main.css b/style/main.css
index e90b33d..6b0c546 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,3 +1,7 @@
+h1 {
+    text-align: center;
+}
+
 body {
     background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/moroccan-flower.png");
     background-repeat: repeat;
diff --git a/style/topbar.css b/style/topbar.css
new file mode 100644
index 0000000..327e0d8
--- /dev/null
+++ b/style/topbar.css
@@ -0,0 +1,11 @@
+.topbar {
+    width: 100%;
+    border: 4px solid lightslategray;
+    background-color: silver;
+    text-align: center;
+}
+
+.links {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
diff --git a/topbar.html b/topbar.html
index c97ce93..adec612 100644
--- a/topbar.html
+++ b/topbar.html
@@ -1,6 +1,7 @@
-<hr>
-<h3>
+<link rel="stylesheet" href="/style/topbar.css">
+<div class="topbar">
+<h3 class="links">
     <a href="https://www.atom596.com/">Home</a>
     | <a href="https://www.atom596.com/devnotes/">Dev Notes</a>
 </h3>
-</hr>
\ No newline at end of file
+</div>
