diff --git a/package-lock.json b/package-lock.json
index 2321edc..b846ffc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,13 @@
       "dependencies": {
         "@popperjs/core": "^2.11.6",
         "axios": "^1.3.1",
+        "boostrap": "^2.0.0",
         "bootstrap": "^5.2.3",
+        "bootstrap-vue": "^2.23.1",
         "chart.js": "^4.2.1",
         "firebase": "^9.17.1",
         "ol": "^7.2.2",
-        "vue": "^3.2.45",
+        "vue": "^3.2.47",
         "vue-chartjs": "^5.2.0",
         "vue-loading-overlay": "^6.0.3",
         "vue-marquee-text-component": "^2.0.1",
@@ -27,9 +29,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.20.13",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz",
-      "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.3.tgz",
+      "integrity": "sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -998,6 +1000,23 @@
       "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
       "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
     },
+    "node_modules/@nuxt/opencollective": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.3.tgz",
+      "integrity": "sha512-6IKCd+gP0HliixqZT/p8nW3tucD6Sv/u/eR2A9X4rxT/6hXlMzA4GZQzq4d2qnBAwSwGpmKyzkyTjNjrhaA25A==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.7"
+      },
+      "bin": {
+        "opencollective": "bin/opencollective.js"
+      },
+      "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      }
+    },
     "node_modules/@petamoriken/float16": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.7.1.tgz",
@@ -1096,36 +1115,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -1133,12 +1152,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1147,60 +1166,60 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
       "dependencies": {
-        "@vue/shared": "3.2.45"
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
       "dependencies": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
       },
       "peerDependencies": {
-        "vue": "3.2.45"
+        "vue": "3.2.47"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
@@ -1259,6 +1278,12 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/boostrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
+      "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg==",
+      "deprecated": "Package no longer supported. Contact support@npmjs.com for more info."
+    },
     "node_modules/bootstrap": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
@@ -1277,6 +1302,73 @@
         "@popperjs/core": "^2.11.6"
       }
     },
+    "node_modules/bootstrap-vue": {
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
+      "integrity": "sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": "^4.6.1",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/bootstrap": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "peer": true
+    },
+    "node_modules/bootstrap-vue/node_modules/portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+      "peerDependencies": {
+        "vue": "^2.5.18"
+      }
+    },
+    "node_modules/bootstrap-vue/node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/btoa": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
@@ -1307,6 +1399,21 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chart.js": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
@@ -1355,6 +1462,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
+    },
     "node_modules/core-js": {
       "version": "3.27.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
@@ -1601,6 +1713,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/html2canvas": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
@@ -1663,6 +1783,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
+      "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==",
+      "peer": true
+    },
     "node_modules/json-stringify-pretty-compact": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
@@ -1863,6 +1989,16 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -2133,6 +2269,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -2232,15 +2379,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/vue-chartjs": {
@@ -2252,6 +2399,11 @@
         "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
+    "node_modules/vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "node_modules/vue-loading-overlay": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.3.tgz",
diff --git a/package.json b/package.json
index 6c60e65..aeb6eef 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "axios": "^1.3.1",
+    "boostrap": "^2.0.0",
     "bootstrap": "^5.2.3",
+    "bootstrap-vue": "^2.23.1",
     "chart.js": "^4.2.1",
     "firebase": "^9.17.1",
     "ol": "^7.2.2",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-chartjs": "^5.2.0",
     "vue-loading-overlay": "^6.0.3",
     "vue-marquee-text-component": "^2.0.1",
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index a710f33..ddba5d1 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-sm navbar-light bg-light">
   <div class="container-fluid">
     <router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand">
       <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">
diff --git a/src/main.js b/src/main.js
index 10ca50c..0350684 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,4 +22,4 @@ app.use(LoadingPlugin)
 app.mount('#app')
 
 import "bootstrap/dist/css/bootstrap.css";
-import "bootstrap/dist/js/bootstrap.js";
\ No newline at end of file
+import "bootstrap/dist/js/bootstrap.js";
diff --git a/src/pages/InsightsPage.vue b/src/pages/InsightsPage.vue
index a7e75b6..1d56b32 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>
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 3cdd96f..b663c20 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -23,9 +23,14 @@
     </div>
   </div>
 
+  
+
   <p v-if="displayFirebaseError">{{ FirebaseError }}</p>
   <p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
+
 </div>
+
+
 </template>
 
 <script>
diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index f5f2d66..f4879da 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -1,30 +1,54 @@
 <template>
 <Navbar />
 
-<nav class="navbar navbar-light bg-light">
-    <div class="container-fluid" @change="decideShowStations();">
-        <input type="checkbox" id="showMainlandStations" v-model="showMainlandStations"/>
-        <label for="showMainlandStations">Show Mainland Stations</label>
-        <input type="checkbox" id="showDARTStations" v-model="showDARTStations"/>
-        <label for="showDARTStations">Show DART Stations</label>
+<div id="preferenceDropdown" class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+    Preferences
+  </button>
+  <div id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+      <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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </div>
+      </div>
     </div>
-    <div class="container-fluid" @change="decideShowTrains();">
-        <input type="checkbox" id="showLate" v-model="showLate"/>
-        <label for="showLate">Show Late Trains</label>
-        <input type="checkbox" id="showOnTime" v-model="showOnTime"/>
-        <label for="showOnTime">Show On-Time Trains</label>
-        <input type="checkbox" id="showMainland" v-model="showMainland"/>
-        <label for="showMainland">Show Mainland Trains</label>
-        <input type="checkbox" id="showDART" v-model="showDART"/>
-        <label for="showMainland">Show DARTs</label>
-        <input type="checkbox" id="showRunning" v-model="showRunning"/>
-        <label for="showRunning">Show Running Trains</label>
-        <input type="checkbox" id="showTerminated" v-model="showTerminated"/>
-        <label for="showTerminated">Show Terminated Trains</label>
-        <input type="checkbox" id="showNotYetRunning" v-model="showNotYetRunning"/>
-        <label for="showNotYetRunning">Show Not-Yet Running Trains</label>
-    </div>
-</nav>
+</div>
+
 
 <transition id="sidebar" name="slideLeft">
   <div v-if="store.displaySelectedTrain && store.selectedTrain">
@@ -35,7 +59,7 @@
   </div>
 </transition>
 
-<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="position:absolute; height:90.7vh; width:100%;">
+<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="position:absolute; height:90.6vh; width:100%;">
     <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />
     <ol-tile-layer>
     <ol-source-osm />
@@ -413,6 +437,21 @@ export default {
   height: 19px;
   cursor: pointer;
 }
+#dropdownMenuButton1{
+  box-shadow: 0 0 5px 2px #6e757dbe;
+}
+
+#dropMenu{
+  /*In case we want to edit dropdown menu*/
+  font-size: 15px;
+}
+
+#preferenceDropdown{
+  position: absolute;
+  z-index: 3;
+  right: 1%;
+  top: 10%;
+}
 
 
 #sidebar{