diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 29e5dbe..0e7b42c 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <nav>
     <div id="logo">
-      <h1><a href="/" title="Take me home">Bio Arch Linux</a></h1>
+      <h1><a href="/" title="Take me home">BioArchLinux</a></h1>
     </div>
 
     <ul id="navbarlist">
diff --git a/frontend/src/style/_nav.scss b/frontend/src/style/_nav.scss
index 04b723a..974ae1d 100644
--- a/frontend/src/style/_nav.scss
+++ b/frontend/src/style/_nav.scss
@@ -8,6 +8,22 @@ nav {
 
 #logo {
   margin-right: auto;
+
+  width: 190px;
+  height: 40px;
+  background: url('https://bioarchlinux.org/css/archnavbar/bioarchlinux.png') no-repeat;
+  background-size: 100%;
+
+  h1{
+    // make text offscreen
+    text-indent: -9999px !important;
+  }
+
+  a {
+    display: block;
+    width: 190px;
+    height: 40px;
+  }
 }
 
 #navbarlist {