diff --git a/src/jelu-ui/src/components/AddBook.vue b/src/jelu-ui/src/components/AddBook.vue
index afc15d5c..08c143ad 100644
--- a/src/jelu-ui/src/components/AddBook.vue
+++ b/src/jelu-ui/src/components/AddBook.vue
@@ -463,8 +463,8 @@ let displayDatepicker = computed(() => {
 
 <template>
   <section>
-    <div class="grid columns is-multiline">
-      <div class="grid sm:grid-cols-3 mb-4 sm:w-10/12 justify-center justify-items-center justify-self-center column is-offset-one-fifth is-three-fifths">
+    <div class="grid">
+      <div class="grid sm:grid-cols-3 mb-4 sm:w-10/12 justify-center justify-items-center justify-self-center">
         <div />
         <h1 class="text-2xl typewriter capitalize">
           {{ t('nav.add_book') }}
@@ -507,7 +507,7 @@ let displayDatepicker = computed(() => {
           </svg>
         </div>
       </div>
-      <div class="form-control sm:w-8/12 justify-self-center column is-two-thirds">
+      <div class="form-control sm:w-8/12 justify-self-center">
         <div class="field mb-3">
           <o-field
             horizontal
@@ -990,7 +990,7 @@ let displayDatepicker = computed(() => {
             v-else
             horizontal
             :label="t('labels.choose_file')"
-            class="file is-primary has-name"
+            class="file"
           >
             <input
               type="file"
diff --git a/src/jelu-ui/src/components/AdminAuthors.vue b/src/jelu-ui/src/components/AdminAuthors.vue
index 5d6ca160..a61ca27e 100644
--- a/src/jelu-ui/src/components/AdminAuthors.vue
+++ b/src/jelu-ui/src/components/AdminAuthors.vue
@@ -133,7 +133,7 @@ const rightDoD = computed(() => {
           :clickable="false"
           variant="success"
         >
-          <h1 class="text-xl title has-text-centered">
+          <h1 class="text-xl">
             {{ t('authors_merge.author_left_subtitle') }}
           </h1>{{ t('authors_merge.author_left_description') }}
         </o-step-item>
@@ -145,7 +145,7 @@ const rightDoD = computed(() => {
           :clickable="false"
           variant="success"
         >
-          <h1 class="text-xl title has-text-centered">
+          <h1 class="text-xl">
             {{ t('authors_merge.author_right_subtitle') }}
           </h1>{{ t('authors_merge.author_right_description') }}
         </o-step-item>
@@ -157,7 +157,7 @@ const rightDoD = computed(() => {
           :clickable="false"
           variant="success"
         >
-          <h1 class="text-xl title has-text-centered">
+          <h1 class="text-xl">
             {{ t('authors_merge.authors_merge_subtitle') }}
           </h1>{{ t('authors_merge.authors_merge_description') }}
         </o-step-item>
@@ -548,7 +548,7 @@ const rightDoD = computed(() => {
     </div>
     <div class="mt-2 col-span-2">
       <button
-        class="btn btn-primary button is-primary is-light mb-4"
+        class="btn btn-primary mb-4"
         :disabled="activeStep !== 'merge'"
         @click="save"
       >
diff --git a/src/jelu-ui/src/components/AdminBase.vue b/src/jelu-ui/src/components/AdminBase.vue
index 2e96f2a6..4c3fc1fd 100644
--- a/src/jelu-ui/src/components/AdminBase.vue
+++ b/src/jelu-ui/src/components/AdminBase.vue
@@ -59,7 +59,7 @@ const sideBarWidth = ref(175)
     </div>
   </div>
   <footer class="footer footer-center my-10">
-    <div class="content has-text-centered">
+    <div>
       <p>
         <strong>Jelu</strong> <a
           href="https://github.com/bayang/jelu"
diff --git a/src/jelu-ui/src/components/AuthorBooks.vue b/src/jelu-ui/src/components/AuthorBooks.vue
index 16f53484..967768ac 100644
--- a/src/jelu-ui/src/components/AuthorBooks.vue
+++ b/src/jelu-ui/src/components/AuthorBooks.vue
@@ -217,8 +217,8 @@ getBooks()
       </div>
     </template>
   </sort-filter-bar-vue>
-  <div class="grid columns is-multiline box">
-    <div class="grid items-center justify-center justify-items-center justify-self-center sm:grid-cols-3 mb-4 sm:w-10/12 column is-full">
+  <div class="grid">
+    <div class="grid items-center justify-center justify-items-center justify-self-center sm:grid-cols-3 mb-4 sm:w-10/12">
       <div />
       <div class="level-item">
         <h2 class="text-2xl inline mr-2 typewriter">
@@ -270,7 +270,7 @@ getBooks()
         ><i class="mdi mdi-24px mdi-instagram" /></a>
       </div>
     </div>
-    <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 column is-one-fifth is-offset-one-fifth">
+    <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-10">
       <div class="justify-self-center sm:justify-self-end">
         <figure class="image">
           <img
@@ -287,39 +287,37 @@ getBooks()
         </figure>
       </div>
     
-      <div class="column is-three-fifths content text-left w-11/12 sm:w-full justify-self-center sm:justify-self-start">
+      <div class="text-left w-11/12 sm:w-full justify-self-center sm:justify-self-start">
         <p
           v-if=" author.biography != null"
-          class="has-text-left"
         >
           <span class="font-semibold">{{ t('author.biography') }} :</span>
         </p>
         <p
-          class="has-text-left prose-base"
+          class="prose-base"
           v-html="author.biography"
         />
         <p
           v-if="author.dateOfBirth"
-          class="has-text-left block"
+          class="block"
         >
           <span class="font-semibold">{{ t('author.date_of_birth') }} :</span>
           {{ formatDate(author.dateOfBirth) }}
         </p>
         <p
           v-if="author.dateOfDeath"
-          class="has-text-left block"
+          class="block"
         >
           <span class="font-semibold">{{ t('author.date_of_death') }} :</span>
           {{ formatDate(author.dateOfDeath) }}
         </p>
         <p
           v-if=" author.notes != null"
-          class="has-text-left"
         >
           <span class="font-semibold">{{ t('author.additional_notes') }} :</span>
         </p>
         <p
-          class="has-text-left prose-base"
+          class="prose-base"
           v-html="author.notes"
         />
       </div>
diff --git a/src/jelu-ui/src/components/AutoImportFormModal.vue b/src/jelu-ui/src/components/AutoImportFormModal.vue
index 50004dbe..a989052d 100644
--- a/src/jelu-ui/src/components/AutoImportFormModal.vue
+++ b/src/jelu-ui/src/components/AutoImportFormModal.vue
@@ -127,7 +127,7 @@ function pluginsModalClosed() {
 
 <template>
   <section class="edit-modal">
-    <div class="grid justify-center justify-items-center columns is-centered is-multiline">
+    <div class="grid justify-center justify-items-center">
       <div class="mb-2">
         <h1 class="text-2xl typewriter capitalize">
           {{ t('labels.import_book') }}
@@ -135,7 +135,7 @@ function pluginsModalClosed() {
       </div>
       <div
         v-if="displayForm"
-        class="column is-centered is-full"
+        class="column"
       >
         <div class="field mb-2">
           <o-field
diff --git a/src/jelu-ui/src/components/BookCard.vue b/src/jelu-ui/src/components/BookCard.vue
index 2a65f35d..c44df7f4 100644
--- a/src/jelu-ui/src/components/BookCard.vue
+++ b/src/jelu-ui/src/components/BookCard.vue
@@ -220,13 +220,13 @@ watch(checked, (newVal, oldVal) => {
         <span
           v-if="book.lastReadingEvent"
           :class="eventClass"
-          class="badge is-capitalized is-family-sans-serif"
+          class="badge"
         >{{ eventText }}</span>
         <div class="flex">
           <span
             v-if="book.book.series && book.book.series.length > 0"
             v-tooltip="book.book.series[0].name"
-            class="badge is-family-sans-serif mx-1"
+            class="badge mx-1"
           >
             #{{ book.book.series[0].numberInSeries }}
           </span>
diff --git a/src/jelu-ui/src/components/BookDetail.vue b/src/jelu-ui/src/components/BookDetail.vue
index 582a31d3..9b7214ac 100644
--- a/src/jelu-ui/src/components/BookDetail.vue
+++ b/src/jelu-ui/src/components/BookDetail.vue
@@ -388,7 +388,7 @@ getBook()
         class="flex items-center flex-wrap"
       >
         <button
-          class="btn btn-primary btn-outline is-light mr-2 p-2"
+          class="btn btn-primary btn-outline mr-2 p-2"
           @click="toggleEdit"
         >
           <span class="icon">
diff --git a/src/jelu-ui/src/components/BookList.vue b/src/jelu-ui/src/components/BookList.vue
index 2ccdb05a..0ead5ce0 100644
--- a/src/jelu-ui/src/components/BookList.vue
+++ b/src/jelu-ui/src/components/BookList.vue
@@ -396,7 +396,7 @@ try {
     <h2 class="text-3xl typewriter capitalize">
       {{ t('labels.library_empty') }}
     </h2>
-    <span class="icon is-large">
+    <span class="icon">
       <i class="mdi mdi-book-open-page-variant-outline mdi-48px" />
     </span>
   </div>
diff --git a/src/jelu-ui/src/components/EditAuthorModal.vue b/src/jelu-ui/src/components/EditAuthorModal.vue
index f58affda..a7b91b12 100644
--- a/src/jelu-ui/src/components/EditAuthorModal.vue
+++ b/src/jelu-ui/src/components/EditAuthorModal.vue
@@ -363,7 +363,7 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
           <o-field
             v-else
             :label="t('labels.choose_file')"
-            class="file is-primary has-name"
+            class="file"
           >
             <input
               type="file"
@@ -460,7 +460,7 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
             v-for="res in searchResult.pages"
             :key="res.id"
             v-tooltip="t('labels.click_to_import')"
-            class="card card-side box mb-2 shadow-lg shadow-base-300 hover:shadow-2xl hover:border-2 hover:border-accent"
+            class="card card-side mb-2 shadow-lg shadow-base-300 hover:shadow-2xl hover:border-2 hover:border-accent"
             @click="fillFormWithEntry(res)"
           >
             <figure
diff --git a/src/jelu-ui/src/components/EditBookModal.vue b/src/jelu-ui/src/components/EditBookModal.vue
index 6b227d89..1134ace3 100644
--- a/src/jelu-ui/src/components/EditBookModal.vue
+++ b/src/jelu-ui/src/components/EditBookModal.vue
@@ -708,7 +708,7 @@ function toggleRemoveImage() {
             v-else
             horizontal
             :label="t('labels.choose_file')"
-            class="file is-primary has-name"
+            class="file"
           >
             <input
               type="file"
@@ -726,7 +726,7 @@ function toggleRemoveImage() {
           </o-field>
         </div>
       </div>
-      <div class="column is-centered is-one-fifth flex flex-row justify-center pt-6">
+      <div class="flex flex-row justify-center pt-6">
         <button
           class="btn btn-primary"
           :class="{'btn-disabled' : progress}"
diff --git a/src/jelu-ui/src/components/Imports.vue b/src/jelu-ui/src/components/Imports.vue
index 097fb95d..9dd31054 100644
--- a/src/jelu-ui/src/components/Imports.vue
+++ b/src/jelu-ui/src/components/Imports.vue
@@ -177,7 +177,7 @@ watch(file, (newVal, oldVal) => {
         <o-field
           horizontal
           :label="t('csv_import.choose_file')"
-          class="file is-primary has-name"
+          class="file"
         >
           <input
             type="file"
diff --git a/src/jelu-ui/src/components/ProfilePage.vue b/src/jelu-ui/src/components/ProfilePage.vue
index f86b4c1f..abfcf12e 100644
--- a/src/jelu-ui/src/components/ProfilePage.vue
+++ b/src/jelu-ui/src/components/ProfilePage.vue
@@ -105,10 +105,10 @@ const shelves = computed(() => {
             <strong>{{ store.getters.getUsername }}</strong>
             <br>
             <span class="capitalize">{{ t('settings.role', 2) }}</span> :
-            <span class="badge badge-info tag is-info">USER</span> &nbsp;
+            <span class="badge badge-info tag">USER</span> &nbsp;
             <span
               v-if="store.getters.isAdmin"
-              class="badge badge-warning tag is-warning"
+              class="badge badge-warning tag"
             >ADMIN</span>
           </p>
           <div class="card-actions justify-end">
diff --git a/src/jelu-ui/src/components/QuotesDisplay.vue b/src/jelu-ui/src/components/QuotesDisplay.vue
index 43e25f93..b97c4758 100644
--- a/src/jelu-ui/src/components/QuotesDisplay.vue
+++ b/src/jelu-ui/src/components/QuotesDisplay.vue
@@ -49,7 +49,7 @@ catch (err) {
       :key="quote.content"
     >
       <div class="mb-8">
-        <p class="is-size-7">
+        <p>
           {{ quote.content }}
         </p>
         <br>
diff --git a/src/jelu-ui/src/components/ScanModal.vue b/src/jelu-ui/src/components/ScanModal.vue
index 35ec0fa8..4d08b849 100644
--- a/src/jelu-ui/src/components/ScanModal.vue
+++ b/src/jelu-ui/src/components/ScanModal.vue
@@ -33,15 +33,13 @@ const onDecode = (text: string) => {
 
 <template>
   <section class="edit-modal">
-    <div class="grid justify-center justify-items-center columns is-centered is-multiline">
+    <div class="grid justify-center justify-items-center">
       <div class="mb-2">
         <h1 class="text-2xl typewriter capitalize">
           {{ t('labels.import_book') }}
         </h1>
       </div>
-      <div
-        class="column is-centered is-full"
-      >
+      <div>
         <div class="field mb-2">
           <StreamBarcodeReader
             @decode="onDecode"
diff --git a/src/jelu-ui/src/components/SeriesBooks.vue b/src/jelu-ui/src/components/SeriesBooks.vue
index fe6790aa..9b2d2c5a 100644
--- a/src/jelu-ui/src/components/SeriesBooks.vue
+++ b/src/jelu-ui/src/components/SeriesBooks.vue
@@ -236,7 +236,7 @@ getBooks()
       :animated="true"
     />
   </div>
-  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly my-3">
+  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 my-3">
     <div
       v-for="book in convertedBooks"
       :key="book.book.id"
diff --git a/src/jelu-ui/src/components/TagBooks.vue b/src/jelu-ui/src/components/TagBooks.vue
index 887129b2..a5778000 100644
--- a/src/jelu-ui/src/components/TagBooks.vue
+++ b/src/jelu-ui/src/components/TagBooks.vue
@@ -236,7 +236,7 @@ getBooks()
       :animated="true"
     />
   </div>
-  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly my-3">
+  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 my-3">
     <div
       v-for="book in convertedBooks"
       :key="book.book.id"
diff --git a/src/jelu-ui/src/components/ToReadList.vue b/src/jelu-ui/src/components/ToReadList.vue
index 0167e23a..b3197587 100644
--- a/src/jelu-ui/src/components/ToReadList.vue
+++ b/src/jelu-ui/src/components/ToReadList.vue
@@ -260,7 +260,7 @@ getToRead()
   </div>
   <div
     v-if="books.length > 0"
-    class="is-flex is-flex-wrap-wrap is-justify-content-center grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3"
+    class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3"
   >
     <div
       v-for="book in books"
@@ -302,7 +302,7 @@ getToRead()
     <h2 class="text-3xl typewriter">
       {{ t('labels.nothing_to_read') }}
     </h2>
-    <span class="icon is-large">
+    <span class="icon">
       <i class="mdi mdi-book-open-page-variant-outline mdi-48px" />
     </span>
   </div>
diff --git a/src/jelu-ui/src/components/Welcome.vue b/src/jelu-ui/src/components/Welcome.vue
index 81883af1..cb86bb35 100644
--- a/src/jelu-ui/src/components/Welcome.vue
+++ b/src/jelu-ui/src/components/Welcome.vue
@@ -196,7 +196,7 @@ function toggleReadingEventModal(currentEvent: ReadingEvent, edit: boolean) {
       <h2 class="text-3xl typewriter">
         {{ t('home.not_reading') }}
       </h2>
-      <span class="icon is-large">
+      <span class="icon">
         <i class="mdi mdi-book-open-page-variant-outline mdi-48px" />
       </span>
     </div>
diff --git a/src/jelu-ui/src/router.ts b/src/jelu-ui/src/router.ts
index aacc4f70..539c7820 100644
--- a/src/jelu-ui/src/router.ts
+++ b/src/jelu-ui/src/router.ts
@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import store from './store'
 import AdminBaseVue from './components/AdminBase.vue'
-// import ProfilePageVue from './components/ProfilePage.vue'
-// import AdminAuthorsVue from './components/AdminAuthors.vue'
 
 const isLogged = () => {
     if (!store.getters.getLogged) {