diff --git a/dist/index.html b/dist/index.html
index 6b73c73..eff343d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,6 +10,6 @@
   </head>
   <body>
     <div id="app"></div>
-    
+    <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/404Page.vue b/src/pages/404Page.vue
new file mode 100644
index 0000000..3be56fe
--- /dev/null
+++ b/src/pages/404Page.vue
@@ -0,0 +1,17 @@
+<template>
+<Navbar />
+<h1>404 - You've been derailed :(</h1>
+</template>
+    
+<script>
+import Navbar from '../components/Navbar.vue'
+export default {
+    name: "404Page",
+    components: {
+        Navbar
+    }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/pages/InsightsPage.vue b/src/pages/InsightsPage.vue
index 1d56b32..b3dcffc 100644
--- a/src/pages/InsightsPage.vue
+++ b/src/pages/InsightsPage.vue
@@ -14,7 +14,7 @@
             <pieChart id="trainPie" />
         </div>
     </div>
-        
+
     <hr>
     <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
     <p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
@@ -100,7 +100,7 @@ export default {
     color: black;
     padding-left: 10px;
     width:80%;
-    background-color: antiquewhite;
+    background-color: rgb(250, 235, 215);
 }
 
 #trainTotal, #stationTotal {
diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index e64ef90..0c09cdb 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -3,54 +3,54 @@
 
 <div id="preferenceDropdown" class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-    Preferences
+    Map Filters
   </button>
-  <div id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+  <div style="padding-bottom: 7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
+    <div id="prefHeader">~SHOW~</div>
       <div class="container-fluid" @change="decideShowStations();">
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainlandStations" v-model="showMainlandStations"/>
-          <label class="form-check-label" for="showMainlandStations">Show Mainland Stations</label>
+          <label class="form-check-label" for="showMainlandStations">Mainland Stations</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDARTStations" v-model="showDARTStations"/>
-          <label class="form-check-label" for="showMainlandStations">Show Mainland Stations</label>
+          <label class="form-check-label" for="showDARTStations">Dart Stations</label>
         </div>
       </div>
       <div class="container-fluid" @change="decideShowTrains();">
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
-          <label class="form-check-label" for="showLate">Show Late Trains</label>
+          <label class="form-check-label" for="showLate">Late Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
-          <label class="form-check-label" for="showOnTime">Show On-Time Trains</label>
+          <label class="form-check-label" for="showOnTime">On-Time Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainland" v-model="showMainland"/>
-          <label class="form-check-label" for="showMainland">Show Mainland Trains</label>
+          <label class="form-check-label" for="showMainland">Mainland Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDART" v-model="showDART"/>
-          <label class="form-check-label" for="showDart">Show DARTs</label>
+          <label class="form-check-label" for="showDART">DARTs</label>
+        </div>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showRunning" v-model="showRunning"/>
+          <label class="form-check-label" for="showRunning">Running Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
-          <label class="form-check-label" for="showRunning">Show Running Trains</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
-          <label class="form-check-label" for="showTerminated">Show Terminated Trains</label>
+          <label class="form-check-label" for="showTerminated">Terminated Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
-          <label class="form-check-label" for="showNotYetRunning">Show Not-Yet Running Trains</label>
+          <label class="form-check-label" for="showNotYetRunning">Not-Yet Running Trains</label>
         </div>
       </div>
+      <button id="savePref" class="btn btn-outline-info" v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
     </div>
 </div>
 
-<button v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
-
 <transition id="sidebar" name="slideLeft">
   <div v-if="store.displaySelectedTrain && store.selectedTrain">
     <TrainSidebar />
@@ -164,7 +164,7 @@ export default {
       TrainSidebar,
       StationSidebar
     },
-
+    
     created() {
         let host = window.location.hostname
         if (host === '127.0.0.1' || host === 'localhost') {
@@ -184,6 +184,10 @@ export default {
           this.toast()
         },
 
+        handleClick(e){
+          e.stopPropagation();
+        },
+
         getPreferences() {
           if (!store.loggedIn) return
           const functions = getFunctions(app);
@@ -485,24 +489,31 @@ export default {
   height: 19px;
   cursor: pointer;
 }
-#dropdownMenuButton1{
+#dropdownMenuButton1 {
   box-shadow: 0 0 5px 2px #6e757dbe;
 }
 
-#dropMenu{
+#dropMenu {
   /*In case we want to edit dropdown menu*/
-  font-size: 15px;
+  font-size: 14.6px;
 }
 
 #preferenceDropdown{
   position: absolute;
   z-index: 3;
   right: 1%;
-  top: 10%;
+  top: 11%;
+
 }
 
+#prefHeader{
+  font-size: 18px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  text-align: center;
+  position: relative;
+}
 
-#sidebar{
+#sidebar {
   position: absolute;
   height: 80%;
   width: 20%;
@@ -518,12 +529,18 @@ export default {
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
 }
 
+#savePref{
+  left:2%;
+  top: 2px;
+  width: 96%;
+  position: relative;
+}
 .slideLeft-enter-active, .slideLeft-leave-active {
   transition: opacity .5s;
   transition: all 0.8s;
 
 }
-.slideLeft-enter-from, .slideLeft-leave-to{
+.slideLeft-enter-from, .slideLeft-leave-to {
   opacity: 0;
   transform: translateX(-100px);
 }
diff --git a/src/router/routes.js b/src/router/routes.js
index b36cc01..074e778 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -20,9 +20,11 @@ function loadPage(component) {
 }
 
 export default [
-    {path: "/", component:loadPage("MapPage")},
-    {path: "/insights", component:loadPage("InsightsPage")},
-    {path: "/account", component:loadPage('AccountPage'), beforeEnter: isAuth},
-    {path: "/signup", component:loadPage('SignUpPage')},
-    {path: "/login", component:loadPage('LoginPage')},
+    { path: "/", component:loadPage("MapPage") },
+    { path: "/insights", component:loadPage("InsightsPage") },
+    { path: "/account", component:loadPage('AccountPage'), beforeEnter: isAuth },
+    { path: "/signup", component:loadPage('SignUpPage') },
+    { path: "/login", component:loadPage('LoginPage') },
+    { path: "/404", component:loadPage('404Page') },
+    { path: "/:catchAll(.*)", component:loadPage('404Page') }
 ]
\ No newline at end of file
