diff --git a/frontend/index.html b/frontend/index.html
index 2cd5080..05e19ce 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,26 +7,7 @@
     <title>BioArchLinux packages</title>
   </head>
   <body>
-    <!-- ArchLinux Like NavBar -->
-    <nav>
-      <div id="logo">
-        <h1><a href="/" title="Take me home">Bio Arch Linux</a></h1>
-      </div>
-      <ul id="navbarlist">
-        <li><a href="https://bioarchlinux.org/">Home</a></li>
-        <li><a href="#" class="active">Packages</a></li>
-        <li><a href="https://matrix.to/#/#bioarchlinux:matrix.org">Chat</a></li>
-        <li><a href="https://wiki.bioarchlinux.org/">Wiki</a></li>
-        <li><a href="https://repo.bioarchlinux.org/">Repository</a></li>
-        <li><a href="https://build.bioarchlinux.org/">Status</a></li>
-        <li><a href="https://hub.docker.com/r/bioarchlinux/bioarchlinux">Docker</a></li>
-        <li><a href="https://github.com/BioArchLinux/wsl">WSL</a></li>
-      </ul>
-    </nav>
-
-    <!-- Vue Render ROOT -->
     <div id="app"></div>
-    
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 571f313..81e85f6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,10 @@
 <script setup>
+import Navbar from '@/components/Navbar.vue'
 </script>
 
 <template>
-  <router-view></router-view>
+  <Navbar></Navbar>
+  <div class="content">
+    <router-view></router-view>
+  </div>
 </template>
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
new file mode 100644
index 0000000..29e5dbe
--- /dev/null
+++ b/frontend/src/components/Navbar.vue
@@ -0,0 +1,18 @@
+<template>
+  <nav>
+    <div id="logo">
+      <h1><a href="/" title="Take me home">Bio Arch Linux</a></h1>
+    </div>
+
+    <ul id="navbarlist">
+      <li><a href="https://bioarchlinux.org/">Home</a></li>
+      <li><router-link to="/" class="active">Packages</router-link></li>
+      <li><a href="https://matrix.to/#/#bioarchlinux:matrix.org">Chat</a></li>
+      <li><a href="https://wiki.bioarchlinux.org/">Wiki</a></li>
+      <li><a href="https://repo.bioarchlinux.org/">Repository</a></li>
+      <li><a href="https://build.bioarchlinux.org/">Status</a></li>
+      <li><a href="https://hub.docker.com/r/bioarchlinux/bioarchlinux">Docker</a></li>
+      <li><a href="https://github.com/BioArchLinux/wsl">WSL</a></li>
+    </ul>
+  </nav>
+</template>
diff --git a/frontend/src/style/main.scss b/frontend/src/style/main.scss
index 2a31122..c2b4d9f 100644
--- a/frontend/src/style/main.scss
+++ b/frontend/src/style/main.scss
@@ -9,7 +9,7 @@
   padding: 0;
 }
 
-#app {
+.content {
   padding: 15px;
 }
 
