diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/BasicDashboard.vue b/src/pages/BasicDashboard.vue
index b56945a..51d7b55 100644
--- a/src/pages/BasicDashboard.vue
+++ b/src/pages/BasicDashboard.vue
@@ -1,7 +1,27 @@
 <script lang="ts">
   import Navbar from '../components/Navbar.vue';
 
+  interface NavbarItem {
+    name: string;
+    link: string
+  }
+
+  const navbarItems: NavbarItem[] = [
+    { name: "Overview", link: "/basic" },
+    { name: "Internet Setup", link: "/basic/internet" },
+    { name: "Wireless Settings", link:"/basic/wireless" },
+    { name: "Device List", link: "/basic/devices" },
+    { name: "QoS", link: "/basic/QoS" },
+    { name: "File Sharing", link: "/basic/fileshare" },
+    { name: "Guest Network", link: "/basic/guestnetwork" }
+  ];
+
   export default {
+    data() {
+      return {
+        navbarItems
+      };
+    },
     components: {
       Navbar,
     }
@@ -14,30 +34,12 @@
     <div id="leftNavbar">
       <h2>Basic Dashboard</h2>
       <ul>
-        <RouterLink to="/basic">
-          <li>Overview</li>
-        </RouterLink>
-        <RouterLink to="/basic/internet">
-          <li>Internet Setup</li>
-        </RouterLink>
-        <RouterLink to="/basic/wireless">
-          <li>Wireless Settings</li>
-        </RouterLink>
-        <RouterLink to="/basic/devices">
-          <li>Device List</li>
-        </RouterLink>
-        <RouterLink to="/basic/QoS">
-          <li>QoS</li>
-        </RouterLink>
-        <RouterLink to="/basic/fileshare">
-          <li>File Sharing</li>
-        </RouterLink>
-        <RouterLink to="/basic/guestnetwork">
-          <li>Guest Network</li>
+        <RouterLink v-for="(navbarItem) in navbarItems" :to="navbarItem.link" :key="navbarItem.name">
+          <li>{{ navbarItem.name }}</li>
         </RouterLink>
       </ul>
     </div>
-    <RouterView id="basicDashboardComponents"/>
+    <RouterView id="basicComponents"/>
   </div>
 </template>
 
diff --git a/src/pages/basicDashboard/DeviceList.vue b/src/pages/basicDashboard/DeviceList.vue
index d610f1a..13d2e94 100644
--- a/src/pages/basicDashboard/DeviceList.vue
+++ b/src/pages/basicDashboard/DeviceList.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Device List</h1>
+    <h2 class="title">Device List</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/FileShare.vue b/src/pages/basicDashboard/FileShare.vue
index 6c118cd..e279944 100644
--- a/src/pages/basicDashboard/FileShare.vue
+++ b/src/pages/basicDashboard/FileShare.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>File Share</h1>
+    <h2 class="title">File Share</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/GuestNetwork.vue b/src/pages/basicDashboard/GuestNetwork.vue
index ddd40a5..41d4c45 100644
--- a/src/pages/basicDashboard/GuestNetwork.vue
+++ b/src/pages/basicDashboard/GuestNetwork.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Guest Network</h1>
+    <h2 class="title">Guest Network</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/InternetSetup.vue b/src/pages/basicDashboard/InternetSetup.vue
index f3e0c78..0e98bca 100644
--- a/src/pages/basicDashboard/InternetSetup.vue
+++ b/src/pages/basicDashboard/InternetSetup.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Internet Setup</h1>
+    <h2 class="title">Internet Setup</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/Overview.vue b/src/pages/basicDashboard/Overview.vue
index 9e01ed1..e3aa96c 100644
--- a/src/pages/basicDashboard/Overview.vue
+++ b/src/pages/basicDashboard/Overview.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Overview</h1>
+    <h2 class="title">Overview</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/QoS.vue b/src/pages/basicDashboard/QoS.vue
index d43c4ea..8ce8315 100644
--- a/src/pages/basicDashboard/QoS.vue
+++ b/src/pages/basicDashboard/QoS.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>QoS</h1>
+    <h2 class="title">QoS</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/Wireless.vue b/src/pages/basicDashboard/Wireless.vue
index 993ebcf..e7f5b76 100644
--- a/src/pages/basicDashboard/Wireless.vue
+++ b/src/pages/basicDashboard/Wireless.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Wireless Settings</h1>
+    <h2 class="title">Wireless Settings</h2>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index 7e78367..08f8f27 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -37,9 +37,18 @@
   li:hover {
     background-color: var(--dark-highlight-color);
   }
+  .router-link-exact-active li {
+    background-color: var(--dark-alt-highlight-color);
+  }
 }
 
-#basicDashboardComponents {
+.title {
+  margin-top: 10px;
+  font-size: 3rem;
+  text-align: center;
+}
+
+#basicComponents {
   flex-grow: 1;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
diff --git a/src/styles/login.css b/src/styles/login.css
index 6a353ce..e17a931 100644
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -17,7 +17,7 @@
     width: 80%;
 
     input {
-      background-color: var(----dark-bg-alt-2-color);
+      background-color: var(--dark-bg-alt-2-color);
       border: none;
       color: inherit;
       height: 40px;
@@ -28,7 +28,7 @@
   }
   button {
     color: inherit;
-    background-color: var(----dark-bg-alt-2-color);
+    background-color: var(--dark-bg-alt-2-color);
     border: none;
     height: 40px;
     width: 70px;
diff --git a/src/styles/main.css b/src/styles/main.css
index ebecfd6..6dc2034 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -11,6 +11,7 @@
   --dark-bg-alt-color: #0f0f0f;
   --dark-bg-alt-2-color: #000;
   --dark-highlight-color: #0084ff;
+  --dark-alt-highlight-color: #006bcf;
 }
 
 * {
@@ -72,6 +73,9 @@ a {
   svg:hover {
     color: var(--dark-highlight-color);
   }
+  .router-link-active li {
+    color: var(--dark-alt-highlight-color);
+  }
 }
 
 .popup {
@@ -98,5 +102,5 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: calc(100vh - var(--padding) * 2);
+  flex-grow: 1;
 }
\ No newline at end of file