From 32a63a693df6e09f30b28a91065913d2e314f048 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 18 Nov 2021 09:49:00 +0100
Subject: [PATCH] Initial work

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/package.json                               |  49 +-
 js/src/App.vue                                | 210 ++++----
 .../components/Account/ActorAutoComplete.vue  |   6 +-
 js/src/components/Account/ActorCard.vue       |   2 +-
 js/src/components/Account/ActorInline.vue     |   2 +-
 .../Activity/DiscussionActivityItem.vue       |  74 +--
 .../components/Activity/EventActivityItem.vue |   2 +-
 .../components/Activity/GroupActivityItem.vue |   2 +-
 .../Activity/MemberActivityItem.vue           |   2 +-
 .../components/Activity/PostActivityItem.vue  |   2 +-
 .../Activity/ResourceActivityItem.vue         |   2 +-
 .../Activity/SkeletonActivityItem.vue         |   6 +-
 js/src/components/Address/AddressInfo.vue     |   2 +-
 js/src/components/Address/InlineAddress.vue   |   2 +-
 js/src/components/Admin/Followers.vue         |  40 +-
 js/src/components/Admin/Followings.vue        |  50 +-
 js/src/components/Comment/Comment.vue         |  22 +-
 js/src/components/Comment/CommentTree.vue     |  20 +-
 .../Discussion/DiscussionComment.vue          |  34 +-
 .../Discussion/DiscussionListItem.vue         |   2 +-
 js/src/components/Editor.vue                  |  32 +-
 js/src/components/Error.vue                   |  28 +-
 .../components/Event/AddressAutoComplete.vue  |  20 +-
 js/src/components/Event/EventCard.vue         |  14 +-
 js/src/components/Event/EventFullDate.vue     |  16 +-
 js/src/components/Event/EventListViewCard.vue |   6 +-
 .../components/Event/EventMetadataBlock.vue   |   2 +-
 js/src/components/Event/EventMetadataItem.vue |  40 +-
 js/src/components/Event/EventMetadataList.vue |  36 +-
 .../components/Event/EventMetadataSidebar.vue |   4 +-
 .../components/Event/EventMinimalistCard.vue  |  14 +-
 .../Event/EventParticipationCard.vue          |  50 +-
 .../Event/FullAddressAutoComplete.vue         |  14 +-
 js/src/components/Event/OrganizerPicker.vue   |   8 +-
 .../Event/OrganizerPickerWrapper.vue          |  20 +-
 .../components/Event/ParticipationButton.vue  |  52 +-
 js/src/components/Event/ShareEventModal.vue   |  30 +-
 js/src/components/Event/TagInput.vue          |  14 +-
 js/src/components/Footer.vue                  |  31 +-
 js/src/components/Group/GroupCard.vue         |   4 +-
 js/src/components/Group/GroupMemberCard.vue   |  28 +-
 js/src/components/Group/GroupSection.vue      |   2 +-
 js/src/components/Group/InvitationCard.vue    |  10 +-
 js/src/components/Group/ShareGroupModal.vue   |  26 +-
 js/src/components/NavBar.vue                  | 312 ++++++-----
 .../Participation/ConfirmParticipation.vue    |   8 +-
 .../Participation/ParticipationSection.vue    |  34 +-
 .../ParticipationWithoutAccount.vue           |  44 +-
 .../Participation/UnloggedParticipation.vue   |  22 +-
 js/src/components/PictureUpload.vue           |  14 +-
 js/src/components/Post/PostListItem.vue       |  12 +-
 js/src/components/Post/SharePostModal.vue     |  26 +-
 js/src/components/Report/ReportCard.vue       |   2 +-
 js/src/components/Report/ReportModal.vue      |  14 +-
 js/src/components/Resource/FolderItem.vue     |   2 +-
 .../components/Resource/ResourceDropdown.vue  |  24 +-
 js/src/components/Resource/ResourceItem.vue   |   4 +-
 .../components/Resource/ResourceSelector.vue  |  18 +-
 js/src/components/SearchField.vue             |   2 +-
 .../Settings/NotificationsOnboarding.vue      |   4 +-
 .../Settings/SettingsOnboarding.vue           |   8 +-
 js/src/components/Todo/CompactTodo.vue        |   6 +-
 js/src/components/Todo/FullTodo.vue           |  22 +-
 js/src/components/User/AuthProvider.vue       |   4 +-
 js/src/components/Utils/EmptyContent.vue      |   2 +-
 .../components/Utils/RedirectWithAccount.vue  |  20 +-
 js/src/main.ts                                |  62 +--
 js/src/plugins/notifier.ts                    |  33 +-
 js/src/router/index.ts                        |  25 +-
 js/src/shims-vue.d.ts                         |  17 +
 js/src/utils/i18n.ts                          |   7 +-
 js/src/variables.scss                         |   7 +-
 js/src/views/About.vue                        |  12 +-
 js/src/views/About/AboutInstance.vue          |   8 +-
 js/src/views/Account/IdentityPicker.vue       |   2 +-
 .../views/Account/IdentityPickerWrapper.vue   |  12 +-
 js/src/views/Account/Profile.vue              |  28 +-
 js/src/views/Account/Register.vue             |  32 +-
 .../views/Account/children/EditIdentity.vue   |  62 +--
 js/src/views/Admin/AdminGroupProfile.vue      |  86 ++--
 js/src/views/Admin/AdminProfile.vue           |  74 +--
 js/src/views/Admin/AdminUserProfile.vue       |   4 +-
 js/src/views/Admin/Follows.vue                |   8 +-
 js/src/views/Admin/GroupProfiles.vue          |  20 +-
 js/src/views/Admin/Profiles.vue               |  20 +-
 js/src/views/Admin/Settings.vue               | 112 ++--
 js/src/views/Admin/Users.vue                  |  24 +-
 js/src/views/Discussions/Create.vue           |  12 +-
 js/src/views/Discussions/Discussion.vue       |  40 +-
 js/src/views/Discussions/DiscussionsList.vue  |   8 +-
 js/src/views/Event/Edit.vue                   | 166 +++---
 js/src/views/Event/Event.vue                  | 108 ++--
 js/src/views/Event/EventList.vue              |   6 +-
 js/src/views/Event/GroupEvents.vue            |  12 +-
 js/src/views/Event/MyEvents.vue               |  52 +-
 js/src/views/Event/Participants.vue           |  72 +--
 js/src/views/Group/Create.vue                 |  22 +-
 js/src/views/Group/Group.vue                  | 148 +++---
 js/src/views/Group/GroupFollowers.vue         |  38 +-
 js/src/views/Group/GroupMembers.vue           |  94 ++--
 js/src/views/Group/GroupSettings.vue          |  70 +--
 js/src/views/Group/MyGroups.vue               |   6 +-
 js/src/views/Group/Timeline.vue               |  74 +--
 js/src/views/Home.vue                         |  36 +-
 js/src/views/Interact.vue                     |  12 +-
 js/src/views/Moderation/Logs.vue              |   6 +-
 js/src/views/Moderation/Report.vue            |  50 +-
 js/src/views/Moderation/ReportList.vue        |  20 +-
 js/src/views/PageNotFound.vue                 |   6 +-
 js/src/views/Posts/Edit.vue                   |  48 +-
 js/src/views/Posts/List.vue                   |  14 +-
 js/src/views/Posts/Post.vue                   |  56 +-
 js/src/views/Resources/ResourceFolder.vue     |  98 ++--
 js/src/views/Search.vue                       |  84 +--
 js/src/views/Settings.vue                     |  45 +-
 js/src/views/Settings/AccountSettings.vue     |  66 +--
 js/src/views/Settings/Notifications.vue       |  77 +--
 js/src/views/Settings/Preferences.vue         |  38 +-
 js/src/views/Todos/TodoList.vue               |  10 +-
 js/src/views/Todos/TodoLists.vue              |   8 +-
 js/src/views/User/EmailValidate.vue           |   4 +-
 js/src/views/User/Login.vue                   |  30 +-
 js/src/views/User/PasswordReset.vue           |  16 +-
 js/src/views/User/Register.vue                |  26 +-
 js/src/views/User/ResendConfirmation.vue      |  18 +-
 js/src/views/User/SendPasswordReset.vue       |  22 +-
 js/src/views/User/SettingsOnboard.vue         |  28 +-
 js/src/views/User/Validate.vue                |   4 +-
 js/src/vue-apollo.ts                          |  10 +-
 js/tests/unit/specs/boot/routes.spec.ts       |  33 +-
 .../components/Comment/CommentTree.spec.ts    |  37 +-
 .../__snapshots__/CommentTree.spec.ts.snap    |   4 +-
 .../components/Group/GroupSection.spec.ts     |  24 +-
 .../ParticipationSection.spec.ts              |  36 +-
 .../ParticipationWithoutAccount.spec.ts       |  39 +-
 .../components/Post/PostListItem.spec.ts      |  37 +-
 .../components/Report/ReportCard.spec.ts      |  14 +-
 .../components/Report/ReportModal.spec.ts     |  39 +-
 .../components/User/PasswordReset.spec.ts     |  36 +-
 .../unit/specs/components/User/login.spec.ts  |  42 +-
 .../__snapshots__/navbar.spec.ts.snap         |   2 +-
 js/tests/unit/specs/components/navbar.spec.ts |  32 +-
 js/vue.config.js                              |  16 -
 js/yarn.lock                                  | 485 +++++++++++-------
 144 files changed, 2509 insertions(+), 2418 deletions(-)

diff --git a/js/package.json b/js/package.json
index cd242a8a0..f372ecb51 100644
--- a/js/package.json
+++ b/js/package.json
@@ -16,6 +16,8 @@
     "@absinthe/socket-apollo-link": "^0.2.1",
     "@apollo/client": "^3.3.16",
     "@mdi/font": "^6.1.95",
+    "@oruga-ui/oruga-next": "^0.4.7",
+    "@oruga-ui/theme-bulma": "^0.1.3",
     "@tiptap/core": "^2.0.0-beta.41",
     "@tiptap/extension-blockquote": "^2.0.0-beta.6",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
@@ -28,14 +30,14 @@
     "@tiptap/extension-ordered-list": "^2.0.0-beta.6",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
     "@tiptap/starter-kit": "^2.0.0-beta.37",
-    "@tiptap/vue-2": "^2.0.0-beta.21",
-    "@vue/compat": "^3.1.0",
-    "@vue-a11y/announcer": "^2.1.0",
-    "@vue-a11y/skip-to": "^2.1.2",
-    "@vue/apollo-option": "4.0.0-alpha.11",
+    "@tiptap/vue-3": "^2.0.0-beta.81",
+    "@vue-a11y/announcer": "^3.1.5",
+    "@vue-a11y/skip-to": "^3.0.3",
+    "@vue-leaflet/vue-leaflet": "^0.6.1",
+    "@vue/apollo-composable": "^4.0.0-alpha.15",
+    "@vue/apollo-option": "^4.0.0-alpha.15",
     "apollo-absinthe-upload-link": "^1.5.0",
     "blurhash": "^1.1.3",
-    "buefy": "^0.9.0",
     "bulma-divider": "^0.2.0",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.0",
@@ -54,15 +56,14 @@
     "sanitize-html": "^2.5.3",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
-    "v-tooltip": "^2.1.3",
+    "v-tooltip": "^4.0.0-beta.2",
     "vue": "^3.1.0",
-    "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.14.0",
-    "vue-meta": "^2.3.1",
-    "vue-property-decorator": "^9.0.0",
-    "vue-router": "^3.1.6",
+    "vue-class-component": "8.0.0-rc.1",
+    "vue-i18n": "^9.0.0",
+    "vue-meta": "^3.0.0-alpha.9",
+    "vue-property-decorator": "^10.0.0-rc.3",
+    "vue-router": "^4.0.0",
     "vue-scrollto": "^2.17.1",
-    "vue2-leaflet": "^2.0.3",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
@@ -79,19 +80,19 @@
     "@types/sanitize-html": "^2.5.0",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
-    "@vue/cli-plugin-babel": "~5.0.0-rc.0",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.0",
-    "@vue/cli-plugin-eslint": "~5.0.0-rc.0",
-    "@vue/cli-plugin-pwa": "~5.0.0-rc.0",
-    "@vue/cli-plugin-router": "~5.0.0-rc.0",
-    "@vue/cli-plugin-typescript": "~5.0.0-rc.0",
-    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.0",
-    "@vue/cli-service": "~5.0.0-rc.0",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
+    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
+    "@vue/cli-plugin-pwa": "~5.0.0-rc.1",
+    "@vue/cli-plugin-router": "~5.0.0-rc.1",
+    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
+    "@vue/cli-service": "~5.0.0-rc.1",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-typescript": "^9.0.0",
-    "@vue/test-utils": "^1.1.0",
-    "@vue/vue2-jest": "^27.0.0-alpha.3",
-    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "@vue/test-utils": "^2.0.0-rc.16",
+    "@vue/vue3-jest": "^27.0.0-alpha.3",
+    "babel-core": "^7.0.0-bridge.0",
     "cypress": "^8.3.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
diff --git a/js/src/App.vue b/js/src/App.vue
index 521346415..8ac0af5b1 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -4,7 +4,7 @@
     <VueSkipTo to="#main" :label="$t('Skip to main content')" />
     <NavBar />
     <div v-if="config && config.demoMode">
-      <b-message
+      <o-message
         class="container"
         type="is-danger"
         :title="$t('Warning').toLocaleUpperCase()"
@@ -20,13 +20,13 @@
             )
           }}
         </p>
-      </b-message>
+      </o-message>
     </div>
     <error v-if="error" :error="error" />
 
     <main id="main" v-else>
       <transition name="fade" mode="out-in">
-        <router-view ref="routerView" />
+        <!-- <router-view ref="routerView" /> -->
       </transition>
     </main>
     <mobilizon-footer />
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import NavBar from "./components/NavBar.vue";
 import {
   AUTH_ACCESS_TOKEN,
@@ -47,81 +46,110 @@ import {
   UPDATE_CURRENT_USER_CLIENT,
 } from "./graphql/user";
 import Footer from "./components/Footer.vue";
-import Logo from "./components/Logo.vue";
 import { initializeCurrentActor } from "./utils/auth";
 import { CONFIG } from "./graphql/config";
 import { IConfig } from "./types/config.model";
 import { ICurrentUser } from "./types/current-user.model";
 import jwt_decode, { JwtPayload } from "jwt-decode";
 import { refreshAccessToken } from "./apollo/utils";
-import { Route } from "vue-router";
+import { defineComponent, ref } from "vue";
+import { useMutation, useQuery, useResult } from "@vue/apollo-composable";
+import { RouterView } from "vue-router";
+import { useAnnouncer } from "@vue-a11y/announcer";
+import { useMeta } from "vue-meta";
 
-@Component({
-  apollo: {
-    currentUser: CURRENT_USER_CLIENT,
-    config: CONFIG,
+export default defineComponent({
+  name: "App",
+  setup() {
+    const { result: configResult } = useQuery(CONFIG);
+    const config = useResult<{ config: IConfig }>(configResult);
+
+    const { result } = useQuery(CURRENT_USER_CLIENT);
+    const currentUser = useResult<{ currentUser: ICurrentUser }>(result);
+
+    const { mutate: updateUserClient } = useMutation(
+      UPDATE_CURRENT_USER_CLIENT
+    );
+
+    const interval: number | undefined = 0;
+    const routerView = ref<InstanceType<typeof RouterView> | null>(null);
+
+    useMeta({ titleTemplate: "%s | Mobilizon" });
+
+    return {
+      config,
+      currentUser,
+      updateUserClient,
+      online: false,
+      interval,
+      routerView,
+    };
   },
   components: {
-    Logo,
     NavBar,
     error: () =>
       import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
     "mobilizon-footer": Footer,
   },
-  metaInfo() {
-    return {
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class App extends Vue {
-  config!: IConfig;
-
-  currentUser!: ICurrentUser;
-
-  error: Error | null = null;
-
-  online = true;
-
-  interval: number | undefined = undefined;
-
-  @Ref("routerView") routerView!: Vue;
-
   async created(): Promise<void> {
     if (await this.initializeCurrentUser()) {
       await initializeCurrentActor(this.$apollo.provider.defaultClient);
     }
-  }
+  },
+  methods: {
+    async initializeCurrentUser(): Promise<boolean> {
+      const userId = localStorage.getItem(AUTH_USER_ID);
+      const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
+      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+      const role = localStorage.getItem(AUTH_USER_ROLE);
 
-  errorCaptured(error: Error): void {
-    this.error = error;
-  }
-
-  private async initializeCurrentUser() {
-    const userId = localStorage.getItem(AUTH_USER_ID);
-    const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
-    const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-    const role = localStorage.getItem(AUTH_USER_ROLE);
-
-    if (userId && userEmail && accessToken && role) {
-      return this.$apollo.mutate({
-        mutation: UPDATE_CURRENT_USER_CLIENT,
-        variables: {
+      if (userId && userEmail && accessToken && role) {
+        this.updateUserClient({
           id: userId,
           email: userEmail,
           isLoggedIn: true,
           role,
-        },
-      });
-    }
-    return false;
-  }
+        });
+        return true;
+      }
+      return false;
+    },
+    async refreshApp(registration: ServiceWorkerRegistration): Promise<any> {
+      const worker = registration.waiting;
+      if (!worker) {
+        return Promise.resolve();
+      }
+      console.debug("Doing worker.skipWaiting().");
+      return new Promise((resolve, reject) => {
+        const channel = new MessageChannel();
 
+        channel.port1.onmessage = (event) => {
+          console.debug("Done worker.skipWaiting().");
+          if (event.data.error) {
+            reject(event.data);
+          } else {
+            resolve(event.data);
+          }
+        };
+        console.debug("calling skip waiting");
+        worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
+      });
+    },
+    showOfflineNetworkWarnin(): void {
+      // this.$notifier.error(this.$t("You are offline") as string);
+    },
+    extractPageTitleFromRoute(route: any): string {
+      if (route.meta?.announcer?.message) {
+        return route.meta?.announcer?.message();
+      }
+      return document.title;
+    },
+  },
   mounted(): void {
     this.online = window.navigator.onLine;
     window.addEventListener("offline", () => {
       this.online = false;
-      this.showOfflineNetworkWarning();
+      // this.showOfflineNetworkWarning();
       console.debug("offline");
     });
     window.addEventListener("online", () => {
@@ -129,7 +157,7 @@ export default class App extends Vue {
       console.debug("online");
     });
     document.addEventListener("refreshApp", (event: Event) => {
-      this.$buefy.snackbar.open({
+      this.$oruga.snackbar.open({
         queue: false,
         indefinite: true,
         type: "is-secondary",
@@ -168,76 +196,40 @@ export default class App extends Vue {
         }
       }
     }, 60000);
-  }
-
-  private async refreshApp(
-    registration: ServiceWorkerRegistration
-  ): Promise<any> {
-    const worker = registration.waiting;
-    if (!worker) {
-      return Promise.resolve();
-    }
-    console.debug("Doing worker.skipWaiting().");
-    return new Promise((resolve, reject) => {
-      const channel = new MessageChannel();
-
-      channel.port1.onmessage = (event) => {
-        console.debug("Done worker.skipWaiting().");
-        if (event.data.error) {
-          reject(event.data);
-        } else {
-          resolve(event.data);
-        }
-      };
-      console.debug("calling skip waiting");
-      worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
-    });
-  }
-
-  showOfflineNetworkWarning(): void {
-    this.$notifier.error(this.$t("You are offline") as string);
-  }
-
+  },
   unmounted(): void {
     clearInterval(this.interval);
-    this.interval = undefined;
-  }
-
-  @Watch("$route", { immediate: true })
-  updateAnnouncement(route: Route): void {
-    const pageTitle = this.extractPageTitleFromRoute(route);
+    this.interval = 0;
+  },
+  async beforeRouteUpdate(to) {
+    const pageTitle = this.extractPageTitleFromRoute(to);
     if (pageTitle) {
-      this.$announcer.polite(
+      const { polite } = useAnnouncer();
+      polite(
         this.$t("Navigated to {pageTitle}", {
           pageTitle,
-        }) as string
+        })
       );
     }
     // Set the focus to the router view
     // https://marcus.io/blog/accessible-routing-vuejs
     setTimeout(() => {
-      const focusTarget = this.routerView?.$el as HTMLElement;
-      if (focusTarget) {
-        // Make focustarget programmatically focussable
-        focusTarget.setAttribute("tabindex", "-1");
+      console.log(this.routerView);
+      // const focusTarget = this.routerView?.$el as HTMLElement;
+      // if (focusTarget) {
+      //   // Make focustarget programmatically focussable
+      //   focusTarget.setAttribute("tabindex", "-1");
 
-        // Focus element
-        focusTarget.focus();
+      //   // Focus element
+      //   focusTarget.focus();
 
-        // Remove tabindex from focustarget.
-        // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
-        focusTarget.removeAttribute("tabindex");
-      }
+      //   // Remove tabindex from focustarget.
+      //   // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+      //   focusTarget.removeAttribute("tabindex");
+      // }
     }, 0);
-  }
-
-  extractPageTitleFromRoute(route: Route): string {
-    if (route.meta?.announcer?.message) {
-      return route.meta?.announcer?.message();
-    }
-    return document.title;
-  }
-}
+  },
+});
 </script>
 
 <style lang="scss">
diff --git a/js/src/components/Account/ActorAutoComplete.vue b/js/src/components/Account/ActorAutoComplete.vue
index 50a77e1b4..e4f6ff0f2 100644
--- a/js/src/components/Account/ActorAutoComplete.vue
+++ b/js/src/components/Account/ActorAutoComplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-autocomplete
+  <o-autocomplete
     :data="baseData"
     :placeholder="$t('Actor')"
     v-model="name"
@@ -19,7 +19,7 @@
             v-if="props.option.avatar"
             alt=""
           />
-          <b-icon v-else icon="account-circle" />
+          <o-icon v-else icon="account-circle" />
         </div>
         <div class="media-content">
           <span v-if="props.option.name">
@@ -41,7 +41,7 @@
         Thats it! No more movies found.
       </span>
     </template>
-  </b-autocomplete>
+  </o-autocomplete>
 </template>
 <script lang="ts">
 import { Component, Model, Vue, Watch } from "vue-property-decorator";
diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index d319bd898..adc6d7eb8 100644
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -4,7 +4,7 @@
       <figure class="image is-32x32" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
 
     <div class="media-content">
diff --git a/js/src/components/Account/ActorInline.vue b/js/src/components/Account/ActorInline.vue
index 29fa40359..990b87ff9 100644
--- a/js/src/components/Account/ActorInline.vue
+++ b/js/src/components/Account/ActorInline.vue
@@ -4,7 +4,7 @@
       <figure class="image is-24x24" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
 
     <div class="actor-name">
diff --git a/js/src/components/Activity/DiscussionActivityItem.vue b/js/src/components/Activity/DiscussionActivityItem.vue
index 036ef128f..18fe419f6 100644
--- a/js/src/components/Activity/DiscussionActivityItem.vue
+++ b/js/src/components/Activity/DiscussionActivityItem.vue
@@ -1,45 +1,49 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'chat'" :type="iconColor" />
+    <o-icon :icon="'chat'" :type="iconColor" />
     <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.discussion_title }}</router-link
-        >
-        <b v-else slot="discussion">{{ subjectParams.discussion_title }}</b>
-        <router-link
+      <i18n-t :path="translation" tag="p">
+        <template #discussion v-if="activity.object">
+          <router-link
+            :to="{
+              name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
+            }"
+            >{{ subjectParams.discussion_title }}</router-link
+          >
+        </template>
+        <template v-else #discussion>
+          <b>{{ subjectParams.discussion_title }}</b>
+        </template>
+        <template
           v-if="activity.object && subjectParams.old_discussion_title"
-          slot="old_discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.old_discussion_title }}</router-link
+          #old_discussion
         >
-        <b
+          <router-link
+            :to="{
+              name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
+            }"
+            >{{ subjectParams.old_discussion_title }}</router-link
+          >
+        </template>
+        <template
+          #old_discussion
           v-else-if="subjectParams.old_discussion_title"
-          slot="old_discussion"
-          >{{ subjectParams.old_discussion_title }}</b
         >
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+          <b>{{ subjectParams.old_discussion_title }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("@{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          >
+        </template></i18n-t
       >
       <small class="has-text-grey-dark activity-date">{{
         activity.insertedAt | formatTimeString
diff --git a/js/src/components/Activity/EventActivityItem.vue b/js/src/components/Activity/EventActivityItem.vue
index 8fd38305a..41fc667e2 100644
--- a/js/src/components/Activity/EventActivityItem.vue
+++ b/js/src/components/Activity/EventActivityItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'calendar'" :type="iconColor" />
+    <o-icon :icon="'calendar'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link
diff --git a/js/src/components/Activity/GroupActivityItem.vue b/js/src/components/Activity/GroupActivityItem.vue
index 8a58660b6..5817d7e0e 100644
--- a/js/src/components/Activity/GroupActivityItem.vue
+++ b/js/src/components/Activity/GroupActivityItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'cog'" :type="iconColor" />
+    <o-icon :icon="'cog'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link
diff --git a/js/src/components/Activity/MemberActivityItem.vue b/js/src/components/Activity/MemberActivityItem.vue
index d927438b6..e6a2feb17 100644
--- a/js/src/components/Activity/MemberActivityItem.vue
+++ b/js/src/components/Activity/MemberActivityItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="icon" :type="iconColor" />
+    <o-icon :icon="icon" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <popover-actor-card
diff --git a/js/src/components/Activity/PostActivityItem.vue b/js/src/components/Activity/PostActivityItem.vue
index 07597f7cb..22b37c10b 100644
--- a/js/src/components/Activity/PostActivityItem.vue
+++ b/js/src/components/Activity/PostActivityItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'bullhorn'" :type="iconColor" />
+    <o-icon :icon="'bullhorn'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link
diff --git a/js/src/components/Activity/ResourceActivityItem.vue b/js/src/components/Activity/ResourceActivityItem.vue
index c178147e4..e6ac9ab75 100644
--- a/js/src/components/Activity/ResourceActivityItem.vue
+++ b/js/src/components/Activity/ResourceActivityItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'link'" :type="iconColor" />
+    <o-icon :icon="'link'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link v-if="activity.object" slot="resource" :to="path">{{
diff --git a/js/src/components/Activity/SkeletonActivityItem.vue b/js/src/components/Activity/SkeletonActivityItem.vue
index c21f6fabd..bd32f0503 100644
--- a/js/src/components/Activity/SkeletonActivityItem.vue
+++ b/js/src/components/Activity/SkeletonActivityItem.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="activity-item">
     <span>
-      <b-skeleton circle width="32px" height="32px"></b-skeleton>
+      <o-skeleton circle width="32px" height="32px"></o-skeleton>
     </span>
     <div class="subject">
       <div class="content">
         <p>
-          <b-skeleton active></b-skeleton>
-          <b-skeleton active class="datetime"></b-skeleton>
+          <o-skeleton active></o-skeleton>
+          <o-skeleton active class="datetime"></o-skeleton>
         </p>
       </div>
     </div>
diff --git a/js/src/components/Address/AddressInfo.vue b/js/src/components/Address/AddressInfo.vue
index e8f50d721..4a6745c22 100644
--- a/js/src/components/Address/AddressInfo.vue
+++ b/js/src/components/Address/AddressInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <address dir="auto">
-    <b-icon
+    <o-icon
       v-if="showIcon"
       :icon="address.poiInfos.poiIcon.icon"
       size="is-medium"
diff --git a/js/src/components/Address/InlineAddress.vue b/js/src/components/Address/InlineAddress.vue
index 48efc4ea6..96a8fdbe8 100644
--- a/js/src/components/Address/InlineAddress.vue
+++ b/js/src/components/Address/InlineAddress.vue
@@ -7,7 +7,7 @@
         : physicalAddress.description
     "
   >
-    <b-icon icon="map-marker" />
+    <o-icon icon="map-marker" />
     <span v-if="isDescriptionDifferentFromLocality">
       {{ physicalAddress.description }},
       {{ physicalAddress.locality }}
diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue
index d05b6d606..0269321ff 100644
--- a/js/src/components/Admin/Followers.vue
+++ b/js/src/components/Admin/Followers.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-table
+    <o-table
       v-show="relayFollowers.elements.length > 0"
       :data="relayFollowers.elements"
       :loading="$apollo.queries.relayFollowers.loading"
@@ -21,26 +21,26 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column
+      <o-table-column
         field="actor.id"
         label="ID"
         width="40"
         numeric
         v-slot="props"
-        >{{ props.row.actor.id }}</b-table-column
+        >{{ props.row.actor.id }}</o-table-column
       >
 
-      <b-table-column
+      <o-table-column
         field="actor.type"
         :label="$t('Type')"
         width="80"
         v-slot="props"
       >
-        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
-        <b-icon icon="account-circle" v-else />
-      </b-table-column>
+        <o-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
+        <o-icon icon="account-circle" v-else />
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="approved"
         :label="$t('Status')"
         width="100"
@@ -52,9 +52,9 @@
           :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
           >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
         >
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
+      <o-table-column field="actor.domain" :label="$t('Domain')" sortable>
         <template v-slot:default="props">
           <a
             @click="toggle(props.row)"
@@ -65,9 +65,9 @@
             `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
           }}</a>
         </template>
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="targetActor.updatedAt"
         :label="$t('Date')"
         sortable
@@ -80,7 +80,7 @@
               locale: $dateFnsLocale,
             })
           }}</span
-        ></b-table-column
+        ></o-table-column
       >
 
       <template #detail="props">
@@ -97,7 +97,7 @@
 
       <template slot="bottom-left" v-if="checkedRows.length > 0">
         <div class="buttons">
-          <b-button
+          <o-button
             @click="acceptRelays"
             type="is-success"
             v-if="checkedRowsHaveAtLeastOneToApprove"
@@ -109,8 +109,8 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
-          <b-button @click="rejectRelays" type="is-danger">
+          </o-button>
+          <o-button @click="rejectRelays" type="is-danger">
             {{
               $tc(
                 "No instance to reject|Reject instance|Reject {number} instances",
@@ -118,13 +118,13 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
         </div>
       </template>
-    </b-table>
-    <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
+    </o-table>
+    <o-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
       $t("No instance follows your instance yet.")
-    }}</b-message>
+    }}</o-message>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue
index 6739aba01..851d3e0aa 100644
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@@ -1,27 +1,27 @@
 <template>
   <div>
     <form @submit="followRelay">
-      <b-field
+      <o-field
         :label="$t('Add an instance')"
         custom-class="add-relay"
         horizontal
       >
-        <b-field grouped expanded size="is-large">
+        <o-field grouped expanded size="is-large">
           <p class="control">
-            <b-input
+            <o-input
               v-model="newRelayAddress"
               :placeholder="$t('Ex: mobilizon.fr')"
             />
           </p>
           <p class="control">
-            <b-button type="is-primary" native-type="submit">{{
+            <o-button type="is-primary" native-type="submit">{{
               $t("Add an instance")
-            }}</b-button>
+            }}</o-button>
           </p>
-        </b-field>
-      </b-field>
+        </o-field>
+      </o-field>
     </form>
-    <b-table
+    <o-table
       v-show="relayFollowings.elements.length > 0"
       :data="relayFollowings.elements"
       :loading="$apollo.queries.relayFollowings.loading"
@@ -43,29 +43,29 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column
+      <o-table-column
         field="targetActor.id"
         label="ID"
         width="40"
         numeric
         v-slot="props"
-        >{{ props.row.targetActor.id }}</b-table-column
+        >{{ props.row.targetActor.id }}</o-table-column
       >
 
-      <b-table-column
+      <o-table-column
         field="targetActor.type"
         :label="$t('Type')"
         width="80"
         v-slot="props"
       >
-        <b-icon
+        <o-icon
           icon="lan"
           v-if="RelayMixin.isInstance(props.row.targetActor)"
         />
-        <b-icon icon="account-circle" v-else />
-      </b-table-column>
+        <o-icon icon="account-circle" v-else />
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="approved"
         :label="$t('Status')"
         width="100"
@@ -77,9 +77,9 @@
           :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
           >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
         >
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
+      <o-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
         <template v-slot:default="props">
           <a
             @click="toggle(props.row)"
@@ -90,9 +90,9 @@
             `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
           }}</a>
         </template>
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="targetActor.updatedAt"
         :label="$t('Date')"
         sortable
@@ -105,7 +105,7 @@
               locale: $dateFnsLocale,
             })
           }}</span
-        ></b-table-column
+        ></o-table-column
       >
 
       <template #detail="props">
@@ -121,7 +121,7 @@
       </template>
 
       <template slot="bottom-left" v-if="checkedRows.length > 0">
-        <b-button @click="removeRelays" type="is-danger">
+        <o-button @click="removeRelays" type="is-danger">
           {{
             $tc(
               "No instance to remove|Remove instance|Remove {number} instances",
@@ -129,12 +129,12 @@
               { number: checkedRows.length }
             )
           }}
-        </b-button>
+        </o-button>
       </template>
-    </b-table>
-    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
+    </o-table>
+    <o-message type="is-danger" v-if="relayFollowings.total === 0">{{
       $t("You don't follow any instances yet.")
-    }}</b-message>
+    }}</o-message>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
index 569134f60..69641083d 100644
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -19,7 +19,7 @@
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon class="media-left" v-else icon="account-circle" />
+        <o-icon class="media-left" v-else icon="account-circle" />
       </popover-actor-card>
       <div v-else class="media-left">
         <figure
@@ -28,7 +28,7 @@
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon v-else icon="account-circle" />
+        <o-icon v-else icon="account-circle" />
       </div>
       <div class="media-content">
         <div class="content">
@@ -54,11 +54,11 @@
               v-if="comment.actor.id === currentActor.id"
               @click="deleteComment"
             >
-              <b-icon icon="delete" size="is-small" aria-hidden="true" />
+              <o-icon icon="delete" size="is-small" aria-hidden="true" />
               <span class="visually-hidden">{{ $t("Delete") }}</span>
             </button>
             <button @click="reportModal()">
-              <b-icon icon="alert" size="is-small" />
+              <o-icon icon="alert" size="is-small" />
               <span class="visually-hidden">{{ $t("Report") }}</span>
             </button>
           </span>
@@ -72,7 +72,7 @@
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
-              <b-icon icon="chevron-down" class="reply-btn" />
+              <o-icon icon="chevron-down" class="reply-btn" />
               <span class="reply-btn">{{
                 $tc("View a reply", comment.totalReplies, {
                   totalReplies: comment.totalReplies,
@@ -83,7 +83,7 @@
               v-else-if="comment.totalReplies && showReplies"
               @click="showReplies = false"
             >
-              <b-icon icon="chevron-up" class="reply-btn" />
+              <o-icon icon="chevron-up" class="reply-btn" />
               <span class="reply-btn">{{ $t("Hide replies") }}</span>
             </p>
           </div>
@@ -103,7 +103,7 @@
               @click="createReplyToComment()"
             >
               <span class="icon is-small">
-                <b-icon icon="reply" />
+                <o-icon icon="reply" />
               </span>
               <span>{{ $t("Reply") }}</span>
             </span>
@@ -123,7 +123,7 @@
             <img :src="currentActor.avatar.url" alt="" />
           </p>
         </figure>
-        <b-icon
+        <o-icon
           class="media-left"
           v-else
           size="is-large"
@@ -144,11 +144,11 @@
                 mode="comment"
                 :aria-label="$t('Comment body')"
               />
-              <b-button
+              <o-button
                 :disabled="newComment.text.trim().length === 0"
                 native-type="submit"
                 type="is-primary"
-                >{{ $t("Post a reply") }}</b-button
+                >{{ $t("Post a reply") }}</o-button
               >
             </span>
           </div>
@@ -508,7 +508,7 @@ article {
   transition-property: opacity, transform;
 }
 
-.comment-replies-enter {
+.comment-replies-enter-from {
   opacity: 0;
   transform: translateX(50px) scaleY(0.5);
 }
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 402e0008e..ac9409211 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -6,10 +6,10 @@
       @submit.prevent="createCommentForEvent(newComment)"
       @keyup.ctrl.enter="createCommentForEvent(newComment)"
     >
-      <b-notification
+      <o-notification
         v-if="isEventOrganiser && !areCommentsClosed"
         :closable="false"
-        >{{ $t("Comments are closed for everybody else.") }}</b-notification
+        >{{ $t("Comments are closed for everybody else.") }}</o-notification
       >
       <article class="media">
         <figure class="media-left" v-if="newComment.actor">
@@ -31,28 +31,28 @@
               </p>
             </div>
             <div class="field notify-participants" v-if="isEventOrganiser">
-              <b-switch
+              <o-switch
                 aria-labelledby="notify-participants-toggle"
                 v-model="newComment.isAnnouncement"
-                >{{ $t("Notify participants") }}</b-switch
+                >{{ $t("Notify participants") }}</o-switch
               >
             </div>
           </div>
         </div>
         <div class="send-comment">
-          <b-button
+          <o-button
             native-type="submit"
             type="is-primary"
             class="comment-button-submit"
             icon-left="send"
-            >{{ $t("Send") }}</b-button
+            >{{ $t("Send") }}</o-button
           >
         </div>
       </article>
     </form>
-    <b-notification v-else-if="isConnected" :closable="false">{{
+    <o-notification v-else-if="isConnected" :closable="false">{{
       $t("The organiser has chosen to close comments.")
-    }}</b-notification>
+    }}</o-notification>
     <p
       v-if="$apollo.queries.comments.loading"
       class="loading has-text-centered"
@@ -425,7 +425,7 @@ ul.comment-list li {
   transition-property: opacity, transform;
 }
 
-.comment-list-enter {
+.comment-list-enter-from {
   opacity: 0;
   transform: translateX(50px) scaleY(0.5);
 }
@@ -451,7 +451,7 @@ ul.comment-list li {
 /*    transition: opacity .5s;*/
 /*}*/
 
-/*.comment-empty-list-enter {*/
+/*.comment-empty-list-enter-from {*/
 /*    opacity: 0;*/
 /*}*/
 </style>
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index ab1745b9d..c8cf1542b 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -7,7 +7,7 @@
       >
         <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </div>
     <div class="body">
       <div class="meta" dir="auto">
@@ -29,30 +29,30 @@
             comment.actor.id === currentActor.id
           "
         >
-          <b-dropdown aria-role="list">
-            <b-icon slot="trigger" role="button" icon="dots-horizontal" />
+          <o-dropdown aria-role="list">
+            <o-icon slot="trigger" role="button" icon="dots-horizontal" />
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="comment.actor.id === currentActor.id"
               @click="toggleEditMode"
               aria-role="menuitem"
             >
-              <b-icon icon="pencil"></b-icon>
+              <o-icon icon="pencil"></o-icon>
               {{ $t("Edit") }}
-            </b-dropdown-item>
-            <b-dropdown-item
+            </o-dropdown-item>
+            <o-dropdown-item
               v-if="comment.actor.id === currentActor.id"
               @click="$emit('delete-comment', comment)"
               aria-role="menuitem"
             >
-              <b-icon icon="delete"></b-icon>
+              <o-icon icon="delete"></o-icon>
               {{ $t("Delete") }}
-            </b-dropdown-item>
-            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
-              <b-icon icon="flag" />
+            </o-dropdown-item>
+            <!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
+              <o-icon icon="flag" />
               {{ $t("Report") }}
-            </b-dropdown-item> -->
-          </b-dropdown>
+            </o-dropdown-item> -->
+          </o-dropdown>
         </span>
         <div class="post-infos">
           <span :title="comment.insertedAt | formatDateTimeString">
@@ -94,15 +94,15 @@
       <form v-else class="edition" @submit.prevent="updateComment">
         <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
         <div class="buttons">
-          <b-button
+          <o-button
             native-type="submit"
             :disabled="['<p></p>', '', comment.text].includes(updatedComment)"
             type="is-primary"
-            >{{ $t("Update") }}</b-button
+            >{{ $t("Update") }}</o-button
           >
-          <b-button native-type="button" @click="toggleEditMode">{{
+          <o-button native-type="button" @click="toggleEditMode">{{
             $t("Cancel")
-          }}</b-button>
+          }}</o-button>
         </div>
       </form>
     </div>
diff --git a/js/src/components/Discussion/DiscussionListItem.vue b/js/src/components/Discussion/DiscussionListItem.vue
index 7f8998330..c4f00b952 100644
--- a/js/src/components/Discussion/DiscussionListItem.vue
+++ b/js/src/components/Discussion/DiscussionListItem.vue
@@ -20,7 +20,7 @@
           alt
         />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
     <div class="title-info-wrapper">
       <div class="title-and-date">
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index 6645de3ac..8ed9f22d7 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -18,7 +18,7 @@
           type="button"
           :title="$t('Bold')"
         >
-          <b-icon icon="format-bold" />
+          <o-icon icon="format-bold" />
         </button>
 
         <button
@@ -28,7 +28,7 @@
           type="button"
           :title="$t('Italic')"
         >
-          <b-icon icon="format-italic" />
+          <o-icon icon="format-italic" />
         </button>
 
         <button
@@ -38,7 +38,7 @@
           type="button"
           :title="$t('Underline')"
         >
-          <b-icon icon="format-underline" />
+          <o-icon icon="format-underline" />
         </button>
 
         <button
@@ -49,7 +49,7 @@
           type="button"
           :title="$t('Heading Level 1')"
         >
-          <b-icon icon="format-header-1" />
+          <o-icon icon="format-header-1" />
         </button>
 
         <button
@@ -60,7 +60,7 @@
           type="button"
           :title="$t('Heading Level 2')"
         >
-          <b-icon icon="format-header-2" />
+          <o-icon icon="format-header-2" />
         </button>
 
         <button
@@ -71,7 +71,7 @@
           type="button"
           :title="$t('Heading Level 3')"
         >
-          <b-icon icon="format-header-3" />
+          <o-icon icon="format-header-3" />
         </button>
 
         <button
@@ -81,7 +81,7 @@
           type="button"
           :title="$t('Add link')"
         >
-          <b-icon icon="link" />
+          <o-icon icon="link" />
         </button>
 
         <button
@@ -91,7 +91,7 @@
           type="button"
           :title="$t('Remove link')"
         >
-          <b-icon icon="link-off" />
+          <o-icon icon="link-off" />
         </button>
 
         <button
@@ -101,7 +101,7 @@
           type="button"
           :title="$t('Add picture')"
         >
-          <b-icon icon="image" />
+          <o-icon icon="image" />
         </button>
 
         <button
@@ -112,7 +112,7 @@
           type="button"
           :title="$t('Bullet list')"
         >
-          <b-icon icon="format-list-bulleted" />
+          <o-icon icon="format-list-bulleted" />
         </button>
 
         <button
@@ -123,7 +123,7 @@
           type="button"
           :title="$t('Ordered list')"
         >
-          <b-icon icon="format-list-numbered" />
+          <o-icon icon="format-list-numbered" />
         </button>
 
         <button
@@ -134,7 +134,7 @@
           type="button"
           :title="$t('Quote')"
         >
-          <b-icon icon="format-quote-close" />
+          <o-icon icon="format-quote-close" />
         </button>
 
         <button
@@ -144,7 +144,7 @@
           type="button"
           :title="$t('Undo')"
         >
-          <b-icon icon="undo" />
+          <o-icon icon="undo" />
         </button>
 
         <button
@@ -154,7 +154,7 @@
           type="button"
           :title="$t('Redo')"
         >
-          <b-icon icon="redo" />
+          <o-icon icon="redo" />
         </button>
       </div>
 
@@ -171,7 +171,7 @@
           type="button"
           :title="$t('Bold')"
         >
-          <b-icon icon="format-bold" />
+          <o-icon icon="format-bold" />
           <span class="visually-hidden">{{ $t("Bold") }}</span>
         </button>
 
@@ -182,7 +182,7 @@
           type="button"
           :title="$t('Italic')"
         >
-          <b-icon icon="format-italic" />
+          <o-icon icon="format-italic" />
           <span class="visually-hidden">{{ $t("Italic") }}</span>
         </button>
       </bubble-menu>
diff --git a/js/src/components/Error.vue b/js/src/components/Error.vue
index 752938f06..fa686221a 100644
--- a/js/src/components/Error.vue
+++ b/js/src/components/Error.vue
@@ -25,7 +25,7 @@
             />
           </picture>
         </div>
-        <b-message type="is-danger" class="is-size-5">
+        <o-message type="is-danger" class="is-size-5">
           <h1>
             {{
               $t(
@@ -33,21 +33,23 @@
               )
             }}
           </h1>
-        </b-message>
+        </o-message>
       </section>
-      <b-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
+      <o-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
       <section v-else>
         <h2 class="is-size-5">{{ $t("What can I do to help?") }}</h2>
         <p class="content">
-          <i18n
+          <i18n-t
             tag="span"
             path="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
           >
-            <b slot="instanceName">{{ config.name }}</b>
-            <a slot="mobilizon_link" href="https://joinmobilizon.org">{{
-              $t("Mobilizon")
-            }}</a>
-          </i18n>
+            <template #instanceName>
+              <b>{{ config.name }}</b>
+            </template>
+            <template #mobilizon_link>
+              <a href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a>
+            </template>
+          </i18n-t>
           {{
             $t(
               "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
@@ -97,18 +99,18 @@
           }}
         </p>
         <div class="buttons">
-          <b-tooltip
+          <o-tooltip
             :label="tooltipConfig.label"
             :type="tooltipConfig.type"
             :active="copied !== false"
             always
           >
-            <b-button
+            <o-button
               @click="copyErrorToClipboard"
               @keyup.enter="copyErrorToClipboard"
-              >{{ $t("Copy details to clipboard") }}</b-button
+              >{{ $t("Copy details to clipboard") }}</o-button
             >
-          </b-tooltip>
+          </o-tooltip>
         </div>
       </section>
     </div>
diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
index 71c18fc64..a84ea7258 100644
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="address-autocomplete">
-    <b-field expanded>
-      <b-autocomplete
+    <o-field expanded>
+      <o-autocomplete
         :data="addressData"
         v-model="queryText"
         :placeholder="$t('e.g. 10 Rue Jangot')"
@@ -15,31 +15,31 @@
         dir="auto"
       >
         <template #default="{ option }">
-          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <o-icon :icon="option.poiInfos.poiIcon.icon" />
           <b>{{ option.poiInfos.name }}</b
           ><br />
           <small>{{ option.poiInfos.alternativeName }}</small>
         </template>
-      </b-autocomplete>
-    </b-field>
-    <b-field
+      </o-autocomplete>
+    </o-field>
+    <o-field
       v-if="canDoGeoLocation"
       :message="fieldErrors"
       :type="{ 'is-danger': fieldErrors.length }"
     >
-      <b-button
+      <o-button
         type="is-text"
         v-if="!gettingLocation"
         icon-right="target"
         @click="locateMe"
         @keyup.enter="locateMe"
-        >{{ $t("Use my location") }}</b-button
+        >{{ $t("Use my location") }}</o-button
       >
       <span v-else>{{ $t("Getting location") }}</span>
-    </b-field>
+    </o-field>
     <!--
     <div v-if="selected && selected.geom" class="control">
-      <b-checkbox  @input="togglemap" />
+      <o-checkbox  @input="togglemap" />
       <label class="label">{{ $t("Show map") }}</label>
     </div>
 
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 541b1c4a6..54be32731 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -13,18 +13,18 @@
           class="tag-container"
           v-if="event.tags || event.status !== EventStatus.CONFIRMED"
         >
-          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
+          <o-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
             {{ $t("Tentative") }}
-          </b-tag>
-          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
+          </o-tag>
+          <o-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
             {{ $t("Cancelled") }}
-          </b-tag>
+          </o-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
             v-for="tag in (event.tags || []).slice(0, 3)"
             :key="tag.slug"
           >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
+            <o-tag type="is-light" dir="auto">{{ tag.title }}</o-tag>
           </router-link>
         </div>
       </figure>
@@ -59,7 +59,7 @@
                   alt=""
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
+              <o-icon v-else icon="account-circle" />
               <span class="organizer-name">
                 {{ organizerDisplayName(event) }}
               </span>
@@ -75,7 +75,7 @@
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
-              <b-icon icon="video" />
+              <o-icon icon="video" />
               <span>{{ $t("Online") }}</span>
             </div>
           </div>
diff --git a/js/src/components/Event/EventFullDate.vue b/js/src/components/Event/EventFullDate.vue
index 8708993ad..f6d2c5a30 100644
--- a/js/src/components/Event/EventFullDate.vue
+++ b/js/src/components/Event/EventFullDate.vue
@@ -23,13 +23,13 @@
       formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
     }}</span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && showEndTime">
     <span>{{
@@ -40,13 +40,13 @@
       })
     }}</span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && !showEndTime">
     {{
@@ -74,13 +74,13 @@
       }}
     </span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ multipleTimeZones }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn && showStartTime">
     <span>
@@ -93,13 +93,13 @@
       }}
     </span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn">
     {{
diff --git a/js/src/components/Event/EventListViewCard.vue b/js/src/components/Event/EventListViewCard.vue
index 9a890f7fd..5b16b3321 100644
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/js/src/components/Event/EventListViewCard.vue
@@ -33,15 +33,15 @@
         </div>
         <div class="columns">
           <span class="column is-narrow">
-            <b-icon
+            <o-icon
               icon="earth"
               v-if="event.visibility === EventVisibility.PUBLIC"
             />
-            <b-icon
+            <o-icon
               icon="link"
               v-if="event.visibility === EventVisibility.UNLISTED"
             />
-            <b-icon
+            <o-icon
               icon="lock"
               v-if="event.visibility === EventVisibility.PRIVATE"
             />
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index e5a0bb88c..451476536 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -13,7 +13,7 @@
           height="32"
         />
       </span>
-      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
+      <o-icon v-else-if="icon" :icon="icon" size="is-medium" />
       <div class="content-wrapper" :class="{ 'padding-left': icon }">
         <slot></slot>
       </div>
diff --git a/js/src/components/Event/EventMetadataItem.vue b/js/src/components/Event/EventMetadataItem.vue
index a5c3682c8..a1cd7cdc5 100644
--- a/js/src/components/Event/EventMetadataItem.vue
+++ b/js/src/components/Event/EventMetadataItem.vue
@@ -12,8 +12,8 @@
           alt=""
         />
 
-        <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
-        <b-icon v-else icon="help-circle" />
+        <o-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
+        <o-icon v-else icon="help-circle" />
       </div>
       <div class="media-content">
         <b>{{ metadataItem.title || metadataItem.label }}</b>
@@ -28,19 +28,19 @@
             metadataItem.choices
           "
         >
-          <b-field v-for="(value, key) in metadataItem.choices" :key="key">
-            <b-radio v-model="metadataItemValue" :native-value="key">{{
+          <o-field v-for="(value, key) in metadataItem.choices" :key="key">
+            <o-radio v-model="metadataItemValue" :native-value="key">{{
               value
-            }}</b-radio>
-          </b-field>
+            }}</o-radio>
+          </o-field>
         </div>
-        <b-field
+        <o-field
           v-else-if="
             metadataItem.type === EventMetadataType.STRING &&
             metadataItem.keyType == EventMetadataKeyType.URL
           "
         >
-          <b-input
+          <o-input
             @blur="validatePattern"
             ref="urlInput"
             type="url"
@@ -52,27 +52,27 @@
             v-model="metadataItemValue"
             :placeholder="metadataItem.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
-          <b-input
+        </o-field>
+        <o-field v-else-if="metadataItem.type === EventMetadataType.STRING">
+          <o-input
             v-model="metadataItemValue"
             :placeholder="metadataItem.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
-          <b-numberinput v-model="metadataItemValue" />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
-          <b-checkbox v-model="metadataItemValue">
+        </o-field>
+        <o-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
+          <o-numberinput v-model="metadataItemValue" />
+        </o-field>
+        <o-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
+          <o-checkbox v-model="metadataItemValue">
             {{
               metadataItemValue === "true"
                 ? metadataItem.choices["true"]
                 : metadataItem.choices["false"]
             }}
-          </b-checkbox>
-        </b-field>
+          </o-checkbox>
+        </o-field>
       </div>
-      <b-button
+      <o-button
         icon-left="close"
         @click="$emit('removeItem', metadataItem.key)"
       />
diff --git a/js/src/components/Event/EventMetadataList.vue b/js/src/components/Event/EventMetadataList.vue
index a1ca63100..e1454cb2a 100644
--- a/js/src/components/Event/EventMetadataList.vue
+++ b/js/src/components/Event/EventMetadataList.vue
@@ -9,12 +9,12 @@
         />
       </div>
     </div>
-    <b-field
+    <o-field
       grouped
       :label="$t('Find or add an element')"
       label-for="event-metadata-autocomplete"
     >
-      <b-autocomplete
+      <o-autocomplete
         expanded
         v-model="search"
         ref="autocomplete"
@@ -40,8 +40,8 @@
                 height="24"
                 alt=""
               />
-              <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
-              <b-icon v-else icon="help-circle" />
+              <o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
+              <o-icon v-else icon="help-circle" />
             </div>
             <div class="media-content">
               <b>{{ props.option.label }}</b>
@@ -55,14 +55,14 @@
         <template #empty>{{
           $t("No results for {search}", { search })
         }}</template>
-      </b-autocomplete>
+      </o-autocomplete>
       <p class="control">
-        <b-button @click="showNewElementModal = true">
+        <o-button @click="showNewElementModal = true">
           {{ $t("Add new…") }}
-        </b-button>
+        </o-button>
       </p>
-    </b-field>
-    <b-modal
+    </o-field>
+    <o-modal
       has-modal-card
       v-model="showNewElementModal"
       :close-button-aria-label="$t('Close')"
@@ -77,19 +77,19 @@
         </header>
         <div class="modal-card-body">
           <form @submit="addNewElement">
-            <b-field :label="$t('Element title')">
-              <b-input v-model="newElement.title" />
-            </b-field>
-            <b-field :label="$t('Element value')">
-              <b-input v-model="newElement.value" />
-            </b-field>
-            <b-button type="is-primary" native-type="submit">{{
+            <o-field :label="$t('Element title')">
+              <o-input v-model="newElement.title" />
+            </o-field>
+            <o-field :label="$t('Element value')">
+              <o-input v-model="newElement.value" />
+            </o-field>
+            <o-button type="is-primary" native-type="submit">{{
               $t("Add")
-            }}</b-button>
+            }}</o-button>
           </form>
         </div>
       </div>
-    </b-modal>
+    </o-modal>
   </section>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Event/EventMetadataSidebar.vue b/js/src/components/Event/EventMetadataSidebar.vue
index 4764853ac..f92633f5a 100644
--- a/js/src/components/Event/EventMetadataSidebar.vue
+++ b/js/src/components/Event/EventMetadataSidebar.vue
@@ -9,14 +9,14 @@
         <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
           <address-info :address="physicalAddress" />
-          <b-button
+          <o-button
             type="is-text"
             class="map-show-button"
             @click="$emit('showMapModal', true)"
             v-if="physicalAddress.geom"
           >
             {{ $t("Show map") }}
-          </b-button>
+          </o-button>
         </div>
       </div>
     </event-metadata-block>
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index bfb179192..14fd8ffc8 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -18,12 +18,12 @@
     </div>
     <div class="title-info-wrapper has-text-grey-dark">
       <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
-        <b-tag
+        <o-tag
           class="mr-2"
           type="is-warning"
           size="is-medium"
           v-if="event.draft"
-          >{{ $t("Draft") }}</b-tag
+          >{{ $t("Draft") }}</o-tag
         >
         {{ event.title }}
       </h3>
@@ -36,7 +36,7 @@
         class="event-subtitle"
         v-else-if="event.options && event.options.isOnline"
       >
-        <b-icon icon="video" />
+        <o-icon icon="video" />
         <span>{{ $t("Online") }}</span>
       </div>
       <div class="event-subtitle event-organizer" v-if="showOrganizer">
@@ -46,13 +46,13 @@
         >
           <img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
         </figure>
-        <b-icon v-else icon="account-circle" />
+        <o-icon v-else icon="account-circle" />
         <span class="organizer-name">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
       <p class="participant-metadata">
-        <b-icon icon="account-multiple" />
+        <o-icon icon="account-multiple" />
         <span v-if="event.options.maximumAttendeeCapacity !== 0">
           {{
             $tc(
@@ -76,7 +76,7 @@
           }}
         </span>
         <span v-if="event.participantStats.notApproved > 0">
-          <b-button
+          <o-button
             type="is-text"
             @click="
               gotToWithCheck(participation, {
@@ -95,7 +95,7 @@
                 }
               )
             }}
-          </b-button>
+          </o-button>
         </span>
       </p>
     </div>
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 2d4309ede..a156a4464 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -10,7 +10,7 @@
           width="24"
         />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <o-icon v-else icon="account-circle" />
       {{ displayNameAndUsername(participation.actor) }}
     </div>
     <div class="list-card">
@@ -68,7 +68,7 @@
               participation.event.options.isOnline
             "
           >
-            <b-icon icon="video" />
+            <o-icon icon="video" />
             <span>{{ $t("Online") }}</span>
           </div>
           <div class="event-subtitle event-organizer">
@@ -85,13 +85,13 @@
                 alt=""
               />
             </figure>
-            <b-icon v-else icon="account-circle" />
+            <o-icon v-else icon="account-circle" />
             <span class="organizer-name">
               {{ organizerDisplayName(participation.event) }}
             </span>
           </div>
           <div class="event-subtitle event-participants">
-            <b-icon
+            <o-icon
               :class="{ 'has-text-danger': lastSeatsLeft }"
               icon="account-group"
             />
@@ -138,7 +138,7 @@
                   )
                 }}
               </span>
-              <b-button
+              <o-button
                 v-if="participation.event.participantStats.notApproved > 0"
                 type="is-text"
                 @click="
@@ -158,17 +158,17 @@
                     }
                   )
                 }}
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>
         <div class="actions">
-          <b-dropdown aria-role="list" position="is-bottom-left">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
+          <o-dropdown aria-role="list" position="is-bottom-left">
+            <o-button slot="trigger" role="button" icon-right="dots-horizontal">
               {{ $t("Actions") }}
-            </b-button>
+            </o-button>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -183,11 +183,11 @@
                 })
               "
             >
-              <b-icon icon="pencil" />
+              <o-icon icon="pencil" />
               {{ $t("Edit") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="participation.role === ParticipantRole.CREATOR"
               aria-role="listitem"
               @click="
@@ -197,11 +197,11 @@
                 })
               "
             >
-              <b-icon icon="content-duplicate" />
+              <o-icon icon="content-duplicate" />
               {{ $t("Duplicate") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -211,11 +211,11 @@
               aria-role="listitem"
               @click="openDeleteEventModalWrapper"
             >
-              <b-icon icon="delete" />
+              <o-icon icon="delete" />
               {{ $t("Delete") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -230,22 +230,22 @@
                 })
               "
             >
-              <b-icon icon="account-multiple-plus" />
+              <o-icon icon="account-multiple-plus" />
               {{ $t("Manage participations") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item aria-role="listitem" has-link>
+            <o-dropdown-item aria-role="listitem" has-link>
               <router-link
                 :to="{
                   name: RouteName.EVENT,
                   params: { uuid: participation.event.uuid },
                 }"
               >
-                <b-icon icon="view-compact" />
+                <o-icon icon="view-compact" />
                 {{ $t("View event page") }}
               </router-link>
-            </b-dropdown-item>
-          </b-dropdown>
+            </o-dropdown-item>
+          </o-dropdown>
         </div>
       </div>
     </div>
diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index e42fe2d30..cb98f0c99 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="address-autocomplete columns is-desktop">
     <div class="column">
-      <b-field
+      <o-field
         :label-for="id"
         expanded
         :message="fieldErrors"
@@ -16,13 +16,13 @@
           >
         </template>
         <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
-          <b-button
+          <o-button
             icon-right="map-marker"
             @click="locateMe"
             :title="$t('Use my location')"
           />
         </p>
-        <b-autocomplete
+        <o-autocomplete
           :data="addressData"
           v-model="queryText"
           :placeholder="$t('e.g. 10 Rue Jangot')"
@@ -38,7 +38,7 @@
           dir="auto"
         >
           <template #default="{ option }">
-            <b-icon :icon="option.poiInfos.poiIcon.icon" />
+            <o-icon :icon="option.poiInfos.poiIcon.icon" />
             <b>{{ option.poiInfos.name }}</b
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
@@ -62,15 +62,15 @@
               <!--                        </p>-->
             </div>
           </template>
-        </b-autocomplete>
-        <b-button
+        </o-autocomplete>
+        <o-button
           :disabled="!queryText"
           @click="resetAddress"
           class="reset-area"
           icon-left="close"
           :title="$t('Clear address field')"
         />
-      </b-field>
+      </o-field>
       <div
         class="card"
         v-if="!hideSelected && (selected.originId || selected.url)"
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index ec5a32b46..39b9be7fa 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="list is-hoverable">
-    <b-input
+    <o-input
       dir="auto"
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
     />
-    <b-radio-button
+    <o-radio-button
       v-model="selectedActor"
       :native-value="availableActor"
       class="list-item"
@@ -20,7 +20,7 @@
             alt=""
           />
         </figure>
-        <b-icon
+        <o-icon
           class="media-left"
           v-else
           size="is-large"
@@ -31,7 +31,7 @@
           <small>{{ `@${availableActor.preferredUsername}` }}</small>
         </div>
       </div>
-    </b-radio-button>
+    </o-radio-button>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index de352277a..5e8e643e9 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -16,7 +16,7 @@
               :alt="selectedActor.avatar.alt || ''"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="selectedActor.name">
           <p class="is-4">{{ selectedActor.name }}</p>
@@ -27,9 +27,9 @@
         <div class="media-content" v-else>
           {{ `@${selectedActor.preferredUsername}` }}
         </div>
-        <b-button type="is-text" @click="isComponentModalActive = true">
+        <o-button type="is-text" @click="isComponentModalActive = true">
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <!-- If we have a current actor -->
@@ -44,9 +44,9 @@
         :src="selectedActor.avatar.url"
         :alt="selectedActor.avatar.alt"
       />
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal
+    <o-modal
       :active.sync="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -67,7 +67,7 @@
             <div class="column contact-picker">
               <div v-if="isSelectedActorAGroup && actorMembers.length > 0">
                 <p>{{ $t("Add a contact") }}</p>
-                <b-input
+                <o-input
                   :placeholder="$t('Filter by name')"
                   v-model="contactFilter"
                   dir="auto"
@@ -77,7 +77,7 @@
                   v-for="actor in filteredActorMembers"
                   :key="actor.id"
                 >
-                  <b-checkbox v-model="actualContacts" :native-value="actor.id">
+                  <o-checkbox v-model="actualContacts" :native-value="actor.id">
                     <div class="media">
                       <div class="media-left">
                         <figure class="image is-48x48" v-if="actor.avatar">
@@ -87,7 +87,7 @@
                             :alt="actor.avatar.alt"
                           />
                         </figure>
-                        <b-icon v-else size="is-large" icon="account-circle" />
+                        <o-icon v-else size="is-large" icon="account-circle" />
                       </div>
                       <div class="media-content" v-if="actor.name">
                         <p class="is-4">{{ actor.name }}</p>
@@ -99,7 +99,7 @@
                         {{ `@${usernameWithDomain(actor)}` }}
                       </div>
                     </div>
-                  </b-checkbox>
+                  </o-checkbox>
                 </p>
               </div>
               <div v-else class="content has-text-grey-dark has-text-centered">
@@ -114,7 +114,7 @@
           </button>
         </footer>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index a41b5d463..f71383074 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -25,63 +25,63 @@ A button to set your participation
 
 <template>
   <div class="participation-button">
-    <b-dropdown
+    <o-dropdown
       aria-role="list"
       position="is-bottom-left"
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >
       <template #trigger="{ active }">
-        <b-button
+        <o-button
           type="is-success"
           size="is-large"
           icon-left="check"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
           {{ $t("I participate") }}
-        </b-button>
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="confirmLeave"
         @keyup.enter="confirmLeave"
         class="has-text-danger"
-        >{{ $t("Cancel my participation…") }}</b-dropdown-item
+        >{{ $t("Cancel my participation…") }}</o-dropdown-item
       >
-    </b-dropdown>
+    </o-dropdown>
 
     <div
       v-else-if="
         participation && participation.role === ParticipantRole.NOT_APPROVED
       "
     >
-      <b-dropdown
+      <o-dropdown
         aria-role="list"
         position="is-bottom-left"
         class="dropdown-disabled"
       >
         <button class="button is-success is-large" type="button" slot="trigger">
-          <b-icon icon="timer-sand-empty" />
+          <o-icon icon="timer-sand-empty" />
           <template>
             <span>{{ $t("I participate") }}</span>
           </template>
-          <b-icon icon="menu-down" />
+          <o-icon icon="menu-down" />
         </button>
 
-        <!--                <b-dropdown-item :value="false" aria-role="listitem">-->
+        <!--                <o-dropdown-item :value="false" aria-role="listitem">-->
         <!--                  {{ $t('Change my identity…')}}-->
-        <!--                </b-dropdown-item>-->
+        <!--                </o-dropdown-item>-->
 
-        <b-dropdown-item
+        <o-dropdown-item
           :value="false"
           aria-role="listitem"
           @click="confirmLeave"
           @keyup.enter="confirmLeave"
           class="has-text-danger"
-          >{{ $t("Cancel my participation request…") }}</b-dropdown-item
+          >{{ $t("Cancel my participation request…") }}</o-dropdown-item
         >
-      </b-dropdown>
+      </o-dropdown>
       <small>{{ $t("Participation requested!") }}</small>
       <br />
       <small>{{ $t("Waiting for organization team approval.") }}</small>
@@ -101,22 +101,22 @@ A button to set your participation
       </span>
     </div>
 
-    <b-dropdown
+    <o-dropdown
       aria-role="list"
       position="is-bottom-left"
       v-else-if="!participation && currentActor.id"
     >
       <template #trigger="{ active }">
-        <b-button
+        <o-button
           type="is-primary"
           size="is-large"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
           {{ $t("Participate") }}
-        </b-button>
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="true"
         aria-role="listitem"
         @click="joinEvent(currentActor)"
@@ -139,18 +139,18 @@ A button to set your participation
             </span>
           </div>
         </div>
-      </b-dropdown-item>
+      </o-dropdown-item>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="joinModal"
         @keyup.enter="joinModal"
         v-if="identities.length > 1"
-        >{{ $t("with another identity…") }}</b-dropdown-item
+        >{{ $t("with another identity…") }}</o-dropdown-item
       >
-    </b-dropdown>
-    <b-button
+    </o-dropdown>
+    <o-button
       rel="nofollow"
       tag="router-link"
       :to="{
@@ -161,9 +161,9 @@ A button to set your participation
       type="is-primary"
       size="is-large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ $t("Participate") }}</o-button
     >
-    <b-button
+    <o-button
       tag="router-link"
       rel="nofollow"
       :to="{
@@ -174,7 +174,7 @@ A button to set your participation
       type="is-primary"
       size="is-large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ $t("Participate") }}</o-button
     >
   </div>
 </template>
diff --git a/js/src/components/Event/ShareEventModal.vue b/js/src/components/Event/ShareEventModal.vue
index a62605bd2..3aa3d2df1 100644
--- a/js/src/components/Event/ShareEventModal.vue
+++ b/js/src/components/Event/ShareEventModal.vue
@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="event">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="event.visibility !== EventVisibility.PUBLIC"
           :closable="false"
@@ -16,33 +16,33 @@
               "This event is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
-        <b-notification
+        </o-notification>
+        <o-notification
           type="is-danger"
           v-if="event.status === EventStatus.CANCELLED"
           :closable="false"
         >
           {{ $t("This event has been cancelled.") }}
-        </b-notification>
+        </o-notification>
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
-        <b-field :label="$t('Event URL')" label-for="event-url-text">
-          <b-input
+        <o-field :label="$t('Event URL')" label-for="event-url-text">
+          <o-input
             id="event-url-text"
             ref="eventURLInput"
             :value="event.url"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -50,16 +50,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -75,14 +75,14 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -98,7 +98,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="diasporaShareUrl"
@@ -114,7 +114,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>
diff --git a/js/src/components/Event/TagInput.vue b/js/src/components/Event/TagInput.vue
index ec4606fc4..cb92c8866 100644
--- a/js/src/components/Event/TagInput.vue
+++ b/js/src/components/Event/TagInput.vue
@@ -1,17 +1,17 @@
 <template>
-  <b-field :label-for="id">
+  <o-field :label-for="id">
     <template slot="label">
       {{ $t("Add some tags") }}
-      <b-tooltip
+      <o-tooltip
         type="is-dark"
         :label="
           $t('You can add tags by hitting the Enter key or by adding a comma')
         "
       >
-        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
-      </b-tooltip>
+        <o-icon size="is-small" icon="help-circle-outline"></o-icon>
+      </o-tooltip>
     </template>
-    <b-taginput
+    <o-taginput
       v-model="tagsStrings"
       :data="filteredTags"
       autocomplete
@@ -25,8 +25,8 @@
       :id="id"
       dir="auto"
     >
-    </b-taginput>
-  </b-field>
+    </o-taginput>
+  </o-field>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index 38fbf00e8..00925be30 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -19,7 +19,7 @@
     </picture>
     <ul>
       <li>
-        <b-select
+        <o-select
           :aria-label="$t('Language')"
           v-if="$i18n"
           v-model="locale"
@@ -33,7 +33,7 @@
           >
             {{ language }}
           </option>
-        </b-select>
+        </o-select>
       </li>
       <li>
         <router-link :to="{ name: RouteName.ABOUT }">{{
@@ -59,21 +59,24 @@
       </li>
     </ul>
     <div class="content has-text-centered">
-      <i18n
+      <i18n-t
         tag="span"
         path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
       >
-        <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
-          $t("Mobilizon")
-        }}</a>
-        <span slot="date">{{ new Date().getFullYear() }}</span>
-        <a
-          rel="external"
-          href="https://joinmobilizon.org/hall-of-fame"
-          slot="contributors"
-          >{{ $t("more than 1360 contributors") }}</a
-        >
-      </i18n>
+        <template #mobilizon>
+          <a rel="external" href="https://joinmobilizon.org">{{
+            $t("Mobilizon")
+          }}</a>
+        </template>
+        <template #date>
+          <span>{{ new Date().getFullYear() }}</span>
+        </template>
+        <template #contributors>
+          <a rel="external" href="https://joinmobilizon.org/hall-of-fame">{{
+            $t("more than 1360 contributors")
+          }}</a>
+        </template>
+      </i18n-t>
     </div>
   </footer>
 </template>
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index 4639a2516..8646e4a64 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -20,7 +20,7 @@
           <figure class="image is-48x48" v-if="group.avatar">
             <img class="is-rounded" :src="group.avatar.url" alt="" />
           </figure>
-          <b-icon v-else size="is-large" icon="account-group" />
+          <o-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
           <h3 class="is-size-5 group-title" dir="auto">
@@ -39,7 +39,7 @@
           :physicalAddress="group.physicalAddress"
         />
         <p class="has-text-grey-dark">
-          <b-icon icon="account" />
+          <o-icon icon="account" />
           {{
             $tc(
               "{count} members or followers",
diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index ae15da3c2..7e68a52ba 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -4,7 +4,7 @@
       <figure class="image is-24x24" v-if="member.actor.avatar">
         <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <o-icon v-else icon="account-circle" />
       {{ displayNameAndUsername(member.actor) }}
     </div>
     <div class="card-content" dir="auto">
@@ -14,7 +14,7 @@
             <figure class="image is-48x48" v-if="member.parent.avatar">
               <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="media-content" dir="auto">
             <router-link
@@ -28,18 +28,18 @@
               <h2>{{ member.parent.name }}</h2>
               <p class="is-6 has-text-grey-dark">
                 <span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
-                <b-taglist>
-                  <b-tag
+                <o-taglist>
+                  <o-tag
                     type="is-info"
                     v-if="member.role === MemberRole.ADMINISTRATOR"
-                    >{{ $t("Administrator") }}</b-tag
+                    >{{ $t("Administrator") }}</o-tag
                   >
-                  <b-tag
+                  <o-tag
                     type="is-info"
                     v-else-if="member.role === MemberRole.MODERATOR"
-                    >{{ $t("Moderator") }}</b-tag
+                    >{{ $t("Moderator") }}</o-tag
                   >
-                </b-taglist>
+                </o-taglist>
               </p>
             </router-link>
           </div>
@@ -49,14 +49,14 @@
         </div>
       </div>
       <div>
-        <b-dropdown aria-role="list" position="is-bottom-left">
-          <b-icon icon="dots-horizontal" slot="trigger" />
+        <o-dropdown aria-role="list" position="is-bottom-left">
+          <o-icon icon="dots-horizontal" slot="trigger" />
 
-          <b-dropdown-item aria-role="listitem" @click="$emit('leave')">
-            <b-icon icon="exit-to-app" />
+          <o-dropdown-item aria-role="listitem" @click="$emit('leave')">
+            <o-icon icon="exit-to-app" />
             {{ $t("Leave") }}
-          </b-dropdown-item>
-        </b-dropdown>
+          </o-dropdown-item>
+        </o-dropdown>
       </div>
     </div>
   </div>
diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index 8ac91e01b..3d12319ae 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -2,7 +2,7 @@
   <section>
     <div class="group-section-title" :class="{ privateSection }">
       <h2>
-        <b-icon :icon="icon" />
+        <o-icon :icon="icon" />
         <span>{{ title }}</span>
       </h2>
       <router-link :to="route">{{ $t("View all") }}</router-link>
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index 28d701f00..74652efb6 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -15,7 +15,7 @@
             <figure class="image is-48x48" v-if="member.parent.avatar">
               <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="media-content">
             <div class="level">
@@ -45,20 +45,20 @@
               </div>
               <div class="level-right">
                 <div class="level-item">
-                  <b-button
+                  <o-button
                     type="is-success"
                     @click="$emit('accept', member.id)"
                   >
                     {{ $t("Accept") }}
-                  </b-button>
+                  </o-button>
                 </div>
                 <div class="level-item">
-                  <b-button
+                  <o-button
                     type="is-danger"
                     @click="$emit('reject', member.id)"
                   >
                     {{ $t("Decline") }}
-                  </b-button>
+                  </o-button>
                 </div>
               </div>
             </div>
diff --git a/js/src/components/Group/ShareGroupModal.vue b/js/src/components/Group/ShareGroupModal.vue
index b75c28c53..9d303aa8d 100644
--- a/js/src/components/Group/ShareGroupModal.vue
+++ b/js/src/components/Group/ShareGroupModal.vue
@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="group">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="group.visibility !== GroupVisibility.PUBLIC"
           :closable="false"
@@ -16,23 +16,23 @@
               "This group is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
-        <b-field :label="$t('Group URL')" label-for="group-url-text">
-          <b-input
+        </o-notification>
+        <o-field :label="$t('Group URL')" label-for="group-url-text">
+          <o-input
             id="group-url-text"
             ref="groupURLInput"
             :value="group.url"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -40,16 +40,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -65,21 +65,21 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="linkedInShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -104,7 +104,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 8034e3f1c..ed0857b43 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,30 +1,30 @@
 <template>
-  <b-navbar
+  <o-navbar
     id="navbar"
     type="is-secondary"
     wrapper-class="container"
     :active.sync="mobileNavbarActive"
   >
-    <template slot="brand">
-      <b-navbar-item
+    <template #brand>
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.HOME }"
         :aria-label="$t('Home')"
       >
         <logo />
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="start">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
+    <template #start>
+      <o-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
         $t("Explore")
-      }}</b-navbar-item>
-      <b-navbar-item
+      }}</o-navbar-item>
+      <o-navbar-item
         v-if="currentActor.id && currentUser.isLoggedIn"
         tag="router-link"
         :to="{ name: RouteName.MY_EVENTS }"
-        >{{ $t("My events") }}</b-navbar-item
+        >{{ $t("My events") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.MY_GROUPS }"
         v-if="
@@ -33,9 +33,9 @@
           currentActor.id &&
           currentUser.isLoggedIn
         "
-        >{{ $t("My groups") }}</b-navbar-item
+        >{{ $t("My groups") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="span"
         v-if="
           config &&
@@ -44,15 +44,15 @@
           currentUser.isLoggedIn
         "
       >
-        <b-button
+        <o-button
           v-if="!hideCreateEventsButton"
           tag="router-link"
           :to="{ name: RouteName.CREATE_EVENT }"
           type="is-primary"
-          >{{ $t("Create") }}</b-button
+          >{{ $t("Create") }}</o-button
         >
-      </b-navbar-item>
-      <b-navbar-item
+      </o-navbar-item>
+      <o-navbar-item
         v-if="config && config.features.koenaConnect"
         class="koena"
         tag="a"
@@ -66,14 +66,14 @@
           width="150"
           alt="Contact accessibilité"
         />
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="end">
-      <b-navbar-item tag="div">
+    <template #end>
+      <o-navbar-item tag="div">
         <search-field @navbar-search="mobileNavbarActive = false" />
-      </b-navbar-item>
+      </o-navbar-item>
 
-      <b-navbar-dropdown
+      <o-navbar-dropdown
         v-if="currentActor.id && currentUser.isLoggedIn"
         right
         collapsible
@@ -82,7 +82,7 @@
         tag="span"
         @keyup.enter="toggleMenu"
       >
-        <template slot="label" v-if="currentActor">
+        <template #label v-if="currentActor">
           <div class="identity-wrapper">
             <div>
               <figure class="image is-32x32" v-if="currentActor.avatar">
@@ -92,7 +92,7 @@
                   :src="currentActor.avatar.url"
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
+              <o-icon v-else icon="account-circle" />
             </div>
             <div class="media-content is-hidden-desktop">
               <span>{{ displayName(currentActor) }}</span>
@@ -105,7 +105,7 @@
 
         <!-- No identities dropdown if no identities -->
         <span v-if="identities.length <= 1" />
-        <b-navbar-item
+        <o-navbar-item
           tag="span"
           v-for="identity in identities"
           v-else
@@ -125,7 +125,7 @@
                   alt
                 />
               </figure>
-              <b-icon v-else size="is-medium" icon="account-circle" />
+              <o-icon v-else size="is-medium" icon="account-circle" />
             </div>
 
             <div class="media-content">
@@ -137,31 +137,31 @@
           </span>
 
           <hr class="navbar-divider" role="presentation" />
-        </b-navbar-item>
+        </o-navbar-item>
 
-        <b-navbar-item
+        <o-navbar-item
           tag="router-link"
           :to="{ name: RouteName.UPDATE_IDENTITY }"
-          >{{ $t("My account") }}</b-navbar-item
+          >{{ $t("My account") }}</o-navbar-item
         >
-        <b-navbar-item
+        <o-navbar-item
           v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
           tag="router-link"
           :to="{ name: RouteName.ADMIN_DASHBOARD }"
-          >{{ $t("Administration") }}</b-navbar-item
+          >{{ $t("Administration") }}</o-navbar-item
         >
 
-        <b-navbar-item
+        <o-navbar-item
           tag="span"
           tabindex="0"
           @click="logout"
           @keyup.enter="logout"
         >
           <span>{{ $t("Log out") }}</span>
-        </b-navbar-item>
-      </b-navbar-dropdown>
+        </o-navbar-item>
+      </o-navbar-dropdown>
 
-      <b-navbar-item v-else tag="div">
+      <o-navbar-item v-else tag="div">
         <div class="buttons">
           <router-link
             class="button is-primary"
@@ -177,17 +177,15 @@
             >{{ $t("Log in") }}</router-link
           >
         </div>
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-  </b-navbar>
+  </o-navbar>
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import Logo from "@/components/Logo.vue";
 import { GraphQLError } from "graphql";
 import { loadLanguageAsync } from "@/utils/i18n";
-import { ICurrentUserRole } from "@/types/enums";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import { changeIdentity, logout } from "../utils/auth";
 import {
@@ -195,143 +193,137 @@ import {
   IDENTITIES,
   UPDATE_DEFAULT_ACTOR,
 } from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
+import { IPerson, Person } from "../types/actor";
 import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 import { ICurrentUser, IUser } from "../types/current-user.model";
 import SearchField from "./SearchField.vue";
 import RouteName from "../router/name";
+import { defineComponent } from "vue-demi";
+import { useQuery, useResult } from "@vue/apollo-composable";
+import { ref } from "vue";
 
-@Component({
-  apollo: {
-    currentUser: CURRENT_USER_CLIENT,
-    currentActor: CURRENT_ACTOR_CLIENT,
-    identities: {
-      query: IDENTITIES,
-      update: ({ identities }) =>
-        identities
-          ? identities.map((identity: IPerson) => new Person(identity))
-          : [],
-      skip() {
-        return this.currentUser.isLoggedIn === false;
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-    config: CONFIG,
-    loggedUser: {
-      query: USER_SETTINGS,
-      skip() {
-        return !this.currentUser || this.currentUser.isLoggedIn === false;
-      },
-    },
+export default defineComponent({
+  name: "NavBar",
+  setup() {
+    const { result: resultCurrentUser } = useQuery(CURRENT_USER_CLIENT);
+    const currentUser =
+      useResult<{ currentUser: ICurrentUser }>(resultCurrentUser);
+
+    const { result: resultCurrentActor } = useQuery(CURRENT_ACTOR_CLIENT);
+    const currentActor =
+      useResult<{ currentUser: IPerson }>(resultCurrentActor);
+
+    const { result: configResult } = useQuery(CONFIG);
+    const config = useResult<{ config: IConfig }>(configResult);
+
+    const { result: loggedUserResult } = useQuery(USER_SETTINGS);
+    const loggedUser = useResult<{ config: IUser }>(loggedUserResult);
+
+    const { result: identitiesResult } = useQuery(IDENTITIES);
+    const identities = useResult<{ identities: IPerson[] }, [], Person[]>(
+      identitiesResult,
+      [],
+      (data) => data.identities.map((identity: IPerson) => new Person(identity))
+    );
+
+    const mobileNavbarActive = false;
+
+    const userDropDown = ref(null) as any;
+
+    return {
+      currentUser,
+      currentActor,
+      config,
+      loggedUser,
+      identities,
+      mobileNavbarActive,
+      userDropDown,
+    };
   },
   components: {
     Logo,
     SearchField,
   },
-})
-export default class NavBar extends Vue {
-  currentActor!: IPerson;
+  methods: {
+    toggleMenu(): void {
+      console.debug("called toggleMenu");
+      if (this.userDropDown) {
+        this.userDropDown.showMenu();
+      }
+    },
+    async handleErrors(errors: GraphQLError[]): Promise<void> {
+      if (
+        errors.length > 0 &&
+        errors[0].message ===
+          "You need to be logged-in to view your list of identities"
+      ) {
+        await this.logout();
+      }
+    },
+    async logout(): Promise<void> {
+      await logout(this.$apollo.provider.defaultClient);
+      this.$oruga.notification.open({
+        message: this.$t("You have been disconnected") as string,
+        type: "is-success",
+        position: "is-bottom-right",
+        duration: 5000,
+      });
 
-  config!: IConfig;
+      if (this.$route.name === RouteName.HOME) return;
+      await this.$router.push({ name: RouteName.HOME });
+    },
+    async setIdentity(identity: IPerson): Promise<void> {
+      await this.$apollo.mutate({
+        mutation: UPDATE_DEFAULT_ACTOR,
+        variables: {
+          preferredUsername: identity.preferredUsername,
+        },
+      });
+      return changeIdentity(this.$apollo.provider.defaultClient, identity);
+    },
+  },
+  watch: {
+    async currentActor(): Promise<void> {
+      if (!this.currentUser?.isLoggedIn) return;
+      const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
+        query: IDENTITIES,
+      });
+      if (data) {
+        this.identities = data.identities.map(
+          (identity: IPerson) => new Person(identity)
+        );
 
-  currentUser!: ICurrentUser;
-
-  loggedUser!: IUser;
-
-  ICurrentUserRole = ICurrentUserRole;
-
-  identities: IPerson[] = [];
-
-  RouteName = RouteName;
-
-  mobileNavbarActive = false;
-
-  displayName = displayName;
-
-  @Ref("user-dropdown") userDropDown!: any;
-
-  toggleMenu(): void {
-    console.debug("called toggleMenu");
-    this.userDropDown.showMenu();
-  }
-
-  @Watch("currentActor")
-  async initializeListOfIdentities(): Promise<void> {
-    if (!this.currentUser.isLoggedIn) return;
-    const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
-      query: IDENTITIES,
-    });
-    if (data) {
-      this.identities = data.identities.map(
-        (identity: IPerson) => new Person(identity)
-      );
-
-      // If we don't have any identities, the user has validated their account,
-      // is logging for the first time but didn't create an identity somehow
-      if (this.identities.length === 0) {
-        try {
-          await this.$router.push({
-            name: RouteName.REGISTER_PROFILE,
-            params: {
-              email: this.currentUser.email,
-              userAlreadyActivated: "true",
-            },
-          });
-        } catch (err) {
-          return undefined;
+        // If we don't have any identities, the user has validated their account,
+        // is logging for the first time but didn't create an identity somehow
+        if (this.identities.length === 0) {
+          try {
+            await this.$router.push({
+              name: RouteName.REGISTER_PROFILE,
+              params: {
+                email: this.currentUser.email,
+                userAlreadyActivated: "true",
+              },
+            });
+          } catch (err) {
+            return undefined;
+          }
         }
       }
-    }
-  }
-
-  @Watch("loggedUser")
-  setSavedLanguage(): void {
-    if (this.loggedUser?.locale) {
-      console.debug("Setting locale from navbar");
-      loadLanguageAsync(this.loggedUser.locale);
-    }
-  }
-
-  async handleErrors(errors: GraphQLError[]): Promise<void> {
-    if (
-      errors.length > 0 &&
-      errors[0].message ===
-        "You need to be logged-in to view your list of identities"
-    ) {
-      await this.logout();
-    }
-  }
-
-  async logout(): Promise<void> {
-    await logout(this.$apollo.provider.defaultClient);
-    this.$buefy.notification.open({
-      message: this.$t("You have been disconnected") as string,
-      type: "is-success",
-      position: "is-bottom-right",
-      duration: 5000,
-    });
-
-    if (this.$route.name === RouteName.HOME) return;
-    await this.$router.push({ name: RouteName.HOME });
-  }
-
-  async setIdentity(identity: IPerson): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_DEFAULT_ACTOR,
-      variables: {
-        preferredUsername: identity.preferredUsername,
-      },
-    });
-    return changeIdentity(this.$apollo.provider.defaultClient, identity);
-  }
-
-  get hideCreateEventsButton(): boolean {
-    return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
-  }
-}
+    },
+    loggedUser(): void {
+      if (this.loggedUser?.locale) {
+        console.debug("Setting locale from navbar");
+        loadLanguageAsync(this.loggedUser.locale);
+      }
+    },
+  },
+  computed: {
+    hideCreateEventsButton(): boolean {
+      return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
+    },
+  },
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
diff --git a/js/src/components/Participation/ConfirmParticipation.vue b/js/src/components/Participation/ConfirmParticipation.vue
index b27b49701..ceecce4d6 100644
--- a/js/src/components/Participation/ConfirmParticipation.vue
+++ b/js/src/components/Participation/ConfirmParticipation.vue
@@ -5,7 +5,7 @@
     </h1>
     <div v-else>
       <div v-if="failed && participation === undefined">
-        <b-message
+        <o-message
           :title="$t('Error while validating participation request')"
           type="is-danger"
         >
@@ -14,7 +14,7 @@
               "Either the participation request has already been validated, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-message>
       </div>
       <div v-else>
         <h1 class="title">
@@ -29,7 +29,7 @@
           }}
         </p>
         <div v-if="failed">
-          <b-message
+          <o-message
             :title="
               $t(
                 'Error while updating participation status inside this browser'
@@ -42,7 +42,7 @@
                 "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue."
               )
             }}
-          </b-message>
+          </o-message>
         </div>
         <div class="columns has-text-centered">
           <div class="column">
diff --git a/js/src/components/Participation/ParticipationSection.vue b/js/src/components/Participation/ParticipationSection.vue
index 96badea38..a5dc53de6 100644
--- a/js/src/components/Participation/ParticipationSection.vue
+++ b/js/src/components/Participation/ParticipationSection.vue
@@ -16,22 +16,22 @@
         "
         @confirm-leave="$emit('confirm-leave')"
       />
-      <b-button
+      <o-button
         type="is-text"
         v-if="!actorIsParticipant && anonymousParticipation !== null"
         @click="$emit('cancel-anonymous-participation')"
-        >{{ $t("Cancel anonymous participation") }}</b-button
+        >{{ $t("Cancel anonymous participation") }}</o-button
       >
       <small v-if="!actorIsParticipant && anonymousParticipation">
         {{ $t("You are participating in this event anonymously") }}
-        <b-tooltip :label="$t('Click for more information')">
+        <o-tooltip :label="$t('Click for more information')">
           <span
             class="is-clickable"
             @click="isAnonymousParticipationModalOpen = true"
           >
-            <b-icon size="is-small" icon="information-outline" />
+            <o-icon size="is-small" icon="information-outline" />
           </span>
-        </b-tooltip>
+        </o-tooltip>
       </small>
       <small
         v-else-if="!actorIsParticipant && anonymousParticipation === false"
@@ -41,7 +41,7 @@
             "You are participating in this event anonymously but didn't confirm participation"
           )
         }}
-        <b-tooltip
+        <o-tooltip
           :label="
             $t(
               'This information is saved only on your computer. Click for details'
@@ -49,9 +49,9 @@
           "
         >
           <router-link :to="{ name: RouteName.TERMS }">
-            <b-icon size="is-small" icon="help-circle-outline" />
+            <o-icon size="is-small" icon="help-circle-outline" />
           </router-link>
-        </b-tooltip>
+        </o-tooltip>
       </small>
     </div>
     <div v-else>
@@ -59,10 +59,10 @@
         <template>
           <span>{{ $t("Event already passed") }}</span>
         </template>
-        <b-icon icon="menu-down" />
+        <o-icon icon="menu-down" />
       </button>
     </div>
-    <b-modal
+    <o-modal
       :active.sync="isAnonymousParticipationModalOpen"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -76,7 +76,7 @@
         </header>
 
         <section class="modal-card-body">
-          <b-notification
+          <o-notification
             type="is-primary"
             :closable="false"
             v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
@@ -86,7 +86,7 @@
                 "As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
               )
             }}
-          </b-notification>
+          </o-notification>
           <p>
             {{
               $t(
@@ -102,19 +102,19 @@
             }}
           </p>
           <div class="buttons" v-if="isSecureContext">
-            <b-button
+            <o-button
               type="is-danger is-outlined"
               @click="clearEventParticipationData"
             >
               {{ $t("Clear participation data for this event") }}
-            </b-button>
-            <b-button type="is-danger" @click="clearAllParticipationData">
+            </o-button>
+            <o-button type="is-danger" @click="clearAllParticipationData">
               {{ $t("Clear participation data for all events") }}
-            </b-button>
+            </o-button>
           </div>
         </section>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue
index bf18cc5d0..5c03c519f 100644
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -10,22 +10,22 @@
               )
             }}
           </p>
-          <b-message type="is-info">
+          <o-message type="is-info">
             {{
               $t(
                 "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
               )
             }}
-          </b-message>
-          <b-message type="is-danger" v-if="error">{{ error }}</b-message>
-          <b-field :label="$t('Email address')">
-            <b-input
+          </o-message>
+          <o-message type="is-danger" v-if="error">{{ error }}</o-message>
+          <o-field :label="$t('Email address')">
+            <o-input
               type="email"
               v-model="anonymousParticipation.email"
               :placeholder="$t('Your email')"
               required
-            ></b-input>
-          </b-field>
+            ></o-input>
+          </o-field>
           <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
             {{
               $t(
@@ -40,16 +40,16 @@
               )
             }}
           </p>
-          <b-field :label="$t('Message')">
-            <b-input
+          <o-field :label="$t('Message')">
+            <o-input
               type="textarea"
               v-model="anonymousParticipation.message"
               minlength="10"
               :required="event.joinOptions === EventJoinOptions.RESTRICTED"
-            ></b-input>
-          </b-field>
-          <b-field>
-            <b-checkbox v-model="anonymousParticipation.saveParticipation">
+            ></o-input>
+          </o-field>
+          <o-field>
+            <o-checkbox v-model="anonymousParticipation.saveParticipation">
               <b>{{ $t("Remember my participation in this browser") }}</b>
               <p>
                 {{
@@ -58,21 +58,21 @@
                   )
                 }}
               </p>
-            </b-checkbox>
-          </b-field>
-          <b-button
+            </o-checkbox>
+          </o-field>
+          <o-button
             :disabled="sendingForm"
             type="is-primary"
             native-type="submit"
-            >{{ $t("Send email") }}</b-button
+            >{{ $t("Send email") }}</o-button
           >
           <div class="has-text-centered">
-            <b-button
+            <o-button
               native-type="button"
               tag="a"
               type="is-text"
               @click="$router.go(-1)"
-              >{{ $t("Back to previous page") }}</b-button
+              >{{ $t("Back to previous page") }}</o-button
             >
           </div>
         </form>
@@ -99,7 +99,7 @@
               )
             }}</span>
           </p>
-          <b-message type="is-warning" v-if="error">{{ error }}</b-message>
+          <o-message type="is-warning" v-if="error">{{ error }}</o-message>
           <p class="content">
             <i18n path="You may now close this window, or {return_to_event}.">
               <router-link
@@ -112,7 +112,7 @@
         </div>
       </div>
     </div>
-    <b-message type="is-danger" v-else-if="!$apollo.loading"
+    <o-message type="is-danger" v-else-if="!$apollo.loading"
       >{{
         $t(
           "Unable to load event for participation. The error details are provided below:"
@@ -121,7 +121,7 @@
       <details>
         <pre>{{ error }}</pre>
       </details>
-    </b-message>
+    </o-message>
   </section>
 </template>
 <script lang="ts">
diff --git a/js/src/components/Participation/UnloggedParticipation.vue b/js/src/components/Participation/UnloggedParticipation.vue
index 1457f459a..e999bb1fb 100644
--- a/js/src/components/Participation/UnloggedParticipation.vue
+++ b/js/src/components/Participation/UnloggedParticipation.vue
@@ -17,9 +17,9 @@
                   alt="Profile illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <p>
               <small>
@@ -32,7 +32,7 @@
                   )
                 }}
               </small>
-              <b-tooltip
+              <o-tooltip
                 type="is-dark"
                 :label="
                   $t(
@@ -40,8 +40,8 @@
                   )
                 "
               >
-                <b-icon size="is-small" icon="help-circle-outline" />
-              </b-tooltip>
+                <o-icon size="is-small" icon="help-circle-outline" />
+              </o-tooltip>
             </p>
           </div>
           <vertical-divider
@@ -65,9 +65,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <a :href="`${event.url}/participate/without-account`" v-else>
               <figure class="image is-128x128">
@@ -76,9 +76,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </a>
             <p>
               <small>{{ $t("Participate using your email address") }}</small>
@@ -90,9 +90,9 @@
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" type="is-text" @click="$router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>
diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index 5929a5e02..9abd16349 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -30,22 +30,22 @@
           )
         }}
       </p>
-      <b-field class="file is-primary">
-        <b-upload @input="onFileChanged" :accept="accept" class="file-label">
+      <o-field class="file is-primary">
+        <o-upload @input="onFileChanged" :accept="accept" class="file-label">
           <span class="file-cta">
-            <b-icon class="file-icon" icon="upload" />
+            <o-icon class="file-icon" icon="upload" />
             <span>{{ $t("Click to upload") }}</span>
           </span>
-        </b-upload>
-      </b-field>
-      <b-button
+        </o-upload>
+      </o-field>
+      <o-button
         type="is-text"
         v-if="imageSrc"
         @click="removeOrClearPicture"
         @keyup.enter="removeOrClearPicture"
       >
         {{ $t("Clear") }}
-      </b-button>
+      </o-button>
     </div>
   </div>
 </template>
diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index 54eb1a7ee..7b933761a 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -14,7 +14,7 @@
         {{ post.title }}
       </h3>
       <p class="post-publication-date">
-        <b-icon icon="clock" />
+        <o-icon icon="clock" />
         <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
           publishedAt | formatDateTimeString(undefined, false, "short")
         }}</span>
@@ -25,12 +25,12 @@
           })
         }}</span>
       </p>
-      <b-taglist v-if="post.tags.length > 0" style="display: inline">
-        <b-icon icon="tag" />
-        <b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
-      </b-taglist>
+      <o-taglist v-if="post.tags.length > 0" style="display: inline">
+        <o-icon icon="tag" />
+        <o-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</o-tag>
+      </o-taglist>
       <p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
-        <b-icon icon="account-edit" />
+        <o-icon icon="account-edit" />
         <i18n path="Published by {name}">
           <b class="has-text-weight-medium" slot="name">{{
             displayName(post.author)
diff --git a/js/src/components/Post/SharePostModal.vue b/js/src/components/Post/SharePostModal.vue
index 216058053..038ff1eb9 100644
--- a/js/src/components/Post/SharePostModal.vue
+++ b/js/src/components/Post/SharePostModal.vue
@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="post">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="post.visibility !== PostVisibility.PUBLIC"
           :closable="false"
@@ -16,23 +16,23 @@
               "This post is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
-        <b-field :label="$t('Post URL')" label-for="post-url-text">
-          <b-input
+        </o-notification>
+        <o-field :label="$t('Post URL')" label-for="post-url-text">
+          <o-input
             id="post-url-text"
             ref="postURLInput"
             :value="postURL"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -40,16 +40,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -65,14 +65,14 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -88,7 +88,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="diasporaShareUrl"
@@ -104,7 +104,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>
diff --git a/js/src/components/Report/ReportCard.vue b/js/src/components/Report/ReportCard.vue
index 025250a68..632e3b187 100644
--- a/js/src/components/Report/ReportCard.vue
+++ b/js/src/components/Report/ReportCard.vue
@@ -11,7 +11,7 @@
           <figure class="image is-48x48" v-if="report.reported.avatar">
             <img alt="" :src="report.reported.avatar.url" />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content">
           <p class="title is-4">{{ report.reported.name }}</p>
diff --git a/js/src/components/Report/ReportModal.vue b/js/src/components/Report/ReportModal.vue
index f7a955078..2f317d1b4 100644
--- a/js/src/components/Report/ReportModal.vue
+++ b/js/src/components/Report/ReportModal.vue
@@ -10,7 +10,7 @@
     >
       <div class="media">
         <div class="media-left">
-          <b-icon icon="alert" type="is-warning" size="is-large" />
+          <o-icon icon="alert" type="is-warning" size="is-large" />
         </div>
         <div class="media-content">
           <div class="box" v-if="comment">
@@ -19,7 +19,7 @@
                 <figure class="image is-48x48" v-if="comment.actor.avatar">
                   <img :src="comment.actor.avatar.url" alt="" />
                 </figure>
-                <b-icon
+                <o-icon
                   class="media-left"
                   v-else
                   size="is-large"
@@ -45,16 +45,16 @@
           </p>
 
           <div class="control">
-            <b-field
+            <o-field
               :label="$t('Additional comments')"
               label-for="additonal-comments"
             >
-              <b-input
+              <o-input
                 v-model="content"
                 type="textarea"
                 id="additonal-comments"
               />
-            </b-field>
+            </o-field>
           </div>
 
           <div class="control" v-if="outsideDomain">
@@ -65,9 +65,9 @@
                 )
               }}
             </p>
-            <b-switch v-model="forward">{{
+            <o-switch v-model="forward">{{
               $t("Transfer to {outsideDomain}", { outsideDomain })
-            }}</b-switch>
+            }}</o-switch>
           </div>
         </div>
       </div>
diff --git a/js/src/components/Resource/FolderItem.vue b/js/src/components/Resource/FolderItem.vue
index b06aeabca..69c162f3a 100644
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -10,7 +10,7 @@
       }"
     >
       <div class="preview">
-        <b-icon icon="folder" size="is-large" />
+        <o-icon icon="folder" size="is-large" />
       </div>
       <div class="body">
         <h3>{{ resource.title }}</h3>
diff --git a/js/src/components/Resource/ResourceDropdown.vue b/js/src/components/Resource/ResourceDropdown.vue
index 3546381be..5d652a030 100644
--- a/js/src/components/Resource/ResourceDropdown.vue
+++ b/js/src/components/Resource/ResourceDropdown.vue
@@ -1,20 +1,20 @@
 <template>
-  <b-dropdown aria-role="list" position="is-bottom-left">
-    <b-icon icon="dots-horizontal" slot="trigger" />
+  <o-dropdown aria-role="list" position="is-bottom-left">
+    <o-icon icon="dots-horizontal" slot="trigger" />
 
-    <b-dropdown-item aria-role="listitem" @click="$emit('rename')">
-      <b-icon icon="pencil" />
+    <o-dropdown-item aria-role="listitem" @click="$emit('rename')">
+      <o-icon icon="pencil" />
       {{ $t("Rename") }}
-    </b-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('move')">
-      <b-icon icon="folder-move" />
+    </o-dropdown-item>
+    <o-dropdown-item aria-role="listitem" @click="$emit('move')">
+      <o-icon icon="folder-move" />
       {{ $t("Move") }}
-    </b-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('delete')">
-      <b-icon icon="delete" />
+    </o-dropdown-item>
+    <o-dropdown-item aria-role="listitem" @click="$emit('delete')">
+      <o-icon icon="delete" />
       {{ $t("Delete") }}
-    </b-dropdown-item>
-  </b-dropdown>
+    </o-dropdown-item>
+  </o-dropdown>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
diff --git a/js/src/components/Resource/ResourceItem.vue b/js/src/components/Resource/ResourceItem.vue
index 58b570768..f4cac70b7 100644
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -8,7 +8,7 @@
             Object.keys(mapServiceTypeToIcon).includes(resource.type)
           "
         >
-          <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
+          <o-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
         </div>
         <div
           class="preview-image"
@@ -16,7 +16,7 @@
           :style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
         />
         <div class="preview-type" v-else>
-          <b-icon icon="link" size="is-large" />
+          <o-icon icon="link" size="is-large" />
         </div>
       </div>
       <div class="body">
diff --git a/js/src/components/Resource/ResourceSelector.vue b/js/src/components/Resource/ResourceSelector.vue
index 90ccb6024..c5dcf7e12 100644
--- a/js/src/components/Resource/ResourceSelector.vue
+++ b/js/src/components/Resource/ResourceSelector.vue
@@ -12,7 +12,7 @@
         v-if="resource.parent"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <o-icon icon="chevron-up" size="is-small" />
         </span>
         {{ $t("Parent folder") }}
       </a>
@@ -22,7 +22,7 @@
         v-else-if="resource.path.length > 1"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <o-icon icon="chevron-up" size="is-small" />
         </span>
         {{ $t("Parent folder") }}
       </a>
@@ -38,12 +38,12 @@
           @click="goDown(element)"
         >
           <span class="panel-icon">
-            <b-icon
+            <o-icon
               icon="folder"
               size="is-small"
               v-if="element.type === 'folder'"
             />
-            <b-icon icon="link" size="is-small" v-else />
+            <o-icon icon="link" size="is-small" v-else />
           </span>
           {{ element.title }}
           <span v-if="element.id === initialResource.id">
@@ -58,7 +58,7 @@
       >
         {{ $t("No resources in this folder") }}
       </p>
-      <b-pagination
+      <o-pagination
         v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
         :total="resource.children.total"
         v-model="page"
@@ -71,10 +71,10 @@
       />
     </article>
     <div class="buttons">
-      <b-button type="is-text" @click="$emit('close-move-modal')">{{
+      <o-button type="is-text" @click="$emit('close-move-modal')">{{
         $t("Cancel")
-      }}</b-button>
-      <b-button
+      }}</o-button>
+      <o-button
         type="is-primary"
         @click="updateResource"
         :disabled="moveDisabled"
@@ -83,7 +83,7 @@
         </template>
         <template v-else
           >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
-        </template></b-button
+        </template></o-button
       >
     </div>
   </div>
diff --git a/js/src/components/SearchField.vue b/js/src/components/SearchField.vue
index c81650761..d9dced478 100644
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -1,7 +1,7 @@
 <template>
   <label for="navSearchField">
     <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
-    <b-input
+    <o-input
       custom-class="searchField"
       id="navSearchField"
       icon="magnify"
diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue
index 9df49add3..1146e8c94 100644
--- a/js/src/components/Settings/NotificationsOnboarding.vue
+++ b/js/src/components/Settings/NotificationsOnboarding.vue
@@ -15,7 +15,7 @@
         </p>
       </div>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationOnDay"
           @input="updateSetting({ notificationOnDay })"
         >
@@ -27,7 +27,7 @@
               )
             }}
           </p>
-        </b-checkbox>
+        </o-checkbox>
       </div>
       <p>
         {{
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index 4eaa5614f..c71e53f96 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -14,7 +14,7 @@
           }}
         </p>
         <div class="has-text-centered">
-          <b-select
+          <o-select
             :loading="!config || !loggedUser"
             v-model="locale"
             :placeholder="$t('Select a language')"
@@ -22,7 +22,7 @@
             <option v-for="(language, lang) in langs" :value="lang" :key="lang">
               {{ language }}
             </option>
-          </b-select>
+          </o-select>
         </div>
       </div>
 
@@ -39,12 +39,12 @@
               timezone,
             })
           }}
-          <b-message
+          <o-message
             type="is-danger"
             v-if="!$apollo.loading && !supportedTimezone"
           >
             {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
-          </b-message>
+          </o-message>
         </p>
       </div>
     </section>
diff --git a/js/src/components/Todo/CompactTodo.vue b/js/src/components/Todo/CompactTodo.vue
index 4d745c938..128db369d 100644
--- a/js/src/components/Todo/CompactTodo.vue
+++ b/js/src/components/Todo/CompactTodo.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-checkbox v-model="status" />
+      <o-checkbox v-model="status" />
       <router-link
         :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
         >{{ todo.title }}</router-link
       >
       <span class="details has-text-grey">
         <span v-if="todo.dueDate" class="due_date">
-          <b-icon icon="calendar" />
+          <o-icon icon="calendar" />
           {{ todo.dueDate | formatDateString }}
         </span>
         <span v-if="todo.assignedTo" class="assigned_to">
-          <b-icon icon="account" />
+          <o-icon icon="account" />
           {{ `@${todo.assignedTo.preferredUsername}` }}
           <span v-if="todo.assignedTo.domain">{{
             `@${todo.assignedTo.domain}`
diff --git a/js/src/components/Todo/FullTodo.vue b/js/src/components/Todo/FullTodo.vue
index 0638beac3..1648719b1 100644
--- a/js/src/components/Todo/FullTodo.vue
+++ b/js/src/components/Todo/FullTodo.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-field :label="$t('Status')">
-        <b-checkbox size="is-large" v-model="status" />
-      </b-field>
-      <b-field :label="$t('Title')">
-        <b-input v-model="title" />
-      </b-field>
-      <b-field :label="$t('Assigned to')">
+      <o-field :label="$t('Status')">
+        <o-checkbox size="is-large" v-model="status" />
+      </o-field>
+      <o-field :label="$t('Title')">
+        <o-input v-model="title" />
+      </o-field>
+      <o-field :label="$t('Assigned to')">
         <actor-auto-complete v-model="assignedTo" />
-      </b-field>
-      <b-field :label="$t('Due on')">
-        <b-datepicker v-model="dueDate" />
-      </b-field>
+      </o-field>
+      <o-field :label="$t('Due on')">
+        <o-datepicker v-model="dueDate" />
+      </o-field>
     </div>
   </div>
 </template>
diff --git a/js/src/components/User/AuthProvider.vue b/js/src/components/User/AuthProvider.vue
index f3817ef5e..c46f70a87 100644
--- a/js/src/components/User/AuthProvider.vue
+++ b/js/src/components/User/AuthProvider.vue
@@ -4,7 +4,7 @@
     v-if="isProviderSelected && oauthProvider.label === null"
     :href="`/auth/${oauthProvider.id}`"
   >
-    <b-icon :icon="oauthProvider.id" />
+    <o-icon :icon="oauthProvider.id" />
     <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
   >
   <a
@@ -12,7 +12,7 @@
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
   >
-    <b-icon icon="lock" />
+    <o-icon icon="lock" />
     <span>{{ oauthProvider.label }}</span>
   </a>
 </template>
diff --git a/js/src/components/Utils/EmptyContent.vue b/js/src/components/Utils/EmptyContent.vue
index 60102696e..0fd0872cf 100644
--- a/js/src/components/Utils/EmptyContent.vue
+++ b/js/src/components/Utils/EmptyContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="empty-content" :class="{ inline }" role="note">
-    <b-icon :icon="icon" size="is-large" />
+    <o-icon :icon="icon" size="is-large" />
     <h2 class="empty-content__title">
       <!-- @slot Mandatory title -->
       <slot />
diff --git a/js/src/components/Utils/RedirectWithAccount.vue b/js/src/components/Utils/RedirectWithAccount.vue
index 4cb6fedca..6094ee9f6 100644
--- a/js/src/components/Utils/RedirectWithAccount.vue
+++ b/js/src/components/Utils/RedirectWithAccount.vue
@@ -4,7 +4,7 @@
       <div class="container">
         <div class="columns is-vcentered">
           <div class="column has-text-centered">
-            <b-button
+            <o-button
               type="is-primary"
               size="is-medium"
               tag="router-link"
@@ -15,7 +15,7 @@
                   redirect: pathAfterLogin,
                 },
               }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</b-button
+              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
             >
           </div>
           <vertical-divider :content="$t('Or')" />
@@ -26,29 +26,29 @@
             <p>{{ $t("Other software may also support this.") }}</p>
             <p>{{ sentence }}</p>
             <form @submit.prevent="redirectToInstance">
-              <b-field :label="$t('Your federated identity')">
-                <b-field>
-                  <b-input
+              <o-field :label="$t('Your federated identity')">
+                <o-field>
+                  <o-input
                     expanded
                     autocapitalize="none"
                     autocorrect="off"
                     v-model="remoteActorAddress"
                     :placeholder="$t('profile@instance')"
-                  ></b-input>
+                  ></o-input>
                   <p class="control">
                     <button class="button is-primary" type="submit">
                       {{ $t("Go") }}
                     </button>
                   </p>
-                </b-field>
-              </b-field>
+                </o-field>
+              </o-field>
             </form>
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" type="is-text" @click="$router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>
diff --git a/js/src/main.ts b/js/src/main.ts
index c3e513bd6..864c3ccdf 100644
--- a/js/src/main.ts
+++ b/js/src/main.ts
@@ -1,9 +1,7 @@
-import Vue from "vue";
-import Buefy from "buefy";
-import Component from "vue-class-component";
+import Vue, { createApp, provide } from "vue";
 import VueScrollTo from "vue-scrollto";
-import VueMeta from "vue-meta";
-import VTooltip from "v-tooltip";
+import { createMetaManager, plugin as metaPlugin } from "vue-meta";
+import VTooltipPlugin from "v-tooltip";
 import VueAnnouncer from "@vue-a11y/announcer";
 import VueSkipTo from "@vue-a11y/skip-to";
 import App from "./App.vue";
@@ -11,34 +9,36 @@ import router from "./router";
 import { NotifierPlugin } from "./plugins/notifier";
 import filters from "./filters";
 import { i18n } from "./utils/i18n";
-import apolloProvider from "./vue-apollo";
+import apolloProvider, { apolloClient } from "./vue-apollo";
+import Oruga from "@oruga-ui/oruga-next";
 import "./registerServiceWorker";
+import { bulmaConfig } from "@oruga-ui/theme-bulma";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import VueI18n from "vue-i18n";
 
-Vue.config.productionTip = false;
-
-Vue.use(Buefy);
-Vue.use(NotifierPlugin);
 Vue.use(filters);
-Vue.use(VueMeta);
-Vue.use(VueScrollTo);
-Vue.use(VTooltip);
-Vue.use(VueAnnouncer);
-Vue.use(VueSkipTo);
+const metaManager = createMetaManager();
 
-// Register the router hooks with their names
-Component.registerHooks([
-  "beforeRouteEnter",
-  "beforeRouteLeave",
-  "beforeRouteUpdate", // for vue-router 2.2+
-]);
-
-/* eslint-disable no-new */
-new Vue({
-  router,
-  apolloProvider,
-  el: "#app",
-  template: "<App/>",
-  components: { App },
-  render: (h) => h(App),
-  i18n,
+const app = createApp({
+  setup() {
+    const { t } = VueI18n.useI18n();
+    provide(DefaultApolloClient, apolloClient);
+    return { $t: t };
+  },
+  ...App,
 });
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+router.app = app;
+app
+  .use(router)
+  .use(apolloProvider)
+  .use(Oruga, bulmaConfig)
+  .use(i18n)
+  .use(NotifierPlugin)
+  .use(VueAnnouncer)
+  .use(VueSkipTo)
+  .use(VTooltipPlugin)
+  .use(VueScrollTo)
+  .use(metaPlugin)
+  .mount("#app");
diff --git a/js/src/plugins/notifier.ts b/js/src/plugins/notifier.ts
index 5000bf986..5f688b7b4 100644
--- a/js/src/plugins/notifier.ts
+++ b/js/src/plugins/notifier.ts
@@ -1,39 +1,22 @@
 /* eslint-disable no-shadow */
 import VueInstance from "vue";
 import { ColorModifiers } from "buefy/types/helpers.d";
-import { Route, RawLocation } from "vue-router";
+import { App } from "vue";
 
-declare module "vue/types/vue" {
+declare module "vue" {
   interface Vue {
     $notifier: {
       success: (message: string) => void;
       error: (message: string) => void;
       info: (message: string) => void;
     };
-    beforeRouteEnter?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteLeave?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteUpdate?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
   }
 }
 
 export class Notifier {
   private readonly vue: typeof VueInstance;
 
-  constructor(vue: typeof VueInstance) {
+  constructor(vue: App) {
     this.vue = vue;
   }
 
@@ -50,7 +33,7 @@ export class Notifier {
   }
 
   private notification(message: string, type: ColorModifiers) {
-    this.vue.prototype.$buefy.notification.open({
+    this.vue.config.globalProperties.$buefy.notification.open({
       message,
       duration: 5000,
       position: "is-bottom-right",
@@ -61,6 +44,8 @@ export class Notifier {
 }
 
 /* eslint-disable */
-export function NotifierPlugin(vue: typeof VueInstance): void {
-  vue.prototype.$notifier = new Notifier(vue);
-}
+export const NotifierPlugin = {
+  install(app: App) {
+    app.config.globalProperties.$notifier = new Notifier(app);
+  },
+};
diff --git a/js/src/router/index.ts b/js/src/router/index.ts
index 14f880edc..a8f2d0392 100644
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -1,5 +1,9 @@
-import Vue from "vue";
-import Router, { Route } from "vue-router";
+import {
+  createRouter,
+  createWebHistory,
+  RouteLocationNormalized,
+  RouteLocationNormalizedLoaded,
+} from "vue-router";
 import VueScrollTo from "vue-scrollto";
 import { PositionResult } from "vue-router/types/router.d";
 import { ImportedComponent } from "vue/types/options";
@@ -15,25 +19,23 @@ import { userRoutes } from "./user";
 import RouteName from "./name";
 import { AVAILABLE_LANGUAGES, i18n } from "@/utils/i18n";
 
-Vue.use(Router);
-
 function scrollBehavior(
-  to: Route,
-  from: Route,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalizedLoaded,
   savedPosition: any
-): PositionResult | undefined | null {
+): any {
   if (to.hash) {
     VueScrollTo.scrollTo(to.hash, 700);
     return {
       selector: to.hash,
-      offset: { x: 0, y: 10 },
+      offset: { left: 0, top: 10 },
     };
   }
   if (savedPosition) {
     return savedPosition;
   }
 
-  return { x: 0, y: 0 };
+  return { left: 0, top: 0 };
 }
 
 export const routes = [
@@ -200,10 +202,9 @@ routes.push({
   redirect: { name: RouteName.PAGE_NOT_FOUND },
 });
 
-const router = new Router({
+const router = createRouter({
   scrollBehavior,
-  mode: "history",
-  base: "/",
+  history: createWebHistory("/"),
   routes,
 });
 
diff --git a/js/src/shims-vue.d.ts b/js/src/shims-vue.d.ts
index ff06f05c4..f650c0c03 100644
--- a/js/src/shims-vue.d.ts
+++ b/js/src/shims-vue.d.ts
@@ -1,3 +1,5 @@
+import Oruga from "@oruga-ui/oruga-next";
+
 declare module "vue" {
   import { CompatVue } from "@vue/runtime-dom";
   const Vue: CompatVue;
@@ -5,9 +7,24 @@ declare module "vue" {
   export * from "@vue/runtime-dom";
 }
 
+// declare module "*.vue" {
+//   import type { DefineComponent } from "vue";
+//   const component: DefineComponent<{}, {}, any>;
+//   export default component;
+// }
+
+declare module "@vue/runtime-core" {
+  export interface ComponentCustomProperties {
+    $oruga: typeof Oruga;
+    $notifier;
+  }
+}
+
 declare module "*.svg" {
   import Vue, { VueConstructor } from "vue";
 
   const content: VueConstructor<Vue>;
   export default content;
 }
+
+declare module "@oruga-ui/theme-bulma";
diff --git a/js/src/utils/i18n.ts b/js/src/utils/i18n.ts
index ff4a5764c..2641e3c76 100644
--- a/js/src/utils/i18n.ts
+++ b/js/src/utils/i18n.ts
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import VueI18n from "vue-i18n";
+import { createI18n } from "vue-i18n";
 import { DateFnsPlugin } from "@/plugins/dateFns";
 import en from "../i18n/en_US.json";
 import langs from "../i18n/langs.json";
@@ -39,9 +39,7 @@ export const locale =
 
 console.debug("chosen locale", locale);
 
-Vue.use(VueI18n);
-
-export const i18n = new VueI18n({
+export const i18n = createI18n({
   locale: DEFAULT_LOCALE, // set locale
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -49,6 +47,7 @@ export const i18n = new VueI18n({
   fallbackLocale: DEFAULT_LOCALE,
   formatFallbackMessages: true,
   pluralizationRules,
+  legacy: false,
 });
 
 console.debug("set VueI18n with default locale", DEFAULT_LOCALE);
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 46c03bcbb..7e13f0719 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -1,6 +1,4 @@
-@import "~bulma/sass/utilities/functions.sass";
-@import "~bulma/sass/utilities/initial-variables.sass";
-@import "~bulma/sass/utilities/derived-variables.sass";
+@import "~bulma/sass/utilities/_all";
 
 $bleuvert: #1e7d97;
 $jaune: #ffd599;
@@ -139,3 +137,6 @@ $subtitle-sup-size: 15px;
 $breadcrumb-item-color: $primary;
 $checkbox-background-color: #fff;
 $title-color: $violet-3;
+
+@import "~bulma/bulma";
+@import "~@oruga-ui/theme-bulma/dist/scss/bulma";
diff --git a/js/src/views/About.vue b/js/src/views/About.vue
index 964811c43..e6c7154e2 100644
--- a/js/src/views/About.vue
+++ b/js/src/views/About.vue
@@ -52,13 +52,13 @@
               )
             }}
           </p>
-          <b-button
+          <o-button
             icon-left="open-in-new"
             size="is-large"
             type="is-primary"
             tag="a"
             href="https://joinmobilizon.org"
-            >{{ $t("Learn more") }}</b-button
+            >{{ $t("Learn more") }}</o-button
           >
         </div>
       </div>
@@ -72,22 +72,22 @@
           <div class="columns">
             <div class="column" v-if="config && config.registrationsOpen">
               <h2 class="title">{{ $t("Register on this instance") }}</h2>
-              <b-button
+              <o-button
                 type="is-secondary"
                 size="is-large"
                 tag="router-link"
                 :to="{ name: RouteName.REGISTER }"
-                >{{ $t("Create an account") }}</b-button
+                >{{ $t("Create an account") }}</o-button
               >
             </div>
             <div class="column">
               <h2 class="title">{{ $t("Find another instance") }}</h2>
-              <b-button
+              <o-button
                 type="is-secondary"
                 size="is-large"
                 tag="a"
                 href="https://mobilizon.org"
-                >{{ $t("Pick an instance") }}</b-button
+                >{{ $t("Pick an instance") }}</o-button
               >
             </div>
           </div>
diff --git a/js/src/views/About/AboutInstance.vue b/js/src/views/About/AboutInstance.vue
index a301fde04..b1e35e418 100644
--- a/js/src/views/About/AboutInstance.vue
+++ b/js/src/views/About/AboutInstance.vue
@@ -79,22 +79,22 @@
         <tr class="instance-feeds">
           <td>{{ $t("Instance feeds") }}</td>
           <td v-if="config.instanceFeeds.enabled" class="buttons">
-            <b-button
+            <o-button
               tag="a"
               size="is-small"
               icon-left="rss"
               href="/feed/instance/atom"
               target="_blank"
-              >{{ $t("RSS/Atom Feed") }}</b-button
+              >{{ $t("RSS/Atom Feed") }}</o-button
             >
 
-            <b-button
+            <o-button
               tag="a"
               size="is-small"
               icon-left="calendar-sync"
               href="/feed/instance/ics"
               target="_blank"
-              >{{ $t("ICS/WebCal Feed") }}</b-button
+              >{{ $t("ICS/WebCal Feed") }}</o-button
             >
           </td>
           <td v-else>{{ $t("Disabled") }}</td>
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index 5aaefc4bb..1ba547015 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -21,7 +21,7 @@
               :src="identity.avatar.url"
               alt=""
             />
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index 5f2293951..ff056e067 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -18,7 +18,7 @@
               alt=""
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="currentIdentity.name">
           <p class="is-4">{{ currentIdentity.name }}</p>
@@ -30,28 +30,28 @@
         <div class="media-content" v-else>
           {{ `@${currentIdentity.preferredUsername}` }}
         </div>
-        <b-button
+        <o-button
           type="is-text"
           v-if="identities.length > 1"
           @click="activateModal"
         >
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <span v-else-if="currentIdentity" class="block" @click="activateModal">
       <figure class="image is-48x48" v-if="currentIdentity.avatar">
         <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal
+    <o-modal
       v-model="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
     >
       <identity-picker v-model="currentIdentity" />
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/views/Account/Profile.vue b/js/src/views/Account/Profile.vue
index b7d98ed2f..71e378ca5 100644
--- a/js/src/views/Account/Profile.vue
+++ b/js/src/views/Account/Profile.vue
@@ -22,25 +22,25 @@
           <vue-simple-markdown :source="person.summary"></vue-simple-markdown>
         </div>
 
-        <b-dropdown hoverable has-link aria-role="list">
+        <o-dropdown hoverable has-link aria-role="list">
           <button class="button is-primary" slot="trigger">
             {{ $t("Public feeds") }}
-            <b-icon icon="menu-down"></b-icon>
+            <o-icon icon="menu-down"></o-icon>
           </button>
 
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('atom', true)">
               {{ $t("Public RSS/Atom Feed") }}
             </a>
-          </b-dropdown-item>
-          <b-dropdown-item aria-role="listitem">
+          </o-dropdown-item>
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('ics', true)">
               {{ $t("Public iCal Feed") }}
             </a>
-          </b-dropdown-item>
-        </b-dropdown>
+          </o-dropdown-item>
+        </o-dropdown>
 
-        <b-dropdown
+        <o-dropdown
           hoverable
           has-link
           aria-role="list"
@@ -48,20 +48,20 @@
         >
           <button class="button is-info" slot="trigger">
             {{ $t("Private feeds") }}
-            <b-icon icon="menu-down"></b-icon>
+            <o-icon icon="menu-down"></o-icon>
           </button>
 
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('atom', false)">
               {{ $t("RSS/Atom Feed") }}
             </a>
-          </b-dropdown-item>
-          <b-dropdown-item aria-role="listitem">
+          </o-dropdown-item>
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('ics', false)">
               {{ $t("iCal Feed") }}
             </a>
-          </b-dropdown-item>
-        </b-dropdown>
+          </o-dropdown-item>
+        </o-dropdown>
         <a
           class="button"
           v-if="currentActor.id === person.id"
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index 07db71e0d..c6b03d540 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -16,28 +16,28 @@
           {{ $t("Now, create your first profile:") }}
         </p>
         <form v-if="!validationSent" @submit.prevent="submit">
-          <b-field :label="$t('Displayed nickname')">
-            <b-input
+          <o-field :label="$t('Displayed nickname')">
+            <o-input
               aria-required="true"
               required
               v-model="identity.name"
               @input="autoUpdateUsername($event)"
             />
-          </b-field>
+          </o-field>
 
-          <b-field
+          <o-field
             :label="$t('Username')"
             :type="errors.preferred_username ? 'is-danger' : null"
             :message="errors.preferred_username"
           >
-            <b-field
+            <o-field
               :message="
                 $t(
                   'Only alphanumeric lowercased characters and underscores are supported.'
                 )
               "
             >
-              <b-input
+              <o-input
                 aria-required="true"
                 required
                 expanded
@@ -53,8 +53,8 @@
               <p class="control">
                 <span class="button is-static">@{{ host }}</span>
               </p>
-            </b-field>
-          </b-field>
+            </o-field>
+          </o-field>
           <p class="description">
             {{
               $t(
@@ -63,14 +63,14 @@
             }}
           </p>
 
-          <b-field :label="$t('Short bio')">
-            <b-input
+          <o-field :label="$t('Short bio')">
+            <o-input
               type="textarea"
               maxlength="100"
               rows="2"
               v-model="identity.summary"
             />
-          </b-field>
+          </o-field>
 
           <p class="content">
             {{
@@ -81,18 +81,18 @@
           </p>
 
           <p class="control has-text-centered">
-            <b-button
+            <o-button
               type="is-primary"
               size="is-large"
               native-type="submit"
               :disabled="sendingValidation"
-              >{{ $t("Create my profile") }}</b-button
+              >{{ $t("Create my profile") }}</o-button
             >
           </p>
         </form>
 
         <div v-if="validationSent && !userAlreadyActivated">
-          <b-message type="is-success" :closable="false">
+          <o-message type="is-success" :closable="false">
             <h2 class="title">
               {{
                 $t("Your account is nearly ready, {username}", {
@@ -110,7 +110,7 @@
                 )
               }}
             </p>
-          </b-message>
+          </o-message>
         </div>
       </div>
     </div>
@@ -231,7 +231,7 @@ export default class Register extends mixins(identityEditionMixin) {
   transition: opacity 1s ease;
 }
 
-.avatar-enter,
+.avatar-enter-from,
 .avatar-leave-to {
   opacity: 0;
 }
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index 726f0bdf8..73fc87cdb 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -36,12 +36,12 @@
         class="picture-upload"
       />
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Display name')"
         label-for="identity-display-name"
       >
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="identity.name"
@@ -49,9 +49,9 @@
           id="identity-display-name"
           dir="auto"
         />
-      </b-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         custom-class="username-field"
         expanded
@@ -59,8 +59,8 @@
         label-for="identity-username"
         :message="message"
       >
-        <b-field expanded>
-          <b-input
+        <o-field expanded>
+          <o-input
             aria-required="true"
             required
             v-model="identity.preferredUsername"
@@ -74,50 +74,50 @@
           <p class="control">
             <span class="button is-static">@{{ getInstanceHost }}</span>
           </p>
-        </b-field>
-      </b-field>
+        </o-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Description')"
         label-for="identity-summary"
       >
-        <b-input
+        <o-input
           type="textarea"
           dir="auto"
           aria-required="false"
           v-model="identity.summary"
           id="identity-summary"
         />
-      </b-field>
+      </o-field>
 
-      <b-notification
+      <o-notification
         type="is-danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in errors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
 
-      <b-field class="submit">
+      <o-field class="submit">
         <div class="control">
           <button type="button" class="button is-primary" @click="submit()">
             {{ $t("Save") }}
           </button>
         </div>
-      </b-field>
+      </o-field>
 
-      <b-field class="delete-identity">
-        <b-button
+      <o-field class="delete-identity">
+        <o-button
           v-if="isUpdate"
           @click="openDeleteIdentityConfirmation()"
           type="is-text"
         >
           {{ $t("Delete this identity") }}
-        </b-button>
-      </b-field>
+        </o-button>
+      </o-field>
 
       <section v-if="isUpdate">
         <div class="setting-title">
@@ -136,14 +136,14 @@
             v-for="feedToken in identity.feedTokens"
             :key="feedToken.token"
           >
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.atom"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 icon-left="rss"
                 @click="
@@ -151,17 +151,17 @@
                 "
                 :href="tokenToURL(feedToken.token, 'atom')"
                 target="_blank"
-                >{{ $t("RSS/Atom Feed") }}</b-button
+                >{{ $t("RSS/Atom Feed") }}</o-button
               >
-            </b-tooltip>
-            <b-tooltip
+            </o-tooltip>
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.ics"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 @click="
                   (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
@@ -169,23 +169,23 @@
                 icon-left="calendar-sync"
                 :href="tokenToURL(feedToken.token, 'ics')"
                 target="_blank"
-                >{{ $t("ICS/WebCal Feed") }}</b-button
+                >{{ $t("ICS/WebCal Feed") }}</o-button
               >
-            </b-tooltip>
-            <b-button
+            </o-tooltip>
+            <o-button
               icon-left="refresh"
               type="is-text"
               @click="openRegenerateFeedTokensConfirmation"
-              >{{ $t("Regenerate new links") }}</b-button
+              >{{ $t("Regenerate new links") }}</o-button
             >
           </div>
         </div>
         <div v-else>
-          <b-button
+          <o-button
             icon-left="refresh"
             type="is-text"
             @click="generateFeedTokens"
-            >{{ $t("Create new links") }}</b-button
+            >{{ $t("Create new links") }}</o-button
           >
         </div>
       </section>
diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index 76f5c7ce3..1e2581090 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -64,24 +64,24 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="confirmSuspendProfile"
         v-if="!group.suspended"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="unsuspendProfile"
         v-if="group.suspended"
         type="is-primary"
-        >{{ $t("Unsuspend") }}</b-button
+        >{{ $t("Unsuspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="refreshProfile"
         v-if="group.domain"
         type="is-primary"
         outlined
-        >{{ $t("Refresh profile") }}</b-button
+        >{{ $t("Refresh profile") }}</o-button
       >
     </div>
     <section>
@@ -92,7 +92,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.members.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -106,7 +106,7 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembersPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Member')"
           v-slot="props"
@@ -122,7 +122,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -143,55 +143,55 @@
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+        </o-table-column>
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          </o-tag>
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          </o-tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No members found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -201,7 +201,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.organizedEvents.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -215,29 +215,29 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
+            <o-tag type="is-info" v-if="props.row.draft">{{
               $t("Draft")
-            }}</b-tag>
+            }}</o-tag>
           </router-link>
-        </b-table-column>
-        <b-table-column
+        </o-table-column>
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No organized events found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -247,7 +247,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.posts.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -261,29 +261,29 @@
         :per-page="POSTS_PER_PAGE"
         @page-change="onPostsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
+            <o-tag type="is-info" v-if="props.row.draft">{{
               $t("Draft")
-            }}</b-tag>
+            }}</o-tag>
           </router-link>
-        </b-table-column>
-        <b-table-column
+        </o-table-column>
+        <o-table-column
           field="publishAt"
           :label="$t('Publication date')"
           v-slot="props"
         >
           {{ props.row.publishAt | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="bullhorn" :inline="true">
             {{ $t("No posts found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
 </template>
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 58f88b16a..bc2dbe7fd 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -48,17 +48,17 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="suspendProfile"
         v-if="person.domain && !person.suspended"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="unsuspendProfile"
         v-if="person.domain && person.suspended"
         type="is-primary"
-        >{{ $t("Unsuspend") }}</b-button
+        >{{ $t("Unsuspend") }}</o-button
       >
     </div>
     <section>
@@ -69,7 +69,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="person.organizedEvents.elements"
         :loading="$apollo.queries.person.loading"
         paginated
@@ -83,26 +83,26 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No organized events listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -112,7 +112,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="
           person.participations.elements.map(
             (participation) => participation.event
@@ -130,26 +130,26 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onParticipationsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No participations listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -159,7 +159,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="person.memberships.elements"
         :loading="$apollo.loading"
         paginated
@@ -173,7 +173,7 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembershipsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="parent.preferredUsername"
           :label="$t('Group')"
           v-slot="props"
@@ -189,7 +189,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -207,55 +207,55 @@
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+        </o-table-column>
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          </o-tag>
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          </o-tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No memberships found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
 </template>
diff --git a/js/src/views/Admin/AdminUserProfile.vue b/js/src/views/Admin/AdminUserProfile.vue
index cfb0b5759..8b3e0d8ce 100644
--- a/js/src/views/Admin/AdminUserProfile.vue
+++ b/js/src/views/Admin/AdminUserProfile.vue
@@ -61,11 +61,11 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="deleteAccount"
         v-if="!user.disabled"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
     </div>
   </div>
diff --git a/js/src/views/Admin/Follows.vue b/js/src/views/Admin/Follows.vue
index aae1acecd..451bd767e 100644
--- a/js/src/views/Admin/Follows.vue
+++ b/js/src/views/Admin/Follows.vue
@@ -34,10 +34,10 @@
             :to="{ name: RouteName.RELAY_FOLLOWINGS }"
           >
             <a>
-              <b-icon icon="inbox-arrow-down"></b-icon>
+              <o-icon icon="inbox-arrow-down"></o-icon>
               <span>
                 {{ $t("Followings") }}
-                <b-tag rounded>{{ relayFollowings.total }}</b-tag>
+                <o-tag rounded>{{ relayFollowings.total }}</o-tag>
               </span>
             </a>
           </router-link>
@@ -47,10 +47,10 @@
             :to="{ name: RouteName.RELAY_FOLLOWERS }"
           >
             <a>
-              <b-icon icon="inbox-arrow-up"></b-icon>
+              <o-icon icon="inbox-arrow-up"></o-icon>
               <span>
                 {{ $t("Followers") }}
-                <b-tag rounded>{{ relayFollowers.total }}</b-tag>
+                <o-tag rounded>{{ relayFollowers.total }}</o-tag>
               </span>
             </a>
           </router-link>
diff --git a/js/src/views/Admin/GroupProfiles.vue b/js/src/views/Admin/GroupProfiles.vue
index f6a8011c2..5d70f7485 100644
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -22,9 +22,9 @@
       >
     </div>
     <div v-if="groups">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
-      <b-table
+      <o-switch v-model="local">{{ $t("Local") }}</o-switch>
+      <o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
+      <o-table
         :data="groups.elements"
         :loading="$apollo.queries.groups.loading"
         paginated
@@ -41,13 +41,13 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column
+        <o-table-column
           field="preferredUsername"
           :label="$t('Username')"
           searchable
         >
           <template #searchable="props">
-            <b-input
+            <o-input
               :aria-label="$t('Filter')"
               v-model="props.filters.preferredUsername"
               :placeholder="$t('Filter')"
@@ -81,11 +81,11 @@
               </article>
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
 
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
+        <o-table-column field="domain" :label="$t('Domain')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               :aria-label="$t('Filter')"
               v-model="props.filters.domain"
               :placeholder="$t('Filter')"
@@ -95,13 +95,13 @@
           <template v-slot:default="props">
             {{ props.row.domain }}
           </template>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No group matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>
diff --git a/js/src/views/Admin/Profiles.vue b/js/src/views/Admin/Profiles.vue
index 1a61483fb..d0687c1a6 100644
--- a/js/src/views/Admin/Profiles.vue
+++ b/js/src/views/Admin/Profiles.vue
@@ -15,9 +15,9 @@
       </ul>
     </nav>
     <div v-if="persons">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
-      <b-table
+      <o-switch v-model="local">{{ $t("Local") }}</o-switch>
+      <o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
+      <o-table
         :data="persons.elements"
         :loading="$apollo.queries.persons.loading"
         paginated
@@ -34,13 +34,13 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column
+        <o-table-column
           field="preferredUsername"
           :label="$t('Username')"
           searchable
         >
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.preferredUsername"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -74,11 +74,11 @@
               </article>
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
 
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
+        <o-table-column field="domain" :label="$t('Domain')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.domain"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -88,13 +88,13 @@
           <template v-slot:default="props">
             {{ props.row.domain }}
           </template>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" :inline="true">
             {{ $t("No profile matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>
diff --git a/js/src/views/Admin/Settings.vue b/js/src/views/Admin/Settings.vue
index 4e0d5fab0..170e647c5 100644
--- a/js/src/views/Admin/Settings.vue
+++ b/js/src/views/Admin/Settings.vue
@@ -16,9 +16,9 @@
     </nav>
     <section v-if="settingsToWrite">
       <form @submit.prevent="updateSettings">
-        <b-field :label="$t('Instance Name')" label-for="instance-name">
-          <b-input v-model="settingsToWrite.instanceName" id="instance-name" />
-        </b-field>
+        <o-field :label="$t('Instance Name')" label-for="instance-name">
+          <o-input v-model="settingsToWrite.instanceName" id="instance-name" />
+        </o-field>
         <div class="field">
           <label class="label has-help" for="instance-description">{{
             $t("Instance Short Description")
@@ -30,7 +30,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceDescription"
             rows="2"
@@ -48,7 +48,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             v-model="settingsToWrite.instanceSlogan"
             :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
             id="instance-slogan"
@@ -61,16 +61,16 @@
           <small>
             {{ $t("Can be an email or a link, or just plain text.") }}
           </small>
-          <b-input v-model="settingsToWrite.contact" id="instance-contact" />
+          <o-input v-model="settingsToWrite.contact" id="instance-contact" />
         </div>
-        <b-field :label="$t('Allow registrations')">
-          <b-switch v-model="settingsToWrite.registrationsOpen">
+        <o-field :label="$t('Allow registrations')">
+          <o-switch v-model="settingsToWrite.registrationsOpen">
             <p class="content" v-if="settingsToWrite.registrationsOpen">
               {{ $t("Registration is allowed, anyone can register.") }}
             </p>
             <p class="content" v-else>{{ $t("Registration is closed.") }}</p>
-          </b-switch>
-        </b-field>
+          </o-switch>
+        </o-field>
         <div class="field">
           <label class="label has-help" for="instance-languages">{{
             $t("Instance languages")
@@ -78,7 +78,7 @@
           <small>
             {{ $t("Main languages you/your moderators speak") }}
           </small>
-          <b-taginput
+          <o-taginput
             v-model="instanceLanguages"
             :data="filteredLanguages"
             autocomplete
@@ -90,7 +90,7 @@
             id="instance-languages"
           >
             <template slot="empty">{{ $t("No languages found") }}</template>
-          </b-taginput>
+          </o-taginput>
         </div>
         <div class="field">
           <label class="label has-help" for="instance-long-description">{{
@@ -103,7 +103,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceLongDescription"
             rows="4"
@@ -121,43 +121,43 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceRules"
             id="instance-rules"
           />
         </div>
-        <b-field :label="$t('Instance Terms Source')">
+        <o-field :label="$t('Instance Terms Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
               <fieldset>
                 <legend>
                   {{ $t("Choose the source of the instance's Terms") }}
                 </legend>
-                <b-field>
-                  <b-radio
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.DEFAULT"
-                    >{{ $t("Default Mobilizon terms") }}</b-radio
+                    >{{ $t("Default Mobilizon terms") }}</o-radio
                   >
-                </b-field>
-                <b-field>
-                  <b-radio
+                </o-field>
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
+                    >{{ $t("Custom URL") }}</o-radio
                   >
-                </b-field>
-                <b-field>
-                  <b-radio
+                </o-field>
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
+                    >{{ $t("Custom text") }}</o-radio
                   >
-                </b-field>
+                </o-field>
               </fieldset>
             </div>
             <div class="column">
@@ -223,60 +223,60 @@
               </div>
             </div>
           </div>
-        </b-field>
-        <b-field
+        </o-field>
+        <o-field
           :label="$t('Instance Terms URL')"
           label-for="instanceTermsUrl"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
         >
-          <b-input
+          <o-input
             type="URL"
             v-model="settingsToWrite.instanceTermsUrl"
             id="instanceTermsUrl"
           />
-        </b-field>
-        <b-field
+        </o-field>
+        <o-field
           :label="$t('Instance Terms')"
           label-for="instanceTerms"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
         >
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceTerms"
             id="instanceTerms"
           />
-        </b-field>
-        <b-field :label="$t('Instance Privacy Policy Source')">
+        </o-field>
+        <o-field :label="$t('Instance Privacy Policy Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
               <fieldset>
                 <legend>
                   {{ $t("Choose the source of the instance's Privacy Policy") }}
                 </legend>
-                <b-field>
-                  <b-radio
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.DEFAULT"
-                    >{{ $t("Default Mobilizon privacy policy") }}</b-radio
+                    >{{ $t("Default Mobilizon privacy policy") }}</o-radio
                   >
-                </b-field>
-                <b-field>
-                  <b-radio
+                </o-field>
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
+                    >{{ $t("Custom URL") }}</o-radio
                   >
-                </b-field>
-                <b-field>
-                  <b-radio
+                </o-field>
+                <o-field>
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
+                    >{{ $t("Custom text") }}</o-radio
                   >
-                </b-field>
+                </o-field>
               </fieldset>
             </div>
             <div class="column">
@@ -339,8 +339,8 @@
               </div>
             </div>
           </div>
-        </b-field>
-        <b-field
+        </o-field>
+        <o-field
           :label="$t('Instance Privacy Policy URL')"
           label-for="instancePrivacyPolicyUrl"
           v-if="
@@ -348,13 +348,13 @@
             InstancePrivacyType.URL
           "
         >
-          <b-input
+          <o-input
             type="URL"
             v-model="settingsToWrite.instancePrivacyPolicyUrl"
             id="instancePrivacyPolicyUrl"
           />
-        </b-field>
-        <b-field
+        </o-field>
+        <o-field
           :label="$t('Instance Privacy Policy')"
           label-for="instancePrivacyPolicy"
           v-if="
@@ -362,15 +362,15 @@
             InstancePrivacyType.CUSTOM
           "
         >
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instancePrivacyPolicy"
             id="instancePrivacyPolicy"
           />
-        </b-field>
-        <b-button native-type="submit" type="is-primary">{{
+        </o-field>
+        <o-button native-type="submit" type="is-primary">{{
           $t("Save")
-        }}</b-button>
+        }}</o-button>
       </form>
     </section>
   </div>
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index 4f7a7ca3b..95b18641e 100644
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -15,7 +15,7 @@
       </ul>
     </nav>
     <div v-if="users">
-      <b-table
+      <o-table
         :data="users.elements"
         :loading="$apollo.queries.users.loading"
         paginated
@@ -34,12 +34,12 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column field="id" width="40" numeric v-slot="props">
+        <o-table-column field="id" width="40" numeric v-slot="props">
           {{ props.row.id }}
-        </b-table-column>
-        <b-table-column field="email" :label="$t('Email')" searchable>
+        </o-table-column>
+        <o-table-column field="email" :label="$t('Email')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.email"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -58,8 +58,8 @@
               {{ props.row.email }}
             </router-link>
           </template>
-        </b-table-column>
-        <b-table-column
+        </o-table-column>
+        <o-table-column
           field="confirmedAt"
           :label="$t('Confirmed at')"
           :centered="true"
@@ -71,15 +71,15 @@
           <template v-else>
             {{ $t("Not confirmed") }}
           </template>
-        </b-table-column>
-        <b-table-column
+        </o-table-column>
+        <o-table-column
           field="locale"
           :label="$t('Language')"
           :centered="true"
           v-slot="props"
         >
           {{ getLanguageNameForCode(props.row.locale) }}
-        </b-table-column>
+        </o-table-column>
 
         <template #detail="props">
           <router-link
@@ -93,7 +93,7 @@
                 <p class="image is-32x32" v-if="actor.avatar">
                   <img :src="actor.avatar.url" />
                 </p>
-                <b-icon v-else size="is-medium" icon="account-circle" />
+                <o-icon v-else size="is-medium" icon="account-circle" />
               </figure>
               <div class="media-content">
                 <div class="content">
@@ -105,7 +105,7 @@
             </article>
           </router-link>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>
diff --git a/js/src/views/Discussions/Create.vue b/js/src/views/Discussions/Create.vue
index bbcbf560a..007347da8 100644
--- a/js/src/views/Discussions/Create.vue
+++ b/js/src/views/Discussions/Create.vue
@@ -35,28 +35,28 @@
           >
         </li>
       </ul>
-      <b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
+      <o-skeleton v-else-if="$apollo.loading" :animated="animated"></o-skeleton>
     </nav>
     <h1 class="title">{{ $t("Create a discussion") }}</h1>
 
     <form @submit.prevent="createDiscussion">
-      <b-field
+      <o-field
         :label="$t('Title')"
         label-for="discussion-title"
         :message="errors.title"
         :type="errors.title ? 'is-danger' : undefined"
       >
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="discussion.title"
           id="discussion-title"
         />
-      </b-field>
+      </o-field>
 
-      <b-field :label="$t('Text')">
+      <o-field :label="$t('Text')">
         <editor v-model="discussion.text" :aria-label="$t('Comment body')" />
-      </b-field>
+      </o-field>
 
       <button class="button is-primary" type="submit">
         {{ $t("Create the discussion") }}
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
index b61457dc7..a6280b8ed 100644
--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -18,7 +18,7 @@
             }"
             >{{ discussion.actor.name }}</router-link
           >
-          <b-skeleton v-else-if="$apollo.loading" animated />
+          <o-skeleton v-else-if="$apollo.loading" animated />
         </li>
         <li>
           <router-link
@@ -31,7 +31,7 @@
             }"
             >{{ $t("Discussions") }}</router-link
           >
-          <b-skeleton animated v-else-if="$apollo.loading" />
+          <o-skeleton animated v-else-if="$apollo.loading" />
         </li>
         <li class="is-active">
           <router-link
@@ -41,15 +41,15 @@
         </li>
       </ul>
     </nav>
-    <b-message v-if="error" type="is-danger">
+    <o-message v-if="error" type="is-danger">
       {{ error }}
-    </b-message>
+    </o-message>
     <section>
       <div class="discussion-title" dir="auto">
         <h1 class="title" v-if="discussion.title && !editTitleMode">
           {{ discussion.title }}
         </h1>
-        <b-button
+        <o-button
           icon-right="pencil"
           size="is-small"
           :title="$t('Update discussion title')"
@@ -66,8 +66,8 @@
             }
           "
         >
-        </b-button>
-        <b-skeleton
+        </o-button>
+        <o-skeleton
           v-else-if="!editTitleMode && $apollo.loading"
           height="50px"
           animated
@@ -77,21 +77,21 @@
           @submit.prevent="updateDiscussion"
           class="title-edit"
         >
-          <b-field :label="$t('Title')" label-for="discussion-title">
-            <b-input
+          <o-field :label="$t('Title')" label-for="discussion-title">
+            <o-input
               :value="discussion.title"
               v-model="newTitle"
               id="discussion-title"
             />
-          </b-field>
+          </o-field>
           <div class="buttons">
-            <b-button
+            <o-button
               type="is-primary"
               native-type="submit"
               icon-right="check"
               :title="$t('Update discussion title')"
             />
-            <b-button
+            <o-button
               @click="
                 () => {
                   editTitleMode = false;
@@ -101,12 +101,12 @@
               icon-right="close"
               :title="$t('Cancel discussion title edition')"
             />
-            <b-button
+            <o-button
               @click="openDeleteDiscussionConfirmation"
               type="is-danger"
               native-type="button"
               icon-left="delete"
-              >{{ $t("Delete conversation") }}</b-button
+              >{{ $t("Delete conversation") }}</o-button
             >
           </div>
         </form>
@@ -118,20 +118,20 @@
         @update-comment="updateComment"
         @delete-comment="deleteComment"
       />
-      <b-button
+      <o-button
         v-if="discussion.comments.elements.length < discussion.comments.total"
         @click="loadMoreComments"
-        >{{ $t("Fetch more") }}</b-button
+        >{{ $t("Fetch more") }}</o-button
       >
       <form @submit.prevent="reply" v-if="!error">
-        <b-field :label="$t('Text')">
+        <o-field :label="$t('Text')">
           <editor v-model="newComment" :aria-label="$t('Comment body')" />
-        </b-field>
-        <b-button
+        </o-field>
+        <o-button
           native-type="submit"
           :disabled="['<p></p>', ''].includes(newComment)"
           type="is-primary"
-          >{{ $t("Reply") }}</b-button
+          >{{ $t("Reply") }}</o-button
         >
       </form>
     </section>
diff --git a/js/src/views/Discussions/DiscussionsList.vue b/js/src/views/Discussions/DiscussionsList.vue
index 63e016138..55ad4239a 100644
--- a/js/src/views/Discussions/DiscussionsList.vue
+++ b/js/src/views/Discussions/DiscussionsList.vue
@@ -35,13 +35,13 @@
           )
         }}
       </p>
-      <b-button
+      <o-button
         tag="router-link"
         :to="{
           name: RouteName.CREATE_DISCUSSION,
           params: { preferredUsername },
         }"
-        >{{ $t("New discussion") }}</b-button
+        >{{ $t("New discussion") }}</o-button
       >
       <div v-if="group.discussions.elements.length > 0">
         <discussion-list-item
@@ -49,7 +49,7 @@
           v-for="discussion in group.discussions.elements"
           :key="discussion.id"
         />
-        <b-pagination
+        <o-pagination
           class="discussion-pagination"
           :total="group.discussions.total"
           v-model="page"
@@ -59,7 +59,7 @@
           :aria-page-label="$t('Page')"
           :aria-current-label="$t('Current page')"
         >
-        </b-pagination>
+        </o-pagination>
       </div>
       <empty-content v-else icon="chat">
         {{ $t("There's no discussions yet") }}
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 68d4b2c37..5292a75a5 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -16,13 +16,13 @@
           :defaultImage="event.picture"
         />
 
-        <b-field
+        <o-field
           :label="$t('Title')"
           label-for="title"
           :type="checkTitleLength[0]"
           :message="checkTitleLength[1]"
         >
-          <b-input
+          <o-input
             size="is-large"
             aria-required="true"
             required
@@ -30,17 +30,17 @@
             id="title"
             dir="auto"
           />
-        </b-field>
+        </o-field>
 
         <tag-input v-model="event.tags" />
 
-        <b-field
+        <o-field
           horizontal
           :label="$t('Starts on…')"
           class="begins-on-field"
           label-for="begins-on-field"
         >
-          <b-datetimepicker
+          <o-datetimepicker
             class="datepicker starts-on"
             :placeholder="$t('Type or select a date…')"
             icon="calendar-today"
@@ -55,11 +55,11 @@
               'aria-previous-label': $t('Previous month'),
             }"
           >
-          </b-datetimepicker>
-        </b-field>
+          </o-datetimepicker>
+        </o-field>
 
-        <b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
-          <b-datetimepicker
+        <o-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
+          <o-datetimepicker
             class="datepicker ends-on"
             :placeholder="$t('Type or select a date…')"
             icon="calendar-today"
@@ -75,12 +75,12 @@
               'aria-previous-label': $t('Previous month'),
             }"
           >
-          </b-datetimepicker>
-        </b-field>
+          </o-datetimepicker>
+        </o-field>
 
-        <b-button type="is-text" @click="dateSettingsIsOpen = true">
+        <o-button type="is-text" @click="dateSettingsIsOpen = true">
           {{ $t("Date parameters") }}
-        </b-button>
+        </o-button>
 
         <div class="address">
           <full-address-auto-complete
@@ -88,9 +88,9 @@
             :user-timezone="userActualTimezone"
             :disabled="isOnline"
           />
-          <b-switch class="is-online" v-model="isOnline">{{
+          <o-switch class="is-online" v-model="isOnline">{{
             $t("The event is fully online")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="field">
@@ -101,25 +101,25 @@
           />
         </div>
 
-        <b-field :label="$t('Website / URL')" label-for="website-url">
-          <b-input
+        <o-field :label="$t('Website / URL')" label-for="website-url">
+          <o-input
             icon="link"
             type="url"
             v-model="event.onlineAddress"
             placeholder="URL"
             id="website-url"
           />
-        </b-field>
+        </o-field>
 
         <subtitle>{{ $t("Organizers") }}</subtitle>
 
         <div v-if="config && config.features.groups && organizerActor.id">
-          <b-field>
+          <o-field>
             <organizer-picker-wrapper
               v-model="organizerActor"
               :contacts.sync="event.contacts"
             />
-          </b-field>
+          </o-field>
           <p v-if="!attributedToAGroup && organizerActorEqualToCurrentActor">
             {{
               $t("The event will show as attributed to your personal profile.")
@@ -173,28 +173,28 @@
             }}
           </legend>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="event.visibility"
               name="eventVisibility"
               :native-value="EventVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web (public)") }}</b-radio
+              >{{ $t("Visible everywhere on the web (public)") }}</o-radio
             >
           </div>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="event.visibility"
               name="eventVisibility"
               :native-value="EventVisibility.UNLISTED"
-              >{{ $t("Only accessible through link (private)") }}</b-radio
+              >{{ $t("Only accessible through link (private)") }}</o-radio
             >
           </div>
         </fieldset>
         <!-- <div class="field">
-          <b-radio v-model="event.visibility"
+          <o-radio v-model="event.visibility"
                    name="eventVisibility"
                    :native-value="EventVisibility.PRIVATE">
              {{ $t('Page limited to my group (asks for auth)') }}
-          </b-radio>
+          </o-radio>
         </div>-->
 
         <div
@@ -202,7 +202,7 @@
           v-if="config && config.anonymous.participation.allowed"
         >
           <label class="label">{{ $t("Anonymous participations") }}</label>
-          <b-switch v-model="eventOptions.anonymousParticipation">
+          <o-switch v-model="eventOptions.anonymousParticipation">
             {{
               $t("I want to allow people to participate without an account.")
             }}
@@ -219,26 +219,26 @@
                 )
               }}
             </small>
-          </b-switch>
+          </o-switch>
         </div>
 
         <div class="field">
           <label class="label">{{ $t("Participation approval") }}</label>
-          <b-switch v-model="needsApproval">{{
+          <o-switch v-model="needsApproval">{{
             $t("I want to approve every participation request")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="field">
           <label class="label">{{ $t("Number of places") }}</label>
-          <b-switch v-model="limitedPlaces">{{
+          <o-switch v-model="limitedPlaces">{{
             $t("Limited number of places")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="box" v-if="limitedPlaces">
-          <b-field :label="$t('Number of places')" label-for="number-of-places">
-            <b-numberinput
+          <o-field :label="$t('Number of places')" label-for="number-of-places">
+            <o-numberinput
               controls-position="compact"
               :aria-minus-label="$t('Decrease')"
               :aria-plus-label="$t('Increase')"
@@ -246,19 +246,19 @@
               v-model="eventOptions.maximumAttendeeCapacity"
               id="number-of-places"
             />
-          </b-field>
+          </o-field>
           <!--
-          <b-field>
-            <b-switch v-model="eventOptions.showRemainingAttendeeCapacity">
+          <o-field>
+            <o-switch v-model="eventOptions.showRemainingAttendeeCapacity">
               {{ $t('Show remaining number of places') }}
-            </b-switch>
-          </b-field>
+            </o-switch>
+          </o-field>
 
-          <b-field>
-            <b-switch v-model="eventOptions.showParticipationPrice">
+          <o-field>
+            <o-switch v-model="eventOptions.showParticipationPrice">
               {{ $t('Display participation price') }}
-            </b-switch>
-          </b-field>-->
+            </o-switch>
+          </o-field>-->
         </div>
 
         <subtitle>{{ $t("Public comment moderation") }}</subtitle>
@@ -266,28 +266,28 @@
         <fieldset>
           <legend>{{ $t("Who can post a comment?") }}</legend>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="eventOptions.commentModeration"
               name="commentModeration"
               :native-value="CommentModeration.ALLOW_ALL"
-              >{{ $t("Allow all comments from users with accounts") }}</b-radio
+              >{{ $t("Allow all comments from users with accounts") }}</o-radio
             >
           </div>
 
           <!--          <div class="field">-->
-          <!--            <b-radio v-model="eventOptions.commentModeration"-->
+          <!--            <o-radio v-model="eventOptions.commentModeration"-->
           <!--                     name="commentModeration"-->
           <!--                     :native-value="CommentModeration.MODERATED">-->
           <!--              {{ $t('Moderated comments (shown after approval)') }}-->
-          <!--            </b-radio>-->
+          <!--            </o-radio>-->
           <!--          </div>-->
 
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="eventOptions.commentModeration"
               name="commentModeration"
               :native-value="CommentModeration.CLOSED"
-              >{{ $t("Close comments for all (except for admins)") }}</b-radio
+              >{{ $t("Close comments for all (except for admins)") }}</o-radio
             >
           </div>
         </fieldset>
@@ -302,44 +302,44 @@
               )
             }}
           </legend>
-          <b-field class="event__status__field">
-            <b-radio-button
+          <o-field class="event__status__field">
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-warning"
               :native-value="EventStatus.TENTATIVE"
             >
-              <b-icon icon="calendar-question" />
+              <o-icon icon="calendar-question" />
               {{ $t("Tentative: Will be confirmed later") }}
-            </b-radio-button>
-            <b-radio-button
+            </o-radio-button>
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-success"
               :native-value="EventStatus.CONFIRMED"
             >
-              <b-icon icon="calendar-check" />
+              <o-icon icon="calendar-check" />
               {{ $t("Confirmed: Will happen") }}
-            </b-radio-button>
-            <b-radio-button
+            </o-radio-button>
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-danger"
               :native-value="EventStatus.CANCELLED"
             >
-              <b-icon icon="calendar-remove" />
+              <o-icon icon="calendar-remove" />
               {{ $t("Cancelled: Won't happen") }}
-            </b-radio-button>
-          </b-field>
+            </o-radio-button>
+          </o-field>
         </fieldset>
       </form>
     </div>
     <div class="container section" v-else>
-      <b-message type="is-danger">
+      <o-message type="is-danger">
         {{ $t("Only group moderators can create, edit and delete events.") }}
-      </b-message>
+      </o-message>
     </div>
-    <b-modal
+    <o-modal
       v-model="dateSettingsIsOpen"
       has-modal-card
       trap-focus
@@ -358,8 +358,8 @@
                 )
               }}
             </p>
-            <b-field :label="$t('Timezone')" label-for="timezone" expanded>
-              <b-select
+            <o-field :label="$t('Timezone')" label-for="timezone" expanded>
+              <o-select
                 :placeholder="$t('Select a timezone')"
                 :loading="!config"
                 v-model="timezone"
@@ -378,25 +378,25 @@
                     {{ sanitizeTimezone(timezone) }}
                   </option>
                 </optgroup>
-              </b-select>
-              <b-button
+              </o-select>
+              <o-button
                 :disabled="!timezone"
                 @click="timezone = null"
                 class="reset-area"
                 icon-left="close"
                 :title="$t('Clear timezone field')"
               />
-            </b-field>
-            <b-field :label="$t('Event page settings')">
-              <b-switch v-model="eventOptions.showStartTime">{{
+            </o-field>
+            <o-field :label="$t('Event page settings')">
+              <o-switch v-model="eventOptions.showStartTime">{{
                 $t("Show the time when the event begins")
-              }}</b-switch>
-            </b-field>
-            <b-field>
-              <b-switch v-model="eventOptions.showEndTime">{{
+              }}</o-switch>
+            </o-field>
+            <o-field>
+              <o-switch v-model="eventOptions.showEndTime">{{
                 $t("Show the time when the event ends")
-              }}</b-switch>
-            </b-field>
+              }}</o-switch>
+            </o-field>
           </section>
           <footer class="modal-card-foot">
             <button
@@ -409,7 +409,7 @@
           </footer>
         </div>
       </form>
-    </b-modal>
+    </o-modal>
     <span ref="bottomObserver" />
     <nav
       role="navigation"
@@ -427,22 +427,22 @@
           </div>
           <div class="navbar-end">
             <span class="navbar-item">
-              <b-button type="is-text" @click="confirmGoBack">{{
+              <o-button type="is-text" @click="confirmGoBack">{{
                 $t("Cancel")
-              }}</b-button>
+              }}</o-button>
             </span>
             <!-- If an event has been published we can't make it draft anymore -->
             <span class="navbar-item" v-if="event.draft === true">
-              <b-button
+              <o-button
                 type="is-primary"
                 outlined
                 @click="createOrUpdateDraft"
                 :disabled="saving"
-                >{{ $t("Save draft") }}</b-button
+                >{{ $t("Save draft") }}</o-button
               >
             </span>
             <span class="navbar-item">
-              <b-button
+              <o-button
                 type="is-primary"
                 :disabled="saving"
                 @click="createOrUpdatePublish"
@@ -455,7 +455,7 @@
                   $t("Publish")
                 }}</span>
                 <span v-else>{{ $t("Update my event") }}</span>
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index b9a8b3e71..2d41bcaf8 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <b-loading :active.sync="$apollo.queries.event.loading" />
+    <o-loading :active.sync="$apollo.queries.event.loading" />
     <div class="wrapper">
       <event-banner :picture="event.picture" />
       <div class="intro-wrapper">
@@ -57,22 +57,22 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
-              <b-tag type="is-warning" size="is-medium" v-if="event.draft"
+              <o-tag type="is-warning" size="is-medium" v-if="event.draft"
                 >{{ $t("Draft") }}
-              </b-tag>
+              </o-tag>
               <span
                 class="event-status"
                 v-if="event.status !== EventStatus.CONFIRMED"
               >
-                <b-tag
+                <o-tag
                   type="is-warning"
                   v-if="event.status === EventStatus.TENTATIVE"
-                  >{{ $t("Event to be confirmed") }}</b-tag
+                  >{{ $t("Event to be confirmed") }}</o-tag
                 >
-                <b-tag
+                <o-tag
                   type="is-danger"
                   v-if="event.status === EventStatus.CANCELLED"
-                  >{{ $t("Event cancelled") }}</b-tag
+                  >{{ $t("Event cancelled") }}</o-tag
                 >
               </span>
             </div>
@@ -91,11 +91,11 @@
                 <template v-if="!event.draft">
                   <p v-if="event.visibility === EventVisibility.PUBLIC">
                     {{ $t("Public event") }}
-                    <b-icon icon="earth" />
+                    <o-icon icon="earth" />
                   </p>
                   <p v-if="event.visibility === EventVisibility.UNLISTED">
                     {{ $t("Private event") }}
-                    <b-icon icon="link" />
+                    <o-icon icon="link" />
                   </p>
                 </template>
                 <template v-if="!event.local && organizer.domain">
@@ -168,7 +168,7 @@
                       }}
                     </span>
                   </span>
-                  <b-tooltip
+                  <o-tooltip
                     type="is-dark"
                     v-if="!event.local"
                     :label="
@@ -177,19 +177,19 @@
                       )
                     "
                   >
-                    <b-icon size="is-small" icon="help-circle-outline" />
-                  </b-tooltip>
-                  <b-icon icon="ticket-confirmation-outline" />
+                    <o-icon size="is-small" icon="help-circle-outline" />
+                  </o-tooltip>
+                  <o-icon icon="ticket-confirmation-outline" />
                 </p>
-                <b-dropdown position="is-bottom-left" aria-role="list">
-                  <b-button
+                <o-dropdown position="is-bottom-left" aria-role="list">
+                  <o-button
                     slot="trigger"
                     role="button"
                     icon-right="dots-horizontal"
                   >
                     {{ $t("Actions") }}
-                  </b-button>
-                  <b-dropdown-item
+                  </o-button>
+                  <o-dropdown-item
                     aria-role="listitem"
                     has-link
                     v-if="canManageEvent || event.draft"
@@ -201,10 +201,10 @@
                       }"
                     >
                       {{ $t("Edit") }}
-                      <b-icon icon="pencil" />
+                      <o-icon icon="pencil" />
                     </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
+                  </o-dropdown-item>
+                  <o-dropdown-item
                     aria-role="listitem"
                     has-link
                     v-if="canManageEvent || event.draft"
@@ -216,18 +216,18 @@
                       }"
                     >
                       {{ $t("Duplicate") }}
-                      <b-icon icon="content-duplicate" />
+                      <o-icon icon="content-duplicate" />
                     </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
+                  </o-dropdown-item>
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="canManageEvent || event.draft"
                     @click="openDeleteEventModalWrapper"
                     @keyup.enter="openDeleteEventModalWrapper"
                   >
                     {{ $t("Delete") }}
-                    <b-icon icon="delete" />
-                  </b-dropdown-item>
+                    <o-icon icon="delete" />
+                  </o-dropdown-item>
 
                   <hr
                     role="presentation"
@@ -235,7 +235,7 @@
                     aria-role="menuitem"
                     v-if="canManageEvent || event.draft"
                   />
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="!event.draft"
                     @click="triggerShare()"
@@ -243,10 +243,10 @@
                   >
                     <span>
                       {{ $t("Share this event") }}
-                      <b-icon icon="share" />
+                      <o-icon icon="share" />
                     </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
+                  </o-dropdown-item>
+                  <o-dropdown-item
                     aria-role="listitem"
                     @click="downloadIcsEvent()"
                     @keyup.enter="downloadIcsEvent()"
@@ -254,10 +254,10 @@
                   >
                     <span>
                       {{ $t("Add to my calendar") }}
-                      <b-icon icon="calendar-plus" />
+                      <o-icon icon="calendar-plus" />
                     </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
+                  </o-dropdown-item>
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="ableToReport"
                     @click="isReportModalActive = true"
@@ -265,10 +265,10 @@
                   >
                     <span>
                       {{ $t("Report") }}
-                      <b-icon icon="flag" />
+                      <o-icon icon="flag" />
                     </span>
-                  </b-dropdown-item>
-                </b-dropdown>
+                  </o-dropdown-item>
+                </o-dropdown>
               </div>
             </div>
           </div>
@@ -327,7 +327,7 @@
         </h3>
         <multi-card :events="event.relatedEvents" />
       </section>
-      <b-modal
+      <o-modal
         :active.sync="isReportModalActive"
         has-modal-card
         ref="reportModal"
@@ -339,16 +339,16 @@
           :outside-domain="organizerDomain"
           @close="$refs.reportModal.close()"
         />
-      </b-modal>
-      <b-modal
+      </o-modal>
+      <o-modal
         :close-button-aria-label="$t('Close')"
         :active.sync="isShareModalActive"
         has-modal-card
         ref="shareModal"
       >
         <share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
-      </b-modal>
-      <b-modal
+      </o-modal>
+      <o-modal
         :active.sync="isJoinModalActive"
         has-modal-card
         ref="participationModal"
@@ -384,8 +384,8 @@
             </footer>
           </template>
         </identity-picker>
-      </b-modal>
-      <b-modal
+      </o-modal>
+      <o-modal
         :active.sync="isJoinConfirmationModalActive"
         has-modal-card
         ref="joinConfirmationModal"
@@ -411,32 +411,32 @@
                 joinEvent(actorForConfirmation, messageForConfirmation)
               "
             >
-              <b-field :label="$t('Message')">
-                <b-input
+              <o-field :label="$t('Message')">
+                <o-input
                   type="textarea"
                   size="is-medium"
                   v-model="messageForConfirmation"
                   minlength="10"
-                ></b-input>
-              </b-field>
+                ></o-input>
+              </o-field>
               <div class="buttons">
-                <b-button
+                <o-button
                   native-type="button"
                   class="button"
                   ref="cancelButton"
                   @click="isJoinConfirmationModalActive = false"
                   @keyup.enter="isJoinConfirmationModalActive = false"
                   >{{ $t("Cancel") }}
-                </b-button>
-                <b-button type="is-primary" native-type="submit">
+                </o-button>
+                <o-button type="is-primary" native-type="submit">
                   {{ $t("Confirm my participation") }}
-                </b-button>
+                </o-button>
               </div>
             </form>
           </section>
         </div>
-      </b-modal>
-      <b-modal
+      </o-modal>
+      <o-modal
         :close-button-aria-label="$t('Close')"
         class="map-modal"
         v-if="event.physicalAddress && event.physicalAddress.geom"
@@ -452,7 +452,7 @@
             @close="props.close"
           />
         </template>
-      </b-modal>
+      </o-modal>
     </div>
   </div>
 </template>
@@ -1146,7 +1146,7 @@ export default class Event extends EventMixin {
   transition: opacity 0.5s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
diff --git a/js/src/views/Event/EventList.vue b/js/src/views/Event/EventList.vue
index 89da54b7f..b32ba687c 100644
--- a/js/src/views/Event/EventList.vue
+++ b/js/src/views/Event/EventList.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="container">
     <h1>{{ $t("Event list") }}</h1>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <o-loading :active.sync="$apollo.loading"></o-loading>
     <div v-if="events.length > 0" class="columns is-multiline">
       <EventCard
         v-for="event in events"
@@ -10,10 +10,10 @@
         class="column is-one-quarter-desktop is-half-mobile"
       />
     </div>
-    <b-message
+    <o-message
       v-if-else="events.length === 0 && $apollo.loading === false"
       type="is-danger"
-      >{{ $t("No events found") }}</b-message
+      >{{ $t("No events found") }}</o-message
     >
   </section>
 </template>
diff --git a/js/src/views/Event/GroupEvents.vue b/js/src/views/Event/GroupEvents.vue
index 5c3567bed..ce05289d1 100644
--- a/js/src/views/Event/GroupEvents.vue
+++ b/js/src/views/Event/GroupEvents.vue
@@ -46,17 +46,17 @@
         class="button is-primary"
         >{{ $t("+ Create an event") }}</router-link
       >
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading :active.sync="$apollo.loading"></o-loading>
       <section v-if="group">
         <subtitle>
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
         </subtitle>
-        <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
+        <o-switch v-model="showPassedEvents">{{ $t("Past events") }}</o-switch>
         <grouped-multi-event-minimalist-card
           :events="group.organizedEvents.elements"
           :isCurrentActorMember="isCurrentActorMember"
         />
-        <b-message
+        <o-message
           v-if="
             group.organizedEvents.elements.length === 0 &&
             $apollo.loading === false
@@ -64,8 +64,8 @@
           type="is-danger"
         >
           {{ $t("No events found") }}
-        </b-message>
-        <b-pagination
+        </o-message>
+        <o-pagination
           :total="group.organizedEvents.total"
           v-model="eventsPage"
           :per-page="EVENTS_PAGE_LIMIT"
@@ -74,7 +74,7 @@
           :aria-page-label="$t('Page')"
           :aria-current-label="$t('Current page')"
         >
-        </b-pagination>
+        </o-pagination>
       </section>
     </section>
   </div>
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index c9f00943a..bbe7b8b56 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -17,28 +17,28 @@
         >{{ $t("Create event") }}</router-link
       >
     </div>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <o-loading :active.sync="$apollo.loading"></o-loading>
     <div class="wrapper">
       <div class="event-filter">
-        <b-field grouped group-multiline>
-          <b-field>
-            <b-switch v-model="showUpcoming">{{
+        <o-field grouped group-multiline>
+          <o-field>
+            <o-switch v-model="showUpcoming">{{
               showUpcoming ? $t("Upcoming events") : $t("Past events")
-            }}</b-switch>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showAttending">{{
+            }}</o-switch>
+          </o-field>
+          <o-field v-if="showUpcoming">
+            <o-checkbox v-model="showDrafts">{{ $t("Drafts") }}</o-checkbox>
+          </o-field>
+          <o-field v-if="showUpcoming">
+            <o-checkbox v-model="showAttending">{{
               $t("Attending")
-            }}</b-checkbox>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showMyGroups">{{
+            }}</o-checkbox>
+          </o-field>
+          <o-field v-if="showUpcoming">
+            <o-checkbox v-model="showMyGroups">{{
               $t("From my groups")
-            }}</b-checkbox>
-          </b-field>
+            }}</o-checkbox>
+          </o-field>
           <p v-if="!showUpcoming">
             {{
               $tc(
@@ -50,7 +50,7 @@
               )
             }}
           </p>
-          <b-field
+          <o-field
             class="date-filter"
             expanded
             :label="
@@ -59,15 +59,15 @@
                 : $t('Showing events before')
             "
           >
-            <b-datepicker v-model="dateFilter" />
-            <b-button
+            <o-datepicker v-model="dateFilter" />
+            <o-button
               @click="dateFilter = new Date()"
               class="reset-area"
               icon-left="close"
               :title="$t('Clear date filter field')"
             />
-          </b-field>
-        </b-field>
+          </o-field>
+        </o-field>
       </div>
       <div class="my-events">
         <section
@@ -108,7 +108,7 @@
             </div>
           </transition-group>
           <div class="columns is-centered">
-            <b-button
+            <o-button
               class="column is-narrow"
               v-if="
                 hasMoreFutureParticipations &&
@@ -118,7 +118,7 @@
               @click="loadMoreFutureParticipations"
               size="is-large"
               type="is-primary"
-              >{{ $t("Load more") }}</b-button
+              >{{ $t("Load more") }}</o-button
             >
           </div>
         </section>
@@ -172,7 +172,7 @@
             </div>
           </transition-group>
           <div class="columns is-centered">
-            <b-button
+            <o-button
               class="column is-narrow"
               v-if="
                 hasMorePastParticipations &&
@@ -181,7 +181,7 @@
               @click="loadMorePastParticipations"
               size="is-large"
               type="is-primary"
-              >{{ $t("Load more") }}</b-button
+              >{{ $t("Load more") }}</o-button
             >
           </div>
         </section>
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index b90a09872..bc61c16d6 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -31,8 +31,8 @@
     <div class="level">
       <div class="level-left">
         <div class="level-item">
-          <b-field :label="$t('Status')" horizontal label-for="role-select">
-            <b-select v-model="role" id="role-select">
+          <o-field :label="$t('Status')" horizontal label-for="role-select">
+            <o-select v-model="role" id="role-select">
               <option :value="null">
                 {{ $t("Everything") }}
               </option>
@@ -48,20 +48,20 @@
               <option :value="ParticipantRole.REJECTED">
                 {{ $t("Rejected") }}
               </option>
-            </b-select>
-          </b-field>
+            </o-select>
+          </o-field>
         </div>
         <div class="level-item" v-if="exportFormats.length > 0">
-          <b-dropdown aria-role="list">
+          <o-dropdown aria-role="list">
             <template #trigger="{ active }">
-              <b-button
+              <o-button
                 :label="$t('Export')"
                 type="is-primary"
                 :icon-right="active ? 'menu-up' : 'menu-down'"
               />
             </template>
 
-            <b-dropdown-item
+            <o-dropdown-item
               has-link
               v-for="format in exportFormats"
               :key="format"
@@ -70,15 +70,15 @@
               @keyup.enter="exportParticipants(format)"
             >
               <button class="dropdown-button">
-                <b-icon :icon="formatToIcon(format)"></b-icon>
+                <o-icon :icon="formatToIcon(format)"></o-icon>
                 {{ format }}
               </button>
-            </b-dropdown-item>
-          </b-dropdown>
+            </o-dropdown-item>
+          </o-dropdown>
         </div>
       </div>
     </div>
-    <b-table
+    <o-table
       :data="event.participants.elements"
       ref="queueTable"
       detailed
@@ -104,7 +104,7 @@
       @page-change="(newPage) => (page = newPage)"
       @sort="(field, order) => $emit('sort', field, order)"
     >
-      <b-table-column
+      <o-table-column
         field="actor.preferredUsername"
         :label="$t('Participant')"
         v-slot="props"
@@ -116,13 +116,13 @@
           >
             <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
           </figure>
-          <b-icon
+          <o-icon
             class="media-left"
             v-else-if="props.row.actor.preferredUsername === 'anonymous'"
             size="is-large"
             icon="incognito"
           />
-          <b-icon
+          <o-icon
             class="media-left"
             v-else
             size="is-large"
@@ -145,34 +145,34 @@
             </div>
           </div>
         </article>
-      </b-table-column>
-      <b-table-column field="role" :label="$t('Role')" v-slot="props">
-        <b-tag
+      </o-table-column>
+      <o-table-column field="role" :label="$t('Role')" v-slot="props">
+        <o-tag
           type="is-primary"
           v-if="props.row.role === ParticipantRole.CREATOR"
         >
           {{ $t("Organizer") }}
-        </b-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+        </o-tag>
+        <o-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
           {{ $t("Participant") }}
-        </b-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
+        </o-tag>
+        <o-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
           {{ $t("Not confirmed") }}
-        </b-tag>
-        <b-tag
+        </o-tag>
+        <o-tag
           type="is-warning"
           v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
         >
           {{ $t("Not approved") }}
-        </b-tag>
-        <b-tag
+        </o-tag>
+        <o-tag
           type="is-danger"
           v-else-if="props.row.role === ParticipantRole.REJECTED"
         >
           {{ $t("Rejected") }}
-        </b-tag>
-      </b-table-column>
-      <b-table-column
+        </o-tag>
+      </o-table-column>
+      <o-table-column
         field="metadata.message"
         class="column-message"
         :label="$t('Message')"
@@ -206,14 +206,14 @@
         <p v-else class="has-text-grey-dark">
           {{ $t("No message") }}
         </p>
-      </b-table-column>
-      <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+      </o-table-column>
+      <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
         <span class="has-text-centered">
           {{ props.row.insertedAt | formatDateString }}<br />{{
             props.row.insertedAt | formatTimeString
           }}
         </span>
-      </b-table-column>
+      </o-table-column>
       <template #detail="props">
         <article v-html="nl2br(props.row.metadata.message)" />
       </template>
@@ -226,7 +226,7 @@
       </template>
       <template slot="bottom-left">
         <div class="buttons">
-          <b-button
+          <o-button
             @click="acceptParticipants(checkedRows)"
             type="is-success"
             :disabled="!canAcceptParticipants"
@@ -238,8 +238,8 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
-          <b-button
+          </o-button>
+          <o-button
             @click="refuseParticipants(checkedRows)"
             type="is-danger"
             :disabled="!canRefuseParticipants"
@@ -251,10 +251,10 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
         </div>
       </template>
-    </b-table>
+    </o-table>
   </section>
 </template>
 
diff --git a/js/src/views/Group/Create.vue b/js/src/views/Group/Create.vue
index 6ecfa1959..b6953cd8b 100644
--- a/js/src/views/Group/Create.vue
+++ b/js/src/views/Group/Create.vue
@@ -2,33 +2,33 @@
   <section class="section container">
     <h1 class="title">{{ $t("Create a new group") }}</h1>
 
-    <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
+    <o-message type="is-danger" v-for="(value, index) in errors" :key="index">
       {{ value }}
-    </b-message>
+    </o-message>
 
     <form @submit.prevent="createGroup">
-      <b-field :label="$t('Group display name')" label-for="group-display-name">
-        <b-input
+      <o-field :label="$t('Group display name')" label-for="group-display-name">
+        <o-input
           aria-required="true"
           required
           v-model="group.name"
           id="group-display-name"
         />
-      </b-field>
+      </o-field>
 
       <div class="field">
         <label class="label" for="group-preferred-username">{{
           $t("Federated Group Name")
         }}</label>
         <div class="field-body">
-          <b-field
+          <o-field
             :message="
               $t(
                 'Only alphanumeric lowercased characters and underscores are supported.'
               )
             "
           >
-            <b-input
+            <o-input
               ref="preferredUsernameInput"
               aria-required="true"
               required
@@ -48,7 +48,7 @@
             <p class="control">
               <span class="button is-static">@{{ host }}</span>
             </p>
-          </b-field>
+          </o-field>
         </div>
         <p
           v-html="
@@ -60,9 +60,9 @@
         />
       </div>
 
-      <b-field :label="$t('Description')" label-for="group-summary">
-        <b-input v-model="group.summary" type="textarea" id="group-summary" />
-      </b-field>
+      <o-field :label="$t('Description')" label-for="group-summary">
+        <o-input v-model="group.summary" type="textarea" id="group-summary" />
+      </o-field>
 
       <div>
         <b>{{ $t("Avatar") }}</b>
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index 4478ccb9d..2d69bf266 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -18,11 +18,11 @@
               }"
               >{{ group.name }}</router-link
             >
-            <b-skeleton v-else :animated="true"></b-skeleton>
+            <o-skeleton v-else :animated="true"></o-skeleton>
           </li>
         </ul>
       </nav>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading :active.sync="$apollo.loading"></o-loading>
       <header class="block-container presentation" v-if="group">
         <div class="banner-container">
           <lazy-image-wrapper :picture="group.banner" />
@@ -32,18 +32,18 @@
             <figure class="image is-128x128" v-if="group.avatar">
               <img class="is-rounded" :src="group.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="title-container">
             <h1 v-if="group.name">{{ group.name }}</h1>
-            <b-skeleton v-else :animated="true" />
+            <o-skeleton v-else :animated="true" />
             <small
               dir="ltr"
               class="has-text-grey-dark"
               v-if="group.preferredUsername"
               >@{{ usernameWithDomain(group) }}</small
             >
-            <b-skeleton v-else :animated="true" />
+            <o-skeleton v-else :animated="true" />
             <br />
           </div>
           <div class="group-metadata">
@@ -69,7 +69,7 @@
                     v-if="member.actor.avatar"
                     alt
                   />
-                  <b-icon v-else size="is-medium" icon="account-circle" />
+                  <o-icon v-else size="is-medium" icon="account-circle" />
                 </figure>
               </div>
               <p>
@@ -89,7 +89,7 @@
               </p>
             </div>
             <div class="buttons">
-              <b-button
+              <o-button
                 outlined
                 icon-left="timeline-text"
                 v-if="isCurrentActorAGroupMember && !previewPublic"
@@ -98,9 +98,9 @@
                   name: RouteName.TIMELINE,
                   params: { preferredUsername: usernameWithDomain(group) },
                 }"
-                >{{ $t("Activity") }}</b-button
+                >{{ $t("Activity") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 icon-left="cog"
                 v-if="isCurrentActorAGroupAdmin && !previewPublic"
@@ -109,9 +109,9 @@
                   name: RouteName.GROUP_PUBLIC_SETTINGS,
                   params: { preferredUsername: usernameWithDomain(group) },
                 }"
-                >{{ $t("Group settings") }}</b-button
+                >{{ $t("Group settings") }}</o-button
               >
-              <b-tooltip
+              <o-tooltip
                 v-if="
                   (!isCurrentActorAGroupMember || previewPublic) &&
                   group.openness === Openness.INVITE_ONLY
@@ -119,11 +119,11 @@
                 :label="$t('This group is invite-only')"
                 position="is-bottom"
               >
-                <b-button disabled type="is-primary">{{
+                <o-button disabled type="is-primary">{{
                   $t("Join group")
-                }}</b-button></b-tooltip
+                }}</o-button></o-tooltip
               >
-              <b-button
+              <o-button
                 v-else-if="
                   ((!isCurrentActorAGroupMember &&
                     !isCurrentActorAPendingGroupMember) ||
@@ -134,17 +134,17 @@
                 @keyup.enter="joinGroup"
                 type="is-primary"
                 :disabled="previewPublic"
-                >{{ $t("Join group") }}</b-button
+                >{{ $t("Join group") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 v-else-if="isCurrentActorAPendingGroupMember"
                 @click="leaveGroup"
                 @keyup.enter="leaveGroup"
                 type="is-primary"
-                >{{ $t("Cancel membership request") }}</b-button
+                >{{ $t("Cancel membership request") }}</o-button
               >
-              <b-button
+              <o-button
                 tag="router-link"
                 :to="{
                   name: RouteName.GROUP_JOIN,
@@ -153,9 +153,9 @@
                 v-else-if="!isCurrentActorAGroupMember || previewPublic"
                 :disabled="previewPublic"
                 type="is-primary"
-                >{{ $t("Join group") }}</b-button
+                >{{ $t("Join group") }}</o-button
               >
-              <b-button
+              <o-button
                 v-if="
                   ((!isCurrentActorFollowing && !isCurrentActorAGroupMember) ||
                     previewPublic) &&
@@ -166,9 +166,9 @@
                 @keyup.enter="followGroup"
                 type="is-primary"
                 :disabled="isCurrentActorPendingFollow"
-                >{{ $t("Follow") }}</b-button
+                >{{ $t("Follow") }}</o-button
               >
-              <b-button
+              <o-button
                 tag="router-link"
                 :to="{
                   name: RouteName.GROUP_FOLLOW,
@@ -181,24 +181,24 @@
                 "
                 :disabled="previewPublic"
                 type="is-primary"
-                >{{ $t("Follow") }}</b-button
+                >{{ $t("Follow") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 v-if="isCurrentActorPendingFollow && currentActor.id"
                 @click="unFollowGroup"
                 @keyup.enter="unFollowGroup"
                 type="is-primary"
-                >{{ $t("Cancel follow request") }}</b-button
-              ><b-button
+                >{{ $t("Cancel follow request") }}</o-button
+              ><o-button
                 v-if="
                   isCurrentActorFollowing && !previewPublic && currentActor.id
                 "
                 type="is-primary"
                 @click="unFollowGroup"
-                >{{ $t("Unfollow") }}</b-button
+                >{{ $t("Unfollow") }}</o-button
               >
-              <b-button
+              <o-button
                 v-if="isCurrentActorFollowing"
                 @click="toggleFollowNotify"
                 @keyup.enter="toggleFollowNotify"
@@ -207,8 +207,8 @@
                     ? 'bell-outline'
                     : 'bell-off-outline'
                 "
-              ></b-button>
-              <b-button
+              ></o-button>
+              <o-button
                 outlined
                 icon-left="share"
                 @click="triggerShare()"
@@ -216,95 +216,95 @@
                 v-if="!isCurrentActorAGroupMember || previewPublic"
               >
                 {{ $t("Share") }}
-              </b-button>
-              <b-dropdown
+              </o-button>
+              <o-dropdown
                 class="menu-dropdown"
                 position="is-bottom-left"
                 aria-role="menu"
               >
-                <b-button
+                <o-button
                   slot="trigger"
                   outlined
                   role="button"
                   icon-left="dots-horizontal"
                   :aria-label="$t('Other actions')"
                 />
-                <b-dropdown-item
+                <o-dropdown-item
                   aria-role="menuitem"
                   v-if="isCurrentActorAGroupMember || previewPublic"
                 >
-                  <b-switch v-model="previewPublic">{{
+                  <o-switch v-model="previewPublic">{{
                     $t("Public preview")
-                  }}</b-switch>
-                </b-dropdown-item>
-                <b-dropdown-item
+                  }}</o-switch>
+                </o-dropdown-item>
+                <o-dropdown-item
                   v-if="!previewPublic && isCurrentActorAGroupMember"
                   aria-role="menuitem"
                   @click="triggerShare()"
                   @keyup.enter="triggerShare()"
                 >
                   <span>
-                    <b-icon icon="share" />
+                    <o-icon icon="share" />
                     {{ $t("Share") }}
                   </span>
-                </b-dropdown-item>
+                </o-dropdown-item>
                 <hr
                   role="presentation"
                   class="dropdown-divider"
                   v-if="isCurrentActorAGroupMember"
                 />
-                <b-dropdown-item has-link aria-role="menuitem">
+                <o-dropdown-item has-link aria-role="menuitem">
                   <a
                     :href="`@${preferredUsername}/feed/atom`"
                     :title="$t('Atom feed for events and posts')"
                   >
-                    <b-icon icon="rss" />
+                    <o-icon icon="rss" />
                     {{ $t("RSS/Atom Feed") }}
                   </a>
-                </b-dropdown-item>
-                <b-dropdown-item has-link aria-role="menuitem">
+                </o-dropdown-item>
+                <o-dropdown-item has-link aria-role="menuitem">
                   <a
                     :href="`@${preferredUsername}/feed/ics`"
                     :title="$t('ICS feed for events')"
                   >
-                    <b-icon icon="calendar-sync" />
+                    <o-icon icon="calendar-sync" />
                     {{ $t("ICS/WebCal Feed") }}
                   </a>
-                </b-dropdown-item>
+                </o-dropdown-item>
                 <hr role="presentation" class="dropdown-divider" />
-                <b-dropdown-item
+                <o-dropdown-item
                   v-if="ableToReport"
                   aria-role="menuitem"
                   @click="isReportModalActive = true"
                   @keyup.enter="isReportModalActive = true"
                 >
                   <span>
-                    <b-icon icon="flag" />
+                    <o-icon icon="flag" />
                     {{ $t("Report") }}
                   </span>
-                </b-dropdown-item>
-                <b-dropdown-item
+                </o-dropdown-item>
+                <o-dropdown-item
                   aria-role="menuitem"
                   v-if="isCurrentActorAGroupMember && !previewPublic"
                   @click="openLeaveGroupModal"
                   @keyup.enter="openLeaveGroupModal"
                 >
                   <span>
-                    <b-icon icon="exit-to-app" />
+                    <o-icon icon="exit-to-app" />
                     {{ $t("Leave") }}
                   </span>
-                </b-dropdown-item>
-              </b-dropdown>
+                </o-dropdown-item>
+              </o-dropdown>
             </div>
           </div>
           <invitations
             v-if="isCurrentActorAnInvitedGroupMember"
             :invitations="[groupMember]"
           />
-          <b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
+          <o-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
             {{ $t("You have been removed from this group's members.") }}
-          </b-message>
-          <b-message
+          </o-message>
+          <o-message
             v-if="
               isCurrentActorAGroupMember &&
               isCurrentActorARecentMember &&
@@ -317,8 +317,8 @@
                 "Since you are a new member, private content can take a few minutes to appear."
               )
             }}
-          </b-message>
-          <b-message
+          </o-message>
+          <o-message
             v-if="
               !isCurrentActorAGroupMember &&
               !isCurrentActorAPendingGroupMember &&
@@ -339,7 +339,7 @@
                 $t("access to the group's private content as well")
               }}</b>
             </i18n>
-          </b-message>
+          </o-message>
         </div>
       </header>
     </div>
@@ -452,7 +452,7 @@
             <empty-content v-else-if="group" icon="calendar" :inline="true">
               {{ $t("No public upcoming events") }}
             </empty-content>
-            <b-skeleton animated v-else></b-skeleton>
+            <o-skeleton animated v-else></o-skeleton>
           </template>
           <template v-slot:create>
             <router-link
@@ -500,13 +500,13 @@
         </group-section>
       </div>
     </div>
-    <b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
+    <o-message v-else-if="!group && $apollo.loading === false" type="is-danger">
       {{ $t("No group found") }}
-    </b-message>
+    </o-message>
     <div v-else-if="group" class="public-container">
       <aside class="group-metadata">
         <div class="sticky">
-          <b-message v-if="group.domain && !isCurrentActorAGroupMember">
+          <o-message v-if="group.domain && !isCurrentActorAGroupMember">
             {{
               $t(
                 "This profile is from another instance, the informations shown here may be incomplete."
@@ -515,7 +515,7 @@
             <a :href="group.url" rel="noopener noreferrer external">{{
               $t("View full profile")
             }}</a>
-          </b-message>
+          </o-message>
           <event-metadata-block :title="$t('Members')" icon="account-group">
             {{
               $tc("{count} members", group.members.total, {
@@ -548,7 +548,7 @@
                     </p>
                   </address>
                 </div>
-                <b-button
+                <o-button
                   class="map-show-button"
                   type="is-text"
                   @click="showMap = !showMap"
@@ -556,7 +556,7 @@
                   v-if="physicalAddress.geom"
                 >
                   {{ $t("Show map") }}
-                </b-button>
+                </o-button>
               </div>
             </div>
           </event-metadata-block>
@@ -602,7 +602,7 @@
               </i18n>
             </template>
           </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+          <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
           <router-link
             v-if="organizedEvents.total > 0"
             :to="{
@@ -633,7 +633,7 @@
           <empty-content v-else-if="group" icon="bullhorn" :inline="true">
             {{ $t("No posts yet") }}
           </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+          <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
           <router-link
             v-if="posts.total > 0"
             :to="{
@@ -644,7 +644,7 @@
           >
         </section>
       </div>
-      <b-modal
+      <o-modal
         v-if="physicalAddress && physicalAddress.geom"
         :active.sync="showMap"
         :close-button-aria-label="$t('Close')"
@@ -658,9 +658,9 @@
             }"
           />
         </div>
-      </b-modal>
+      </o-modal>
     </div>
-    <b-modal
+    <o-modal
       :close-button-aria-label="$t('Close')"
       :active.sync="isReportModalActive"
       has-modal-card
@@ -673,8 +673,8 @@
         :outside-domain="group.domain"
         @close="$refs.reportModal.close()"
       />
-    </b-modal>
-    <b-modal
+    </o-modal>
+    <o-modal
       :close-button-aria-label="$t('Close')"
       v-if="group"
       :active.sync="isShareModalActive"
@@ -682,7 +682,7 @@
       ref="shareModal"
     >
       <share-group-modal :group="group" />
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 
diff --git a/js/src/views/Group/GroupFollowers.vue b/js/src/views/Group/GroupFollowers.vue
index 8887b8a29..54ca3adf9 100644
--- a/js/src/views/Group/GroupFollowers.vue
+++ b/js/src/views/Group/GroupFollowers.vue
@@ -31,16 +31,16 @@
         </li>
       </ul>
     </nav>
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="$apollo.loading" />
     <section
       class="container section"
       v-if="group && isCurrentActorAGroupAdmin && followers"
     >
       <h1>{{ $t("Group Followers") }} ({{ followers.total }})</h1>
-      <b-field :label="$t('Status')" horizontal>
-        <b-switch v-model="pending">{{ $t("Pending") }}</b-switch>
-      </b-field>
-      <b-table
+      <o-field :label="$t('Status')" horizontal>
+        <o-switch v-model="pending">{{ $t("Pending") }}</o-switch>
+      </o-field>
+      <o-table
         :data="followers.elements"
         ref="queueTable"
         :loading="this.$apollo.loading"
@@ -60,7 +60,7 @@
         @page-change="triggerLoadMoreFollowersPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Follower')"
           v-slot="props"
@@ -76,7 +76,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -94,41 +94,41 @@
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons">
-            <b-button
+            <o-button
               v-if="!props.row.approved"
               @click="updateFollower(props.row, true)"
               icon-left="check"
               type="is-success"
-              >{{ $t("Accept") }}</b-button
+              >{{ $t("Accept") }}</o-button
             >
-            <b-button
+            <o-button
               @click="updateFollower(props.row, false)"
               icon-left="close"
               type="is-danger"
-              >{{ $t("Reject") }}</b-button
+              >{{ $t("Reject") }}</o-button
             >
           </div>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" inline>
             {{ $t("No follower matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
+    <o-message v-else-if="!$apollo.loading && group">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-message>
   </div>
 </template>
 
diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue
index b799bef15..a461e2b03 100644
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -31,19 +31,19 @@
         </li>
       </ul>
     </nav>
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="$apollo.loading" />
     <section
       class="container section"
       v-if="group && isCurrentActorAGroupAdmin"
     >
       <form @submit.prevent="inviteMember">
-        <b-field
+        <o-field
           :label="$t('Invite a new member')"
           custom-class="add-relay"
           label-for="new-member-field"
           horizontal
         >
-          <b-field
+          <o-field
             grouped
             expanded
             size="is-large"
@@ -51,27 +51,27 @@
             :message="inviteError"
           >
             <p class="control">
-              <b-input
+              <o-input
                 id="new-member-field"
                 v-model="newMemberUsername"
                 :placeholder="$t('Ex: someone@mobilizon.org')"
               />
             </p>
             <p class="control">
-              <b-button type="is-primary" native-type="submit">{{
+              <o-button type="is-primary" native-type="submit">{{
                 $t("Invite member")
-              }}</b-button>
+              }}</o-button>
             </p>
-          </b-field>
-        </b-field>
+          </o-field>
+        </o-field>
       </form>
       <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
-      <b-field
+      <o-field
         :label="$t('Status')"
         horizontal
         label-for="group-members-status-filter"
       >
-        <b-select v-model="roles" id="group-members-status-filter">
+        <o-select v-model="roles" id="group-members-status-filter">
           <option value="">
             {{ $t("Everything") }}
           </option>
@@ -93,9 +93,9 @@
           <option :value="MemberRole.REJECTED">
             {{ $t("Rejected") }}
           </option>
-        </b-select>
-      </b-field>
-      <b-table
+        </o-select>
+      </o-field>
+      <o-table
         v-if="members"
         :data="members.elements"
         ref="queueTable"
@@ -116,7 +116,7 @@
         @page-change="triggerLoadMoreMemberPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Member')"
           v-slot="props"
@@ -132,7 +132,7 @@
                 :alt="props.row.actor.avatar.alt || ''"
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -150,66 +150,66 @@
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+        </o-table-column>
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          </o-tag>
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
+          </o-tag>
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          </o-tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons" v-if="props.row.actor.id !== currentActor.id">
-            <b-button
+            <o-button
               type="is-success"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
               @click="approveMember(props.row)"
               icon-left="check"
-              >{{ $t("Approve member") }}</b-button
+              >{{ $t("Approve member") }}</o-button
             >
-            <b-button
+            <o-button
               type="is-danger"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
               @click="rejectMember(props.row)"
               icon-left="exit-to-app"
-              >{{ $t("Reject member") }}</b-button
+              >{{ $t("Reject member") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.MEMBER, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -217,9 +217,9 @@
               "
               @click="promoteMember(props.row)"
               icon-left="chevron-double-up"
-              >{{ $t("Promote") }}</b-button
+              >{{ $t("Promote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -227,27 +227,27 @@
               "
               @click="demoteMember(props.row)"
               icon-left="chevron-double-down"
-              >{{ $t("Demote") }}</b-button
+              >{{ $t("Demote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="props.row.role === MemberRole.MEMBER"
               @click="removeMember(props.row)"
               type="is-danger"
               icon-left="exit-to-app"
-              >{{ $t("Remove") }}</b-button
+              >{{ $t("Remove") }}</o-button
             >
           </div>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" inline>
             {{ $t("No member matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
+    <o-message v-else-if="!$apollo.loading && group">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-message>
   </div>
 </template>
 
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index 894c38402..37c7d9811 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -32,42 +32,42 @@
         </li>
       </ul>
     </nav>
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="$apollo.loading" />
     <section
       class="container section"
       v-if="group && isCurrentActorAGroupAdmin"
     >
       <form @submit.prevent="updateGroup">
-        <b-field :label="$t('Group name')" label-for="group-settings-name">
-          <b-input v-model="editableGroup.name" id="group-settings-name" />
-        </b-field>
-        <b-field :label="$t('Group short description')">
+        <o-field :label="$t('Group name')" label-for="group-settings-name">
+          <o-input v-model="editableGroup.name" id="group-settings-name" />
+        </o-field>
+        <o-field :label="$t('Group short description')">
           <editor
             mode="basic"
             v-model="editableGroup.summary"
             :maxSize="500"
             :aria-label="$t('Group description body')"
-        /></b-field>
-        <b-field :label="$t('Avatar')">
+        /></o-field>
+        <o-field :label="$t('Avatar')">
           <picture-upload
             :textFallback="$t('Avatar')"
             v-model="avatarFile"
             :defaultImage="group.avatar"
             :maxSize="avatarMaxSize"
           />
-        </b-field>
+        </o-field>
 
-        <b-field :label="$t('Banner')">
+        <o-field :label="$t('Banner')">
           <picture-upload
             :textFallback="$t('Banner')"
             v-model="bannerFile"
             :defaultImage="group.banner"
             :maxSize="bannerMaxSize"
           />
-        </b-field>
+        </o-field>
         <p class="label">{{ $t("Group visibility") }}</p>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.PUBLIC"
@@ -78,10 +78,10 @@
                 "The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.UNLISTED"
@@ -91,10 +91,10 @@
                 "You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
           <p class="control">
             <code>{{ group.url }}</code>
-            <b-tooltip
+            <o-tooltip
               v-if="canShowCopyButton"
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
@@ -102,20 +102,20 @@
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
                 @click="copyURL"
                 @keyup.enter="copyURL"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
         </div>
 
         <p class="label">{{ $t("New members") }}</p>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.OPEN"
@@ -126,10 +126,10 @@
                 "Anyone wanting to be a member from your group will be able to from your group page."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.MODERATED"
@@ -139,10 +139,10 @@
                 "Anyone can request being a member, but an administrator needs to approve the membership."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.INVITE_ONLY"
@@ -152,17 +152,17 @@
                 "The only way for your group to get new members is if an admininistrator invites them."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
 
-        <b-field
+        <o-field
           :label="$t('Followers')"
           :message="$t('Followers will receive new public events and posts.')"
         >
-          <b-checkbox v-model="editableGroup.manuallyApprovesFollowers">
+          <o-checkbox v-model="editableGroup.manuallyApprovesFollowers">
             {{ $t("Manually approve new followers") }}
-          </b-checkbox>
-        </b-field>
+          </o-checkbox>
+        </o-field>
 
         <full-address-auto-complete
           :label="$t('Group address')"
@@ -171,21 +171,21 @@
         />
 
         <div class="buttons">
-          <b-button native-type="submit" type="is-primary">{{
+          <o-button native-type="submit" type="is-primary">{{
             $t("Update group")
-          }}</b-button>
-          <b-button @click="confirmDeleteGroup" type="is-danger">{{
+          }}</o-button>
+          <o-button @click="confirmDeleteGroup" type="is-danger">{{
             $t("Delete group")
-          }}</b-button>
+          }}</o-button>
         </div>
       </form>
-      <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
+      <o-message type="is-danger" v-for="(value, index) in errors" :key="index">
         {{ value }}
-      </b-message>
+      </o-message>
     </section>
-    <b-message v-else-if="!$apollo.loading">
+    <o-message v-else-if="!$apollo.loading">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-message>
   </div>
 </template>
 
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index b9275f67c..7bd8abeb8 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -15,7 +15,7 @@
         >{{ $t("Create group") }}</router-link
       >
     </div>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <o-loading :active.sync="$apollo.loading"></o-loading>
     <invitations
       :invitations="invitations"
       @accept-invitation="acceptInvitation"
@@ -29,7 +29,7 @@
         :member="member"
         @leave="leaveGroup(member.parent)"
       />
-      <b-pagination
+      <o-pagination
         :total="membershipsPages.total"
         v-model="page"
         :per-page="limit"
@@ -38,7 +38,7 @@
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
       >
-      </b-pagination>
+      </o-pagination>
     </section>
     <section
       class="has-text-centered not-found"
diff --git a/js/src/views/Group/Timeline.vue b/js/src/views/Group/Timeline.vue
index b66b3d111..6a781b7e2 100644
--- a/js/src/views/Group/Timeline.vue
+++ b/js/src/views/Group/Timeline.vue
@@ -23,81 +23,81 @@
       </ul>
     </nav>
     <section class="timeline">
-      <b-field>
-        <b-radio-button v-model="activityType" :native-value="undefined">
-          <b-icon icon="timeline-text"></b-icon>
-          {{ $t("All activities") }}</b-radio-button
+      <o-field>
+        <o-radio-button v-model="activityType" :native-value="undefined">
+          <o-icon icon="timeline-text"></o-icon>
+          {{ $t("All activities") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.MEMBER"
         >
-          <b-icon icon="account-multiple-plus"></b-icon>
-          {{ $t("Members") }}</b-radio-button
+          <o-icon icon="account-multiple-plus"></o-icon>
+          {{ $t("Members") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.GROUP"
         >
-          <b-icon icon="cog"></b-icon>
-          {{ $t("Settings") }}</b-radio-button
+          <o-icon icon="cog"></o-icon>
+          {{ $t("Settings") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.EVENT"
         >
-          <b-icon icon="calendar"></b-icon>
-          {{ $t("Events") }}</b-radio-button
+          <o-icon icon="calendar"></o-icon>
+          {{ $t("Events") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.POST"
         >
-          <b-icon icon="bullhorn"></b-icon>
-          {{ $t("Posts") }}</b-radio-button
+          <o-icon icon="bullhorn"></o-icon>
+          {{ $t("Posts") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.DISCUSSION"
         >
-          <b-icon icon="chat"></b-icon>
-          {{ $t("Discussions") }}</b-radio-button
+          <o-icon icon="chat"></o-icon>
+          {{ $t("Discussions") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityType"
           :native-value="ActivityType.RESOURCE"
         >
-          <b-icon icon="link"></b-icon>
-          {{ $t("Resources") }}</b-radio-button
+          <o-icon icon="link"></o-icon>
+          {{ $t("Resources") }}</o-radio-button
         >
-      </b-field>
-      <b-field>
-        <b-radio-button v-model="activityAuthor" :native-value="undefined">
-          <b-icon icon="timeline-text"></b-icon>
-          {{ $t("All activities") }}</b-radio-button
+      </o-field>
+      <o-field>
+        <o-radio-button v-model="activityAuthor" :native-value="undefined">
+          <o-icon icon="timeline-text"></o-icon>
+          {{ $t("All activities") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityAuthor"
           :native-value="ActivityAuthorFilter.SELF"
         >
-          <b-icon icon="account"></b-icon>
-          {{ $t("From yourself") }}</b-radio-button
+          <o-icon icon="account"></o-icon>
+          {{ $t("From yourself") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="activityAuthor"
           :native-value="ActivityAuthorFilter.BY"
         >
-          <b-icon icon="account-multiple"></b-icon>
-          {{ $t("By others") }}</b-radio-button
+          <o-icon icon="account-multiple"></o-icon>
+          {{ $t("By others") }}</o-radio-button
         >
-      </b-field>
+      </o-field>
       <transition-group name="timeline-list" tag="div">
         <div
           class="day"
           v-for="[date, activityItems] in Object.entries(activities)"
           :key="date"
         >
-          <b-skeleton
+          <o-skeleton
             v-if="date.search(/skeleton/) !== -1"
             width="300px"
             height="48px"
@@ -150,10 +150,10 @@
         }}
       </empty-content>
       <observer @intersect="loadMore" />
-      <b-button
+      <o-button
         v-if="activity.elements.length < activity.total"
         @click="loadMore"
-        >{{ $t("Load more activities") }}</b-button
+        >{{ $t("Load more activities") }}</o-button
       >
     </section>
   </div>
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index ebb45a25f..fdd6b0af0 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="homepage">
-    <b-loading :active.sync="$apollo.loading" />
+    <o-loading :active.sync="$apollo.loading" />
     <section
       class="hero"
       :class="{ webp: supportsWebPFormat }"
@@ -23,26 +23,26 @@
           <!-- <p v-if="!config.registrationsOpen">
               {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
           </p>-->
-          <b-message type="is-danger" v-if="!config.registrationsOpen">{{
+          <o-message type="is-danger" v-if="!config.registrationsOpen">{{
             $t("Unfortunately, this instance isn't opened to registrations")
-          }}</b-message>
+          }}</o-message>
           <div class="buttons">
-            <b-button
+            <o-button
               type="is-primary"
               tag="router-link"
               :to="{ name: RouteName.REGISTER }"
               v-if="config.registrationsOpen"
-              >{{ $t("Create an account") }}</b-button
+              >{{ $t("Create an account") }}</o-button
             >
             <!-- We don't invite to find other instances yet -->
-            <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
-            <b-button
+            <!-- <o-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</o-button> -->
+            <o-button
               type="is-text"
               tag="router-link"
               :to="{ name: RouteName.ABOUT }"
             >
               {{ $t("Learn more about {instance}", { instance: config.name }) }}
-            </b-button>
+            </o-button>
           </div>
         </div>
       </div>
@@ -69,9 +69,9 @@
             >
           </span>
         </div>
-        <b-message v-else type="is-danger">{{
+        <o-message v-else type="is-danger">{{
           $t("No events found")
-        }}</b-message>
+        }}</o-message>
       </section>
     </div>
     <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
@@ -174,16 +174,16 @@
     </div>
     <div class="container section" v-if="config && loggedUserSettings">
       <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
-        <b-message type="is-info" v-if="welcomeBack">{{
+        <o-message type="is-info" v-if="welcomeBack">{{
           $t("Welcome back {username}!", {
             username: currentActor.displayName(),
           })
-        }}</b-message>
-        <b-message type="is-info" v-if="newRegisteredUser">{{
+        }}</o-message>
+        <o-message type="is-info" v-if="newRegisteredUser">{{
           $t("Welcome to Mobilizon, {username}!", {
             username: currentActor.displayName(),
           })
-        }}</b-message>
+        }}</o-message>
       </section>
       <!-- Your upcoming events -->
       <section v-if="canShowMyUpcomingEvents">
@@ -280,7 +280,7 @@
             :to="{ name: RouteName.PREFERENCES }"
             :title="$t('Change')"
           >
-            <b-icon class="clickable" icon="pencil" size="is-small" />
+            <o-icon class="clickable" icon="pencil" size="is-small" />
           </router-link>
         </p>
         <multi-card :events="closeEvents.elements.slice(0, 3)" />
@@ -308,15 +308,15 @@
             >
           </span>
         </div>
-        <b-message v-else type="is-danger"
+        <o-message v-else type="is-danger"
           >{{ $t("No events found") }}<br />
           <div v-if="goingToEvents.size > 0">
-            <b-icon size="is-small" icon="information-outline" />
+            <o-icon size="is-small" icon="information-outline" />
             <small>{{
               $t("The events you created are not shown here.")
             }}</small>
           </div>
-        </b-message>
+        </o-message>
       </section>
     </div>
   </div>
diff --git a/js/src/views/Interact.vue b/js/src/views/Interact.vue
index a320bd5bf..c714d35e5 100644
--- a/js/src/views/Interact.vue
+++ b/js/src/views/Interact.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container section">
-    <b-notification v-if="$apollo.queries.interact.loading">
+    <o-notification v-if="$apollo.queries.interact.loading">
       {{ $t("Redirecting to content…") }}
-    </b-notification>
-    <b-notification v-if="$apollo.queries.interact.skip" type="is-danger">
+    </o-notification>
+    <o-notification v-if="$apollo.queries.interact.skip" type="is-danger">
       {{ $t("Resource provided is not an URL") }}
-    </b-notification>
-    <b-message
+    </o-notification>
+    <o-message
       :title="$t('Error')"
       type="is-danger"
       has-icon
@@ -23,7 +23,7 @@
           )
         }}
       </p>
-    </b-message>
+    </o-message>
   </div>
 </template>
 
diff --git a/js/src/views/Moderation/Logs.vue b/js/src/views/Moderation/Logs.vue
index 4e6be0c7a..a7f6e93a5 100644
--- a/js/src/views/Moderation/Logs.vue
+++ b/js/src/views/Moderation/Logs.vue
@@ -353,7 +353,7 @@
           </div>
         </li>
       </ul>
-      <b-pagination
+      <o-pagination
         :total="actionLogs.total"
         v-model="page"
         :per-page="LOGS_PER_PAGE"
@@ -362,10 +362,10 @@
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
       >
-      </b-pagination>
+      </o-pagination>
     </section>
     <div v-else>
-      <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
+      <o-message type="is-info">{{ $t("No moderation logs yet") }}</o-message>
     </div>
   </div>
 </template>
diff --git a/js/src/views/Moderation/Report.vue b/js/src/views/Moderation/Report.vue
index 59a94bf8b..a4aa05889 100644
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -23,33 +23,33 @@
       </ul>
     </nav>
     <section>
-      <b-message
+      <o-message
         title="Error"
         type="is-danger"
         v-for="error in errors"
         :key="error"
       >
         {{ error }}
-      </b-message>
+      </o-message>
       <div class="container" v-if="report">
         <div class="buttons">
-          <b-button
+          <o-button
             v-if="report.status !== ReportStatusEnum.RESOLVED"
             @click="updateReport(ReportStatusEnum.RESOLVED)"
             type="is-primary"
-            >{{ $t("Mark as resolved") }}</b-button
+            >{{ $t("Mark as resolved") }}</o-button
           >
-          <b-button
+          <o-button
             v-if="report.status !== ReportStatusEnum.OPEN"
             @click="updateReport(ReportStatusEnum.OPEN)"
             type="is-success"
-            >{{ $t("Reopen") }}</b-button
+            >{{ $t("Reopen") }}</o-button
           >
-          <b-button
+          <o-button
             v-if="report.status !== ReportStatusEnum.CLOSED"
             @click="updateReport(ReportStatusEnum.CLOSED)"
             type="is-danger"
-            >{{ $t("Close") }}</b-button
+            >{{ $t("Close") }}</o-button
           >
         </div>
         <div class="table-container">
@@ -152,18 +152,18 @@
                     {{ report.event.title }}
                   </router-link>
                   <span class="is-pulled-right">
-                    <!--                                    <b-button-->
+                    <!--                                    <o-button-->
                     <!--                                            tag="router-link"-->
                     <!--                                            type="is-primary"-->
                     <!--                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
                     <!--                                            icon-left="pencil"-->
-                    <!--                                            size="is-small">{{ $t('Edit') }}</b-button>-->
-                    <b-button
+                    <!--                                            size="is-small">{{ $t('Edit') }}</o-button>-->
+                    <o-button
                       type="is-danger"
                       @click="confirmEventDelete()"
                       icon-left="delete"
                       size="is-small"
-                      >{{ $t("Delete") }}</b-button
+                      >{{ $t("Delete") }}</o-button
                     >
                   </span>
                 </td>
@@ -184,18 +184,18 @@
             <h3 class="title">{{ report.event.title }}</h3>
             <p v-html="report.event.description" />
           </router-link>
-          <!--                <b-button-->
+          <!--                <o-button-->
           <!--                        tag="router-link"-->
           <!--                        type="is-primary"-->
           <!--                        :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
           <!--                        icon-left="pencil"-->
-          <!--                        size="is-small">{{ $t('Edit') }}</b-button>-->
-          <b-button
+          <!--                        size="is-small">{{ $t('Edit') }}</o-button>-->
+          <o-button
             type="is-danger"
             @click="confirmEventDelete()"
             icon-left="delete"
             size="is-small"
-            >{{ $t("Delete") }}</b-button
+            >{{ $t("Delete") }}</o-button
           >
         </div>
 
@@ -211,7 +211,7 @@
                     >
                       <img :src="comment.actor.avatar.url" alt="Image" />
                     </figure>
-                    <b-icon
+                    <o-icon
                       class="media-left"
                       v-else
                       size="is-large"
@@ -228,12 +228,12 @@
                       <br />
                       <p v-html="comment.text" />
                     </div>
-                    <b-button
+                    <o-button
                       type="is-danger"
                       @click="confirmCommentDelete(comment)"
                       icon-left="delete"
                       size="is-small"
-                      >{{ $t("Delete") }}</b-button
+                      >{{ $t("Delete") }}</o-button
                     >
                   </div>
                 </article>
@@ -273,16 +273,16 @@
         </div>
 
         <form @submit="addNote()">
-          <b-field :label="$t('New note')" label-for="newNoteInput">
-            <b-input
+          <o-field :label="$t('New note')" label-for="newNoteInput">
+            <o-input
               type="textarea"
               v-model="noteContent"
               id="newNoteInput"
-            ></b-input>
-          </b-field>
-          <b-button type="submit" @click="addNote">{{
+            ></o-input>
+          </o-field>
+          <o-button type="submit" @click="addNote">{{
             $t("Add a note")
-          }}</b-button>
+          }}</o-button>
         </form>
       </div>
     </section>
diff --git a/js/src/views/Moderation/ReportList.vue b/js/src/views/Moderation/ReportList.vue
index bce76169d..b18687022 100644
--- a/js/src/views/Moderation/ReportList.vue
+++ b/js/src/views/Moderation/ReportList.vue
@@ -15,23 +15,23 @@
       </ul>
     </nav>
     <section>
-      <b-field>
-        <b-radio-button
+      <o-field>
+        <o-radio-button
           v-model="status"
           :native-value="ReportStatusEnum.OPEN"
-          >{{ $t("Open") }}</b-radio-button
+          >{{ $t("Open") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="status"
           :native-value="ReportStatusEnum.RESOLVED"
-          >{{ $t("Resolved") }}</b-radio-button
+          >{{ $t("Resolved") }}</o-radio-button
         >
-        <b-radio-button
+        <o-radio-button
           v-model="status"
           :native-value="ReportStatusEnum.CLOSED"
-          >{{ $t("Closed") }}</b-radio-button
+          >{{ $t("Closed") }}</o-radio-button
         >
-      </b-field>
+      </o-field>
       <ul v-if="reports.elements.length > 0">
         <li v-for="report in reports.elements" :key="report.id">
           <router-link
@@ -64,7 +64,7 @@
           {{ $t("No closed reports yet") }}
         </empty-content>
       </div>
-      <b-pagination
+      <o-pagination
         :total="reports.total"
         v-model="page"
         :simple="true"
@@ -74,7 +74,7 @@
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
       >
-      </b-pagination>
+      </o-pagination>
     </section>
   </div>
 </template>
diff --git a/js/src/views/PageNotFound.vue b/js/src/views/PageNotFound.vue
index 27fab110b..bdcdc61c8 100644
--- a/js/src/views/PageNotFound.vue
+++ b/js/src/views/PageNotFound.vue
@@ -39,8 +39,8 @@
         </p>
         <!--  The following should just be replaced with the SearchField component but it fails for some reason  -->
         <form @submit.prevent="enter">
-          <b-field class="search">
-            <b-input
+          <o-field class="search">
+            <o-input
               expanded
               icon="magnify"
               type="search"
@@ -52,7 +52,7 @@
                 {{ $t("Search") }}
               </button>
             </p>
-          </b-field>
+          </o-field>
         </form>
       </div>
     </div>
diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue
index 8dcb2aadd..f2ce1ea42 100644
--- a/js/src/views/Posts/Edit.vue
+++ b/js/src/views/Posts/Edit.vue
@@ -17,7 +17,7 @@
                   actualGroup.name || actualGroup.preferredUsername
                 }}</router-link
               >
-              <b-skeleton v-else :animated="true"></b-skeleton>
+              <o-skeleton v-else :animated="true"></o-skeleton>
             </li>
             <li>
               <router-link
@@ -30,12 +30,12 @@
                 }"
                 >{{ $t("Posts") }}</router-link
               >
-              <b-skeleton v-else :animated="true"></b-skeleton>
+              <o-skeleton v-else :animated="true"></o-skeleton>
             </li>
             <li class="is-active">
               <span v-if="preferredUsername">{{ $t("New post") }}</span>
               <span v-else-if="slug">{{ $t("Edit post") }}</span>
-              <b-skeleton v-else :animated="true"></b-skeleton>
+              <o-skeleton v-else :animated="true"></o-skeleton>
             </li>
           </ul>
         </nav>
@@ -52,13 +52,13 @@
           :defaultImage="editablePost.picture"
         />
 
-        <b-field
+        <o-field
           :label="$t('Title')"
           label-for="post-title"
           :type="errors.title ? 'is-danger' : null"
           :message="errors.title"
         >
-          <b-input
+          <o-input
             size="is-large"
             aria-required="true"
             required
@@ -66,7 +66,7 @@
             id="post-title"
             dir="auto"
           />
-        </b-field>
+        </o-field>
 
         <tag-input v-model="editablePost.tags" />
 
@@ -85,27 +85,27 @@
             }}
           </legend>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web") }}</b-radio
+              >{{ $t("Visible everywhere on the web") }}</o-radio
             >
           </div>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.UNLISTED"
-              >{{ $t("Only accessible through link") }}</b-radio
+              >{{ $t("Only accessible through link") }}</o-radio
             >
           </div>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="editablePost.visibility"
               name="postVisibility"
               :native-value="PostVisibility.PRIVATE"
-              >{{ $t("Only accessible to members of the group") }}</b-radio
+              >{{ $t("Only accessible to members of the group") }}</o-radio
             >
           </div>
         </fieldset>
@@ -115,47 +115,47 @@
           <div class="navbar-menu">
             <div class="navbar-end">
               <span class="navbar-item">
-                <b-button type="is-text" @click="$router.go(-1)">{{
+                <o-button type="is-text" @click="$router.go(-1)">{{
                   $t("Cancel")
-                }}</b-button>
+                }}</o-button>
               </span>
               <span class="navbar-item" v-if="this.isUpdate">
-                <b-button
+                <o-button
                   type="is-danger is-outlined"
                   @click="openDeletePostModal"
-                  >{{ $t("Delete post") }}</b-button
+                  >{{ $t("Delete post") }}</o-button
                 >
               </span>
               <!-- If an post has been published we can't make it draft anymore -->
               <span class="navbar-item" v-if="post.draft === true">
-                <b-button type="is-primary" outlined @click="publish(true)">{{
+                <o-button type="is-primary" outlined @click="publish(true)">{{
                   $t("Save draft")
-                }}</b-button>
+                }}</o-button>
               </span>
               <span class="navbar-item">
-                <b-button type="is-primary" native-type="submit">
+                <o-button type="is-primary" native-type="submit">
                   <span v-if="isUpdate === false || post.draft === true">{{
                     $t("Publish")
                   }}</span>
 
                   <span v-else>{{ $t("Update post") }}</span>
-                </b-button>
+                </o-button>
               </span>
             </div>
           </div>
         </div>
       </nav>
     </form>
-    <b-loading
+    <o-loading
       v-else-if="$apollo.loading"
       :is-full-page="false"
       :active.sync="$apollo.loading"
       :can-cancel="false"
-    ></b-loading>
+    ></o-loading>
     <div class="container section" v-else>
-      <b-message type="is-danger">
+      <o-message type="is-danger">
         {{ $t("Only group moderators can create, edit and delete posts.") }}
-      </b-message>
+      </o-message>
     </div>
   </div>
 </template>
diff --git a/js/src/views/Posts/List.vue b/js/src/views/Posts/List.vue
index 502bf3a71..571c7b6fa 100644
--- a/js/src/views/Posts/List.vue
+++ b/js/src/views/Posts/List.vue
@@ -11,7 +11,7 @@
             }"
             >{{ group.name || group.preferredUsername }}</router-link
           >
-          <b-skeleton v-else :animated="true"></b-skeleton>
+          <o-skeleton v-else :animated="true"></o-skeleton>
         </li>
         <li class="is-active">
           <router-link
@@ -22,7 +22,7 @@
             }"
             >{{ $t("Posts") }}</router-link
           >
-          <b-skeleton v-else :animated="true"></b-skeleton>
+          <o-skeleton v-else :animated="true"></o-skeleton>
         </li>
       </ul>
     </nav>
@@ -54,14 +54,14 @@
           :isCurrentActorMember="isCurrentActorMember"
         />
       </div>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <b-message
+      <o-loading :active.sync="$apollo.loading"></o-loading>
+      <o-message
         v-if="group.posts.elements.length === 0 && $apollo.loading === false"
         type="is-danger"
       >
         {{ $t("No posts found") }}
-      </b-message>
-      <b-pagination
+      </o-message>
+      <o-pagination
         :total="group.posts.total"
         v-model="postsPage"
         :per-page="POSTS_PAGE_LIMIT"
@@ -70,7 +70,7 @@
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
       >
-      </b-pagination>
+      </o-pagination>
     </section>
   </div>
 </template>
diff --git a/js/src/views/Posts/Post.vue b/js/src/views/Posts/Post.vue
index efc0f300c..800feef9d 100644
--- a/js/src/views/Posts/Post.vue
+++ b/js/src/views/Posts/Post.vue
@@ -8,12 +8,12 @@
         <div class="heading-wrapper" dir="auto">
           <div class="title-metadata">
             <div class="title-wrapper">
-              <b-tag
+              <o-tag
                 class="mr-2"
                 type="is-warning"
                 size="is-medium"
                 v-if="post.draft"
-                >{{ $t("Draft") }}</b-tag
+                >{{ $t("Draft") }}</o-tag
               >
               <h1 class="title" :lang="post.language">{{ post.title }}</h1>
             </div>
@@ -30,7 +30,7 @@
                 <actor-inline :actor="post.attributedTo" />
               </router-link>
               <span class="published has-text-grey-dark" v-if="!post.draft">
-                <b-icon icon="clock" size="is-small" />
+                <o-icon icon="clock" size="is-small" />
                 {{ post.publishAt | formatDateTimeString }}
               </span>
               <span
@@ -45,7 +45,7 @@
                 "
                 v-else
               >
-                <b-icon icon="clock" size="is-small" />
+                <o-icon icon="clock" size="is-small" />
                 {{
                   $t("Edited {relative_time} ago", {
                     relative_time: formatDistanceToNowStrict(
@@ -61,14 +61,14 @@
                 v-if="post.visibility === PostVisibility.UNLISTED"
                 class="has-text-grey-dark"
               >
-                <b-icon icon="link" size="is-small" />
+                <o-icon icon="link" size="is-small" />
                 {{ $t("Accessible only by link") }}
               </span>
               <span
                 v-else-if="post.visibility === PostVisibility.PRIVATE"
                 class="has-text-grey-dark"
               >
-                <b-icon icon="lock" size="is-small" />
+                <o-icon icon="lock" size="is-small" />
                 {{
                   $t("Accessible only to members", {
                     group: post.attributedTo.name,
@@ -77,11 +77,11 @@
               </span>
             </p>
           </div>
-          <b-dropdown position="is-bottom-left" aria-role="list">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
+          <o-dropdown position="is-bottom-left" aria-role="list">
+            <o-button slot="trigger" role="button" icon-right="dots-horizontal">
               {{ $t("Actions") }}
-            </b-button>
-            <b-dropdown-item
+            </o-button>
+            <o-dropdown-item
               aria-role="listitem"
               has-link
               v-if="
@@ -94,10 +94,10 @@
                   name: RouteName.POST_EDIT,
                   params: { slug: post.slug },
                 }"
-                >{{ $t("Edit") }} <b-icon icon="pencil"
+                >{{ $t("Edit") }} <o-icon icon="pencil"
               /></router-link>
-            </b-dropdown-item>
-            <b-dropdown-item
+            </o-dropdown-item>
+            <o-dropdown-item
               aria-role="listitem"
               v-if="
                 currentActor.id === post.author.id ||
@@ -107,8 +107,8 @@
               @keyup.enter="openDeletePostModal"
             >
               {{ $t("Delete") }}
-              <b-icon icon="delete" />
-            </b-dropdown-item>
+              <o-icon icon="delete" />
+            </o-dropdown-item>
 
             <hr
               role="presentation"
@@ -119,7 +119,7 @@
                 isCurrentActorAGroupModerator
               "
             />
-            <b-dropdown-item
+            <o-dropdown-item
               aria-role="listitem"
               v-if="!post.draft"
               @click="triggerShare()"
@@ -127,11 +127,11 @@
             >
               <span>
                 {{ $t("Share this event") }}
-                <b-icon icon="share" />
+                <o-icon icon="share" />
               </span>
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               aria-role="listitem"
               v-if="ableToReport"
               @click="isReportModalActive = true"
@@ -139,14 +139,14 @@
             >
               <span>
                 {{ $t("Report") }}
-                <b-icon icon="flag" />
+                <o-icon icon="flag" />
               </span>
-            </b-dropdown-item>
-          </b-dropdown>
+            </o-dropdown-item>
+          </o-dropdown>
         </div>
       </div>
     </header>
-    <b-message
+    <o-message
       :title="$t('Members-only post')"
       class="mx-4"
       type="is-warning"
@@ -163,7 +163,7 @@
           "This post is accessible only for members. You have access to it for moderation purposes only because you are an instance moderator."
         )
       }}
-    </b-message>
+    </o-message>
 
     <section
       v-html="post.body"
@@ -180,7 +180,7 @@
         <tag>{{ tag.title }}</tag>
       </router-link>
     </section>
-    <b-modal
+    <o-modal
       :close-button-aria-label="$t('Close')"
       :active.sync="isReportModalActive"
       has-modal-card
@@ -192,15 +192,15 @@
         :outside-domain="groupDomain"
         @close="$refs.reportModal.close()"
       />
-    </b-modal>
-    <b-modal
+    </o-modal>
+    <o-modal
       :active.sync="isShareModalActive"
       has-modal-card
       ref="shareModal"
       :close-button-aria-label="$t('Close')"
     >
       <share-post-modal :post="post" />
-    </b-modal>
+    </o-modal>
   </article>
 </template>
 
diff --git a/js/src/views/Resources/ResourceFolder.vue b/js/src/views/Resources/ResourceFolder.vue
index c7b70acc3..7c65879b1 100644
--- a/js/src/views/Resources/ResourceFolder.vue
+++ b/js/src/views/Resources/ResourceFolder.vue
@@ -43,35 +43,35 @@
           >
         </li>
         <li>
-          <b-dropdown aria-role="list">
-            <b-button class="button is-primary" slot="trigger">+</b-button>
+          <o-dropdown aria-role="list">
+            <o-button class="button is-primary" slot="trigger">+</o-button>
 
-            <b-dropdown-item aria-role="listitem" @click="createFolderModal">
-              <b-icon icon="folder" />
+            <o-dropdown-item aria-role="listitem" @click="createFolderModal">
+              <o-icon icon="folder" />
               {{ $t("New folder") }}
-            </b-dropdown-item>
-            <b-dropdown-item
+            </o-dropdown-item>
+            <o-dropdown-item
               aria-role="listitem"
               @click="createLinkResourceModal = true"
             >
-              <b-icon icon="link" />
+              <o-icon icon="link" />
               {{ $t("New link") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
             <hr
               role="presentation"
               class="dropdown-divider"
               v-if="resourceProviders.length"
             />
-            <b-dropdown-item
+            <o-dropdown-item
               aria-role="listitem"
               v-for="resourceProvider in resourceProviders"
               :key="resourceProvider.software"
               @click="createResourceFromProvider(resourceProvider)"
             >
-              <b-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
+              <o-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
               {{ createSentenceForType(resourceProvider.software) }}
-            </b-dropdown-item>
-          </b-dropdown>
+            </o-dropdown-item>
+          </o-dropdown>
         </li>
       </ul>
     </nav>
@@ -83,7 +83,7 @@
       </p>
       <div class="list-header">
         <div class="list-header-right">
-          <b-checkbox v-model="checkedAll" v-if="resource.children.total > 0" />
+          <o-checkbox v-model="checkedAll" v-if="resource.children.total > 0" />
           <div class="actions" v-if="validCheckedResources.length > 0">
             <small>
               {{
@@ -92,12 +92,12 @@
                 })
               }}
             </small>
-            <b-button
+            <o-button
               type="is-danger"
               icon-right="delete"
               size="is-small"
               @click="deleteMultipleResources"
-              >{{ $t("Delete") }}</b-button
+              >{{ $t("Delete") }}</o-button
             >
           </div>
         </div>
@@ -118,7 +118,7 @@
                 class="resource-checkbox"
                 :class="{ checked: checkedResources[localResource.id] }"
               >
-                <b-checkbox v-model="checkedResources[localResource.id]" />
+                <o-checkbox v-model="checkedResources[localResource.id]" />
               </div>
               <resource-item
                 :resource="localResource"
@@ -146,7 +146,7 @@
         <p>{{ $t("No resources in this folder") }}</p>
       </div>
     </section>
-    <b-pagination
+    <o-pagination
       v-if="resource.children.total > RESOURCES_PER_PAGE"
       :total="resource.children.total"
       v-model="page"
@@ -156,8 +156,8 @@
       :aria-page-label="$t('Page')"
       :aria-current-label="$t('Current page')"
     >
-    </b-pagination>
-    <b-modal
+    </o-pagination>
+    <o-modal
       :active.sync="renameModal"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -165,18 +165,18 @@
       <div class="modal-card">
         <section class="modal-card-body">
           <form @submit.prevent="renameResource">
-            <b-field :label="$t('Title')">
-              <b-input aria-required="true" v-model="updatedResource.title" />
-            </b-field>
+            <o-field :label="$t('Title')">
+              <o-input aria-required="true" v-model="updatedResource.title" />
+            </o-field>
 
-            <b-button native-type="submit">{{
+            <o-button native-type="submit">{{
               $t("Rename resource")
-            }}</b-button>
+            }}</o-button>
           </form>
         </section>
       </div>
-    </b-modal>
-    <b-modal
+    </o-modal>
+    <o-modal
       :active.sync="moveModal"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -191,8 +191,8 @@
           />
         </section>
       </div>
-    </b-modal>
-    <b-modal
+    </o-modal>
+    <o-modal
       :active.sync="createResourceModal"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -200,22 +200,22 @@
       <div class="modal-card">
         <section class="modal-card-body">
           <form @submit.prevent="createResource">
-            <b-field :label="$t('Title')" label-for="new-resource-title">
-              <b-input
+            <o-field :label="$t('Title')" label-for="new-resource-title">
+              <o-input
                 aria-required="true"
                 v-model="newResource.title"
                 id="new-resource-title"
               />
-            </b-field>
+            </o-field>
 
-            <b-button native-type="submit">{{
+            <o-button native-type="submit">{{
               createResourceButtonLabel
-            }}</b-button>
+            }}</o-button>
           </form>
         </section>
       </div>
-    </b-modal>
-    <b-modal
+    </o-modal>
+    <o-modal
       :active.sync="createLinkResourceModal"
       has-modal-card
       class="link-resource-modal"
@@ -224,50 +224,50 @@
     >
       <div class="modal-card">
         <section class="modal-card-body">
-          <b-message type="is-danger" v-if="modalError">
+          <o-message type="is-danger" v-if="modalError">
             {{ modalError }}
-          </b-message>
+          </o-message>
           <form @submit.prevent="createResource">
-            <b-field :label="$t('URL')" label-for="new-resource-url">
-              <b-input
+            <o-field :label="$t('URL')" label-for="new-resource-url">
+              <o-input
                 id="new-resource-url"
                 type="url"
                 required
                 v-model="newResource.resourceUrl"
                 @blur="previewResource"
               />
-            </b-field>
+            </o-field>
 
             <div class="new-resource-preview" v-if="newResource.title">
               <resource-item :resource="newResource" :preview="true" />
             </div>
 
-            <b-field :label="$t('Title')" label-for="new-resource-link-title">
-              <b-input
+            <o-field :label="$t('Title')" label-for="new-resource-link-title">
+              <o-input
                 aria-required="true"
                 v-model="newResource.title"
                 id="new-resource-link-title"
               />
-            </b-field>
+            </o-field>
 
-            <b-field
+            <o-field
               :label="$t('Description')"
               label-for="new-resource-summary"
             >
-              <b-input
+              <o-input
                 type="textarea"
                 v-model="newResource.summary"
                 id="new-resource-summary"
               />
-            </b-field>
+            </o-field>
 
-            <b-button native-type="submit">{{
+            <o-button native-type="submit">{{
               $t("Create resource")
-            }}</b-button>
+            }}</o-button>
           </form>
         </section>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index 7499d71dd..09d31b74c 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -3,18 +3,18 @@
     <h1 class="title">{{ $t("Explore") }}</h1>
     <section v-if="tag">
       <i18n path="Events tagged with {tag}">
-        <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
+        <o-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</o-tag>
       </i18n>
     </section>
     <section class="hero is-light" v-else>
       <div class="hero-body">
         <form @submit.prevent="submit()">
-          <b-field
+          <o-field
             class="searchQuery"
             :label="$t('Key words')"
             label-for="search"
           >
-            <b-input
+            <o-input
               icon="magnify"
               type="search"
               id="search"
@@ -25,7 +25,7 @@
                 $t('For instance: London, Taekwondo, Architecture…')
               "
             />
-          </b-field>
+          </o-field>
           <full-address-auto-complete
             class="searchLocation"
             :label="$t('Location')"
@@ -37,12 +37,12 @@
             :hideMap="true"
             :hideSelected="true"
           />
-          <b-field
+          <o-field
             :label="$t('Radius')"
             label-for="radius"
             class="searchRadius"
           >
-            <b-select expanded v-model="radius" id="radius">
+            <o-select expanded v-model="radius" id="radius">
               <option
                 v-for="(radiusOption, index) in radiusOptions"
                 :key="index"
@@ -50,10 +50,10 @@
               >
                 {{ radiusString(radiusOption) }}
               </option>
-            </b-select>
-          </b-field>
-          <b-field :label="$t('Date')" label-for="date" class="searchDate">
-            <b-select
+            </o-select>
+          </o-field>
+          <o-field :label="$t('Date')" label-for="date" class="searchDate">
+            <o-select
               expanded
               v-model="when"
               id="date"
@@ -66,15 +66,15 @@
               >
                 {{ option.label }}
               </option>
-            </b-select>
-          </b-field>
-          <b-field
+            </o-select>
+          </o-field>
+          <o-field
             expanded
             :label="$t('Type')"
             label-for="type"
             class="searchType"
           >
-            <b-select
+            <o-select
               expanded
               v-model="type"
               id="type"
@@ -89,8 +89,8 @@
               <option :value="'IN_PERSON'">
                 {{ $t("In person") }}
               </option>
-            </b-select>
-          </b-field>
+            </o-select>
+          </o-field>
         </form>
       </div>
     </section>
@@ -98,12 +98,12 @@
       class="events-featured"
       v-if="!canSearchEvents && !canSearchGroups"
     >
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading :active.sync="$apollo.loading"></o-loading>
       <h2 class="title">{{ $t("Featured events") }}</h2>
       <div v-if="events.elements.length > 0">
         <multi-card class="my-4" :events="events.elements" />
         <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
-          <b-pagination
+          <o-pagination
             :total="events.total"
             v-model="featuredEventPage"
             :per-page="EVENT_PAGE_LIMIT"
@@ -112,29 +112,29 @@
             :aria-page-label="$t('Page')"
             :aria-current-label="$t('Current page')"
           >
-          </b-pagination>
+          </o-pagination>
         </div>
       </div>
-      <b-message
+      <o-message
         v-else-if="events.elements.length === 0 && $apollo.loading === false"
         type="is-danger"
-        >{{ $t("No events found") }}</b-message
+        >{{ $t("No events found") }}</o-message
       >
     </section>
-    <b-tabs v-else v-model="activeTab" type="is-boxed" class="mt-3 searchTabs">
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <b-tab-item>
+    <o-tabs v-else v-model="activeTab" type="is-boxed" class="mt-3 searchTabs">
+      <o-loading :active.sync="$apollo.loading"></o-loading>
+      <o-tab-item>
         <template slot="header">
-          <b-icon icon="calendar"></b-icon>
+          <o-icon icon="calendar"></o-icon>
           <span>
             {{ $t("Events") }}
-            <b-tag rounded>{{ searchEvents.total }}</b-tag>
+            <o-tag rounded>{{ searchEvents.total }}</o-tag>
           </span>
         </template>
         <div v-if="searchEvents.total > 0">
           <multi-card class="my-4" :events="searchEvents.elements" />
           <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
-            <b-pagination
+            <o-pagination
               :total="searchEvents.total"
               v-model="eventPage"
               :per-page="EVENT_PAGE_LIMIT"
@@ -143,10 +143,10 @@
               :aria-page-label="$t('Page')"
               :aria-current-label="$t('Current page')"
             >
-            </b-pagination>
+            </o-pagination>
           </div>
         </div>
-        <b-message v-else-if="$apollo.loading === false" type="is-danger">
+        <o-message v-else-if="$apollo.loading === false" type="is-danger">
           <p>{{ $t("No events found") }}</p>
           <p v-if="searchIsUrl && !currentUser.id">
             {{
@@ -155,22 +155,22 @@
               )
             }}
           </p>
-        </b-message>
-      </b-tab-item>
-      <b-tab-item v-if="!tag">
+        </o-message>
+      </o-tab-item>
+      <o-tab-item v-if="!tag">
         <template slot="header">
-          <b-icon icon="account-multiple"></b-icon>
+          <o-icon icon="account-multiple"></o-icon>
           <span>
-            {{ $t("Groups") }} <b-tag rounded>{{ searchGroups.total }}</b-tag>
+            {{ $t("Groups") }} <o-tag rounded>{{ searchGroups.total }}</o-tag>
           </span>
         </template>
-        <b-message v-if="config && !config.features.groups" type="is-danger">
+        <o-message v-if="config && !config.features.groups" type="is-danger">
           {{ $t("Groups are not enabled on this instance.") }}
-        </b-message>
+        </o-message>
         <div v-else-if="searchGroups.total > 0">
           <multi-group-card class="my-4" :groups="searchGroups.elements" />
           <div class="pagination">
-            <b-pagination
+            <o-pagination
               :total="searchGroups.total"
               v-model="groupPage"
               :per-page="GROUP_PAGE_LIMIT"
@@ -179,14 +179,14 @@
               :aria-page-label="$t('Page')"
               :aria-current-label="$t('Current page')"
             >
-            </b-pagination>
+            </o-pagination>
           </div>
         </div>
-        <b-message v-else-if="$apollo.loading === false" type="is-danger">
+        <o-message v-else-if="$apollo.loading === false" type="is-danger">
           {{ $t("No groups found") }}
-        </b-message>
-      </b-tab-item>
-    </b-tabs>
+        </o-message>
+      </o-tab-item>
+    </o-tabs>
   </div>
 </template>
 
diff --git a/js/src/views/Settings.vue b/js/src/views/Settings.vue
index 28f3a748b..39173caa5 100644
--- a/js/src/views/Settings.vue
+++ b/js/src/views/Settings.vue
@@ -10,37 +10,40 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import SettingsMenu from "../components/Settings/SettingsMenu.vue";
-import RouteName from "../router/name";
 import { IPerson, Person } from "../types/actor";
 import { IDENTITIES } from "../graphql/actor";
 import { CURRENT_USER_CLIENT } from "../graphql/user";
 import { ICurrentUser } from "../types/current-user.model";
+import { useQuery, useResult } from "@vue/apollo-composable";
+import { useMeta } from "vue-meta";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  components: { SettingsMenu },
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-      update: (data) =>
-        data.identities.map((identity: IPerson) => new Person(identity)),
-    },
-    currentUser: CURRENT_USER_CLIENT,
+export default {
+  name: "SettingsWrapper",
+  components: {
+    SettingsMenu,
   },
-  metaInfo() {
+  setup() {
+    const { result: identitiesResult } = useQuery(IDENTITIES);
+    const identities = useResult<{ identities: IPerson[] }, [], Person[]>(
+      identitiesResult,
+      [],
+      (data) => data.identities.map((identity: IPerson) => new Person(identity))
+    );
+
+    const { result } = useQuery(CURRENT_USER_CLIENT);
+    const currentUser = useResult<{ currentUser: ICurrentUser }>(result);
+
+    const { t } = useI18n({ useScope: "global" });
+    useMeta({ title: t("Settings") });
+
     return {
-      title: this.$t("Settings") as string,
+      identities,
+      currentUser,
     };
   },
-})
-export default class Settings extends Vue {
-  RouteName = RouteName;
-
-  identities!: IPerson[];
-
-  currentUser!: ICurrentUser;
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 0debf6a49..fe4bf78ea 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -26,7 +26,7 @@
       >
         <b slot="email">{{ loggedUser.email }}</b>
       </i18n>
-      <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
+      <o-message v-if="!canChangeEmail" type="is-warning" :closable="false">
         {{
           $t(
             "Your email address was automatically set based on your {provider} account.",
@@ -35,15 +35,15 @@
             }
           )
         }}
-      </b-message>
-      <b-notification
+      </o-message>
+      <o-notification
         type="is-danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in changeEmailErrors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
       <form
         @submit.prevent="resetEmailAction"
@@ -51,18 +51,18 @@
         class="form"
         v-if="canChangeEmail"
       >
-        <b-field :label="$t('New email')" label-for="account-email">
-          <b-input
+        <o-field :label="$t('New email')" label-for="account-email">
+          <o-input
             aria-required="true"
             required
             type="email"
             id="account-email"
             v-model="newEmail"
           />
-        </b-field>
+        </o-field>
         <p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
-        <b-field :label="$t('Password')" label-for="account-password">
-          <b-input
+        <o-field :label="$t('Password')" label-for="account-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -71,7 +71,7 @@
             minlength="6"
             v-model="passwordForEmailChange"
           />
-        </b-field>
+        </o-field>
         <button
           class="button is-primary"
           :disabled="!($refs.emailForm && $refs.emailForm.checkValidity())"
@@ -82,7 +82,7 @@
       <div class="setting-title">
         <h2>{{ $t("Password") }}</h2>
       </div>
-      <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
+      <o-message v-if="!canChangePassword" type="is-warning" :closable="false">
         {{
           $t(
             "You can't change your password because you are registered through {provider}.",
@@ -91,15 +91,15 @@
             }
           )
         }}
-      </b-message>
-      <b-notification
+      </o-message>
+      <o-notification
         type="is-danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in changePasswordErrors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
       <form
         @submit.prevent="resetPasswordAction"
@@ -107,8 +107,8 @@
         class="form"
         v-if="canChangePassword"
       >
-        <b-field :label="$t('Old password')" label-for="account-old-password">
-          <b-input
+        <o-field :label="$t('Old password')" label-for="account-old-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -117,9 +117,9 @@
             id="account-old-password"
             v-model="oldPassword"
           />
-        </b-field>
-        <b-field :label="$t('New password')" label-for="account-new-password">
-          <b-input
+        </o-field>
+        <o-field :label="$t('New password')" label-for="account-new-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -128,7 +128,7 @@
             id="account-new-password"
             v-model="newPassword"
           />
-        </b-field>
+        </o-field>
         <button
           class="button is-primary"
           :disabled="
@@ -144,11 +144,11 @@
       <p class="content">
         {{ $t("Deleting my account will delete all of my identities.") }}
       </p>
-      <b-button @click="openDeleteAccountModal" type="is-danger">
+      <o-button @click="openDeleteAccountModal" type="is-danger">
         {{ $t("Delete my account") }}
-      </b-button>
+      </o-button>
 
-      <b-modal
+      <o-modal
         :close-button-aria-label="$t('Close')"
         :active.sync="isDeleteAccountModalActive"
         has-modal-card
@@ -185,12 +185,12 @@
                     }}
                   </p>
                   <form @submit.prevent="deleteAccount">
-                    <b-field
+                    <o-field
                       :type="deleteAccountPasswordFieldType"
                       v-if="hasUserGotAPassword"
                       label-for="account-deletion-password"
                     >
-                      <b-input
+                      <o-input
                         type="password"
                         v-model="passwordForAccountDeletion"
                         password-reveal
@@ -200,37 +200,37 @@
                         :placeholder="$t('Password')"
                       />
                       <template #message>
-                        <b-message
+                        <o-message
                           type="is-danger"
                           v-for="message in deletePasswordErrors"
                           :key="message"
                         >
                           {{ message }}
-                        </b-message>
+                        </o-message>
                       </template>
-                    </b-field>
-                    <b-button
+                    </o-field>
+                    <o-button
                       native-type="submit"
                       type="is-danger"
                       size="is-large"
                     >
                       {{ $t("Delete everything") }}
-                    </b-button>
+                    </o-button>
                   </form>
                   <div class="cancel-button">
-                    <b-button
+                    <o-button
                       type="is-light"
                       @click="isDeleteAccountModalActive = false"
                     >
                       {{ $t("Cancel") }}
-                    </b-button>
+                    </o-button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </section>
-      </b-modal>
+      </o-modal>
     </section>
   </div>
 </template>
diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue
index 606be0cc7..bba80415f 100644
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -18,20 +18,20 @@
       <div class="setting-title">
         <h2>{{ $t("Browser notifications") }}</h2>
       </div>
-      <b-button
+      <o-button
         v-if="subscribed"
         @click="unsubscribeToWebPush()"
         @keyup.enter="unsubscribeToWebPush()"
-        >{{ $t("Unsubscribe to browser push notifications") }}</b-button
+        >{{ $t("Unsubscribe to browser push notifications") }}</o-button
       >
-      <b-button
+      <o-button
         icon-left="rss"
         @click="subscribeToWebPush"
         @keyup.enter="subscribeToWebPush"
         v-else-if="canShowWebPush && webPushEnabled"
-        >{{ $t("Activate browser push notifications") }}</b-button
+        >{{ $t("Activate browser push notifications") }}</o-button
       >
-      <b-message type="is-warning" v-else-if="!webPushEnabled">
+      <o-message type="is-warning" v-else-if="!webPushEnabled">
         {{ $t("This instance hasn't got push notifications enabled.") }}
         <i18n path="Ask your instance admin to {enable_feature}.">
           <a
@@ -42,10 +42,10 @@
             >{{ $t("enable the feature") }}</a
           >
         </i18n>
-      </b-message>
-      <b-message type="is-danger" v-else>{{
+      </o-message>
+      <o-message type="is-danger" v-else>{{
         $t("You can't use push notifications in this browser.")
-      }}</b-message>
+      }}</o-message>
     </section>
     <section>
       <div class="setting-title">
@@ -60,13 +60,16 @@
       </p>
       <table class="table">
         <tbody>
-          <template v-for="notificationType in notificationTypes">
-            <tr :key="`${notificationType.label}-title`">
+          <div
+            :key="`${notificationType.label}-title`"
+            v-for="notificationType in notificationTypes"
+          >
+            <tr>
               <th colspan="3">
                 {{ notificationType.label }}
               </th>
             </tr>
-            <tr :key="`${notificationType.label}-subtitle`">
+            <tr>
               <th v-for="(method, key) in notificationMethods" :key="key">
                 {{ method }}
               </th>
@@ -74,7 +77,7 @@
             </tr>
             <tr v-for="subType in notificationType.subtypes" :key="subType.id">
               <td v-for="(method, key) in notificationMethods" :key="key">
-                <b-checkbox
+                <o-checkbox
                   :value="notificationValues[subType.id][key].enabled"
                   @input="(e) => updateNotificationValue(subType.id, key, e)"
                   :disabled="notificationValues[subType.id][key].disabled"
@@ -84,11 +87,11 @@
                 {{ subType.label }}
               </td>
             </tr>
-          </template>
+          </div>
         </tbody>
       </table>
 
-      <b-field
+      <o-field
         :label="$t('Send notification e-mails')"
         label-for="groupNotifications"
         :message="
@@ -97,7 +100,7 @@
           )
         "
       >
-        <b-select
+        <o-select
           v-model="groupNotifications"
           @input="updateSetting({ groupNotifications })"
           id="groupNotifications"
@@ -109,8 +112,8 @@
           >
             {{ value }}
           </option>
-        </b-select>
-      </b-field>
+        </o-select>
+      </o-field>
     </section>
     <section>
       <div class="setting-title">
@@ -127,7 +130,7 @@
         {{ $t("Other notification options:") }}
       </p>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationOnDay"
           @input="updateSetting({ notificationOnDay })"
         >
@@ -154,10 +157,10 @@
           <span v-else>{{
             $t("You can pick your timezone into your preferences.")
           }}</span>
-        </b-checkbox>
+        </o-checkbox>
       </div>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationEachWeek"
           @input="updateSetting({ notificationEachWeek })"
         >
@@ -169,10 +172,10 @@
               )
             }}
           </p>
-        </b-checkbox>
+        </o-checkbox>
       </div>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationBeforeEvent"
           @input="updateSetting({ notificationBeforeEvent })"
         >
@@ -184,7 +187,7 @@
               )
             }}
           </p>
-        </b-checkbox>
+        </o-checkbox>
       </div>
     </section>
     <section>
@@ -206,7 +209,7 @@
             )
           }}
         </p>
-        <b-select
+        <o-select
           v-model="notificationPendingParticipation"
           id="notificationPendingParticipation"
           @input="updateSetting({ notificationPendingParticipation })"
@@ -218,7 +221,7 @@
           >
             {{ value }}
           </option>
-        </b-select>
+        </o-select>
       </div>
     </section>
     <section>
@@ -238,14 +241,14 @@
           v-for="feedToken in feedTokens"
           :key="feedToken.token"
         >
-          <b-tooltip
+          <o-tooltip
             :label="$t('URL copied to clipboard')"
             :active="showCopiedTooltip.atom"
             always
             type="is-success"
             position="is-left"
           >
-            <b-button
+            <o-button
               tag="a"
               icon-left="rss"
               @click="
@@ -256,17 +259,17 @@
               "
               :href="tokenToURL(feedToken.token, 'atom')"
               target="_blank"
-              >{{ $t("RSS/Atom Feed") }}</b-button
+              >{{ $t("RSS/Atom Feed") }}</o-button
             >
-          </b-tooltip>
-          <b-tooltip
+          </o-tooltip>
+          <o-tooltip
             :label="$t('URL copied to clipboard')"
             :active="showCopiedTooltip.ics"
             always
             type="is-success"
             position="is-left"
           >
-            <b-button
+            <o-button
               tag="a"
               @click="
                 (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
@@ -277,25 +280,25 @@
               icon-left="calendar-sync"
               :href="tokenToURL(feedToken.token, 'ics')"
               target="_blank"
-              >{{ $t("ICS/WebCal Feed") }}</b-button
+              >{{ $t("ICS/WebCal Feed") }}</o-button
             >
-          </b-tooltip>
-          <b-button
+          </o-tooltip>
+          <o-button
             icon-left="refresh"
             type="is-text"
             @click="openRegenerateFeedTokensConfirmation"
             @keyup.enter="openRegenerateFeedTokensConfirmation"
-            >{{ $t("Regenerate new links") }}</b-button
+            >{{ $t("Regenerate new links") }}</o-button
           >
         </div>
       </div>
       <div v-else>
-        <b-button
+        <o-button
           icon-left="refresh"
           type="is-text"
           @click="generateFeedTokens"
           @keyup.enter="generateFeedTokens"
-          >{{ $t("Create new links") }}</b-button
+          >{{ $t("Create new links") }}</o-button
         >
       </div>
     </section>
diff --git a/js/src/views/Settings/Preferences.vue b/js/src/views/Settings/Preferences.vue
index 95543b864..cef913e8b 100644
--- a/js/src/views/Settings/Preferences.vue
+++ b/js/src/views/Settings/Preferences.vue
@@ -15,8 +15,8 @@
       </ul>
     </nav>
     <div>
-      <b-field :label="$t('Language')" label-for="setting-language">
-        <b-select
+      <o-field :label="$t('Language')" label-for="setting-language">
+        <o-select
           :loading="!config || !loggedUser"
           v-model="locale"
           :placeholder="$t('Select a language')"
@@ -25,14 +25,14 @@
           <option v-for="(language, lang) in langs" :value="lang" :key="lang">
             {{ language }}
           </option>
-        </b-select>
-      </b-field>
-      <b-field
+        </o-select>
+      </o-field>
+      <o-field
         :label="$t('Timezone')"
         v-if="selectedTimezone"
         label-for="setting-timezone"
       >
-        <b-select
+        <o-select
           :placeholder="$t('Select a timezone')"
           :loading="!config || !loggedUser"
           v-model="selectedTimezone"
@@ -51,19 +51,19 @@
               {{ sanitize(timezone) }}
             </option>
           </optgroup>
-        </b-select>
-      </b-field>
+        </o-select>
+      </o-field>
       <em v-if="Intl.DateTimeFormat().resolvedOptions().timeZone">{{
         $t("Timezone detected as {timezone}.", {
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         })
       }}</em>
-      <b-message v-else type="is-danger">{{
+      <o-message v-else type="is-danger">{{
         $t("Unable to detect timezone.")
-      }}</b-message>
+      }}</o-message>
       <hr role="presentation" />
-      <b-field grouped>
-        <b-field
+      <o-field grouped>
+        <o-field
           :label="$t('City or region')"
           expanded
           label-for="setting-city"
@@ -76,9 +76,9 @@
             id="setting-city"
           >
           </address-auto-complete>
-        </b-field>
-        <b-field :label="$t('Radius')" label-for="setting-radius">
-          <b-select
+        </o-field>
+        <o-field :label="$t('Radius')" label-for="setting-radius">
+          <o-select
             :placeholder="$t('Select a radius')"
             v-model="locationRange"
             id="setting-radius"
@@ -90,9 +90,9 @@
             >
               {{ $tc("{count} km", index, { count: index }) }}
             </option>
-          </b-select>
-        </b-field>
-        <b-button
+          </o-select>
+        </o-field>
+        <o-button
           :disabled="address == undefined"
           @click="resetArea"
           @keyup.enter="resetArea"
@@ -100,7 +100,7 @@
           icon-left="close"
           :aria-label="$t('Reset')"
         />
-      </b-field>
+      </o-field>
       <p>
         {{
           $t(
diff --git a/js/src/views/Todos/TodoList.vue b/js/src/views/Todos/TodoList.vue
index 1aaa103ce..06013245c 100644
--- a/js/src/views/Todos/TodoList.vue
+++ b/js/src/views/Todos/TodoList.vue
@@ -34,11 +34,11 @@
       <compact-todo :todo="todo" />
     </div>
     <form class="form box" @submit.prevent="createNewTodo">
-      <b-field>
-        <b-checkbox v-model="newTodo.status" />
-        <b-input expanded v-model="newTodo.title" />
-      </b-field>
-      <b-button native-type="submit">{{ $t("Add a todo") }}</b-button>
+      <o-field>
+        <o-checkbox v-model="newTodo.status" />
+        <o-input expanded v-model="newTodo.title" />
+      </o-field>
+      <o-button native-type="submit">{{ $t("Add a todo") }}</o-button>
     </form>
   </section>
 </template>
diff --git a/js/src/views/Todos/TodoLists.vue b/js/src/views/Todos/TodoLists.vue
index c58d7372f..806a7b9ca 100644
--- a/js/src/views/Todos/TodoLists.vue
+++ b/js/src/views/Todos/TodoLists.vue
@@ -31,10 +31,10 @@
         }}
       </p>
       <form class="form" @submit.prevent="createNewTodoList">
-        <b-field :label="$t('List title')">
-          <b-input v-model="newTodoList.title" />
-        </b-field>
-        <b-button native-type="submit">{{ $t("Create a new list") }}</b-button>
+        <o-field :label="$t('List title')">
+          <o-input v-model="newTodoList.title" />
+        </o-field>
+        <o-button native-type="submit">{{ $t("Create a new list") }}</o-button>
       </form>
       <div v-for="todoList in todoLists" :key="todoList.id">
         <router-link
diff --git a/js/src/views/User/EmailValidate.vue b/js/src/views/User/EmailValidate.vue
index 516fb5243..c0dc85ef3 100644
--- a/js/src/views/User/EmailValidate.vue
+++ b/js/src/views/User/EmailValidate.vue
@@ -5,13 +5,13 @@
     </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$t('Error while changing email')" type="is-danger">
+        <o-message :title="$t('Error while changing email')" type="is-danger">
           {{
             $t(
               "Either the email has already been changed, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-message>
       </div>
       <h1 class="title" v-else>{{ $t("Your email has been changed") }}</h1>
     </div>
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 778736440..cd45f4a1b 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -3,14 +3,14 @@
     <div class="columns is-mobile is-centered">
       <div class="column is-half-desktop">
         <h1 class="title">{{ $t("Welcome back!") }}</h1>
-        <b-message
+        <o-message
           v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN"
           title="Info"
           type="is-info"
           :aria-close-label="$t('Close')"
-          >{{ $t("You need to login.") }}</b-message
+          >{{ $t("You need to login.") }}</o-message
         >
-        <b-message
+        <o-message
           v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
           type="is-danger"
           :aria-close-label="$t('Close')"
@@ -21,9 +21,9 @@
                 provider: $route.query.provider,
               }
             )
-          }}</b-message
+          }}</o-message
         >
-        <b-message
+        <o-message
           v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
           type="is-danger"
           :aria-close-label="$t('Close')"
@@ -34,34 +34,34 @@
                 provider: $route.query.provider,
               }
             )
-          }}</b-message
+          }}</o-message
         >
-        <b-message
+        <o-message
           :title="$t('Error')"
           type="is-danger"
           v-for="error in errors"
           :key="error"
         >
           {{ error }}
-        </b-message>
+        </o-message>
         <form @submit="loginAction">
-          <b-field
+          <o-field
             :label="$t('Email')"
             label-for="email"
             :message="caseWarningText"
             :type="caseWarningType"
           >
-            <b-input
+            <o-input
               aria-required="true"
               required
               id="email"
               type="email"
               v-model="credentials.email"
             />
-          </b-field>
+          </o-field>
 
-          <b-field :label="$t('Password')" label-for="password">
-            <b-input
+          <o-field :label="$t('Password')" label-for="password">
+            <o-input
               aria-required="true"
               id="password"
               required
@@ -69,14 +69,14 @@
               password-reveal
               v-model="credentials.password"
             />
-          </b-field>
+          </o-field>
 
           <p class="control has-text-centered" v-if="!submitted">
             <button type="submit" class="button is-primary is-large">
               {{ $t("Login") }}
             </button>
           </p>
-          <b-loading :is-full-page="false" v-model="submitted" />
+          <o-loading :is-full-page="false" v-model="submitted" />
 
           <div
             class="control"
diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue
index 907ef021b..79afb9c43 100644
--- a/js/src/views/User/PasswordReset.vue
+++ b/js/src/views/User/PasswordReset.vue
@@ -5,16 +5,16 @@
         <h1 class="title">
           {{ $t("Password reset") }}
         </h1>
-        <b-message
+        <o-message
           :title="$t('Error')"
           type="is-danger"
           v-for="error in errors"
           :key="error"
-          >{{ error }}</b-message
+          >{{ error }}</o-message
         >
         <form @submit="resetAction">
-          <b-field :label="$t('Password')">
-            <b-input
+          <o-field :label="$t('Password')">
+            <o-input
               aria-required="true"
               required
               type="password"
@@ -22,9 +22,9 @@
               minlength="6"
               v-model="credentials.password"
             />
-          </b-field>
-          <b-field :label="$t('Password (confirmation)')">
-            <b-input
+          </o-field>
+          <o-field :label="$t('Password (confirmation)')">
+            <o-input
               aria-required="true"
               required
               type="password"
@@ -32,7 +32,7 @@
               minlength="6"
               v-model="credentials.password_confirmation"
             />
-          </b-field>
+          </o-field>
           <button class="button is-primary">
             {{ $t("Reset my password") }}
           </button>
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 5731f8147..cef5d10a6 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -84,17 +84,17 @@
           </div>
         </div>
         <div class="column">
-          <b-message type="is-warning" v-if="config.registrationsAllowlist">
+          <o-message type="is-warning" v-if="config.registrationsAllowlist">
             {{ $t("Registrations are restricted by allowlisting.") }}
-          </b-message>
+          </o-message>
           <form v-on:submit.prevent="submit()">
-            <b-field
+            <o-field
               :label="$t('Email')"
               :type="errorEmailType"
               :message="errorEmailMessages"
               label-for="email"
             >
-              <b-input
+              <o-input
                 aria-required="true"
                 required
                 id="email"
@@ -103,15 +103,15 @@
                 @blur="showGravatar = true"
                 @focus="showGravatar = false"
               />
-            </b-field>
+            </o-field>
 
-            <b-field
+            <o-field
               :label="$t('Password')"
               :type="errorPasswordType"
               :message="errorPasswordMessages"
               label-for="password"
             >
-              <b-input
+              <o-input
                 aria-required="true"
                 required
                 id="password"
@@ -120,9 +120,9 @@
                 minlength="6"
                 v-model="credentials.password"
               />
-            </b-field>
+            </o-field>
 
-            <b-checkbox required>
+            <o-checkbox required>
               <i18n
                 tag="span"
                 path="I agree to the {instanceRules} and {termsOfService}"
@@ -140,17 +140,17 @@
                   >{{ $t("terms of service") }}</router-link
                 >
               </i18n>
-            </b-checkbox>
+            </o-checkbox>
 
             <p class="create-account control has-text-centered">
-              <b-button
+              <o-button
                 type="is-primary"
                 size="is-large"
                 :disabled="sendingForm"
                 native-type="submit"
               >
                 {{ $t("Create an account") }}
-              </b-button>
+              </o-button>
             </p>
 
             <p class="control has-text-centered">
@@ -334,7 +334,7 @@ export default class Register extends Vue {
   transition: opacity 1s ease;
 }
 
-.avatar-enter,
+.avatar-enter-from,
 .avatar-leave-to {
   opacity: 0;
 }
diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index bedfeb237..43f40aff7 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -6,18 +6,18 @@
           {{ $t("Resend confirmation email") }}
         </h1>
         <form v-if="!validationSent" @submit="resendConfirmationAction">
-          <b-field :label="$t('Email address')">
-            <b-input
+          <o-field :label="$t('Email address')">
+            <o-input
               aria-required="true"
               required
               type="email"
               v-model="credentials.email"
             />
-          </b-field>
+          </o-field>
           <p class="control">
-            <b-button type="is-primary" native-type="submit">
+            <o-button type="is-primary" native-type="submit">
               {{ $t("Send the confirmation email again") }}
-            </b-button>
+            </o-button>
             <router-link
               :to="{ name: RouteName.LOGIN }"
               class="button is-text"
@@ -26,21 +26,21 @@
           </p>
         </form>
         <div v-else>
-          <b-message type="is-success" :closable="false" title="Success">
+          <o-message type="is-success" :closable="false" title="Success">
             {{
               $t(
                 "If an account with this email exists, we just sent another confirmation email to {email}",
                 { email: credentials.email }
               )
             }}
-          </b-message>
-          <b-message type="is-info">
+          </o-message>
+          <o-message type="is-info">
             {{
               $t(
                 "Please check your spam folder if you didn't receive the email."
               )
             }}
-          </b-message>
+          </o-message>
         </div>
       </div>
     </div>
diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue
index 567817811..489c15360 100644
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@@ -12,7 +12,7 @@
             )
           }}
         </p>
-        <b-message
+        <o-message
           title="Error"
           type="is-danger"
           v-for="error in errors"
@@ -20,20 +20,20 @@
           @close="removeError(error)"
         >
           {{ error }}
-        </b-message>
+        </o-message>
         <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
-          <b-field :label="$t('Email address')">
-            <b-input
+          <o-field :label="$t('Email address')">
+            <o-input
               aria-required="true"
               required
               type="email"
               v-model="credentials.email"
             />
-          </b-field>
+          </o-field>
           <p class="control">
-            <b-button type="is-primary" native-type="submit">
+            <o-button type="is-primary" native-type="submit">
               {{ $t("Submit") }}
-            </b-button>
+            </o-button>
             <router-link
               :to="{ name: RouteName.LOGIN }"
               class="button is-text"
@@ -42,20 +42,20 @@
           </p>
         </form>
         <div v-else>
-          <b-message type="is-success" :closable="false" title="Success">
+          <o-message type="is-success" :closable="false" title="Success">
             {{
               $t("We just sent an email to {email}", {
                 email: credentials.email,
               })
             }}
-          </b-message>
-          <b-message type="is-info">
+          </o-message>
+          <o-message type="is-info">
             {{
               $t(
                 "Please check your spam folder if you didn't receive the email."
               )
             }}
-          </b-message>
+          </o-message>
         </div>
       </div>
     </div>
diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue
index d0920768d..f05158c79 100644
--- a/js/src/views/User/SettingsOnboard.vue
+++ b/js/src/views/User/SettingsOnboard.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="section container">
     <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
-    <b-steps v-model="stepIndex" :has-navigation="false">
-      <b-step-item step="1" :label="$t('Settings')">
+    <o-steps v-model="stepIndex" :has-navigation="false">
+      <o-step-item step="1" :label="$t('Settings')">
         <settings-onboarding />
-      </b-step-item>
-      <b-step-item step="2" :label="$t('Participation notifications')">
+      </o-step-item>
+      <o-step-item step="2" :label="$t('Participation notifications')">
         <notifications-onboarding />
-      </b-step-item>
-      <b-step-item step="3" :label="$t('Profiles and federation')">
+      </o-step-item>
+      <o-step-item step="3" :label="$t('Profiles and federation')">
         <profile-onboarding />
-      </b-step-item>
-    </b-steps>
+      </o-step-item>
+    </o-steps>
     <section class="has-text-centered section buttons">
-      <b-button
+      <o-button
         outlined
         :disabled="stepIndex < 1"
         tag="router-link"
@@ -23,8 +23,8 @@
         }"
       >
         {{ $t("Previous") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         outlined
         type="is-success"
         v-if="stepIndex < 2"
@@ -35,8 +35,8 @@
         }"
       >
         {{ $t("Next") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         v-if="stepIndex >= 2"
         type="is-success"
         size="is-big"
@@ -44,7 +44,7 @@
         :to="{ name: RouteName.HOME }"
       >
         {{ $t("All good, let's continue!") }}
-      </b-button>
+      </o-button>
     </section>
   </div>
 </template>
diff --git a/js/src/views/User/Validate.vue b/js/src/views/User/Validate.vue
index 7d8f660c6..ebd4545a7 100644
--- a/js/src/views/User/Validate.vue
+++ b/js/src/views/User/Validate.vue
@@ -5,7 +5,7 @@
     </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message
+        <o-message
           :title="$t('Error while validating account')"
           type="is-danger"
         >
@@ -14,7 +14,7 @@
               "Either the account is already validated, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-message>
       </div>
       <h1 class="title" v-else>{{ $t("Your account has been validated") }}</h1>
     </div>
diff --git a/js/src/vue-apollo.ts b/js/src/vue-apollo.ts
index 4801cc62f..31f9c607d 100644
--- a/js/src/vue-apollo.ts
+++ b/js/src/vue-apollo.ts
@@ -1,5 +1,4 @@
-import Vue from "vue";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import { onError } from "@apollo/client/link/error";
 import { createLink } from "apollo-absinthe-upload-link";
 import {
@@ -28,9 +27,6 @@ import {
 } from "./apollo/utils";
 import { GraphQLError } from "graphql";
 
-// Install the vue plugin
-Vue.use(VueApollo);
-
 let isRefreshing = false;
 let pendingRequests: any[] = [];
 
@@ -208,14 +204,14 @@ const cache = new InMemoryCache({
   },
 });
 
-const apolloClient = new ApolloClient<NormalizedCacheObject>({
+export const apolloClient = new ApolloClient<NormalizedCacheObject>({
   cache,
   link: fullLink,
   connectToDevTools: true,
   resolvers: buildCurrentUserResolver(cache),
 });
 
-export default new VueApollo({
+export default createApolloProvider({
   defaultClient: apolloClient,
   errorHandler(error) {
     // eslint-disable-next-line no-console
diff --git a/js/tests/unit/specs/boot/routes.spec.ts b/js/tests/unit/specs/boot/routes.spec.ts
index 483938a3e..9d0a4db53 100644
--- a/js/tests/unit/specs/boot/routes.spec.ts
+++ b/js/tests/unit/specs/boot/routes.spec.ts
@@ -1,28 +1,19 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import { routes } from "@/router";
 import App from "@/App.vue";
-import VueRouter from "vue-router";
-import Buefy from "buefy";
+import { createRouter, createWebHistory } from "vue-router";
 import flushPromises from "flush-promises";
 import VueAnnouncer from "@vue-a11y/announcer";
 import VueSkipTo from "@vue-a11y/skip-to";
-
-const localVue = createLocalVue();
-config.mocks.$t = (key: string): string => key;
-localVue.use(VueRouter);
-localVue.use(Buefy);
-localVue.use(VueAnnouncer);
-localVue.use(VueSkipTo);
+import Oruga from "@oruga-ui/oruga-next";
 
 describe("routing", () => {
   test("Homepage", async () => {
-    const router = new VueRouter({ routes, mode: "history" });
+    const router = createRouter({ routes, history: createWebHistory() });
     const wrapper = mount(App, {
-      localVue,
-      router,
-      stubs: {
-        NavBar: true,
-        "mobilizon-footer": true,
+      global: {
+        plugins: [router, Oruga, VueAnnouncer, VueSkipTo],
+        stubs: ["navbar", "mobilizon-footer"],
       },
     });
 
@@ -30,13 +21,11 @@ describe("routing", () => {
   });
 
   test("About", async () => {
-    const router = new VueRouter({ routes, mode: "history" });
+    const router = createRouter({ routes, history: createWebHistory() });
     const wrapper = mount(App, {
-      localVue,
-      router,
-      stubs: {
-        NavBar: true,
-        "mobilizon-footer": true,
+      global: {
+        plugins: [router, Oruga, VueAnnouncer, VueSkipTo],
+        stubs: ["navbar", "mobilizon-footer"],
       },
     });
 
diff --git a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
index b607db56f..5caa438d5 100644
--- a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
+++ b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
@@ -1,12 +1,11 @@
-import { config, createLocalVue, shallowMount, Wrapper } from "@vue/test-utils";
+import { shallowMount, VueWrapper } from "@vue/test-utils";
 import CommentTree from "@/components/Comment/CommentTree.vue";
-import Buefy from "buefy";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import {
   COMMENTS_THREADS_WITH_REPLIES,
   CREATE_COMMENT_FROM_EVENT,
@@ -21,12 +20,11 @@ import {
 } from "../../mocks/event";
 import flushPromises from "flush-promises";
 import { defaultResolvers } from "../../common";
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueApollo);
-config.mocks.$t = (key: string): string => key;
+import Oruga from "@oruga-ui/oruga-next";
+import { ComponentPublicInstance } from "vue";
+import { i18n } from "@/utils/i18n";
 
-const eventData = {
+const eventData: any = {
   id: "1",
   uuid: "e37910ea-fd5a-4756-7634-00971f3f4107",
   options: {
@@ -34,12 +32,12 @@ const eventData = {
   },
 };
 describe("CommentTree", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper<ComponentPublicInstance>;
   let mockClient: MockApolloClient | null;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
-  const generateWrapper = (handlers = {}, baseData = {}) => {
+  const generateWrapper = (handlers: any = {}, baseData: any = {}) => {
     mockClient = createMockClient({
       resolvers: defaultResolvers,
     });
@@ -62,17 +60,24 @@ describe("CommentTree", () => {
       CREATE_COMMENT_FROM_EVENT,
       requestHandlers.createCommentForEventMutationHandler
     );
-    apolloProvider = new VueApollo({
+    apolloProvider = createApolloProvider({
       defaultClient: mockClient,
     });
 
     wrapper = shallowMount(CommentTree, {
-      localVue,
-      apolloProvider,
-      propsData: {
+      global: {
+        mocks: {
+          $t: (key: string): string => key,
+        },
+        plugins: [apolloProvider, Oruga, i18n],
+        stubs: ["editor"],
+        provide: {
+          DefaultApolloClient: mockClient,
+        },
+      },
+      props: {
         event: { ...eventData },
       },
-      stubs: ["editor"],
       data() {
         return {
           ...baseData,
@@ -85,7 +90,7 @@ describe("CommentTree", () => {
     mockClient = null;
     requestHandlers = {};
     apolloProvider = null;
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it("renders a loading comment tree", async () => {
diff --git a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
index bb6089e1d..d6e07d0d6 100644
--- a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
+++ b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`CommentTree renders a comment tree with comments 1`] = `
         </div>
       </div>
       <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+        <o-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</o-button-stub>
       </div>
     </article>
   </form>
@@ -62,7 +62,7 @@ exports[`CommentTree renders an empty comment tree 1`] = `
         </div>
       </div>
       <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+        <o-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</o-button-stub>
       </div>
     </article>
   </form>
diff --git a/js/tests/unit/specs/components/Group/GroupSection.spec.ts b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
index 73932edfc..7a75acd47 100644
--- a/js/tests/unit/specs/components/Group/GroupSection.spec.ts
+++ b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
@@ -1,15 +1,11 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import GroupSection from "@/components/Group/GroupSection.vue";
-import Buefy from "buefy";
-import VueRouter, { Location } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import RouteName from "@/router/name";
 import { routes } from "@/router";
+import Oruga from "@oruga-ui/oruga-next";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
+const router = createRouter({ routes, history: createWebHistory() });
 
 const groupPreferredUsername = "my_group";
 const groupDomain = "remotedomain.net";
@@ -22,7 +18,7 @@ type Props = {
   title?: string;
   icon?: string;
   privateSection?: boolean;
-  route?: Location;
+  route?: any;
 };
 
 const baseProps: Props = {
@@ -38,9 +34,13 @@ const baseProps: Props = {
 
 const generateWrapper = (customProps: Props = {}) => {
   return mount(GroupSection, {
-    localVue,
-    router,
-    propsData: { ...baseProps, ...customProps },
+    global: {
+      mocks: {
+        $t: (key: string): string => key,
+      },
+      plugins: [router, Oruga],
+    },
+    props: { ...baseProps, ...customProps },
     slots: {
       default: `<div>${defaultSlotText}</div>`,
       create: `<router-link :to="{
diff --git a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
index 3e443c352..bacf03982 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
@@ -1,7 +1,6 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import { routes } from "@/router";
 import { CommentModeration, EventJoinOptions } from "@/types/enums";
 import {
@@ -10,16 +9,15 @@ import {
   RequestHandler,
 } from "mock-apollo-client";
 import { CONFIG } from "@/graphql/config";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import { configMock } from "../../mocks/config";
 import { InMemoryCache } from "@apollo/client/cache";
 import { defaultResolvers } from "../../common";
+import Oruga from "@oruga-ui/oruga-next";
+import { i18n } from "@/utils/i18n";
+import { ComponentPublicInstance } from "vue";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
+const router = createRouter({ routes, history: createWebHistory("/") });
 
 const eventData = {
   id: "1",
@@ -32,7 +30,7 @@ const eventData = {
 };
 
 describe("ParticipationSection", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper<ComponentPublicInstance>;
   let mockClient: MockApolloClient;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
@@ -54,18 +52,22 @@ describe("ParticipationSection", () => {
     };
     mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
 
-    apolloProvider = new VueApollo({
+    apolloProvider = createApolloProvider({
       defaultClient: mockClient,
     });
 
     wrapper = mount(ParticipationSection, {
-      localVue,
-      router,
-      apolloProvider,
-      stubs: {
-        ParticipationButton: true,
+      global: {
+        mocks: {
+          $t: (key: string): string => key,
+        },
+        plugins: [router, apolloProvider, Oruga, i18n],
+        stubs: ["router-link", "router-view", "ParticipationButton"],
+        provide: {
+          DefaultApolloClient: mockClient,
+        },
       },
-      propsData: {
+      props: {
         participation: null,
         event: eventData,
         anonymousParticipation: null,
diff --git a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
index 377965ebd..020492af2 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
@@ -1,7 +1,6 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import ParticipationWithoutAccount from "@/components/Participation/ParticipationWithoutAccount.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import { routes } from "@/router";
 import {
   CommentModeration,
@@ -14,7 +13,7 @@ import {
   RequestHandler,
 } from "mock-apollo-client";
 import { CONFIG } from "@/graphql/config";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event";
 import { IEvent } from "@/types/event.model";
 import { i18n } from "@/utils/i18n";
@@ -27,12 +26,10 @@ import {
 import { InMemoryCache } from "@apollo/client/cache";
 import { defaultResolvers } from "../../common";
 import flushPromises from "flush-promises";
+import Oruga from "@oruga-ui/oruga-next";
+import { ComponentPublicInstance } from "vue";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
+const router = createRouter({ routes, history: createWebHistory("/") });
 
 const eventData = {
   id: "1",
@@ -56,7 +53,7 @@ const eventData = {
 };
 
 describe("ParticipationWithoutAccount", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper<ComponentPublicInstance>;
   let mockClient: MockApolloClient;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
@@ -64,7 +61,7 @@ describe("ParticipationWithoutAccount", () => {
   const generateWrapper = (
     handlers: Record<string, unknown> = {},
     customProps: Record<string, unknown> = {},
-    baseData: Record<string, unknown> = {}
+    baseData: any = {}
   ) => {
     const cache = new InMemoryCache({ addTypename: false });
 
@@ -90,16 +87,22 @@ describe("ParticipationWithoutAccount", () => {
       requestHandlers.joinEventMutationHandler
     );
 
-    apolloProvider = new VueApollo({
+    apolloProvider = createApolloProvider({
       defaultClient: mockClient,
     });
 
     wrapper = mount(ParticipationWithoutAccount, {
-      localVue,
-      router,
-      i18n,
-      apolloProvider,
-      propsData: {
+      global: {
+        mocks: {
+          $t: (key: string): string => key,
+        },
+        plugins: [router, apolloProvider, Oruga, i18n],
+        stubs: ["router-link", "router-view"],
+        provide: {
+          DefaultApolloClient: mockClient,
+        },
+      },
+      props: {
         uuid: eventData.uuid,
         ...customProps,
       },
@@ -195,6 +198,8 @@ describe("ParticipationWithoutAccount", () => {
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     expect(wrapper.vm.$data.event.joinOptions).toBe(
       EventJoinOptions.RESTRICTED
     );
diff --git a/js/tests/unit/specs/components/Post/PostListItem.spec.ts b/js/tests/unit/specs/components/Post/PostListItem.spec.ts
index 6e8e5c3ab..ba27c7cad 100644
--- a/js/tests/unit/specs/components/Post/PostListItem.spec.ts
+++ b/js/tests/unit/specs/components/Post/PostListItem.spec.ts
@@ -1,20 +1,12 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import PostListItem from "@/components/Post/PostListItem.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import { routes } from "@/router";
 import { enUS } from "date-fns/locale";
-import { formatDateTimeString } from "@/filters/datetime";
 import { i18n } from "@/utils/i18n";
+import Oruga from "@oruga-ui/oruga-next";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-localVue.use((vue) => {
-  vue.prototype.$dateFnsLocale = enUS;
-});
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
+const router = createRouter({ routes, history: createWebHistory() });
 
 const postData = {
   id: "1",
@@ -26,21 +18,20 @@ const postData = {
   language: "en",
 };
 
-const generateWrapper = (
-  customPostData: Record<string, unknown> = {},
-  customProps: Record<string, unknown> = {}
-) => {
+const generateWrapper = (customPostData: any = {}, customProps: any = {}) => {
   return mount(PostListItem, {
-    localVue,
-    router,
-    i18n,
-    propsData: {
+    global: {
+      mocks: {
+        $t: (key: string): string => key,
+        $dateFnsLocale: enUS,
+      },
+      plugins: [router, Oruga, i18n],
+      stubs: ["router-link", "router-view"],
+    },
+    props: {
       post: { ...postData, ...customPostData },
       ...customProps,
     },
-    filters: {
-      formatDateTimeString,
-    },
   });
 };
 
diff --git a/js/tests/unit/specs/components/Report/ReportCard.spec.ts b/js/tests/unit/specs/components/Report/ReportCard.spec.ts
index 4fde36067..2bfdef172 100644
--- a/js/tests/unit/specs/components/Report/ReportCard.spec.ts
+++ b/js/tests/unit/specs/components/Report/ReportCard.spec.ts
@@ -1,11 +1,7 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import ReportCard from "@/components/Report/ReportCard.vue";
-import Buefy from "buefy";
 import { ActorType } from "@/types/enums";
-
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import Oruga from "@oruga-ui/oruga-next";
 
 const reportData = {
   id: "1",
@@ -26,8 +22,10 @@ const reportData = {
 
 const generateWrapper = (customReportData: Record<string, unknown> = {}) => {
   return mount(ReportCard, {
-    localVue,
-    propsData: {
+    global: {
+      plugins: [Oruga],
+    },
+    props: {
       report: { ...reportData, ...customReportData },
     },
   });
diff --git a/js/tests/unit/specs/components/Report/ReportModal.spec.ts b/js/tests/unit/specs/components/Report/ReportModal.spec.ts
index 75f6846ca..972f82af0 100644
--- a/js/tests/unit/specs/components/Report/ReportModal.spec.ts
+++ b/js/tests/unit/specs/components/Report/ReportModal.spec.ts
@@ -1,10 +1,6 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import ReportModal from "@/components/Report/ReportModal.vue";
-import Buefy from "buefy";
-
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import Oruga from "@oruga-ui/oruga-next";
 
 const propsData = {
   onConfirm: jest.fn(),
@@ -12,8 +8,10 @@ const propsData = {
 
 const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
   return mount(ReportModal, {
-    localVue,
-    propsData: {
+    global: {
+      plugins: [Oruga],
+    },
+    props: {
       ...propsData,
       ...customPropsData,
     },
@@ -45,13 +43,13 @@ describe("ReportModal", () => {
     const textarea = wrapper.find("textarea");
     textarea.setValue("some comment with my report");
 
-    submit.trigger("click");
+    await submit.trigger("click");
 
-    await localVue.nextTick();
+    // await wrapper.nextTick();
     expect(wrapper.emitted().close).toBeTruthy();
 
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith(
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledTimes(1);
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledWith(
       "some comment with my report",
       false
     );
@@ -83,11 +81,11 @@ describe("ReportModal", () => {
     );
 
     const submit = wrapper.find("footer.modal-card-foot button.is-primary");
-    submit.trigger("click");
-    await localVue.nextTick();
+    await submit.trigger("click");
+    // await localVue.nextTick();
 
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", false);
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledTimes(1);
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledWith("", false);
   });
 
   it("renders report modal with with a remote content and accept to forward", async () => {
@@ -98,14 +96,13 @@ describe("ReportModal", () => {
     );
 
     const switchButton = wrapper.find('input[type="checkbox"]');
-    switchButton.setChecked();
+    switchButton.setValue(true);
 
     const submit = wrapper.find("footer.modal-card-foot button.is-primary");
-    submit.trigger("click");
-    await localVue.nextTick();
+    await submit.trigger("click");
 
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", true);
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledTimes(1);
+    expect(wrapper.props("onConfirm")).toHaveBeenCalledWith("", true);
   });
 
   it("renders report modal custom title and buttons", async () => {
diff --git a/js/tests/unit/specs/components/User/PasswordReset.spec.ts b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
index 752b62190..d4d427181 100644
--- a/js/tests/unit/specs/components/User/PasswordReset.spec.ts
+++ b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
@@ -1,16 +1,14 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import PasswordReset from "@/views/User/PasswordReset.vue";
-import Buefy from "buefy";
 import { createMockClient, RequestHandler } from "mock-apollo-client";
 import { RESET_PASSWORD } from "@/graphql/auth";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import { resetPasswordResponseMock } from "../../mocks/auth";
 import RouteName from "@/router/name";
 import flushPromises from "flush-promises";
+import Oruga from "@oruga-ui/oruga-next";
+import { i18n } from "@/utils/i18n";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
 const $router = { push: jest.fn() };
 
 let requestHandlers: Record<string, RequestHandler>;
@@ -33,19 +31,25 @@ const generateWrapper = (
     requestHandlers.resetPasswordMutationHandler
   );
 
-  const apolloProvider = new VueApollo({
+  const apolloProvider = createApolloProvider({
     defaultClient: mockClient,
   });
 
   return mount(PasswordReset, {
-    localVue,
-    mocks: {
-      $route: { query: {} },
-      $router,
-      ...customMocks,
+    global: {
+      mocks: {
+        $route: { query: {} },
+        $t: (key: string): string => key,
+        $router,
+        ...customMocks,
+      },
+      plugins: [apolloProvider, Oruga, i18n],
+      stubs: ["router-link", "router-view"],
+      provide: {
+        DefaultApolloClient: mockClient,
+      },
     },
-    apolloProvider,
-    propsData: {
+    props: {
       token: "some-token",
     },
   });
@@ -65,7 +69,7 @@ describe("Reset page", () => {
       }),
     });
 
-    wrapper.findAll('input[type="password"').setValue("my password");
+    wrapper.find('input[type="password"').setValue("my password");
     wrapper.find("form").trigger("submit");
 
     await wrapper.vm.$nextTick();
@@ -87,7 +91,7 @@ describe("Reset page", () => {
   it("redirects to homepage if token is valid", async () => {
     const wrapper = generateWrapper();
 
-    wrapper.findAll('input[type="password"').setValue("my password");
+    wrapper.find('input[type="password"').setValue("my password");
     wrapper.find("form").trigger("submit");
 
     await wrapper.vm.$nextTick();
diff --git a/js/tests/unit/specs/components/User/login.spec.ts b/js/tests/unit/specs/components/User/login.spec.ts
index 79ee76602..ba1e2a027 100644
--- a/js/tests/unit/specs/components/User/login.spec.ts
+++ b/js/tests/unit/specs/components/User/login.spec.ts
@@ -1,12 +1,11 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import Login from "@/views/User/Login.vue";
-import Buefy from "buefy";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import buildCurrentUserResolver from "@/apollo/user";
 import { configMock } from "../../mocks/config";
 import { i18n } from "@/utils/i18n";
@@ -18,21 +17,20 @@ import { ICurrentUser } from "@/types/current-user.model";
 import flushPromises from "flush-promises";
 import RouteName from "@/router/name";
 import { InMemoryCache } from "@apollo/client/cache";
+import Oruga from "@oruga-ui/oruga-next";
+import { ComponentPublicInstance } from "vue";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
 const $router = { push: jest.fn() };
 
 describe("Render login form", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper<ComponentPublicInstance>;
   let mockClient: MockApolloClient | null;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
   const generateWrapper = (
     handlers: Record<string, unknown> = {},
-    customProps: Record<string, unknown> = {},
+    customProps: any = {},
     baseData: Record<string, unknown> = {},
     customMocks: Record<string, unknown> = {}
   ) => {
@@ -51,23 +49,27 @@ describe("Render login form", () => {
     mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
     mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
 
-    apolloProvider = new VueApollo({
+    apolloProvider = createApolloProvider({
       defaultClient: mockClient,
     });
 
     wrapper = mount(Login, {
-      localVue,
-      i18n,
-      apolloProvider,
-      propsData: {
+      global: {
+        mocks: {
+          $route: { query: {} },
+          $t: (key: string): string => key,
+          $router,
+          ...customMocks,
+        },
+        plugins: [apolloProvider, Oruga, i18n],
+        stubs: ["router-link", "router-view"],
+        provide: {
+          DefaultApolloClient: mockClient,
+        },
+      },
+      props: {
         ...customProps,
       },
-      mocks: {
-        $route: { query: {} },
-        $router,
-        ...customMocks,
-      },
-      stubs: ["router-link", "router-view"],
       data() {
         return {
           ...baseData,
@@ -77,7 +79,7 @@ describe("Render login form", () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     mockClient = null;
     apolloProvider = null;
     $router.push.mockReset();
diff --git a/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap b/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
index e863ec22e..d5338f776 100644
--- a/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
+++ b/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`App component renders a Vue component 1`] = `<b-navbar-stub type="is-secondary" wrapperclass="container" closeonclick="true" mobileburger="true" id="navbar"><template></template> <template></template> <template></template></b-navbar-stub>`;
+exports[`App component renders a Vue component 1`] = `<o-navbar-stub type="is-secondary" wrapperclass="container" closeonclick="true" mobileburger="true" id="navbar"><template></template> <template></template> <template></template></o-navbar-stub>`;
diff --git a/js/tests/unit/specs/components/navbar.spec.ts b/js/tests/unit/specs/components/navbar.spec.ts
index 98e18767e..5cd7dce9b 100644
--- a/js/tests/unit/specs/components/navbar.spec.ts
+++ b/js/tests/unit/specs/components/navbar.spec.ts
@@ -1,25 +1,22 @@
-import { shallowMount, createLocalVue, Wrapper, config } from "@vue/test-utils";
+import { shallowMount, VueWrapper } from "@vue/test-utils";
 import NavBar from "@/components/NavBar.vue";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
+import { createApolloProvider } from "@vue/apollo-option";
 import { CONFIG } from "@/graphql/config";
 import { USER_SETTINGS } from "@/graphql/user";
 import buildCurrentUserResolver from "@/apollo/user";
-import Buefy from "buefy";
 import { configMock } from "../mocks/config";
 import { InMemoryCache } from "@apollo/client/cache";
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import { ComponentPublicInstance } from "vue";
+import { i18n } from "@/utils/i18n";
+import Oruga from "@oruga-ui/oruga-next";
 
 describe("App component", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper<ComponentPublicInstance>;
   let mockClient: MockApolloClient | null;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
@@ -45,14 +42,21 @@ describe("App component", () => {
       requestHandlers.loggedUserQueryHandler
     );
 
-    apolloProvider = new VueApollo({
+    apolloProvider = createApolloProvider({
       defaultClient: mockClient,
     });
 
     wrapper = shallowMount(NavBar, {
-      localVue,
-      apolloProvider,
-      stubs: ["router-link", "router-view"],
+      global: {
+        mocks: {
+          $t: (key: string): string => key,
+        },
+        plugins: [apolloProvider, Oruga, i18n],
+        stubs: ["router-link", "router-view"],
+        provide: {
+          DefaultApolloClient: mockClient,
+        },
+      },
       data() {
         return {
           ...baseData,
@@ -62,7 +66,7 @@ describe("App component", () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     mockClient = null;
     apolloProvider = null;
   });
diff --git a/js/vue.config.js b/js/vue.config.js
index 8563348a0..2298e3d43 100644
--- a/js/vue.config.js
+++ b/js/vue.config.js
@@ -5,22 +5,6 @@ module.exports = {
   chainWebpack: (config) => {
     // remove the prefetch plugin
     config.plugins.delete("prefetch");
-
-    config.resolve.alias.set("vue", "@vue/compat");
-
-    config.module
-      .rule("vue")
-      .use("vue-loader")
-      .tap((options) => {
-        return {
-          ...options,
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2,
-            },
-          },
-        };
-      });
   },
   pwa: {
     themeColor: "#ffd599", //not required for service worker, but place theme color here if manifest.json doesn't change the color
diff --git a/js/yarn.lock b/js/yarn.lock
index 309b08b67..1af978af9 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -964,7 +964,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -1116,6 +1116,62 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@intlify/core-base@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.1.9.tgz#e4e8c951010728e4af3a0d13d74cf3f9e7add7f6"
+  integrity sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==
+  dependencies:
+    "@intlify/devtools-if" "9.1.9"
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
+
+"@intlify/devtools-if@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.1.9.tgz#a30e1dd1256ff2c5c98d8d75d075384fba898e5d"
+  integrity sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==
+  dependencies:
+    "@intlify/shared" "9.1.9"
+
+"@intlify/message-compiler@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.1.9.tgz#1193cbd224a71c2fb981455b8534a3c766d2948d"
+  integrity sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==
+  dependencies:
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    source-map "0.6.1"
+
+"@intlify/message-resolver@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.1.9.tgz#3155ccd2f5e6d0dc16cad8b7f1d8e97fcda05bfc"
+  integrity sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==
+
+"@intlify/runtime@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.1.9.tgz#2c12ce29518a075629efed0a8ed293ee740cb285"
+  integrity sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==
+  dependencies:
+    "@intlify/message-compiler" "9.1.9"
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/shared" "9.1.9"
+
+"@intlify/shared@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.1.9.tgz#0baaf96128b85560666bec784ffb01f6623cc17a"
+  integrity sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==
+
+"@intlify/vue-devtools@9.1.9":
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.1.9.tgz#2be8f4dbe7f7ed4115676eb32348141d411e426b"
+  integrity sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==
+  dependencies:
+    "@intlify/message-resolver" "9.1.9"
+    "@intlify/runtime" "9.1.9"
+    "@intlify/shared" "9.1.9"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1356,12 +1412,24 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@oruga-ui/oruga-next@^0.4.7":
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/@oruga-ui/oruga-next/-/oruga-next-0.4.7.tgz#50b80f5db77304be3ef51e5167e5b2f5c6ca22d6"
+  integrity sha512-3BPqgjZwNFcUWH97CoQR4CH4VAL5mDm+0+joWdHEx0hqdxeKn/VL3M0OdIIqPsNxOScteP0fBhXNvzll5mLXDQ==
+
+"@oruga-ui/theme-bulma@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@oruga-ui/theme-bulma/-/theme-bulma-0.1.3.tgz#bbf3a5229dbd2ab1715a9b7b05af1bfbba44c05b"
+  integrity sha512-lzNtYA9QX/LwdkALTvOJV9iyHTFdrfom9omP2yquaiYvZTdgm9xsM6CyghjMA/QkyePowDDuu/sIFrbRKDRP8w==
+  dependencies:
+    bulma "0.9.3"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.9.0":
+"@popperjs/core@^2.10.2", "@popperjs/core@^2.9.0":
   version "2.10.2"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
   integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
@@ -1487,7 +1555,16 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.24.tgz#a8d1076922580db528cc6988fde08f731dcfe733"
   integrity sha512-2VTCtY2JI0wpDwWT0a2fMFkjbgxDpwD3wvtY3/ndh5pyNX0JQCXtJarFzfZZurWvLNQ8QPRRel73182RBYUOHQ==
 
-"@tiptap/extension-bubble-menu@^2.0.0-beta.49", "@tiptap/extension-bubble-menu@^2.0.0-beta.9":
+"@tiptap/extension-bubble-menu@^2.0.0-beta.50":
+  version "2.0.0-beta.50"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.50.tgz#96c09e71d84473c018fa63dc072fa3732c2b3e88"
+  integrity sha512-UYnIaUTbI1K759z3A44dahp/NyHKjSaRvIptMnAv7q312l5n+czGwBcjZo41YUxjLPhnwGk1Siny1V+b5+4yBA==
+  dependencies:
+    prosemirror-state "^1.3.4"
+    prosemirror-view "^1.23.1"
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-bubble-menu@^2.0.0-beta.9":
   version "2.0.0-beta.49"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.49.tgz#f9863b1abad5f87d298d4e6527005484137a6166"
   integrity sha512-JbaSG3otBuMKRyTn0OqVscZnwqJ7c+qyKAnoZJit5EK1RS72cTfGWZvvAxaslAM4DeE9avJeudUi/tN5Iafv4A==
@@ -1531,14 +1608,14 @@
     "@types/prosemirror-dropcursor" "^1.0.3"
     prosemirror-dropcursor "^1.3.5"
 
-"@tiptap/extension-floating-menu@^2.0.0-beta.44":
-  version "2.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.44.tgz#fca9eefd9bcc74fdf035b012b9eb9fbfda331cf1"
-  integrity sha512-R8EF6XXlwoiHvCuXV3qGsEKae5u0OYrKHJNeOgau5SANg/ab+pjFzr3Lrt43NFpOKf5rzD3p2OJxnikudceLSg==
+"@tiptap/extension-floating-menu@^2.0.0-beta.45":
+  version "2.0.0-beta.45"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.45.tgz#0ccba4bc376171ff4cb0ad9b6e032bfa69488010"
+  integrity sha512-UjAXhdrcVInCydCoRq+9IOEHQC2lR6BSNACFiTzgzObY7aFaNmMus/9MZ/WZKSN3Rw8Mk4lr8PXFP/3zuNqbYA==
   dependencies:
     prosemirror-state "^1.3.4"
-    prosemirror-view "^1.22.0"
-    tippy.js "^6.3.6"
+    prosemirror-view "^1.23.1"
+    tippy.js "^6.3.7"
 
 "@tiptap/extension-gapcursor@^2.0.0-beta.33":
   version "2.0.0-beta.33"
@@ -1664,14 +1741,15 @@
     prosemirror-state "^1.3.4"
     prosemirror-view "^1.22.0"
 
-"@tiptap/vue-2@^2.0.0-beta.21":
-  version "2.0.0-beta.68"
-  resolved "https://registry.yarnpkg.com/@tiptap/vue-2/-/vue-2-2.0.0-beta.68.tgz#9f67bd57c9860d2263ae4f32b169f6307f7d273b"
-  integrity sha512-Denvq8TdO5mzOkFLbQHWpmz/90tFehN2eRBRH20lPBQyrHSW3kxLleNVf2UsmZhu9b9d83s2MrFNJp1wAkhCKg==
+"@tiptap/vue-3@^2.0.0-beta.81":
+  version "2.0.0-beta.81"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.81.tgz#92e89ec645c1ada568712e766de92332eba58ba8"
+  integrity sha512-TyOMAOWj0BedvieiRfyz8pIE4g1iLL8cP90gv2M/1otm5ofpPJ17SDvBwlm8+ludY0CzlSDN66F94j/JTxFq+g==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.0-beta.49"
-    "@tiptap/extension-floating-menu" "^2.0.0-beta.44"
-    prosemirror-view "^1.22.0"
+    "@tiptap/extension-bubble-menu" "^2.0.0-beta.50"
+    "@tiptap/extension-floating-menu" "^2.0.0-beta.45"
+    prosemirror-state "^1.3.4"
+    prosemirror-view "^1.23.1"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -2262,20 +2340,34 @@
     "@typescript-eslint/types" "5.3.1"
     eslint-visitor-keys "^3.0.0"
 
-"@vue-a11y/announcer@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@vue-a11y/announcer/-/announcer-2.1.0.tgz#ed725e90b91870c76285840e0aaa637cfafbf27f"
-  integrity sha512-7V1osiJQxZPBA+2duF2nZugwgbIba/yvKLsHWvGIBJGY0VZhR4vYyFH3VFyFH2Yi46tHEVBN+X+a0uQaJMhCsQ==
+"@vue-a11y/announcer@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@vue-a11y/announcer/-/announcer-3.1.5.tgz#aab9e8bb7faddac69f6e8e68ab3017fb2621fd46"
+  integrity sha512-eBL5b2cAjvXNGPvakrpNIj1navG1nA3jFF7z5DXrQLLYyWFjtcjdO2w8AHn7WEafU68jRNYEubP7Mv0h0WhgUQ==
 
-"@vue-a11y/skip-to@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@vue-a11y/skip-to/-/skip-to-2.1.2.tgz#a50f5b97605f5054ca7a7e222bdc721405e38f38"
-  integrity sha512-oKx0YE/nfWSBI48RKHoRsUmpY0//rDPBZTGk1LxhkkUsXPwzuMlJBFrWGIswdd+3DiIE5OyiDaM45ZldYjtDIA==
+"@vue-a11y/skip-to@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@vue-a11y/skip-to/-/skip-to-3.0.3.tgz#14a495e795215076181a2da793ae55995db6da39"
+  integrity sha512-m7Sc4rxbehSLZncVIKT1he54zhVa+q+YOFebDQrEATpFMtsrcgnTR2DkH5OVGY33rT3MtZlpQbwYBevwplWP9w==
 
-"@vue/apollo-option@4.0.0-alpha.11":
-  version "4.0.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.11.tgz#b4ecac2d1ac40271cb7f20683fb8e4c85974329a"
-  integrity sha512-IU458Y2cH/eo3RYXyoEoozyRxEgUz/BLC96DQAQKiEc7hFkE6I0g/VZu4tVIP0Od1/ivezdGaAPEVPA2AxE1ug==
+"@vue-leaflet/vue-leaflet@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz#d731a5d2256d049e345f58330616180191d88b12"
+  integrity sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==
+
+"@vue/apollo-composable@^4.0.0-alpha.15":
+  version "4.0.0-alpha.15"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-composable/-/apollo-composable-4.0.0-alpha.15.tgz#4a93417cb112cc1ad9c8fbdf47008909f71fca5b"
+  integrity sha512-c/xk/po4nTcAnwIG+ZK0XFwY84BiKJquGnK2T+qolp0Saeb5amoTtHu6CEZ6Xd635otqUTY8SODOoFraoAttNQ==
+  dependencies:
+    throttle-debounce "^3.0.1"
+    ts-essentials "^8.1.0"
+    vue-demi "^0.11.4"
+
+"@vue/apollo-option@^4.0.0-alpha.15":
+  version "4.0.0-alpha.15"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.15.tgz#49eccc2ac4dae889dcfa9fde3182429f7e24d082"
+  integrity sha512-tbGmcojKPfBPjC2Ma90+pzOu0Co1SQJD4tzl1++XwYzi1NqcKQpWIMA3Azu8d4VjCu5SGQkbgZ4roExOasVuuA==
   dependencies:
     throttle-debounce "^2.3.0"
 
@@ -2316,10 +2408,10 @@
     lodash.kebabcase "^4.1.1"
     svg-tags "^1.0.0"
 
-"@vue/babel-preset-app@^5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-5.0.0-rc.0.tgz#54644a87c0c55d91e5cd724c7b151de15d1dbe4e"
-  integrity sha512-44+ibKgrKH/gCKq13Yo6CVDRnuFkUEXN6LVoKQPHL9d4bs/3MEnOdG+Rz9PzMJjB2hgLVqf2nlfbpmNmtaMh7A==
+"@vue/babel-preset-app@^5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-5.0.0-rc.1.tgz#bcf3667fbd4967d39495f4025a093859c6174363"
+  integrity sha512-inJV1lxC+dUvqwPy9gbEjELX+Vk/Ys961S61aIn52gSCZBLHfk8/7mM7B3PamgHSG8yQmgrd3BOZsKSSsAMNJQ==
   dependencies:
     "@babel/core" "^7.12.16"
     "@babel/helper-compilation-targets" "^7.12.16"
@@ -2401,85 +2493,85 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
     camelcase "^5.0.0"
 
-"@vue/cli-overlay@^5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-5.0.0-rc.0.tgz#d403bf3f30409a9388bbf43a2f9684872f5ce8eb"
-  integrity sha512-jzgGinruzu3fRGIi1MtPwld2VkG1tQn7DVjBYo9WKp1CBUuTwwasJoevHnoRLc7c/TK+erCX2M6exCHhJbfPAA==
+"@vue/cli-overlay@^5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-5.0.0-rc.1.tgz#84a60b305614eda3d00e959cfb9780d713e352f9"
+  integrity sha512-pJ8DxDlFiM73FaNlpKqOi3haG15c/6jPLiFZKIGJDoMxLLufSxEZ8aSfvbFRjqwGy/o3I4jzg086Yy+3ZhdG1g==
 
-"@vue/cli-plugin-babel@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-5.0.0-rc.0.tgz#288520e83aa2d3a19bb80dd9e9c5d1d3482b8757"
-  integrity sha512-hYwR/1iAKR/s0PHE8s1IxrA1YyZBGrcGXke4eSx2iwDLodUUq/ZXPRKOeWkiJ8aBMJq3yoQdERTA795SoSzSnA==
+"@vue/cli-plugin-babel@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-5.0.0-rc.1.tgz#9fd1f7e71240ec15c921e7680558c23920d04bd0"
+  integrity sha512-ldVuIkPDAuW831l4u7QMkqEhn4/Gil5Wv617i6h4rwDYAAXPgdf8Ce6b7jH4XEyQ2HCu93TzAK1i2njkWV1wrw==
   dependencies:
     "@babel/core" "^7.12.16"
-    "@vue/babel-preset-app" "^5.0.0-rc.0"
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/babel-preset-app" "^5.0.0-rc.1"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     babel-loader "^8.2.2"
     thread-loader "^3.0.0"
-    webpack "^5.22.0"
+    webpack "^5.54.0"
 
-"@vue/cli-plugin-e2e-cypress@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-5.0.0-rc.0.tgz#f5322a8ba7e1a3946e9bd1b598c381beea4d018f"
-  integrity sha512-VxoN5QRXY+zYKM+7HyQMtXeWUvKL+9vJ9BiUdsEP3oqKmPX5tNxavGW2oJ5R0Xb1y73sauOXHhNY4PMjw5j5dQ==
+"@vue/cli-plugin-e2e-cypress@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-5.0.0-rc.1.tgz#494b9831c99e78c7388f1b7546df23cc8fd5cc9f"
+  integrity sha512-YG7N6Us3GSvTRrjnaB2Pdgf2UMlQE4FS66epGvQV4KuhM5JBB1uZgcu+RSSbhso4YTsoYGM01R+/RiP76DSltQ==
   dependencies:
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     eslint-plugin-cypress "^2.11.2"
 
-"@vue/cli-plugin-eslint@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-5.0.0-rc.0.tgz#d3d1ff6a62312418058e15c354756a8d4c341627"
-  integrity sha512-yd4lLrKQEHUncMa6kN4TcuoBUvYYtbpttAmAaCWV8qiZvIi3s6d+PAqNFNGwkZG9M7QaVNR4U8DOXDqGOGgn6A==
+"@vue/cli-plugin-eslint@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-5.0.0-rc.1.tgz#d6525834d54249ed5df5ba55614eeea3fa836812"
+  integrity sha512-CK/T00XeibQCMHzSenBWDROB11HbCL69bEc1nwT8gjXq5MMw9AB8qlaZzSuoHbbUE0PDyD272V/RDePO1ExT7w==
   dependencies:
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     eslint-webpack-plugin "^3.1.0"
     globby "^11.0.2"
-    webpack "^5.22.0"
+    webpack "^5.54.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-pwa@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-5.0.0-rc.0.tgz#84de5365403ffa9760bf123da67e0d4b755bc6ce"
-  integrity sha512-0GWbaQRpArD9o13FPsjNCusrbjXfNj67PlTCjPwx4/pPkZpMaP4EuzbFLkeO+8h5cU8fV4qIp2vY87hbCqr6hA==
+"@vue/cli-plugin-pwa@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-5.0.0-rc.1.tgz#0cdb9d582091579e70aebd015726578b05404cdb"
+  integrity sha512-SJweD2lK7Fd5ylZIvb0dsYW6UWM7IyZUM4nctXDw15unCByqm0eO4moIlj95OiNiudeuiBuyHuaHqErrvIlfqQ==
   dependencies:
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     html-webpack-plugin "^5.1.0"
-    webpack "^5.22.0"
+    webpack "^5.54.0"
     workbox-webpack-plugin "^6.1.0"
 
-"@vue/cli-plugin-router@^5.0.0-rc.0", "@vue/cli-plugin-router@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.0-rc.0.tgz#b671f373808aaeda0b5aa25cf962e780e4356cb0"
-  integrity sha512-OYJP/aPzAV0BsY0slB2mqMr0qJBCUndn8c56+b7P5FHhYNzO3CvyIirtjKOaczt7+iMPanMdSC8XRQj3zEqz+g==
+"@vue/cli-plugin-router@^5.0.0-rc.1", "@vue/cli-plugin-router@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.0-rc.1.tgz#9452cc4bade70bd243f7ecbfdf7c80487293af14"
+  integrity sha512-eRMeUNY89PbyH/Gkt0IGfNT2qK4fZhTdBDKrR/hwyk57TBDse/h2jZ9inPqfSnrdIrMOqYsLU2ixzSzJVXXOVw==
   dependencies:
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
 
-"@vue/cli-plugin-typescript@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-5.0.0-rc.0.tgz#f8c98e57d29dd3d95c7142f5b04794e32dfc7ff8"
-  integrity sha512-ctfdACa/p/BMp6PcMZNwiZfTIx5OuCsKEwr86+8wAZW1Hv58ygqP7jdkuUZBrPtYaSwwJI+7CVcf7Zd/JtrvuA==
+"@vue/cli-plugin-typescript@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-5.0.0-rc.1.tgz#b563964a34ccd550afe3e9fbfffcf3828e03baf9"
+  integrity sha512-09tq8f1LiYJcmLMfoSiOZX+K2sA/tY3hM99vt5fRevpePFR4TRTbuNjVwtKiYLMq7UsZ2mmbYl9ViQ8Ium1i0w==
   dependencies:
     "@babel/core" "^7.12.16"
     "@types/webpack-env" "^1.15.2"
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     babel-loader "^8.2.2"
     cache-loader "^4.1.0"
     fork-ts-checker-webpack-plugin "^6.4.0"
     globby "^11.0.2"
     thread-loader "^3.0.0"
     ts-loader "^9.2.5"
-    webpack "^5.22.0"
+    webpack "^5.54.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-unit-jest@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-5.0.0-rc.0.tgz#172e7a4830b0542b9d7ca4c3bc6c4cd852a6e222"
-  integrity sha512-hEJfl1sgTZiljiPmAKa1iqIgX/TuDp0ICoBy/VO5A9xX3eyG/vn7YMhVeZ3q7J8awyXWMFBBkmLC9fg950lTGg==
+"@vue/cli-plugin-unit-jest@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-5.0.0-rc.1.tgz#7dbd0eede17569e6c999b1000b62265e2a40a715"
+  integrity sha512-V3KuesvltEs4rnrexQDJao9oSUnaAFXs8GKlX/orHGQY+bBee8ZXVZIWmm+jbAHDKTNtPjib9UeoXD77UPFISQ==
   dependencies:
     "@babel/core" "^7.12.16"
     "@babel/plugin-transform-modules-commonjs" "^7.15.0"
     "@types/jest" "^27.0.1"
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     babel-jest "^27.1.0"
     deepmerge "^4.2.2"
     jest "^27.1.0"
@@ -2487,25 +2579,25 @@
     jest-transform-stub "^2.0.0"
     jest-watch-typeahead "^1.0.0"
 
-"@vue/cli-plugin-vuex@^5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.0-rc.0.tgz#7470ba2c4631a33aee985913228144770470cb90"
-  integrity sha512-x4aW7m6yMy9+LMJBqVCRrU5JNDJhrdYDe6K7tnkHywvMjLATHSDb0Wq8fustSJ13RT65cMDu4GczWIm6tGB1Cg==
+"@vue/cli-plugin-vuex@^5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.0-rc.1.tgz#2f4f04ae831ebca688acea5531658d1236baed23"
+  integrity sha512-ShfPIvuD+AFUtUcTw5okLUnBy8o4NrC0ICPpD7z+KG4gbfWzZMmT2TAkjqO9pp21cI+bYzigsBZ/FoXiU5+h7Q==
 
-"@vue/cli-service@~5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-5.0.0-rc.0.tgz#36ccaead7d0e7e4209da86f97f1e6b297382f712"
-  integrity sha512-Fh4sKLKEvG4jalCq2+TFYf82vplhUjN/eiJHeXSYy7NcS2V21gfql7le8FYTO9uF+hEK2F4IQMQBTY4lkkkPjg==
+"@vue/cli-service@~5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-5.0.0-rc.1.tgz#a0e659d007acf6e162d8ab42b590386ec9c1fcb9"
+  integrity sha512-xQIHBJzSK+tuOrMnfywRAqfcshClBG/3z/6L/ep8m9O1egsnrkjf2252znJqNaSXvER6b5exDr8M4wnNvhinBw==
   dependencies:
     "@babel/helper-compilation-targets" "^7.12.16"
     "@soda/friendly-errors-webpack-plugin" "^1.8.0"
     "@soda/get-current-script" "^1.0.2"
     "@types/minimist" "^1.2.0"
     "@types/webpack-dev-server" "^4.1.0"
-    "@vue/cli-overlay" "^5.0.0-rc.0"
-    "@vue/cli-plugin-router" "^5.0.0-rc.0"
-    "@vue/cli-plugin-vuex" "^5.0.0-rc.0"
-    "@vue/cli-shared-utils" "^5.0.0-rc.0"
+    "@vue/cli-overlay" "^5.0.0-rc.1"
+    "@vue/cli-plugin-router" "^5.0.0-rc.1"
+    "@vue/cli-plugin-vuex" "^5.0.0-rc.1"
+    "@vue/cli-shared-utils" "^5.0.0-rc.1"
     "@vue/component-compiler-utils" "^3.3.0"
     "@vue/vue-loader-v15" "npm:vue-loader@^15.9.7"
     "@vue/web-component-wrapper" "^1.3.0"
@@ -2547,7 +2639,7 @@
     thread-loader "^3.0.0"
     vue-loader "^16.8.2"
     vue-style-loader "^4.1.3"
-    webpack "^5.22.0"
+    webpack "^5.54.0"
     webpack-bundle-analyzer "^4.4.0"
     webpack-chain "^6.5.1"
     webpack-dev-server "^4.1.0"
@@ -2555,10 +2647,10 @@
     webpack-virtual-modules "^0.4.2"
     whatwg-fetch "^3.6.2"
 
-"@vue/cli-shared-utils@^5.0.0-rc.0":
-  version "5.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.0-rc.0.tgz#62429b8baaec3a9c9afe49bb14ea1cdd237c7a8b"
-  integrity sha512-pcNDDXSP4PXO3EZCBmOGKH8xeqkcgglsNV91/f6IwjGYCCcnA2RpS79Ev+jTBUe+n4WmShndcHg7R9jCFzR8cg==
+"@vue/cli-shared-utils@^5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.0-rc.1.tgz#0587c663775e666227d896ebbb365ea9909047d8"
+  integrity sha512-rZVTGfSQ0Sqw76BD/Z6iARfnO2r5ICSxt0iIpzjM8w9ohpRtI2B45NrngF0rILwy9d8we4A/n7gQQ0rqwkAX7g==
   dependencies:
     chalk "^4.1.2"
     execa "^1.0.0"
@@ -2573,11 +2665,6 @@
     semver "^7.3.4"
     strip-ansi "^6.0.0"
 
-"@vue/compat@^3.1.0":
-  version "3.2.22"
-  resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.22.tgz#fcc930d658255c0192e3f568757a030948d0bd4f"
-  integrity sha512-v4TjBP5xDjpHX7i9pUvLVMe6Gyy6O5W3YuNnyLKJgJVzChQc8FMriWbia+oechiCYTRUzv+F+V5cFghYY8Gn3Q==
-
 "@vue/compiler-core@3.2.22":
   version "3.2.22"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.22.tgz#5e3d3b983cc7f430ddbc6a8773c872dcf410dc89"
@@ -2636,6 +2723,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.7":
+  version "6.0.0-beta.20.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz#5b499647e929c35baf2a66a399578f9aa4601142"
+  integrity sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q==
+
 "@vue/eslint-config-typescript@^9.0.0":
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-9.0.1.tgz#692fc007cf20012882ac7466b69c3967a0b9809b"
@@ -2691,14 +2783,10 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41"
   integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==
 
-"@vue/test-utils@^1.1.0":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.2.2.tgz#0242ea4e202d4853541bb167fead3f2249140ab7"
-  integrity sha512-P+yiAsszoy8z1TqXiVUnAZaJj0WGGz5fCxm4bOSI6Cpwy1+PNYwYxDv0ROAA/SUtOPppV+aD8tp/QWwxf8ROJw==
-  dependencies:
-    dom-event-types "^1.0.0"
-    lodash "^4.17.15"
-    pretty "^2.0.0"
+"@vue/test-utils@^2.0.0-rc.16":
+  version "2.0.0-rc.16"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.16.tgz#59380f02870f856ac002a29c02681d3f3fcbafeb"
+  integrity sha512-TubikDVkI2LuRKRPSLv3lYpbpvvucT2DIcGqfBVpvYs4W19u0EBTJEdmfwmSuLY7H1TyAr9Stur3PI1sWWvTGQ==
 
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.9.8"
@@ -2711,18 +2799,7 @@
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-"@vue/vue2-jest@^27.0.0-alpha.3":
-  version "27.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@vue/vue2-jest/-/vue2-jest-27.0.0-alpha.3.tgz#fe28c70ee21db494ea8ac1ddbce7a81dd9cabb73"
-  integrity sha512-50UrwXn7xO92TwsJCUGiA9CCpjKCZRWlW2Q3eOgR8Y05bbDnTRrhc23ZDc9gKqeWCykEIdRnUXo5Qb1XeDl+7A==
-  dependencies:
-    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
-    "@vue/component-compiler-utils" "^3.1.0"
-    chalk "^2.1.0"
-    extract-from-css "^0.4.4"
-    source-map "0.5.6"
-
-"@vue/vue3-jest@^27.0.0-alpha.1":
+"@vue/vue3-jest@^27.0.0-alpha.3":
   version "27.0.0-alpha.3"
   resolved "https://registry.yarnpkg.com/@vue/vue3-jest/-/vue3-jest-27.0.0-alpha.3.tgz#c9c77d971220e3359a1d379008d3fa33564a6380"
   integrity sha512-q6Ij39J/qPMkMHhttq0r4Yx/leaN1rMnUrwicLwad9YuVO6sPAbiaiUa+A5jbcHcHGMhXcJ69oGIf4dj7oGidg==
@@ -3250,6 +3327,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+babel-core@^7.0.0-bridge.0:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
 babel-jest@^27.1.0, babel-jest@^27.3.1:
   version "27.3.1"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.3.1.tgz#0636a3404c68e07001e434ac4956d82da8a80022"
@@ -3508,13 +3590,6 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buefy@^0.9.0:
-  version "0.9.13"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.13.tgz#fa530257fc47a8cb00d1e36faa93bbeba4aefce0"
-  integrity sha512-W8QhvAz+YlKhxDQe/oag4Fl/zYTvXOPoNVr4pseYDR7r52Ta6s51iedBdvw4It68Sq+g7mcxIzwK7mv3PR6O4g==
-  dependencies:
-    bulma "0.9.3"
-
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -4518,11 +4593,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-event-types@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
-  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
-
 dom-serializer@^1.0.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
@@ -8054,11 +8124,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.26, portfinder@^1.0.28:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -8414,7 +8479,7 @@ pretty-format@^27.0.0, pretty-format@^27.3.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty@2.0.0, pretty@^2.0.0:
+pretty@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
   integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
@@ -8534,7 +8599,7 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
   dependencies:
     prosemirror-model "^1.0.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.22.0:
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.22.0, prosemirror-view@^1.23.1:
   version "1.23.1"
   resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.23.1.tgz#ea84e685003fab655b835bf2fe834dba66d1798b"
   integrity sha512-ZB0GqRqqkGvh7ggk7asFyKl3mqu3M5URBg0tf578kuP326RqL7nbIS0jEix95Vfb/U43J1T8PV6OCWQ5fZPVjg==
@@ -9262,16 +9327,16 @@ source-map@0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@@ -9717,6 +9782,11 @@ throttle-debounce@^2.3.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
   integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
@@ -9737,7 +9807,7 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tippy.js@^6.2.3, tippy.js@^6.3.6:
+tippy.js@^6.2.3, tippy.js@^6.3.6, tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
@@ -9814,6 +9884,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
 
+ts-essentials@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-8.1.0.tgz#bc982b242db226b84c89477d3d42630ee2954513"
+  integrity sha512-34xALeQADWRYq9kbtprP4KdpTQ3v3BBIs/U4SpaP+C4++B8ijXY5NnILRJLchQVMzw7YBzKuGMUMrI9uT+ALVw==
+
 ts-invariant@^0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
@@ -10095,15 +10170,13 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v-tooltip@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.1.3.tgz#281c2015d1e73787f13c8956aa295b8c3a73f261"
-  integrity sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==
+v-tooltip@^4.0.0-beta.2:
+  version "4.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-4.0.0-beta.2.tgz#c5cb8d4b703207f588965e32bbec54ada0e43643"
+  integrity sha512-T1cMnFwjRy41YFcoRTNTwXI2TnkdIxwmDVjzUpCxyK5KJAB29FCwuW+usXOaZHJouEI5NOZ/3LnAgxP18xFkww==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    lodash "^4.17.21"
-    popper.js "^1.16.1"
-    vue-resize "^1.0.1"
+    "@popperjs/core" "^2.10.2"
+    vue-resize "^2.0.0-alpha.1"
 
 v8-compile-cache@^2.0.3:
   version "2.3.0"
@@ -10146,10 +10219,15 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vue-class-component@^7.2.3:
-  version "7.2.6"
-  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
-  integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
+vue-class-component@8.0.0-rc.1:
+  version "8.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
+  integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==
+
+vue-demi@^0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
+  integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
 
 vue-eslint-parser@^8.0.0, vue-eslint-parser@^8.0.1:
   version "8.0.1"
@@ -10192,10 +10270,15 @@ vue-i18n-extract@^2.0.4:
     is-valid-glob "^1.0.0"
     js-yaml "^4.1.0"
 
-vue-i18n@^8.14.0:
-  version "8.26.7"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.26.7.tgz#adfd48373449fe31438c48e3b3bd43044dc3a681"
-  integrity sha512-7apa5PvRg1YCLoraE3lOgpCG8hJGupLCtywQWedWsgBbvF0TOgFvhitqK9xRH0PBGG1G8aiJz9oklyNDFfDxLg==
+vue-i18n@^9.0.0:
+  version "9.1.9"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.1.9.tgz#cb53e06ab5cc5b7eed59332f151caf48d47be9bb"
+  integrity sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==
+  dependencies:
+    "@intlify/core-base" "9.1.9"
+    "@intlify/shared" "9.1.9"
+    "@intlify/vue-devtools" "9.1.9"
+    "@vue/devtools-api" "^6.0.0-beta.7"
 
 vue-loader@^16.8.2:
   version "16.8.3"
@@ -10206,29 +10289,27 @@ vue-loader@^16.8.2:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
-vue-meta@^2.3.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
-  integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
+vue-meta@^3.0.0-alpha.9:
+  version "3.0.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-3.0.0-alpha.9.tgz#304999dc67337245947c2a08d7d94df984864c61"
+  integrity sha512-/ff7qNKy4c5NwmDl6N5XK2hhiXEdMeUxvk+SXCs40W9DOgu7VWGqPtgdSnXHnYMRoofkT/nKHE+vXklJ47r9Dw==
+
+vue-property-decorator@^10.0.0-rc.3:
+  version "10.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-10.0.0-rc.3.tgz#bb0cb2c7c31dc41149eb432f2104fb82dc3d95be"
+  integrity sha512-EGqjf8Lq+kTausZzfLB1ynWOcyay8ZLAc5p2VlKGEX2q+BjYw84oZxr6IcdwuxGIdNmriZqPUX6AlAluBdnbEg==
+
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
+vue-router@^4.0.0:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
   dependencies:
-    deepmerge "^4.2.2"
-
-vue-property-decorator@^9.0.0:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
-  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
-
-vue-resize@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-1.0.1.tgz#c120bed4e09938771d622614f57dbcf58a5147ee"
-  integrity sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-vue-router@^3.1.6:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
-  integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
+    "@vue/devtools-api" "^6.0.0-beta.18"
 
 vue-scrollto@^2.17.1:
   version "2.20.0"
@@ -10250,11 +10331,6 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue2-leaflet@^2.0.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
-  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
-
 vue@^3.1.0:
   version "3.2.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.22.tgz#46e4dd89e98cc4b851ae1eb35f00ced413a34bb7"
@@ -10445,12 +10521,17 @@ webpack-sources@^3.2.0:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.1.tgz#251a7d9720d75ada1469ca07dbb62f3641a05b6d"
   integrity sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==
 
+webpack-sources@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.2.tgz#d88e3741833efec57c4c789b6010db9977545260"
+  integrity sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==
+
 webpack-virtual-modules@^0.4.2:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9"
   integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==
 
-webpack@*, webpack@^5.22.0, webpack@^5.38.1:
+webpack@*, webpack@^5.38.1:
   version "5.64.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.0.tgz#db3e12546f755930ccc9e0e21ba660871940c615"
   integrity sha512-UclnN24m054HaPC45nmDEosX6yXWD+UGC12YtUs5i356DleAUGMDC9LBAw37xRRfgPKYIdCYjGA7RZ1AA+ZnGg==
@@ -10480,6 +10561,36 @@ webpack@*, webpack@^5.22.0, webpack@^5.38.1:
     watchpack "^2.2.0"
     webpack-sources "^3.2.0"
 
+webpack@^5.54.0:
+  version "5.64.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.64.1.tgz#fd59840c16f04fe315f2b2598a85026f12dfa1bb"
+  integrity sha512-b4FHmRgaaAjP+aVOVz41a9Qa5SmkUPQ+u8FntTQ1roPHahSComB6rXnLwc976VhUY4CqTaLu5mCswuHiNhOfVw==
+  dependencies:
+    "@types/eslint-scope" "^3.7.0"
+    "@types/estree" "^0.0.50"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.8.3"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.4"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.2.0"
+    webpack-sources "^3.2.2"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"