diff --git a/tine20/Tinebase/css/bootstrap-vue/_global_bs.scss b/tine20/Tinebase/css/bootstrap-vue/_global_bs.scss
new file mode 100644
index 00000000000..029ef25b2a2
--- /dev/null
+++ b/tine20/Tinebase/css/bootstrap-vue/_global_bs.scss
@@ -0,0 +1,47 @@
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layoutbootstrap/scss/ & components
+@import "bootstrap/scss/root";
+// @import "bootstrap/scss/reboot";
+// @import "bootstrap/scss/type";
+// @import "bootstrap/scss/images";
+// @import "bootstrap/scss/containers";
+// @import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+// @import "bootstrap/scss/buttons";
+// @import "bootstrap/scss/transitions";
+// @import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+// @import "bootstrap/scss/nav";
+// @import "bootstrap/scss/navbar";
+// @import "bootstrap/scss/card";
+// @import "bootstrap/scss/accordion";
+// @import "bootstrap/scss/breadcrumb";
+// @import "bootstrap/scss/pagination";
+// @import "bootstrap/scss/badge";
+// @import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/list-group";
+// @import "bootstrap/scss/close";
+// @import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+// @import "bootstrap/scss/tooltip";
+// @import "bootstrap/scss/popover";
+// @import "bootstrap/scss/carousel";
+// @import "bootstrap/scss/spinners";
+// @import "bootstrap/scss/offcanvas";
+// @import "bootstrap/scss/placeholders";
+
+// // Helperbootstrap/scss/s
+// @import "bootstrap/scss/helpers";
+
+// // Utilitbootstrap/scss/ies
+// @import "bootstrap/scss/utilities/api";
+// // scss-docs-end import-stack
\ No newline at end of file
diff --git a/tine20/Tinebase/css/bootstrap-vue/_scopable_bs.scss b/tine20/Tinebase/css/bootstrap-vue/_scopable_bs.scss
new file mode 100644
index 00000000000..b7ec123f95c
--- /dev/null
+++ b/tine20/Tinebase/css/bootstrap-vue/_scopable_bs.scss
@@ -0,0 +1,52 @@
+// This file imports all the styles that can be scoped.
+// i.e. styles that need not be in the global scope
+// css-selector {
+// @import "<path_to_this_file>"
+// }
+
+// scss-docs-start import-stack
+// Configuration
+//@import "bootstrap/scss/functions";
+//@import "bootstrap/scss/variables";
+//@import "bootstrap/scss/maps";
+//@import "bootstrap/scss/mixins";
+//@import "bootstrap/scss/utilities";
+
+// Layoutbootstrap/scss/ & components
+// @import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+// @import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Helperbootstrap/scss/s
+@import "bootstrap/scss/helpers";
+
+// Utilitbootstrap/scss/ies
+@import "bootstrap/scss/utilities/api";
\ No newline at end of file
diff --git a/tine20/Tinebase/css/bootstrap-vue/custom_vue_styles.scss b/tine20/Tinebase/css/bootstrap-vue/custom_vue_styles.scss
new file mode 100644
index 00000000000..dbe2095c004
--- /dev/null
+++ b/tine20/Tinebase/css/bootstrap-vue/custom_vue_styles.scss
@@ -0,0 +1,13 @@
+$primary: #0062a7; // setting the primary color
+
+$alert-padding-y: 5px;
+$alert-margin-bottom: 2px;
+
+@import 'global_bs'; // global bs styles needed for modal
+@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'; // bs-Vue styles
+
+.bootstrap-scope{
+  @import './scopable_bs';
+  font-family: arial, tahoma, helvetica, sans-serif;
+  font-size: 1.1em;
+}
diff --git a/tine20/Tinebase/js/Tinebase.js b/tine20/Tinebase/js/Tinebase.js
index 805b188e033..c52ddd43edd 100644
--- a/tine20/Tinebase/js/Tinebase.js
+++ b/tine20/Tinebase/js/Tinebase.js
@@ -48,6 +48,11 @@ require('../css/darkmode.less');
 // other libs
 var lodash = require('lodash');
 var director = require('director');
+const vue = require('vue');
+const mitt = require('mitt')
+
+// custom bootstrap styles
+require('../css/bootstrap-vue/custom_vue_styles.scss')
 
 require('./ux/util/screenshot');
 require('./ux/file/UploadManagerUI');
@@ -57,5 +62,7 @@ module.exports = {
     director: director,
     postal: postal,
     lodash: lodash,
-    _: lodash
+    _: lodash,
+    vue: vue,
+    mitt: mitt
 };
diff --git a/tine20/Tinebase/js/webpack.common.js b/tine20/Tinebase/js/webpack.common.js
index 30b73aa654a..9216b6355e5 100644
--- a/tine20/Tinebase/js/webpack.common.js
+++ b/tine20/Tinebase/js/webpack.common.js
@@ -90,7 +90,6 @@ module.exports = {
     },
     externals: {
         fs: "fs",
-        vue: "vue"
     },
     externalsType: "window",
     output: {