diff --git a/web-src/package-lock.json b/web-src/package-lock.json
index ccaee974..71f9a932 100644
--- a/web-src/package-lock.json
+++ b/web-src/package-lock.json
@@ -13935,6 +13935,11 @@
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
       "dev": true
     },
+    "v-click-outside": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.4.tgz",
+      "integrity": "sha512-NbQiwRjJjeKptI1qr1co2Ox44fUWEnj08chR1nw3DVrNCQHjb+sqlevzb1zCXMgb7orTFE0wpiecqMlbOZ15EQ=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/web-src/package.json b/web-src/package.json
index 0d3c3a22..8893bf96 100644
--- a/web-src/package.json
+++ b/web-src/package.json
@@ -20,6 +20,7 @@
     "npm": "^6.11.2",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.2.0",
+    "v-click-outside": "^2.1.4",
     "vue": "^2.6.10",
     "vue-infinite-loading": "^2.4.4",
     "vue-progressbar": "^0.7.5",
diff --git a/web-src/src/main.js b/web-src/src/main.js
index f1e7cac4..bacba025 100644
--- a/web-src/src/main.js
+++ b/web-src/src/main.js
@@ -6,6 +6,7 @@ import { router } from './router'
 import store from './store'
 import './filter'
 import './progress'
+import vClickOutside from 'v-click-outside'
 import 'bulma/css/bulma.css'
 import 'mdi/css/materialdesignicons.css'
 import 'vue-range-slider/dist/vue-range-slider.css'
@@ -13,6 +14,8 @@ import './mystyles.css'
 
 Vue.config.productionTip = false
 
+Vue.use(vClickOutside)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',