diff --git a/app/package.json b/app/package.json
index b61fa4b7..912111ff 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,8 @@
     "@fontsource/firago": "^5.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.16.6",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
@@ -29,15 +30,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "bootstrap": "^4.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
-    "popper.js": "^1.16.0",
-    "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4"
   },
   "browserslist": [
diff --git a/app/src/App.vue b/app/src/App.vue
index 42c5c8c2..65f22e43 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -190,11 +190,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// Global import of Bootstrap and custom styles
-@import '@/scss/main.scss';
-</style>
-
 <style lang="scss" scoped>
 // generic style for <html>, <body> and <#app> is in `scss/main.scss`
 header {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index e6bd4166..6bf733a8 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -2,7 +2,7 @@
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 import { h } from 'vue'
-import { BCardGroup } from 'bootstrap-vue'
+import { BCardGroup } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardDeckFeed',
diff --git a/app/src/main.js b/app/src/main.js
index f130934e..4b636d71 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
+import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
 
 import store from './store'
@@ -10,6 +10,8 @@ import i18n from './i18n'
 import { registerGlobalErrorHandlers } from './api'
 import { initDefaultLocales } from './i18n/helpers'
 
+import '@/scss/main.scss'
+
 const app = createApp({
   ...App,
 })
@@ -18,12 +20,7 @@ app.use(store)
 app.use(router)
 app.use(i18n)
 
-// Styles are imported in `src/App.vue` <style>
-app.use(BootstrapVue, {
-  BSkeleton: { animation: 'none' },
-  BAlert: { show: true },
-  BBadge: { pill: true },
-})
+app.use(createBootstrap())
 
 app.use(VueShowdownPlugin, {
   flavor: 'github',
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 05cb003c..a6cbd379 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -25,6 +25,8 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
+@import '~bootstrap/scss/functions.scss';
+
 $font-size-base: 0.9rem;
 $font-weight-bold: 500;
 
@@ -123,11 +125,12 @@ $custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
 );
 
 // Import default variables after the above setup to compute all other variables.
-@import '~bootstrap/scss/functions.scss';
 @import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins.scss';
-@import '~bootstrap-vue/src/variables';
+@import '~bootstrap/scss/variables-dark';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
 
 $hr-border-color: $gray-200;
 
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 6ed444d9..f485673b 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -7,11 +7,11 @@
 
 // Dependencies SCSS imports
 // `~` allow to import a node_modules folder (resolved by Webpack)
-// @import "~bootstrap/scss/root";
+@import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/images';
-@import '~bootstrap/scss/code';
+@import '~bootstrap/scss/containers';
 @import '~bootstrap/scss/grid';
 @import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/forms';
@@ -19,18 +19,15 @@
 @import '~bootstrap/scss/transitions';
 @import '~bootstrap/scss/dropdown';
 @import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-@import '~bootstrap/scss/custom-forms';
 @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/jumbotron";
 @import '~bootstrap/scss/alert';
 @import '~bootstrap/scss/progress';
-// @import "~bootstrap/scss/media";
 @import '~bootstrap/scss/list-group';
 @import '~bootstrap/scss/close';
 // @import "~bootstrap/scss/toasts";
@@ -39,10 +36,16 @@
 @import '~bootstrap/scss/popover';
 // @import "~bootstrap/scss/carousel";
 @import '~bootstrap/scss/spinners';
-@import '~bootstrap/scss/utilities';
-// @import "~bootstrap/scss/print";
+@import '~bootstrap/scss/offcanvas';
+@import '~bootstrap/scss/placeholders';
 
-@import '~bootstrap-vue/src/index.scss';
+// Helpers
+@import '~bootstrap/scss/helpers';
+
+// Utilities
+@import '~bootstrap/scss/utilities/api';
+
+@import '~bootstrap-vue-next/src/styles/styles.scss';
 
 // Import fonts
 @import 'font';
diff --git a/app/vite.config.js b/app/vite.config.js
index 5086a3a4..6a5d6bac 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'url'
 import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
 
 import supportedLocales from './src/i18n/supportedLocales'
 
@@ -46,7 +48,12 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [createVuePlugin()],
+    plugins: [
+      createVuePlugin(),
+      Components({
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
     build: {
       rollupOptions: {
         output: {
