From 36099b787b063de893e5cc552b8e89557d0ffd44 Mon Sep 17 00:00:00 2001
From: Alessandro Jean <alessandrojean@gmail.com>
Date: Wed, 2 Mar 2022 12:54:31 -0300
Subject: [PATCH] Release v0.2.44.

Rewrite the router navigation guard.

Convert Vue SFC to script setup syntax.

Convert Book Vue SFC to script setup syntax.

Convert Dialog Vue SFC to script setup syntax.

Add Prettier.

Lint the files with ESLint and Prettier.

Convert Prettier file to JavaScript.

Undo hiding the loading indicator.

Update dependencies.

Fix empty header in search dialog on mobile.

Fix dialogs wrong z-order in sm breakpoint.

Increase filter dialog height in mobile.

Add missing fade transitions and fix imports.

Show header anchors on focus too.

Bump the version to release.
---
 .eslintrc.js                                  |   19 +-
 .husky/pre-commit                             |    5 +
 .prettierrc.js                                |    5 +
 package.json                                  |   32 +-
 src/App.vue                                   |  155 +--
 src/components/Alert.vue                      |  183 ++-
 src/components/AppNavbar.vue                  |  315 +++--
 src/components/Avatar.vue                     |   84 +-
 src/components/BasicBarChart.vue              |  277 +++--
 src/components/BetaWarning.vue                |   64 +-
 src/components/BulletSteps.vue                |   68 +-
 src/components/ContentFooter.vue              |   37 +-
 src/components/CoverOption.vue                |  118 +-
 src/components/DashboardFooter.vue            |   78 +-
 src/components/DescriptionList.vue            |   24 +-
 src/components/GroupGrid.vue                  |  241 ++--
 src/components/HomeFooter.vue                 |   53 +-
 src/components/HomeHeader.vue                 |   62 +-
 src/components/LibraryHeader.vue              |  228 ++--
 src/components/LoadingIndicator.vue           |   68 +-
 src/components/LocaleSelector.vue             |   92 +-
 src/components/MobileNavbar.vue               |  276 ++---
 src/components/MonthlyBoughtsChart.vue        |  306 +++--
 src/components/MonthlyExpenseChart.vue        |  238 ++--
 src/components/PageHeader.vue                 |   53 +-
 src/components/Paginator.vue                  |  243 ++--
 src/components/SearchHistoryItem.vue          |  138 +--
 src/components/SearchItem.vue                 |  199 ++-
 src/components/SignInWithGoogleButton.vue     |   88 +-
 src/components/SimpleHeader.vue               |   31 +-
 src/components/StatCard.vue                   |  112 +-
 src/components/ThemeToggle.vue                |  141 +--
 src/components/Typewriter.vue                 |  152 ++-
 src/components/book/BookBreadcrumb.vue        |   90 +-
 src/components/book/BookCard.vue              |  245 ++--
 .../book/BookCardReadingActions.vue           |  101 +-
 src/components/book/BookCarousel.vue          |  310 +++--
 src/components/book/BookCover.vue             |  217 ++--
 src/components/book/BookCoverSelector.vue     |  296 ++---
 src/components/book/BookForm.vue              |  491 ++++----
 src/components/book/BookGrid.vue              |  251 ++--
 src/components/book/BookInformation.vue       |  423 +++----
 src/components/book/BookNavigator.vue         |  101 +-
 src/components/book/BookOrganization.vue      |   72 +-
 src/components/book/BookOwnerBadge.vue        |   56 +-
 src/components/book/BookProviderSearch.vue    |  219 ++--
 src/components/book/BookReading.vue           |  180 ++-
 src/components/book/BookSelector.vue          |  117 +-
 src/components/book/BookTable.vue             | 1077 +++++++++--------
 src/components/book/BookTabs.vue              |  483 ++++----
 src/components/dialogs/BookCoverDialog.vue    |   91 +-
 src/components/dialogs/BookCreateDialog.vue   |  930 +++++++-------
 src/components/dialogs/BookDeleteDialog.vue   |  143 +--
 src/components/dialogs/BookEditDialog.vue     |  326 +++--
 src/components/dialogs/DonationDialog.vue     |  102 +-
 .../dialogs/LibraryFiltersDialog.vue          |  455 ++++---
 src/components/dialogs/ReloadDialog.vue       |   59 +-
 src/components/dialogs/SearchDialog.vue       |  780 ++++++------
 src/components/dialogs/SettingsDialog.vue     |  706 ++++++-----
 src/components/dialogs/SheetChooserDialog.vue |  208 ++--
 src/components/fields/BaseField.vue           |   94 +-
 src/components/fields/DimensionField.vue      |  114 +-
 src/components/fields/MarkdownField.vue       |  160 +--
 src/components/fields/MonetaryField.vue       |  222 ++--
 src/components/fields/TagField.vue            |  205 ++--
 src/components/fields/TextField.vue           |  106 +-
 src/components/icons/AmazonIcon.vue           |   20 +-
 src/components/icons/GitHubIcon.vue           |    7 +-
 src/components/icons/GoogleIcon.vue           |   29 +-
 src/components/icons/LoadingSpinIcon.vue      |   15 +-
 src/components/icons/NewPopIcon.vue           |   33 +-
 src/components/icons/PaniniIcon.vue           |  127 +-
 src/components/icons/PicPayIcon.vue           |   10 +-
 src/components/icons/SkoobIcon.vue            |   11 +-
 src/components/transitions/FadeTransition.vue |   22 +-
 .../transitions/ScaleTransition.vue           |   22 +-
 src/composables/useAppInfo.js                 |    2 +-
 src/composables/useDarkMode.js                |   21 +-
 src/composables/useDebouncedRef.js            |    8 +-
 src/composables/useImageLazyLoader.js         |   12 +-
 src/composables/useImageLoader.js             |    2 +-
 src/composables/useIsbnSearch.js              |    6 +-
 src/composables/useMarkdown.js                |   25 +-
 src/composables/useMotionSafe.js              |   15 +-
 src/composables/useTailwindTheme.js           |    2 +-
 src/data/DataTable.js                         |   16 +-
 src/data/Query.js                             |    8 +-
 src/data/QueryBuilder.js                      |   69 +-
 src/i18n/index.js                             |   13 +-
 src/i18n/messages/en-US.js                    |   44 +-
 src/i18n/messages/pt-BR.js                    |   27 +-
 src/model/Book.js                             |  134 +-
 src/mutations/useBulkDeleteBookMutation.js    |   14 +-
 src/mutations/useBulkEditBookMutation.js      |   14 +-
 src/mutations/useCreateBookMutation.js        |    8 +-
 src/mutations/useDeleteBookMutation.js        |   10 +-
 src/mutations/useEditBookMutation.js          |   12 +-
 src/queries/useBookCollectionQuery.js         |    4 +-
 src/queries/useBookExistsQuery.js             |    4 +-
 src/queries/useBookQuery.js                   |    4 +-
 src/queries/useBookSearchQuery.js             |    9 +-
 src/queries/useBooksQuery.js                  |    9 +-
 src/queries/useCoverQuery.js                  |    4 +-
 src/queries/useGitHubReleaseQuery.js          |    9 +-
 src/queries/useGroupsQuery.js                 |    4 +-
 src/queries/useIsbnSearchQuery.js             |    4 +-
 src/queries/useLastAddedQuery.js              |    4 +-
 src/queries/useLatestReadingsQuery.js         |    4 +-
 src/queries/useNextReadsQuery.js              |    4 +-
 src/queries/usePublishersQuery.js             |    4 +-
 src/queries/useStatisticsQuery.js             |    6 +-
 src/queries/useStoresQuery.js                 |    4 +-
 src/queries/useTimeZoneQuery.js               |    4 +-
 src/router/index.js                           |   28 +-
 src/services/cover.js                         |   46 +-
 src/services/links.js                         |   24 +-
 src/services/lookup/Cbl.js                    |   16 +-
 src/services/lookup/GoogleBooks.js            |    4 +-
 src/services/lookup/Lookup.js                 |    6 +-
 src/services/lookup/OpenLibrary.js            |    6 +-
 src/services/lookup/index.js                  |    9 +-
 src/services/sheet/buildSheetUrl.js           |    6 +-
 src/services/sheet/bulkDeleteBooks.js         |   35 +-
 src/services/sheet/bulkUpdateBooks.js         |   23 +-
 src/services/sheet/countTotalResults.js       |    5 +-
 src/services/sheet/deleteBook.js              |   33 +-
 src/services/sheet/findSheetId.js             |   14 +-
 src/services/sheet/getBookByCode.js           |    6 +-
 src/services/sheet/getBookById.js             |    6 +-
 src/services/sheet/getBookNeighbors.js        |   19 +-
 src/services/sheet/getBooks.js                |   16 +-
 src/services/sheet/getBooksFromCollection.js  |    2 +-
 src/services/sheet/getBooksFromGroup.js       |    7 +-
 src/services/sheet/getColumnUniqueValues.js   |    6 +-
 src/services/sheet/getGroups.js               |    7 +-
 src/services/sheet/getLatestReadings.js       |    2 +-
 src/services/sheet/getNextReads.js            |   29 +-
 src/services/sheet/getPublishers.js           |    2 +-
 src/services/sheet/getSheetData.js            |   37 +-
 src/services/sheet/getStatistics.js           |   19 +-
 src/services/sheet/getStores.js               |    2 +-
 src/services/sheet/getTimeZone.js             |   20 +-
 src/services/sheet/insertBook.js              |   17 +-
 src/services/sheet/searchBooks.js             |  188 +--
 src/services/sheet/updateBook.js              |   15 +-
 src/stores/auth.js                            |   73 +-
 src/stores/collection.js                      |   12 +-
 src/stores/main.js                            |    6 +-
 src/stores/search.js                          |   12 +-
 src/stores/settings.js                        |   41 +-
 src/stores/sheet.js                           |   24 +-
 src/tests/book.test.js                        |    9 +-
 src/tests/cover.test.js                       |   27 +-
 src/tests/lookup.test.js                      |   20 +-
 src/tests/sheet.test.js                       |   42 +-
 src/util/date.js                              |    8 +-
 src/util/index.js                             |    2 +-
 src/util/isbn.js                              |   27 +-
 src/util/validators.js                        |   28 +-
 src/views/Error.vue                           |  132 +-
 src/views/Home.vue                            |  160 +--
 src/views/PageNotFound.vue                    |   53 +-
 src/views/SignIn.vue                          |  179 ++-
 src/views/about/Accessibility.vue             |   55 +-
 src/views/about/Index.vue                     |   61 +-
 src/views/about/Instructions.vue              |   79 +-
 src/views/about/PrivacyPolicy.vue             |   68 +-
 src/views/about/TermsOfUse.vue                |   59 +-
 src/views/dashboard/Home.vue                  |  271 ++---
 src/views/dashboard/Index.vue                 |  300 ++---
 src/views/dashboard/Stats.vue                 |  140 +--
 src/views/dashboard/library/Book.vue          |  318 +++--
 src/views/dashboard/library/Explorer.vue      |  911 +++++++-------
 src/views/dashboard/library/Index.vue         |   16 +-
 tailwind.config.js                            |   20 +-
 yarn.lock                                     |  216 ++--
 176 files changed, 8877 insertions(+), 9601 deletions(-)
 create mode 100755 .husky/pre-commit
 create mode 100644 .prettierrc.js

diff --git a/.eslintrc.js b/.eslintrc.js
index a2d82e34..4b340674 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,21 +1,28 @@
 module.exports = {
   root: true,
-  plugins: ['jest'],
+  plugins: ['jest', 'prettier'],
   env: {
     browser: true,
     node: true,
     'jest/globals': true
   },
-  extends: [
-    'plugin:vue/vue3-essential',
-    '@vue/standard'
-  ],
+  extends: ['plugin:vue/vue3-essential', 'prettier'],
+  parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@babel/eslint-parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    'prettier/prettier': [
+      'warn',
+      {
+        semi: false,
+        printWidth: 80,
+        singleQuote: true,
+        trailingComma: 'none'
+      }
+    ]
   }
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..660b8209
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
+npm run test
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 00000000..ef9ec008
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 80,
+  singleQuote: true,
+  trailingComma: 'never'
+}
diff --git a/package.json b/package.json
index 77f5fa08..2c955c45 100644
--- a/package.json
+++ b/package.json
@@ -1,25 +1,26 @@
 {
   "name": "toshokan",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview",
+    "dev": "vite",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
+    "prepare": "husky install",
+    "serve": "vite preview",
     "test": "jest ./src/tests",
     "test:watch": "jest --watch ./src/tests"
   },
   "dependencies": {
     "@headlessui/vue": "^1.5.0",
-    "@heroicons/vue": "^1.0.5",
+    "@heroicons/vue": "^1.0.6",
     "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.2",
     "@vuelidate/core": "^2.0.0-alpha.34",
     "@vuelidate/validators": "^2.0.0-alpha.26",
-    "apexcharts": "^3.33.1",
+    "apexcharts": "^3.33.2",
     "axios": "^0.26.0",
     "core-js": "^3.21.1",
     "dedent": "^0.7.0",
@@ -39,7 +40,7 @@
     "vue": "^3.2.31",
     "vue-i18n": "^9.1.9",
     "vue-query": "^1.19.1",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.0.13",
     "vue3-apexcharts": "^1.4.1",
     "vuedraggable": "^4.1.0"
   },
@@ -51,27 +52,30 @@
     "@types/gapi.client.drive": "^3.0.13",
     "@types/gapi.client.sheets": "^4.0.20201029",
     "@types/google.visualization": "^0.0.68",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^27.4.1",
     "@types/tailwindcss": "^3.0.9",
-    "@vitejs/plugin-vue": "^2.2.2",
+    "@vitejs/plugin-vue": "^2.2.4",
     "@vue/compiler-sfc": "^3.2.31",
-    "@vue/eslint-config-standard": "^6.1.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^27.5.1",
-    "eslint": "^8.9.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest": "^26.1.1",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^8.4.1",
+    "eslint-plugin-vue": "^8.5.0",
     "git-describe": "^4.1.0",
+    "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
+    "prettier": "^2.5.1",
     "source-map": "^0.7.3",
     "tailwindcss": "^3.0.23",
-    "vite": "^2.8.4",
+    "vite": "^2.8.6",
     "vite-plugin-pwa": "^0.11.13"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 595b3ef1..94b9e233 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,78 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from './stores/auth'
+import { useStore } from '@/stores/main'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
+import ReloadDialog from '@/components/dialogs/ReloadDialog.vue'
+
+const authStore = useAuthStore()
+const mainStore = useStore()
+const { t, locale } = useI18n({ useScope: 'global' })
+
+const authStarted = computed(() => authStore.started)
+const hasCriticalError = computed(() => mainStore.hasCriticalError)
+
+const route = useRoute()
+const jumpToMain = ref(null)
+const navigationHelpText = ref('')
+const appStarted = ref(false)
+
+function focusOnJumpLink() {
+  if (jumpToMain.value && appStarted.value) {
+    jumpToMain.value.focus()
+    appStarted.value = true
+  }
+}
+
+function changeNavigationHelpText(pageTitle) {
+  navigationHelpText.value = t('a11y.pageChanged', { pageTitle })
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    nextTick(() => {
+      setTimeout(() => {
+        changeNavigationHelpText(route.meta.title())
+        focusOnJumpLink()
+      }, 500)
+    })
+  }
+)
+
+watch(locale, (newLocale) => {
+  document.title = route.meta.title() + ' | ' + t('app.name')
+  document.documentElement.lang = newLocale
+  localStorage.setItem('locale', newLocale)
+})
+
+const showLoadingIndicator = computed(() => {
+  return !authStarted.value && !hasCriticalError.value
+})
+</script>
+
 <template>
-  <transition
-    leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-    enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-  >
+  <FadeTransition>
     <div
-      v-if="!authStarted && !hasCriticalError"
+      v-if="showLoadingIndicator"
       class="z-50 absolute w-full h-full flex flex-col justify-center items-center bg-opacity-90 bg-gray-100 dark:bg-gray-900"
     >
       <span aria-hidden="true">
-        <LoadingSpinIcon class="motion-safe:animate-spin h-10 w-10 mx-auto text-primary-500" aria-hidden="true" />
+        <LoadingSpinIcon
+          class="motion-safe:animate-spin h-10 w-10 mx-auto text-primary-500"
+          aria-hidden="true"
+        />
       </span>
       <p class="font-display font-medium sm:text-lg mt-6 dark:text-gray-200">
         {{ t('app.starting') }}
       </p>
     </div>
-  </transition>
+  </FadeTransition>
   <a href="#main-content" class="jump-to" ref="jumpToMain">
     {{ t('a11y.jumpToMain') }}
   </a>
@@ -26,85 +80,10 @@
     {{ navigationHelpText }}
   </p>
   <router-view v-slot="{ Component }">
-    <transition
-      mode="out-in"
-      enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100 "
-      leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
+    <FadeTransition>
       <component :is="Component" />
-    </transition>
+    </FadeTransition>
   </router-view>
 
   <ReloadDialog />
 </template>
-
-<script>
-import { computed, nextTick, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from './stores/auth'
-import { useStore } from '@/stores/main'
-
-import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
-import ReloadDialog from '@/components/dialogs/ReloadDialog.vue'
-
-export default {
-  components: {
-    LoadingSpinIcon,
-    ReloadDialog
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const mainStore = useStore()
-    const { t, locale } = useI18n({ useScope: 'global' })
-
-    const authStarted = computed(() => authStore.started)
-    const hasCriticalError = computed(() => mainStore.hasCriticalError)
-
-    const route = useRoute()
-    const jumpToMain = ref(null)
-    const navigationHelpText = ref('')
-    const appStarted = ref(false)
-
-    function focusOnJumpLink () {
-      if (jumpToMain.value && appStarted.value) {
-        jumpToMain.value.focus()
-        appStarted.value = true
-      }
-    }
-
-    function changeNavigationHelpText (pageTitle) {
-      navigationHelpText.value = t('a11y.pageChanged', { pageTitle })
-    }
-
-    watch(() => route.fullPath, () => {
-      nextTick(() => {
-        setTimeout(() => {
-          changeNavigationHelpText(route.meta.title())
-          focusOnJumpLink()
-        }, 500)
-      })
-    })
-
-    watch(locale, newLocale => {
-      document.title = route.meta.title() + ' | ' + t('app.name')
-      document.documentElement.lang = newLocale
-      localStorage.setItem('locale', newLocale)
-    })
-
-    return {
-      authStarted,
-      hasCriticalError,
-      jumpToMain,
-      navigationHelpText,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index 4201ee6f..3408085e 100644
--- a/src/components/Alert.vue
+++ b/src/components/Alert.vue
@@ -1,12 +1,71 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+
+import {
+  ExclamationIcon,
+  InformationCircleIcon,
+  XCircleIcon
+} from '@heroicons/vue/solid'
+
+import FadeTransition from './transitions/FadeTransition.vue'
+
+const props = defineProps({
+  show: Boolean,
+  title: String,
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => {
+      return ['info', 'error', 'warning'].indexOf(value) !== -1
+    }
+  }
+})
+
+const { type } = toRefs(props)
+
+const backgroundColor = computed(() => {
+  if (type.value === 'error') {
+    return 'bg-red-50'
+  } else if (type.value === 'info') {
+    return 'bg-blue-50'
+  } else {
+    return 'bg-amber-50'
+  }
+})
+
+const baseTextColor = computed(() => {
+  if (type.value === 'error') {
+    return 'text-red-700'
+  } else if (type.value === 'info') {
+    return 'text-blue-700'
+  } else {
+    return 'text-amber-900'
+  }
+})
+
+const titleTextColor = computed(() => {
+  if (type.value === 'error') {
+    return 'text-red-800'
+  } else if (type.value === 'info') {
+    return 'text-blue-800'
+  } else {
+    return 'text-amber-800'
+  }
+})
+
+const borderColor = computed(() => {
+  if (type.value === 'error') {
+    return 'border-red-500'
+  } else if (type.value === 'info') {
+    return 'border-blue-500'
+  } else {
+    return 'border-amber-400'
+  }
+})
+</script>
+
 <template>
-  <transition
-    leave-active-class="motion-safe:transition duration-100 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-    enter-active-class="motion-safe:transition duration-200 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-  >
+  <FadeTransition>
     <div
       v-if="show"
       role="alert"
@@ -19,14 +78,29 @@
       ]"
     >
       <div class="shrink-0">
-        <XCircleIcon v-if="type === 'error'" class="h-5 w-5 text-red-500 dark:text-red-400" aria-hidden="true" />
-        <InformationCircleIcon v-else-if="type === 'info'" class="h-5 w-5 text-blue-500 dark:text-blue-400" aria-hidden="true" />
-        <ExclamationIcon v-else class="h-5 w-5 text-amber-400 dark:text-amber-500" aria-hidden="true" />
+        <XCircleIcon
+          v-if="type === 'error'"
+          class="h-5 w-5 text-red-500 dark:text-red-400"
+          aria-hidden="true"
+        />
+        <InformationCircleIcon
+          v-else-if="type === 'info'"
+          class="h-5 w-5 text-blue-500 dark:text-blue-400"
+          aria-hidden="true"
+        />
+        <ExclamationIcon
+          v-else
+          class="h-5 w-5 text-amber-400 dark:text-amber-500"
+          aria-hidden="true"
+        />
       </div>
       <div class="space-y-2 dark:text-gray-200">
         <p
           v-if="title && title.length > 0"
-          :class="[titleTextColor, 'font-display font-medium dark:text-gray-100']"
+          :class="[
+            titleTextColor,
+            'font-display font-medium dark:text-gray-100'
+          ]"
         >
           {{ title }}
         </p>
@@ -39,92 +113,9 @@
         </div>
       </div>
     </div>
-  </transition>
+  </FadeTransition>
 </template>
 
-<script>
-import { computed, toRefs } from 'vue'
-
-import {
-  ExclamationIcon,
-  InformationCircleIcon,
-  XCircleIcon
-} from '@heroicons/vue/solid'
-
-export default {
-  name: 'Alert',
-
-  components: {
-    ExclamationIcon,
-    InformationCircleIcon,
-    XCircleIcon
-  },
-
-  props: {
-    show: Boolean,
-    title: String,
-    type: {
-      type: String,
-      required: true,
-      validator: value => {
-        return ['info', 'error', 'warning'].indexOf(value) !== -1
-      }
-    }
-  },
-
-  setup (props) {
-    const { type } = toRefs(props)
-
-    const backgroundColor = computed(() => {
-      if (type.value === 'error') {
-        return 'bg-red-50'
-      } else if (type.value === 'info') {
-        return 'bg-blue-50'
-      } else {
-        return 'bg-amber-50'
-      }
-    })
-
-    const baseTextColor = computed(() => {
-      if (type.value === 'error') {
-        return 'text-red-700'
-      } else if (type.value === 'info') {
-        return 'text-blue-700'
-      } else {
-        return 'text-amber-900'
-      }
-    })
-
-    const titleTextColor = computed(() => {
-      if (type.value === 'error') {
-        return 'text-red-800'
-      } else if (type.value === 'info') {
-        return 'text-blue-800'
-      } else {
-        return 'text-amber-800'
-      }
-    })
-
-    const borderColor = computed(() => {
-      if (type.value === 'error') {
-        return 'border-red-500'
-      } else if (type.value === 'info') {
-        return 'border-blue-500'
-      } else {
-        return 'border-amber-400'
-      }
-    })
-
-    return {
-      backgroundColor,
-      baseTextColor,
-      titleTextColor,
-      borderColor
-    }
-  }
-}
-</script>
-
 <style lang="postcss">
 .alert-actions > a,
 .alert-actions > button {
diff --git a/src/components/AppNavbar.vue b/src/components/AppNavbar.vue
index de76042e..aaaf16e8 100644
--- a/src/components/AppNavbar.vue
+++ b/src/components/AppNavbar.vue
@@ -1,3 +1,105 @@
+<script setup>
+import { computed, inject, onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+import { useSheetStore } from '@/stores/sheet'
+
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+
+import {
+  CogIcon,
+  ChevronDownIcon,
+  LibraryIcon,
+  LogoutIcon,
+  SearchIcon
+} from '@heroicons/vue/solid'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+
+const props = defineProps({ transparent: Boolean })
+
+const authStore = useAuthStore()
+const sheetStore = useSheetStore()
+
+const { t } = useI18n({ useScope: 'global' })
+
+const open = ref(false)
+const { transparent } = toRefs(props)
+
+const shared = computed(() => sheetStore.shared)
+const loading = computed(() => sheetStore.loading)
+
+const navigation = computed(() => [
+  {
+    name: 'DashboardHome',
+    title: t('dashboard.header.links.dashboard'),
+    exact: true
+  },
+  {
+    name: 'DashboardLibrary',
+    title: t('dashboard.header.links.library')
+  },
+  {
+    name: 'DashboardStats',
+    title: t('dashboard.header.links.statistics'),
+    hidden: shared.value || loading.value
+  }
+])
+const searchQuery = ref('')
+const searchNavbar = ref(null)
+
+const desktopNavigation = computed(() => {
+  return navigation.value.filter((navItem) => !navItem.mobileOnly)
+})
+
+const profileEmail = computed(() => authStore.profileEmail)
+const profileImageUrl = computed(() => authStore.profileImageUrl)
+const profileName = computed(() => authStore.profileName)
+
+async function signOut() {
+  await authStore.signOut()
+}
+
+const isMac = ref(
+  navigator.userAgentData
+    ? navigator.userAgentData.platform.toLowerCase().indexOf('mac') > -1
+    : navigator.platform.toLowerCase().indexOf('mac') > -1
+)
+
+const showSearchDialog = inject('showSearchDialog')
+
+const currentScrollPosition = ref(0)
+const lastScrollPosition = ref(0)
+const show = ref(true)
+
+function handleScroll() {
+  currentScrollPosition.value = document.documentElement.scrollTop
+
+  if (currentScrollPosition.value < 0) {
+    return
+  }
+
+  if (Math.abs(currentScrollPosition.value - lastScrollPosition.value) < 60) {
+    return
+  }
+
+  show.value = currentScrollPosition.value < lastScrollPosition.value
+  lastScrollPosition.value = currentScrollPosition.value
+}
+
+const isOnTop = computed(() => {
+  return transparent.value && currentScrollPosition.value <= 30
+})
+
+onMounted(() => window.addEventListener('scroll', handleScroll))
+onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+
+const showSettingsDialog = inject('showSettingsDialog')
+</script>
+
 <template>
   <nav
     :class="[
@@ -26,15 +128,25 @@
               />
             </span>
             <span class="sr-only">{{ t('dashboard.header.links.start') }}</span>
-            <span class="text-gray-200 group-hover:text-gray-100 group-focus-visible:text-gray-100 font-display font-semibold text-xl ml-3 sm:ml-0 md:ml-3 md:hidden lg:block" aria-hidden="true">
+            <span
+              class="text-gray-200 group-hover:text-gray-100 group-focus-visible:text-gray-100 font-display font-semibold text-xl ml-3 sm:ml-0 md:ml-3 md:hidden lg:block"
+              aria-hidden="true"
+            >
               {{ t('app.name') }}
             </span>
-            <sup class="text-gray-400 group-hover:text-gray-300 group-focus-visible:text-gray-300 font-semibold text-[0.6rem] align-super ml-0.5">
+            <sup
+              class="text-gray-400 group-hover:text-gray-300 group-focus-visible:text-gray-300 font-semibold text-[0.6rem] align-super ml-0.5"
+            >
               BETA
             </sup>
           </router-link>
 
-          <div class="hidden md:block md:ml-2 h-fit" role="navigation" aria-label="Menu principal" id="main-menu-desktop">
+          <div
+            class="hidden md:block md:ml-2 h-fit"
+            role="navigation"
+            aria-label="Menu principal"
+            id="main-menu-desktop"
+          >
             <ul class="flex space-x-2">
               <template v-for="item in desktopNavigation" :key="item.name">
                 <li
@@ -57,7 +169,9 @@
           </div>
         </div>
 
-        <div class="absolute inset-y-0 right-0 flex items-center sm:pr-2 md:static md:inset-auto md:ml-6 md:pr-0">
+        <div
+          class="absolute inset-y-0 right-0 flex items-center sm:pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
+        >
           <!-- Search link -->
           <button
             v-if="!loading"
@@ -83,10 +197,17 @@
               <span class="text-sm w-56 text-left">
                 {{ t('dashboard.header.search.placeholder') }}
               </span>
-              <span aria-hidden="true" class="ctrl-k text-gray-300 group-hover:text-gray-200 group-focus-visible:text-gray-200 text-xs leading-5 px-1.5 border border-gray-500 group-hover:border-gray-400 group-focus-visible:border-gray-400 bg-gray-700 group-hover:bg-gray-700 group-focus-visible:bg-gray-700 rounded-md">
+              <span
+                aria-hidden="true"
+                class="ctrl-k text-gray-300 group-hover:text-gray-200 group-focus-visible:text-gray-200 text-xs leading-5 px-1.5 border border-gray-500 group-hover:border-gray-400 group-focus-visible:border-gray-400 bg-gray-700 group-hover:bg-gray-700 group-focus-visible:bg-gray-700 rounded-md"
+              >
                 <kbd class="font-sans">
-                  <abbr title="Control" class="no-underline" v-if="!isMac">{{ t('dashboard.header.search.ctrl') }}&nbsp;</abbr>
-                  <abbr title="Command" class="no-underline" v-else>⌘&nbsp;</abbr>
+                  <abbr title="Control" class="no-underline" v-if="!isMac"
+                    >{{ t('dashboard.header.search.ctrl') }}&nbsp;</abbr
+                  >
+                  <abbr title="Command" class="no-underline" v-else
+                    >⌘&nbsp;</abbr
+                  >
                 </kbd>
                 <kbd class="font-sans">K</kbd>
               </span>
@@ -96,10 +217,18 @@
           <ThemeToggle class="ml-1" />
 
           <!-- Profile dropdown -->
-          <Menu as="div" class="ml-3 md:relative hidden sm:inline-block" v-slot="{ open }">
+          <Menu
+            as="div"
+            class="ml-3 md:relative hidden sm:inline-block"
+            v-slot="{ open }"
+          >
             <div>
-              <MenuButton class="max-w-xs flex items-center text-sm focus:outline-none group">
-                <span class="sr-only">{{ t('dashboard.header.menu.open') }}</span>
+              <MenuButton
+                class="max-w-xs flex items-center text-sm focus:outline-none group"
+              >
+                <span class="sr-only">{{
+                  t('dashboard.header.menu.open')
+                }}</span>
                 <div
                   class="w-8 h-8 rounded-full bg-cover shadow-avatar transition-shadow motion-reduce:transition-none group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-focus-visible:ring-primary-500 group-focus-visible:ring-offset-gray-700"
                   :style="{ backgroundImage: `url('${profileImageUrl}')` }"
@@ -115,19 +244,26 @@
               </MenuButton>
             </div>
             <ScaleTransition>
-              <MenuItems as="ul" class="fixed md:absolute z-40 left-8 md:left-auto right-8 md:right-0 bottom-8 md:bottom-auto md:w-48 mt-2 py-1 origin-bottom md:origin-top-right bg-white dark:bg-gray-700 md:dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              <MenuItems
+                as="ul"
+                class="fixed md:absolute z-40 left-8 md:left-auto right-8 md:right-0 bottom-8 md:bottom-auto md:w-48 mt-2 py-1 origin-bottom md:origin-top-right bg-white dark:bg-gray-700 md:dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              >
                 <div class="pb-1">
                   <MenuItem v-slot="{ active }">
                     <button
                       type="button"
                       :class="[
-                        active ? 'bg-gray-100 dark:bg-gray-600 md:dark:bg-gray-600/50' : '',
+                        active
+                          ? 'bg-gray-100 dark:bg-gray-600 md:dark:bg-gray-600/50'
+                          : '',
                         'group flex items-center w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:md:hover:bg-gray-600/50 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-700'
                       ]"
                       @click="showSettingsDialog"
                     >
                       <span aria-hidden="true">
-                        <CogIcon class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300" />
+                        <CogIcon
+                          class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
+                        />
                       </span>
                       {{ t('dashboard.header.menu.settings') }}
                     </button>
@@ -144,7 +280,9 @@
                       @click.stop="signOut"
                     >
                       <span aria-hidden="true">
-                        <LogoutIcon class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500" />
+                        <LogoutIcon
+                          class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500"
+                        />
                       </span>
                       {{ t('dashboard.header.menu.signOut') }}
                     </button>
@@ -159,155 +297,6 @@
   </nav>
 </template>
 
-<script>
-import { computed, inject, onMounted, onUnmounted, ref, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems
-} from '@headlessui/vue'
-
-import {
-  CogIcon,
-  ChevronDownIcon,
-  LibraryIcon,
-  LogoutIcon,
-  SearchIcon
-} from '@heroicons/vue/solid'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
-import ThemeToggle from '@/components/ThemeToggle.vue'
-
-export default {
-  name: 'AppNavbar',
-
-  components: {
-    CogIcon,
-    ChevronDownIcon,
-    FadeTransition,
-    LibraryIcon,
-    LogoutIcon,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    ScaleTransition,
-    SearchIcon,
-    ThemeToggle
-  },
-
-  props: {
-    transparent: Boolean
-  },
-
-  setup (props) {
-    const authStore = useAuthStore()
-    const sheetStore = useSheetStore()
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    const open = ref(false)
-    const { transparent } = toRefs(props)
-
-    const shared = computed(() => sheetStore.shared)
-    const loading = computed(() => sheetStore.loading)
-
-    const navigation = computed(() => [
-      {
-        name: 'DashboardHome',
-        title: t('dashboard.header.links.dashboard'),
-        exact: true
-      },
-      {
-        name: 'DashboardLibrary',
-        title: t('dashboard.header.links.library')
-      },
-      {
-        name: 'DashboardStats',
-        title: t('dashboard.header.links.statistics'),
-        hidden: shared.value || loading.value
-      }
-    ])
-    const searchQuery = ref('')
-    const searchNavbar = ref(null)
-
-    const desktopNavigation = computed(() => {
-      return navigation.value.filter(navItem => !navItem.mobileOnly)
-    })
-
-    const profileEmail = computed(() => authStore.profileEmail)
-    const profileImageUrl = computed(() => authStore.profileImageUrl)
-    const profileName = computed(() => authStore.profileName)
-
-    async function signOut () {
-      await authStore.signOut()
-    }
-
-    const isMac = ref(
-      navigator.userAgentData
-        ? navigator.userAgentData.platform.toLowerCase().indexOf('mac') > -1
-        : navigator.platform.toLowerCase().indexOf('mac') > -1
-    )
-
-    const showSearchDialog = inject('showSearchDialog')
-
-    const currentScrollPosition = ref(0)
-    const lastScrollPosition = ref(0)
-    const show = ref(true)
-
-    function handleScroll () {
-      currentScrollPosition.value = document.documentElement.scrollTop
-
-      if (currentScrollPosition.value < 0) {
-        return
-      }
-
-      if (Math.abs(currentScrollPosition.value - lastScrollPosition.value) < 60) {
-        return
-      }
-
-      show.value = currentScrollPosition.value < lastScrollPosition.value
-      lastScrollPosition.value = currentScrollPosition.value
-    }
-
-    const isOnTop = computed(() => {
-      return transparent.value && currentScrollPosition.value <= 30
-    })
-
-    onMounted(() => window.addEventListener('scroll', handleScroll))
-    onUnmounted(() => window.removeEventListener('scroll', handleScroll))
-
-    const showSettingsDialog = inject('showSettingsDialog')
-
-    return {
-      open,
-      navigation,
-      desktopNavigation,
-      profileEmail,
-      profileImageUrl,
-      profileName,
-      isMac,
-      searchNavbar,
-      searchQuery,
-      loading,
-      signOut,
-      showSearchDialog,
-      isOnTop,
-      show,
-      showSettingsDialog,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .app-navbar {
   @apply fixed inset-x-0
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index 07c94340..6542f086 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -1,26 +1,36 @@
+<script setup>
+import { onMounted, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useImageLoader from '@/composables/useImageLoader'
+
+import { UserGroupIcon, UserIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  dark: Boolean,
+  pictureUrl: String,
+  shared: Boolean,
+  small: Boolean
+})
+
+const { pictureUrl } = toRefs(props)
+
+const { imageLoading, imageHasError, loadImage } = useImageLoader(pictureUrl)
+
+onMounted(() => loadImage())
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
-  <div
-    :class="[
-      'avatar',
-      small ? 'is-small' : '',
-      dark ? 'is-dark' : ''
-    ]"
-  >
+  <div :class="['avatar', small ? 'is-small' : '', dark ? 'is-dark' : '']">
     <div
       v-if="!pictureUrl || imageHasError || imageLoading"
-      :class="[
-        'empty-avatar',
-        imageLoading ? 'motion-safe:animate-pulse' : ''
-      ]"
+      :class="['empty-avatar', imageLoading ? 'motion-safe:animate-pulse' : '']"
     >
       <UserIcon class="user-icon" />
     </div>
-    <img
-      v-else
-      class="avatar-img"
-      alt=""
-      :src="pictureUrl"
-    >
+    <img v-else class="avatar-img" alt="" :src="pictureUrl" />
     <div
       v-if="shared"
       class="shared-badge"
@@ -36,46 +46,6 @@
   </div>
 </template>
 
-<script>
-import { onMounted, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { UserGroupIcon, UserIcon } from '@heroicons/vue/solid'
-
-import useImageLoader from '@/composables/useImageLoader'
-
-export default {
-  components: { UserGroupIcon, UserIcon },
-
-  props: {
-    dark: Boolean,
-    pictureUrl: String,
-    shared: Boolean,
-    small: Boolean
-  },
-
-  setup (props) {
-    const { pictureUrl } = toRefs(props)
-
-    const {
-      imageLoading,
-      imageHasError,
-      loadImage
-    } = useImageLoader(pictureUrl)
-
-    onMounted(() => loadImage())
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      imageLoading,
-      imageHasError,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .avatar {
   @apply w-12 h-12 rounded-full relative shrink-0
diff --git a/src/components/BasicBarChart.vue b/src/components/BasicBarChart.vue
index 401d8852..d875e811 100644
--- a/src/components/BasicBarChart.vue
+++ b/src/components/BasicBarChart.vue
@@ -1,37 +1,4 @@
-<template>
-  <section class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2">
-    <div v-if="loading" class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"></div>
-    <h2 v-else class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100">
-      {{ title }}
-    </h2>
-    <div class="aspect-w-3 aspect-h-4 sm:-mx-3" role="img">
-      <transition
-        mode="out-in"
-        enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100 "
-        leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div v-if="loading" class="flex items-center justify-center">
-          <ChartBarIcon class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600" aria-hidden="true" />
-        </div>
-        <div v-else>
-          <ApexChart
-            width="100%"
-            height="100%"
-            type="bar"
-            :options="plot.options"
-            :series="plot.series"
-          />
-        </div>
-      </transition>
-    </div>
-  </section>
-</template>
-
-<script>
+<script setup>
 import { computed, defineAsyncComponent, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -39,6 +6,9 @@ import useDarkMode from '@/composables/useDarkMode'
 import useTailwindTheme from '@/composables/useTailwindTheme'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
+const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'))
+
+import FadeTransition from './transitions/FadeTransition.vue'
 
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
@@ -48,117 +18,144 @@ const apexLocales = {
   'pt-BR': apexPtBr
 }
 
-export default {
-  components: {
-    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
-    ChartBarIcon
-  },
-
-  props: {
-    loading: Boolean,
-    series: Array,
-    seriesName: String,
-    title: String
-  },
+const props = defineProps({
+  loading: Boolean,
+  series: Array,
+  seriesName: String,
+  title: String
+})
 
-  setup (props) {
-    const { locale } = useI18n({ useScope: 'global' })
+const { locale } = useI18n({ useScope: 'global' })
 
-    const { darkMode } = useDarkMode()
-    const { theme } = useTailwindTheme()
+const { darkMode } = useDarkMode()
+const { theme } = useTailwindTheme()
 
-    const localeStr = computed(() => {
-      return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
-    })
+const localeStr = computed(() => {
+  return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
+})
 
-    const { series, seriesName } = toRefs(props)
+const { series, seriesName } = toRefs(props)
 
-    const plot = computed(() => ({
-      options: {
-        chart: {
-          animations: { enabled: false },
-          fontFamily: theme.fontFamily.sans.join(', '),
-          locales: [apexLocales[locale.value]],
-          defaultLocale: localeStr.value,
-          selection: { enabled: false },
-          toolbar: { show: false },
-          zoom: { enabled: false }
-        },
-        colors: [theme.colors.primary[500]],
-        fill: { opacity: 1.0 },
-        grid: {
-          borderColor: darkMode.value
-            ? theme.colors.slate[600]
-            : theme.colors.slate[200],
-          xaxis: { lines: { show: true } },
-          yaxis: { lines: { show: false } }
-        },
-        tooltip: {
-          theme: darkMode.value ? 'dark' : 'light',
-          y: {
-            formatter: val => val.toFixed(0)
-          }
-        },
-        xaxis: {
-          categories: series.value.map(s => s.name),
-          labels: {
-            formatter: val => val.toFixed(0),
-            hideOverlappingLabels: false,
-            showDuplicates: true,
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          }
-        },
-        yaxis: {
-          labels: {
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          }
-        },
-        legend: {
-          labels: {
-            colors: darkMode.value
-              ? theme.colors.slate[300]
-              : theme.colors.slate[600],
-            useSeriesColors: false
-          },
-          onItemClick: {
-            toggleDataSeries: false
-          }
-        },
-        dataLabels: {
-          enabled: false
-        },
-        stroke: {
-          show: true,
-          colors: ['transparent'],
-          width: 6
-        },
-        plotOptions: {
-          bar: {
-            horizontal: true,
-            borderRadius: 5,
-            endingShape: 'rounded',
-            dataLabels: {
-              position: 'top',
-              hideOverflowingLabels: false
-            }
-          }
+const plot = computed(() => ({
+  options: {
+    chart: {
+      animations: { enabled: false },
+      fontFamily: theme.fontFamily.sans.join(', '),
+      locales: [apexLocales[locale.value]],
+      defaultLocale: localeStr.value,
+      selection: { enabled: false },
+      toolbar: { show: false },
+      zoom: { enabled: false }
+    },
+    colors: [theme.colors.primary[500]],
+    fill: { opacity: 1.0 },
+    grid: {
+      borderColor: darkMode.value
+        ? theme.colors.slate[600]
+        : theme.colors.slate[200],
+      xaxis: { lines: { show: true } },
+      yaxis: { lines: { show: false } }
+    },
+    tooltip: {
+      theme: darkMode.value ? 'dark' : 'light',
+      y: {
+        formatter: (val) => val.toFixed(0)
+      }
+    },
+    xaxis: {
+      categories: series.value.map((s) => s.name),
+      labels: {
+        formatter: (val) => val.toFixed(0),
+        hideOverlappingLabels: false,
+        showDuplicates: true,
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
         }
+      }
+    },
+    legend: {
+      labels: {
+        colors: darkMode.value
+          ? theme.colors.slate[300]
+          : theme.colors.slate[600],
+        useSeriesColors: false
       },
-      series: [{
-        name: seriesName.value,
-        data: series.value.map(s => s.count)
-      }]
-    }))
-
-    return { plot }
-  }
-}
+      onItemClick: {
+        toggleDataSeries: false
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      show: true,
+      colors: ['transparent'],
+      width: 6
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        borderRadius: 5,
+        endingShape: 'rounded',
+        dataLabels: {
+          position: 'top',
+          hideOverflowingLabels: false
+        }
+      }
+    }
+  },
+  series: [
+    {
+      name: seriesName.value,
+      data: series.value.map((s) => s.count)
+    }
+  ]
+}))
 </script>
+
+<template>
+  <section
+    class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2"
+  >
+    <div
+      v-if="loading"
+      class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"
+    ></div>
+    <h2
+      v-else
+      class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100"
+    >
+      {{ title }}
+    </h2>
+    <div class="aspect-w-3 aspect-h-4 sm:-mx-3" role="img">
+      <FadeTransition>
+        <div v-if="loading" class="flex items-center justify-center">
+          <ChartBarIcon
+            class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600"
+            aria-hidden="true"
+          />
+        </div>
+        <div v-else>
+          <ApexChart
+            width="100%"
+            height="100%"
+            type="bar"
+            :options="plot.options"
+            :series="plot.series"
+          />
+        </div>
+      </FadeTransition>
+    </div>
+  </section>
+</template>
diff --git a/src/components/BetaWarning.vue b/src/components/BetaWarning.vue
index 99c26ed2..fc987b37 100644
--- a/src/components/BetaWarning.vue
+++ b/src/components/BetaWarning.vue
@@ -1,3 +1,23 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { SpeakerphoneIcon, XIcon } from '@heroicons/vue/outline'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const LOCAL_STORAGE_KEY = 'hide_beta_warning'
+
+const hideBetaWarning = ref(localStorage.getItem(LOCAL_STORAGE_KEY) !== null)
+
+function handleDismiss() {
+  hideBetaWarning.value = true
+  localStorage.setItem(LOCAL_STORAGE_KEY, 'true')
+}
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <FadeTransition>
     <div
@@ -5,7 +25,9 @@
       class="hidden md:block py-4 fixed bottom-0 inset-x-0 z-20"
     >
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="bg-primary-600 p-2.5 rounded-md shadow flex items-center justify-between flex-wrap">
+        <div
+          class="bg-primary-600 p-2.5 rounded-md shadow flex items-center justify-between flex-wrap"
+        >
           <div class="w-0 flex-1 flex items-center">
             <span class="flex p-2 rounded-lg bg-primary-800">
               <SpeakerphoneIcon class="h-6 w-6 text-white" aria-hidden="true" />
@@ -34,43 +56,3 @@
     </div>
   </FadeTransition>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { SpeakerphoneIcon, XIcon } from '@heroicons/vue/outline'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-
-export default {
-  components: {
-    FadeTransition,
-    SpeakerphoneIcon,
-    XIcon
-  },
-
-  setup () {
-    const hideBetaWarning = ref(true)
-
-    function handleDismiss () {
-      hideBetaWarning.value = true
-      window.localStorage.setItem('hide_beta_warning', 'true')
-    }
-
-    onMounted(() => {
-      const hideFromStorage = window.localStorage.getItem('hide_beta_warning')
-
-      hideBetaWarning.value = hideFromStorage !== null
-    })
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      hideBetaWarning,
-      handleDismiss,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/BulletSteps.vue b/src/components/BulletSteps.vue
index cbd18b75..96d10aa9 100644
--- a/src/components/BulletSteps.vue
+++ b/src/components/BulletSteps.vue
@@ -1,18 +1,44 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true
+  },
+  steps: {
+    type: Array,
+    required: true
+  }
+})
+
+const { t } = useI18n({ useScope: 'global' })
+const { modelValue: step, steps } = toRefs(props)
+
+const stepText = computed(() => {
+  const currentStep = step.value
+  const totalSteps = steps.value.length
+
+  return t('dashboard.newBook.step', [currentStep, totalSteps])
+})
+</script>
+
 <template>
   <div
     class="flex items-center space-x-3"
     role="progressbar"
     aria-valuemin="0"
     aria-valuemax="100"
-    :aria-valuenow="Math.ceil((modelValue - 1) / steps.length * 100)"
+    :aria-valuenow="Math.ceil(((modelValue - 1) / steps.length) * 100)"
     :aria-valuetext="`${stepText}: ${steps[modelValue - 1]}`"
   >
     <span
-      v-for="(step, i) in steps"
+      v-for="(_, i) in steps"
       :key="i"
       :class="[
         'ring-4 w-2.5 h-2.5 rounded-lg',
-        modelValue < i + 1 ? 'bg-primary-400': '',
+        modelValue < i + 1 ? 'bg-primary-400' : '',
         modelValue > i + 1 ? 'bg-primary-100' : '',
         modelValue === i + 1
           ? 'bg-white ring-primary-400'
@@ -20,40 +46,6 @@
       ]"
       aria-hidden="true"
     />
-    <span class="sr-only">
-      {{ stepText }}: {{ steps[modelValue - 1] }}
-    </span>
+    <span class="sr-only"> {{ stepText }}: {{ steps[modelValue - 1] }} </span>
   </div>
 </template>
-
-<script>
-import { computed, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-export default {
-  props: {
-    modelValue: {
-      type: Number,
-      required: true
-    },
-    steps: {
-      type: Array,
-      required: true
-    }
-  },
-
-  setup (props) {
-    const { t } = useI18n({ useScope: 'global' })
-    const { modelValue: step, steps } = toRefs(props)
-
-    const stepText = computed(() => {
-      const currentStep = step.value
-      const totalSteps = steps.value.length
-
-      return t('dashboard.newBook.step', [currentStep, totalSteps])
-    })
-
-    return { stepText }
-  }
-}
-</script>
diff --git a/src/components/ContentFooter.vue b/src/components/ContentFooter.vue
index 47b3c045..e2cddf18 100644
--- a/src/components/ContentFooter.vue
+++ b/src/components/ContentFooter.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import useAppInfo from '@/composables/useAppInfo'
+
+defineProps({
+  date: {
+    type: String,
+    required: true
+  }
+})
+
+const { appVersion } = useAppInfo()
+const { t, d } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <footer class="content-footer">
     <p>{{ t('footer.version', { version: appVersion }) }}</p>
@@ -5,27 +21,6 @@
   </footer>
 </template>
 
-<script>
-import useAppInfo from '@/composables/useAppInfo'
-import { useI18n } from 'vue-i18n'
-
-export default {
-  props: {
-    date: {
-      type: String,
-      required: true
-    }
-  },
-
-  setup () {
-    const { appVersion } = useAppInfo()
-    const { t, d } = useI18n({ useScope: 'global' })
-
-    return { appVersion, t, d }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .content-footer {
   @apply space-y-2 sm:space-y-0 text-center sm:text-left sm:flex sm:justify-between text-sm text-gray-500 dark:text-gray-400 border-t border-gray-300 dark:border-gray-600 pt-3 mt-10;
diff --git a/src/components/CoverOption.vue b/src/components/CoverOption.vue
index 8adb3740..e111df2f 100644
--- a/src/components/CoverOption.vue
+++ b/src/components/CoverOption.vue
@@ -1,19 +1,50 @@
+<script setup>
+import { computed, onMounted, toRefs, watch } from 'vue'
+
+import useImageLoader from '@/composables/useImageLoader'
+
+import { CheckIcon, PhotographIcon } from '@heroicons/vue/solid'
+
+import FadeTransition from './transitions/FadeTransition.vue'
+
+const props = defineProps({
+  active: Boolean,
+  checked: Boolean,
+  coverUrl: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['error'])
+
+const { coverUrl } = toRefs(props)
+
+const thumbnailUrl = computed(() => {
+  return coverUrl.value ? coverUrl.value.replace('_SL700_', '_SL300_') : ''
+})
+
+const { imageHasError, imageLoading, loadImage } = useImageLoader(thumbnailUrl)
+
+onMounted(loadImage)
+
+watch(imageHasError, (hasError) => {
+  if (hasError) {
+    emit('error')
+  }
+})
+</script>
+
 <template>
   <div
     :class="[
-      active || checked ? 'ring-2 ring-offset-2 ring-primary-600 dark:ring-primary-500 dark:ring-offset-gray-700' : '',
+      active || checked
+        ? 'ring-2 ring-offset-2 ring-primary-600 dark:ring-primary-500 dark:ring-offset-gray-700'
+        : '',
       'relative shadow bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden aspect-w-2 aspect-h-3 cursor-pointer motion-safe:transition-shadow'
     ]"
   >
-    <transition
-      mode="out-in"
-      leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-      enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-    >
+    <FadeTransition>
       <div
         v-if="imageLoading || imageHasError"
         class="w-full h-full flex justify-center items-center"
@@ -26,8 +57,13 @@
           aria-hidden="true"
         />
       </div>
-      <img v-else class="object-cover w-full h-full" :src="thumbnailUrl" alt="">
-    </transition>
+      <img
+        v-else
+        class="object-cover w-full h-full"
+        :src="thumbnailUrl"
+        alt=""
+      />
+    </FadeTransition>
     <div
       v-if="checked"
       class="bg-gray-800 bg-opacity-40 absolute inset-0 p-2.5 flex items-start justify-start flex-col"
@@ -38,61 +74,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { computed, onMounted, toRefs, watch } from 'vue'
-
-import useImageLoader from '@/composables/useImageLoader'
-
-import { CheckIcon, PhotographIcon } from '@heroicons/vue/solid'
-
-export default {
-  name: 'CoverOption',
-
-  components: {
-    CheckIcon,
-    PhotographIcon
-  },
-
-  props: {
-    active: Boolean,
-    checked: Boolean,
-    coverUrl: {
-      type: String,
-      required: true
-    }
-  },
-
-  emits: ['error'],
-
-  setup (props, context) {
-    const { coverUrl } = toRefs(props)
-
-    const thumbnailUrl = computed(() => {
-      return coverUrl.value
-        ? coverUrl.value.replace('_SL700_', '_SL300_')
-        : ''
-    })
-
-    const {
-      imageHasError,
-      imageLoading,
-      loadImage
-    } = useImageLoader(thumbnailUrl)
-
-    onMounted(loadImage)
-
-    watch(imageHasError, hasError => {
-      if (hasError) {
-        context.emit('error')
-      }
-    })
-
-    return {
-      imageHasError,
-      imageLoading,
-      thumbnailUrl
-    }
-  }
-}
-</script>
diff --git a/src/components/DashboardFooter.vue b/src/components/DashboardFooter.vue
index 9ab2d313..e58a6fc3 100644
--- a/src/components/DashboardFooter.vue
+++ b/src/components/DashboardFooter.vue
@@ -1,6 +1,38 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useAppInfo from '@/composables/useAppInfo'
+
+import {
+  CurrencyDollarIcon,
+  QuestionMarkCircleIcon
+} from '@heroicons/vue/outline'
+
+import DonationDialog from '@/components/dialogs/DonationDialog.vue'
+import GitHubIcon from '@/components/icons/GitHubIcon.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+
+const { appVersion } = useAppInfo()
+
+const donateDialogOpen = ref(false)
+
+const githubLink = ref('https://github.com/alessandrojean/toshokan')
+
+const releaseLink = computed(() => {
+  return githubLink.value + '/releases/tag/v' + appVersion.value
+})
+</script>
+
 <template>
-  <footer class="hidden sm:block bg-white dark:bg-gray-900 shadow border-t border-gray-200 dark:border-gray-700 py-4" role="contentinfo">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center flex items-center justify-between">
+  <footer
+    class="hidden sm:block bg-white dark:bg-gray-900 shadow border-t border-gray-200 dark:border-gray-700 py-4"
+    role="contentinfo"
+  >
+    <div
+      class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center flex items-center justify-between"
+    >
       <p class="text-sm text-gray-500 dark:text-gray-300">
         {{ t('footer.copyright', { year: new Date().getFullYear() }) }}
       </p>
@@ -59,45 +91,3 @@
     <DonationDialog v-model="donateDialogOpen" />
   </footer>
 </template>
-
-<script>
-import { useI18n } from 'vue-i18n'
-
-import { CurrencyDollarIcon, QuestionMarkCircleIcon } from '@heroicons/vue/outline'
-
-import DonationDialog from '@/components/dialogs/DonationDialog.vue'
-import GitHubIcon from '@/components/icons/GitHubIcon.vue'
-
-import useAppInfo from '@/composables/useAppInfo'
-import { computed, ref } from 'vue-demi'
-
-export default {
-  components: {
-    CurrencyDollarIcon,
-    DonationDialog,
-    GitHubIcon,
-    QuestionMarkCircleIcon
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { appVersion } = useAppInfo()
-
-    const donateDialogOpen = ref(false)
-
-    const githubLink = ref('https://github.com/alessandrojean/toshokan')
-    const releaseLink = computed(() => {
-      return githubLink.value + '/releases/tag/v' + appVersion.value
-    })
-
-    return {
-      t,
-      appVersion,
-      donateDialogOpen,
-      githubLink,
-      releaseLink
-    }
-  }
-}
-</script>
diff --git a/src/components/DescriptionList.vue b/src/components/DescriptionList.vue
index e86aa684..c0467605 100644
--- a/src/components/DescriptionList.vue
+++ b/src/components/DescriptionList.vue
@@ -1,3 +1,12 @@
+<script setup>
+defineProps({
+  info: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
 <template>
   <dl class="grid grid-cols-2 gap-6">
     <div
@@ -5,7 +14,9 @@
       :key="infoLine.title"
       :class="`col-span-2 sm:col-span-${infoLine.columns || '2'}`"
     >
-      <dt class="text-sm font-semibold md:font-medium text-gray-500 dark:text-gray-400">
+      <dt
+        class="text-sm font-semibold md:font-medium text-gray-500 dark:text-gray-400"
+      >
         {{ infoLine.title }}
       </dt>
       <dd class="mt-1 text-sm text-gray-900 dark:text-gray-300 sm:mt-0">
@@ -20,14 +31,3 @@
     </div>
   </dl>
 </template>
-
-<script>
-export default {
-  props: {
-    info: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/components/GroupGrid.vue b/src/components/GroupGrid.vue
index d0f7eef3..5feb1a62 100644
--- a/src/components/GroupGrid.vue
+++ b/src/components/GroupGrid.vue
@@ -1,3 +1,110 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSheetStore } from '@/stores/sheet'
+import useGroupsQuery from '@/queries/useGroupsQuery'
+
+const sheetStore = useSheetStore()
+
+const sheetLoading = computed(() => sheetStore.loading)
+
+const { isLoading: loading, data: groups } = useGroupsQuery({
+  enabled: computed(() => {
+    return sheetStore.sheetId !== null && !sheetLoading.value
+  })
+})
+
+const { t, n } = useI18n({ useScope: 'global' })
+
+const container = ref(null)
+const focused = ref(0)
+
+const columnSize = {
+  '1024px': 5, // lg
+  '768px': 4 // md
+}
+
+function getColumnSize() {
+  const match = Object.entries(columnSize).find(([minWidth]) => {
+    return window.matchMedia(`(min-width: ${minWidth})`).matches
+  })
+
+  return match?.[1] || 2
+}
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleKeydown(event) {
+  const allowedKeys = [
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End'
+  ]
+  const { key } = event
+
+  if (key === 'Tab') {
+    setTimeout(() => {
+      focused.value = 0
+    })
+    return
+  }
+
+  if (!allowedKeys.includes(key)) {
+    return
+  }
+
+  const totalItems = groups.value.length
+  const columns = getColumnSize()
+  const lines = Math.ceil(totalItems / columns)
+  const row = Math.floor(focused.value / columns) + 1
+
+  if (key === 'Home' && focused.value === 0) {
+    return
+  }
+
+  if (key === 'End' && focused.value === totalItems - 1) {
+    return
+  }
+
+  if (key === 'ArrowUp' && row === 1) {
+    return
+  }
+
+  if (key === 'ArrowDown' && row === lines) {
+    return
+  }
+
+  event.preventDefault()
+
+  if (key === 'ArrowRight') {
+    focused.value = Math.min(focused.value + 1, totalItems - 1)
+  } else if (key === 'ArrowLeft') {
+    focused.value = Math.max(focused.value - 1, 0)
+  } else if (key === 'ArrowDown') {
+    focused.value =
+      row < lines
+        ? Math.min(totalItems - 1, focused.value + columns)
+        : focused.value
+  } else if (key === 'ArrowUp') {
+    focused.value =
+      row > 1 ? Math.max(0, focused.value - columns) : focused.value
+  } else if (key === 'Home') {
+    focused.value = 0
+  } else if (key === 'End') {
+    focused.value = totalItems - 1
+  }
+
+  const group = container.value?.children?.[focused.value]
+
+  group?.focus()
+}
+</script>
+
 <template>
   <section
     v-if="sheetLoading || loading || groups.length > 0"
@@ -5,7 +112,11 @@
     class="w-full mb-3 mt-8"
   >
     <div v-if="sheetLoading || loading" class="skeleton h-6 w-40 mb-3"></div>
-    <h2 v-else id="groups-title" class="font-medium font-display text-lg mb-2 dark:text-gray-200">
+    <h2
+      v-else
+      id="groups-title"
+      class="font-medium font-display text-lg mb-2 dark:text-gray-200"
+    >
       {{ t('dashboard.home.groups') }}
     </h2>
 
@@ -13,11 +124,7 @@
       class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4"
       v-if="sheetLoading || loading"
     >
-      <div
-        v-for="i in 4"
-        :key="i"
-        class="skeleton h-10 w-full"
-      />
+      <div v-for="i in 4" :key="i" class="skeleton h-10 w-full" />
     </div>
     <div
       v-else
@@ -35,127 +142,13 @@
         <span class="flex-1 truncate">
           {{ group.name }}
         </span>
-        <span aria-hidden="true" class="ml-2 bg-primary-100 dark:bg-gray-600 dark:group-hover:bg-gray-500 text-primary-700 dark:text-gray-300 text-xs font-semibold px-2.5 py-0.5 rounded-full">
+        <span
+          aria-hidden="true"
+          class="ml-2 bg-primary-100 dark:bg-gray-600 dark:group-hover:bg-gray-500 text-primary-700 dark:text-gray-300 text-xs font-semibold px-2.5 py-0.5 rounded-full"
+        >
           {{ n(group.count, 'integer') }}
         </span>
       </router-link>
     </div>
   </section>
 </template>
-
-<script>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSheetStore } from '@/stores/sheet'
-import useGroupsQuery from '@/queries/useGroupsQuery'
-
-export default {
-  setup () {
-    const sheetStore = useSheetStore()
-
-    const sheetLoading = computed(() => sheetStore.loading)
-
-    const { isLoading: loading, data: groups } = useGroupsQuery({
-      enabled: computed(() => {
-        return sheetStore.sheetId !== null && !sheetLoading.value
-      })
-    })
-
-    const { t, n } = useI18n({ useScope: 'global' })
-
-    const container = ref(null)
-    const focused = ref(0)
-
-    const columnSize = {
-      '1024px': 5, // lg
-      '768px': 4 // md
-    }
-
-    function getColumnSize () {
-      const match = Object.entries(columnSize)
-        .find(([minWidth]) => {
-          return window.matchMedia(`(min-width: ${minWidth})`).matches
-        })
-
-      return match?.[1] || 2
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleKeydown (event) {
-      const allowedKeys = [
-        'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown',
-        'Home', 'End'
-      ]
-      const { key } = event
-
-      if (key === 'Tab') {
-        setTimeout(() => { focused.value = 0 })
-        return
-      }
-
-      if (!allowedKeys.includes(key)) {
-        return
-      }
-
-      const totalItems = groups.value.length
-      const columns = getColumnSize()
-      const lines = Math.ceil(totalItems / columns)
-      const row = Math.floor(focused.value / columns) + 1
-
-      if (key === 'Home' && focused.value === 0) {
-        return
-      }
-
-      if (key === 'End' && focused.value === totalItems - 1) {
-        return
-      }
-
-      if (key === 'ArrowUp' && row === 1) {
-        return
-      }
-
-      if (key === 'ArrowDown' && row === lines) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (key === 'ArrowRight') {
-        focused.value = Math.min(focused.value + 1, totalItems - 1)
-      } else if (key === 'ArrowLeft') {
-        focused.value = Math.max(focused.value - 1, 0)
-      } else if (key === 'ArrowDown') {
-        focused.value = row < lines
-          ? Math.min(totalItems - 1, focused.value + columns)
-          : focused.value
-      } else if (key === 'ArrowUp') {
-        focused.value = row > 1
-          ? Math.max(0, focused.value - columns)
-          : focused.value
-      } else if (key === 'Home') {
-        focused.value = 0
-      } else if (key === 'End') {
-        focused.value = totalItems - 1
-      }
-
-      const group = container.value?.children?.[focused.value]
-
-      group?.focus()
-    }
-
-    return {
-      sheetLoading,
-      loading,
-      groups,
-      container,
-      focused,
-      handleKeydown,
-      t,
-      n
-    }
-  }
-}
-</script>
diff --git a/src/components/HomeFooter.vue b/src/components/HomeFooter.vue
index 36d095ee..910b8b5f 100644
--- a/src/components/HomeFooter.vue
+++ b/src/components/HomeFooter.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import LocaleSelector from '@/components/LocaleSelector.vue'
+
+const { t, locale } = useI18n({ useScope: 'global' })
+
+const links = computed(() => [
+  { route: 'Accessibility', text: t('footer.links.a11y') },
+  { route: 'Instructions', text: t('footer.links.instructions') },
+  { route: 'PrivacyPolicy', text: t('footer.links.privacyPolicy') },
+  { route: 'TermsOfUse', text: t('footer.links.termsOfUse') }
+])
+</script>
+
 <template>
   <footer class="footer">
     <div>
@@ -6,24 +22,9 @@
 
     <nav>
       <ul>
-        <li>
-          <router-link :to="{ name: 'Accessibility' }">
-            {{ t('footer.links.a11y') }}
-          </router-link>
-        </li>
-        <li>
-          <router-link :to="{ name: 'Instructions' }">
-            {{ t('footer.links.instructions') }}
-          </router-link>
-        </li>
-        <li>
-          <router-link :to="{ name: 'PrivacyPolicy' }">
-            {{ t('footer.links.privacyPolicy') }}
-          </router-link>
-        </li>
-        <li>
-          <router-link :to="{ name: 'TermsOfUse' }">
-            {{ t('footer.links.termsOfUse' )}}
+        <li v-for="link in links" :key="link.route">
+          <router-link :to="{ name: link.route }">
+            {{ link.text }}
           </router-link>
         </li>
       </ul>
@@ -37,22 +38,6 @@
   </footer>
 </template>
 
-<script>
-import { useI18n } from 'vue-i18n'
-
-import LocaleSelector from '@/components/LocaleSelector.vue'
-
-export default {
-  components: { LocaleSelector },
-
-  setup () {
-    const { t, locale } = useI18n({ useScope: 'global' })
-
-    return { t, locale }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .footer {
   @apply max-w-7xl mx-auto px-6 lg:px-8 flex flex-col items-center space-y-6 py-8 text-sm;
diff --git a/src/components/HomeHeader.vue b/src/components/HomeHeader.vue
index 01a3f8c0..b0f47a88 100644
--- a/src/components/HomeHeader.vue
+++ b/src/components/HomeHeader.vue
@@ -1,23 +1,42 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+
+import { LibraryIcon } from '@heroicons/vue/solid'
+
+import ThemeToggle from '@/components/ThemeToggle.vue'
+import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
+
+const authStore = useAuthStore()
+const signedIn = computed(() => authStore.signedIn)
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <header class="w-full select-none">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-16">
-        <h1 class="flex items-center rounded-md ">
+        <h1 class="flex items-center rounded-md">
           <span aria-hidden="true">
             <LibraryIcon class="h-9 w-9 text-primary-500" />
           </span>
-          <span class="text-gray-800 dark:text-gray-200 font-display font-semibold text-xl ml-3" aria-hidden="true">
+          <span
+            class="text-gray-800 dark:text-gray-200 font-display font-semibold text-xl ml-3"
+            aria-hidden="true"
+          >
             {{ t('app.name') }}
           </span>
-          <sup class="text-gray-500 dark:text-gray-400 font-semibold text-[0.6rem] align-super ml-0.5">
+          <sup
+            class="text-gray-500 dark:text-gray-400 font-semibold text-[0.6rem] align-super ml-0.5"
+          >
             BETA
           </sup>
         </h1>
         <div class="flex-1 hidden md:block md:ml-6">
-          <router-link
-            :to="{ name: 'Instructions' }"
-            class="button is-ghost"
-          >
+          <router-link :to="{ name: 'Instructions' }" class="button is-ghost">
             {{ t('home.header.instructions') }}
           </router-link>
         </div>
@@ -36,32 +55,3 @@
     </div>
   </header>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-
-import { LibraryIcon } from '@heroicons/vue/solid'
-
-import ThemeToggle from '@/components/ThemeToggle.vue'
-import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
-
-export default {
-  components: {
-    LibraryIcon,
-    ThemeToggle,
-    SignInWithGoogleButton
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const signedIn = computed(() => authStore.signedIn)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { signedIn, t }
-  }
-}
-</script>
diff --git a/src/components/LibraryHeader.vue b/src/components/LibraryHeader.vue
index 7e00a56b..b1dd6ee4 100644
--- a/src/components/LibraryHeader.vue
+++ b/src/components/LibraryHeader.vue
@@ -1,12 +1,98 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCollectionStore } from '@/stores/collection'
+import { useSheetStore } from '@/stores/sheet'
+import useGroupsQuery from '@/queries/useGroupsQuery'
+
+import {
+  ArchiveIcon,
+  FilterIcon,
+  PlusIcon,
+  SortAscendingIcon,
+  SortDescendingIcon
+} from '@heroicons/vue/solid'
+
+import Avatar from '@/components/Avatar.vue'
+
+defineProps({
+  loading: Boolean,
+  writing: Boolean
+})
+
+defineEmits(['click:filter', 'click:new'])
+
+const collectionStore = useCollectionStore()
+const sheetStore = useSheetStore()
+const { t } = useI18n({ useScope: 'global' })
+
+const sheetIsEmpty = computed(() => sheetStore.isEmpty)
+
+const sortPropertyNames = computed(() => ({
+  title: t('book.properties.title'),
+  publisher: t('book.properties.publisher'),
+  status: t('book.properties.status'),
+  readAt: t('book.properties.readAt'),
+  'paidPrice.value': t('book.properties.paidPrice'),
+  'labelPrice.value': t('book.properties.labelPrice'),
+  boughtAt: t('book.properties.boughtAt'),
+  createdAt: t('book.properties.createdAt'),
+  updatedAt: t('book.properties.updatedAt')
+}))
+
+const sortProperty = computed(() => collectionStore.sortBy)
+const sortPropertyName = computed(() => {
+  return sortPropertyNames.value[sortProperty.value]
+})
+const sortDirection = computed(() => collectionStore.sortDirection)
+
+const sheetLoading = computed(() => sheetStore.loading)
+const sheetLoadedOnce = computed(() => sheetStore.loadedOnce)
+
+const { data: allGroups } = useGroupsQuery({
+  enabled: computed(() => !sheetLoading.value)
+})
+
+const selectedGroups = computed(() => collectionStore.filters.groups)
+
+const currentGroups = computed(() => {
+  if (selectedGroups.value.length === allGroups.value?.length) {
+    return t('dashboard.library.allGroups')
+  }
+
+  if (selectedGroups.value.length === 1) {
+    return selectedGroups.value[0]
+  }
+
+  return t('dashboard.library.groupCount', selectedGroups.value.length)
+})
+
+const canEdit = computed(() => sheetStore.canEdit)
+const shared = computed(() => sheetStore.shared)
+const owner = computed(() => ({
+  displayName: sheetStore.ownerDisplayName,
+  pictureUrl: sheetStore.ownerPictureUrl
+}))
+</script>
+
 <template>
   <header class="bg-white shadow dark:bg-gray-800">
-    <div class="max-w-7xl mx-auto md:flex md:items-center md:justify-between py-4 px-4 sm:px-6 lg:px-8">
+    <div
+      class="max-w-7xl mx-auto md:flex md:items-center md:justify-between py-4 px-4 sm:px-6 lg:px-8"
+    >
       <div class="flex-1 items-center">
         <template v-if="sheetLoading && !sheetLoadedOnce && !writing">
-          <div class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-56 mb-2"></div>
+          <div
+            class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-56 mb-2"
+          ></div>
           <div class="flex space-x-2">
-            <div class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-32"></div>
-            <div class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-24"></div>
+            <div
+              class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-32"
+            ></div>
+            <div
+              class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-24"
+            ></div>
           </div>
         </template>
         <div v-else class="flex flex-row-reverse md:flex-row items-center">
@@ -17,17 +103,23 @@
             :shared="shared"
           />
           <div class="grow min-w-0">
-            <h1 class="text-xl font-display font-semibold text-gray-900 dark:text-gray-100">
+            <h1
+              class="text-xl font-display font-semibold text-gray-900 dark:text-gray-100"
+            >
               {{ t('dashboard.library.title') }}
             </h1>
-            <div class="mt-1 flex flex-col md:flex-row items-start md:flex-wrap md:mt-0 md:-mb-1 md:space-x-2">
+            <div
+              class="mt-1 flex flex-col md:flex-row items-start md:flex-wrap md:mt-0 md:-mb-1 md:space-x-2"
+            >
               <button
                 class="group -ml-2.5 flex items-center px-2.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 has-ring-focus"
                 :disabled="writing || loading"
                 @click="$emit('click:filter')"
               >
                 <span aria-hidden="true">
-                  <ArchiveIcon class="shrink-0 mr-1.5 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-300" />
+                  <ArchiveIcon
+                    class="shrink-0 mr-1.5 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-300"
+                  />
                 </span>
                 <span class="sr-only">
                   {{ t('dashboard.library.currentGroup') }}
@@ -43,7 +135,11 @@
                 <span aria-hidden="true">
                   <component
                     class="shrink-0 mr-1.5 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-300"
-                    :is="sortDirection === 'asc' ? 'SortAscendingIcon' : 'SortDescendingIcon'"
+                    :is="
+                      sortDirection === 'asc'
+                        ? SortAscendingIcon
+                        : SortDescendingIcon
+                    "
                   />
                 </span>
                 <span class="sr-only">
@@ -57,8 +153,12 @@
       </div>
       <div class="flex mt-5 md:mt-0 md:ml-4 space-x-4">
         <template v-if="sheetLoading && !sheetLoadedOnce && !writing">
-          <div class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-28 flex-1 md:flex-initial"></div>
-          <div class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-32 flex-1 md:flex-initial"></div>
+          <div
+            class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-28 flex-1 md:flex-initial"
+          ></div>
+          <div
+            class="motion-safe:animate-pulse h-9 bg-gray-400 dark:bg-gray-600 rounded w-32 flex-1 md:flex-initial"
+          ></div>
         </template>
         <template v-else>
           <button
@@ -90,111 +190,3 @@
     </div>
   </header>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useCollectionStore } from '@/stores/collection'
-import { useSheetStore } from '@/stores/sheet'
-import useGroupsQuery from '@/queries/useGroupsQuery'
-
-import {
-  ArchiveIcon,
-  FilterIcon,
-  PlusIcon,
-  SortAscendingIcon,
-  SortDescendingIcon
-} from '@heroicons/vue/solid'
-
-import Avatar from '@/components/Avatar.vue'
-
-export default {
-  components: {
-    ArchiveIcon,
-    Avatar,
-    FilterIcon,
-    PlusIcon,
-    SortAscendingIcon,
-    SortDescendingIcon
-  },
-
-  props: {
-    loading: Boolean,
-    writing: Boolean
-  },
-
-  emits: [
-    'click:filter',
-    'click:new'
-  ],
-
-  setup () {
-    const collectionStore = useCollectionStore()
-    const sheetStore = useSheetStore()
-    const { t } = useI18n({ useScope: 'global' })
-
-    const sheetIsEmpty = computed(() => sheetStore.isEmpty)
-
-    const sortPropertyNames = computed(() => ({
-      title: t('book.properties.title'),
-      publisher: t('book.properties.publisher'),
-      status: t('book.properties.status'),
-      readAt: t('book.properties.readAt'),
-      'paidPrice.value': t('book.properties.paidPrice'),
-      'labelPrice.value': t('book.properties.labelPrice'),
-      boughtAt: t('book.properties.boughtAt'),
-      createdAt: t('book.properties.createdAt'),
-      updatedAt: t('book.properties.updatedAt')
-    }))
-
-    const sortProperty = computed(() => collectionStore.sortBy)
-    const sortPropertyName = computed(() => {
-      return sortPropertyNames.value[sortProperty.value]
-    })
-    const sortDirection = computed(() => collectionStore.sortDirection)
-
-    const sheetLoading = computed(() => sheetStore.loading)
-    const sheetLoadedOnce = computed(() => sheetStore.loadedOnce)
-
-    const { data: allGroups } = useGroupsQuery({
-      enabled: computed(() => !sheetLoading.value)
-    })
-
-    const selectedGroups = computed(() => collectionStore.filters.groups)
-
-    const currentGroups = computed(() => {
-      if (selectedGroups.value.length === allGroups.value?.length) {
-        return t('dashboard.library.allGroups')
-      }
-
-      if (selectedGroups.value.length === 1) {
-        return selectedGroups.value[0]
-      }
-
-      return t('dashboard.library.groupCount', selectedGroups.value.length)
-    })
-
-    const canEdit = computed(() => sheetStore.canEdit)
-    const shared = computed(() => sheetStore.shared)
-    const owner = computed(() => ({
-      displayName: sheetStore.ownerDisplayName,
-      pictureUrl: sheetStore.ownerPictureUrl
-    }))
-
-    return {
-      t,
-      sheetLoading,
-      sheetLoadedOnce,
-      sheetIsEmpty,
-      sortPropertyNames,
-      sortPropertyName,
-      sortDirection,
-      currentGroups,
-      canEdit,
-      shared,
-      owner
-    }
-  }
-}
-</script>
diff --git a/src/components/LoadingIndicator.vue b/src/components/LoadingIndicator.vue
index 04a1c60c..5fc87ce6 100644
--- a/src/components/LoadingIndicator.vue
+++ b/src/components/LoadingIndicator.vue
@@ -1,12 +1,31 @@
+<script setup>
+import FadeTransition from './transitions/FadeTransition.vue'
+import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
+
+defineProps({
+  animation: {
+    type: String,
+    default: 'spin'
+  },
+  blur: {
+    type: Boolean,
+    default: true
+  },
+  loading: Boolean,
+  position: {
+    type: String,
+    default: 'absolute'
+  },
+  small: Boolean,
+  zIndex: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
 <template>
-  <transition
-    leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-    enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-  >
+  <FadeTransition>
     <div
       aria-hidden="true"
       :class="[
@@ -25,36 +44,5 @@
         ]"
       />
     </div>
-  </transition>
+  </FadeTransition>
 </template>
-
-<script>
-import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
-
-export default {
-  components: {
-    LoadingSpinIcon
-  },
-
-  props: {
-    animation: {
-      type: String,
-      default: 'spin'
-    },
-    blur: {
-      type: Boolean,
-      default: true
-    },
-    loading: Boolean,
-    position: {
-      type: String,
-      default: 'absolute'
-    },
-    small: Boolean,
-    zIndex: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
diff --git a/src/components/LocaleSelector.vue b/src/components/LocaleSelector.vue
index a8b2411e..3845473d 100644
--- a/src/components/LocaleSelector.vue
+++ b/src/components/LocaleSelector.vue
@@ -1,3 +1,36 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions
+} from '@headlessui/vue'
+import { CheckIcon, SelectorIcon, TranslateIcon } from '@heroicons/vue/solid'
+
+defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+
+defineEmits(['update:modelValue'])
+
+const { t, availableLocales } = useI18n({ useScope: 'global' })
+
+const localeFlags = {
+  'pt-BR': 'BR',
+  'en-US': 'US'
+}
+
+function createFlagUrl(country) {
+  return `https://hatscripts.github.io/circle-flags/flags/${country.toLowerCase()}.svg`
+}
+</script>
+
 <template>
   <div>
     <div class="md:hidden">
@@ -46,7 +79,7 @@
             :src="createFlagUrl(localeFlags[modelValue])"
             aria-hidden="true"
             class="shrink-0 h-5 w-5 rounded-full"
-          >
+          />
           <span class="ml-2.5 block truncate">
             {{ t('app.localeName', null, { locale: modelValue }) }}
           </span>
@@ -64,7 +97,9 @@
         leave-from-class="opacity-100"
         leave-to-class="opacity-0"
       >
-        <ListboxOptions class="absolute z-10 mt-1 w-56 bg-white dark:supports-backdrop-blur:bg-gray-700/80 dark:bg-gray-700 dark:backdrop-blur shadow-lg max-h-56 rounded-md py-1 text-base border border-gray-200 dark:border-gray-600 overflow-auto focus:outline-none sm:text-sm">
+        <ListboxOptions
+          class="absolute z-10 mt-1 w-56 bg-white dark:supports-backdrop-blur:bg-gray-700/80 dark:bg-gray-700 dark:backdrop-blur shadow-lg max-h-56 rounded-md py-1 text-base border border-gray-200 dark:border-gray-600 overflow-auto focus:outline-none sm:text-sm"
+        >
           <ListboxOption
             as="template"
             v-for="loc in availableLocales"
@@ -99,7 +134,9 @@
               <span
                 v-if="selected"
                 :class="[
-                  active ? 'text-white dark:text-gray-100' : 'text-primary-600 dark:text-primary-400',
+                  active
+                    ? 'text-white dark:text-gray-100'
+                    : 'text-primary-600 dark:text-primary-400',
                   'absolute inset-y-0 right-0 flex items-center pr-4'
                 ]"
               >
@@ -112,52 +149,3 @@
     </Listbox>
   </div>
 </template>
-
-<script>
-import { useI18n } from 'vue-i18n'
-
-import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
-import { CheckIcon, SelectorIcon, TranslateIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    CheckIcon,
-    SelectorIcon,
-    TranslateIcon
-  },
-
-  props: {
-    modelValue: {
-      type: String,
-      required: true
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  setup () {
-    const { t, availableLocales } = useI18n({ useScope: 'global' })
-
-    const localeFlags = {
-      'pt-BR': 'BR',
-      'en-US': 'US'
-    }
-
-    function createFlagUrl (country) {
-      return `https://hatscripts.github.io/circle-flags/flags/${country.toLowerCase()}.svg`
-    }
-
-    return {
-      t,
-      localeFlags,
-      availableLocales,
-      createFlagUrl
-    }
-  }
-}
-</script>
diff --git a/src/components/MobileNavbar.vue b/src/components/MobileNavbar.vue
index b89109ff..9ede6dc2 100644
--- a/src/components/MobileNavbar.vue
+++ b/src/components/MobileNavbar.vue
@@ -1,15 +1,110 @@
+<script setup>
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+import { useSheetStore } from '@/stores/sheet'
+
+import {
+  DotsHorizontalIcon,
+  HomeIcon,
+  LibraryIcon,
+  PresentationChartLineIcon
+} from '@heroicons/vue/outline'
+
+import {
+  CogIcon,
+  LibraryIcon as LibraryIconSolid,
+  LogoutIcon
+} from '@heroicons/vue/solid'
+
+import {
+  Popover,
+  PopoverButton,
+  PopoverOverlay,
+  PopoverPanel
+} from '@headlessui/vue'
+
+import FadeTransition from './transitions/FadeTransition.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+
+const authStore = useAuthStore()
+const sheetStore = useSheetStore()
+
+const shared = computed(() => sheetStore.shared)
+const loading = computed(() => sheetStore.loading)
+
+const items = computed(() => [
+  {
+    to: 'DashboardHome',
+    title: t('dashboard.home.title'),
+    icon: HomeIcon,
+    exact: true
+  },
+  {
+    to: 'DashboardLibrary',
+    title: t('dashboard.library.title'),
+    icon: LibraryIcon
+  },
+  {
+    to: 'DashboardStats',
+    title: t('dashboard.stats.title'),
+    icon: PresentationChartLineIcon,
+    hidden: shared.value || loading.value
+  }
+])
+
+const profileEmail = computed(() => authStore.profileEmail)
+const profileImageUrl = computed(() => authStore.profileImageUrl)
+const profileName = computed(() => authStore.profileName)
+
+async function signOut(close) {
+  await authStore.signOut()
+  close()
+}
+
+const currentScrollPosition = ref(0)
+const lastScrollPosition = ref(0)
+const show = ref(true)
+
+function handleScroll() {
+  currentScrollPosition.value = document.documentElement.scrollTop
+
+  if (currentScrollPosition.value < 0) {
+    return
+  }
+
+  if (Math.abs(currentScrollPosition.value - lastScrollPosition.value) < 60) {
+    return
+  }
+
+  show.value = currentScrollPosition.value < lastScrollPosition.value
+  lastScrollPosition.value = currentScrollPosition.value
+}
+
+onMounted(() => window.addEventListener('scroll', handleScroll))
+onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+
+const showSettingsDialogFn = inject('showSettingsDialog')
+
+function showSettingsDialog(close) {
+  close()
+  showSettingsDialogFn()
+}
+</script>
+
 <template>
   <nav
-    :class="[
-      'mobile-navbar z-20 sm:z-[25] md:z-20',
-      !show ? 'is-hidden' : '',
-    ]"
+    :class="['mobile-navbar z-20 sm:z-[25] md:z-20', !show ? 'is-hidden' : '']"
     aria-label="Navegação principal"
   >
     <div aria-hidden="true" class="hidden sm:block mt-1.5 mb-6">
       <LibraryIconSolid class="text-primary-500 w-9 h-9" />
     </div>
-    <ul class="w-full sm:h-full flex items-center sm:justify-start sm:flex-col sm:space-y-2">
+    <ul
+      class="w-full sm:h-full flex items-center sm:justify-start sm:flex-col sm:space-y-2"
+    >
       <template v-for="item in items" :key="item.to">
         <li v-if="!item.hidden" class="flex-1 sm:flex-initial">
           <router-link
@@ -22,15 +117,23 @@
               :href="href"
               :aria-current="isExactActive ? 'page' : undefined"
               :class="[
-                (item.exact ? isExactActive : isActive) ? 'text-primary-600 dark:text-primary-400' : '',
+                (item.exact ? isExactActive : isActive)
+                  ? 'text-primary-600 dark:text-primary-400'
+                  : '',
                 'w-full sm:w-auto sm:p-2 text-gray-500 dark:text-gray-400 font-semibold inline-flex space-y-1 flex-col items-center justify-center rounded-md'
               ]"
               @click="navigate"
             >
               <span aria-hidden="true">
-                <component :is="item.icon" class="w-6 h-6 sm:w-7 sm:h-7 motion-safe:transition-colors duration-500" />
+                <component
+                  :is="item.icon"
+                  class="w-6 h-6 sm:w-7 sm:h-7 motion-safe:transition-colors duration-500"
+                />
               </span>
-              <span class="text-xs sm:sr-only motion-safe:transition-colors duration-500">{{ item.title }}</span>
+              <span
+                class="text-xs sm:sr-only motion-safe:transition-colors duration-500"
+                >{{ item.title }}</span
+              >
             </a>
           </router-link>
         </li>
@@ -46,25 +149,20 @@
             ]"
           >
             <span aria-hidden="true">
-              <DotsHorizontalIcon class="w-6 h-6 motion-safe:transition-colors duration-500" />
+              <DotsHorizontalIcon
+                class="w-6 h-6 motion-safe:transition-colors duration-500"
+              />
             </span>
             <span class="text-xs motion-safe:transition-colors duration-500">
               {{ t('dashboard.header.menu.more') }}
             </span>
           </PopoverButton>
-          <transition
-            enter-active-class="transition motion-reduce:transition-none ease-out duration-300"
-            enter-from-class="opacity-0"
-            enter-to-class="opacity-100"
-            leave-active-class="transition motion-reduce:transition-none ease-in duration-200"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
+          <FadeTransition>
             <PopoverOverlay
               :class="!open ? 'hidden' : 'md:hidden'"
               class="dialog-overlay"
             />
-          </transition>
+          </FadeTransition>
           <transition
             enter-active-class="transition motion-reduce:transition-none duration-300 md:duration-100 ease-out"
             enter-from-class="translate-y-full opacity-0"
@@ -84,9 +182,15 @@
                     class="rounded-full w-10 h-10 bg-contain shadow-avatar"
                     :style="{ backgroundImage: `url('${profileImageUrl}')` }"
                   />
-                  <div class="flex-1 flex flex-col justify-center text-sm text-gray-700 dark:text-gray-300">
-                    <span class="font-semibold font-display truncate">{{ profileName }}</span>
-                    <span class="text-xs dark:text-gray-400 truncate">{{ profileEmail }}</span>
+                  <div
+                    class="flex-1 flex flex-col justify-center text-sm text-gray-700 dark:text-gray-300"
+                  >
+                    <span class="font-semibold font-display truncate">{{
+                      profileName
+                    }}</span>
+                    <span class="text-xs dark:text-gray-400 truncate">{{
+                      profileEmail
+                    }}</span>
                   </div>
                 </div>
               </div>
@@ -96,7 +200,9 @@
                   @click="showSettingsDialog(close)"
                 >
                   <span aria-hidden="true">
-                    <CogIcon class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300" />
+                    <CogIcon
+                      class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
+                    />
                   </span>
                   {{ t('dashboard.header.menu.settings') }}
                 </PopoverButton>
@@ -107,7 +213,9 @@
                   @click="signOut(close)"
                 >
                   <span aria-hidden="true">
-                    <LogoutIcon class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500" />
+                    <LogoutIcon
+                      class="w-5 h-5 mr-3 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500"
+                    />
                   </span>
                   {{ t('dashboard.header.menu.signOut') }}
                 </PopoverButton>
@@ -120,128 +228,6 @@
   </nav>
 </template>
 
-<script>
-import { computed, inject, onMounted, onUnmounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  DotsHorizontalIcon,
-  HomeIcon,
-  LibraryIcon,
-  PresentationChartLineIcon
-} from '@heroicons/vue/outline'
-
-import {
-  CogIcon,
-  LibraryIcon as LibraryIconSolid,
-  LogoutIcon
-} from '@heroicons/vue/solid'
-
-import {
-  Popover,
-  PopoverButton,
-  PopoverOverlay,
-  PopoverPanel
-} from '@headlessui/vue'
-
-export default {
-  name: 'MobileNavbar',
-
-  components: {
-    DotsHorizontalIcon,
-    CogIcon,
-    LibraryIconSolid,
-    LogoutIcon,
-    Popover,
-    PopoverButton,
-    PopoverOverlay,
-    PopoverPanel
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const authStore = useAuthStore()
-    const sheetStore = useSheetStore()
-
-    const shared = computed(() => sheetStore.shared)
-    const loading = computed(() => sheetStore.loading)
-
-    const items = computed(() => [
-      {
-        to: 'DashboardHome',
-        title: t('dashboard.home.title'),
-        icon: HomeIcon,
-        exact: true
-      },
-      {
-        to: 'DashboardLibrary',
-        title: t('dashboard.library.title'),
-        icon: LibraryIcon
-      },
-      {
-        to: 'DashboardStats',
-        title: t('dashboard.stats.title'),
-        icon: PresentationChartLineIcon,
-        hidden: shared.value || loading.value
-      }
-    ])
-
-    const profileEmail = computed(() => authStore.profileEmail)
-    const profileImageUrl = computed(() => authStore.profileImageUrl)
-    const profileName = computed(() => authStore.profileName)
-
-    async function signOut (close) {
-      await authStore.signOut()
-      close()
-    }
-
-    const currentScrollPosition = ref(0)
-    const lastScrollPosition = ref(0)
-    const show = ref(true)
-
-    function handleScroll () {
-      currentScrollPosition.value = document.documentElement.scrollTop
-
-      if (currentScrollPosition.value < 0) {
-        return
-      }
-
-      if (Math.abs(currentScrollPosition.value - lastScrollPosition.value) < 60) {
-        return
-      }
-
-      show.value = currentScrollPosition.value < lastScrollPosition.value
-      lastScrollPosition.value = currentScrollPosition.value
-    }
-
-    onMounted(() => window.addEventListener('scroll', handleScroll))
-    onUnmounted(() => window.removeEventListener('scroll', handleScroll))
-
-    const showSettingsDialogFn = inject('showSettingsDialog')
-
-    function showSettingsDialog (close) {
-      close()
-      showSettingsDialogFn()
-    }
-
-    return {
-      items,
-      profileEmail,
-      profileImageUrl,
-      profileName,
-      signOut,
-      show,
-      showSettingsDialog,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .mobile-navbar {
   @apply shadow-top md:hidden z-20 sm:z-20 flex sm:flex-col items-center
diff --git a/src/components/MonthlyBoughtsChart.vue b/src/components/MonthlyBoughtsChart.vue
index f4e10620..f71003f5 100644
--- a/src/components/MonthlyBoughtsChart.vue
+++ b/src/components/MonthlyBoughtsChart.vue
@@ -1,40 +1,4 @@
-<template>
-  <section
-    class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2"
-    :aria-labelledby="!loading ? 'monthly-boughts-title' : ''"
-  >
-    <div v-if="loading" class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"></div>
-    <h2 v-else id="monthly-boughts-title" class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100">
-      {{ t('dashboard.stats.booksBoughtAndRead.title') }}
-    </h2>
-    <div class="aspect-w-16 aspect-h-10 md:aspect-h-6 sm:-mx-3" role="img">
-      <transition
-        mode="out-in"
-        enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100 "
-        leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div v-if="loading" class="flex items-center justify-center">
-          <ChartBarIcon class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600" aria-hidden="true" />
-        </div>
-        <div v-else>
-          <ApexChart
-            width="100%"
-            height="100%"
-            type="bar"
-            :options="itemsBought.options"
-            :series="itemsBought.series"
-          />
-        </div>
-      </transition>
-    </div>
-  </section>
-</template>
-
-<script>
+<script setup>
 import { computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -45,6 +9,8 @@ import useStatisticsQuery from '@/queries/useStatisticsQuery'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
 
+import FadeTransition from './transitions/FadeTransition.vue'
+
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
 
@@ -53,135 +19,163 @@ const apexLocales = {
   'pt-BR': apexPtBr
 }
 
-export default {
-  components: {
-    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
-    ChartBarIcon
-  },
+const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'))
 
-  setup () {
-    const sheetStore = useSheetStore()
-    const { theme } = useTailwindTheme()
+const sheetStore = useSheetStore()
+const { theme } = useTailwindTheme()
 
-    const { data: stats, isLoading, isIdle } = useStatisticsQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
+const {
+  data: stats,
+  isLoading,
+  isIdle
+} = useStatisticsQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
 
-    const loading = computed(() => isLoading.value || isIdle.value)
+const loading = computed(() => isLoading.value || isIdle.value)
 
-    const { t, d, locale } = useI18n({ useScope: 'global' })
+const { t, d, locale } = useI18n({ useScope: 'global' })
 
-    const { darkMode } = useDarkMode()
+const { darkMode } = useDarkMode()
 
-    const localeStr = computed(() => {
-      return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
-    })
+const localeStr = computed(() => {
+  return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
+})
 
-    const monthly = computed(() => (stats.value?.monthly || []).slice(-6))
+const monthly = computed(() => (stats.value?.monthly || []).slice(-6))
 
-    const itemsBought = computed(() => ({
-      options: {
-        chart: {
-          animations: { enabled: false },
-          fontFamily: theme.fontFamily.sans.join(', '),
-          id: 'monthly-boughts',
-          locales: [apexLocales[locale.value]],
-          defaultLocale: localeStr.value,
-          selection: { enabled: false },
-          toolbar: { show: false },
-          zoom: { enabled: false }
-        },
-        states: {
-          active: { filter: { type: 'none' } }
-        },
-        colors: [
-          theme.colors.primary[500],
-          theme.colors.cyan[500]
-        ],
-        fill: { opacity: 1.0 },
-        grid: {
-          borderColor: darkMode.value
-            ? theme.colors.slate[600]
-            : theme.colors.slate[200]
-        },
-        tooltip: { enabled: false },
-        xaxis: {
-          categories: monthly.value.map(m => m.month.toISOString()),
-          labels: {
-            formatter: (_, timestamp) => {
-              return d(new Date(timestamp), 'month')
-            },
-            hideOverlappingLabels: false,
-            showDuplicates: true,
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          }
-        },
-        yaxis: {
-          labels: {
-            formatter: val => val.toFixed(0),
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          }
-        },
-        legend: {
-          labels: {
-            colors: darkMode.value
-              ? theme.colors.slate[300]
-              : theme.colors.slate[600],
-            useSeriesColors: false
-          },
-          onItemClick: {
-            toggleDataSeries: false
-          }
-        },
-        dataLabels: {
-          enabled: true,
-          offsetY: -20,
-          style: {
-            colors: [
-              darkMode.value
-                ? theme.colors.slate[100]
-                : theme.colors.slate[700]
-            ]
-          }
+const itemsBought = computed(() => ({
+  options: {
+    chart: {
+      animations: { enabled: false },
+      fontFamily: theme.fontFamily.sans.join(', '),
+      id: 'monthly-boughts',
+      locales: [apexLocales[locale.value]],
+      defaultLocale: localeStr.value,
+      selection: { enabled: false },
+      toolbar: { show: false },
+      zoom: { enabled: false }
+    },
+    states: {
+      active: { filter: { type: 'none' } }
+    },
+    colors: [theme.colors.primary[500], theme.colors.cyan[500]],
+    fill: { opacity: 1.0 },
+    grid: {
+      borderColor: darkMode.value
+        ? theme.colors.slate[600]
+        : theme.colors.slate[200]
+    },
+    tooltip: { enabled: false },
+    xaxis: {
+      categories: monthly.value.map((m) => m.month.toISOString()),
+      labels: {
+        formatter: (_, timestamp) => {
+          return d(new Date(timestamp), 'month')
         },
-        stroke: {
-          show: true,
-          colors: ['transparent'],
-          width: 6
-        },
-        plotOptions: {
-          bar: {
-            horizontal: false,
-            borderRadius: 5,
-            endingShape: 'rounded',
-            dataLabels: {
-              position: 'top',
-              hideOverflowingLabels: false
-            }
-          }
+        hideOverlappingLabels: false,
+        showDuplicates: true,
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        formatter: (val) => val.toFixed(0),
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
         }
+      }
+    },
+    legend: {
+      labels: {
+        colors: darkMode.value
+          ? theme.colors.slate[300]
+          : theme.colors.slate[600],
+        useSeriesColors: false
       },
-      series: [
-        {
-          name: t('dashboard.stats.booksBoughtAndRead.bought'),
-          data: monthly.value.map(m => m.count)
-        },
-        {
-          name: t('dashboard.stats.booksBoughtAndRead.read'),
-          data: monthly.value.map(m => m.read)
+      onItemClick: {
+        toggleDataSeries: false
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      offsetY: -20,
+      style: {
+        colors: [
+          darkMode.value ? theme.colors.slate[100] : theme.colors.slate[700]
+        ]
+      }
+    },
+    stroke: {
+      show: true,
+      colors: ['transparent'],
+      width: 6
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        borderRadius: 5,
+        endingShape: 'rounded',
+        dataLabels: {
+          position: 'top',
+          hideOverflowingLabels: false
         }
-      ]
-    }))
-
-    return { loading, itemsBought, t }
-  }
-}
+      }
+    }
+  },
+  series: [
+    {
+      name: t('dashboard.stats.booksBoughtAndRead.bought'),
+      data: monthly.value.map((m) => m.count)
+    },
+    {
+      name: t('dashboard.stats.booksBoughtAndRead.read'),
+      data: monthly.value.map((m) => m.read)
+    }
+  ]
+}))
 </script>
+
+<template>
+  <section
+    class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2"
+    :aria-labelledby="!loading ? 'monthly-boughts-title' : ''"
+  >
+    <div
+      v-if="loading"
+      class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"
+    ></div>
+    <h2
+      v-else
+      id="monthly-boughts-title"
+      class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100"
+    >
+      {{ t('dashboard.stats.booksBoughtAndRead.title') }}
+    </h2>
+    <div class="aspect-w-16 aspect-h-10 md:aspect-h-6 sm:-mx-3" role="img">
+      <FadeTransition>
+        <div v-if="loading" class="flex items-center justify-center">
+          <ChartBarIcon
+            class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600"
+            aria-hidden="true"
+          />
+        </div>
+        <div v-else>
+          <ApexChart
+            width="100%"
+            height="100%"
+            type="bar"
+            :options="itemsBought.options"
+            :series="itemsBought.series"
+          />
+        </div>
+      </FadeTransition>
+    </div>
+  </section>
+</template>
diff --git a/src/components/MonthlyExpenseChart.vue b/src/components/MonthlyExpenseChart.vue
index 861bb3fa..75150f72 100644
--- a/src/components/MonthlyExpenseChart.vue
+++ b/src/components/MonthlyExpenseChart.vue
@@ -1,40 +1,4 @@
-<template>
-  <section
-    class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2"
-    :aria-labelledby="!loading ? 'monthly-expense-title' : ''"
-  >
-    <div v-if="loading" class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"></div>
-    <h2 v-else id="monthly-expense-title" class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100">
-      {{ t('dashboard.stats.monthlyExpense') }}
-    </h2>
-    <div class="aspect-w-16 aspect-h-10 md:aspect-h-6 sm:-mx-3" role="img">
-      <transition
-        mode="out-in"
-        enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100 "
-        leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div v-if="loading" class="flex items-center justify-center">
-          <ChartBarIcon class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600" aria-hidden="true" />
-        </div>
-        <div v-else>
-          <ApexChart
-            width="100%"
-            height="100%"
-            type="area"
-            :options="expenses.options"
-            :series="expenses.series"
-          />
-        </div>
-      </transition>
-    </div>
-  </section>
-</template>
-
-<script>
+<script setup>
 import { computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -45,6 +9,8 @@ import useStatisticsQuery from '@/queries/useStatisticsQuery'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
 
+import FadeTransition from './transitions/FadeTransition.vue'
+
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
 
@@ -53,97 +19,131 @@ const apexLocales = {
   'pt-BR': apexPtBr
 }
 
-export default {
-  components: {
-    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
-    ChartBarIcon
-  },
+const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'))
 
-  setup () {
-    const sheetStore = useSheetStore()
-    const { theme } = useTailwindTheme()
+const sheetStore = useSheetStore()
+const { theme } = useTailwindTheme()
 
-    const { data: stats, isLoading, isIdle } = useStatisticsQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
+const {
+  data: stats,
+  isLoading,
+  isIdle
+} = useStatisticsQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
 
-    const loading = computed(() => isLoading.value || isIdle.value)
+const loading = computed(() => isLoading.value || isIdle.value)
 
-    const { n, t, d, locale } = useI18n({ useScope: 'global' })
+const { n, t, d, locale } = useI18n({ useScope: 'global' })
 
-    const localeStr = computed(() => {
-      return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
-    })
+const localeStr = computed(() => {
+  return locale.value === 'en-US' ? 'en' : locale.value.toLowerCase()
+})
 
-    const { darkMode } = useDarkMode()
+const { darkMode } = useDarkMode()
 
-    const expenses = computed(() => ({
-      options: {
-        chart: {
-          animations: { enabled: false },
-          fontFamily: theme.fontFamily.sans.join(', '),
-          id: 'monthly-expenses',
-          locales: [apexLocales[locale.value]],
-          defaultLocale: localeStr.value,
-          selection: { enabled: false },
-          toolbar: { show: false },
-          zoom: { enabled: false }
-        },
-        colors: [theme.colors.primary[500]],
-        dataLabels: { enabled: false },
-        grid: {
-          borderColor: darkMode.value
-            ? theme.colors.slate[600]
-            : theme.colors.slate[200]
-        },
-        stroke: { curve: 'smooth' },
-        tooltip: {
-          theme: darkMode.value ? 'dark' : 'light',
-          x: {
-            formatter: (value) => {
-              return d(stats.value.monthly[value - 1].month, 'monthYear')
-            }
-          }
-        },
-        xaxis: {
-          categories: (stats.value?.monthly || [])
-            .map(m => m.month.toISOString()),
-          labels: {
-            formatter: (value) => {
-              return value ? d(new Date(value), 'month') : value
-            },
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          },
-          tooltip: { enabled: false }
+const expenses = computed(() => ({
+  options: {
+    chart: {
+      animations: { enabled: false },
+      fontFamily: theme.fontFamily.sans.join(', '),
+      id: 'monthly-expenses',
+      locales: [apexLocales[locale.value]],
+      defaultLocale: localeStr.value,
+      selection: { enabled: false },
+      toolbar: { show: false },
+      zoom: { enabled: false }
+    },
+    colors: [theme.colors.primary[500]],
+    dataLabels: { enabled: false },
+    grid: {
+      borderColor: darkMode.value
+        ? theme.colors.slate[600]
+        : theme.colors.slate[200]
+    },
+    stroke: { curve: 'smooth' },
+    tooltip: {
+      theme: darkMode.value ? 'dark' : 'light',
+      x: {
+        formatter: (value) => {
+          return d(stats.value.monthly[value - 1].month, 'monthYear')
+        }
+      }
+    },
+    xaxis: {
+      categories: (stats.value?.monthly || []).map((m) =>
+        m.month.toISOString()
+      ),
+      labels: {
+        formatter: (value) => {
+          return value ? d(new Date(value), 'month') : value
         },
-        yaxis: {
-          labels: {
-            formatter: value => {
-              return n(value, 'currency', {
-                currency: stats.value.money?.currency || 'USD'
-              })
-            },
-            style: {
-              colors: darkMode.value
-                ? theme.colors.slate[300]
-                : theme.colors.slate[600]
-            }
-          }
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
         }
       },
-      series: [
-        {
-          name: t('dashboard.stats.monthlyExpense'),
-          data: (stats.value?.monthly || []).map(m => m.totalSpent)
+      tooltip: { enabled: false }
+    },
+    yaxis: {
+      labels: {
+        formatter: (value) => {
+          return n(value, 'currency', {
+            currency: stats.value.money?.currency || 'USD'
+          })
+        },
+        style: {
+          colors: darkMode.value
+            ? theme.colors.slate[300]
+            : theme.colors.slate[600]
         }
-      ]
-    }))
-
-    return { loading, expenses, t }
-  }
-}
+      }
+    }
+  },
+  series: [
+    {
+      name: t('dashboard.stats.monthlyExpense'),
+      data: (stats.value?.monthly || []).map((m) => m.totalSpent)
+    }
+  ]
+}))
 </script>
+
+<template>
+  <section
+    class="bg-white dark:bg-gray-800 px-4 py-5 sm:p-6 md:rounded-md shadow space-y-2"
+    :aria-labelledby="!loading ? 'monthly-expense-title' : ''"
+  >
+    <div
+      v-if="loading"
+      class="motion-safe:animate-pulse h-5 bg-gray-400 dark:bg-gray-600 rounded w-40"
+    ></div>
+    <h2
+      v-else
+      id="monthly-expense-title"
+      class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100"
+    >
+      {{ t('dashboard.stats.monthlyExpense') }}
+    </h2>
+    <div class="aspect-w-16 aspect-h-10 md:aspect-h-6 sm:-mx-3" role="img">
+      <FadeTransition>
+        <div v-if="loading" class="flex items-center justify-center">
+          <ChartBarIcon
+            class="motion-safe:animate-pulse w-10 h-10 text-gray-400 dark:text-gray-600"
+            aria-hidden="true"
+          />
+        </div>
+        <div v-else>
+          <ApexChart
+            width="100%"
+            height="100%"
+            type="area"
+            :options="expenses.options"
+            :series="expenses.series"
+          />
+        </div>
+      </FadeTransition>
+    </div>
+  </section>
+</template>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 0d0312e3..39e8f7a2 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,6 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+
+import { LibraryIcon } from '@heroicons/vue/solid'
+
+import ThemeToggle from '@/components/ThemeToggle.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+
+const authStore = useAuthStore()
+const signedIn = computed(() => authStore.signedIn)
+</script>
+
 <template>
   <header class="h-16 select-none">
-    <div class="max-w-prose mx-auto px-4 sm:px-6 lg:px-0 flex items-center justify-between h-full">
+    <div
+      class="max-w-prose mx-auto px-4 sm:px-6 lg:px-0 flex items-center justify-between h-full"
+    >
       <router-link
         :to="{ name: 'Home' }"
         class="inline-flex shrink-0 items-center rounded-md transition-shadow motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
@@ -9,10 +27,15 @@
           <LibraryIcon class="h-9 w-9 text-primary-500" />
         </span>
         <span class="sr-only">{{ t('app.routes.home') }}</span>
-        <span class="text-gray-800 dark:text-gray-200 font-display font-semibold text-xl ml-3" aria-hidden="true">
+        <span
+          class="text-gray-800 dark:text-gray-200 font-display font-semibold text-xl ml-3"
+          aria-hidden="true"
+        >
           {{ t('app.name') }}
         </span>
-        <sup class="text-gray-500 dark:text-gray-400 font-semibold text-[0.6rem] align-super ml-0.5">
+        <sup
+          class="text-gray-500 dark:text-gray-400 font-semibold text-[0.6rem] align-super ml-0.5"
+        >
           BETA
         </sup>
       </router-link>
@@ -29,27 +52,3 @@
     </div>
   </header>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-
-import { LibraryIcon } from '@heroicons/vue/solid'
-
-import ThemeToggle from '@/components/ThemeToggle.vue'
-
-export default {
-  components: { LibraryIcon, ThemeToggle },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const authStore = useAuthStore()
-    const signedIn = computed(() => authStore.signedIn)
-
-    return { t, signedIn }
-  }
-}
-</script>
diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue
index 545db1e3..789dc967 100644
--- a/src/components/Paginator.vue
+++ b/src/components/Paginator.vue
@@ -1,8 +1,114 @@
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from '@heroicons/vue/solid'
+
+const props = defineProps({
+  enabled: Boolean,
+  paginationInfo: Object
+})
+
+const emit = defineEmits(['page'])
+
+const { paginationInfo } = toRefs(props)
+
+const links = computed(() => {
+  return paginationInfo.value.last_page + 1 - paginationInfo.value.first_page
+})
+
+const { t } = useI18n({ useScope: 'global' })
+
+function isCurrent(idx) {
+  return (
+    paginationInfo.value.current_page ===
+    paginationInfo.value.first_page + idx - 1
+  )
+}
+
+function changePage(page) {
+  if (page !== paginationInfo.value.current_page) {
+    emit('page', page)
+  }
+}
+
+const paginator = ref(null)
+const focused = ref((paginationInfo.value?.current_page || 1) + 1)
+
+function tabIndex(idx) {
+  return idx === focused.value ? '0' : '-1'
+}
+
+watch(paginationInfo, (newPagination) => {
+  const { current_page: currentPage, first_page: firstPage } = newPagination
+  focused.value = currentPage - firstPage + 2
+})
+
+/**
+ * @param {KeyboardEvent} event
+ * @param {number} idx
+ */
+function handleKeydown(event, idx) {
+  const allowedKeys = ['ArrowRight', 'ArrowLeft', 'Home', 'End']
+  const { key } = event
+  const {
+    current_page: currentPage,
+    first_page: firstPage,
+    has_previous_page: hasPreviousPage,
+    has_next_page: hasNextPage
+  } = paginationInfo.value
+
+  if (key === 'Tab') {
+    setTimeout(() => {
+      focused.value = currentPage - firstPage + 2
+    })
+    return
+  }
+
+  if (!allowedKeys.includes(key)) {
+    return
+  }
+
+  event.preventDefault()
+
+  if (key === 'ArrowRight' && hasNextPage) {
+    focused.value =
+      focused.value + 1 >= links.value + 4
+        ? hasPreviousPage
+          ? 0
+          : 2
+        : focused.value + 1
+  } else if (key === 'ArrowRight') {
+    focused.value = focused.value + 1 >= links.value + 2 ? 0 : focused.value + 1
+  } else if (key === 'ArrowLeft' && hasPreviousPage) {
+    focused.value =
+      focused.value - 1 < 0
+        ? hasNextPage
+          ? links.value + 3
+          : links.value + 1
+        : focused.value - 1
+  } else if (key === 'ArrowLeft') {
+    focused.value = focused.value - 1 <= 1 ? links.value + 3 : focused.value - 1
+  } else if (key === 'Home') {
+    focused.value = hasPreviousPage ? 0 : 2
+  } else if (key === 'End') {
+    focused.value = hasNextPage ? links.value + 3 : links.value + 1
+  }
+
+  const li = paginator.value?.children?.[focused.value]
+  const button = li?.children?.[0]
+
+  button?.focus()
+}
+</script>
+
 <template>
-  <nav
-    role="navigation"
-    class="relative rounded-md shadow-sm"
-  >
+  <nav role="navigation" class="relative rounded-md shadow-sm">
     <ul class="z-0 inline-flex -space-x-px" ref="paginator">
       <li>
         <button
@@ -36,10 +142,7 @@
         </button>
       </li>
 
-      <li
-        v-for="pageIdx in links"
-        :key="pageIdx"
-      >
+      <li v-for="pageIdx in links" :key="pageIdx">
         <button
           type="button"
           :class="[
@@ -97,130 +200,6 @@
   </nav>
 </template>
 
-<script>
-import { computed, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon
-} from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    ChevronDoubleLeftIcon,
-    ChevronDoubleRightIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon
-  },
-
-  props: {
-    enabled: Boolean,
-    paginationInfo: Object
-  },
-
-  emits: ['page'],
-
-  setup (props, context) {
-    const { paginationInfo } = toRefs(props)
-
-    const links = computed(() => {
-      return paginationInfo.value.last_page + 1 - paginationInfo.value.first_page
-    })
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    function isCurrent (idx) {
-      return paginationInfo.value.current_page === paginationInfo.value.first_page + idx - 1
-    }
-
-    function changePage (page) {
-      if (page !== paginationInfo.value.current_page) {
-        context.emit('page', page)
-      }
-    }
-
-    const paginator = ref(null)
-    const focused = ref((paginationInfo.value?.current_page || 1) + 1)
-
-    function tabIndex (idx) {
-      return idx === focused.value ? '0' : '-1'
-    }
-
-    watch(paginationInfo, newPagination => {
-      const { current_page: currentPage, first_page: firstPage } = newPagination
-      focused.value = currentPage - firstPage + 2
-    })
-
-    /**
-     * @param {KeyboardEvent} event
-     * @param {number} idx
-     */
-    function handleKeydown (event, idx) {
-      const allowedKeys = ['ArrowRight', 'ArrowLeft', 'Home', 'End']
-      const { key } = event
-      const {
-        current_page: currentPage,
-        first_page: firstPage,
-        has_previous_page: hasPreviousPage,
-        has_next_page: hasNextPage
-      } = paginationInfo.value
-
-      if (key === 'Tab') {
-        setTimeout(() => { focused.value = currentPage - firstPage + 2 })
-        return
-      }
-
-      if (!allowedKeys.includes(key)) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (key === 'ArrowRight' && hasNextPage) {
-        focused.value = focused.value + 1 >= links.value + 4
-          ? (hasPreviousPage ? 0 : 2)
-          : focused.value + 1
-      } else if (key === 'ArrowRight') {
-        focused.value = focused.value + 1 >= links.value + 2
-          ? 0
-          : focused.value + 1
-      } else if (key === 'ArrowLeft' && hasPreviousPage) {
-        focused.value = focused.value - 1 < 0
-          ? (hasNextPage ? links.value + 3 : links.value + 1)
-          : focused.value - 1
-      } else if (key === 'ArrowLeft') {
-        focused.value = focused.value - 1 <= 1
-          ? links.value + 3
-          : focused.value - 1
-      } else if (key === 'Home') {
-        focused.value = hasPreviousPage ? 0 : 2
-      } else if (key === 'End') {
-        focused.value = hasNextPage ? links.value + 3 : links.value + 1
-      }
-
-      const li = paginator.value?.children?.[focused.value]
-      const button = li?.children?.[0]
-
-      button?.focus()
-    }
-
-    return {
-      links,
-      t,
-      isCurrent,
-      changePage,
-      paginator,
-      focused,
-      tabIndex,
-      handleKeydown
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .pag-button {
   @apply relative inline-flex items-center
diff --git a/src/components/SearchHistoryItem.vue b/src/components/SearchHistoryItem.vue
index 856c38bf..b5948b0b 100644
--- a/src/components/SearchHistoryItem.vue
+++ b/src/components/SearchHistoryItem.vue
@@ -1,27 +1,4 @@
-<template>
-  <a
-    href="#"
-    class="history-item group has-ring-focus"
-    @click.prevent="$emit('click', search)"
-  >
-    <p class="flex-grow overflow-hidden whitespace-nowrap min-w-0 overflow-gradient" v-html="searchText" />
-    <button
-      class="remove-button has-ring-focus"
-      tabindex="-1"
-      :title="t('dashboard.search.removeFromHistory')"
-      @click.stop="$emit('click:remove', search)"
-    >
-      <span class="sr-only">
-        {{ t('dashboard.search.removeFromHistory')}}
-      </span>
-      <span aria-hidden="true">
-        <XIcon class="w-5 h-5" />
-      </span>
-    </button>
-  </a>
-</template>
-
-<script>
+<script setup>
 import { computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -33,64 +10,87 @@ import { createSearchKeywords } from '@/services/sheet/searchBooks'
 
 import { XIcon } from '@heroicons/vue/solid'
 
-export default {
-  components: { XIcon },
-
-  props: {
-    search: {
-      type: String,
-      required: true
-    }
-  },
-
-  emits: ['click', 'click:remove'],
-
-  setup (props) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { search } = toRefs(props)
-    const { escapeHtml } = useMarkdown()
+const props = defineProps({
+  search: {
+    type: String,
+    required: true
+  }
+})
 
-    const keywords = computed(() => Object.keys(createSearchKeywords()))
+defineEmits(['click', 'click:remove'])
 
-    const searchText = computed(() => {
-      const result = searchQuery.parse(search.value, { keywords: keywords.value })
+const { t } = useI18n({ useScope: 'global' })
 
-      if (typeof result === 'string') {
-        return escapeHtml(result)
-      }
+const { search } = toRefs(props)
+const { escapeHtml } = useMarkdown()
 
-      let withTags = search.value
+const keywords = computed(() => Object.keys(createSearchKeywords()))
 
-      for (const offset of result.offsets.reverse()) {
-        if (offset.text) {
-          withTags = withTags.substring(0, offset.offsetStart) +
-            escapeHtml(search.value.substring(offset.offsetStart, offset.offsetEnd)) +
-            withTags.substring(offset.offsetEnd)
-          continue
-        }
+const searchText = computed(() => {
+  const result = searchQuery.parse(search.value, { keywords: keywords.value })
 
-        const isExclude = withTags[offset.offsetStart - 1] === '-'
-        const startIndex = isExclude ? offset.offsetStart - 1 : offset.offsetStart
+  if (typeof result === 'string') {
+    return escapeHtml(result)
+  }
 
-        const tag = dedent`
-          <span class="bg-gray-300/40 dark:bg-gray-600/50 dark:group-hover:bg-gray-600/80 dark:group-focus-visible:bg-gray-600/80 py-px px-2 rounded inline-block">
-            ${escapeHtml(search.value.substring(startIndex, offset.offsetEnd))}
-          </span>
-        `
+  let withTags = search.value
+
+  for (const offset of result.offsets.reverse()) {
+    if (offset.text) {
+      withTags =
+        withTags.substring(0, offset.offsetStart) +
+        escapeHtml(
+          search.value.substring(offset.offsetStart, offset.offsetEnd)
+        ) +
+        withTags.substring(offset.offsetEnd)
+      continue
+    }
 
-        withTags = withTags.substring(0, startIndex) +
-          tag + withTags.substring(offset.offsetEnd)
-      }
+    const isExclude = withTags[offset.offsetStart - 1] === '-'
+    const startIndex = isExclude ? offset.offsetStart - 1 : offset.offsetStart
 
-      return withTags.replace(/\n/g, '')
-    })
+    const tag = dedent`
+      <span class="bg-gray-300/40 dark:bg-gray-600/50 dark:group-hover:bg-gray-600/80 dark:group-focus-visible:bg-gray-600/80 py-px px-2 rounded inline-block">
+        ${escapeHtml(search.value.substring(startIndex, offset.offsetEnd))}
+      </span>
+    `
 
-    return { t, searchText }
+    withTags =
+      withTags.substring(0, startIndex) +
+      tag +
+      withTags.substring(offset.offsetEnd)
   }
-}
+
+  return withTags.replace(/\n/g, '')
+})
 </script>
 
+<template>
+  <a
+    href="#"
+    class="history-item group has-ring-focus"
+    @click.prevent="$emit('click', search)"
+  >
+    <p
+      class="flex-grow overflow-hidden whitespace-nowrap min-w-0 overflow-gradient"
+      v-html="searchText"
+    />
+    <button
+      class="remove-button has-ring-focus"
+      tabindex="-1"
+      :title="t('dashboard.search.removeFromHistory')"
+      @click.stop="$emit('click:remove', search)"
+    >
+      <span class="sr-only">
+        {{ t('dashboard.search.removeFromHistory') }}
+      </span>
+      <span aria-hidden="true">
+        <XIcon class="w-5 h-5" />
+      </span>
+    </button>
+  </a>
+</template>
+
 <style lang="postcss" scoped>
 .history-item {
   @apply flex items-center relative
diff --git a/src/components/SearchItem.vue b/src/components/SearchItem.vue
index 2bb06b5d..25a23900 100644
--- a/src/components/SearchItem.vue
+++ b/src/components/SearchItem.vue
@@ -1,3 +1,82 @@
+<script setup>
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useImageLazyLoader from '@/composables/useImageLazyLoader'
+import Book from '@/model/Book'
+import { useSettingsStore } from '@/stores/settings'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+import {
+  ChevronRightIcon,
+  ClockIcon,
+  PhotographIcon
+} from '@heroicons/vue/outline'
+
+const props = defineProps({
+  result: {
+    type: Book,
+    required: true
+  }
+})
+
+const { result } = toRefs(props)
+
+const thumbnailUrl = computed(() => {
+  return result.value ? result.value.coverUrl.replace('_SL700_', '_SL300_') : ''
+})
+
+const searchItem = ref(null)
+
+const { imageHasError, imageLoading, setupObserver, observerCreated } =
+  useImageLazyLoader(thumbnailUrl, searchItem)
+
+onMounted(() => {
+  if (result.value) {
+    setupObserver()
+  }
+})
+
+watch(result, (newValue) => {
+  if (!newValue && !observerCreated.value) {
+    setupObserver()
+  }
+})
+
+const settingsStore = useSettingsStore()
+
+const spoilerMode = computed(() => settingsStore.spoilerMode)
+const blurNsfw = computed(() => settingsStore.blurNsfw)
+
+const blurCover = computed(() => {
+  return (
+    (spoilerMode.value.cover && !result.value.isRead) ||
+    (blurNsfw.value && result.value.isNsfw)
+  )
+})
+
+const { t } = useI18n({ useScope: 'global' })
+
+const authorsFormatted = computed(() => {
+  const separator = t('dashboard.details.header.authorSeparator')
+  let authors = (result.value.authors || []).join(separator)
+
+  if (result.value.authors && result.value.authors.length >= 2) {
+    const firstAuthors = (result.value.authors || [])
+      .slice(0, -1)
+      .join(separator)
+
+    authors = t('dashboard.details.header.authorListComplete', {
+      authors: firstAuthors,
+      lastAuthor: result.value.authors[result.value.authors.length - 1]
+    })
+  }
+
+  return authors
+})
+</script>
+
 <template>
   <router-link
     :to="{ name: 'BookDetails', params: { bookId: result.id } }"
@@ -20,14 +99,8 @@
             />
           </div>
         </div>
-        <div
-          v-else
-          :class="[
-            'result-cover',
-            blurCover ? 'is-hidden' : ''
-          ]"
-        >
-          <img :src="thumbnailUrl" :alt="result.title" >
+        <div v-else :class="['result-cover', blurCover ? 'is-hidden' : '']">
+          <img :src="thumbnailUrl" :alt="result.title" />
         </div>
       </FadeTransition>
     </div>
@@ -58,114 +131,6 @@
   </router-link>
 </template>
 
-<script>
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-
-import useImageLazyLoader from '@/composables/useImageLazyLoader'
-import { useSettingsStore } from '@/stores/settings'
-
-import {
-  ChevronRightIcon,
-  ClockIcon,
-  PhotographIcon
-} from '@heroicons/vue/outline'
-
-import Book from '@/model/Book'
-
-export default {
-  components: {
-    ChevronRightIcon,
-    ClockIcon,
-    FadeTransition,
-    PhotographIcon
-  },
-
-  props: {
-    result: {
-      type: Book,
-      required: true
-    }
-  },
-
-  setup (props) {
-    const { result } = toRefs(props)
-
-    const thumbnailUrl = computed(() => {
-      return result.value
-        ? result.value.coverUrl.replace('_SL700_', '_SL300_')
-        : ''
-    })
-
-    const searchItem = ref(null)
-
-    const {
-      imageHasError,
-      imageLoading,
-      setupObserver,
-      observerCreated
-    } = useImageLazyLoader(thumbnailUrl, searchItem)
-
-    onMounted(() => {
-      if (result.value) {
-        setupObserver()
-      }
-    })
-
-    watch(result, newValue => {
-      if (!newValue && !observerCreated.value) {
-        setupObserver()
-      }
-    })
-
-    const settingsStore = useSettingsStore()
-
-    const spoilerMode = computed(() => settingsStore.spoilerMode)
-    const blurNsfw = computed(() => settingsStore.blurNsfw)
-
-    const blurCover = computed(() => {
-      return (spoilerMode.value.cover && !result.value.isRead) ||
-        (blurNsfw.value && result.value.isNsfw)
-    })
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    const authorsFormatted = computed(() => {
-      const separator = t('dashboard.details.header.authorSeparator')
-      let authors = (result.value.authors || []).join(separator)
-
-      if (result.value.authors && result.value.authors.length >= 2) {
-        const firstAuthors = (result.value.authors || [])
-          .slice(0, -1)
-          .join(separator)
-
-        authors = t(
-          'dashboard.details.header.authorListComplete',
-          {
-            authors: firstAuthors,
-            lastAuthor: result.value.authors[result.value.authors.length - 1]
-          }
-        )
-      }
-
-      return authors
-    })
-
-    return {
-      searchItem,
-      imageHasError,
-      imageLoading,
-      thumbnailUrl,
-      spoilerMode,
-      authorsFormatted,
-      blurCover
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .result {
   @apply py-4 px-5 flex items-center space-x-4 transition-none;
@@ -201,7 +166,7 @@ export default {
 }
 
 .result-publisher {
-  @apply block text-gray-500 dark:text-gray-400
+  @apply block text-gray-500 dark:text-gray-400;
 }
 
 .result:where(:hover, :focus-visible) .result-publisher {
diff --git a/src/components/SignInWithGoogleButton.vue b/src/components/SignInWithGoogleButton.vue
index e965513d..bcd3e951 100644
--- a/src/components/SignInWithGoogleButton.vue
+++ b/src/components/SignInWithGoogleButton.vue
@@ -1,21 +1,4 @@
-<template>
-  <button
-    type="button"
-    class="button is-primary is-google-sign-in"
-    @click.stop="handleSignIn"
-    :disabled="!started"
-    v-if="!signedIn"
-  >
-    <div class="icon is-on-left is-google-icon" aria-hidden="true">
-      <span class="icon-bg">
-        <GoogleIcon />
-      </span>
-    </div>
-    <span>{{ t('auth.google.signIn') }}</span><span :class="collapse ? 'hidden md:block' : ''">&nbsp;{{ t('auth.google.withGoogle') }}</span>
-  </button>
-</template>
-
-<script>
+<script setup>
 import { computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -24,47 +7,50 @@ import { useAuthStore } from '@/stores/auth'
 
 import GoogleIcon from '@/components/icons/GoogleIcon.vue'
 
-export default {
-  components: {
-    GoogleIcon
-  },
-
-  props: {
-    collapse: Boolean
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const router = useRouter()
+defineProps({ collapse: Boolean })
 
-    const started = computed(() => authStore.started)
-    const signedIn = computed(() => authStore.signedIn)
+const authStore = useAuthStore()
+const router = useRouter()
 
-    const redirectToDashboard = () => {
-      if (signedIn.value) {
-        router.replace('/dashboard')
-      }
-    }
+const started = computed(() => authStore.started)
+const signedIn = computed(() => authStore.signedIn)
 
-    const handleSignIn = async () => {
-      await authStore.signIn()
-      redirectToDashboard()
-    }
+const redirectToDashboard = () => {
+  if (signedIn.value) {
+    router.replace('/dashboard')
+  }
+}
 
-    watch(signedIn, redirectToDashboard)
+const handleSignIn = async () => {
+  await authStore.signIn()
+  redirectToDashboard()
+}
 
-    const { t } = useI18n({ useScope: 'global' })
+watch(signedIn, redirectToDashboard)
 
-    return {
-      signedIn,
-      started,
-      handleSignIn,
-      t
-    }
-  }
-}
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
+<template>
+  <button
+    type="button"
+    class="button is-primary is-google-sign-in"
+    @click.stop="handleSignIn"
+    :disabled="!started"
+    v-if="!signedIn"
+  >
+    <div class="icon is-on-left is-google-icon" aria-hidden="true">
+      <span class="icon-bg">
+        <GoogleIcon />
+      </span>
+    </div>
+    <span>{{ t('auth.google.signIn') }}</span
+    ><span :class="collapse ? 'hidden md:block' : ''"
+      >&nbsp;{{ t('auth.google.withGoogle') }}</span
+    >
+  </button>
+</template>
+
 <style lang="postcss" scoped>
 .button.is-google-sign-in {
   @apply justify-center pl-12;
diff --git a/src/components/SimpleHeader.vue b/src/components/SimpleHeader.vue
index 2f31856e..65d83470 100644
--- a/src/components/SimpleHeader.vue
+++ b/src/components/SimpleHeader.vue
@@ -1,8 +1,22 @@
+<script setup>
+defineProps({
+  loading: Boolean,
+  subtitle: String,
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
 <template>
   <header class="bg-white shadow dark:bg-gray-800">
     <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
       <div v-if="loading" class="skeleton h-7 w-56"></div>
-      <h1 v-else class="text-xl font-display font-semibold text-gray-900 dark:text-gray-100">
+      <h1
+        v-else
+        class="text-xl font-display font-semibold text-gray-900 dark:text-gray-100"
+      >
         {{ title }}
       </h1>
       <p class="text-gray-500 dark:text-gray-400" v-if="subtitle">
@@ -11,18 +25,3 @@
     </div>
   </header>
 </template>
-
-<script>
-export default {
-  name: 'SimpleHeader',
-
-  props: {
-    loading: Boolean,
-    subtitle: String,
-    title: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/components/StatCard.vue b/src/components/StatCard.vue
index e7d086e6..c854071f 100644
--- a/src/components/StatCard.vue
+++ b/src/components/StatCard.vue
@@ -1,19 +1,62 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  alwaysHidden: Boolean,
+  loading: {
+    type: Boolean,
+    required: true
+  },
+  sensitive: Boolean,
+  title: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number]
+  }
+})
+
+const showValue = ref(!props.sensitive)
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
-  <div class="bg-gray-50 sm:shadow sm:rounded-md dark:bg-gray-800" v-if="loading">
+  <div
+    class="bg-gray-50 sm:shadow sm:rounded-md dark:bg-gray-800"
+    v-if="loading"
+  >
     <div class="flex items-center p-4">
-      <div class="skeleton w-10 h-10 shrink-0 md:w-12 md:h-12 mr-3 md:mr-4 rounded-md"></div>
+      <div
+        class="skeleton w-10 h-10 shrink-0 md:w-12 md:h-12 mr-3 md:mr-4 rounded-md"
+      />
       <div class="flex-1 space-y-2">
         <div class="skeleton h-3 w-24"></div>
         <div class="skeleton h-5 w-32"></div>
       </div>
     </div>
   </div>
-  <div class="flex items-center justify-center bg-white dark:bg-gray-800 p-4 sm:rounded-md sm:shadow sm:hover:shadow-md motion-safe:transition-shadow" v-else>
-    <div class="flex shrink-0 w-10 h-10 md:w-12 md:h-12 mr-3 md:mr-4 items-center justify-center rounded-md bg-primary-100 dark:bg-gray-800" aria-hidden="true">
-      <slot name="icon" css-class="text-primary-600 dark:text-gray-500 h-6 w-6 md:h-8 md:w-8"></slot>
+  <div
+    class="flex items-center justify-center bg-white dark:bg-gray-800 p-4 sm:rounded-md sm:shadow sm:hover:shadow-md motion-safe:transition-shadow"
+    v-else
+  >
+    <div
+      class="flex shrink-0 w-10 h-10 md:w-12 md:h-12 mr-3 md:mr-4 items-center justify-center rounded-md bg-primary-100 dark:bg-gray-800"
+      aria-hidden="true"
+    >
+      <slot
+        name="icon"
+        css-class="text-primary-600 dark:text-gray-500 h-6 w-6 md:h-8 md:w-8"
+      ></slot>
     </div>
     <div class="flex-1">
-      <p class="text-gray-500 dark:text-gray-300 font-semibold text-xs mb-0">{{ title }}</p>
+      <p class="text-gray-500 dark:text-gray-300 font-semibold text-xs mb-0">
+        {{ title }}
+      </p>
       <div class="flex justify-between w-full">
         <transition
           mode="out-in"
@@ -24,10 +67,16 @@
           enter-from-class="opacity-0 -translate-x-2"
           enter-to-class="opacity-100 translate-x-0"
         >
-          <p class="font-semibold dark:text-gray-50 text-md sm:text-lg lg:text-xl mb-0" v-if="showValue && !alwaysHidden">
+          <p
+            class="font-semibold dark:text-gray-50 text-md sm:text-lg lg:text-xl mb-0"
+            v-if="showValue && !alwaysHidden"
+          >
             {{ value || '' }}
           </p>
-          <div v-else class="h-5 sm:h-6 mt-1 bg-gray-300 dark:bg-gray-700 rounded w-32 lg:w-24"></div>
+          <div
+            v-else
+            class="h-5 sm:h-6 mt-1 bg-gray-300 dark:bg-gray-700 rounded w-32 lg:w-24"
+          ></div>
         </transition>
       </div>
     </div>
@@ -50,48 +99,13 @@
         <EyeOffIcon class="text-gray-500" v-else />
       </transition>
       <span class="sr-only">
-        {{ t(`dashboard.home.overview.${!showValue ? 'showValue' : 'hideValue'}`, { title }) }}
+        {{
+          t(
+            `dashboard.home.overview.${!showValue ? 'showValue' : 'hideValue'}`,
+            { title }
+          )
+        }}
       </span>
     </button>
   </div>
 </template>
-
-<script>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
-
-export default {
-  name: 'StatCard',
-
-  components: {
-    EyeIcon,
-    EyeOffIcon
-  },
-
-  props: {
-    alwaysHidden: Boolean,
-    loading: {
-      type: Boolean,
-      required: true
-    },
-    sensitive: Boolean,
-    title: {
-      type: String,
-      required: true
-    },
-    value: {
-      type: [String, Number]
-    }
-  },
-
-  setup (props) {
-    const showValue = ref(!props.sensitive)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { showValue, t }
-  }
-}
-</script>
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index cad61ce2..874fb91a 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -1,3 +1,55 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  useSettingsStore,
+  THEME_SYSTEM,
+  THEME_DARK,
+  THEME_LIGHT
+} from '@/stores/settings'
+
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption
+} from '@headlessui/vue'
+
+import { MoonIcon, SunIcon } from '@heroicons/vue/outline'
+
+import {
+  DeviceMobileIcon as DeviceMobileIconSolid,
+  DesktopComputerIcon as DesktopComputerIconSolid,
+  MoonIcon as MoonIconSolid,
+  SunIcon as SunIconSolid
+} from '@heroicons/vue/solid'
+
+defineProps({ light: Boolean })
+
+const { t } = useI18n({ useScope: 'global' })
+const settingsStore = useSettingsStore()
+
+const theme = computed({
+  get: () => settingsStore.theme,
+  set: (newTheme) => settingsStore.updateTheme(newTheme)
+})
+
+const options = computed(() => [
+  { key: THEME_LIGHT, icon: SunIcon, menuIcon: SunIconSolid },
+  { key: THEME_DARK, icon: MoonIcon, menuIcon: MoonIconSolid },
+  {
+    key: THEME_SYSTEM,
+    responsive: true,
+    menuIcon: [DeviceMobileIconSolid, DesktopComputerIconSolid]
+  }
+])
+
+const currentOption = computed(() => {
+  return options.value.find((o) => o.key === theme.value)
+})
+</script>
+
 <template>
   <Listbox
     v-model="theme"
@@ -11,6 +63,7 @@
     >
       <span aria-hidden="true">
         <template v-if="theme === 'system'">
+          <!-- eslint-disable-next-line prettier/prettier -->
           <component
             :is="options[0].icon"
             class="w-6 h-6 dark:hidden system"
@@ -20,11 +73,7 @@
             class="w-6 h-6 hidden dark:block system"
           />
         </template>
-        <component
-          v-else
-          :is="currentOption.icon"
-          class="w-6 h-6 not-system"
-        />
+        <component v-else :is="currentOption.icon" class="w-6 h-6 not-system" />
       </span>
       <span class="sr-only">
         {{ t('dashboard.settings.appearence.theme.label') }}
@@ -46,10 +95,7 @@
           v-slot="{ active }"
           as="template"
         >
-          <li
-            :class="active ? 'active' : ''"
-            class="theme"
-          >
+          <li :class="active ? 'active' : ''" class="theme">
             <span aria-hidden="true">
               <component
                 v-if="!option.responsive"
@@ -79,79 +125,6 @@
   </Listbox>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  useSettingsStore,
-  THEME_SYSTEM,
-  THEME_DARK,
-  THEME_LIGHT
-} from '@/stores/settings'
-
-import {
-  Listbox,
-  ListboxButton,
-  ListboxOptions,
-  ListboxOption
-} from '@headlessui/vue'
-
-import { MoonIcon, SunIcon } from '@heroicons/vue/outline'
-
-import {
-  DeviceMobileIcon as DeviceMobileIconSolid,
-  DesktopComputerIcon as DesktopComputerIconSolid,
-  MoonIcon as MoonIconSolid,
-  SunIcon as SunIconSolid
-} from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    Listbox,
-    ListboxButton,
-    ListboxOptions,
-    ListboxOption,
-    DesktopComputerIconSolid,
-    DeviceMobileIconSolid,
-    MoonIcon,
-    MoonIconSolid,
-    SunIcon,
-    SunIconSolid
-  },
-
-  props: {
-    light: Boolean
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-    const settingsStore = useSettingsStore()
-
-    const theme = computed({
-      get: () => settingsStore.theme,
-      set: newTheme => settingsStore.updateTheme(newTheme)
-    })
-
-    const options = computed(() => [
-      { key: THEME_LIGHT, icon: SunIcon, menuIcon: SunIconSolid },
-      { key: THEME_DARK, icon: MoonIcon, menuIcon: MoonIconSolid },
-      {
-        key: THEME_SYSTEM,
-        responsive: true,
-        menuIcon: [DeviceMobileIconSolid, DesktopComputerIconSolid]
-      }
-    ])
-
-    const currentOption = computed(() => {
-      return options.value.find(o => o.key === theme.value)
-    })
-
-    return { theme, options, currentOption, t }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .theme-chooser {
   @apply w-8 h-8 flex items-center justify-center rounded-full text-gray-400;
@@ -222,11 +195,11 @@ export default {
   @apply text-gray-600 dark:text-gray-300;
 }
 
-.theme[aria-selected="true"] {
+.theme[aria-selected='true'] {
   @apply text-blue-500 dark:text-blue-300 font-semibold;
 }
 
-.theme[aria-selected="true"] svg {
+.theme[aria-selected='true'] svg {
   @apply text-blue-500 dark:text-blue-300;
 }
 </style>
diff --git a/src/components/Typewriter.vue b/src/components/Typewriter.vue
index 99123a3f..7b6c9b61 100644
--- a/src/components/Typewriter.vue
+++ b/src/components/Typewriter.vue
@@ -1,95 +1,91 @@
-<template>
-  <span class="typewriter">
-    <span :class="textClass" aria-hidden="true">{{ displayText.join('') }}</span>
-    <span class="cursor" aria-hidden="true"></span>
-    <span class="sr-only">{{ words[wordIdx] }}</span>
-  </span>
-</template>
-
-<script>
+<script setup>
 import { onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
 
-export default {
-  props: {
-    textClass: String,
-    speed: {
-      type: Number,
-      default: 500
-    },
-    deleteSpeed: {
-      type: Number,
-      default: 166
-    },
-    nextWordInterval: {
-      type: Number,
-      default: 1200
-    },
-    words: {
-      type: Array,
-      default: () => []
-    }
+const props = defineProps({
+  textClass: String,
+  speed: {
+    type: Number,
+    default: 500
   },
+  deleteSpeed: {
+    type: Number,
+    default: 166
+  },
+  nextWordInterval: {
+    type: Number,
+    default: 1200
+  },
+  words: {
+    type: Array,
+    default: () => []
+  }
+})
 
-  setup (props) {
-    const { speed, deleteSpeed, nextWordInterval, words } = toRefs(props)
-
-    const currentWord = ref('')
-    const displayText = ref(words.value[0].split(''))
-    const wordIdx = ref(0)
-    const animate = ref(null)
-    const isWaitingNextWord = ref(true)
-
-    const timeoutSpeed = ref(null)
+const { speed, deleteSpeed, nextWordInterval, words } = toRefs(props)
 
-    function start () {
-      if (words.value && words.value.length > 0) {
-        // currentWord.value = words.value[wordIdx.value].split('')
-        timeoutSpeed.value = nextWordInterval.value
-        animate.value = setTimeout(type, timeoutSpeed.value)
-      }
-    }
+const currentWord = ref('')
+const displayText = ref(words.value[0].split(''))
+const wordIdx = ref(0)
+const animate = ref(null)
+const isWaitingNextWord = ref(true)
 
-    function type () {
-      if (currentWord.value.length > 0) {
-        displayText.value.push(currentWord.value.shift())
-      } else if (
-        !isWaitingNextWord.value &&
-        currentWord.value.length === 0 &&
-        displayText.value.length === words.value[wordIdx.value].length
-      ) {
-        timeoutSpeed.value = nextWordInterval.value
-        isWaitingNextWord.value = true
-      } else if (currentWord.value.length === 0 && displayText.value.length > 0) {
-        timeoutSpeed.value = deleteSpeed.value
-        displayText.value.pop()
-      } else if (currentWord.value.length === 0 && displayText.value.length === 0) {
-        if (wordIdx.value < (words.value.length - 1)) {
-          wordIdx.value++
-        } else {
-          wordIdx.value = 0
-        }
+const timeoutSpeed = ref(null)
 
-        timeoutSpeed.value = speed.value
-        isWaitingNextWord.value = false
-        currentWord.value = words.value[wordIdx.value].split('')
-        displayText.value.push(currentWord.value.shift())
-      }
+function start() {
+  if (words.value && words.value.length > 0) {
+    // currentWord.value = words.value[wordIdx.value].split('')
+    timeoutSpeed.value = nextWordInterval.value
+    animate.value = setTimeout(type, timeoutSpeed.value)
+  }
+}
 
-      animate.value = setTimeout(type, timeoutSpeed.value)
+function type() {
+  if (currentWord.value.length > 0) {
+    displayText.value.push(currentWord.value.shift())
+  } else if (
+    !isWaitingNextWord.value &&
+    currentWord.value.length === 0 &&
+    displayText.value.length === words.value[wordIdx.value].length
+  ) {
+    timeoutSpeed.value = nextWordInterval.value
+    isWaitingNextWord.value = true
+  } else if (currentWord.value.length === 0 && displayText.value.length > 0) {
+    timeoutSpeed.value = deleteSpeed.value
+    displayText.value.pop()
+  } else if (currentWord.value.length === 0 && displayText.value.length === 0) {
+    if (wordIdx.value < words.value.length - 1) {
+      wordIdx.value++
+    } else {
+      wordIdx.value = 0
     }
 
-    onMounted(() => start())
-    onBeforeUnmount(() => {
-      if (animate.value) {
-        clearTimeout(animate.value)
-      }
-    })
-
-    return { displayText, wordIdx }
+    timeoutSpeed.value = speed.value
+    isWaitingNextWord.value = false
+    currentWord.value = words.value[wordIdx.value].split('')
+    displayText.value.push(currentWord.value.shift())
   }
+
+  animate.value = setTimeout(type, timeoutSpeed.value)
 }
+
+onMounted(() => start())
+onBeforeUnmount(() => {
+  if (animate.value) {
+    clearTimeout(animate.value)
+  }
+})
 </script>
 
+<template>
+  <span class="typewriter">
+    <span :class="textClass" aria-hidden="true">{{
+      displayText.join('')
+    }}</span>
+    <span class="cursor" aria-hidden="true"></span>
+    <span class="sr-only">{{ words[wordIdx] }}</span>
+  </span>
+</template>
+
 <style lang="postcss" scoped>
 .cursor {
   @apply inline-block ml-1.5 w-1 h-[1em] align-bottom
diff --git a/src/components/book/BookBreadcrumb.vue b/src/components/book/BookBreadcrumb.vue
index 3e18adeb..009b756d 100644
--- a/src/components/book/BookBreadcrumb.vue
+++ b/src/components/book/BookBreadcrumb.vue
@@ -1,5 +1,42 @@
+<script setup>
+import { inject, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Book from '@/model/Book'
+
+import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  book: Book,
+  loading: Boolean,
+  hideHome: Boolean
+})
+
+const { t } = useI18n({ useScope: 'global' })
+const { book } = toRefs(props)
+
+const showSearchDialog = inject('showSearchDialog')
+
+function showCollection() {
+  const keywords = {
+    [t('dashboard.search.keywords.title')]: book.value.titleParts.title + ' #',
+    [t('dashboard.search.keywords.publisher')]: book.value.publisher,
+    [t('dashboard.search.keywords.group')]: book.value.group
+  }
+
+  const queryString = Object.entries(keywords)
+    .map(([keyword, value]) => `${keyword}:"${value}"`)
+    .join(' ')
+
+  showSearchDialog(queryString)
+}
+</script>
+
 <template>
-  <nav v-if="!loading" class="text-sm font-medium text-gray-500 dark:text-gray-300">
+  <nav
+    v-if="!loading"
+    class="text-sm font-medium text-gray-500 dark:text-gray-300"
+  >
     <ul class="flex space-x-1 md:space-x-3 items-center">
       <li v-if="!hideHome" class="shrink-0">
         <router-link
@@ -37,7 +74,11 @@
           {{ book.group }}
         </router-link>
       </li>
-      <li aria-hidden="true" v-if="book.titleParts.number && !hideHome" class="shrink-0">
+      <li
+        aria-hidden="true"
+        v-if="book.titleParts.number && !hideHome"
+        class="shrink-0"
+      >
         <ChevronRightIcon class="h-5 w-5 text-gray-400" />
       </li>
       <li v-if="book.titleParts.number && !hideHome" class="grow">
@@ -53,48 +94,3 @@
   </nav>
   <div v-else class="skeleton h-5 w-44"></div>
 </template>
-
-<script>
-import { inject, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Book from '@/model/Book'
-
-import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    ChevronRightIcon,
-    HomeIcon
-  },
-
-  props: {
-    book: Book,
-    loading: Boolean,
-    hideHome: Boolean
-  },
-
-  setup (props) {
-    const { t } = useI18n({ useScope: 'global' })
-    const { book } = toRefs(props)
-
-    const showSearchDialog = inject('showSearchDialog')
-
-    function showCollection () {
-      const keywords = {
-        [t('dashboard.search.keywords.title')]: book.value.titleParts.title + ' #',
-        [t('dashboard.search.keywords.publisher')]: book.value.publisher,
-        [t('dashboard.search.keywords.group')]: book.value.group
-      }
-
-      const queryString = Object.entries(keywords)
-        .map(([keyword, value]) => `${keyword}:"${value}"`)
-        .join(' ')
-
-      showSearchDialog(queryString)
-    }
-
-    return { t, showCollection }
-  }
-}
-</script>
diff --git a/src/components/book/BookCard.vue b/src/components/book/BookCard.vue
index f22c0c47..ae98a0b7 100644
--- a/src/components/book/BookCard.vue
+++ b/src/components/book/BookCard.vue
@@ -1,3 +1,77 @@
+<script setup>
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useImageLazyLoader from '@/composables/useImageLazyLoader'
+import Book from '@/model/Book'
+import { useSettingsStore } from '@/stores/settings'
+
+import { BookOpenIcon, EyeOffIcon } from '@heroicons/vue/outline'
+import { BookmarkIcon, ClockIcon } from '@heroicons/vue/solid'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const props = defineProps({
+  book: Book,
+  current: Boolean,
+  imageOnly: Boolean,
+  loading: {
+    type: Boolean,
+    required: true
+  },
+  tabindex: String
+})
+
+const { book, loading } = toRefs(props)
+const { t } = useI18n({ useScope: 'global' })
+
+const thumbnailUrl = computed(() => {
+  return book.value ? book.value.coverUrl.replace('_SL700_', '_SL300_') : ''
+})
+
+const loadedCard = ref(null)
+
+const { imageHasError, imageLoading, setupObserver, observerCreated } =
+  useImageLazyLoader(thumbnailUrl, loadedCard)
+
+const volume = computed(() => {
+  if (!book.value) {
+    return ''
+  }
+
+  const isSingle = book.value.titleParts.number === null
+
+  return t(
+    isSingle ? 'book.single' : 'book.volume',
+    isSingle ? undefined : { number: book.value.titleParts.number }
+  )
+})
+
+onMounted(() => {
+  if (!loading.value && book.value) {
+    setupObserver()
+  }
+})
+
+watch(loading, (newValue) => {
+  if (!newValue && !observerCreated.value) {
+    setupObserver()
+  }
+})
+
+const settingsStore = useSettingsStore()
+const mode = computed(() => settingsStore.gridMode)
+const spoilerMode = computed(() => settingsStore.spoilerMode)
+const blurNsfw = computed(() => settingsStore.blurNsfw)
+
+const blurCover = computed(() => {
+  return (
+    (spoilerMode.value.cover && !book.value.isRead) ||
+    (blurNsfw.value && book.value.isNsfw)
+  )
+})
+</script>
+
 <template>
   <div v-if="loading">
     <div class="skeleton shadow rounded-md aspect-w-2 aspect-h-3">
@@ -23,7 +97,11 @@
   <component
     v-else
     :is="imageOnly ? 'div' : 'RouterLink'"
-    :to="!imageOnly ? { name: 'BookDetails', params: { bookId: book.id } } : undefined"
+    :to="
+      !imageOnly
+        ? { name: 'BookDetails', params: { bookId: book.id } }
+        : undefined
+    "
     class="book-link group focus:outline-none relative"
     ref="loadedCard"
     :title="!imageOnly ? book.title : undefined"
@@ -33,21 +111,17 @@
     <component
       :is="imageOnly ? 'RouterLink' : 'div'"
       :class="blurCover ? 'blurred' : ''"
-      :to="imageOnly ? { name: 'BookDetails', params: { bookId: book.id } } : undefined"
+      :to="
+        imageOnly
+          ? { name: 'BookDetails', params: { bookId: book.id } }
+          : undefined
+      "
       class="book-card !outline-none has-ring-focus dark:focus-visible:ring-offset-gray-900"
       :aria-current="current && imageOnly ? 'page' : undefined"
       :tabindex="imageOnly ? tabindex : undefined"
       :title="imageOnly ? book.title : undefined"
     >
-      <transition
-        mode="out-in"
-        leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-        enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-      >
+      <FadeTransition>
         <div
           v-if="imageLoading || imageHasError"
           class="w-full h-full flex justify-center items-center"
@@ -63,12 +137,9 @@
         </div>
         <div v-else class="book-cover-wrapper" aria-hidden="true">
           <img
-            :class="[
-              'book-cover',
-              blurCover ? 'is-spoiler' : ''
-            ]"
+            :class="['book-cover', blurCover ? 'is-spoiler' : '']"
             :src="thumbnailUrl"
-          >
+          />
 
           <div
             v-if="blurCover"
@@ -77,7 +148,7 @@
             <EyeOffIcon class="w-8 h-8 text-gray-800 opacity-60" />
           </div>
         </div>
-      </transition>
+      </FadeTransition>
 
       <div
         v-if="(book.isRead || current || book.isFuture) && !imageOnly"
@@ -86,9 +157,13 @@
         <span v-if="current" class="current-volume">
           {{ t('book.currentVolume') }}
         </span>
-        <template v-if="!book.isFuture && book.isRead && mode === 'comfortable'">
+        <template
+          v-if="!book.isFuture && book.isRead && mode === 'comfortable'"
+        >
           <span class="sr-only">{{ t('book.read') }}</span>
-          <div class="bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5 self-end ml-auto">
+          <div
+            class="bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5 self-end ml-auto"
+          >
             <BookmarkIcon class="w-5 h-5 text-primary-500" />
           </div>
         </template>
@@ -109,14 +184,19 @@
         >
           <div class="inline-flex text-white w-full items-center">
             <div class="inline-flex flex-col grow min-w-0">
-              <span class="font-semibold font-display text-[0.8rem] sm:text-sm truncate max-w-full">
+              <span
+                class="font-semibold font-display text-[0.8rem] sm:text-sm truncate max-w-full"
+              >
                 {{ book.titleParts.title }}
               </span>
               <span class="font-medium text-xxs sm:text-xs">
                 {{ volume }}
               </span>
             </div>
-            <div v-if="!book.isFuture && book.isRead" class="shrink-0 bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5 mt-px ml-1 sm:ml-2">
+            <div
+              v-if="!book.isFuture && book.isRead"
+              class="shrink-0 bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5 mt-px ml-1 sm:ml-2"
+            >
               <BookmarkIcon class="w-4 sm:w-5 h-4 sm:h-5 text-primary-500" />
             </div>
           </div>
@@ -132,123 +212,20 @@
     </div>
 
     <div v-if="mode === 'comfortable' && !imageOnly" class="mt-3">
-      <p class="text-[0.8rem] sm:text-sm font-display font-semibold truncate text-gray-900 dark:text-gray-200">
+      <p
+        class="text-[0.8rem] sm:text-sm font-display font-semibold truncate text-gray-900 dark:text-gray-200"
+      >
         {{ book.titleParts.title }}
       </p>
-      <p class="text-xxs sm:text-xs font-medium truncate text-gray-600 dark:text-gray-400">
+      <p
+        class="text-xxs sm:text-xs font-medium truncate text-gray-600 dark:text-gray-400"
+      >
         {{ volume }}
       </p>
     </div>
   </component>
 </template>
 
-<script>
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useImageLazyLoader from '@/composables/useImageLazyLoader'
-import { useSettingsStore } from '@/stores/settings'
-
-import { BookOpenIcon, EyeOffIcon } from '@heroicons/vue/outline'
-import { BookmarkIcon, ClockIcon } from '@heroicons/vue/solid'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-
-import Book from '@/model/Book'
-
-export default {
-  name: 'BookCard',
-
-  components: {
-    BookOpenIcon,
-    BookmarkIcon,
-    ClockIcon,
-    EyeOffIcon,
-    FadeTransition
-  },
-
-  props: {
-    book: {
-      type: Book
-    },
-    current: Boolean,
-    imageOnly: Boolean,
-    loading: {
-      type: Boolean,
-      required: true
-    },
-    tabindex: String
-  },
-
-  setup (props) {
-    const { book, loading } = toRefs(props)
-    const { t } = useI18n({ useScope: 'global' })
-
-    const thumbnailUrl = computed(() => {
-      return book.value
-        ? book.value.coverUrl.replace('_SL700_', '_SL300_')
-        : ''
-    })
-
-    const loadedCard = ref(null)
-
-    const {
-      imageHasError,
-      imageLoading,
-      setupObserver,
-      observerCreated
-    } = useImageLazyLoader(thumbnailUrl, loadedCard)
-
-    const volume = computed(() => {
-      if (!book.value) {
-        return ''
-      }
-
-      const isSingle = book.value.titleParts.number === null
-
-      return t(
-        isSingle ? 'book.single' : 'book.volume',
-        isSingle ? undefined : { number: book.value.titleParts.number }
-      )
-    })
-
-    onMounted(() => {
-      if (!loading.value && book.value) {
-        setupObserver()
-      }
-    })
-
-    watch(loading, newValue => {
-      if (!newValue && !observerCreated.value) {
-        setupObserver()
-      }
-    })
-
-    const settingsStore = useSettingsStore()
-    const mode = computed(() => settingsStore.gridMode)
-    const spoilerMode = computed(() => settingsStore.spoilerMode)
-    const blurNsfw = computed(() => settingsStore.blurNsfw)
-
-    const blurCover = computed(() => {
-      return (spoilerMode.value.cover && !book.value.isRead) ||
-        (blurNsfw.value && book.value.isNsfw)
-    })
-
-    return {
-      loadedCard,
-      imageHasError,
-      imageLoading,
-      thumbnailUrl,
-      volume,
-      mode,
-      spoilerMode,
-      blurCover,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .book-card {
   will-change: transform, box-shadow;
@@ -267,7 +244,11 @@ export default {
 }
 
 .book-gradient {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.7) 0%,
+    transparent 60%
+  );
 }
 
 .book-cover-wrapper {
@@ -296,7 +277,7 @@ export default {
 .badge-wrapper {
   @apply p-2 absolute inset-0 flex justify-start items-start
     bg-gray-900 dark:bg-gray-800
-    bg-opacity-20 dark:bg-opacity-60
+    bg-opacity-20 dark:bg-opacity-60;
 }
 
 .book-card.blurred :where(.book-cover, .cover-eye) {
diff --git a/src/components/book/BookCardReadingActions.vue b/src/components/book/BookCardReadingActions.vue
index 172046f2..38971ff9 100644
--- a/src/components/book/BookCardReadingActions.vue
+++ b/src/components/book/BookCardReadingActions.vue
@@ -1,5 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Book from '@/model/Book'
+
+import { CalendarIcon, CheckIcon } from '@heroicons/vue/outline'
+import { CheckIcon as CheckIconSolid } from '@heroicons/vue/solid'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
+import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
+
+defineProps({
+  book: Book,
+  disabled: Boolean,
+  editing: Boolean
+})
+
+defineEmits(['click:check', 'click:calendar'])
+
+const { t } = useI18n()
+
+const readAt = ref(new Date().toISOString().substring(0, 10))
+
+function handleCalendar(close) {
+  const date = new Date(readAt.value)
+  date.setMinutes(date.getMinutes() + date.getTimezoneOffset())
+
+  emit('click:calendar', date)
+  close()
+}
+</script>
+
 <template>
-  <div class="bg-white dark:bg-gray-600 h-8 shadow-md rounded-full px-2 py-1.5 flex items-center">
+  <div
+    class="bg-white dark:bg-gray-600 h-8 shadow-md rounded-full px-2 py-1.5 flex items-center"
+  >
     <FadeTransition>
       <div v-if="!editing" class="space-x-1 flex items-center relative">
         <button
@@ -36,10 +73,7 @@
                 @submit.prevent="handleCalendar(close)"
               >
                 <div>
-                  <label
-                    :for="'read-at-' + book.id"
-                    class="sr-only"
-                  >
+                  <label :for="'read-at-' + book.id" class="sr-only">
                     {{ t('book.properties.readAt') }}
                   </label>
                   <input
@@ -71,61 +105,10 @@
         </Popover>
       </div>
       <div v-else aria-hidden="true">
-        <LoadingSpinIcon class="w-5 h-5 motion-safe:animate-spin text-primary-600 dark:text-gray-200" />
+        <LoadingSpinIcon
+          class="w-5 h-5 motion-safe:animate-spin text-primary-600 dark:text-gray-200"
+        />
       </div>
     </FadeTransition>
   </div>
 </template>
-
-<script>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Book from '@/model/Book'
-
-import { CalendarIcon, CheckIcon } from '@heroicons/vue/outline'
-import { CheckIcon as CheckIconSolid } from '@heroicons/vue/solid'
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
-import ScaleTransition from '@/components/transitions/ScaleTransition.vue'
-
-export default {
-  components: {
-    CalendarIcon,
-    CheckIcon,
-    CheckIconSolid,
-    FadeTransition,
-    LoadingSpinIcon,
-    Popover,
-    PopoverButton,
-    PopoverPanel,
-    ScaleTransition
-  },
-
-  props: {
-    book: Book,
-    disabled: Boolean,
-    editing: Boolean
-  },
-
-  emits: ['click:check', 'click:calendar'],
-
-  setup (_, { emit }) {
-    const { t } = useI18n()
-
-    const readAt = ref(new Date().toISOString().substring(0, 10))
-
-    function handleCalendar (close) {
-      const date = new Date(readAt.value)
-      date.setMinutes(date.getMinutes() + date.getTimezoneOffset())
-
-      emit('click:calendar', date)
-      close()
-    }
-
-    return { t, readAt, handleCalendar }
-  }
-}
-</script>
diff --git a/src/components/book/BookCarousel.vue b/src/components/book/BookCarousel.vue
index ca722252..8c120e7d 100644
--- a/src/components/book/BookCarousel.vue
+++ b/src/components/book/BookCarousel.vue
@@ -1,8 +1,147 @@
+<script setup>
+import { computed, ref, toRefs } from 'vue'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import { STATUS_READ } from '@/model/Book'
+import useEditBookMutation from '@/mutations/useEditBookMutation'
+import { useSheetStore } from '@/stores/sheet'
+import useLastAddedQuery from '@/queries/useLastAddedQuery'
+import useLatestReadingsQuery from '@/queries/useLatestReadingsQuery'
+import useNextReadsQuery from '@/queries/useNextReadsQuery'
+
+import { ArrowSmRightIcon } from '@heroicons/vue/solid'
+
+import BookCard from '@/components/book/BookCard.vue'
+import BookCardReadingActions from '@/components/book/BookCardReadingActions.vue'
+
+const props = defineProps({
+  collection: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  buttonText: {
+    type: String
+  },
+  buttonLink: {
+    type: Object
+  }
+})
+
+const { collection } = toRefs(props)
+const sheetStore = useSheetStore()
+
+const sheetLoading = computed(() => sheetStore.loading)
+const sheetId = computed(() => sheetStore.sheetId)
+const enabled = computed(() => sheetId.value !== null)
+
+const collectionMapping = {
+  'last-added': useLastAddedQuery,
+  'latest-readings': useLatestReadingsQuery,
+  'next-reads': useNextReadsQuery
+}
+
+// eslint-disable-next-line prettier/prettier
+const {
+  isLoading: loading,
+  data: collectionItems
+} = collectionMapping[collection.value]({ enabled })
+
+const carousel = ref(null)
+const focused = ref(0)
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleKeydown(event) {
+  const allowedKeys = ['ArrowRight', 'ArrowLeft', 'Home', 'End']
+  const { key } = event
+
+  if (key === 'Tab') {
+    setTimeout(() => {
+      focused.value = 0
+    })
+    return
+  }
+
+  if (!allowedKeys.includes(key) || editing.value) {
+    return
+  }
+
+  // https://stackoverflow.com/a/21696585
+  const visibleItems = Array.from(carousel.value.children).filter(
+    (el) => el.offsetParent !== null
+  )
+  const totalItems = visibleItems.length
+
+  if (key === 'Home' && focused.value === 0) {
+    return
+  }
+
+  if (key === 'End' && focused.value === totalItems - 1) {
+    return
+  }
+
+  event.preventDefault()
+
+  if (key === 'ArrowRight') {
+    focused.value = Math.min(focused.value + 1, totalItems - 1)
+  } else if (key === 'ArrowLeft') {
+    focused.value = Math.max(focused.value - 1, 0)
+  } else if (key === 'Home') {
+    focused.value = 0
+  } else if (key === 'End') {
+    focused.value = totalItems - 1
+  }
+
+  const li = carousel.value?.children?.[focused.value]
+  let card = li?.children?.[0]
+
+  if (collection.value === 'next-reads') {
+    card = card?.children?.[0]
+  }
+
+  card?.focus()
+}
+
+const { isLoading: editing, mutate: edit } = useEditBookMutation()
+const editingBookId = ref(null)
+
+function handleRead(book, readAt) {
+  if (editing.value) {
+    return
+  }
+
+  /** @type {import('@/model/Book').default} */
+  const newBook = cloneDeep(book)
+  newBook.status = STATUS_READ
+  newBook.readAt = readAt
+
+  editingBookId.value = newBook.id
+
+  edit(newBook, {
+    onSuccess() {
+      editingBookId.value = null
+    }
+  })
+}
+
+function handleReadToday(book) {
+  handleRead(book, new Date())
+}
+</script>
+
 <template>
   <div v-if="sheetLoading || loading">
     <div class="skeleton h-6 w-48 mt-8 mb-3"></div>
 
-    <div class="-mx-5 md:mx-0 px-5 md:px-0 overflow-x-auto md:overflow-x-visible flex md:grid md:grid-cols-5 lg:grid-cols-6 gap-5">
+    <div
+      class="-mx-5 md:mx-0 px-5 md:px-0 overflow-x-auto md:overflow-x-visible flex md:grid md:grid-cols-5 lg:grid-cols-6 gap-5"
+    >
       <div
         v-for="idx in 6"
         :key="idx"
@@ -19,7 +158,10 @@
     :aria-labelledby="collection + '-title'"
   >
     <div class="flex justify-between items-center w-full mt-8 mb-2">
-      <h2 :id="collection + '-title'" class="font-medium font-display text-lg dark:text-gray-200">
+      <h2
+        :id="collection + '-title'"
+        class="font-medium font-display text-lg dark:text-gray-200"
+      >
         {{ title }}
       </h2>
 
@@ -30,7 +172,9 @@
       >
         {{ buttonText }}
         <span aria-hidden="true">
-          <ArrowSmRightIcon class="is-right motion-safe:transition-transform group-hover:translate-x-1" />
+          <ArrowSmRightIcon
+            class="is-right motion-safe:transition-transform group-hover:translate-x-1"
+          />
         </span>
       </router-link>
     </div>
@@ -48,7 +192,9 @@
         v-for="(book, bookIdx) in collectionItems"
         :key="book.id"
         :class="[
-          collectionItems.length > 2 ? 'shrink-0 w-2/5 sm:w-3/12 md:w-auto snap-start md:snap-none scroll-ml-5 md:scroll-ml-0' : '',
+          collectionItems.length > 2
+            ? 'shrink-0 w-2/5 sm:w-3/12 md:w-auto snap-start md:snap-none scroll-ml-5 md:scroll-ml-0'
+            : '',
           bookIdx === 5 ? 'md:hidden lg:block' : ''
         ]"
       >
@@ -73,159 +219,3 @@
     </ul>
   </section>
 </template>
-
-<script>
-import { computed, ref, toRefs } from 'vue'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import { STATUS_READ } from '@/model/Book'
-import { useSheetStore } from '@/stores/sheet'
-import useLastAddedQuery from '@/queries/useLastAddedQuery'
-import useLatestReadingsQuery from '@/queries/useLatestReadingsQuery'
-import useNextReadsQuery from '@/queries/useNextReadsQuery'
-
-import { ArrowSmRightIcon } from '@heroicons/vue/solid'
-
-import BookCard from '@/components/book/BookCard.vue'
-import BookCardReadingActions from '@/components/book/BookCardReadingActions.vue'
-import useEditBookMutation from '@/mutations/useEditBookMutation'
-
-export default {
-  components: {
-    ArrowSmRightIcon,
-    BookCard,
-    BookCardReadingActions
-  },
-
-  props: {
-    collection: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    buttonText: {
-      type: String
-    },
-    buttonLink: {
-      type: Object
-    }
-  },
-
-  setup (props) {
-    const { collection } = toRefs(props)
-    const sheetStore = useSheetStore()
-
-    const sheetLoading = computed(() => sheetStore.loading)
-    const sheetId = computed(() => sheetStore.sheetId)
-    const enabled = computed(() => sheetId.value !== null)
-
-    const collectionMapping = {
-      'last-added': useLastAddedQuery,
-      'latest-readings': useLatestReadingsQuery,
-      'next-reads': useNextReadsQuery
-    }
-
-    const {
-      isLoading: loading,
-      data: collectionItems
-    } = collectionMapping[collection.value]({ enabled })
-
-    const carousel = ref(null)
-    const focused = ref(0)
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleKeydown (event) {
-      const allowedKeys = ['ArrowRight', 'ArrowLeft', 'Home', 'End']
-      const { key } = event
-
-      if (key === 'Tab') {
-        setTimeout(() => { focused.value = 0 })
-        return
-      }
-
-      if (!allowedKeys.includes(key) || editing.value) {
-        return
-      }
-
-      // https://stackoverflow.com/a/21696585
-      const visibleItems = Array.from(carousel.value.children)
-        .filter(el => el.offsetParent !== null)
-      const totalItems = visibleItems.length
-
-      if (key === 'Home' && focused.value === 0) {
-        return
-      }
-
-      if (key === 'End' && focused.value === totalItems - 1) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (key === 'ArrowRight') {
-        focused.value = Math.min(focused.value + 1, totalItems - 1)
-      } else if (key === 'ArrowLeft') {
-        focused.value = Math.max(focused.value - 1, 0)
-      } else if (key === 'Home') {
-        focused.value = 0
-      } else if (key === 'End') {
-        focused.value = totalItems - 1
-      }
-
-      const li = carousel.value?.children?.[focused.value]
-      let card = li?.children?.[0]
-
-      if (collection.value === 'next-reads') {
-        card = card?.children?.[0]
-      }
-
-      card?.focus()
-    }
-
-    const { isLoading: editing, mutate: edit } = useEditBookMutation()
-    const editingBookId = ref(null)
-
-    function handleRead (book, readAt) {
-      if (editing.value) {
-        return
-      }
-
-      /** @type {import('@/model/Book').default} */
-      const newBook = cloneDeep(book)
-      newBook.status = STATUS_READ
-      newBook.readAt = readAt
-
-      editingBookId.value = newBook.id
-
-      edit(newBook, {
-        onSuccess () {
-          editingBookId.value = null
-        }
-      })
-    }
-
-    function handleReadToday (book) {
-      handleRead(book, new Date())
-    }
-
-    return {
-      sheetLoading,
-      loading,
-      collectionItems,
-      carousel,
-      focused,
-      handleKeydown,
-      editing,
-      editingBookId,
-      handleRead,
-      handleReadToday
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookCover.vue b/src/components/book/BookCover.vue
index c502d972..e8733870 100644
--- a/src/components/book/BookCover.vue
+++ b/src/components/book/BookCover.vue
@@ -1,12 +1,103 @@
+<script setup>
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useImageLoader from '@/composables/useImageLoader'
+import Book from '@/model/Book'
+import { useSettingsStore } from '@/stores/settings'
+
+import { BookOpenIcon } from '@heroicons/vue/outline'
+import { ZoomInIcon } from '@heroicons/vue/solid'
+
+import BookCoverDialog from '@/components/dialogs/BookCoverDialog.vue'
+import BookNavigator from '@/components/book/BookNavigator.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const props = defineProps({
+  book: Book,
+  collection: Array,
+  loading: Boolean
+})
+
+const { book, loading } = toRefs(props)
+
+const coverUrl = computed(() => {
+  if (!book.value) {
+    return ''
+  }
+
+  return book.value.coverUrl || ''
+})
+
+const { imageHasError, imageLoading, loadImage } = useImageLoader(coverUrl)
+
+const showBookCover = computed(() => {
+  return !imageHasError.value && !imageLoading.value && showBookInfo.value
+})
+
+const showBookInfo = computed(() => {
+  return !loading.value && book.value !== null
+})
+
+watch(book, (newValue) => {
+  if (newValue !== null) {
+    loadImage()
+  }
+})
+
+onMounted(() => {
+  if (book.value !== null) {
+    loadImage()
+  }
+})
+
+const country = computed(() => book.value?.isbnData)
+
+const settingsStore = useSettingsStore()
+
+const spoilerMode = computed(() => settingsStore.spoilerMode)
+const blurNsfw = computed(() => settingsStore.blurNsfw)
+
+const blurCover = computed(() => {
+  return (
+    (spoilerMode.value.cover && !book.value.isRead) ||
+    (blurNsfw.value && book.value.isNsfw)
+  )
+})
+
+const dialogOpen = ref(false)
+
+function openDialog() {
+  dialogOpen.value = true
+}
+
+function closeDialog() {
+  dialogOpen.value = false
+}
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
-  <figure class="group aspect-w-2 aspect-h-[2.5] sm:aspect-h-2 md:aspect-w-1 md:aspect-h-1 bg-gray-800 dark:bg-gray-700 md:bg-gray-50 dark:bg-transparent md:dark:bg-transparent md:border md:border-gray-200 md:dark:border-gray-600 md:rounded-lg relative">
+  <figure
+    class="group aspect-w-2 aspect-h-[2.5] sm:aspect-h-2 md:aspect-w-1 md:aspect-h-1 bg-gray-800 dark:bg-gray-700 md:bg-gray-50 dark:bg-transparent md:dark:bg-transparent md:border md:border-gray-200 md:dark:border-gray-600 md:rounded-lg relative"
+  >
     <FadeTransition>
-      <div v-if="showBookCover" class="absolute inset-0 w-full h-full md:rounded-lg overflow-hidden motion-safe:transition-all">
-        <img :src="coverUrl" alt="" class="w-full h-full object-cover opacity-30 md:dark:opacity-40 blur-lg scale-105">
+      <div
+        v-if="showBookCover"
+        class="absolute inset-0 w-full h-full md:rounded-lg overflow-hidden motion-safe:transition-all"
+      >
+        <img
+          :src="coverUrl"
+          alt=""
+          class="w-full h-full object-cover opacity-30 md:dark:opacity-40 blur-lg scale-105"
+        />
       </div>
     </FadeTransition>
 
-    <div class="px-9 pt-28 sm:pt-24 pb-20 md:px-9 md:py-9 flex items-center justify-center">
+    <div
+      class="px-9 pt-28 sm:pt-24 pb-20 md:px-9 md:py-9 flex items-center justify-center"
+    >
       <FadeTransition>
         <div
           v-if="showBookInfo && collection"
@@ -41,13 +132,17 @@
         <img
           v-if="showBookCover"
           :src="coverUrl"
-          :class="blurCover ? 'md:filter md:blur-sm md:hover:blur-none motion-safe:transition-all duration-200 ease-in-out' : ''"
+          :class="
+            blurCover
+              ? 'md:filter md:blur-sm md:hover:blur-none motion-safe:transition-all duration-200 ease-in-out'
+              : ''
+          "
           :alt="book.title"
           class="max-w-xs md:max-w-full max-h-full shadow-lg rounded"
-        >
+        />
         <span v-else aria-hidden="true">
           <BookOpenIcon
-            :class="(loading || imageLoading) ? 'motion-safe:animate-pulse' : ''"
+            :class="loading || imageLoading ? 'motion-safe:animate-pulse' : ''"
             class="w-12 h-12 text-gray-500/80 dark:text-gray-400/90"
           />
         </span>
@@ -62,111 +157,3 @@
     />
   </figure>
 </template>
-
-<script>
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useImageLoader from '@/composables/useImageLoader'
-import { useSettingsStore } from '@/stores/settings'
-
-import { BookOpenIcon } from '@heroicons/vue/outline'
-import { ZoomInIcon } from '@heroicons/vue/solid'
-
-import BookCoverDialog from '@/components/dialogs/BookCoverDialog.vue'
-import BookNavigator from '@/components/book/BookNavigator.vue'
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-
-import Book from '@/model/Book'
-
-export default {
-  components: {
-    BookCoverDialog,
-    BookNavigator,
-    BookOpenIcon,
-    FadeTransition,
-    ZoomInIcon
-  },
-
-  props: {
-    book: Book,
-    collection: Array,
-    loading: Boolean
-  },
-
-  setup (props) {
-    const { book, loading } = toRefs(props)
-
-    const coverUrl = computed(() => {
-      if (!book.value) {
-        return ''
-      }
-
-      return book.value.coverUrl || ''
-    })
-
-    const {
-      imageHasError,
-      imageLoading,
-      loadImage
-    } = useImageLoader(coverUrl)
-
-    const showBookCover = computed(() => {
-      return !imageHasError.value && !imageLoading.value && showBookInfo.value
-    })
-
-    const showBookInfo = computed(() => {
-      return !loading.value && book.value !== null
-    })
-
-    watch(book, newValue => {
-      if (newValue !== null) {
-        loadImage()
-      }
-    })
-
-    onMounted(() => {
-      if (book.value !== null) {
-        loadImage()
-      }
-    })
-
-    const country = computed(() => book.value?.isbnData)
-
-    const settingsStore = useSettingsStore()
-
-    const spoilerMode = computed(() => settingsStore.spoilerMode)
-    const blurNsfw = computed(() => settingsStore.blurNsfw)
-
-    const blurCover = computed(() => {
-      return (spoilerMode.value.cover && !book.value.isRead) ||
-        (blurNsfw.value && book.value.isNsfw)
-    })
-
-    const dialogOpen = ref(false)
-
-    function openDialog () {
-      dialogOpen.value = true
-    }
-
-    function closeDialog () {
-      dialogOpen.value = false
-    }
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      coverUrl,
-      showBookCover,
-      showBookInfo,
-      imageLoading,
-      country,
-      blurCover,
-      dialogOpen,
-      openDialog,
-      closeDialog,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookCoverSelector.vue b/src/components/book/BookCoverSelector.vue
index 6a832846..77182c1e 100644
--- a/src/components/book/BookCoverSelector.vue
+++ b/src/components/book/BookCoverSelector.vue
@@ -1,20 +1,117 @@
+<script setup>
+import { computed, reactive, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useVuelidate from '@vuelidate/core'
+import { helpers, required, url } from '@vuelidate/validators'
+
+import Book from '@/model/Book'
+import useCoverQuery from '@/queries/useCoverQuery'
+
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+
+import { EmojiSadIcon } from '@heroicons/vue/outline'
+import { PlusIcon } from '@heroicons/vue/solid'
+
+import Alert from '@/components/Alert.vue'
+import CoverOption from '@/components/CoverOption.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+
+const props = defineProps({
+  book: Book,
+  coverUrl: {
+    type: String,
+    required: true
+  },
+  custom: Boolean,
+  hideCustomTitle: Boolean
+})
+
+const emit = defineEmits(['update:coverUrl', 'update:finding'])
+
+const { book, coverUrl } = toRefs(props)
+const { t } = useI18n({ useScope: 'global' })
+
+const { isLoading: finding, data: coverResults } = useCoverQuery(book, {
+  enabled: true
+})
+
+watch(finding, (newValue) => emit('update:finding', newValue))
+
+const state = reactive({
+  customUrl: ''
+})
+
+const customs = ref(coverUrl.value.length > 0 ? [coverUrl.value] : [])
+
+const rules = {
+  customUrl: {
+    required: helpers.withMessage(t('book.coverSelector.blankField'), required),
+    url: helpers.withMessage(t('book.coverSelector.invalidUrl'), url)
+  }
+}
+
+const v$ = useVuelidate(rules, state)
+
+function addNewImage() {
+  v$.value.$touch()
+
+  if (!v$.value.$error) {
+    if (results.value.indexOf(state.customUrl) === -1) {
+      customs.value.push(state.customUrl)
+    }
+
+    state.customUrl = ''
+    v$.value.$reset()
+  }
+}
+
+const results = computed(() => {
+  const allImages = (coverResults.value || [])
+    .concat(customs.value)
+    .filter((url) => errors.value.indexOf(url) === -1)
+
+  return Array.from(new Set(allImages))
+})
+
+watch(
+  () => state.customUrl,
+  (newValue) => {
+    if (newValue.length === 0) {
+      v$.value.$reset()
+    }
+  }
+)
+
+const errors = ref([])
+
+function handleError(url) {
+  if (errors.value.indexOf(url) === -1) {
+    errors.value.push(url)
+  }
+
+  if (state.customUrl === url) {
+    emit('update:coverUrl', '')
+  }
+}
+
+function unselect(url) {
+  if (coverUrl.value === url) {
+    setTimeout(() => {
+      emit('update:coverUrl', '')
+    })
+  }
+}
+</script>
+
 <template>
-  <form
-    role="form"
-    aria-label="Imagem de capa do livro"
-    class="space-y-6"
-  >
+  <form role="form" aria-label="Imagem de capa do livro" class="space-y-6">
     <div>
-      <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-700 relative overflow-hidden">
-        <transition
-          mode="out-in"
-          leave-active-class="transition motion-reduce:transition-none duration-100 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-          enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100"
-        >
+      <div
+        class="p-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-700 relative overflow-hidden"
+      >
+        <FadeTransition>
           <RadioGroup
             v-if="results?.length > 0"
             :model-value="coverUrl"
@@ -43,7 +140,10 @@
           </RadioGroup>
 
           <div v-else class="flex flex-col items-center p-3">
-            <EmojiSadIcon class="h-24 w-24 text-gray-300 dark:text-gray-500 mb-3" aria-hidden="true" />
+            <EmojiSadIcon
+              class="h-24 w-24 text-gray-300 dark:text-gray-500 mb-3"
+              aria-hidden="true"
+            />
             <p class="font-semibold text-lg text-gray-700 dark:text-gray-400">
               {{ t('book.coverSelector.empty.title') }}
             </p>
@@ -51,23 +151,27 @@
               {{ t('book.coverSelector.empty.description') }}
             </p>
           </div>
-        </transition>
+        </FadeTransition>
 
-        <LoadingIndicator
-          class="rounded-lg"
-          :loading="finding"
-          small
-        />
+        <LoadingIndicator class="rounded-lg" :loading="finding" small />
       </div>
 
-      <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" aria-hidden="true">
+      <p
+        class="mt-2 text-xs text-gray-500 dark:text-gray-400"
+        aria-hidden="true"
+      >
         {{ t('book.coverSelector.about') }}
       </p>
     </div>
 
     <template v-if="custom">
-      <div class="border-t border-gray-200 dark:border-gray-700 pt-4" v-if="!hideCustomTitle">
-        <h3 class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100">
+      <div
+        class="border-t border-gray-200 dark:border-gray-700 pt-4"
+        v-if="!hideCustomTitle"
+      >
+        <h3
+          class="text-lg font-medium font-display leading-6 text-gray-900 dark:text-gray-100"
+        >
           {{ t('book.coverSelector.custom.title') }}
         </h3>
         <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
@@ -86,7 +190,7 @@
             class="input"
             v-model="state.customUrl"
             :placeholder="t('book.coverSelector.custom.placeholder')"
-          >
+          />
           <button
             type="button"
             class="button is-icon-only md:not-is-icon-only px-2 md:px-4"
@@ -108,10 +212,7 @@
         :title="t('book.coverSelector.custom.error')"
       >
         <ul class="list-disc list-inside space-y-1">
-          <li
-            v-for="error of v$.$errors"
-            :key="error.$uid"
-          >
+          <li v-for="error of v$.$errors" :key="error.$uid">
             <span class="font-medium">
               {{ t('book.coverSelector.custom.label') }}:
             </span>
@@ -122,138 +223,3 @@
     </template>
   </form>
 </template>
-
-<script>
-import { computed, reactive, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useVuelidate from '@vuelidate/core'
-import { helpers, required, url } from '@vuelidate/validators'
-
-import useCoverQuery from '@/queries/useCoverQuery'
-
-import {
-  RadioGroup,
-  RadioGroupLabel,
-  RadioGroupOption
-} from '@headlessui/vue'
-
-import { EmojiSadIcon } from '@heroicons/vue/outline'
-import { PlusIcon } from '@heroicons/vue/solid'
-
-import Alert from '@/components/Alert.vue'
-import CoverOption from '@/components/CoverOption.vue'
-import LoadingIndicator from '@/components/LoadingIndicator.vue'
-
-export default {
-  name: 'BookCoverSelector',
-
-  components: {
-    Alert,
-    CoverOption,
-    EmojiSadIcon,
-    LoadingIndicator,
-    PlusIcon,
-    RadioGroup,
-    RadioGroupLabel,
-    RadioGroupOption
-  },
-
-  props: {
-    book: Object,
-    coverUrl: {
-      type: String,
-      required: true
-    },
-    custom: Boolean,
-    hideCustomTitle: Boolean
-  },
-
-  emits: ['update:coverUrl', 'update:finding'],
-
-  setup (props, context) {
-    const { book, coverUrl } = toRefs(props)
-    const { t } = useI18n({ useScope: 'global' })
-
-    const {
-      isLoading: finding,
-      data: coverResults
-    } = useCoverQuery(book, { enabled: true })
-
-    watch(finding, newValue => context.emit('update:finding', newValue))
-
-    const state = reactive({
-      customUrl: ''
-    })
-
-    const customs = ref(coverUrl.value.length > 0 ? [coverUrl.value] : [])
-
-    const rules = {
-      customUrl: {
-        required: helpers.withMessage(t('book.coverSelector.blankField'), required),
-        url: helpers.withMessage(t('book.coverSelector.invalidUrl'), url)
-      }
-    }
-
-    const v$ = useVuelidate(rules, state)
-
-    function addNewImage () {
-      v$.value.$touch()
-
-      if (!v$.value.$error) {
-        if (results.value.indexOf(state.customUrl) === -1) {
-          customs.value.push(state.customUrl)
-        }
-
-        state.customUrl = ''
-        v$.value.$reset()
-      }
-    }
-
-    const results = computed(() => {
-      const allImages = (coverResults.value || [])
-        .concat(customs.value)
-        .filter(url => errors.value.indexOf(url) === -1)
-
-      return Array.from(new Set(allImages))
-    })
-
-    watch(() => state.customUrl, newValue => {
-      if (newValue.length === 0) {
-        v$.value.$reset()
-      }
-    })
-
-    const errors = ref([])
-
-    function handleError (url) {
-      if (errors.value.indexOf(url) === -1) {
-        errors.value.push(url)
-      }
-
-      if (state.customUrl === url) {
-        context.emit('update:coverUrl', '')
-      }
-    }
-
-    function unselect (url) {
-      if (coverUrl.value === url) {
-        setTimeout(() => {
-          context.emit('update:coverUrl', '')
-        })
-      }
-    }
-
-    return {
-      finding,
-      results,
-      state,
-      v$,
-      addNewImage,
-      handleError,
-      unselect,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookForm.vue b/src/components/book/BookForm.vue
index 64703571..1191a5ce 100644
--- a/src/components/book/BookForm.vue
+++ b/src/components/book/BookForm.vue
@@ -1,16 +1,197 @@
+<script setup>
+import { computed, onMounted, reactive, ref, toRaw, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useVuelidate from '@vuelidate/core'
+import { helpers, required } from '@vuelidate/validators'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import Book, { STATUS_FUTURE, STATUS_UNREAD } from '@/model/Book'
+import { useSheetStore } from '@/stores/sheet'
+import useGroupsQuery from '@/queries/useGroupsQuery'
+import usePublishersQuery from '@/queries/usePublishersQuery'
+import useStoresQuery from '@/queries/useStoresQuery'
+import { decimalComma, dimension } from '@/util/validators'
+
+import { UserAddIcon } from '@heroicons/vue/solid'
+
+import Alert from '@/components/Alert.vue'
+import DimensionField from '@/components/fields/DimensionField.vue'
+import MarkdownField from '@/components/fields/MarkdownField.vue'
+import MonetaryField from '@/components/fields/MonetaryField.vue'
+import TagField from '@/components/fields/TagField.vue'
+import TextField from '@/components/fields/TextField.vue'
+
+const props = defineProps({
+  editing: Boolean,
+  modelValue: {
+    type: Book,
+    required: true
+  },
+  touchOnMount: Boolean
+})
+
+const emit = defineEmits(['error', 'update:modelValue'])
+
+const { modelValue: book, touchOnMount } = toRefs(props)
+const { t, locale } = useI18n({ useScope: 'global' })
+
+const bookState = reactive(cloneDeep(book.value))
+const addNotes = ref(book.value.notes ? book.value.notes.length > 0 : false)
+
+function forceUpdateBook() {
+  Object.assign(bookState, cloneDeep(book.value))
+}
+
+const decimalCommaValidator = decimalComma(2)
+
+// eslint-disable-next-line prettier/prettier
+const messageRequired = helpers.withMessage(
+  t('book.form.blankField'),
+  required
+)
+const messageDimension = helpers.withMessage(
+  t('book.form.invalidValue'),
+  dimension
+)
+const messageDecimalComma = helpers.withMessage(
+  t('book.form.invalidNumber'),
+  decimalCommaValidator
+)
+
+const rules = {
+  code: { messageRequired },
+  title: { messageRequired },
+  authorsStr: { messageRequired },
+  publisher: { messageRequired },
+  group: { messageRequired },
+  labelPrice: {
+    currency: { messageRequired },
+    valueStr: { messageRequired, messageDecimalComma }
+  },
+  paidPrice: {
+    currency: { messageRequired },
+    valueStr: { messageRequired, messageDecimalComma }
+  },
+  dimensions: {
+    width: { messageRequired, messageDimension },
+    height: { messageRequired, messageDimension }
+  },
+  store: { messageRequired }
+}
+
+const propertyNames = computed(() => ({
+  code: t('book.properties.id'),
+  title: t('book.properties.title'),
+  authorsStr: t('book.properties.authors'),
+  publisher: t('book.properties.publisher'),
+  group: t('book.properties.group'),
+  'labelPrice.currency': t('book.properties.labelPriceCurrency'),
+  'labelPrice.valueStr': t('book.properties.labelPrice'),
+  'paidPrice.currency': t('book.properties.paidPriceCurrency'),
+  'paidPrice.valueStr': t('book.properties.paidPrice'),
+  'dimensions.width': t('book.properties.width'),
+  'dimensions.height': t('book.properties.height'),
+  store: t('book.properties.store'),
+  synopsis: t('book.properties.synopsis'),
+  notes: t('book.properties.notes')
+}))
+
+const v$ = useVuelidate(rules, bookState)
+
+function handleInput(property, value) {
+  if (property === 'boughtAtStr') {
+    bookState.boughtAt = value.length === 10 ? new Date(value) : null
+    bookState.boughtAt?.setMinutes(
+      bookState.boughtAt.getMinutes() + bookState.boughtAt.getTimezoneOffset()
+    )
+  } else {
+    bookState[property] = value
+  }
+
+  if (v$.value[property]) {
+    v$.value[property].$touch()
+  }
+
+  emit('error', v$.value.$anyDirty && v$.value.$invalid)
+  emit('update:modelValue', cloneDeep(toRaw(bookState)))
+}
+
+function handleNotInCollection(value) {
+  handleInput('status', value ? STATUS_FUTURE : STATUS_UNREAD)
+  handleInput('boughtAtStr', value ? '' : toDateInputValue(new Date()))
+  handleInput('readAt', null)
+}
+
+/** @param {Book} book */
+function touch(book) {
+  if (book) {
+    Object.assign(bookState, cloneDeep(book))
+    addNotes.value = book.notes.length > 0
+  }
+
+  v$.value.$touch()
+
+  return {
+    error: v$.value.$error,
+    book: bookState
+  }
+}
+
+function reset() {
+  v$.value.$reset()
+}
+
+const sheetStore = useSheetStore()
+const optionsEnabled = computed(() => sheetStore.sheetId !== null)
+
+const { data: groupData } = useGroupsQuery({ enabled: optionsEnabled })
+const { data: publishersData } = usePublishersQuery({ enabled: optionsEnabled })
+const { data: storesData } = useStoresQuery({ enabled: optionsEnabled })
+
+const groupOptions = computed(() => {
+  return (groupData.value || [])
+    .slice()
+    .sort((a, b) => a.name.localeCompare(b, locale.value))
+})
+
+const publisherOptions = computed(() => publishersData.value || [])
+const storeOptions = computed(() => storesData.value || [])
+
+onMounted(() => {
+  if (touchOnMount.value) {
+    v$.value.$touch()
+    emit('error', v$.value.$anyDirty && v$.value.$invalid)
+  }
+})
+
+watch(addNotes, () => {
+  handleInput('notes', '')
+})
+
+function toDateInputValue(date) {
+  if (!date) {
+    return ''
+  }
+
+  const local = new Date(date)
+  local.setMinutes(date.getMinutes() - date.getTimezoneOffset())
+  return local.toISOString().slice(0, 10)
+}
+</script>
+
 <template>
-  <form
-    role="form"
-    aria-label="Metadados do livro"
-    class="space-y-6"
-  >
+  <form role="form" aria-label="Metadados do livro" class="space-y-6">
     <div class="grid grid-cols-12 md:grid-cols-3 gap-6">
       <TextField
         required
         class="col-span-7 sm:col-span-5 md:col-span-1"
         :label="t('book.properties.id')"
         :model-value="modelValue.code"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.id')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.id')])
+        "
         :error="v$.code.$error ? v$.code.$errors[0].$message : ''"
         @update:model-value="handleInput('code', $event)"
       />
@@ -20,7 +201,9 @@
       required
       :label="t('book.properties.title')"
       :model-value="modelValue.title"
-      :placeholder="t('book.form.example.placeholder', [t('book.form.example.title')])"
+      :placeholder="
+        t('book.form.example.placeholder', [t('book.form.example.title')])
+      "
       :error="v$.title.$error ? v$.title.$errors[0].$message : ''"
       @update:model-value="handleInput('title', $event)"
     />
@@ -57,11 +240,13 @@
         class="col-span-12 sm:col-span-1"
         :label="t('book.properties.publisher')"
         :model-value="modelValue.publisher"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.publisher')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.publisher')])
+        "
         :error="v$.publisher.$error ? v$.publisher.$errors[0].$message : ''"
         :list="publisherOptions"
-        :list-text="option => option.name"
-        :list-value="option => option.name"
+        :list-text="(option) => option.name"
+        :list-value="(option) => option.name"
         @update:model-value="handleInput('publisher', $event)"
       />
 
@@ -70,11 +255,13 @@
         class="col-span-12 sm:col-span-1"
         :label="t('book.properties.group')"
         :model-value="modelValue.group"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.group')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.group')])
+        "
         :error="v$.group.$error ? v$.group.$errors[0].$message : ''"
         :list="groupOptions"
-        :list-text="option => option.name"
-        :list-value="option => option.name"
+        :list-text="(option) => option.name"
+        :list-value="(option) => option.name"
         @update:model-value="handleInput('group', $event)"
       />
     </div>
@@ -96,7 +283,11 @@
         class="col-span-9 sm:col-span-5 md:col-span-1"
         :label="t('book.properties.labelPrice')"
         :model-value="modelValue.labelPrice"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.labelPrice')])"
+        :placeholder="
+          t('book.form.example.placeholder', [
+            t('book.form.example.labelPrice')
+          ])
+        "
         :error="v$.labelPrice.$error ? v$.labelPrice.$errors[0].$message : ''"
         @update:model-value="handleInput('labelPrice', $event)"
       />
@@ -108,7 +299,9 @@
         class="col-span-9 sm:col-span-5 md:col-span-1"
         :label="t('book.properties.paidPrice')"
         :model-value="modelValue.paidPrice"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.paidPrice')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.paidPrice')])
+        "
         :error="v$.paidPrice.$error ? v$.paidPrice.$errors[0].$message : ''"
         :base="modelValue.labelPrice.value"
         @update:model-value="handleInput('paidPrice', $event)"
@@ -121,11 +314,13 @@
         class="col-span-12 sm:col-span-6"
         :label="t('book.properties.store')"
         :model-value="modelValue.store"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.store')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.store')])
+        "
         :error="v$.store.$error ? v$.store.$errors[0].$message : ''"
         :list="storeOptions"
-        :list-text="option => option.name"
-        :list-value="option => option.name"
+        :list-text="(option) => option.name"
+        :list-value="(option) => option.name"
         @update:model-value="handleInput('store', $event)"
       />
 
@@ -136,7 +331,9 @@
         :max="toDateInputValue(new Date())"
         :label="t('book.properties.boughtAt')"
         :model-value="modelValue.boughtAtStr"
-        :placeholder="t('book.form.example.placeholder', [t('book.form.example.boughtAt')])"
+        :placeholder="
+          t('book.form.example.placeholder', [t('book.form.example.boughtAt')])
+        "
         @update:model-value="handleInput('boughtAtStr', $event)"
       />
     </div>
@@ -150,11 +347,8 @@
           id="not-in-collection"
           :checked="modelValue.isFuture"
           @change="handleNotInCollection($event.target.checked)"
-        >
-        <label
-          for="not-in-collection"
-          class="label mb-0"
-        >
+        />
+        <label for="not-in-collection" class="label mb-0">
           {{ t('book.form.notInCollection') }}
         </label>
       </div>
@@ -166,11 +360,8 @@
           name="add-notes"
           id="add-notes"
           v-model="addNotes"
-        >
-        <label
-          for="add-notes"
-          class="label mb-0"
-        >
+        />
+        <label for="add-notes" class="label mb-0">
           {{ t('book.form.addNotes') }}
         </label>
       </div>
@@ -189,247 +380,19 @@
       type="error"
       :show="v$.$errors.length > 0"
       :title="
-        t(
-          'book.form.error.title',
-          { errorsCount: t('book.form.error.count', v$.$errors.length) }
-        )
+        t('book.form.error.title', {
+          errorsCount: t('book.form.error.count', v$.$errors.length)
+        })
       "
     >
       <ul class="list-disc list-inside space-y-1">
-        <li
-          v-for="error of v$.$errors"
-          :key="error.$uid"
-        >
-          <span class="font-medium">{{ propertyNames[error.$propertyPath] }}:</span>
+        <li v-for="error of v$.$errors" :key="error.$uid">
+          <span class="font-medium"
+            >{{ propertyNames[error.$propertyPath] }}:</span
+          >
           {{ error.$message }}
         </li>
       </ul>
     </Alert>
   </form>
 </template>
-
-<script>
-import { computed, onMounted, reactive, ref, toRaw, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useVuelidate from '@vuelidate/core'
-import { helpers, required } from '@vuelidate/validators'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import Book, { STATUS_FUTURE, STATUS_UNREAD } from '@/model/Book'
-import { useSheetStore } from '@/stores/sheet'
-import useGroupsQuery from '@/queries/useGroupsQuery'
-import usePublishersQuery from '@/queries/usePublishersQuery'
-import useStoresQuery from '@/queries/useStoresQuery'
-import { decimalComma, dimension } from '@/util/validators'
-
-import { UserAddIcon } from '@heroicons/vue/solid'
-
-import Alert from '@/components/Alert.vue'
-import DimensionField from '@/components/fields/DimensionField.vue'
-import MarkdownField from '@/components/fields/MarkdownField.vue'
-import MonetaryField from '@/components/fields/MonetaryField.vue'
-import TagField from '@/components/fields/TagField.vue'
-import TextField from '@/components/fields/TextField.vue'
-
-export default {
-  name: 'BookForm',
-
-  components: {
-    Alert,
-    DimensionField,
-    MarkdownField,
-    MonetaryField,
-    TagField,
-    TextField,
-    UserAddIcon
-  },
-
-  emits: ['error', 'update:modelValue'],
-
-  props: {
-    editing: Boolean,
-    modelValue: {
-      type: Book,
-      required: true
-    },
-    touchOnMount: Boolean
-  },
-
-  setup (props, context) {
-    const { modelValue: book, touchOnMount } = toRefs(props)
-    const currencies = ref(['BRL', 'USD', 'EUR', 'JPY'])
-    const { t, locale } = useI18n({ useScope: 'global' })
-
-    const bookState = reactive(cloneDeep(book.value))
-    const addNotes = ref(book.value.notes ? book.value.notes.length > 0 : false)
-
-    function forceUpdateBook () {
-      Object.assign(bookState, cloneDeep(book.value))
-    }
-
-    const decimalCommaValidator = decimalComma(2)
-
-    const messageRequired = helpers.withMessage(
-      t('book.form.blankField'),
-      required
-    )
-    const messageDimension = helpers.withMessage(
-      t('book.form.invalidValue'),
-      dimension
-    )
-    const messageDecimalComma = helpers.withMessage(
-      t('book.form.invalidNumber'),
-      decimalCommaValidator
-    )
-
-    const rules = {
-      code: { messageRequired },
-      title: { messageRequired },
-      authorsStr: { messageRequired },
-      publisher: { messageRequired },
-      group: { messageRequired },
-      labelPrice: {
-        currency: { messageRequired },
-        valueStr: { messageRequired, messageDecimalComma }
-      },
-      paidPrice: {
-        currency: { messageRequired },
-        valueStr: { messageRequired, messageDecimalComma }
-      },
-      dimensions: {
-        width: { messageRequired, messageDimension },
-        height: { messageRequired, messageDimension }
-      },
-      store: { messageRequired }
-    }
-
-    const propertyNames = computed(() => ({
-      code: t('book.properties.id'),
-      title: t('book.properties.title'),
-      authorsStr: t('book.properties.authors'),
-      publisher: t('book.properties.publisher'),
-      group: t('book.properties.group'),
-      'labelPrice.currency': t('book.properties.labelPriceCurrency'),
-      'labelPrice.valueStr': t('book.properties.labelPrice'),
-      'paidPrice.currency': t('book.properties.paidPriceCurrency'),
-      'paidPrice.valueStr': t('book.properties.paidPrice'),
-      'dimensions.width': t('book.properties.width'),
-      'dimensions.height': t('book.properties.height'),
-      store: t('book.properties.store'),
-      synopsis: t('book.properties.synopsis'),
-      notes: t('book.properties.notes')
-    }))
-
-    const v$ = useVuelidate(rules, bookState)
-
-    function handleInput (property, value) {
-      if (property === 'boughtAtStr') {
-        bookState.boughtAt = value.length === 10 ? new Date(value) : null
-        bookState.boughtAt?.setMinutes(
-          bookState.boughtAt.getMinutes() + bookState.boughtAt.getTimezoneOffset()
-        )
-      } else {
-        bookState[property] = value
-      }
-
-      if (v$.value[property]) {
-        v$.value[property].$touch()
-      }
-
-      context.emit('error', v$.value.$anyDirty && v$.value.$invalid)
-      context.emit('update:modelValue', cloneDeep(toRaw(bookState)))
-    }
-
-    function handleNotInCollection (value) {
-      handleInput('status', value ? STATUS_FUTURE : STATUS_UNREAD)
-      handleInput('boughtAtStr', value ? '' : toDateInputValue(new Date()))
-      handleInput('readAt', null)
-    }
-
-    /** @param {Book} book */
-    function touch (book) {
-      if (book) {
-        Object.assign(bookState, cloneDeep(book))
-        addNotes.value = book.notes.length > 0
-      }
-
-      v$.value.$touch()
-
-      return {
-        error: v$.value.$error,
-        book: bookState
-      }
-    }
-
-    function reset () {
-      v$.value.$reset()
-    }
-
-    const sheetStore = useSheetStore()
-    const optionsEnabled = computed(() => sheetStore.sheetId !== null)
-
-    const { data: groupData } = useGroupsQuery({ enabled: optionsEnabled })
-    const { data: publishersData } = usePublishersQuery({ enabled: optionsEnabled })
-    const { data: storesData } = useStoresQuery({ enabled: optionsEnabled })
-
-    const groupOptions = computed(() => {
-      return (groupData.value || []).slice()
-        .sort((a, b) => a.name.localeCompare(b, locale.value))
-    })
-
-    const publisherOptions = computed(() => publishersData.value || [])
-    const storeOptions = computed(() => storesData.value || [])
-
-    onMounted(() => {
-      if (touchOnMount.value) {
-        v$.value.$touch()
-        context.emit('error', v$.value.$anyDirty && v$.value.$invalid)
-      }
-    })
-
-    watch(addNotes, () => {
-      handleInput('notes', '')
-    })
-
-    function toDateInputValue (date) {
-      if (!date) {
-        return ''
-      }
-
-      const local = new Date(date)
-      local.setMinutes(date.getMinutes() - date.getTimezoneOffset())
-      return local.toISOString().slice(0, 10)
-    }
-
-    return {
-      currencies,
-      handleInput,
-      handleNotInCollection,
-      propertyNames,
-      v$,
-      touch,
-      reset,
-      publisherOptions,
-      storeOptions,
-      groupOptions,
-      addNotes,
-      toDateInputValue,
-      forceUpdateBook,
-      t
-    }
-  }
-}
-</script>
-
-<style lang="postcss" scoped>
-.monetary-field:focus-within .suffix .select {
-  @apply border-primary-600 dark:border-primary-400;
-}
-
-.monetary-field:hover:not(:focus-within) .input,
-.monetary-field:hover:not(:focus-within) .select {
-  @apply border-gray-400 dark:border-gray-500 transition-none;
-}
-</style>
diff --git a/src/components/book/BookGrid.vue b/src/components/book/BookGrid.vue
index e7fdcb44..e5cedd3d 100644
--- a/src/components/book/BookGrid.vue
+++ b/src/components/book/BookGrid.vue
@@ -1,6 +1,121 @@
+<script setup>
+import { nextTick, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BookCard from '@/components/book/BookCard.vue'
+
+const props = defineProps({
+  currentPage: Number,
+  items: Array,
+  loading: Boolean,
+  skeletonItems: Number,
+  sortDirection: String,
+  sortProperty: String
+})
+
+const { t } = useI18n({ useScope: 'global' })
+
+const focused = ref(0)
+const grid = ref(null)
+const { items, loading, currentPage, sortDirection, sortProperty } =
+  toRefs(props)
+
+const columnSize = {
+  '1024px': 6, // lg
+  '768px': 5, // md
+  '640px': 3 // sm
+}
+
+function getColumnSize() {
+  const match = Object.entries(columnSize).find(([minWidth]) => {
+    return window.matchMedia(`(min-width: ${minWidth})`).matches
+  })
+
+  return match?.[1] || 2
+}
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleKeydown(event) {
+  const allowedKeys = [
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End'
+  ]
+  const { key } = event
+
+  if (!allowedKeys.includes(key)) {
+    return
+  }
+
+  const totalItems = items.value.length
+  const columns = getColumnSize()
+  const lines = Math.ceil(totalItems / columns)
+  const row = Math.floor(focused.value / columns) + 1
+
+  if (key === 'Home' && focused.value === 0) {
+    return
+  }
+
+  if (key === 'End' && focused.value === totalItems - 1) {
+    return
+  }
+
+  if (key === 'ArrowUp' && row === 1) {
+    return
+  }
+
+  if (key === 'ArrowDown' && row === lines) {
+    return
+  }
+
+  event.preventDefault()
+
+  if (key === 'ArrowRight') {
+    focused.value = Math.min(totalItems - 1, focused.value + 1)
+  } else if (key === 'ArrowLeft') {
+    focused.value = Math.max(0, focused.value - 1)
+  } else if (key === 'ArrowDown') {
+    focused.value =
+      row < lines
+        ? Math.min(totalItems - 1, focused.value + columns)
+        : focused.value
+  } else if (key === 'ArrowUp') {
+    focused.value =
+      row > 1 ? Math.max(0, focused.value - columns) : focused.value
+  } else if (key === 'Home') {
+    focused.value = 0
+  } else if (key === 'End') {
+    focused.value = totalItems - 1
+  }
+
+  focus()
+}
+
+watch([loading, currentPage, sortDirection, sortProperty], () => {
+  focused.value = 0
+})
+
+function focus() {
+  nextTick(() => {
+    const li = grid.value?.children?.[focused.value]
+    const card = li?.children?.[0]
+
+    card?.focus()
+  })
+}
+</script>
+
 <template>
   <div>
-    <div v-if="loading" class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-2.5 sm:gap-4">
+    <div
+      v-if="loading"
+      class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-2.5 sm:gap-4"
+    >
       <BookCard
         v-for="tempBook in skeletonItems"
         :key="tempBook"
@@ -12,10 +127,7 @@
       class="mb-6 grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-2.5 sm:gap-4"
       ref="grid"
     >
-      <li
-        v-for="(book, bookIdx) in items"
-        :key="book.id"
-      >
+      <li v-for="(book, bookIdx) in items" :key="book.id">
         <BookCard
           class="scroll-mt-20"
           :book="book"
@@ -27,132 +139,3 @@
     </ul>
   </div>
 </template>
-
-<script>
-import { nextTick, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import BookCard from '@/components/book/BookCard.vue'
-
-export default {
-  components: { BookCard },
-
-  props: {
-    currentPage: Number,
-    items: Array,
-    loading: Boolean,
-    skeletonItems: Number,
-    sortDirection: String,
-    sortProperty: String
-  },
-
-  setup (props) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const focused = ref(0)
-    const grid = ref(null)
-    const {
-      items,
-      loading,
-      currentPage,
-      sortDirection,
-      sortProperty
-    } = toRefs(props)
-
-    const columnSize = {
-      '1024px': 6, // lg
-      '768px': 5, // md
-      '640px': 3 // sm
-    }
-
-    function getColumnSize () {
-      const match = Object.entries(columnSize)
-        .find(([minWidth]) => {
-          return window.matchMedia(`(min-width: ${minWidth})`).matches
-        })
-
-      return match?.[1] || 2
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleKeydown (event) {
-      const allowedKeys = [
-        'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
-        'Home', 'End'
-      ]
-      const { key } = event
-
-      if (!allowedKeys.includes(key)) {
-        return
-      }
-
-      const totalItems = items.value.length
-      const columns = getColumnSize()
-      const lines = Math.ceil(totalItems / columns)
-      const row = Math.floor(focused.value / columns) + 1
-
-      if (key === 'Home' && focused.value === 0) {
-        return
-      }
-
-      if (key === 'End' && focused.value === totalItems - 1) {
-        return
-      }
-
-      if (key === 'ArrowUp' && row === 1) {
-        return
-      }
-
-      if (key === 'ArrowDown' && row === lines) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (key === 'ArrowRight') {
-        focused.value = Math.min(totalItems - 1, focused.value + 1)
-      } else if (key === 'ArrowLeft') {
-        focused.value = Math.max(0, focused.value - 1)
-      } else if (key === 'ArrowDown') {
-        focused.value = row < lines
-          ? Math.min(totalItems - 1, focused.value + columns)
-          : focused.value
-      } else if (key === 'ArrowUp') {
-        focused.value = row > 1
-          ? Math.max(0, focused.value - columns)
-          : focused.value
-      } else if (key === 'Home') {
-        focused.value = 0
-      } else if (key === 'End') {
-        focused.value = totalItems - 1
-      }
-
-      focus()
-    }
-
-    watch(
-      [loading, currentPage, sortDirection, sortProperty],
-      () => { focused.value = 0 }
-    )
-
-    function focus () {
-      nextTick(() => {
-        const li = grid.value?.children?.[focused.value]
-        const card = li?.children?.[0]
-
-        card?.focus()
-      })
-    }
-
-    return {
-      focused,
-      grid,
-      handleKeydown,
-      focus,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookInformation.vue b/src/components/book/BookInformation.vue
index 0156ab7f..3220a707 100644
--- a/src/components/book/BookInformation.vue
+++ b/src/components/book/BookInformation.vue
@@ -1,3 +1,155 @@
+<script setup>
+import { computed, inject, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useMarkdown from '@/composables/useMarkdown'
+import Book from '@/model/Book'
+import getBookLinks from '@/services/links'
+import { useSettingsStore } from '@/stores/settings'
+import { useSheetStore } from '@/stores/sheet'
+import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
+import { convertIsbn13ToIsbn10 } from '@/util/isbn'
+
+import {
+  BookmarkIcon as BookmarkSolidIcon,
+  ExternalLinkIcon,
+  GlobeAltIcon,
+  PencilIcon,
+  StarIcon as StarSolidIcon
+} from '@heroicons/vue/solid'
+import {
+  BookmarkIcon as BookmarkOutlineIcon,
+  ClockIcon,
+  StarIcon as StarOutlineIcon,
+  TrashIcon
+} from '@heroicons/vue/outline'
+
+import BookBreadcrumb from '@/components/book/BookBreadcrumb.vue'
+import BookOwnerBadge from '@/components/book/BookOwnerBadge.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const props = defineProps({
+  book: Book,
+  disabled: Boolean,
+  loading: Boolean
+})
+
+defineEmits([
+  'click:edit',
+  'click:delete',
+  'click:toggleFavorite',
+  'click:toggleStatus',
+  'click:updateCover'
+])
+
+const { book, loading } = toRefs(props)
+const { t, d, locale } = useI18n({ useScope: 'global' })
+const settingsStore = useSettingsStore()
+const sheetStore = useSheetStore()
+
+const showBookInfo = computed(() => {
+  return !loading.value && book.value
+})
+
+const { renderMarkdown } = useMarkdown({ disable: ['image'] })
+
+const synopsisRendered = computed(() => {
+  if (!showBookInfo.value) {
+    return ''
+  }
+
+  if (book.value.synopsis.length === 0) {
+    return `<em>${t('book.emptySynopsis')}</em>`
+  }
+
+  return renderMarkdown(book.value.synopsis)
+})
+
+const { data: timeZone } = useTimeZoneQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+function formatDate(date, format = 'short') {
+  if (date instanceof Date) {
+    return d(date, format, { timeZone: timeZone.value.name })
+  }
+
+  return t('dashboard.details.info.dateUnknown')
+}
+
+const readAt = computed(() => {
+  return showBookInfo.value && book.value.readAt
+    ? formatDate(book.value.readAt)
+    : t('dashboard.details.info.dateUnknown')
+})
+
+const createdAt = computed(() => {
+  return showBookInfo.value && book.value.createdAt
+    ? formatDate(book.value.createdAt, 'long')
+    : ''
+})
+
+const updatedAt = computed(() => {
+  return showBookInfo.value && book.value.updatedAt
+    ? formatDate(book.value.updatedAt, 'long')
+    : ''
+})
+
+const country = computed(() => {
+  if (!showBookInfo.value) {
+    return []
+  }
+
+  return book.value?.isbnData
+})
+
+const isbn10 = computed(() => {
+  if (!showBookInfo.value || !book.value.codeType.includes('ISBN')) {
+    return null
+  }
+
+  if (book.value.codeType === 'ISBN-10') {
+    return book.value.code
+  }
+
+  return convertIsbn13ToIsbn10(book.value.code)
+})
+
+const spoilerMode = computed(() => settingsStore.spoilerMode)
+
+const blurSynopsis = computed(() => {
+  return (
+    showBookInfo.value &&
+    spoilerMode.value.synopsis &&
+    !book.value.isRead &&
+    book.value.synopsis.length > 0
+  )
+})
+
+const externalLinks = computed(() => {
+  return getBookLinks(book.value, locale.value)
+})
+
+const separator = computed(() => {
+  return t('dashboard.details.header.authorSeparator')
+})
+
+const lastSeparator = computed(() => {
+  return t('dashboard.details.header.authorLastSeparator')
+})
+
+const showSearchDialog = inject('showSearchDialog')
+
+function searchByAuthor(author, event) {
+  event.preventDefault()
+
+  const query = `${t('dashboard.search.keywords.author')}:"${author}"`
+  showSearchDialog(query)
+}
+
+const canEdit = computed(() => sheetStore.canEdit)
+</script>
+
 <template>
   <div class="space-y-6 md:space-y-8">
     <div>
@@ -10,12 +162,11 @@
       />
 
       <!-- Book title -->
-      <h2
-        v-if="showBookInfo"
-        class="book-title"
-      >
+      <h2 v-if="showBookInfo" class="book-title">
         <span aria-hidden="true" v-if="book.isFuture">
-          <ClockIcon class="w-5 h-5 mr-0.5 align-baseline inline-block text-gray-400 dark:text-gray-500" />
+          <ClockIcon
+            class="w-5 h-5 mr-0.5 align-baseline inline-block text-gray-400 dark:text-gray-500"
+          />
         </span>
         {{ book.titleParts.main }}
       </h2>
@@ -51,7 +202,11 @@
     <div
       v-if="showBookInfo"
       v-html="synopsisRendered"
-      :class="blurSynopsis ? 'md:blur-sm md:dark:blur md:select-none md:hover:blur-none md:dark:hover:blur-none md:hover:select-auto' : ''"
+      :class="
+        blurSynopsis
+          ? 'md:blur-sm md:dark:blur md:select-none md:hover:blur-none md:dark:hover:blur-none md:hover:select-auto'
+          : ''
+      "
       class="prose prose-sm md:prose-base dark:prose-invert leading-normal max-w-none"
     />
     <div v-else class="flex flex-col space-y-2">
@@ -84,8 +239,8 @@
         :disabled="disabled"
         :title="
           t('dashboard.details.header.options.markAs', {
-            status: t(book.isRead ? 'book.unread' : 'book.read').toLowerCase() }
-          )
+            status: t(book.isRead ? 'book.unread' : 'book.read').toLowerCase()
+          })
         "
         @click="$emit('click:toggleStatus', $event)"
       >
@@ -96,8 +251,8 @@
         <span class="sr-only">
           {{
             t('dashboard.details.header.options.markAs', {
-              status: t(book.isRead ? 'book.unread' : 'book.read').toLowerCase() }
-            )
+              status: t(book.isRead ? 'book.unread' : 'book.read').toLowerCase()
+            })
           }}
         </span>
       </button>
@@ -106,7 +261,13 @@
         v-if="showBookInfo"
         class="button is-icon-only px-2.5"
         :disabled="disabled"
-        :title="t(`dashboard.details.header.options.${book.favorite ? 'removeFromFavorites' : 'addToFavorites' }`)"
+        :title="
+          t(
+            `dashboard.details.header.options.${
+              book.favorite ? 'removeFromFavorites' : 'addToFavorites'
+            }`
+          )
+        "
         @click="$emit('click:toggleFavorite', $event)"
       >
         <span aria-hidden="true">
@@ -114,7 +275,13 @@
           <StarOutlineIcon v-else />
         </span>
         <span class="sr-only">
-          {{ t(`dashboard.details.header.options.${book.favorite ? 'removeFromFavorites' : 'addToFavorites' }`) }}
+          {{
+            t(
+              `dashboard.details.header.options.${
+                book.favorite ? 'removeFromFavorites' : 'addToFavorites'
+              }`
+            )
+          }}
         </span>
       </button>
 
@@ -135,14 +302,24 @@
     </div>
 
     <!-- Book metadata -->
-    <div class="space-y-4 pt-4 border-t border-gray-300 dark:border-gray-600 text-xs md:text-sm text-gray-600 dark:text-gray-300">
+    <div
+      class="space-y-4 pt-4 border-t border-gray-300 dark:border-gray-600 text-xs md:text-sm text-gray-600 dark:text-gray-300"
+    >
       <dl v-if="showBookInfo" class="space-y-1">
         <div v-if="book.codeType !== 'N/A'" class="flex">
-          <dt class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400">{{ book.codeType }}</dt>
+          <dt
+            class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400"
+          >
+            {{ book.codeType }}
+          </dt>
           <dd class="grow text-right sm:text-left">{{ book.code }}</dd>
         </div>
         <div class="flex">
-          <dt class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400">{{ t('book.properties.createdAt') }}</dt>
+          <dt
+            class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400"
+          >
+            {{ t('book.properties.createdAt') }}
+          </dt>
           <dd class="tabular-nums grow text-right sm:text-left">
             <time :datetime="book.createdAt.toISOString()">
               {{ createdAt }}
@@ -150,7 +327,11 @@
           </dd>
         </div>
         <div class="flex">
-          <dt class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400">{{ t('book.properties.updatedAt') }}</dt>
+          <dt
+            class="shrink sm:shrink-0 sm:w-48 text-gray-500 dark:text-gray-400"
+          >
+            {{ t('book.properties.updatedAt') }}
+          </dt>
           <dd class="tabular-nums grow text-right sm:text-left">
             <time :datetime="book.updatedAt.toISOString()">
               {{ updatedAt }}
@@ -166,33 +347,19 @@
 
       <BookOwnerBadge v-if="showBookInfo" />
 
-      <transition
-        mode="out-in"
-        leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-        enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-      >
+      <FadeTransition>
         <ul
           v-if="showBookInfo && externalLinks.length > 0"
           class="flex flex-wrap"
         >
-          <li
-            v-for="link in externalLinks"
-            :key="link.url"
-          >
+          <li v-for="link in externalLinks" :key="link.url">
             <a
               class="book-external-link group has-ring-focus"
               target="_blank"
               :href="link.url"
             >
               <span aria-hidden="true" class="icon">
-                <component
-                  v-if="link.icon"
-                  :is="link.icon"
-                />
+                <component v-if="link.icon" :is="link.icon" />
                 <GlobeAltIcon v-else />
               </span>
               <span>{{ link.title }}</span>
@@ -202,199 +369,11 @@
             </a>
           </li>
         </ul>
-      </transition>
+      </FadeTransition>
     </div>
   </div>
 </template>
 
-<script>
-import { computed, inject, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useMarkdown from '@/composables/useMarkdown'
-import { useSettingsStore } from '@/stores/settings'
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  BookmarkIcon as BookmarkSolidIcon,
-  ExternalLinkIcon,
-  GlobeAltIcon,
-  PencilIcon,
-  StarIcon as StarSolidIcon
-} from '@heroicons/vue/solid'
-import {
-  BookmarkIcon as BookmarkOutlineIcon,
-  ClockIcon,
-  StarIcon as StarOutlineIcon,
-  TrashIcon
-} from '@heroicons/vue/outline'
-
-import Avatar from '@/components/Avatar.vue'
-import BookBreadcrumb from '@/components/book/BookBreadcrumb.vue'
-import BookOwnerBadge from '@/components/book/BookOwnerBadge.vue'
-
-import { convertIsbn13ToIsbn10 } from '@/util/isbn'
-import getBookLinks from '@/services/links'
-import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
-
-import Book from '@/model/Book'
-
-export default {
-  components: {
-    Avatar,
-    BookBreadcrumb,
-    BookOwnerBadge,
-    BookmarkOutlineIcon,
-    BookmarkSolidIcon,
-    ClockIcon,
-    ExternalLinkIcon,
-    GlobeAltIcon,
-    PencilIcon,
-    StarOutlineIcon,
-    StarSolidIcon,
-    TrashIcon
-  },
-
-  props: {
-    book: Book,
-    disabled: Boolean,
-    loading: Boolean
-  },
-
-  emits: [
-    'click:edit',
-    'click:delete',
-    'click:toggleFavorite',
-    'click:toggleStatus',
-    'click:updateCover'
-  ],
-
-  setup (props) {
-    const { book, loading } = toRefs(props)
-    const { t, d, locale } = useI18n({ useScope: 'global' })
-    const settingsStore = useSettingsStore()
-    const sheetStore = useSheetStore()
-
-    const showBookInfo = computed(() => {
-      return !loading.value && book.value
-    })
-
-    const { renderMarkdown } = useMarkdown({ disable: ['image'] })
-
-    const synopsisRendered = computed(() => {
-      if (!showBookInfo.value) {
-        return ''
-      }
-
-      if (book.value.synopsis.length === 0) {
-        return `<em>${t('book.emptySynopsis')}</em>`
-      }
-
-      return renderMarkdown(book.value.synopsis)
-    })
-
-    const { data: timeZone } = useTimeZoneQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
-
-    function formatDate (date, format = 'short') {
-      if (date instanceof Date) {
-        return d(date, format, { timeZone: timeZone.value.name })
-      }
-
-      return t('dashboard.details.info.dateUnknown')
-    }
-
-    const readAt = computed(() => {
-      return showBookInfo.value && book.value.readAt
-        ? formatDate(book.value.readAt)
-        : t('dashboard.details.info.dateUnknown')
-    })
-
-    const createdAt = computed(() => {
-      return showBookInfo.value && book.value.createdAt
-        ? formatDate(book.value.createdAt, 'long')
-        : ''
-    })
-
-    const updatedAt = computed(() => {
-      return showBookInfo.value && book.value.updatedAt
-        ? formatDate(book.value.updatedAt, 'long')
-        : ''
-    })
-
-    const country = computed(() => {
-      if (!showBookInfo.value) {
-        return []
-      }
-
-      return book.value?.isbnData
-    })
-
-    const isbn10 = computed(() => {
-      if (!showBookInfo.value || !book.value.codeType.includes('ISBN')) {
-        return null
-      }
-
-      if (book.value.codeType === 'ISBN-10') {
-        return book.value.code
-      }
-
-      return convertIsbn13ToIsbn10(book.value.code)
-    })
-
-    const spoilerMode = computed(() => settingsStore.spoilerMode)
-
-    const blurSynopsis = computed(() => {
-      return showBookInfo.value && spoilerMode.value.synopsis &&
-        !book.value.isRead && book.value.synopsis.length > 0
-    })
-
-    const externalLinks = computed(() => {
-      return getBookLinks(book.value, locale.value)
-    })
-
-    const separator = computed(() => {
-      return t('dashboard.details.header.authorSeparator')
-    })
-
-    const lastSeparator = computed(() => {
-      return t('dashboard.details.header.authorLastSeparator')
-    })
-
-    const showSearchDialog = inject('showSearchDialog')
-
-    function searchByAuthor (author, event) {
-      event.preventDefault()
-
-      const query = `${t('dashboard.search.keywords.author')}:"${author}"`
-      showSearchDialog(query)
-    }
-
-    const canEdit = computed(() => sheetStore.canEdit)
-
-    return {
-      showBookInfo,
-      synopsisRendered,
-      readAt,
-      createdAt,
-      updatedAt,
-      t,
-      locale,
-      isbn10,
-      country,
-      spoilerMode,
-      blurSynopsis,
-      externalLinks,
-      separator,
-      lastSeparator,
-      searchByAuthor,
-      canEdit
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .book-title {
   @apply font-semibold font-display
diff --git a/src/components/book/BookNavigator.vue b/src/components/book/BookNavigator.vue
index 0534d32b..4c855e9a 100644
--- a/src/components/book/BookNavigator.vue
+++ b/src/components/book/BookNavigator.vue
@@ -1,6 +1,52 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Book from '@/model/Book'
+
+import { ArrowSmLeftIcon, ArrowSmRightIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  book: Book,
+  collection: Array
+})
+
+const { book, collection } = toRefs(props)
+
+const bookIdx = computed(() => {
+  return (collection.value || []).findIndex(
+    (colItem) => colItem.id === book.value.id
+  )
+})
+
+const previous = computed(() => {
+  if (bookIdx.value === -1) {
+    return null
+  }
+
+  const previousIdx = bookIdx.value - 1
+
+  return previousIdx >= 0 ? collection.value[previousIdx] : null
+})
+
+const next = computed(() => {
+  if (bookIdx.value === -1) {
+    return null
+  }
+
+  const nextIdx = bookIdx.value + 1
+
+  return nextIdx < collection.value.length ? collection.value[nextIdx] : null
+})
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <nav class="">
-    <ul class="font-medium text-sm flex divide-x dark:divide-gray-700 dark:text-gray-300">
+    <ul
+      class="font-medium text-sm flex divide-x dark:divide-gray-700 dark:text-gray-300"
+    >
       <li v-if="previous">
         <router-link
           :class="[
@@ -33,59 +79,6 @@
   </nav>
 </template>
 
-<script>
-import { computed, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { ArrowSmLeftIcon, ArrowSmRightIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: { ArrowSmLeftIcon, ArrowSmRightIcon },
-
-  props: {
-    book: Object,
-    collection: Array
-  },
-
-  setup (props) {
-    const { book, collection } = toRefs(props)
-
-    const bookIdx = computed(() => {
-      return (collection.value || [])
-        .findIndex(colItem => colItem.id === book.value.id)
-    })
-
-    const previous = computed(() => {
-      if (bookIdx.value === -1) {
-        return null
-      }
-
-      const previousIdx = bookIdx.value - 1
-
-      return previousIdx >= 0
-        ? collection.value[previousIdx]
-        : null
-    })
-
-    const next = computed(() => {
-      if (bookIdx.value === -1) {
-        return null
-      }
-
-      const nextIdx = bookIdx.value + 1
-
-      return nextIdx < collection.value.length
-        ? collection.value[nextIdx]
-        : null
-    })
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { previous, next, t }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .navigation-link:where(:hover, :focus-visible) {
   @apply underline underline-offset-1 decoration-2 dark:text-gray-100
diff --git a/src/components/book/BookOrganization.vue b/src/components/book/BookOrganization.vue
index 2dd92779..0fcbf599 100644
--- a/src/components/book/BookOrganization.vue
+++ b/src/components/book/BookOrganization.vue
@@ -1,3 +1,35 @@
+<script setup>
+import { toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import Book from '@/model/Book'
+
+import { TagIcon } from '@heroicons/vue/solid'
+import TagField from '@/components/fields/TagField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Book,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const { modelValue: book } = toRefs(props)
+
+function handleChange(newTags) {
+  const newBook = cloneDeep(book.value)
+  newBook.tags = newTags
+
+  emit('update:modelValue', newBook)
+}
+</script>
+
 <template>
   <div>
     <TagField
@@ -17,43 +49,3 @@
     </TagField>
   </div>
 </template>
-
-<script>
-import { toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import { TagIcon } from '@heroicons/vue/solid'
-import TagField from '@/components/fields/TagField.vue'
-
-import Book from '@/model/Book'
-
-export default {
-  components: { TagField, TagIcon },
-
-  props: {
-    modelValue: {
-      type: Book,
-      required: true
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { modelValue: book } = toRefs(props)
-
-    function handleChange (newTags) {
-      const newBook = cloneDeep(book.value)
-      newBook.tags = newTags
-
-      context.emit('update:modelValue', newBook)
-    }
-
-    return { t, handleChange }
-  }
-}
-</script>
diff --git a/src/components/book/BookOwnerBadge.vue b/src/components/book/BookOwnerBadge.vue
index 4fb11703..557ae829 100644
--- a/src/components/book/BookOwnerBadge.vue
+++ b/src/components/book/BookOwnerBadge.vue
@@ -1,3 +1,21 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSheetStore } from '@/stores/sheet'
+
+import { UserGroupIcon } from '@heroicons/vue/solid'
+
+import Avatar from '@/components/Avatar.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+const sheetStore = useSheetStore()
+
+const ownerDisplayName = computed(() => sheetStore.ownerDisplayName)
+const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
+const shared = computed(() => sheetStore.shared)
+</script>
+
 <template>
   <div v-if="shared" class="owner-badge">
     <Avatar :picture-url="ownerPictureUrl" small />
@@ -9,10 +27,7 @@
         {{ ownerDisplayName }}
       </p>
     </div>
-    <div
-      class="user-group"
-      :title="t('dashboard.sheetChooser.sharedWithYou')"
-    >
+    <div class="user-group" :title="t('dashboard.sheetChooser.sharedWithYou')">
       <span aria-hidden="true">
         <UserGroupIcon class="w-5 h-5" />
       </span>
@@ -23,37 +38,6 @@
   </div>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSheetStore } from '@/stores/sheet'
-
-import { UserGroupIcon } from '@heroicons/vue/solid'
-
-import Avatar from '@/components/Avatar.vue'
-
-export default {
-  components: { Avatar, UserGroupIcon },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-    const sheetStore = useSheetStore()
-
-    const ownerDisplayName = computed(() => sheetStore.ownerDisplayName)
-    const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
-    const shared = computed(() => sheetStore.shared)
-
-    return {
-      t,
-      ownerDisplayName,
-      ownerPictureUrl,
-      shared
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .owner-badge {
   @apply flex items-center space-x-3 sm:w-64 rounded-md
@@ -76,6 +60,6 @@ export default {
 }
 
 .user-group {
-  @apply shrink-0 pr-1 text-gray-400 dark:text-gray-500 ;
+  @apply shrink-0 pr-1 text-gray-400 dark:text-gray-500;
 }
 </style>
diff --git a/src/components/book/BookProviderSearch.vue b/src/components/book/BookProviderSearch.vue
index c3f978d3..cb588761 100644
--- a/src/components/book/BookProviderSearch.vue
+++ b/src/components/book/BookProviderSearch.vue
@@ -1,3 +1,76 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useMarkdown from '@/composables/useMarkdown'
+import useBookExistsQuery from '@/queries/useBookExistsQuery'
+import useIsbnSearchQuery from '@/queries/useIsbnSearchQuery'
+
+import { SearchIcon } from '@heroicons/vue/solid'
+
+import Alert from '@/components/Alert.vue'
+import BookSelector from '@/components/book/BookSelector.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const emit = defineEmits(['search', 'select', 'click:viewExisting'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const isbnQuery = ref('')
+const searchInput = ref(null)
+
+const {
+  error: searchError,
+  isError: searchFailed,
+  data: searchResults,
+  isLoading: searching,
+  refetch: isbnSearch
+} = useIsbnSearchQuery(isbnQuery, { enabled: false })
+
+const noResultsFound = computed(() => searchResults.value?.length === 0)
+
+function handleSearchSelect(selectedBook) {
+  emit('select', selectedBook)
+}
+
+const loading = ref(false)
+
+async function search() {
+  if (isbnQuery.value.length < 10) {
+    return
+  }
+
+  emit('search', true)
+  loading.value = true
+
+  searchInput.value?.blur()
+  await searchInSheet()
+  await isbnSearch.value()
+
+  emit('search', false)
+  loading.value = false
+}
+
+const { data: existingIds, refetch: checkIfExists } = useBookExistsQuery(
+  isbnQuery,
+  { enabled: false }
+)
+
+const proceedAnyway = ref(false)
+const existInSheet = computed(() => existingIds.value?.length > 0)
+
+async function searchInSheet() {
+  await checkIfExists.value()
+  proceedAnyway.value = !existInSheet.value
+}
+
+const { renderMarkdown } = useMarkdown()
+
+function viewExisting() {
+  emit('click:viewExisting', existingIds.value[0])
+}
+</script>
+
 <template>
   <div class="relative space-y-6">
     <form
@@ -7,7 +80,7 @@
       @submit.prevent="search"
     >
       <label for="book-isbn" id="isbn-search-label" class="sr-only">
-        {{ t('dashboard.newBook.autoFill.label' )}}
+        {{ t('dashboard.newBook.autoFill.label') }}
       </label>
       <div class="group relative w-full search-field">
         <div class="search-icon" aria-hidden="true">
@@ -24,8 +97,11 @@
           aria-labelledby="isbn-search-label search-provider-info"
           ref="searchInput"
           :disabled="searching"
+        />
+        <div
+          class="key-tooltip absolute right-3 inset-y-0 justify-center items-center"
+          aria-hidden="true"
         >
-        <div class="key-tooltip absolute right-3 inset-y-0 justify-center items-center" aria-hidden="true">
           <button
             type="submit"
             class="font-medium text-gray-400 dark:text-gray-300 text-xs leading-5 px-1.5 border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-700"
@@ -35,22 +111,14 @@
               {{ t('dashboard.newBook.autoFill.enter') }}
             </kbd>
             <span class="sr-only">
-              {{ t('dashboard.header.search.search' )}}
+              {{ t('dashboard.header.search.search') }}
             </span>
           </button>
         </div>
       </div>
     </form>
 
-    <transition
-      mode="out-in"
-      leave-active-class="motion-safe:transition duration-100 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-      enter-active-class="motion-safe:transition duration-200 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-    >
+    <FadeTransition>
       <Alert
         v-if="!noResultsFound && !searchFailed && !searchResults"
         show
@@ -59,7 +127,9 @@
       >
         <div
           class="prose-sm"
-          v-html="renderMarkdown(t('dashboard.newBook.autoFill.isbnAlert.body'))"
+          v-html="
+            renderMarkdown(t('dashboard.newBook.autoFill.isbnAlert.body'))
+          "
         />
 
         <template v-slot:actions>
@@ -95,7 +165,9 @@
         </template>
       </Alert>
 
-      <div v-else-if="proceedAnyway && searchResults && searchResults.length > 0">
+      <div
+        v-else-if="proceedAnyway && searchResults && searchResults.length > 0"
+      >
         <h3 class="text-gray-700 dark:text-gray-200 font-medium font-display">
           {{ t('dashboard.search.results') }}
         </h3>
@@ -117,120 +189,13 @@
         <p>{{ searchError }}</p>
       </Alert>
 
-      <Alert
-        v-else-if="noResultsFound"
-        show
-        type="info"
-      >
+      <Alert v-else-if="noResultsFound" show type="info">
         <p>{{ t('dashboard.newBook.autoFill.noResults') }}</p>
       </Alert>
-
-    </transition>
+    </FadeTransition>
   </div>
 </template>
 
-<script>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { SearchIcon } from '@heroicons/vue/solid'
-
-import Alert from '@/components/Alert.vue'
-import BookSelector from '@/components/book/BookSelector.vue'
-
-import useMarkdown from '@/composables/useMarkdown'
-import useBookExistsQuery from '@/queries/useBookExistsQuery'
-import useIsbnSearchQuery from '@/queries/useIsbnSearchQuery'
-
-export default {
-  components: {
-    Alert,
-    BookSelector,
-    SearchIcon
-  },
-
-  emits: ['search', 'select', 'click:viewExisting'],
-
-  setup (_, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const isbnQuery = ref('')
-    const searchInput = ref(null)
-
-    const {
-      error: searchError,
-      isError: searchFailed,
-      data: searchResults,
-      isLoading: searching,
-      refetch: isbnSearch
-    } = useIsbnSearchQuery(isbnQuery, { enabled: false })
-
-    const noResultsFound = computed(() => searchResults.value?.length === 0)
-
-    function handleSearchSelect (selectedBook) {
-      context.emit('select', selectedBook)
-    }
-
-    const loading = ref(false)
-
-    async function search () {
-      if (isbnQuery.value.length < 10) {
-        return
-      }
-
-      context.emit('search', true)
-      loading.value = true
-
-      searchInput.value?.blur()
-      await searchInSheet()
-      await isbnSearch.value()
-
-      context.emit('search', false)
-      loading.value = false
-    }
-
-    const {
-      data: existingIds,
-      refetch: checkIfExists
-    } = useBookExistsQuery(isbnQuery, { enabled: false })
-
-    const proceedAnyway = ref(false)
-    const existInSheet = computed(() => existingIds.value?.length > 0)
-
-    async function searchInSheet () {
-      await checkIfExists.value()
-      proceedAnyway.value = !existInSheet.value
-    }
-
-    const { renderMarkdown } = useMarkdown()
-
-    function viewExisting () {
-      context.emit('click:viewExisting', existingIds.value[0])
-    }
-
-    return {
-      t,
-      isbnQuery,
-      searchInput,
-      searchError,
-      searchFailed,
-      noResultsFound,
-      searchResults,
-      isbnSearch,
-      searching,
-      handleSearchSelect,
-      search,
-      existInSheet,
-      existingIds,
-      proceedAnyway,
-      loading,
-      renderMarkdown,
-      viewExisting
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 #search-form .key-tooltip {
   @apply hidden;
@@ -240,10 +205,10 @@ export default {
   @apply md:flex;
 }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
   display: none;
 }
 
diff --git a/src/components/book/BookReading.vue b/src/components/book/BookReading.vue
index 4045297f..b91d7d54 100644
--- a/src/components/book/BookReading.vue
+++ b/src/components/book/BookReading.vue
@@ -1,3 +1,85 @@
+<script setup>
+import { ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import Book, { STATUS_READ, STATUS_UNREAD } from '@/model/Book'
+
+import Alert from '@/components/Alert.vue'
+import TextField from '@/components/fields/TextField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Book,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const { modelValue: book } = toRefs(props)
+
+// Don't remove the timezone offset because it's already removed
+// when saving in the spreadsheet by the Book.toArray() method.
+const today = new Date()
+
+function isToday(date) {
+  return (
+    today.getUTCFullYear() === date.getUTCFullYear() &&
+    today.getUTCMonth() === date.getUTCMonth() &&
+    today.getUTCDate() === date.getUTCDate()
+  )
+}
+
+const state = ref(book.value.isRead ? 'read-other' : 'unread')
+const newReadDate = ref('')
+
+if (book.value.readAt) {
+  const { readAt } = book.value
+
+  state.value = 'read-' + (isToday(readAt) ? 'today' : 'other')
+  newReadDate.value = readAt.toISOString().substring(0, 10)
+}
+
+watch(book, (newBook) => {
+  newReadDate.value = today.toISOString().substring(0, 10)
+
+  if (newBook.readAt) {
+    const { readAt } = book
+
+    state.value = 'read-' + (isToday(readAt.getTime()) ? 'today' : 'other')
+    newReadDate.value = readAt.toISOString().substring(0, 10)
+  }
+})
+
+watch(state, (newState) => {
+  const bookCopy = cloneDeep(book.value)
+
+  if (newState === 'unread') {
+    bookCopy.status = STATUS_UNREAD
+    bookCopy.readAt = null
+  } else if (newState.includes('read')) {
+    bookCopy.status = STATUS_READ
+    bookCopy.readAt = today
+  }
+
+  emit('update:modelValue', bookCopy)
+})
+
+watch(newReadDate, (newValue) => {
+  const bookCopy = cloneDeep(book.value)
+  bookCopy.readAt = newValue.length === 10 ? new Date(newValue) : null
+  bookCopy.readAt?.setMinutes(
+    bookCopy.readAt.getMinutes() + bookCopy.readAt.getTimezoneOffset()
+  )
+
+  emit('update:modelValue', bookCopy)
+})
+</script>
+
 <template>
   <div class="space-y-8">
     <Alert type="info" show>
@@ -12,7 +94,7 @@
           id="unread"
           class="radio"
           value="unread"
-        >
+        />
         <label for="unread" class="label mb-0">
           {{ t('dashboard.details.readingForm.options.notReadYet') }}
         </label>
@@ -25,7 +107,7 @@
           id="read-today"
           class="radio"
           value="read-today"
-        >
+        />
         <label for="read-today" class="label mb-0">
           {{ t('dashboard.details.readingForm.options.readToday') }}
         </label>
@@ -41,7 +123,7 @@
           id="read-other"
           class="radio"
           value="read-other"
-        >
+        />
         <div>
           <label for="read-other" class="label mb-0">
             {{ t('dashboard.details.readingForm.options.readOtherDate') }}
@@ -59,95 +141,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Alert from '@/components/Alert.vue'
-import TextField from '@/components/fields/TextField.vue'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import Book, { STATUS_READ, STATUS_UNREAD } from '@/model/Book'
-
-export default {
-  components: { Alert, TextField },
-
-  props: {
-    modelValue: {
-      type: Book,
-      required: true
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { modelValue: book } = toRefs(props)
-
-    // Don't remove the timezone offset because it's already removed
-    // when saving in the spreadsheet by the Book.toArray() method.
-    const today = new Date()
-
-    function isToday (date) {
-      return today.getUTCFullYear() === date.getUTCFullYear() &&
-        today.getUTCMonth() === date.getUTCMonth() &&
-        today.getUTCDate() === date.getUTCDate()
-    }
-
-    const state = ref(book.value.isRead ? 'read-other' : 'unread')
-    const newReadDate = ref('')
-
-    if (book.value.readAt) {
-      const { readAt } = book.value
-
-      state.value = 'read-' + (isToday(readAt) ? 'today' : 'other')
-      newReadDate.value = readAt.toISOString().substring(0, 10)
-    }
-
-    watch(book, newBook => {
-      newReadDate.value = today.toISOString().substring(0, 10)
-
-      if (newBook.readAt) {
-        const { readAt } = book
-
-        state.value = 'read-' + (isToday(readAt.getTime()) ? 'today' : 'other')
-        newReadDate.value = readAt.toISOString().substring(0, 10)
-      }
-    })
-
-    watch(state, newState => {
-      const bookCopy = cloneDeep(book.value)
-
-      if (newState === 'unread') {
-        bookCopy.status = STATUS_UNREAD
-        bookCopy.readAt = null
-      } else if (newState.includes('read')) {
-        bookCopy.status = STATUS_READ
-        bookCopy.readAt = today
-      }
-
-      context.emit('update:modelValue', bookCopy)
-    })
-
-    watch(newReadDate, newValue => {
-      const bookCopy = cloneDeep(book.value)
-      bookCopy.readAt = newValue.length === 10 ? new Date(newValue) : null
-      bookCopy.readAt?.setMinutes(
-        bookCopy.readAt.getMinutes() + bookCopy.readAt.getTimezoneOffset()
-      )
-
-      context.emit('update:modelValue', bookCopy)
-    })
-
-    return {
-      t,
-      state,
-      newReadDate
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookSelector.vue b/src/components/book/BookSelector.vue
index 3903bf2b..7c789f72 100644
--- a/src/components/book/BookSelector.vue
+++ b/src/components/book/BookSelector.vue
@@ -1,3 +1,47 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  RadioGroup,
+  RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption
+} from '@headlessui/vue'
+
+defineProps({ options: Array })
+
+const emit = defineEmits(['select'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const separator = computed(() => {
+  return t('dashboard.details.header.authorSeparator')
+})
+
+function formatAuthors(authors) {
+  let formattedAuthors = (authors || []).join(separator)
+
+  if (authors && authors.length >= 2) {
+    const firstAuthors = (authors || []).slice(0, -1).join(separator.value)
+
+    formattedAuthors = t('dashboard.details.header.authorListComplete', {
+      authors: firstAuthors,
+      lastAuthor: authors[authors.length - 1]
+    })
+  }
+
+  return formattedAuthors
+}
+
+const selected = ref(null)
+
+function setSelected(newValue) {
+  selected.value = newValue
+  emit('select', newValue)
+}
+</script>
+
 <template>
   <RadioGroup
     class="flex flex-col space-y-2"
@@ -31,7 +75,9 @@
         >
           <span
             :class="[
-              checked ? 'bg-white' : 'bg-white dark:bg-gray-850 dark:group-hover:bg-gray-850',
+              checked
+                ? 'bg-white'
+                : 'bg-white dark:bg-gray-850 dark:group-hover:bg-gray-850',
               'inline-block w-1.5 h-1.5 rounded-xl'
             ]"
           />
@@ -82,72 +128,3 @@
     </RadioGroupOption>
   </RadioGroup>
 </template>
-
-<script>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  RadioGroup,
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption
-} from '@headlessui/vue'
-
-export default {
-  components: {
-    RadioGroup,
-    RadioGroupDescription,
-    RadioGroupLabel,
-    RadioGroupOption
-  },
-
-  props: {
-    options: Array
-  },
-
-  emits: ['select'],
-
-  setup (_, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const separator = computed(() => {
-      return t('dashboard.details.header.authorSeparator')
-    })
-
-    function formatAuthors (authors) {
-      let formattedAuthors = (authors || []).join(separator)
-
-      if (authors && authors.length >= 2) {
-        const firstAuthors = (authors || [])
-          .slice(0, -1)
-          .join(separator.value)
-
-        formattedAuthors = t(
-          'dashboard.details.header.authorListComplete',
-          {
-            authors: firstAuthors,
-            lastAuthor: authors[authors.length - 1]
-          }
-        )
-      }
-
-      return formattedAuthors
-    }
-
-    const selected = ref(null)
-
-    function setSelected (newValue) {
-      selected.value = newValue
-      context.emit('select', newValue)
-    }
-
-    return {
-      formatAuthors,
-      selected,
-      setSelected,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookTable.vue b/src/components/book/BookTable.vue
index d2d517f3..ec3b1fc2 100644
--- a/src/components/book/BookTable.vue
+++ b/src/components/book/BookTable.vue
@@ -1,7 +1,496 @@
+<script setup>
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { STATUS_FUTURE, STATUS_READ, STATUS_UNREAD } from '@/model/Book'
+import { useSheetStore } from '@/stores/sheet'
+import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
+
+import {
+  ArrowSmDownIcon,
+  ArrowSmUpIcon,
+  PhotographIcon
+} from '@heroicons/vue/outline'
+import { DotsHorizontalIcon, StarIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  currentPage: Number,
+  items: Array,
+  loading: Boolean,
+  selectable: Boolean,
+  skeleton: Boolean,
+  sortProperty: String,
+  sortDirection: String
+})
+
+const emit = defineEmits([
+  'click:deleteSelection',
+  'click:markAs',
+  'click:toggleFavorite',
+  'select',
+  'sort'
+])
+
+const { t, d, n, locale, getNumberFormat } = useI18n({ useScope: 'global' })
+const sheetStore = useSheetStore()
+const router = useRouter()
+
+const { data: timeZone } = useTimeZoneQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+function formatDate(date) {
+  return d(date, 'long', { timeZone: timeZone.value.name })
+}
+
+function formatPrice(currency, value) {
+  const formatter = new Intl.NumberFormat(locale.value, {
+    ...getNumberFormat(locale.value).currency,
+    currency: currency
+  })
+
+  return formatter.formatToParts(value !== undefined ? value : 0)
+}
+
+function currency(currency) {
+  const part = formatPrice(currency).find((p) => p.type === 'currency')
+
+  return part?.value || '$'
+}
+
+function value(currencyValue, value) {
+  const currencySymbol = currency(currencyValue)
+
+  return n(value, 'currency', { currency: currencyValue })
+    .replace(currencySymbol, '')
+    .trim()
+}
+
+function volumeText(item) {
+  const isSingle = item.titleParts.number === null
+
+  return t(
+    isSingle ? 'book.single' : 'book.volume',
+    isSingle ? undefined : { number: item.titleParts.number }
+  )
+}
+
+const { skeleton, loading } = toRefs(props)
+
+const columns = computed(() => [
+  {
+    key: 'status',
+    label: t('book.properties.status'),
+    class:
+      'hidden md:table-cell w-[12ch] ' + (skeleton.value ? '!text-right' : ''),
+    buttonClass: '!text-right',
+    skeletonClass: 'ml-3'
+  },
+  {
+    key: 'paidPrice.value',
+    label: t('book.properties.paidPrice'),
+    class: 'hidden lg:table-cell w-[15ch]',
+    buttonClass: '!pl-8',
+    skeletonClass: 'ml-6'
+  },
+  {
+    key: 'createdAt',
+    label: t('book.properties.createdAt'),
+    class: 'hidden md:table-cell w-[20ch]'
+  },
+  {
+    key: 'actions',
+    label: t('dashboard.library.items.tableColumns.actions'),
+    hidden: true,
+    class: 'w-16'
+  }
+])
+
+const { items, selectable } = toRefs(props)
+
+const selection = ref([])
+const current = ref(0)
+const topCheckbox = ref(null)
+const tableBody = ref(null)
+
+const isMac = ref(
+  navigator.userAgentData
+    ? navigator.userAgentData.platform.toLowerCase().indexOf('mac') > -1
+    : navigator.platform.toLowerCase().indexOf('mac') > -1
+)
+
+function handleTopCheckbox(checked) {
+  if (!selectable.value || !hasMinimumBreakpoint()) {
+    return
+  }
+
+  selection.value = checked ? Array.from(Array(items.value.length).keys()) : []
+
+  if (topCheckbox.value) {
+    topCheckbox.value.indeterminate =
+      selection.value.length > 0 && selection.value.length < items.value.length
+  }
+
+  current.value = 0
+
+  emit('select', selection.value)
+}
+
+function rangeArray(startIdx, endIdx) {
+  if (startIdx === endIdx) {
+    return [startIdx]
+  }
+
+  return Array.from(
+    { length: endIdx - startIdx + 1 },
+    (_, i) => i + startIdx
+  ).sort((a, b) => a - b)
+}
+
+function hasMinimumBreakpoint() {
+  return window.matchMedia('(min-width: 768px)').matches
+}
+
+/**
+ * Try to mimic the Windows behavior on selecting items
+ * using the mouse + Shift + Ctrl + Command + checkboxes.
+ *
+ * @param {boolean} checked
+ * @param {number} idx
+ * @param {MouseEvent} event
+ */
+function handleCheckbox(checked, idx, event) {
+  if (event.target.tagName === 'A') {
+    return
+  }
+
+  if (!hasMinimumBreakpoint()) {
+    router.push({
+      name: 'BookDetails',
+      params: { bookId: items.value[idx].id }
+    })
+    return
+  }
+
+  if (!selectable.value) {
+    return
+  }
+
+  const controlKey = isMac.value ? event.metaKey : event.ctrlKey
+
+  const individual = controlKey || event.target.tagName === 'INPUT'
+
+  if (event.target.tagName === 'LABEL') {
+    event.preventDefault()
+  }
+
+  if (event.shiftKey && selection.value.length === 0) {
+    selection.value.push(idx)
+  } else if (event.shiftKey && !controlKey) {
+    const startIdx = Math.min(selection.value[0], idx)
+    const endIdx = Math.max(selection.value[0], idx)
+    selection.value = rangeArray(startIdx, endIdx)
+  } else if (individual && selection.value.includes(idx) && !checked) {
+    selection.value.splice(selection.value.indexOf(idx), 1)
+  } else if (individual) {
+    selection.value.push(idx)
+  } else if (selection.value.length > 1) {
+    selection.value = [idx]
+  } else {
+    selection.value = selection.value.includes(idx) ? [] : [idx]
+  }
+
+  selection.value = Array.from(new Set(selection.value)).sort((a, b) => a - b)
+
+  if (topCheckbox.value) {
+    topCheckbox.value.indeterminate =
+      selection.value.length > 0 && selection.value.length < items.value.length
+  }
+
+  current.value = idx
+
+  emit('select', selection.value)
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @param {number} idx
+ */
+function handleKeyboard(event, idx) {
+  const allowedKeys = [
+    'ArrowDown',
+    'ArrowUp',
+    'Home',
+    'End',
+    'Delete',
+    'Enter',
+    'a',
+    ' '
+  ]
+  const { key, shiftKey, ctrlKey, metaKey } = event
+
+  const controlKey = isMac.value ? metaKey : ctrlKey
+
+  const totalItems = items.value.length
+  const selectionTotalItems = selection.value.length
+
+  if (!allowedKeys.includes(key) || !hasMinimumBreakpoint()) {
+    return
+  }
+
+  if (key === 'Enter') {
+    router.push({
+      name: 'BookDetails',
+      params: { bookId: items.value[idx].id }
+    })
+
+    return
+  }
+
+  if (!selectable.value) {
+    if (key === 'ArrowDown') {
+      current.value = Math.min(idx + 1, totalItems - 1)
+    } else if (key === 'ArrowUp') {
+      current.value = Math.max(idx - 1, 0)
+    }
+
+    nextTick(() => tableBody.value?.children[current.value].focus())
+
+    return
+  }
+
+  if ((key === 'ArrowUp' || key === 'Home') && current.value === 0) {
+    return
+  }
+
+  if (
+    (key === 'ArrowDown' || key === 'End') &&
+    current.value === totalItems - 1
+  ) {
+    return
+  }
+
+  event.preventDefault()
+
+  if (key === 'Delete' && selection.value.length > 0) {
+    emit('click:deleteSelection')
+  } else if (
+    key === 'a' &&
+    controlKey &&
+    !shiftKey &&
+    selection.value.length < totalItems
+  ) {
+    selection.value = rangeArray(0, totalItems - 1)
+  } else if (key === 'a' && controlKey && !shiftKey) {
+    selection.value = []
+  } else if (key === ' ' && !controlKey && selectionTotalItems === 0) {
+    selection.value = [idx]
+    current.value = idx
+  } else if (
+    selectionTotalItems === 0 &&
+    (key === 'ArrowDown' || key === 'ArrowUp') &&
+    !controlKey
+  ) {
+    selection.value = [idx]
+    current.value = idx
+  } else if (shiftKey) {
+    if (key === 'End') {
+      const startIdx = selection.value[0] || 0
+      const endIdx = totalItems - 1
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = endIdx
+    } else if (key === 'Home') {
+      const startIdx = 0
+      const endIdx =
+        selection.value.length > 0
+          ? selection.value[selection.value.length - 1]
+          : 0
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = startIdx
+    } else if (
+      key === 'ArrowDown' &&
+      !selection.value.includes(current.value + 1)
+    ) {
+      const startIdx = selection.value[0]
+      const endIdx = Math.min(current.value + 1, totalItems - 1)
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = endIdx
+    } else if (key === 'ArrowDown') {
+      const startIdx = Math.min(current.value + 1, totalItems - 1)
+      const endIdx = selection.value[selection.value.length - 1]
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = startIdx
+    } else if (
+      key === 'ArrowUp' &&
+      !selection.value.includes(current.value - 1)
+    ) {
+      const startIdx = Math.max(current.value - 1, 0)
+      const endIdx = selection.value[selection.value.length - 1]
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = startIdx
+    } else if (key === 'ArrowUp') {
+      const startIdx = selection.value[0]
+      const endIdx = Math.max(current.value - 1, 0)
+      selection.value = rangeArray(startIdx, endIdx)
+      current.value = endIdx
+    }
+  } else if (controlKey) {
+    if (key === 'Home') {
+      current.value = 0
+    } else if (key === 'End') {
+      current.value = totalItems - 1
+    } else if (key === 'ArrowDown') {
+      current.value = Math.min(idx + 1, totalItems - 1)
+    } else if (key === 'ArrowUp') {
+      current.value = Math.max(idx - 1, 0)
+    } else if (key === ' ' && selection.value.includes(current.value)) {
+      selection.value.splice(selection.value.indexOf(current.value), 1)
+    } else if (key === ' ') {
+      selection.value.push(current.value)
+    }
+  } else if (key === 'ArrowDown' && current.value + 1 < totalItems) {
+    selection.value = [++current.value]
+  } else if (key === 'ArrowUp' && current.value - 1 >= 0) {
+    selection.value = [--current.value]
+  } else if (key === 'Home') {
+    selection.value = [0]
+    current.value = selection.value[0]
+  } else if (key === 'End') {
+    selection.value = [totalItems - 1]
+    current.value = selection.value[0]
+  }
+
+  selection.value = Array.from(new Set(selection.value)).sort((a, b) => a - b)
+
+  if (topCheckbox.value) {
+    topCheckbox.value.indeterminate =
+      selection.value.length > 0 && selection.value.length < items.value.length
+  }
+
+  nextTick(() => focus())
+
+  emit('select', selection.value)
+}
+
+function clearSelection() {
+  selection.value = []
+  current.value = 0
+
+  if (topCheckbox.value) {
+    topCheckbox.value.indeterminate = false
+  }
+
+  emit('select', selection.value)
+}
+
+const { currentPage, sortProperty, sortDirection } = toRefs(props)
+
+watch(() => loading.value || skeleton.value, clearSelection)
+watch([currentPage, sortProperty, sortDirection], clearSelection)
+
+function handleDeleteSelection() {
+  const booksToDelete = selection.value.map((idx) => items.value[idx])
+  emit('click:deleteSelection', booksToDelete)
+}
+
+function ariaSorted(property) {
+  if (sortProperty.value !== property) {
+    return 'none'
+  }
+
+  return sortDirection.value === 'asc' ? 'ascending' : 'descending'
+}
+
+function handleSort(property) {
+  if (property !== sortProperty.value) {
+    emit('sort', {
+      property,
+      direction: sortDirection.value
+    })
+  } else {
+    emit('sort', {
+      property,
+      direction: sortDirection.value === 'asc' ? 'desc' : 'asc'
+    })
+  }
+}
+
+/**
+ * @param {number[]} array
+ * @param {string} key
+ */
+function countBy(array, key) {
+  const counting = array
+    .map((idx) => items.value[idx])
+    .reduce((acm, crr) => {
+      if (acm[crr[key]] !== undefined) {
+        acm[crr[key]]++
+      } else {
+        acm[crr[key]] = 1
+      }
+
+      return acm
+    }, {})
+
+  return Object.entries(counting)
+    .sort((a, b) => b[1] - a[1])
+    .map((entry) => ({ [key]: entry[0], count: entry[1] }))
+}
+
+const statusCount = computed(() => countBy(selection.value, 'status'))
+
+const predominantStatus = computed(() => statusCount.value[0]?.status)
+
+const inverseStatus = computed(() => {
+  return predominantStatus.value === STATUS_READ ? STATUS_UNREAD : STATUS_READ
+})
+
+const inverseStatusText = computed(() => {
+  const statusKey = inverseStatus.value.toLowerCase()
+  return t(`book.${statusKey}`)
+})
+
+const hasFutureSelected = computed(() => {
+  return statusCount.value.find(({ status }) => status === STATUS_FUTURE)
+})
+
+function handleMarkAsClick() {
+  const booksToEdit = selection.value.map((idx) => items.value[idx])
+  emit('click:markAs', { booksToEdit, newStatus: inverseStatus.value })
+}
+
+const favoritesCount = computed(() => countBy(selection.value, 'favorite'))
+
+const inverseFavorite = computed(() => {
+  return favoritesCount.value?.[0]?.favorite === 'false'
+})
+
+function handleToggleFavorite() {
+  const booksToEdit = selection.value.map((idx) => items.value[idx])
+  emit('click:toggleFavorite', {
+    booksToEdit,
+    newFavorite: inverseFavorite.value
+  })
+}
+
+function focus() {
+  tableBody.value?.children[current.value].focus()
+}
+
+function focusOnActiveHeader() {
+  document.querySelector('th[aria-sort]:not([aria-sort=none]) button')?.focus()
+}
+</script>
+
 <template>
-  <div class="relative -mx-4 sm:-mx-6 md:mx-0 md:rounded-lg shadow overflow-hidden">
+  <div
+    class="relative -mx-4 sm:-mx-6 md:mx-0 md:rounded-lg shadow overflow-hidden"
+  >
     <div class="align-middle inline-block min-w-full" :aria-hidden="skeleton">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 select-none">
+      <table
+        class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 select-none"
+      >
         <thead class="bg-gray-50 dark:bg-gray-800">
           <tr>
             <th
@@ -44,8 +533,16 @@
                   {{ t('book.book') }}
                 </span>
                 <template v-if="sortProperty === 'title'">
-                  <ArrowSmUpIcon v-if="sortDirection === 'asc'" class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1" aria-hidden="true" />
-                  <ArrowSmDownIcon v-else class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1" aria-hidden="true" />
+                  <ArrowSmUpIcon
+                    v-if="sortDirection === 'asc'"
+                    class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1"
+                    aria-hidden="true"
+                  />
+                  <ArrowSmDownIcon
+                    v-else
+                    class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1"
+                    aria-hidden="true"
+                  />
                 </template>
               </button>
               <div v-else-if="!skeleton" class="space-x-2 ml-3">
@@ -56,10 +553,9 @@
                   @click="handleMarkAsClick"
                 >
                   {{
-                    t(
-                      'dashboard.details.header.options.markAs',
-                      { status: inverseStatusText.toLocaleLowerCase(locale) }
-                    )
+                    t('dashboard.details.header.options.markAs', {
+                      status: inverseStatusText.toLocaleLowerCase(locale)
+                    })
                   }}
                 </button>
                 <button
@@ -80,7 +576,9 @@
                   class="button is-small"
                   @click="handleDeleteSelection"
                 >
-                  {{ t('dashboard.library.items.tableColumns.deleteSelection') }}
+                  {{
+                    t('dashboard.library.items.tableColumns.deleteSelection')
+                  }}
                 </button>
               </div>
               <div
@@ -120,8 +618,16 @@
                   {{ column.label }}
                 </span>
                 <template v-if="sortProperty === column.key && !column.hidden">
-                  <ArrowSmUpIcon v-if="sortDirection === 'asc'" class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1" aria-hidden="true" />
-                  <ArrowSmDownIcon v-else class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1" aria-hidden="true" />
+                  <ArrowSmUpIcon
+                    v-if="sortDirection === 'asc'"
+                    class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1"
+                    aria-hidden="true"
+                  />
+                  <ArrowSmDownIcon
+                    v-else
+                    class="align-text-bottom inline-block h-4 w-4 dark:text-gray-100 ml-1"
+                    aria-hidden="true"
+                  />
                 </template>
               </button>
               <span
@@ -161,13 +667,12 @@
               ]"
               :tabindex="bookIdx === current ? '0' : null"
               :aria-labelledby="'book-label-' + book.id"
-              @click="handleCheckbox(!selection.includes(bookIdx), bookIdx, $event)"
+              @click="
+                handleCheckbox(!selection.includes(bookIdx), bookIdx, $event)
+              "
               @keydown="handleKeyboard($event, bookIdx)"
             >
-              <td
-                v-if="selectable"
-                class="hidden pl-5 md:table-cell relative"
-              >
+              <td v-if="selectable" class="hidden pl-5 md:table-cell relative">
                 <div
                   :class="[
                     'absolute w-[3px] h-full left-0 inset-y-0',
@@ -259,12 +764,16 @@
                   />
                 </div>
               </td>
-              <td class="pr-3 py-4 md:whitespace-nowrap hidden md:table-cell text-right">
+              <td
+                class="pr-3 py-4 md:whitespace-nowrap hidden md:table-cell text-right"
+              >
                 <span :class="'is-' + book.status.toLowerCase()" class="badge">
                   {{ t(`book.${book.status.toLowerCase()}`) }}
                 </span>
               </td>
-              <td class="py-4 lg:whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 hidden lg:table-cell">
+              <td
+                class="py-4 lg:whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 hidden lg:table-cell"
+              >
                 <div class="tabular-nums px-8">
                   <span>
                     {{ currency(book.paidPrice.currency) }}
@@ -274,12 +783,16 @@
                   </span>
                 </div>
               </td>
-              <td class="w-[20ch] px-3 py-4 md:whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 hidden md:table-cell">
+              <td
+                class="w-[20ch] px-3 py-4 md:whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 hidden md:table-cell"
+              >
                 <span class="tabular-nums">
                   {{ formatDate(book.createdAt) }}
                 </span>
               </td>
-              <td class="pr-6 py-4 w-16 md:whitespace-nowrap text-right text-sm font-medium">
+              <td
+                class="pr-6 py-4 w-16 md:whitespace-nowrap text-right text-sm font-medium"
+              >
                 <router-link
                   :to="{ name: 'BookDetails', params: { bookId: book.id } }"
                   class="button justify-center w-10 h-10 p-2 -mr-2 is-ghost is-icon-only bg-transparent"
@@ -298,7 +811,12 @@
           <template v-else>
             <tr v-for="idx in 18" :key="idx">
               <td v-if="selectable" class="hidden px-5 md:table-cell">
-                <input aria-hidden="true" type="checkbox" disabled class="checkbox">
+                <input
+                  aria-hidden="true"
+                  type="checkbox"
+                  disabled
+                  class="checkbox"
+                />
               </td>
               <td
                 :class="[
@@ -307,8 +825,12 @@
                 ]"
               >
                 <div class="flex items-center">
-                  <div class="shrink-0 skeleton h-10 w-10 inline-flex items-center justify-center">
-                    <PhotographIcon class="h-6 w-6 text-white dark:text-gray-500"/>
+                  <div
+                    class="shrink-0 skeleton h-10 w-10 inline-flex items-center justify-center"
+                  >
+                    <PhotographIcon
+                      class="h-6 w-6 text-white dark:text-gray-500"
+                    />
                   </div>
                   <div class="ml-4">
                     <div class="skeleton w-36 h-4" />
@@ -335,512 +857,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { computed, nextTick, ref, toRefs, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import { useSheetStore } from '@/stores/sheet'
-import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
-
-import {
-  ArrowSmDownIcon,
-  ArrowSmUpIcon,
-  PhotographIcon
-} from '@heroicons/vue/outline'
-import { DotsHorizontalIcon, StarIcon } from '@heroicons/vue/solid'
-
-import { STATUS_FUTURE, STATUS_READ, STATUS_UNREAD } from '@/model/Book'
-
-export default {
-  components: {
-    ArrowSmDownIcon,
-    ArrowSmUpIcon,
-    DotsHorizontalIcon,
-    PhotographIcon,
-    StarIcon
-  },
-
-  props: {
-    currentPage: Number,
-    items: Array,
-    loading: Boolean,
-    selectable: Boolean,
-    skeleton: Boolean,
-    sortProperty: String,
-    sortDirection: String
-  },
-
-  emits: [
-    'click:deleteSelection', 'click:markAs', 'click:toggleFavorite',
-    'select', 'sort'
-  ],
-
-  setup (props, { emit }) {
-    const { t, d, n, locale, getNumberFormat } = useI18n({ useScope: 'global' })
-    const sheetStore = useSheetStore()
-    const router = useRouter()
-
-    const { data: timeZone } = useTimeZoneQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
-
-    function formatDate (date) {
-      return d(date, 'long', { timeZone: timeZone.value.name })
-    }
-
-    function formatPrice (currency, value) {
-      const formatter = new Intl.NumberFormat(locale.value, {
-        ...getNumberFormat(locale.value).currency,
-        currency: currency
-      })
-
-      return formatter.formatToParts(value !== undefined ? value : 0)
-    }
-
-    function currency (currency) {
-      const part = formatPrice(currency).find(p => p.type === 'currency')
-
-      return part?.value || '$'
-    }
-
-    function value (currencyValue, value) {
-      const currencySymbol = currency(currencyValue)
-
-      return n(value, 'currency', { currency: currencyValue })
-        .replace(currencySymbol, '')
-        .trim()
-    }
-
-    function volumeText (item) {
-      const isSingle = item.titleParts.number === null
-
-      return t(
-        isSingle ? 'book.single' : 'book.volume',
-        isSingle ? undefined : { number: item.titleParts.number }
-      )
-    }
-
-    const { skeleton, loading } = toRefs(props)
-
-    const columns = computed(() => [
-      {
-        key: 'status',
-        label: t('book.properties.status'),
-        class: 'hidden md:table-cell w-[12ch] ' +
-          (skeleton.value ? '!text-right' : ''),
-        buttonClass: '!text-right',
-        skeletonClass: 'ml-3'
-      },
-      {
-        key: 'paidPrice.value',
-        label: t('book.properties.paidPrice'),
-        class: 'hidden lg:table-cell w-[15ch]',
-        buttonClass: '!pl-8',
-        skeletonClass: 'ml-6'
-      },
-      {
-        key: 'createdAt',
-        label: t('book.properties.createdAt'),
-        class: 'hidden md:table-cell w-[20ch]'
-      },
-      {
-        key: 'actions',
-        label: t('dashboard.library.items.tableColumns.actions'),
-        hidden: true,
-        class: 'w-16'
-      }
-    ])
-
-    const { items, selectable } = toRefs(props)
-
-    const selection = ref([])
-    const current = ref(0)
-    const topCheckbox = ref(null)
-    const tableBody = ref(null)
-
-    const isMac = ref(
-      navigator.userAgentData
-        ? navigator.userAgentData.platform.toLowerCase().indexOf('mac') > -1
-        : navigator.platform.toLowerCase().indexOf('mac') > -1
-    )
-
-    function handleTopCheckbox (checked) {
-      if (!selectable.value || !hasMinimumBreakpoint()) {
-        return
-      }
-
-      selection.value = checked
-        ? Array.from(Array(items.value.length).keys())
-        : []
-
-      if (topCheckbox.value) {
-        topCheckbox.value.indeterminate = selection.value.length > 0 &&
-          selection.value.length < items.value.length
-      }
-
-      current.value = 0
-
-      emit('select', selection.value)
-    }
-
-    function rangeArray (startIdx, endIdx) {
-      if (startIdx === endIdx) {
-        return [startIdx]
-      }
-
-      return Array
-        .from(
-          { length: endIdx - startIdx + 1 },
-          (_, i) => i + startIdx
-        )
-        .sort((a, b) => a - b)
-    }
-
-    function hasMinimumBreakpoint () {
-      return window.matchMedia('(min-width: 768px)').matches
-    }
-
-    /**
-     * Try to mimic the Windows behavior on selecting items
-     * using the mouse + Shift + Ctrl + Command + checkboxes.
-     *
-     * @param {boolean} checked
-     * @param {number} idx
-     * @param {MouseEvent} event
-     */
-    function handleCheckbox (checked, idx, event) {
-      if (event.target.tagName === 'A') {
-        return
-      }
-
-      if (!hasMinimumBreakpoint()) {
-        router.push({
-          name: 'BookDetails',
-          params: { bookId: items.value[idx].id }
-        })
-        return
-      }
-
-      if (!selectable.value) {
-        return
-      }
-
-      const controlKey = isMac.value ? event.metaKey : event.ctrlKey
-
-      const individual = controlKey || event.target.tagName === 'INPUT'
-
-      if (event.target.tagName === 'LABEL') {
-        event.preventDefault()
-      }
-
-      if (event.shiftKey && selection.value.length === 0) {
-        selection.value.push(idx)
-      } else if (event.shiftKey && !controlKey) {
-        const startIdx = Math.min(selection.value[0], idx)
-        const endIdx = Math.max(selection.value[0], idx)
-        selection.value = rangeArray(startIdx, endIdx)
-      } else if (individual && selection.value.includes(idx) && !checked) {
-        selection.value.splice(selection.value.indexOf(idx), 1)
-      } else if (individual) {
-        selection.value.push(idx)
-      } else if (selection.value.length > 1) {
-        selection.value = [idx]
-      } else {
-        selection.value = selection.value.includes(idx) ? [] : [idx]
-      }
-
-      selection.value = Array
-        .from(new Set(selection.value))
-        .sort((a, b) => a - b)
-
-      if (topCheckbox.value) {
-        topCheckbox.value.indeterminate = selection.value.length > 0 &&
-          selection.value.length < items.value.length
-      }
-
-      current.value = idx
-
-      emit('select', selection.value)
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     * @param {number} idx
-     */
-    function handleKeyboard (event, idx) {
-      const allowedKeys = [
-        'ArrowDown', 'ArrowUp', 'Home', 'End',
-        'Delete', 'Enter', 'a', ' '
-      ]
-      const { key, shiftKey, ctrlKey, metaKey } = event
-
-      const controlKey = isMac.value ? metaKey : ctrlKey
-
-      const totalItems = items.value.length
-      const selectionTotalItems = selection.value.length
-
-      if (!allowedKeys.includes(key) || !hasMinimumBreakpoint()) {
-        return
-      }
-
-      if (key === 'Enter') {
-        router.push({
-          name: 'BookDetails',
-          params: { bookId: items.value[idx].id }
-        })
-
-        return
-      }
-
-      if (!selectable.value) {
-        if (key === 'ArrowDown') {
-          current.value = Math.min(idx + 1, totalItems - 1)
-        } else if (key === 'ArrowUp') {
-          current.value = Math.max(idx - 1, 0)
-        }
-
-        nextTick(() => tableBody.value?.children[current.value].focus())
-
-        return
-      }
-
-      if ((key === 'ArrowUp' || key === 'Home') && current.value === 0) {
-        return
-      }
-
-      if ((key === 'ArrowDown' || key === 'End') && current.value === totalItems - 1) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (key === 'Delete' && selection.value.length > 0) {
-        emit('click:deleteSelection')
-      } else if (key === 'a' && controlKey && !shiftKey && selection.value.length < totalItems) {
-        selection.value = rangeArray(0, totalItems - 1)
-      } else if (key === 'a' && controlKey && !shiftKey) {
-        selection.value = []
-      } else if (key === ' ' && !controlKey && selectionTotalItems === 0) {
-        selection.value = [idx]
-        current.value = idx
-      } else if (selectionTotalItems === 0 && (key === 'ArrowDown' || key === 'ArrowUp') && !controlKey) {
-        selection.value = [idx]
-        current.value = idx
-      } else if (shiftKey) {
-        if (key === 'End') {
-          const startIdx = selection.value[0] || 0
-          const endIdx = totalItems - 1
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = endIdx
-        } else if (key === 'Home') {
-          const startIdx = 0
-          const endIdx = selection.value.length > 0
-            ? selection.value[selection.value.length - 1]
-            : 0
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = startIdx
-        } else if (key === 'ArrowDown' && !selection.value.includes(current.value + 1)) {
-          const startIdx = selection.value[0]
-          const endIdx = Math.min(current.value + 1, totalItems - 1)
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = endIdx
-        } else if (key === 'ArrowDown') {
-          const startIdx = Math.min(current.value + 1, totalItems - 1)
-          const endIdx = selection.value[selection.value.length - 1]
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = startIdx
-        } else if (key === 'ArrowUp' && !selection.value.includes(current.value - 1)) {
-          const startIdx = Math.max(current.value - 1, 0)
-          const endIdx = selection.value[selection.value.length - 1]
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = startIdx
-        } else if (key === 'ArrowUp') {
-          const startIdx = selection.value[0]
-          const endIdx = Math.max(current.value - 1, 0)
-          selection.value = rangeArray(startIdx, endIdx)
-          current.value = endIdx
-        }
-      } else if (controlKey) {
-        if (key === 'Home') {
-          current.value = 0
-        } else if (key === 'End') {
-          current.value = totalItems - 1
-        } else if (key === 'ArrowDown') {
-          current.value = Math.min(idx + 1, totalItems - 1)
-        } else if (key === 'ArrowUp') {
-          current.value = Math.max(idx - 1, 0)
-        } else if (key === ' ' && selection.value.includes(current.value)) {
-          selection.value.splice(selection.value.indexOf(current.value), 1)
-        } else if (key === ' ') {
-          selection.value.push(current.value)
-        }
-      } else if (key === 'ArrowDown' && current.value + 1 < totalItems) {
-        selection.value = [++current.value]
-      } else if (key === 'ArrowUp' && current.value - 1 >= 0) {
-        selection.value = [--current.value]
-      } else if (key === 'Home') {
-        selection.value = [0]
-        current.value = selection.value[0]
-      } else if (key === 'End') {
-        selection.value = [totalItems - 1]
-        current.value = selection.value[0]
-      }
-
-      selection.value = Array
-        .from(new Set(selection.value))
-        .sort((a, b) => a - b)
-
-      if (topCheckbox.value) {
-        topCheckbox.value.indeterminate = selection.value.length > 0 &&
-          selection.value.length < items.value.length
-      }
-
-      nextTick(() => focus())
-
-      emit('select', selection.value)
-    }
-
-    function clearSelection () {
-      selection.value = []
-      current.value = 0
-
-      if (topCheckbox.value) {
-        topCheckbox.value.indeterminate = false
-      }
-
-      emit('select', selection.value)
-    }
-
-    const { currentPage, sortProperty, sortDirection } = toRefs(props)
-
-    watch(() => loading.value || skeleton.value, clearSelection)
-    watch([currentPage, sortProperty, sortDirection], clearSelection)
-
-    function handleDeleteSelection () {
-      const booksToDelete = selection.value.map(idx => items.value[idx])
-      emit('click:deleteSelection', booksToDelete)
-    }
-
-    function ariaSorted (property) {
-      if (sortProperty.value !== property) {
-        return 'none'
-      }
-
-      return sortDirection.value === 'asc' ? 'ascending' : 'descending'
-    }
-
-    function handleSort (property) {
-      if (property !== sortProperty.value) {
-        emit('sort', {
-          property,
-          direction: sortDirection.value
-        })
-      } else {
-        emit('sort', {
-          property,
-          direction: sortDirection.value === 'asc' ? 'desc' : 'asc'
-        })
-      }
-    }
-
-    /**
-     * @param {number[]} array
-     * @param {string} key
-     */
-    function countBy (array, key) {
-      const counting = array
-        .map(idx => items.value[idx])
-        .reduce((acm, crr) => {
-          if (acm[crr[key]] !== undefined) {
-            acm[crr[key]]++
-          } else {
-            acm[crr[key]] = 1
-          }
-
-          return acm
-        }, {})
-
-      return Object.entries(counting)
-        .sort((a, b) => b[1] - a[1])
-        .map(entry => ({ [key]: entry[0], count: entry[1] }))
-    }
-
-    const statusCount = computed(() => countBy(selection.value, 'status'))
-
-    const predominantStatus = computed(() => statusCount.value[0]?.status)
-
-    const inverseStatus = computed(() => {
-      return predominantStatus.value === STATUS_READ
-        ? STATUS_UNREAD
-        : STATUS_READ
-    })
-
-    const inverseStatusText = computed(() => {
-      const statusKey = inverseStatus.value.toLowerCase()
-      return t(`book.${statusKey}`)
-    })
-
-    const hasFutureSelected = computed(() => {
-      return statusCount.value.find(({ status }) => status === STATUS_FUTURE)
-    })
-
-    function handleMarkAsClick () {
-      const booksToEdit = selection.value.map(idx => items.value[idx])
-      emit('click:markAs', { booksToEdit, newStatus: inverseStatus.value })
-    }
-
-    const favoritesCount = computed(() => countBy(selection.value, 'favorite'))
-
-    const inverseFavorite = computed(() => {
-      return favoritesCount.value?.[0]?.favorite === 'false'
-    })
-
-    function handleToggleFavorite () {
-      const booksToEdit = selection.value.map(idx => items.value[idx])
-      emit('click:toggleFavorite', {
-        booksToEdit,
-        newFavorite: inverseFavorite.value
-      })
-    }
-
-    function focus () {
-      tableBody.value?.children[current.value].focus()
-    }
-
-    function focusOnActiveHeader () {
-      document
-        .querySelector('th[aria-sort]:not([aria-sort=none]) button')
-        ?.focus()
-    }
-
-    return {
-      formatDate,
-      currency,
-      value,
-      volumeText,
-      columns,
-      selection,
-      current,
-      topCheckbox,
-      handleTopCheckbox,
-      handleCheckbox,
-      handleKeyboard,
-      tableBody,
-      handleDeleteSelection,
-      ariaSorted,
-      handleSort,
-      inverseStatusText,
-      hasFutureSelected,
-      handleMarkAsClick,
-      inverseFavorite,
-      handleToggleFavorite,
-      focus,
-      focusOnActiveHeader,
-      t,
-      locale
-    }
-  }
-}
-</script>
diff --git a/src/components/book/BookTabs.vue b/src/components/book/BookTabs.vue
index b4ab7678..1b10a535 100644
--- a/src/components/book/BookTabs.vue
+++ b/src/components/book/BookTabs.vue
@@ -1,14 +1,216 @@
+<script setup>
+import { computed, inject, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useMarkdown from '@/composables/useMarkdown'
+import Book from '@/model/Book'
+import { useSheetStore } from '@/stores/sheet'
+import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
+
+import { TrendingDownIcon, TrendingUpIcon } from '@heroicons/vue/solid'
+import { Tab, TabGroup, TabList, TabPanels, TabPanel } from '@headlessui/vue'
+
+import BookCard from '@/components/book/BookCard.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+
+const props = defineProps({
+  book: Book,
+  collection: Array,
+  loading: Boolean
+})
+
+const { t, d, n, locale } = useI18n({ useScope: 'global' })
+const sheetStore = useSheetStore()
+const { book, loading, collection } = toRefs(props)
+
+const showBookInfo = computed(() => {
+  return !loading.value && book.value
+})
+
+const { renderMarkdown } = useMarkdown({ youtube: true })
+
+const notesRendered = computed(() => {
+  if (!showBookInfo.value) {
+    return ''
+  }
+
+  return renderMarkdown(book.value.notes)
+})
+
+const filteredCollection = computed(() => {
+  if (
+    !showBookInfo.value ||
+    !collection.value ||
+    collection.value.length === 0
+  ) {
+    return []
+  }
+
+  return collection.value
+})
+
+const tabs = computed(() => {
+  const items = [{ title: t('dashboard.details.tabs.metadata') }]
+
+  if (showBookInfo.value) {
+    if (book.value.notes.length > 0) {
+      items.push({ title: t('dashboard.details.tabs.notes') })
+    }
+
+    if (filteredCollection.value.length > 0) {
+      items.push({
+        title: t('dashboard.details.tabs.collection'),
+        count: filteredCollection.value.length
+      })
+    }
+  }
+
+  return items
+})
+
+function formatPrice(price) {
+  if (!price) {
+    return null
+  }
+
+  const { value, currency } = price
+
+  return n(value, 'currency', { currency })
+}
+
+const { data: timeZone } = useTimeZoneQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+function formatDate(date, format = 'short') {
+  if (typeof date === 'string' && date.length > 0) {
+    return d(
+      new Date(`${date}T00:00:00.000${timeZone.value.offsetStr}`),
+      format,
+      { timeZone: timeZone.value.name }
+    )
+  }
+
+  if (date instanceof Date) {
+    return d(date, format, { timeZone: timeZone.value.name })
+  }
+
+  return t('dashboard.details.info.dateUnknown')
+}
+
+const country = computed(() => book.value?.isbnData)
+
+const language = computed(() => {
+  if (!country.value) {
+    return null
+  }
+
+  const languageNames = new Intl.DisplayNames([locale.value], {
+    type: 'language'
+  })
+  const localizedName = languageNames.of(country.value.locale)
+
+  return (
+    localizedName.charAt(0).toLocaleUpperCase(locale.value) +
+    localizedName.slice(1)
+  )
+})
+
+const metadata = computed(() => {
+  const sameCurrency =
+    book.value?.paidPrice?.currency === book.value?.labelPrice?.currency
+
+  return [
+    {
+      title: t('book.properties.id'),
+      value: book.value?.id,
+      class: 'font-mono'
+    },
+    {
+      title: t('book.properties.language'),
+      value: country.value ? language.value : null,
+      flagUrl: country.value?.flagUrl
+    },
+    {
+      title: t('book.properties.publisher'),
+      key: 'publisher',
+      value: book.value?.publisher,
+      searchable: true
+    },
+    {
+      title: t('book.properties.group'),
+      key: 'group',
+      value: book.value?.group,
+      searchable: true
+    },
+    {
+      title: t('book.properties.dimensions'),
+      value: book.value?.dimensions
+        ? n(book.value.dimensions.width, 'dimensions') +
+          ' × ' +
+          n(book.value.dimensions.height, 'dimensions') +
+          ' cm'
+        : null
+    },
+    {
+      title: t('book.properties.labelPrice'),
+      value: formatPrice(book.value?.labelPrice)
+    },
+    {
+      title: t('book.properties.paidPrice'),
+      value: formatPrice(book.value?.paidPrice),
+      badge: sameCurrency
+        ? book.value?.paidPrice?.value > book.value?.labelPrice?.value
+          ? book.value?.paidPrice?.value / book.value?.labelPrice.value
+          : 1 - book.value?.paidPrice?.value / book.value?.labelPrice.value
+        : null,
+      samePrice: book.value?.paidPrice?.value === book.value?.labelPrice?.value
+    },
+    {
+      title: t('book.properties.store'),
+      key: 'store',
+      value: book.value?.store,
+      searchable: true
+    },
+    {
+      title: t('book.properties.boughtAt'),
+      value: book.value?.boughtAt,
+      time: true
+    },
+    {
+      title: t('book.properties.readAt'),
+      value: book.value?.readAt,
+      time: true
+    },
+    {
+      title: t('book.properties.tags'),
+      value: (book.value?.tags || []).length > 0 ? book.value?.tags : null,
+      tags: true
+    }
+  ]
+})
+
+const showSearchDialog = inject('showSearchDialog')
+
+function searchBy(key, value, event) {
+  event.preventDefault()
+
+  const queryKeyword = t('dashboard.search.keywords.' + key)
+  const queryString = `${queryKeyword}:"${value}"`
+  showSearchDialog(queryString)
+}
+
+function searchByTag(tag, event) {
+  searchBy('tags', tag.toLowerCase(), event)
+}
+</script>
+
 <template>
-  <transition
-    leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-    enter-active-class="transition motion-reduce:transition-none duration-300 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-  >
+  <FadeTransition>
     <TabGroup as="div" v-if="!loading">
-      <TabList class="flex flex-nowrap md:justify-center px-6 max-w-full overflow-x-auto md:overflow-x-visible overflow-y-hidden md:overflow-y-visible border-b border-gray-300 dark:border-gray-600 space-x-8 text-gray-500 dark:text-gray-400 text-sm md:text-base">
+      <TabList
+        class="flex flex-nowrap md:justify-center px-6 max-w-full overflow-x-auto md:overflow-x-visible overflow-y-hidden md:overflow-y-visible border-b border-gray-300 dark:border-gray-600 space-x-8 text-gray-500 dark:text-gray-400 text-sm md:text-base"
+      >
         <Tab
           v-for="(tab, i) in tabs"
           :key="i"
@@ -30,7 +232,9 @@
               v-if="tab.count !== undefined"
               :class="[
                 'ml-2 text-xs px-2.5 py-0.5 rounded-xl font-semibold',
-                selected ? 'bg-primary-100 dark:bg-primary-500 dark:bg-opacity-50 dark:text-primary-50' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
+                selected
+                  ? 'bg-primary-100 dark:bg-primary-500 dark:bg-opacity-50 dark:text-primary-50'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
               ]"
             >
               {{ n(tab.count, 'integer') }}
@@ -40,12 +244,11 @@
       </TabList>
       <TabPanels class="dark:text-gray-300 py-4 md:py-8 px-6 md:px-0">
         <!-- Book metadata -->
-        <TabPanel class="max-w-3xl mx-auto rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:ring-offset-gray-900 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 motion-safe:transition-shadow">
+        <TabPanel
+          class="max-w-3xl mx-auto rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:ring-offset-gray-900 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 motion-safe:transition-shadow"
+        >
           <dl class="md:divide-y md:divide-gray-200 md:dark:divide-gray-700">
-            <template
-              v-for="(mt, i) in metadata"
-              :key="i"
-            >
+            <template v-for="(mt, i) in metadata" :key="i">
               <div
                 v-if="mt.value || !showBookInfo"
                 class="px-0 md:px-6 py-2 md:py-3.5 md:grid md:grid-cols-3 md:gap-4"
@@ -56,7 +259,10 @@
                 >
                   {{ mt.title }}
                 </dt>
-                <div v-else class="mt-1 md:mt-0 motion-safe:animate-pulse w-32 h-5 bg-gray-400 dark:bg-gray-600 rounded"></div>
+                <div
+                  v-else
+                  class="mt-1 md:mt-0 motion-safe:animate-pulse w-32 h-5 bg-gray-400 dark:bg-gray-600 rounded"
+                ></div>
 
                 <dd
                   v-if="showBookInfo"
@@ -71,12 +277,9 @@
                     alt=""
                     aria-hidden="true"
                     class="inline-block w-5 h-5 mr-2.5"
-                  >
+                  />
 
-                  <time
-                    v-if="mt.time"
-                    :datetime="mt.value.toISOString()"
-                  >
+                  <time v-if="mt.time" :datetime="mt.value.toISOString()">
                     {{ formatDate(mt.value) }}
                   </time>
                   <ul v-else-if="mt.tags" class="tag-list">
@@ -105,7 +308,9 @@
                   <div
                     v-if="mt.badge && !mt.samePrice"
                     :class="[
-                      mt.badge <= 1 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-800',
+                      mt.badge <= 1
+                        ? 'bg-emerald-100 text-emerald-700'
+                        : 'bg-red-100 text-red-800',
                       'dark:bg-gray-700 dark:text-gray-200 ml-3 px-1.5 py-0.5 flex items-center space-x-1 rounded-full text-xs uppercase font-bold dark:font-semibold'
                     ]"
                   >
@@ -116,7 +321,10 @@
                     <span>{{ n(mt.badge, 'percent') }}</span>
                   </div>
                 </dd>
-                <div v-else class="mt-1 md:mt-0 motion-safe:animate-pulse w-44 h-5 bg-gray-400 dark:bg-gray-600 rounded"></div>
+                <div
+                  v-else
+                  class="mt-1 md:mt-0 motion-safe:animate-pulse w-44 h-5 bg-gray-400 dark:bg-gray-600 rounded"
+                ></div>
               </div>
             </template>
           </dl>
@@ -144,236 +352,9 @@
         </TabPanel>
       </TabPanels>
     </TabGroup>
-  </transition>
+  </FadeTransition>
 </template>
 
-<script>
-import { computed, inject, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import useMarkdown from '@/composables/useMarkdown'
-import { useSheetStore } from '@/stores/sheet'
-import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
-
-import { TrendingDownIcon, TrendingUpIcon } from '@heroicons/vue/solid'
-import { Tab, TabGroup, TabList, TabPanels, TabPanel } from '@headlessui/vue'
-
-import BookCard from '@/components/book/BookCard.vue'
-
-export default {
-  components: {
-    BookCard,
-    Tab,
-    TabGroup,
-    TabList,
-    TabPanels,
-    TabPanel,
-    TrendingDownIcon,
-    TrendingUpIcon
-  },
-
-  props: {
-    book: Object,
-    collection: Array,
-    loading: Boolean
-  },
-
-  setup (props) {
-    const { t, d, n, locale } = useI18n({ useScope: 'global' })
-    const sheetStore = useSheetStore()
-    const { book, loading, collection } = toRefs(props)
-
-    const showBookInfo = computed(() => {
-      return !loading.value && book.value
-    })
-
-    const { renderMarkdown } = useMarkdown({ youtube: true })
-
-    const notesRendered = computed(() => {
-      if (!showBookInfo.value) {
-        return ''
-      }
-
-      return renderMarkdown(book.value.notes)
-    })
-
-    const filteredCollection = computed(() => {
-      if (!showBookInfo.value || !collection.value || collection.value.length === 0) {
-        return []
-      }
-
-      return collection.value
-    })
-
-    const tabs = computed(() => {
-      const items = [{ title: t('dashboard.details.tabs.metadata') }]
-
-      if (showBookInfo.value) {
-        if (book.value.notes.length > 0) {
-          items.push({ title: t('dashboard.details.tabs.notes') })
-        }
-
-        if (filteredCollection.value.length > 0) {
-          items.push({
-            title: t('dashboard.details.tabs.collection'),
-            count: filteredCollection.value.length
-          })
-        }
-      }
-
-      return items
-    })
-
-    function formatPrice (price) {
-      if (!price) {
-        return null
-      }
-
-      const { value, currency } = price
-
-      return n(value, 'currency', { currency })
-    }
-
-    const { data: timeZone } = useTimeZoneQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
-
-    function formatDate (date, format = 'short') {
-      if (typeof date === 'string' && date.length > 0) {
-        return d(
-          new Date(`${date}T00:00:00.000${timeZone.value.offsetStr}`),
-          format,
-          { timeZone: timeZone.value.name }
-        )
-      }
-
-      if (date instanceof Date) {
-        return d(date, format, { timeZone: timeZone.value.name })
-      }
-
-      return t('dashboard.details.info.dateUnknown')
-    }
-
-    const country = computed(() => book.value?.isbnData)
-
-    const language = computed(() => {
-      if (!country.value) {
-        return null
-      }
-
-      const languageNames = new Intl.DisplayNames([locale.value], { type: 'language' })
-      const localizedName = languageNames.of(country.value.locale)
-
-      return localizedName.charAt(0).toLocaleUpperCase(locale.value) +
-        localizedName.slice(1)
-    })
-
-    const metadata = computed(() => {
-      const sameCurrency = book.value?.paidPrice?.currency === book.value?.labelPrice?.currency
-
-      return [
-        {
-          title: t('book.properties.id'),
-          value: book.value?.id,
-          class: 'font-mono'
-        },
-        {
-          title: t('book.properties.language'),
-          value: country.value
-            ? language.value
-            : null,
-          flagUrl: country.value?.flagUrl
-        },
-        {
-          title: t('book.properties.publisher'),
-          key: 'publisher',
-          value: book.value?.publisher,
-          searchable: true
-        },
-        {
-          title: t('book.properties.group'),
-          key: 'group',
-          value: book.value?.group,
-          searchable: true
-        },
-        {
-          title: t('book.properties.dimensions'),
-          value: book.value?.dimensions
-            ? n(book.value.dimensions.width, 'dimensions') +
-                ' × ' + n(book.value.dimensions.height, 'dimensions') + ' cm'
-            : null
-        },
-        {
-          title: t('book.properties.labelPrice'),
-          value: formatPrice(book.value?.labelPrice)
-        },
-        {
-          title: t('book.properties.paidPrice'),
-          value: formatPrice(book.value?.paidPrice),
-          badge: sameCurrency
-            ? (book.value?.paidPrice?.value > book.value?.labelPrice?.value
-                ? book.value?.paidPrice?.value / book.value?.labelPrice.value
-                : 1 - book.value?.paidPrice?.value / book.value?.labelPrice.value)
-            : null,
-          samePrice: book.value?.paidPrice?.value === book.value?.labelPrice?.value
-        },
-        {
-          title: t('book.properties.store'),
-          key: 'store',
-          value: book.value?.store,
-          searchable: true
-        },
-        {
-          title: t('book.properties.boughtAt'),
-          value: book.value?.boughtAt,
-          time: true
-        },
-        {
-          title: t('book.properties.readAt'),
-          value: book.value?.readAt,
-          time: true
-        },
-        {
-          title: t('book.properties.tags'),
-          value: (book.value?.tags || []).length > 0
-            ? book.value?.tags
-            : null,
-          tags: true
-        }
-      ]
-    })
-
-    const showSearchDialog = inject('showSearchDialog')
-
-    function searchBy (key, value, event) {
-      event.preventDefault()
-
-      const queryKeyword = t('dashboard.search.keywords.' + key)
-      const queryString = `${queryKeyword}:"${value}"`
-      showSearchDialog(queryString)
-    }
-
-    function searchByTag (tag, event) {
-      searchBy('tags', tag.toLowerCase(), event)
-    }
-
-    return {
-      showBookInfo,
-      notesRendered,
-      tabs,
-      formatPrice,
-      formatDate,
-      metadata,
-      filteredCollection,
-      searchBy,
-      searchByTag,
-      t,
-      n
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .tag-list {
   @apply flex flex-wrap -mt-2;
diff --git a/src/components/dialogs/BookCoverDialog.vue b/src/components/dialogs/BookCoverDialog.vue
index 41b8e412..1fee8173 100644
--- a/src/components/dialogs/BookCoverDialog.vue
+++ b/src/components/dialogs/BookCoverDialog.vue
@@ -1,3 +1,41 @@
+<script setup>
+import { inject, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogOverlay,
+  DialogTitle
+} from '@headlessui/vue'
+
+import { XIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({
+  coverUrl: {
+    type: String,
+    required: true
+  },
+  open: {
+    type: Boolean
+  }
+})
+
+defineEmits(['close'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const { open } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+watch(open, (newOpen) => {
+  newOpen ? disableSearchShortcut() : enableSearchShortcut()
+})
+</script>
+
 <template>
   <TransitionRoot :show="open" as="template">
     <Dialog as="template" @close="$emit('close')">
@@ -55,59 +93,6 @@
   </TransitionRoot>
 </template>
 
-<script>
-import { inject, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  TransitionRoot,
-  TransitionChild,
-  Dialog,
-  DialogOverlay,
-  DialogTitle
-} from '@headlessui/vue'
-
-import { XIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    TransitionRoot,
-    TransitionChild,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    XIcon
-  },
-
-  props: {
-    coverUrl: {
-      type: String,
-      required: true
-    },
-    open: {
-      type: Boolean
-    }
-  },
-
-  emits: ['close'],
-
-  setup (props) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { open } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    watch(open, newOpen => {
-      newOpen ? disableSearchShortcut() : enableSearchShortcut()
-    })
-
-    return { t }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dialog {
   @apply fixed inset-0 z-20 md:p-12 lg:p-24
diff --git a/src/components/dialogs/BookCreateDialog.vue b/src/components/dialogs/BookCreateDialog.vue
index 1fde7e63..cf0216d7 100644
--- a/src/components/dialogs/BookCreateDialog.vue
+++ b/src/components/dialogs/BookCreateDialog.vue
@@ -1,10 +1,390 @@
+<script setup>
+import {
+  computed,
+  inject,
+  nextTick,
+  reactive,
+  ref,
+  toRaw,
+  toRefs,
+  watch
+} from 'vue'
+
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import useMarkdown from '@/composables/useMarkdown'
+import useImageLoader from '@/composables/useImageLoader'
+import Book, { STATUS_UNREAD } from '@/model/Book'
+import useCreateBookMutation from '@/mutations/useCreateBookMutation'
+import { useSheetStore } from '@/stores/sheet'
+import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
+
+import {
+  Dialog,
+  DialogDescription,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import { ArrowSmRightIcon, CheckIcon, XIcon } from '@heroicons/vue/solid'
+import {
+  CheckIcon as CheckOutlineIcon,
+  PhotographIcon
+} from '@heroicons/vue/outline'
+
+import Avatar from '@/components/Avatar.vue'
+import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
+import BookForm from '@/components/book/BookForm.vue'
+import BookProviderSearch from '@/components/book/BookProviderSearch.vue'
+import BulletSteps from '@/components/BulletSteps.vue'
+import DescriptionList from '@/components/DescriptionList.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+
+const props = defineProps({ isOpen: Boolean })
+
+const emit = defineEmits(['close'])
+
+const { t, d, n } = useI18n({ useScope: 'global' })
+
+function resetSteps() {
+  step.value = 1
+  bookCreatedId.value = null
+  bookInvalid.value = false
+  searchBookSelected.value = null
+  Object.assign(book, bookInitialState)
+  form.value?.forceUpdateBook()
+}
+
+function closeDialog() {
+  if (loading.value || inserting.value) {
+    return
+  }
+
+  emit('close')
+
+  setTimeout(() => resetSteps(), 400)
+}
+
+const { isOpen } = toRefs(props)
+
+const now = new Date()
+
+const bookInitialState = new Book({
+  authors: [],
+  boughtAt: now,
+  code: '',
+  group: '',
+  coverUrl: '',
+  dimensions: {
+    width: null,
+    height: null
+  },
+  publisher: '',
+  labelPrice: {
+    currency: 'BRL',
+    value: null,
+    valueStr: ''
+  },
+  paidPrice: {
+    currency: 'BRL',
+    value: null,
+    valueStr: ''
+  },
+  notes: '',
+  status: STATUS_UNREAD,
+  store: '',
+  synopsis: '',
+  title: ''
+})
+
+const book = reactive(cloneDeep(bookInitialState))
+const step = ref(1)
+
+const steps = computed(() => [
+  t('dashboard.newBook.autoFill.title'),
+  t('dashboard.newBook.metadata.title'),
+  t('dashboard.newBook.cover.title'),
+  t('dashboard.newBook.review.title')
+])
+
+function previousStep() {
+  if (step.value === 2) {
+    searchBookSelected.value = null
+    Object.assign(book, cloneDeep(bookInitialState))
+  }
+
+  step.value--
+}
+
+function nextStep() {
+  if (step.value === 1 && searchBookSelected.value) {
+    const selected = Object.entries(cloneDeep(searchBookSelected.value)).filter(
+      ([, value]) => value !== null
+    )
+    Object.assign(book, Object.fromEntries(selected))
+  } else if (step.value === 2) {
+    const { error } = form.value.touch()
+
+    if (error) {
+      nextTick(() => {
+        main.value.scroll({
+          top: main.value.scrollHeight,
+          behavior: 'smooth'
+        })
+      })
+      return
+    }
+  } else if (step.value === 3) {
+    loadImage()
+  }
+
+  main.value.scroll({ top: 0, behavior: 'smooth' })
+  step.value++
+}
+
+const nextStepText = computed(() => {
+  const stepActions = [
+    searchBookSelected.value
+      ? t('dashboard.newBook.autoFill.editInfo')
+      : t('dashboard.newBook.autoFill.fillManually'),
+    t('dashboard.newBook.metadata.findCover'),
+    t('dashboard.newBook.cover.review')
+  ]
+
+  return stepActions[step.value - 1]
+})
+
+const bookInvalid = ref(false)
+
+function setBookInvalid(value) {
+  bookInvalid.value = value
+}
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+/**
+ * @param {BeforeUnloadEvent} event
+ */
+function preventUnload(event) {
+  event.preventDefault()
+  event.returnValue = ''
+}
+
+watch(isOpen, (newIsOpen) => {
+  if (newIsOpen) {
+    Object.assign(book, cloneDeep(bookInitialState))
+    window.addEventListener('beforeunload', preventUnload)
+    disableSearchShortcut()
+    nextTick(() => isbnSearchInput.value?.focus())
+  } else {
+    window.removeEventListener('beforeunload', preventUnload)
+    enableSearchShortcut()
+  }
+})
+
+const searchBookSelected = ref(null)
+
+function handleSearchSelect(searchBook) {
+  searchBookSelected.value = searchBook
+}
+
+async function handleNew() {
+  if (!bookInvalid.value) {
+    emit('new', cloneDeep(toRaw(book)))
+    closeDialog()
+  }
+}
+
+const form = ref(null)
+const main = ref(null)
+
+const loading = ref(false)
+
+function setLoading(newValue) {
+  loading.value = newValue
+}
+
+const { renderMarkdown } = useMarkdown()
+
+const bookCoverUrl = computed(() => book.coverUrl)
+
+const { imageHasError, imageLoading, loadImage } = useImageLoader(bookCoverUrl)
+
+const router = useRouter()
+const { mutate: insertBook, isLoading: inserting } = useCreateBookMutation()
+const bookCreatedId = ref(null)
+
+function handleInsertBook() {
+  insertBook(book, {
+    onSuccess(data) {
+      bookCreatedId.value = data
+    }
+  })
+}
+
+function viewBook(bookId) {
+  bookId = bookId || bookCreatedId.value
+
+  closeDialog()
+
+  setTimeout(() => {
+    router.replace({
+      name: 'BookDetails',
+      params: { bookId }
+    })
+  }, 400)
+}
+
+const bookProviderSearch = ref(null)
+
+const isbnSearchInput = computed(() => {
+  return bookProviderSearch.value?.$el.querySelector('#book-isbn')
+})
+
+const sheetStore = useSheetStore()
+const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
+const shared = computed(() => sheetStore.shared)
+
+const { data: timeZone } = useTimeZoneQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+function formatPrice({ value, currency }) {
+  return n(value, 'currency', { currency })
+}
+
+const boughtAt = computed(() => {
+  if (book.boughtAt) {
+    return d(
+      // new Date(`${book.boughtAt}T00:00:00.000${timeZone.value.offsetStr}`),
+      book.boughtAt,
+      'short',
+      { timeZone: timeZone.value.name }
+    )
+  }
+
+  return t('dashboard.newBook.review.dateUnknown')
+})
+
+const formattedLabelPrice = computed(() => {
+  return formatPrice({
+    value: book.labelPrice.value,
+    currency: book.labelPrice.currency
+  })
+})
+
+const formattedPaidPrice = computed(() => {
+  return formatPrice({
+    value: book.paidPrice.value,
+    currency: book.paidPrice.currency
+  })
+})
+
+const bookInfo = computed(() => {
+  const separator = t('dashboard.details.header.authorSeparator')
+  let authors = (book.authors || []).join(separator)
+
+  if (book.authors && book.authors.length >= 2) {
+    const firstAuthors = book.authors.slice(0, -1).join(separator)
+
+    authors = t('dashboard.details.header.authorListComplete', {
+      authors: firstAuthors,
+      lastAuthor: book.authors[book.authors.length - 1]
+    })
+  }
+
+  const properties = [
+    {
+      title: t('book.properties.id'),
+      value: book.code,
+      property: 'code'
+    },
+    {
+      title: t('book.properties.title'),
+      value: book.title,
+      property: 'title'
+    },
+    {
+      title: t('book.properties.author', book.authors.length),
+      value: authors,
+      property: 'authors'
+    },
+    {
+      title: t('book.properties.publisher'),
+      value: book.publisher,
+      property: 'publisher',
+      columns: 1
+    },
+    {
+      title: t('book.properties.group'),
+      value: book.group,
+      property: 'group',
+      columns: 1
+    },
+    {
+      title: t('book.properties.dimensions'),
+      value:
+        n(book.dimensions.width, 'dimensions') +
+        ' × ' +
+        n(book.dimensions.height, 'dimensions') +
+        ' cm',
+      property: 'dimensions'
+    },
+    {
+      title: t('book.properties.labelPrice'),
+      value: formattedLabelPrice.value,
+      property: 'labelPrice',
+      columns: 1
+    },
+    {
+      title: t('book.properties.paidPrice'),
+      value: formattedPaidPrice.value,
+      property: 'paidPrice',
+      columns: 1
+    },
+    {
+      title: t('book.properties.store'),
+      value: book.store,
+      property: 'store',
+      columns: 1
+    },
+    {
+      title: t('book.properties.boughtAt'),
+      value: boughtAt.value,
+      property: 'boughtAt',
+      columns: 1
+    }
+  ]
+
+  if (book.synopsis && book.synopsis.length > 0) {
+    properties.splice(3, 0, {
+      title: t('book.properties.synopsis'),
+      value: book.synopsis,
+      property: 'synopsis'
+    })
+  }
+
+  if (book.notes && book.notes.length > 0) {
+    properties.push({
+      title: t('book.properties.notes'),
+      value: book.notes,
+      property: 'notes'
+    })
+  }
+
+  return properties
+})
+</script>
+
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
-    <Dialog
-      static
-      :open="isOpen"
-      @close="closeDialog"
-    >
+    <Dialog static :open="isOpen" @close="closeDialog">
       <div class="dialog">
         <TransitionChild
           as="template"
@@ -15,10 +395,7 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <div
-            class="hidden sm:block dialog-overlay"
-            @click="closeDialog"
-          />
+          <div class="hidden sm:block dialog-overlay" @click="closeDialog" />
         </TransitionChild>
 
         <TransitionChild
@@ -50,29 +427,33 @@
               </DialogDescription>
             </div>
 
-            <BulletSteps
-              class="mr-3 sm:hidden"
-              v-model="step"
-              :steps="steps"
-            />
+            <BulletSteps class="mr-3 sm:hidden" v-model="step" :steps="steps" />
 
-            <button
-              class="close-button has-ring-focus"
-              @click="closeDialog"
-            >
+            <button class="close-button has-ring-focus" @click="closeDialog">
               <span aria-hidden="true">
                 <XIcon class="w-5 h-5" />
               </span>
             </button>
 
             <span aria-hidden="true" class="absolute left-2">
-              <svg class="text-white opacity-30 block h-48 w-48" viewBox="0 0 184 184" xmlns="http://www.w3.org/2000/svg">
-                <path d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z" fill="currentColor" fill-rule="evenodd" opacity="0.503"></path>
+              <svg
+                class="text-white opacity-30 block h-48 w-48"
+                viewBox="0 0 184 184"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  opacity="0.503"
+                ></path>
               </svg>
             </span>
           </div>
 
-          <ul class="select-none hidden sm:flex border-b border-gray-200 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600">
+          <ul
+            class="select-none hidden sm:flex border-b border-gray-200 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600"
+          >
             <li
               v-for="(st, i) of steps"
               :key="i"
@@ -103,21 +484,17 @@
           </ul>
 
           <div class="flex-grow overflow-y-auto p-4 md:p-6 lg:p-8" ref="main">
-            <transition
-              mode="out-in"
-              leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-              enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-              enter-from-class="opacity-0"
-              enter-to-class="opacity-100"
-            >
+            <FadeTransition>
               <div
                 v-if="bookCreatedId"
                 class="max-w-md mx-auto h-full flex items-center justify-center flex-col space-y-4"
               >
-                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-emerald-100 dark:bg-gray-700">
-                  <CheckOutlineIcon class="w-6 h-6 text-emerald-500 dark:text-emerald-400" />
+                <div
+                  class="flex items-center justify-center w-12 h-12 rounded-full bg-emerald-100 dark:bg-gray-700"
+                >
+                  <CheckOutlineIcon
+                    class="w-6 h-6 text-emerald-500 dark:text-emerald-400"
+                  />
                 </div>
 
                 <p class="font-medium font-display leading-6 text">
@@ -152,29 +529,28 @@
                 v-model:cover-url="book.coverUrl"
                 :book="book"
               />
-              <div v-else class="grid grid-cols-1 sm:grid-cols-3 sm:gap-4 md:gap-6 lg:gap-8 w-full">
+              <div
+                v-else
+                class="grid grid-cols-1 sm:grid-cols-3 sm:gap-4 md:gap-6 lg:gap-8 w-full"
+              >
                 <div
                   v-if="book.coverUrl.length > 0"
                   class="w-48 sm:w-auto max-w-full sm:max-w-none mb-8 sm:mb-0 mt-3 sm:mt-0"
                 >
                   <div class="sm:sticky sm:top-0">
-                    <transition
-                      mode="out-in"
-                      leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"
-                      leave-from-class="opacity-100"
-                      leave-to-class="opacity-0"
-                      enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-                      enter-from-class="opacity-0"
-                      enter-to-class="opacity-100"
-                    >
+                    <FadeTransition>
                       <div
                         v-if="imageLoading || imageHasError"
                         class="aspect-w-1 aspect-h-1"
                         aria-hidden="true"
                       >
-                        <div class="flex justify-center items-center w-full h-full">
+                        <div
+                          class="flex justify-center items-center w-full h-full"
+                        >
                           <PhotographIcon
-                            :class="imageLoading ? 'motion-safe:animate-pulse' : ''"
+                            :class="
+                              imageLoading ? 'motion-safe:animate-pulse' : ''
+                            "
                             class="w-10 h-10 text-gray-300"
                           />
                         </div>
@@ -185,12 +561,18 @@
                         :alt="book.title"
                         class="w-full rounded-md shadow"
                       />
-                    </transition>
+                    </FadeTransition>
                   </div>
                 </div>
-                <div :class="book.coverUrl.length > 0 ? 'col-span-2' : 'col-span-3'">
+                <div
+                  :class="
+                    book.coverUrl.length > 0 ? 'col-span-2' : 'col-span-3'
+                  "
+                >
                   <DescriptionList
-                    :class="book.coverUrl.length > 0 ? 'w-full' : 'max-w-xl mx-auto'"
+                    :class="
+                      book.coverUrl.length > 0 ? 'w-full' : 'max-w-xl mx-auto'
+                    "
                     :info="bookInfo"
                   >
                     <template v-slot:synopsis="{ value }">
@@ -209,7 +591,7 @@
                   </DescriptionList>
                 </div>
               </div>
-            </transition>
+            </FadeTransition>
           </div>
 
           <div class="dialog-footer">
@@ -268,464 +650,16 @@
             </button>
           </div>
 
-          <LoadingIndicator
-            :loading="loading || inserting"
-            :blur="false"
-          />
+          <LoadingIndicator :loading="loading || inserting" :blur="false" />
         </TransitionChild>
       </div>
     </Dialog>
   </TransitionRoot>
 </template>
 
-<script>
-import { computed, inject, nextTick, reactive, ref, toRaw, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import useMarkdown from '@/composables/useMarkdown'
-import useImageLoader from '@/composables/useImageLoader'
-import Book, { STATUS_UNREAD } from '@/model/Book'
-import useCreateBookMutation from '@/mutations/useCreateBookMutation'
-import { useSheetStore } from '@/stores/sheet'
-import useTimeZoneQuery from '@/queries/useTimeZoneQuery'
-
-import {
-  Dialog,
-  DialogDescription,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import { ArrowSmRightIcon, CheckIcon, XIcon } from '@heroicons/vue/solid'
-import {
-  CheckIcon as CheckOutlineIcon,
-  PhotographIcon
-} from '@heroicons/vue/outline'
-
-import Avatar from '@/components/Avatar.vue'
-import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
-import BookForm from '@/components/book/BookForm.vue'
-import BookProviderSearch from '@/components/book/BookProviderSearch.vue'
-import BulletSteps from '@/components/BulletSteps.vue'
-import DescriptionList from '@/components/DescriptionList.vue'
-import LoadingIndicator from '@/components/LoadingIndicator.vue'
-
-export default {
-  components: {
-    Avatar,
-    ArrowSmRightIcon,
-    BookCoverSelector,
-    BookForm,
-    BookProviderSearch,
-    BulletSteps,
-    CheckIcon,
-    CheckOutlineIcon,
-    DescriptionList,
-    Dialog,
-    DialogDescription,
-    DialogTitle,
-    LoadingIndicator,
-    PhotographIcon,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  props: {
-    isOpen: Boolean
-  },
-
-  emits: ['close'],
-
-  setup (props, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    function resetSteps () {
-      step.value = 1
-      bookCreatedId.value = null
-      bookInvalid.value = false
-      searchBookSelected.value = null
-      Object.assign(book, bookInitialState)
-      form.value?.forceUpdateBook()
-    }
-
-    function closeDialog () {
-      if (loading.value || inserting.value) {
-        return
-      }
-
-      context.emit('close')
-
-      setTimeout(() => resetSteps(), 400)
-    }
-
-    const { isOpen } = toRefs(props)
-
-    const now = new Date()
-
-    const bookInitialState = new Book({
-      authors: [],
-      boughtAt: now,
-      code: '',
-      group: '',
-      coverUrl: '',
-      dimensions: {
-        width: null,
-        height: null
-      },
-      publisher: '',
-      labelPrice: {
-        currency: 'BRL',
-        value: null,
-        valueStr: ''
-      },
-      paidPrice: {
-        currency: 'BRL',
-        value: null,
-        valueStr: ''
-      },
-      notes: '',
-      status: STATUS_UNREAD,
-      store: '',
-      synopsis: '',
-      title: ''
-    })
-
-    const book = reactive(cloneDeep(bookInitialState))
-    const step = ref(1)
-
-    const steps = computed(() => [
-      t('dashboard.newBook.autoFill.title'),
-      t('dashboard.newBook.metadata.title'),
-      t('dashboard.newBook.cover.title'),
-      t('dashboard.newBook.review.title')
-    ])
-
-    function previousStep () {
-      if (step.value === 2) {
-        searchBookSelected.value = null
-        Object.assign(book, cloneDeep(bookInitialState))
-      }
-
-      step.value--
-    }
-
-    function nextStep () {
-      if (step.value === 1 && searchBookSelected.value) {
-        const selected = Object.entries(cloneDeep(searchBookSelected.value))
-          .filter(([, value]) => value !== null)
-        Object.assign(book, Object.fromEntries(selected))
-      } else if (step.value === 2) {
-        const { error } = form.value.touch()
-
-        if (error) {
-          nextTick(() => {
-            main.value.scroll({
-              top: main.value.scrollHeight,
-              behavior: 'smooth'
-            })
-          })
-          return
-        }
-      } else if (step.value === 3) {
-        loadImage()
-      }
-
-      main.value.scroll({ top: 0, behavior: 'smooth' })
-      step.value++
-    }
-
-    const nextStepText = computed(() => {
-      const stepActions = [
-        searchBookSelected.value
-          ? t('dashboard.newBook.autoFill.editInfo')
-          : t('dashboard.newBook.autoFill.fillManually'),
-        t('dashboard.newBook.metadata.findCover'),
-        t('dashboard.newBook.cover.review')
-      ]
-
-      return stepActions[step.value - 1]
-    })
-
-    const bookInvalid = ref(false)
-
-    function setBookInvalid (value) {
-      bookInvalid.value = value
-    }
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    /**
-     * @param {BeforeUnloadEvent} event
-     */
-    function preventUnload (event) {
-      event.preventDefault()
-      event.returnValue = ''
-    }
-
-    watch(isOpen, newIsOpen => {
-      if (newIsOpen) {
-        Object.assign(book, cloneDeep(bookInitialState))
-        window.addEventListener('beforeunload', preventUnload)
-        disableSearchShortcut()
-        nextTick(() => isbnSearchInput.value?.focus())
-      } else {
-        window.removeEventListener('beforeunload', preventUnload)
-        enableSearchShortcut()
-      }
-    })
-
-    const searchBookSelected = ref(null)
-
-    function handleSearchSelect (searchBook) {
-      searchBookSelected.value = searchBook
-    }
-
-    async function handleNew () {
-      if (!bookInvalid.value) {
-        context.emit('new', cloneDeep(toRaw(book)))
-        closeDialog()
-      }
-    }
-
-    const form = ref(null)
-    const main = ref(null)
-
-    const loading = ref(false)
-
-    function setLoading (newValue) {
-      loading.value = newValue
-    }
-
-    const { renderMarkdown } = useMarkdown()
-
-    const bookCoverUrl = computed(() => book.coverUrl)
-
-    const {
-      imageHasError,
-      imageLoading,
-      loadImage
-    } = useImageLoader(bookCoverUrl)
-
-    const router = useRouter()
-    const {
-      mutate: insertBook,
-      isLoading: inserting
-    } = useCreateBookMutation()
-    const bookCreatedId = ref(null)
-
-    function handleInsertBook () {
-      insertBook(book, {
-        onSuccess (data) {
-          bookCreatedId.value = data
-        }
-      })
-    }
-
-    function viewBook (bookId) {
-      bookId = bookId || bookCreatedId.value
-
-      closeDialog()
-
-      setTimeout(() => {
-        router.replace({
-          name: 'BookDetails',
-          params: { bookId }
-        })
-      }, 400)
-    }
-
-    const bookProviderSearch = ref(null)
-
-    const isbnSearchInput = computed(() => {
-      return bookProviderSearch.value?.$el.querySelector('#book-isbn')
-    })
-
-    const sheetStore = useSheetStore()
-    const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
-    const shared = computed(() => sheetStore.shared)
-
-    return {
-      t,
-      resetSteps,
-      closeDialog,
-      bookInvalid,
-      setBookInvalid,
-      book,
-      handleSearchSelect,
-      handleNew,
-      step,
-      steps,
-      nextStepText,
-      previousStep,
-      nextStep,
-      form,
-      main,
-      loading,
-      setLoading,
-      searchBookSelected,
-      renderMarkdown,
-      imageHasError,
-      imageLoading,
-      inserting,
-      handleInsertBook,
-      bookCreatedId,
-      viewBook,
-      bookProviderSearch,
-      isbnSearchInput,
-      ownerPictureUrl,
-      shared,
-      ...useRevisionStep(book)
-    }
-  }
-}
-
-function useRevisionStep (book) {
-  const { t, d, n } = useI18n({ useScope: 'global' })
-  const sheetStore = useSheetStore()
-
-  const { data: timeZone } = useTimeZoneQuery({
-    enabled: computed(() => sheetStore.sheetId !== null)
-  })
-
-  function formatPrice ({ value, currency }) {
-    return n(value, 'currency', { currency })
-  }
-
-  const boughtAt = computed(() => {
-    if (book.boughtAt) {
-      return d(
-        // new Date(`${book.boughtAt}T00:00:00.000${timeZone.value.offsetStr}`),
-        book.boughtAt,
-        'short',
-        { timeZone: timeZone.value.name }
-      )
-    }
-
-    return t('dashboard.newBook.review.dateUnknown')
-  })
-
-  const formattedLabelPrice = computed(() => {
-    return formatPrice({
-      value: book.labelPrice.value,
-      currency: book.labelPrice.currency
-    })
-  })
-
-  const formattedPaidPrice = computed(() => {
-    return formatPrice({
-      value: book.paidPrice.value,
-      currency: book.paidPrice.currency
-    })
-  })
-
-  const bookInfo = computed(() => {
-    const separator = t('dashboard.details.header.authorSeparator')
-    let authors = (book.authors || []).join(separator)
-
-    if (book.authors && book.authors.length >= 2) {
-      const firstAuthors = book.authors.slice(0, -1).join(separator)
-
-      authors = t(
-        'dashboard.details.header.authorListComplete',
-        {
-          authors: firstAuthors,
-          lastAuthor: book.authors[book.authors.length - 1]
-        }
-      )
-    }
-
-    const properties = [
-      {
-        title: t('book.properties.id'),
-        value: book.code,
-        property: 'code'
-      },
-      {
-        title: t('book.properties.title'),
-        value: book.title,
-        property: 'title'
-      },
-      {
-        title: t('book.properties.author', book.authors.length),
-        value: authors,
-        property: 'authors'
-      },
-      {
-        title: t('book.properties.publisher'),
-        value: book.publisher,
-        property: 'publisher',
-        columns: 1
-      },
-      {
-        title: t('book.properties.group'),
-        value: book.group,
-        property: 'group',
-        columns: 1
-      },
-      {
-        title: t('book.properties.dimensions'),
-        value: n(book.dimensions.width, 'dimensions') +
-          ' × ' + n(book.dimensions.height, 'dimensions') + ' cm',
-        property: 'dimensions'
-      },
-      {
-        title: t('book.properties.labelPrice'),
-        value: formattedLabelPrice.value,
-        property: 'labelPrice',
-        columns: 1
-      },
-      {
-        title: t('book.properties.paidPrice'),
-        value: formattedPaidPrice.value,
-        property: 'paidPrice',
-        columns: 1
-      },
-      {
-        title: t('book.properties.store'),
-        value: book.store,
-        property: 'store',
-        columns: 1
-      },
-      {
-        title: t('book.properties.boughtAt'),
-        value: boughtAt.value,
-        property: 'boughtAt',
-        columns: 1
-      }
-    ]
-
-    if (book.synopsis && book.synopsis.length > 0) {
-      properties.splice(3, 0, {
-        title: t('book.properties.synopsis'),
-        value: book.synopsis,
-        property: 'synopsis'
-      })
-    }
-
-    if (book.notes && book.notes.length > 0) {
-      properties.push({
-        title: t('book.properties.notes'),
-        value: book.notes,
-        property: 'notes'
-      })
-    }
-
-    return properties
-  })
-
-  return { bookInfo }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dialog {
-  @apply fixed z-20 inset-0 flex flex-col items-center
+  @apply fixed z-30 inset-0 flex flex-col items-center
     sm:py-6 sm:px-6 md:px-0 md:py-12 lg:py-16;
 }
 
diff --git a/src/components/dialogs/BookDeleteDialog.vue b/src/components/dialogs/BookDeleteDialog.vue
index 1a5da051..bd44b3fd 100644
--- a/src/components/dialogs/BookDeleteDialog.vue
+++ b/src/components/dialogs/BookDeleteDialog.vue
@@ -1,11 +1,54 @@
+<script setup>
+import { inject, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { TrashIcon } from '@heroicons/vue/outline'
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+const props = defineProps({
+  open: Boolean,
+  quantity: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['update:open', 'click:delete'])
+
+function handleDelete(event) {
+  emit('update:open', false)
+  emit('click:delete', event)
+}
+
+const { t } = useI18n({ useScope: 'global' })
+
+const { open } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+watch(open, (newOpen) => {
+  newOpen ? disableSearchShortcut() : enableSearchShortcut()
+})
+</script>
+
 <template>
   <TransitionRoot as="template" :show="open">
     <Dialog
       as="div"
-      class="fixed z-20 inset-0 overflow-y-auto"
+      class="fixed z-30 inset-0 overflow-y-auto"
       @close="$emit('update:open', false)"
     >
-      <div class="flex items-end justify-center min-h-screen py-4 px-4 text-center sm:block sm:p-0">
+      <div
+        class="flex items-end justify-center min-h-screen py-4 px-4 text-center sm:block sm:p-0"
+      >
         <TransitionChild
           as="template"
           enter="motion-reduce:transition-none ease-out duration-300"
@@ -35,17 +78,29 @@
           leave-from="opacity-100 translate-y-0 sm:scale-100"
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ring-1 ring-black/5">
-            <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div
+            class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ring-1 ring-black/5"
+          >
+            <div
+              class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
+            >
               <div class="sm:flex sm:items-start">
-                <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-700 sm:mx-0 sm:h-10 sm:w-10" aria-hidden="true">
+                <div
+                  class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-700 sm:mx-0 sm:h-10 sm:w-10"
+                  aria-hidden="true"
+                >
                   <TrashIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
                 </div>
                 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                  <DialogTitle as="h3" class="text-lg leading-6 font-display font-medium text-gray-900 dark:text-gray-100">
+                  <DialogTitle
+                    as="h3"
+                    class="text-lg leading-6 font-display font-medium text-gray-900 dark:text-gray-100"
+                  >
                     {{ t('book.deleteModal.title', quantity) }}
                   </DialogTitle>
-                  <div class="mt-2 space-y-4 text-gray-500 dark:text-gray-400 text-sm">
+                  <div
+                    class="mt-2 space-y-4 text-gray-500 dark:text-gray-400 text-sm"
+                  >
                     <p>
                       {{ t('book.deleteModal.message1', quantity) }}
                     </p>
@@ -56,11 +111,21 @@
                 </div>
               </div>
             </div>
-            <div class="bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-              <button type="button" class="button is-danger sm:ml-3 w-full sm:w-auto justify-center sm:justify-start" @click="handleDelete">
+            <div
+              class="bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+            >
+              <button
+                type="button"
+                class="button is-danger sm:ml-3 w-full sm:w-auto justify-center sm:justify-start"
+                @click="handleDelete"
+              >
                 {{ t('book.deleteModal.delete') }}
               </button>
-              <button type="button" class="button mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto justify-center sm:justify-start" @click="$emit('update:open', false)">
+              <button
+                type="button"
+                class="button mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto justify-center sm:justify-start"
+                @click="$emit('update:open', false)"
+              >
                 {{ t('book.deleteModal.cancel') }}
               </button>
             </div>
@@ -70,61 +135,3 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
-<script>
-import { inject, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { TrashIcon } from '@heroicons/vue/outline'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-export default {
-  name: 'BookDeleteModal',
-
-  components: {
-    TrashIcon,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot
-  },
-
-  props: {
-    open: Boolean,
-    quantity: {
-      type: Number,
-      default: 1
-    }
-  },
-
-  emits: ['update:open', 'click:delete'],
-
-  setup (props, context) {
-    function handleDelete (event) {
-      context.emit('update:open', false)
-      context.emit('click:delete', event)
-    }
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { open } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    watch(open, newOpen => {
-      newOpen ? disableSearchShortcut() : enableSearchShortcut()
-    })
-
-    return { handleDelete, t }
-  }
-}
-</script>
diff --git a/src/components/dialogs/BookEditDialog.vue b/src/components/dialogs/BookEditDialog.vue
index f87dee90..aebd6d0f 100644
--- a/src/components/dialogs/BookEditDialog.vue
+++ b/src/components/dialogs/BookEditDialog.vue
@@ -1,11 +1,137 @@
+<script setup>
+import {
+  computed,
+  inject,
+  nextTick,
+  reactive,
+  ref,
+  toRaw,
+  toRefs,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import Book from '@/model/Book'
+import { useSheetStore } from '@/stores/sheet'
+
+import {
+  Dialog,
+  DialogDescription,
+  DialogOverlay,
+  DialogTitle,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import { CheckIcon, XIcon } from '@heroicons/vue/solid'
+
+import Avatar from '@/components/Avatar.vue'
+import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
+import BookForm from '@/components/book/BookForm.vue'
+import BookOrganization from '@/components/book/BookOrganization.vue'
+import BookReading from '@/components/book/BookReading.vue'
+
+const props = defineProps({
+  book: Book,
+  isOpen: Boolean
+})
+
+const emit = defineEmits(['close', 'edit'])
+
+const { t, n } = useI18n({ useScope: 'global' })
+
+function closeDialog() {
+  editFormInvalid.value = false
+  emit('close')
+}
+
+const { isOpen, book } = toRefs(props)
+
+const editingBook = reactive(book.value || new Book())
+const editFormInvalid = ref(false)
+
+function setEditFormInvalid(value) {
+  editFormInvalid.value = value
+}
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+/**
+ * @param {BeforeUnloadEvent} event
+ */
+function preventUnload(event) {
+  event.preventDefault()
+  event.returnValue = ''
+}
+
+watch(isOpen, (newIsOpen) => {
+  if (newIsOpen) {
+    Object.assign(editingBook, cloneDeep(book.value), {
+      labelPrice: {
+        ...book.value.labelPrice,
+        valueStr: n(book.value.labelPrice.value, 'decimal')
+      },
+      paidPrice: {
+        ...book.value.paidPrice,
+        valueStr: n(book.value.paidPrice.value, 'decimal')
+      }
+    })
+
+    window.addEventListener('beforeunload', preventUnload)
+    disableSearchShortcut()
+  } else {
+    window.removeEventListener('beforeunload', preventUnload)
+    enableSearchShortcut()
+  }
+})
+
+const editForm = ref(null)
+
+async function handleEdit() {
+  if (!editFormInvalid.value) {
+    emit('edit', cloneDeep(toRaw(editingBook)))
+    closeDialog()
+  } else {
+    nextTick(() => {
+      main.value.scroll({
+        top: main.value.scrollHeight,
+        behavior: 'smooth'
+      })
+    })
+  }
+}
+
+const main = ref(null)
+
+const tabs = computed(() => [
+  {
+    title: t('dashboard.details.editForm.title'),
+    error: editFormInvalid.value
+  },
+  { title: t('dashboard.details.coverForm.title') },
+  {
+    title: t('dashboard.details.readingForm.title'),
+    disabled: editingBook.isFuture
+  },
+  { title: t('dashboard.details.organizationForm.title') }
+])
+
+const sheetStore = useSheetStore()
+const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
+const shared = computed(() => sheetStore.shared)
+</script>
+
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
-    <Dialog
-      static
-      as="template"
-      :open="isOpen"
-      @close="closeDialog"
-    >
+    <Dialog static as="template" :open="isOpen" @close="closeDialog">
       <div class="dialog">
         <TransitionChild
           as="template"
@@ -48,18 +174,24 @@
               </DialogDescription>
             </div>
 
-            <button
-              class="close-button has-ring-focus"
-              @click="closeDialog"
-            >
+            <button class="close-button has-ring-focus" @click="closeDialog">
               <span aria-hidden="true">
                 <XIcon class="w-5 h-5" />
               </span>
             </button>
 
             <span aria-hidden="true" class="absolute left-2">
-              <svg class="text-white opacity-30 block h-48 w-48" viewBox="0 0 184 184" xmlns="http://www.w3.org/2000/svg">
-                <path d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z" fill="currentColor" fill-rule="evenodd" opacity="0.503"></path>
+              <svg
+                class="text-white opacity-30 block h-48 w-48"
+                viewBox="0 0 184 184"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  opacity="0.503"
+                ></path>
               </svg>
             </span>
           </div>
@@ -142,171 +274,9 @@
   </TransitionRoot>
 </template>
 
-<script>
-import { computed, inject, nextTick, reactive, ref, toRaw, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  Dialog,
-  DialogDescription,
-  DialogOverlay,
-  DialogTitle,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import { CheckIcon, XIcon } from '@heroicons/vue/solid'
-
-import Avatar from '@/components/Avatar.vue'
-import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
-import BookForm from '@/components/book/BookForm.vue'
-import BookOrganization from '@/components/book/BookOrganization.vue'
-import BookReading from '@/components/book/BookReading.vue'
-
-import Book from '@/model/Book'
-
-import cloneDeep from 'lodash.clonedeep'
-
-export default {
-  components: {
-    Avatar,
-    BookCoverSelector,
-    BookForm,
-    BookOrganization,
-    BookReading,
-    CheckIcon,
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle,
-    Tab,
-    TabGroup,
-    TabList,
-    TabPanel,
-    TabPanels,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  props: {
-    book: Book,
-    isOpen: Boolean
-  },
-
-  emits: ['close', 'edit'],
-
-  setup (props, context) {
-    const { t, n } = useI18n({ useScope: 'global' })
-
-    function closeDialog () {
-      editFormInvalid.value = false
-      context.emit('close')
-    }
-
-    const { isOpen, book } = toRefs(props)
-
-    const editingBook = reactive(book.value || new Book())
-    const editFormInvalid = ref(false)
-
-    function setEditFormInvalid (value) {
-      editFormInvalid.value = value
-    }
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    /**
-     * @param {BeforeUnloadEvent} event
-     */
-    function preventUnload (event) {
-      event.preventDefault()
-      event.returnValue = ''
-    }
-
-    watch(isOpen, newIsOpen => {
-      if (newIsOpen) {
-        Object.assign(editingBook, cloneDeep(book.value), {
-          labelPrice: {
-            ...book.value.labelPrice,
-            valueStr: n(book.value.labelPrice.value, 'decimal')
-          },
-          paidPrice: {
-            ...book.value.paidPrice,
-            valueStr: n(book.value.paidPrice.value, 'decimal')
-          }
-        })
-
-        window.addEventListener('beforeunload', preventUnload)
-        disableSearchShortcut()
-      } else {
-        window.removeEventListener('beforeunload', preventUnload)
-        enableSearchShortcut()
-      }
-    })
-
-    const editForm = ref(null)
-
-    async function handleEdit () {
-      if (!editFormInvalid.value) {
-        context.emit('edit', cloneDeep(toRaw(editingBook)))
-        closeDialog()
-      } else {
-        nextTick(() => {
-          main.value.scroll({
-            top: main.value.scrollHeight,
-            behavior: 'smooth'
-          })
-        })
-      }
-    }
-
-    const main = ref(null)
-
-    const tabs = computed(() => [
-      {
-        title: t('dashboard.details.editForm.title'),
-        error: editFormInvalid.value
-      },
-      { title: t('dashboard.details.coverForm.title') },
-      {
-        title: t('dashboard.details.readingForm.title'),
-        disabled: editingBook.isFuture
-      },
-      { title: t('dashboard.details.organizationForm.title') }
-    ])
-
-    const sheetStore = useSheetStore()
-    const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
-    const shared = computed(() => sheetStore.shared)
-
-    return {
-      t,
-      closeDialog,
-      editForm,
-      editFormInvalid,
-      setEditFormInvalid,
-      editingBook,
-      handleEdit,
-      main,
-      tabs,
-      ownerPictureUrl,
-      shared
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dialog {
-  @apply fixed z-20 inset-0 flex flex-col items-center
+  @apply fixed z-30 inset-0 flex flex-col items-center
     sm:py-6 sm:px-6 md:px-0 md:py-12 lg:py-16;
 }
 
@@ -370,12 +340,12 @@ export default {
     text-gray-800 dark:text-gray-300;
 }
 
-.tab-button[aria-selected="true"] {
+.tab-button[aria-selected='true'] {
   @apply text-primary-600 dark:text-gray-100
-     border-primary-600 dark:border-primary-400
+     border-primary-600 dark:border-primary-400;
 }
 
-.tab-button[aria-selected="true"]:hover {
+.tab-button[aria-selected='true']:hover {
   @apply text-primary-600 dark:text-gray-100
     border-primary-600 dark:border-primary-400;
 }
diff --git a/src/components/dialogs/DonationDialog.vue b/src/components/dialogs/DonationDialog.vue
index 7300899c..0200e7a2 100644
--- a/src/components/dialogs/DonationDialog.vue
+++ b/src/components/dialogs/DonationDialog.vue
@@ -1,8 +1,43 @@
+<script setup>
+import { inject, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+import { XIcon } from '@heroicons/vue/solid'
+
+import PicPayIcon from '@/components/icons/PicPayIcon.vue'
+
+const props = defineProps({ modelValue: Boolean })
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+function closeDialog() {
+  emit('update:modelValue', false)
+}
+
+const { modelValue: open } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+watch(open, (newOpen) => {
+  newOpen ? disableSearchShortcut() : enableSearchShortcut()
+})
+</script>
+
 <template>
   <TransitionRoot appear :show="modelValue" as="template">
     <Dialog
       as="div"
-      class="fixed z-20 inset-0 flex flex-col items-center justify-end md:justify-center px-6 sm:py-6 md:px-0 md:py-12 lg:py-16"
+      class="fixed z-30 inset-0 flex flex-col items-center justify-end md:justify-center px-6 sm:py-6 md:px-0 md:py-12 lg:py-16"
       @close="closeDialog"
     >
       <TransitionChild
@@ -55,8 +90,13 @@
           </p>
 
           <div class="flex items-center justify-center p-6">
-            <div class="w-48 h-48 relative rounded overflow-hidden border border-gray-300 dark:border-0 bg-white p-1 dark:opacity-90">
-              <img src="@/assets/donations/qrcode-picpay.svg" class="w-full h-full">
+            <div
+              class="w-48 h-48 relative rounded overflow-hidden border border-gray-300 dark:border-0 bg-white p-1 dark:opacity-90"
+            >
+              <img
+                src="@/assets/donations/qrcode-picpay.svg"
+                class="w-full h-full"
+              />
 
               <div
                 aria-hidden="true"
@@ -71,59 +111,3 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
-<script>
-import { inject, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-import { XIcon } from '@heroicons/vue/solid'
-
-import PicPayIcon from '@/components/icons/PicPayIcon.vue'
-
-export default {
-  components: {
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    PicPayIcon,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  props: {
-    modelValue: Boolean
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { t } = useI18n({ useScope: 'global' })
-
-    function closeDialog () {
-      context.emit('update:modelValue', false)
-    }
-
-    const { modelValue: open } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    watch(open, newOpen => {
-      newOpen ? disableSearchShortcut() : enableSearchShortcut()
-    })
-
-    return {
-      t,
-      closeDialog
-    }
-  }
-}
-</script>
diff --git a/src/components/dialogs/LibraryFiltersDialog.vue b/src/components/dialogs/LibraryFiltersDialog.vue
index 6d049e72..b8860c80 100644
--- a/src/components/dialogs/LibraryFiltersDialog.vue
+++ b/src/components/dialogs/LibraryFiltersDialog.vue
@@ -1,9 +1,189 @@
+<script setup>
+import { computed, inject, reactive, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCollectionStore, HIDE, INDIFERENT, ONLY } from '@/stores/collection'
+import { useSheetStore } from '@/stores/sheet'
+import useGroupsQuery from '@/queries/useGroupsQuery'
+
+import slugify from 'slugify'
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  RadioGroup,
+  RadioGroupLabel,
+  RadioGroupOption,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import { ArrowSmUpIcon, ChevronUpIcon, XIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({ open: Boolean })
+
+const emit = defineEmits(['update:open', 'filter'])
+
+const collectionStore = useCollectionStore()
+const { t, n, locale } = useI18n({ useScope: 'global' })
+
+const sortProperties = computed(() => {
+  const properties = [
+    { attr: 'title', title: t('book.properties.title') },
+    { attr: 'publisher', title: t('book.properties.publisher') },
+    { attr: 'status', title: t('book.properties.status') },
+    { attr: 'boughtAt', title: t('book.properties.boughtAt') },
+    { attr: 'readAt', title: t('book.properties.readAt') },
+    { attr: 'paidPrice.value', title: t('book.properties.paidPrice') },
+    { attr: 'labelPrice.value', title: t('book.properties.labelPrice') },
+    { attr: 'createdAt', title: t('book.properties.createdAt') },
+    { attr: 'updatedAt', title: t('book.properties.updatedAt') }
+  ]
+
+  return properties.sort((a, b) => a.title.localeCompare(b.title, locale.value))
+})
+
+const sheetStore = useSheetStore()
+const groupsEnabled = computed(() => sheetStore.sheetId !== null)
+
+const { data: groupsData } = useGroupsQuery({ enabled: groupsEnabled })
+
+const groups = computed(() => {
+  const values = groupsData.value?.slice() || []
+
+  if (state.futureItems === HIDE) {
+    return values
+  }
+
+  return state.futureItems === ONLY
+    ? values.sort((a, b) => b.futureCount - a.futureCount)
+    : values.sort((a, b) => b.totalCount - a.totalCount)
+})
+
+const { open } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+watch(open, (newOpen) => {
+  if (newOpen) {
+    Object.assign(state, {
+      favorites: collectionStore.favorites,
+      futureItems: collectionStore.futureItems,
+      groups: collectionStore.filters.groups,
+      sortDirection: collectionStore.sortDirection,
+      sortProperty: collectionStore.sortBy
+    })
+  }
+
+  newOpen ? disableSearchShortcut() : enableSearchShortcut()
+})
+
+function handleFilter() {
+  emit('update:open', false)
+  emit('filter', state)
+}
+
+function checked(key, value) {
+  return state[key].includes(value)
+}
+
+const state = reactive({
+  favorites: collectionStore.favorites,
+  futureItems: collectionStore.futureItems,
+  groups: collectionStore.filters.groups,
+  sortDirection: collectionStore.sortDirection,
+  sortProperty: collectionStore.sortBy
+})
+
+const countProperty = {
+  [INDIFERENT]: 'totalCount',
+  [ONLY]: 'futureCount',
+  [HIDE]: 'count'
+}
+
+const filters = computed(() => [
+  {
+    title: t('dashboard.library.filters.books'),
+    open: true,
+    children: [
+      {
+        key: 'groups',
+        label: t('dashboard.library.filters.groups'),
+        multiple: true,
+        options: groups.value.map((grp) => ({
+          key: grp.name,
+          value: grp.name,
+          label: grp.name,
+          count: grp[countProperty[state.futureItems]]
+        }))
+      },
+      {
+        key: 'favorites',
+        label: t('dashboard.library.filters.favorites.label'),
+        options: [
+          {
+            key: INDIFERENT,
+            value: INDIFERENT,
+            label: t('dashboard.library.filters.favorites.indiferent')
+          },
+          {
+            key: ONLY,
+            value: ONLY,
+            label: t('dashboard.library.filters.favorites.only')
+          }
+        ]
+      },
+      {
+        key: 'futureItems',
+        label: t('dashboard.library.filters.futureItems.label'),
+        options: [
+          {
+            key: INDIFERENT,
+            value: INDIFERENT,
+            label: t('dashboard.library.filters.futureItems.indiferent')
+          },
+          {
+            key: ONLY,
+            value: ONLY,
+            label: t('dashboard.library.filters.futureItems.only')
+          },
+          {
+            key: HIDE,
+            value: HIDE,
+            label: t('dashboard.library.filters.futureItems.hide')
+          }
+        ]
+      },
+      {
+        key: 'sortProperty',
+        label: t('dashboard.library.filters.sortBy'),
+        sort: true,
+        options: sortProperties.value.map((property) => ({
+          key: property.attr,
+          value: property.attr,
+          label: property.title
+        }))
+      }
+    ]
+  }
+])
+
+function toggleSort() {
+  state.sortDirection = state.sortDirection === 'asc' ? 'desc' : 'asc'
+}
+</script>
+
 <template>
   <TransitionRoot as="template" :show="open">
     <Dialog
       as="div"
       static
-      class="fixed inset-0 overflow-hidden z-20"
+      class="fixed inset-0 overflow-hidden z-30"
       @close="$emit('update:open', false)"
       :open="open"
     >
@@ -19,7 +199,9 @@
         >
           <DialogOverlay class="dialog-overlay" />
         </TransitionChild>
-        <div class="fixed inset-x-0 sm:inset-x-auto sm:inset-y-0 bottom-0 sm:right-0 sm:pl-10 max-w-full flex">
+        <div
+          class="fixed inset-x-0 sm:inset-x-auto sm:inset-y-0 bottom-0 sm:right-0 sm:pl-10 max-w-full flex"
+        >
           <TransitionChild
             as="template"
             enter="motion-reduce:transform-none transition motion-reduce:transition-none ease-in-out duration-500 sm:duration-700"
@@ -34,8 +216,12 @@
                 class="h-full flex flex-col sm:py-4 bg-white shadow-xl overflow-y-scroll dark:bg-gray-800 rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl ring-1 ring-black/5"
                 @submit.prevent="handleFilter"
               >
-                <div class="flex justify-between items-center pt-4 sm:pt-0 px-4 sm:px-6">
-                  <DialogTitle class="text-lg font-display font-medium text-gray-900 dark:text-gray-100">
+                <div
+                  class="flex justify-between items-center pt-4 sm:pt-0 px-4 sm:px-6"
+                >
+                  <DialogTitle
+                    class="text-lg font-display font-medium text-gray-900 dark:text-gray-100"
+                  >
                     {{ t('dashboard.library.filters.title') }}
                   </DialogTitle>
 
@@ -43,12 +229,18 @@
                     class="hidden md:flex items-center justify-center -mr-2 w-10 h-10 p-2 rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 motion-safe:transition-shadow"
                     @click="$emit('update:open', false)"
                   >
-                    <span class="sr-only">{{ t('dashboard.library.filters.close') }}</span>
+                    <span class="sr-only">{{
+                      t('dashboard.library.filters.close')
+                    }}</span>
                     <XIcon class="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
-                <div class="h-s-40 sm:h-auto overflow-y-auto sm:overflow-y-visible mt-4 relative sm:flex-1 border-t border-gray-300 dark:border-gray-600">
-                  <div class="divide-y divide-gray-200 dark:divide-gray-600 border-b border-gray-200 dark:border-gray-600">
+                <div
+                  class="h-s-50 sm:h-auto overflow-y-auto sm:overflow-y-visible mt-4 relative sm:flex-1 border-t border-gray-300 dark:border-gray-600"
+                >
+                  <div
+                    class="divide-y divide-gray-200 dark:divide-gray-600 border-b border-gray-200 dark:border-gray-600"
+                  >
                     <Disclosure
                       v-for="(section, sectionIdx) in filters"
                       :key="sectionIdx"
@@ -57,7 +249,9 @@
                       v-slot="{ open }"
                       :default-open="section.open"
                     >
-                      <DisclosureButton class="w-full flex justify-between items-center font-medium px-4 sm:px-6 rounded has-ring-focus dark:text-gray-200">
+                      <DisclosureButton
+                        class="w-full flex justify-between items-center font-medium px-4 sm:px-6 rounded has-ring-focus dark:text-gray-200"
+                      >
                         <span>
                           {{ section.title }}
                         </span>
@@ -73,7 +267,7 @@
                         <template v-for="child in section.children">
                           <fieldset
                             v-if="child.options.length > 0 && child.multiple"
-                            :key="child.key"
+                            :key="child.key + '-fieldset'"
                           >
                             <legend class="label">
                               {{ child.label }}
@@ -92,7 +286,7 @@
                                   :id="slugify(child.key + '-' + option.key)"
                                   :value="option.value"
                                   v-model="state[child.key]"
-                                >
+                                />
                                 <label
                                   :for="slugify(child.key + '-' + option.key)"
                                   :class="[
@@ -117,8 +311,10 @@
                           </fieldset>
 
                           <RadioGroup
-                            v-else-if="child.options.length > 0 && !child.hidden"
-                            :key="child.key"
+                            v-else-if="
+                              child.options.length > 0 && !child.hidden
+                            "
+                            :key="child.key + '-radiogroup'"
                             v-model="state[child.key]"
                             as="div"
                           >
@@ -139,7 +335,11 @@
                                     'chip is-square',
                                     checked ? 'is-active' : ''
                                   ]"
-                                  @click="checked && child.sort && toggleSort(option.value)"
+                                  @click="
+                                    checked &&
+                                      child.sort &&
+                                      toggleSort(option.value)
+                                  "
                                 >
                                   {{ option.label }}
                                   <span
@@ -166,7 +366,9 @@
                   </div>
                 </div>
 
-                <div class="flex justify-between sm:justify-end w-full pb-4 sm:pb-0 pt-4 px-4 sm:px-6 border-t border-gray-300 dark:border-gray-600">
+                <div
+                  class="flex justify-between sm:justify-end w-full pb-4 sm:pb-0 pt-4 px-4 sm:px-6 border-t border-gray-300 dark:border-gray-600"
+                >
                   <button
                     type="button"
                     class="button is-ghost justify-center sm:hidden -ml-4"
@@ -197,228 +399,3 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
-<script>
-import { computed, inject, reactive, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  useCollectionStore,
-  HIDE,
-  INDIFERENT,
-  ONLY
-} from '@/stores/collection'
-import { useSheetStore } from '@/stores/sheet'
-import useGroupsQuery from '@/queries/useGroupsQuery'
-
-import slugify from 'slugify'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-  RadioGroup,
-  RadioGroupLabel,
-  RadioGroupOption,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import {
-  ArrowSmUpIcon,
-  ChevronUpIcon,
-  XIcon
-} from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    ArrowSmUpIcon,
-    ChevronUpIcon,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    RadioGroup,
-    RadioGroupLabel,
-    RadioGroupOption,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  emits: ['update:open', 'filter'],
-
-  props: {
-    open: Boolean
-  },
-
-  setup (props, context) {
-    const collectionStore = useCollectionStore()
-    const { t, n, locale } = useI18n({ useScope: 'global' })
-
-    const sortProperties = computed(() => {
-      const properties = [
-        { attr: 'title', title: t('book.properties.title') },
-        { attr: 'publisher', title: t('book.properties.publisher') },
-        { attr: 'status', title: t('book.properties.status') },
-        { attr: 'boughtAt', title: t('book.properties.boughtAt') },
-        { attr: 'readAt', title: t('book.properties.readAt') },
-        { attr: 'paidPrice.value', title: t('book.properties.paidPrice') },
-        { attr: 'labelPrice.value', title: t('book.properties.labelPrice') },
-        { attr: 'createdAt', title: t('book.properties.createdAt') },
-        { attr: 'updatedAt', title: t('book.properties.updatedAt') }
-      ]
-
-      return properties.sort((a, b) => a.title.localeCompare(b.title, locale.value))
-    })
-
-    const sheetStore = useSheetStore()
-    const groupsEnabled = computed(() => sheetStore.sheetId !== null)
-
-    const { data: groupsData } = useGroupsQuery({ enabled: groupsEnabled })
-
-    const groups = computed(() => {
-      const values = groupsData.value?.slice() || []
-
-      if (state.futureItems === HIDE) {
-        return values
-      }
-
-      return state.futureItems === ONLY
-        ? values.sort((a, b) => b.futureCount - a.futureCount)
-        : values.sort((a, b) => b.totalCount - a.totalCount)
-    })
-
-    const { open } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    watch(open, newOpen => {
-      if (newOpen) {
-        Object.assign(state, {
-          favorites: collectionStore.favorites,
-          futureItems: collectionStore.futureItems,
-          groups: collectionStore.filters.groups,
-          sortDirection: collectionStore.sortDirection,
-          sortProperty: collectionStore.sortBy
-        })
-      }
-
-      newOpen ? disableSearchShortcut() : enableSearchShortcut()
-    })
-
-    function handleFilter () {
-      context.emit('update:open', false)
-      context.emit('filter', state)
-    }
-
-    function checked (key, value) {
-      return state[key].includes(value)
-    }
-
-    const state = reactive({
-      favorites: collectionStore.favorites,
-      futureItems: collectionStore.futureItems,
-      groups: collectionStore.filters.groups,
-      sortDirection: collectionStore.sortDirection,
-      sortProperty: collectionStore.sortBy
-    })
-
-    const countProperty = {
-      [INDIFERENT]: 'totalCount',
-      [ONLY]: 'futureCount',
-      [HIDE]: 'count'
-    }
-
-    const filters = computed(() => [
-      {
-        title: t('dashboard.library.filters.books'),
-        open: true,
-        children: [
-          {
-            key: 'groups',
-            label: t('dashboard.library.filters.groups'),
-            multiple: true,
-            options: groups.value.map(grp => ({
-              key: grp.name,
-              value: grp.name,
-              label: grp.name,
-              count: grp[countProperty[state.futureItems]]
-            }))
-          },
-          {
-            key: 'favorites',
-            label: t('dashboard.library.filters.favorites.label'),
-            options: [
-              {
-                key: INDIFERENT,
-                value: INDIFERENT,
-                label: t('dashboard.library.filters.favorites.indiferent')
-              },
-              {
-                key: ONLY,
-                value: ONLY,
-                label: t('dashboard.library.filters.favorites.only')
-              }
-            ]
-          },
-          {
-            key: 'futureItems',
-            label: t('dashboard.library.filters.futureItems.label'),
-            options: [
-              {
-                key: INDIFERENT,
-                value: INDIFERENT,
-                label: t('dashboard.library.filters.futureItems.indiferent')
-              },
-              {
-                key: ONLY,
-                value: ONLY,
-                label: t('dashboard.library.filters.futureItems.only')
-              },
-              {
-                key: HIDE,
-                value: HIDE,
-                label: t('dashboard.library.filters.futureItems.hide')
-              }
-            ]
-          },
-          {
-            key: 'sortProperty',
-            label: t('dashboard.library.filters.sortBy'),
-            sort: true,
-            options: sortProperties.value.map(property => ({
-              key: property.attr,
-              value: property.attr,
-              label: property.title
-            }))
-          }
-        ]
-      }
-    ])
-
-    function toggleSort () {
-      state.sortDirection = state.sortDirection === 'asc' ? 'desc' : 'asc'
-    }
-
-    return {
-      groups,
-      sortProperties,
-      handleFilter,
-      t,
-      n,
-      slugify,
-      checked,
-      state,
-      filters,
-      toggleSort
-    }
-  }
-}
-</script>
diff --git a/src/components/dialogs/ReloadDialog.vue b/src/components/dialogs/ReloadDialog.vue
index d0caa16d..b7346b55 100644
--- a/src/components/dialogs/ReloadDialog.vue
+++ b/src/components/dialogs/ReloadDialog.vue
@@ -3,11 +3,11 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
+import chunk from 'lodash.chunk'
+
 import useMarkdown from '@/composables/useMarkdown'
 import useGitHubReleaseQuery from '@/queries/useGitHubReleaseQuery'
 
-import chunk from 'lodash.chunk'
-
 import {
   Dialog,
   DialogOverlay,
@@ -20,7 +20,7 @@ import { SparklesIcon } from '@heroicons/vue/outline'
 
 const { needRefresh, updateServiceWorker } = useRegisterSW()
 
-function close () {
+function close() {
   needRefresh.value = false
 }
 
@@ -35,15 +35,12 @@ const sections = computed(() => {
     return null
   }
 
-  const parts = releaseNotesMarkdown.value
-    .split(/## (.*)\r\n\r\n/)
-    .slice(1)
+  const parts = releaseNotesMarkdown.value.split(/## (.*)\r\n\r\n/).slice(1)
 
-  return chunk(parts, 2)
-    .map(([title, body]) => ({
-      title: md.renderInline(title),
-      body: renderMarkdown(body)
-    }))
+  return chunk(parts, 2).map(([title, body]) => ({
+    title: md.renderInline(title),
+    body: renderMarkdown(body)
+  }))
 })
 </script>
 
@@ -73,21 +70,41 @@ const sections = computed(() => {
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div class="dialog-content">
-            <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 grow min-h-0 sm:flex sm:items-start">
-              <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 dark:bg-gray-700 sm:mx-0 sm:h-10 sm:w-10" aria-hidden="true">
-                <SparklesIcon class="h-6 w-6 text-primary-600 dark:text-primary-300" aria-hidden="true" />
+            <div
+              class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 grow min-h-0 sm:flex sm:items-start"
+            >
+              <div
+                class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 dark:bg-gray-700 sm:mx-0 sm:h-10 sm:w-10"
+                aria-hidden="true"
+              >
+                <SparklesIcon
+                  class="h-6 w-6 text-primary-600 dark:text-primary-300"
+                  aria-hidden="true"
+                />
               </div>
-              <div class="mt-3 grow h-full text-center sm:mt-0 sm:ml-4 sm:text-left flex flex-col">
-                <DialogTitle as="h3" class="shrink-0 text-lg leading-6 font-display font-medium text-gray-900 dark:text-gray-100">
+              <div
+                class="mt-3 grow h-full text-center sm:mt-0 sm:ml-4 sm:text-left flex flex-col"
+              >
+                <DialogTitle
+                  as="h3"
+                  class="shrink-0 text-lg leading-6 font-display font-medium text-gray-900 dark:text-gray-100"
+                >
                   {{ t('pwa.newContent.title') }}
                 </DialogTitle>
-                <div class="shrink-0 mt-2 space-y-4 text-gray-500 dark:text-gray-400 text-sm">
+                <div
+                  class="shrink-0 mt-2 space-y-4 text-gray-500 dark:text-gray-400 text-sm"
+                >
                   <p>
                     {{ t('pwa.newContent.message') }}
                   </p>
                 </div>
-                <div class="grow min-h-0 overflow-y-auto mt-6 text-left" lang="en-US">
-                  <div class="w-full prose prose-sm dark:prose-invert prose-ul:leading-snug">
+                <div
+                  class="grow min-h-0 overflow-y-auto mt-6 text-left"
+                  lang="en-US"
+                >
+                  <div
+                    class="w-full prose prose-sm dark:prose-invert prose-ul:leading-snug"
+                  >
                     <details
                       v-for="(section, idx) in sections"
                       :key="idx"
@@ -100,7 +117,9 @@ const sections = computed(() => {
                 </div>
               </div>
             </div>
-            <div class="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <div
+              class="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+            >
               <button
                 type="button"
                 class="button is-primary sm:ml-3 w-full sm:w-auto justify-center sm:justify-start"
diff --git a/src/components/dialogs/SearchDialog.vue b/src/components/dialogs/SearchDialog.vue
index a60f0b86..7a11126e 100644
--- a/src/components/dialogs/SearchDialog.vue
+++ b/src/components/dialogs/SearchDialog.vue
@@ -1,3 +1,326 @@
+<script setup>
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import PaginatorUtil from 'paginator'
+
+import { useSearchStore } from '@/stores/search'
+import { useSheetStore } from '@/stores/sheet'
+import { PER_PAGE } from '@/services/sheet/constants'
+import useBookSearchQuery from '@/queries/useBookSearchQuery'
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import {
+  SortAscendingIcon,
+  SortDescendingIcon,
+  XIcon
+} from '@heroicons/vue/solid'
+import { SearchIcon } from '@heroicons/vue/outline'
+
+import Avatar from '@/components/Avatar.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+import Paginator from '@/components/Paginator.vue'
+import SearchHistoryItem from '@/components/SearchHistoryItem.vue'
+import SearchItem from '@/components/SearchItem.vue'
+
+const props = defineProps({ isOpen: Boolean })
+
+const emit = defineEmits(['close'])
+
+const { t, locale } = useI18n({ useScope: 'global' })
+const { isOpen } = toRefs(props)
+
+const searchStore = useSearchStore()
+const sheetStore = useSheetStore()
+
+const searchQuery = ref('')
+const searchedOnce = ref(false)
+const searchedTerm = ref('')
+const searchHistory = computed(() => searchStore.history)
+const searchPagination = computed(() => searchStore.pagination)
+
+const searchInput = ref(null)
+const results = ref(null)
+const dialogContent = ref(null)
+
+const sortBy = computed({
+  get: () => searchStore.sortBy,
+  set: (val) => searchStore.updateSort({ sortBy: val })
+})
+
+const sortDirection = computed({
+  get: () => searchStore.sortDirection,
+  set: (val) => searchStore.updateSort({ sortDirection: val })
+})
+
+const searchEnabled = computed(() => {
+  return isOpen.value && searchQuery.value.length > 0
+})
+
+const {
+  isLoading: searchLoading,
+  data: searchData,
+  isFetching,
+  isPreviousData,
+  remove
+} = useBookSearchQuery(
+  {
+    query: searchQuery,
+    sortBy,
+    sortDirection,
+    page: computed(() => searchStore.page)
+  },
+  { enabled: searchEnabled, keepPreviousData: true }
+)
+
+const searchResults = computed(() => searchData.value?.results)
+
+watch(searchData, (newData) => {
+  if (newData !== undefined) {
+    searchItemFocused.value = 0
+    historyItemFocused.value = 0
+
+    if (searchQuery.value.length > 0) {
+      const newHistory = [searchQuery.value].concat(searchHistory.value)
+
+      searchStore.updateHistory(Array.from(new Set(newHistory)).slice(0, 6))
+    }
+
+    searchedTerm.value = searchQuery.value
+
+    const pagination = new PaginatorUtil(PER_PAGE, 4).build(
+      newData.total,
+      searchStore.page
+    )
+
+    searchStore.updatePagination(pagination)
+  }
+})
+
+async function clearSearch(focusOnInput) {
+  remove.value()
+
+  searchQuery.value = ''
+  searchedOnce.value = false
+  searchedTerm.value = ''
+
+  searchStore.clear()
+
+  if (focusOnInput) {
+    await nextTick()
+    searchInput.value?.focus()
+  }
+}
+
+function closeDialog() {
+  emit('close')
+}
+
+function search(query) {
+  searchQuery.value = query
+  searchStore.updateQuery(query)
+}
+
+const lastFocus = ref(null)
+
+watch(isFetching, async (newIsFetching) => {
+  if (newIsFetching) {
+    lastFocus.value = document.activeElement
+    lastFocus.value?.blur()
+
+    return
+  }
+
+  await nextTick()
+
+  if (
+    lastFocus.value?.classList.contains('history-item') ||
+    lastFocus.value?.classList.contains('pag-button')
+  ) {
+    setTimeout(() => {
+      focusOnResults()
+    }, 210)
+  } else {
+    lastFocus.value?.focus()
+  }
+})
+
+function createDebounce() {
+  let timeout = null
+
+  return function (fn, delayMs) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      fn()
+    }, delayMs || 1000)
+  }
+}
+
+watch(searchQuery, async (newQuery, oldQuery) => {
+  if (newQuery.length === 0 && oldQuery.length > 0) {
+    clearSearch()
+  }
+})
+
+function toggleSortDirection() {
+  sortDirection.value = sortDirection.value === 'desc' ? 'asc' : 'desc'
+}
+
+const sortProperties = computed(() => {
+  const properties = [
+    { attr: 'title', title: t('book.properties.title') },
+    { attr: 'publisher', title: t('book.properties.publisher') },
+    { attr: 'status', title: t('book.properties.status') },
+    { attr: 'boughtAt', title: t('book.properties.boughtAt') },
+    { attr: 'readAt', title: t('book.properties.readAt') },
+    { attr: 'paidPrice.value', title: t('book.properties.paidPrice') },
+    { attr: 'labelPrice.value', title: t('book.properties.labelPrice') },
+    { attr: 'createdAt', title: t('book.properties.createdAt') },
+    { attr: 'updatedAt', title: t('book.properties.updatedAt') }
+  ]
+
+  return properties.sort((a, b) => a.title.localeCompare(b.title, locale.value))
+})
+
+function removeHistoryItem(item) {
+  const newHistory = searchHistory.value.filter((s) => s !== item)
+
+  searchStore.updateHistory(newHistory)
+}
+
+async function handlePageChange(page) {
+  searchStore.updatePage(page)
+}
+
+const shared = computed(() => sheetStore.shared)
+const owner = computed(() => ({
+  displayName: sheetStore.ownerDisplayName,
+  pictureUrl: sheetStore.ownerPictureUrl
+}))
+
+const resultsList = ref(null)
+const historyList = ref(null)
+const searchItemFocused = ref(0)
+const historyItemFocused = ref(0)
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleSearchItemKeydown(event) {
+  if (!resultsList.value || searchLoading.value) {
+    return
+  }
+
+  const nextValue = handleItemKeydown(
+    event,
+    searchItemFocused.value,
+    searchResults.value.length
+  )
+
+  if (nextValue === null) {
+    return
+  }
+
+  searchItemFocused.value = nextValue
+
+  focusOnElement(resultsList.value, searchItemFocused.value)
+}
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleHistoryItemKeydown(event) {
+  if (!historyList.value || searchLoading.value) {
+    return
+  }
+
+  if (event.key === 'Delete') {
+    removeHistoryItem(searchHistory.value[historyItemFocused.value])
+
+    if (searchHistory.value.length === 0) {
+      historyItemFocused.value = 0
+    } else if (historyItemFocused.value > searchHistory.value.length - 1) {
+      historyItemFocused.value--
+    }
+  } else {
+    const nextValue = handleItemKeydown(
+      event,
+      historyItemFocused.value,
+      searchHistory.value.length
+    )
+
+    if (nextValue === null) {
+      return
+    }
+
+    historyItemFocused.value = nextValue
+  }
+
+  nextTick(() => {
+    focusOnElement(historyList.value, historyItemFocused.value)
+  })
+}
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleItemKeydown(event, focused, totalItems) {
+  const allowedKeys = ['ArrowUp', 'ArrowDown', 'Home', 'End']
+  const { key } = event
+
+  if (!allowedKeys.includes(key)) {
+    return null
+  }
+
+  if (key === 'Home' && focused === 0) {
+    return null
+  }
+
+  if (key === 'End' && focused === totalItems - 1) {
+    return null
+  }
+
+  event.preventDefault()
+
+  if (key === 'ArrowDown') {
+    return (focused + 1) % totalItems
+  } else if (key === 'ArrowUp') {
+    return focused - 1 < 0 ? totalItems - 1 : focused - 1
+  } else if (key === 'Home') {
+    return 0
+  } else {
+    return totalItems - 1
+  }
+}
+
+function focusOnElement(container, i) {
+  const li = container?.children?.[i]
+  const element = li?.children?.[0]
+
+  element?.focus()
+}
+
+function focusOnResults() {
+  if (
+    !searchLoading.value &&
+    searchedTerm.value.length > 0 &&
+    searchResults.value.length > 0
+  ) {
+    focusOnElement(resultsList.value, searchItemFocused.value)
+  } else if (searchHistory.value.length > 0) {
+    focusOnElement(historyList.value, historyItemFocused.value)
+  }
+}
+</script>
+
 <template>
   <TransitionRoot
     appear
@@ -43,7 +366,9 @@
             @submit.prevent="handleSearch"
           >
             <span aria-hidden="true" class="w-6 h-6 relative">
-              <SearchIcon class="absolute w-6 h-6 text-primary-600 dark:text-primary-400 bg-white dark:bg-gray-800" />
+              <SearchIcon
+                class="absolute w-6 h-6 text-primary-600 dark:text-primary-400 bg-white dark:bg-gray-800"
+              />
             </span>
 
             <div class="flex-1 search-input-wrapper">
@@ -63,10 +388,14 @@
                 :value="searchQuery"
                 :placeholder="t('dashboard.search.placeholder')"
                 :disabled="searchLoading || !isOpen"
-                @input="debounce(() => { searchQuery = $event.target.value })"
+                @input="
+                  debounce(() => {
+                    searchQuery = $event.target.value
+                  })
+                "
                 @keyup.enter.prevent="search($event.target.value)"
                 @keyup.arrow-down.exact.prevent="focusOnResults"
-              >
+              />
             </div>
 
             <FadeTransition>
@@ -101,9 +430,7 @@
               <span class="sr-only">
                 {{ t('dashboard.search.close') }}
               </span>
-              <kbd aria-hidden="true" class="font-sans">
-                esc
-              </kbd>
+              <kbd aria-hidden="true" class="font-sans"> esc </kbd>
             </button>
           </form>
 
@@ -112,8 +439,14 @@
               v-if="searchResults?.length === 0"
               class="no-results select-none"
             >
-              <i18n-t keypath="dashboard.search.noResultsFound" tag="p" scope="global">
-                <span class="text-gray-900 dark:text-gray-100">{{ searchedTerm }}</span>
+              <i18n-t
+                keypath="dashboard.search.noResultsFound"
+                tag="p"
+                scope="global"
+              >
+                <span class="text-gray-900 dark:text-gray-100">{{
+                  searchedTerm
+                }}</span>
               </i18n-t>
             </div>
 
@@ -184,11 +517,19 @@
                     v-for="(result, resultIdx) in searchResults"
                     :key="result.id"
                     role="option"
-                    :aria-selected="resultIdx === searchItemFocused && !searchLoading ? true : undefined"
+                    :aria-selected="
+                      resultIdx === searchItemFocused && !searchLoading
+                        ? true
+                        : undefined
+                    "
                   >
                     <SearchItem
                       :result="result"
-                      :tabindex="resultIdx === searchItemFocused && !searchLoading ? '0' : '-1'"
+                      :tabindex="
+                        resultIdx === searchItemFocused && !searchLoading
+                          ? '0'
+                          : '-1'
+                      "
                       @click="closeDialog"
                       @keydown="handleSearchItemKeydown"
                     />
@@ -200,9 +541,15 @@
                 <div
                   v-if="searchResults.length > 0"
                   class="search-footer"
+                  :data-total-pages="searchPagination.total_pages"
                 >
                   <p class="hidden sm:block">
-                    {{ t('dashboard.search.resultCount', searchPagination?.total_results || 0) }}
+                    {{
+                      t(
+                        'dashboard.search.resultCount',
+                        searchPagination?.total_results || 0
+                      )
+                    }}
                   </p>
 
                   <Paginator
@@ -215,10 +562,7 @@
               </FadeTransition>
             </div>
 
-            <div
-              v-else-if="searchHistory.length > 0"
-              class="history"
-            >
+            <div v-else-if="searchHistory.length > 0" class="history">
               <h3 class="title px-5" id="history-header">
                 {{ t('dashboard.search.history') }}
               </h3>
@@ -234,11 +578,23 @@
                   v-for="(historyItem, historyIdx) in searchHistory"
                   :key="historyItem"
                   role="option"
-                  :aria-selected="historyIdx === historyItemFocused && !searchLoading ? true : undefined"
+                  :aria-selected="
+                    historyIdx === historyItemFocused && !searchLoading
+                      ? true
+                      : undefined
+                  "
                 >
                   <SearchHistoryItem
-                    :class="historyIdx === searchHistory.length - 1 ? 'focus-visible:rounded-b-2xl' : ''"
-                    :tabindex="historyIdx === historyItemFocused && !searchLoading ? '0' : '-1'"
+                    :class="
+                      historyIdx === searchHistory.length - 1
+                        ? 'focus-visible:rounded-b-2xl'
+                        : ''
+                    "
+                    :tabindex="
+                      historyIdx === historyItemFocused && !searchLoading
+                        ? '0'
+                        : '-1'
+                    "
                     :search="historyItem"
                     @click="search($event)"
                     @click:remove="removeHistoryItem($event)"
@@ -264,390 +620,16 @@
   </TransitionRoot>
 </template>
 
-<script>
-import { computed, nextTick, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import PaginatorUtil from 'paginator'
-
-import { useSearchStore } from '@/stores/search'
-import { useSheetStore } from '@/stores/sheet'
-import { PER_PAGE } from '@/services/sheet/constants'
-import useBookSearchQuery from '@/queries/useBookSearchQuery'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import {
-  SortAscendingIcon,
-  SortDescendingIcon,
-  XIcon
-} from '@heroicons/vue/solid'
-import { SearchIcon } from '@heroicons/vue/outline'
-
-import Avatar from '@/components/Avatar.vue'
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import LoadingIndicator from '@/components/LoadingIndicator.vue'
-import Paginator from '@/components/Paginator.vue'
-import SearchHistoryItem from '@/components/SearchHistoryItem.vue'
-import SearchItem from '@/components/SearchItem.vue'
-
-export default {
-  components: {
-    Avatar,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    FadeTransition,
-    LoadingIndicator,
-    Paginator,
-    SearchHistoryItem,
-    SearchIcon,
-    SearchItem,
-    SortAscendingIcon,
-    SortDescendingIcon,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  props: {
-    isOpen: Boolean
-  },
-
-  emits: ['close'],
-
-  setup (props, context) {
-    const { t, locale } = useI18n({ useScope: 'global' })
-    const { isOpen } = toRefs(props)
-
-    const searchStore = useSearchStore()
-    const sheetStore = useSheetStore()
-
-    const searchQuery = ref('')
-    const searchedOnce = ref(false)
-    const searchedTerm = ref('')
-    const searchHistory = computed(() => searchStore.history)
-    const searchPagination = computed(() => searchStore.pagination)
-
-    const searchInput = ref(null)
-    const results = ref(null)
-    const dialogContent = ref(null)
-
-    const sortBy = computed({
-      get: () => searchStore.sortBy,
-      set: val => searchStore.updateSort({ sortBy: val })
-    })
-
-    const sortDirection = computed({
-      get: () => searchStore.sortDirection,
-      set: val => searchStore.updateSort({ sortDirection: val })
-    })
-
-    const searchEnabled = computed(() => {
-      return isOpen.value && searchQuery.value.length > 0
-    })
-
-    const {
-      isLoading: searchLoading,
-      data: searchData,
-      isFetching,
-      isPreviousData,
-      remove
-    } = useBookSearchQuery({
-      query: searchQuery,
-      sortBy,
-      sortDirection,
-      page: computed(() => searchStore.page)
-    }, { enabled: searchEnabled, keepPreviousData: true })
-
-    const searchResults = computed(() => searchData.value?.results)
-
-    watch(searchData, newData => {
-      if (newData !== undefined) {
-        searchItemFocused.value = 0
-        historyItemFocused.value = 0
-
-        if (searchQuery.value.length > 0) {
-          const newHistory = [searchQuery.value].concat(searchHistory.value)
-
-          searchStore.updateHistory(
-            Array.from(new Set(newHistory)).slice(0, 6)
-          )
-        }
-
-        searchedTerm.value = searchQuery.value
-
-        const pagination = new PaginatorUtil(PER_PAGE, 4)
-          .build(newData.total, searchStore.page)
-
-        searchStore.updatePagination(pagination)
-      }
-    })
-
-    async function clearSearch (focusOnInput) {
-      remove.value()
-
-      searchQuery.value = ''
-      searchedOnce.value = false
-      searchedTerm.value = ''
-
-      searchStore.clear()
-
-      if (focusOnInput) {
-        await nextTick()
-        searchInput.value?.focus()
-      }
-    }
-
-    function closeDialog () {
-      context.emit('close')
-    }
-
-    function search (query) {
-      searchQuery.value = query
-      searchStore.updateQuery(query)
-    }
-
-    const lastFocus = ref(null)
-
-    watch(isFetching, async newIsFetching => {
-      if (newIsFetching) {
-        lastFocus.value = document.activeElement
-        lastFocus.value?.blur()
-
-        return
-      }
-
-      await nextTick()
-
-      if (
-        lastFocus.value?.classList.contains('history-item') ||
-        lastFocus.value?.classList.contains('pag-button')
-      ) {
-        setTimeout(() => { focusOnResults() }, 210)
-      } else {
-        lastFocus.value?.focus()
-      }
-    })
-
-    function createDebounce () {
-      let timeout = null
-
-      return function (fn, delayMs) {
-        clearTimeout(timeout)
-        timeout = setTimeout(() => { fn() }, delayMs || 1000)
-      }
-    }
-
-    watch(searchQuery, async (newQuery, oldQuery) => {
-      if (newQuery.length === 0 && oldQuery.length > 0) {
-        clearSearch()
-      }
-    })
-
-    function toggleSortDirection () {
-      sortDirection.value = sortDirection.value === 'desc' ? 'asc' : 'desc'
-    }
-
-    const sortProperties = computed(() => {
-      const properties = [
-        { attr: 'title', title: t('book.properties.title') },
-        { attr: 'publisher', title: t('book.properties.publisher') },
-        { attr: 'status', title: t('book.properties.status') },
-        { attr: 'boughtAt', title: t('book.properties.boughtAt') },
-        { attr: 'readAt', title: t('book.properties.readAt') },
-        { attr: 'paidPrice.value', title: t('book.properties.paidPrice') },
-        { attr: 'labelPrice.value', title: t('book.properties.labelPrice') },
-        { attr: 'createdAt', title: t('book.properties.createdAt') },
-        { attr: 'updatedAt', title: t('book.properties.updatedAt') }
-      ]
-
-      return properties.sort((a, b) => a.title.localeCompare(b.title, locale.value))
-    })
-
-    function removeHistoryItem (item) {
-      const newHistory = searchHistory.value.filter(s => s !== item)
-
-      searchStore.updateHistory(newHistory)
-    }
-
-    async function handlePageChange (page) {
-      searchStore.updatePage(page)
-    }
-
-    const shared = computed(() => sheetStore.shared)
-    const owner = computed(() => ({
-      displayName: sheetStore.ownerDisplayName,
-      pictureUrl: sheetStore.ownerPictureUrl
-    }))
-
-    const resultsList = ref(null)
-    const historyList = ref(null)
-    const searchItemFocused = ref(0)
-    const historyItemFocused = ref(0)
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleSearchItemKeydown (event) {
-      if (!resultsList.value || searchLoading.value) {
-        return
-      }
-
-      const nextValue = handleItemKeydown(
-        event,
-        searchItemFocused.value,
-        searchResults.value.length
-      )
-
-      if (nextValue === null) {
-        return
-      }
-
-      searchItemFocused.value = nextValue
-
-      focusOnElement(resultsList.value, searchItemFocused.value)
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleHistoryItemKeydown (event) {
-      if (!historyList.value || searchLoading.value) {
-        return
-      }
-
-      if (event.key === 'Delete') {
-        removeHistoryItem(searchHistory.value[historyItemFocused.value])
-
-        if (searchHistory.value.length === 0) {
-          historyItemFocused.value = 0
-        } else if (historyItemFocused.value > searchHistory.value.length - 1) {
-          historyItemFocused.value--
-        }
-      } else {
-        const nextValue = handleItemKeydown(
-          event,
-          historyItemFocused.value,
-          searchHistory.value.length
-        )
-
-        if (nextValue === null) {
-          return
-        }
-
-        historyItemFocused.value = nextValue
-      }
-
-      nextTick(() => {
-        focusOnElement(historyList.value, historyItemFocused.value)
-      })
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleItemKeydown (event, focused, totalItems) {
-      const allowedKeys = ['ArrowUp', 'ArrowDown', 'Home', 'End']
-      const { key } = event
-
-      if (!allowedKeys.includes(key)) {
-        return null
-      }
-
-      if (key === 'Home' && focused === 0) {
-        return null
-      }
-
-      if (key === 'End' && focused === totalItems - 1) {
-        return null
-      }
-
-      event.preventDefault()
-
-      if (key === 'ArrowDown') {
-        return (focused + 1) % totalItems
-      } else if (key === 'ArrowUp') {
-        return focused - 1 < 0
-          ? totalItems - 1
-          : focused - 1
-      } else if (key === 'Home') {
-        return 0
-      } else {
-        return totalItems - 1
-      }
-    }
-
-    function focusOnElement (container, i) {
-      const li = container?.children?.[i]
-      const element = li?.children?.[0]
-
-      element?.focus()
-    }
-
-    function focusOnResults () {
-      if (!searchLoading.value && searchedTerm.value.length > 0 && searchResults.value.length > 0) {
-        focusOnElement(resultsList.value, searchItemFocused.value)
-      } else if (searchHistory.value.length > 0) {
-        focusOnElement(historyList.value, historyItemFocused.value)
-      }
-    }
-
-    return {
-      t,
-      closeDialog,
-      searchQuery,
-      searchedOnce,
-      searchedTerm,
-      searchLoading,
-      searchResults,
-      searchHistory,
-      searchPagination,
-      searchInput,
-      dialogContent,
-      isFetching,
-      isPreviousData,
-      results,
-      search,
-      clearSearch,
-      debounce: createDebounce(),
-      sortBy,
-      sortDirection,
-      toggleSortDirection,
-      sortProperties,
-      removeHistoryItem,
-      handlePageChange,
-      shared,
-      owner,
-      resultsList,
-      historyList,
-      searchItemFocused,
-      historyItemFocused,
-      handleItemKeydown,
-      handleSearchItemKeydown,
-      handleHistoryItemKeydown,
-      focusOnResults
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
   display: none;
 }
 
 .dialog {
-  @apply fixed z-20 inset-0 flex flex-col items-center
+  @apply fixed z-30 inset-0 flex flex-col items-center
     py-4 px-4 sm:py-6 sm:px-6 md:px-0 md:py-12 lg:py-24;
 }
 
@@ -765,4 +747,8 @@ input[type="search"]::-webkit-search-results-decoration {
     text-sm text-gray-600 dark:text-gray-400 font-medium
     py-4 px-5 flex justify-center sm:justify-between items-center;
 }
+
+.search-footer[data-total-pages='1'] {
+  @apply hidden sm:flex;
+}
 </style>
diff --git a/src/components/dialogs/SettingsDialog.vue b/src/components/dialogs/SettingsDialog.vue
index f10d8125..4058b5dc 100644
--- a/src/components/dialogs/SettingsDialog.vue
+++ b/src/components/dialogs/SettingsDialog.vue
@@ -1,11 +1,191 @@
+<script setup>
+import { computed, inject, reactive, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useQueryClient } from 'vue-query'
+
+import { useAuthStore } from '@/stores/auth'
+import { useSettingsStore } from '@/stores/settings'
+import { useSheetStore } from '@/stores/sheet'
+
+import {
+  Dialog,
+  DialogOverlay,
+  DialogTitle,
+  Switch,
+  SwitchLabel,
+  SwitchGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import { CheckIcon, ExclamationIcon, XIcon } from '@heroicons/vue/solid'
+
+import LocaleSelector from '@/components/LocaleSelector.vue'
+
+const props = defineProps({ isOpen: Boolean })
+
+const emit = defineEmits(['close'])
+
+const { t, locale } = useI18n({ useScope: 'global' })
+
+function closeDialog() {
+  emit('close')
+}
+
+const { isOpen } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+const isDev = ref(import.meta.env.DEV)
+
+const tabs = computed(() => {
+  const buttons = [
+    {
+      key: 'appearence',
+      title: t('dashboard.settings.appearence.title')
+    },
+    {
+      key: 'privacy',
+      title: t('dashboard.settings.privacy.title')
+    }
+  ]
+
+  if (isDev.value) {
+    buttons.push({
+      key: 'development',
+      title: t('dashboard.settings.development.title')
+    })
+  }
+
+  return buttons
+})
+
+const authStore = useAuthStore()
+const settingsStore = useSettingsStore()
+const sheetStore = useSheetStore()
+const queryClient = useQueryClient()
+
+const settings = reactive({
+  appearence: {
+    locale: locale.value,
+    theme: settingsStore.theme,
+    viewMode: settingsStore.viewMode,
+    gridMode: settingsStore.gridMode,
+    spoilerMode: { ...settingsStore.spoilerMode },
+    blurNsfw: settingsStore.blurNsfw
+  },
+  development: {
+    showVueQueryDevTools: settingsStore.showVueQueryDevTools,
+    useDevSheet: settingsStore.useDevSheet
+  }
+})
+
+watch(isOpen, (newIsOpen) => {
+  if (newIsOpen) {
+    Object.assign(settings, {
+      appearence: {
+        locale: locale.value,
+        theme: settingsStore.theme,
+        viewMode: settingsStore.viewMode,
+        gridMode: settingsStore.gridMode,
+        spoilerMode: { ...settingsStore.spoilerMode },
+        blurNsfw: settingsStore.blurNsfw
+      },
+      development: {
+        showVueQueryDevTools: settingsStore.showVueQueryDevTools,
+        useDevSheet: settingsStore.useDevSheet
+      }
+    })
+
+    disableSearchShortcut()
+  } else {
+    enableSearchShortcut()
+  }
+})
+
+const theme = computed(() => settingsStore.theme)
+
+watch(theme, (newTheme) => {
+  if (settings.appearence.theme !== newTheme) {
+    settings.appearence.theme = newTheme
+  }
+})
+
+function updateSetting(key, newValue) {
+  const path = key.split('.')
+
+  if (path[2]) {
+    settings[path[0]][path[1]][path[2]] = newValue
+  } else {
+    settings[path[0]][path[1]] = newValue
+  }
+
+  if (key === 'appearence.locale') {
+    saveLocale()
+  } else if (key === 'appearence.theme') {
+    settingsStore.updateTheme(settings.appearence.theme)
+  }
+}
+
+function saveLocale() {
+  const { appearence } = settings
+
+  if (locale.value !== appearence.locale) {
+    locale.value = appearence.locale
+    queryClient.invalidateQueries('statistics')
+    queryClient.invalidateQueries('last-added')
+    queryClient.invalidateQueries('latest-readings')
+    queryClient.invalidateQueries('books')
+    queryClient.invalidateQueries('book')
+  }
+}
+
+function saveAppearenceSettings() {
+  const { appearence } = settings
+
+  saveLocale()
+  settingsStore.updateTheme(appearence.theme)
+  settingsStore.updateBlurNsfw(appearence.blurNsfw)
+  settingsStore.updateGridMode(appearence.gridMode)
+  settingsStore.updateSpoilerMode(appearence.spoilerMode)
+  settingsStore.updateViewMode(appearence.viewMode)
+}
+
+async function saveDevelopmentSettings() {
+  const { development } = settings
+
+  settingsStore.updateShowVueQueryDevTools(development.showVueQueryDevTools)
+
+  if (development.useDevSheet !== settingsStore.useDevSheet) {
+    settingsStore.updateUseDevSheet(development.useDevSheet)
+
+    await sheetStore.findSheetId()
+    queryClient.resetQueries()
+    queryClient.refetchQueries()
+  }
+}
+
+async function handleSave() {
+  saveAppearenceSettings()
+  await saveDevelopmentSettings()
+  closeDialog()
+}
+
+function handleDisconnect() {
+  closeDialog()
+  authStore.disconnect()
+}
+</script>
+
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
-    <Dialog
-      static
-      as="template"
-      :open="isOpen"
-      @close="closeDialog"
-    >
+    <Dialog static as="template" :open="isOpen" @close="closeDialog">
       <div class="dialog">
         <TransitionChild
           as="template"
@@ -36,18 +216,24 @@
               </DialogTitle>
             </div>
 
-            <button
-              class="close-button has-ring-focus"
-              @click="closeDialog"
-            >
+            <button class="close-button has-ring-focus" @click="closeDialog">
               <span aria-hidden="true">
                 <XIcon class="w-5 h-5" />
               </span>
             </button>
 
             <span aria-hidden="true" class="absolute left-2">
-              <svg class="text-white opacity-30 block h-48 w-48" viewBox="0 0 184 184" xmlns="http://www.w3.org/2000/svg">
-                <path d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z" fill="currentColor" fill-rule="evenodd" opacity="0.503"></path>
+              <svg
+                class="text-white opacity-30 block h-48 w-48"
+                viewBox="0 0 184 184"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  opacity="0.503"
+                ></path>
               </svg>
             </span>
           </div>
@@ -68,7 +254,9 @@
 
             <TabPanels as="template">
               <div class="tab-panels" ref="main">
-                <TabPanel class="has-ring-focus rounded-md focus-visible:ring-inset">
+                <TabPanel
+                  class="has-ring-focus rounded-md focus-visible:ring-inset"
+                >
                   <div class="divide-y dark:divide-gray-700">
                     <div class="preference">
                       <div class="preference-description">
@@ -76,12 +264,18 @@
                           {{ t('dashboard.settings.appearence.locale.label') }}
                         </label>
                         <p>
-                          {{ t('dashboard.settings.appearence.locale.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.locale.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <LocaleSelector
                         :model-value="settings.appearence.locale"
-                        @update:model-value="updateSetting('appearence.locale', $event)"
+                        @update:model-value="
+                          updateSetting('appearence.locale', $event)
+                        "
                       />
                     </div>
                     <div class="preference">
@@ -90,21 +284,34 @@
                           {{ t('dashboard.settings.appearence.theme.label') }}
                         </label>
                         <p>
-                          {{ t('dashboard.settings.appearence.theme.description') }}
+                          {{
+                            t('dashboard.settings.appearence.theme.description')
+                          }}
                         </p>
                       </div>
                       <select
                         class="select w-44 h-auto"
                         id="theme"
-                        @change="updateSetting('appearence.theme', $event.target.value)"
+                        @change="
+                          updateSetting('appearence.theme', $event.target.value)
+                        "
                       >
-                        <option value="system" :selected="'system' === settings.appearence.theme">
+                        <option
+                          value="system"
+                          :selected="'system' === settings.appearence.theme"
+                        >
                           {{ t('dashboard.settings.appearence.theme.system') }}
                         </option>
-                        <option value="light" :selected="'light' === settings.appearence.theme">
+                        <option
+                          value="light"
+                          :selected="'light' === settings.appearence.theme"
+                        >
                           {{ t('dashboard.settings.appearence.theme.light') }}
                         </option>
-                        <option value="dark" :selected="'dark' === settings.appearence.theme">
+                        <option
+                          value="dark"
+                          :selected="'dark' === settings.appearence.theme"
+                        >
                           {{ t('dashboard.settings.appearence.theme.dark') }}
                         </option>
                       </select>
@@ -112,21 +319,38 @@
                     <div class="preference">
                       <div class="preference-description">
                         <label for="view-mode">
-                          {{ t('dashboard.settings.appearence.viewMode.label') }}
+                          {{
+                            t('dashboard.settings.appearence.viewMode.label')
+                          }}
                         </label>
                         <p>
-                          {{ t('dashboard.settings.appearence.viewMode.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.viewMode.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <select
                         class="select w-36 h-auto"
                         id="view-mode"
-                        @change="updateSetting('appearence.viewMode', $event.target.value)"
+                        @change="
+                          updateSetting(
+                            'appearence.viewMode',
+                            $event.target.value
+                          )
+                        "
                       >
-                        <option value="grid" :selected="'grid' === settings.appearence.viewMode">
+                        <option
+                          value="grid"
+                          :selected="'grid' === settings.appearence.viewMode"
+                        >
                           {{ t('dashboard.library.filters.viewMode.grid') }}
                         </option>
-                        <option value="table" :selected="'table' === settings.appearence.viewMode">
+                        <option
+                          value="table"
+                          :selected="'table' === settings.appearence.viewMode"
+                        >
                           {{ t('dashboard.library.filters.viewMode.table') }}
                         </option>
                       </select>
@@ -134,44 +358,86 @@
                     <div class="preference">
                       <div class="preference-description">
                         <label for="grid-mode">
-                          {{ t('dashboard.settings.appearence.gridMode.label') }}
+                          {{
+                            t('dashboard.settings.appearence.gridMode.label')
+                          }}
                         </label>
                         <p>
-                          {{ t('dashboard.settings.appearence.gridMode.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.gridMode.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <select
                         class="select w-36 h-auto"
                         id="grid-mode"
                         :disabled="settings.appearence.viewMode !== 'grid'"
-                        @change="updateSetting('appearence.gridMode', $event.target.value)"
+                        @change="
+                          updateSetting(
+                            'appearence.gridMode',
+                            $event.target.value
+                          )
+                        "
                       >
-                        <option value="compact" :selected="'compact' === settings.appearence.gridMode">
+                        <option
+                          value="compact"
+                          :selected="'compact' === settings.appearence.gridMode"
+                        >
                           {{ t('dashboard.library.filters.gridMode.compact') }}
                         </option>
-                        <option value="comfortable" :selected="'comfortable' === settings.appearence.gridMode">
-                          {{ t('dashboard.library.filters.gridMode.comfortable') }}
+                        <option
+                          value="comfortable"
+                          :selected="
+                            'comfortable' === settings.appearence.gridMode
+                          "
+                        >
+                          {{
+                            t('dashboard.library.filters.gridMode.comfortable')
+                          }}
                         </option>
                       </select>
                     </div>
                     <SwitchGroup as="div" class="preference">
                       <div class="preference-description">
                         <SwitchLabel>
-                          {{ t('dashboard.settings.appearence.spoilerModeSynopsis.label') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.spoilerModeSynopsis.label'
+                            )
+                          }}
                         </SwitchLabel>
                         <p>
-                          {{ t('dashboard.settings.appearence.spoilerModeSynopsis.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.spoilerModeSynopsis.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <Switch
                         :model-value="settings.appearence.spoilerMode.synopsis"
-                        @update:model-value="updateSetting('appearence.spoilerMode.synopsis', $event)"
-                        :class="settings.appearence.spoilerMode.synopsis ? 'bg-primary-600 dark:bg-primary-500' : 'bg-gray-200 dark:bg-gray-600'"
+                        @update:model-value="
+                          updateSetting(
+                            'appearence.spoilerMode.synopsis',
+                            $event
+                          )
+                        "
+                        :class="
+                          settings.appearence.spoilerMode.synopsis
+                            ? 'bg-primary-600 dark:bg-primary-500'
+                            : 'bg-gray-200 dark:bg-gray-600'
+                        "
                         class="relative inline-flex items-center h-6 rounded-full w-11 motion-safe:transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
                       >
                         <span
                           aria-hidden="true"
-                          :class="settings.appearence.spoilerMode.synopsis ? 'translate-x-6 dark:bg-white' : 'translate-x-1 dark:bg-gray-100'"
+                          :class="
+                            settings.appearence.spoilerMode.synopsis
+                              ? 'translate-x-6 dark:bg-white'
+                              : 'translate-x-1 dark:bg-gray-100'
+                          "
                           class="motion-safe:transition-transform duration-200 ease-in-out inline-block w-4 h-4 bg-white rounded-full"
                         />
                       </Switch>
@@ -179,21 +445,39 @@
                     <SwitchGroup as="div" class="preference">
                       <div class="preference-description">
                         <SwitchLabel>
-                          {{ t('dashboard.settings.appearence.spoilerModeCover.label') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.spoilerModeCover.label'
+                            )
+                          }}
                         </SwitchLabel>
                         <p>
-                          {{ t('dashboard.settings.appearence.spoilerModeCover.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.spoilerModeCover.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <Switch
                         :model-value="settings.appearence.spoilerMode.cover"
-                        @update:model-value="updateSetting('appearence.spoilerMode.cover', $event)"
-                        :class="settings.appearence.spoilerMode.cover ? 'bg-primary-600 dark:bg-primary-500' : 'bg-gray-200 dark:bg-gray-600'"
+                        @update:model-value="
+                          updateSetting('appearence.spoilerMode.cover', $event)
+                        "
+                        :class="
+                          settings.appearence.spoilerMode.cover
+                            ? 'bg-primary-600 dark:bg-primary-500'
+                            : 'bg-gray-200 dark:bg-gray-600'
+                        "
                         class="relative inline-flex items-center h-6 rounded-full w-11 motion-safe:transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
                       >
                         <span
                           aria-hidden="true"
-                          :class="settings.appearence.spoilerMode.cover ? 'translate-x-6 dark:bg-white' : 'translate-x-1 dark:bg-gray-100'"
+                          :class="
+                            settings.appearence.spoilerMode.cover
+                              ? 'translate-x-6 dark:bg-white'
+                              : 'translate-x-1 dark:bg-gray-100'
+                          "
                           class="motion-safe:transition-transform duration-200 ease-in-out inline-block w-4 h-4 bg-white rounded-full"
                         />
                       </Switch>
@@ -201,36 +485,60 @@
                     <SwitchGroup as="div" class="preference">
                       <div class="preference-description">
                         <SwitchLabel>
-                          {{ t('dashboard.settings.appearence.blurNsfwCover.label') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.blurNsfwCover.label'
+                            )
+                          }}
                         </SwitchLabel>
                         <p>
-                          {{ t('dashboard.settings.appearence.blurNsfwCover.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.appearence.blurNsfwCover.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <Switch
                         :model-value="settings.appearence.blurNsfw"
-                        @update:model-value="updateSetting('appearence.blurNsfw', $event)"
+                        @update:model-value="
+                          updateSetting('appearence.blurNsfw', $event)
+                        "
                         v-model="settings.appearence.blurNsfw"
-                        :class="settings.appearence.blurNsfw ? 'bg-primary-600 dark:bg-primary-500' : 'bg-gray-200 dark:bg-gray-600'"
+                        :class="
+                          settings.appearence.blurNsfw
+                            ? 'bg-primary-600 dark:bg-primary-500'
+                            : 'bg-gray-200 dark:bg-gray-600'
+                        "
                         class="relative inline-flex items-center h-6 rounded-full w-11 motion-safe:transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
                       >
                         <span
                           aria-hidden="true"
-                          :class="settings.appearence.blurNsfw ? 'translate-x-6 dark:bg-white' : 'translate-x-1 dark:bg-gray-100'"
+                          :class="
+                            settings.appearence.blurNsfw
+                              ? 'translate-x-6 dark:bg-white'
+                              : 'translate-x-1 dark:bg-gray-100'
+                          "
                           class="motion-safe:transition-transform duration-200 ease-in-out inline-block w-4 h-4 bg-white rounded-full"
                         />
                       </Switch>
                     </SwitchGroup>
                   </div>
                 </TabPanel>
-                <TabPanel class="has-ring-focus rounded-md focus-visible:ring-inset">
+                <TabPanel
+                  class="has-ring-focus rounded-md focus-visible:ring-inset"
+                >
                   <div class="preference">
                     <div class="preference-description">
                       <label>
                         {{ t('dashboard.settings.privacy.removeAccess.label') }}
                       </label>
                       <p>
-                        {{ t('dashboard.settings.privacy.removeAccess.description') }}
+                        {{
+                          t(
+                            'dashboard.settings.privacy.removeAccess.description'
+                          )
+                        }}
                       </p>
                     </div>
                     <div>
@@ -243,37 +551,62 @@
                           <ExclamationIcon />
                         </span>
                         <span>
-                          {{ t('dashboard.settings.privacy.removeAccess.remove') }}
+                          {{
+                            t('dashboard.settings.privacy.removeAccess.remove')
+                          }}
                         </span>
                       </button>
                     </div>
                   </div>
                 </TabPanel>
-                <TabPanel v-if="isDev" class="has-ring-focus rounded-md focus-visible:ring-inset">
+                <TabPanel
+                  v-if="isDev"
+                  class="has-ring-focus rounded-md focus-visible:ring-inset"
+                >
                   <div class="divide-y dark:divide-gray-700">
                     <SwitchGroup as="div" class="preference">
                       <div class="preference-description">
                         <SwitchLabel>
                           <span aria-hidden="true">
-                            <ExclamationIcon class="w-5 h-5 mr-1 text-red-600 dark:text-red-400" />
+                            <ExclamationIcon
+                              class="w-5 h-5 mr-1 text-red-600 dark:text-red-400"
+                            />
                           </span>
                           <span>
-                            {{ t('dashboard.settings.development.useDevSheet.label') }}
+                            {{
+                              t(
+                                'dashboard.settings.development.useDevSheet.label'
+                              )
+                            }}
                           </span>
                         </SwitchLabel>
                         <p>
-                          {{ t('dashboard.settings.development.useDevSheet.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.development.useDevSheet.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <Switch
                         :model-value="settings.development.useDevSheet"
-                        @update:model-value="updateSetting('development.useDevSheet', $event)"
-                        :class="settings.development.useDevSheet ? 'bg-primary-600 dark:bg-primary-500' : 'bg-gray-200 dark:bg-gray-600'"
+                        @update:model-value="
+                          updateSetting('development.useDevSheet', $event)
+                        "
+                        :class="
+                          settings.development.useDevSheet
+                            ? 'bg-primary-600 dark:bg-primary-500'
+                            : 'bg-gray-200 dark:bg-gray-600'
+                        "
                         class="relative inline-flex items-center h-6 rounded-full w-11 motion-safe:transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
                       >
                         <span
                           aria-hidden="true"
-                          :class="settings.development.useDevSheet ? 'translate-x-6 dark:bg-white' : 'translate-x-1 dark:bg-gray-100'"
+                          :class="
+                            settings.development.useDevSheet
+                              ? 'translate-x-6 dark:bg-white'
+                              : 'translate-x-1 dark:bg-gray-100'
+                          "
                           class="motion-safe:transition-transform duration-200 ease-in-out inline-block w-4 h-4 bg-white rounded-full"
                         />
                       </Switch>
@@ -281,21 +614,42 @@
                     <SwitchGroup as="div" class="preference">
                       <div class="preference-description">
                         <SwitchLabel>
-                          {{ t('dashboard.settings.development.showVueQueryDevTools.label') }}
+                          {{
+                            t(
+                              'dashboard.settings.development.showVueQueryDevTools.label'
+                            )
+                          }}
                         </SwitchLabel>
                         <p>
-                          {{ t('dashboard.settings.development.showVueQueryDevTools.description') }}
+                          {{
+                            t(
+                              'dashboard.settings.development.showVueQueryDevTools.description'
+                            )
+                          }}
                         </p>
                       </div>
                       <Switch
                         :model-value="settings.development.showVueQueryDevTools"
-                        @update:model-value="updateSetting('development.showVueQueryDevTools', $event)"
-                        :class="settings.development.showVueQueryDevTools ? 'bg-primary-600 dark:bg-primary-500' : 'bg-gray-200 dark:bg-gray-600'"
+                        @update:model-value="
+                          updateSetting(
+                            'development.showVueQueryDevTools',
+                            $event
+                          )
+                        "
+                        :class="
+                          settings.development.showVueQueryDevTools
+                            ? 'bg-primary-600 dark:bg-primary-500'
+                            : 'bg-gray-200 dark:bg-gray-600'
+                        "
                         class="relative inline-flex items-center h-6 rounded-full w-11 motion-safe:transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
                       >
                         <span
                           aria-hidden="true"
-                          :class="settings.development.showVueQueryDevTools ? 'translate-x-6 dark:bg-white' : 'translate-x-1 dark:bg-gray-100'"
+                          :class="
+                            settings.development.showVueQueryDevTools
+                              ? 'translate-x-6 dark:bg-white'
+                              : 'translate-x-1 dark:bg-gray-100'
+                          "
                           class="motion-safe:transition-transform duration-200 ease-in-out inline-block w-4 h-4 bg-white rounded-full"
                         />
                       </Switch>
@@ -330,231 +684,9 @@
   </TransitionRoot>
 </template>
 
-<script>
-import { computed, inject, reactive, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useQueryClient } from 'vue-query'
-
-import { useAuthStore } from '@/stores/auth'
-import { useSettingsStore } from '@/stores/settings'
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  Switch,
-  SwitchLabel,
-  SwitchGroup,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import { CheckIcon, ExclamationIcon, XIcon } from '@heroicons/vue/solid'
-
-import LocaleSelector from '@/components/LocaleSelector.vue'
-
-export default {
-  components: {
-    CheckIcon,
-    Dialog,
-    DialogOverlay,
-    DialogTitle,
-    ExclamationIcon,
-    LocaleSelector,
-    Switch,
-    SwitchLabel,
-    SwitchGroup,
-    Tab,
-    TabGroup,
-    TabList,
-    TabPanel,
-    TabPanels,
-    TransitionChild,
-    TransitionRoot,
-    XIcon
-  },
-
-  props: {
-    isOpen: Boolean
-  },
-
-  emits: ['close'],
-
-  setup (props, context) {
-    const { t, locale } = useI18n({ useScope: 'global' })
-
-    function closeDialog () {
-      context.emit('close')
-    }
-
-    const { isOpen } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    const isDev = ref(import.meta.env.DEV)
-
-    const tabs = computed(() => {
-      const buttons = [
-        {
-          key: 'appearence',
-          title: t('dashboard.settings.appearence.title')
-        },
-        {
-          key: 'privacy',
-          title: t('dashboard.settings.privacy.title')
-        }
-      ]
-
-      if (isDev.value) {
-        buttons.push({
-          key: 'development',
-          title: t('dashboard.settings.development.title')
-        })
-      }
-
-      return buttons
-    })
-
-    const authStore = useAuthStore()
-    const settingsStore = useSettingsStore()
-    const sheetStore = useSheetStore()
-    const queryClient = useQueryClient()
-
-    const settings = reactive({
-      appearence: {
-        locale: locale.value,
-        theme: settingsStore.theme,
-        viewMode: settingsStore.viewMode,
-        gridMode: settingsStore.gridMode,
-        spoilerMode: { ...settingsStore.spoilerMode },
-        blurNsfw: settingsStore.blurNsfw
-      },
-      development: {
-        showVueQueryDevTools: settingsStore.showVueQueryDevTools,
-        useDevSheet: settingsStore.useDevSheet
-      }
-    })
-
-    watch(isOpen, newIsOpen => {
-      if (newIsOpen) {
-        Object.assign(settings, {
-          appearence: {
-            locale: locale.value,
-            theme: settingsStore.theme,
-            viewMode: settingsStore.viewMode,
-            gridMode: settingsStore.gridMode,
-            spoilerMode: { ...settingsStore.spoilerMode },
-            blurNsfw: settingsStore.blurNsfw
-          },
-          development: {
-            showVueQueryDevTools: settingsStore.showVueQueryDevTools,
-            useDevSheet: settingsStore.useDevSheet
-          }
-        })
-
-        disableSearchShortcut()
-      } else {
-        enableSearchShortcut()
-      }
-    })
-
-    const theme = computed(() => settingsStore.theme)
-
-    watch(theme, newTheme => {
-      if (settings.appearence.theme !== newTheme) {
-        settings.appearence.theme = newTheme
-      }
-    })
-
-    function updateSetting (key, newValue) {
-      const path = key.split('.')
-
-      if (path[2]) {
-        settings[path[0]][path[1]][path[2]] = newValue
-      } else {
-        settings[path[0]][path[1]] = newValue
-      }
-
-      if (key === 'appearence.locale') {
-        saveLocale()
-      } else if (key === 'appearence.theme') {
-        settingsStore.updateTheme(settings.appearence.theme)
-      }
-    }
-
-    function saveLocale () {
-      const { appearence } = settings
-
-      if (locale.value !== appearence.locale) {
-        locale.value = appearence.locale
-        queryClient.invalidateQueries('statistics')
-        queryClient.invalidateQueries('last-added')
-        queryClient.invalidateQueries('latest-readings')
-        queryClient.invalidateQueries('books')
-        queryClient.invalidateQueries('book')
-      }
-    }
-
-    function saveAppearenceSettings () {
-      const { appearence } = settings
-
-      saveLocale()
-      settingsStore.updateTheme(appearence.theme)
-      settingsStore.updateBlurNsfw(appearence.blurNsfw)
-      settingsStore.updateGridMode(appearence.gridMode)
-      settingsStore.updateSpoilerMode(appearence.spoilerMode)
-      settingsStore.updateViewMode(appearence.viewMode)
-    }
-
-    async function saveDevelopmentSettings () {
-      const { development } = settings
-
-      settingsStore.updateShowVueQueryDevTools(development.showVueQueryDevTools)
-
-      if (development.useDevSheet !== settingsStore.useDevSheet) {
-        settingsStore.updateUseDevSheet(development.useDevSheet)
-
-        await sheetStore.findSheetId()
-        queryClient.resetQueries()
-        queryClient.refetchQueries()
-      }
-    }
-
-    async function handleSave () {
-      saveAppearenceSettings()
-      await saveDevelopmentSettings()
-      closeDialog()
-    }
-
-    function handleDisconnect () {
-      closeDialog()
-      authStore.disconnect()
-    }
-
-    return {
-      t,
-      isDev,
-      closeDialog,
-      tabs,
-      settings,
-      handleSave,
-      updateSetting,
-      handleDisconnect
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dialog {
-  @apply fixed z-20 inset-0 flex flex-col items-center
+  @apply fixed z-30 inset-0 flex flex-col items-center
     sm:py-6 sm:px-6 md:px-0 md:py-12 lg:py-16;
 }
 
@@ -618,12 +750,12 @@ export default {
     text-gray-800 dark:text-gray-300;
 }
 
-.tab-button[aria-selected="true"] {
+.tab-button[aria-selected='true'] {
   @apply text-primary-600 dark:text-gray-100
-     border-primary-600 dark:border-primary-400
+     border-primary-600 dark:border-primary-400;
 }
 
-.tab-button[aria-selected="true"]:hover {
+.tab-button[aria-selected='true']:hover {
   @apply text-primary-600 dark:text-gray-100
     border-primary-600 dark:border-primary-400;
 }
diff --git a/src/components/dialogs/SheetChooserDialog.vue b/src/components/dialogs/SheetChooserDialog.vue
index 241f0f1e..e557a33f 100644
--- a/src/components/dialogs/SheetChooserDialog.vue
+++ b/src/components/dialogs/SheetChooserDialog.vue
@@ -1,3 +1,77 @@
+<script setup>
+import { computed, inject, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useQueryClient } from 'vue-query'
+
+import { useSheetStore } from '@/stores/sheet'
+
+import {
+  Dialog,
+  DialogDescription,
+  DialogOverlay,
+  DialogTitle,
+  RadioGroup,
+  RadioGroupDescription,
+  RadioGroupLabel,
+  RadioGroupOption,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue'
+
+import {
+  LockClosedIcon,
+  LockOpenIcon,
+  StarIcon,
+  UserGroupIcon
+} from '@heroicons/vue/outline'
+import { XIcon } from '@heroicons/vue/solid'
+
+const props = defineProps({ isOpen: Boolean })
+
+const emit = defineEmits(['close'])
+
+const { t, d } = useI18n({ useScope: 'global' })
+
+const sheetStore = useSheetStore()
+const queryClient = useQueryClient()
+
+function closeDialog() {
+  emit('close')
+}
+
+const selected = ref(sheetStore.sheetId)
+const options = computed(() => sheetStore.options)
+
+const selectedSheet = computed(() => {
+  return options.value.find((file) => file.id === selected.value)
+})
+
+function selectCurrent() {
+  closeDialog()
+
+  if (selected.value !== sheetStore.sheetId) {
+    sheetStore.updateSheetId(selected.value)
+    sheetStore.updateSelected(selectedSheet.value)
+
+    queryClient.resetQueries()
+    queryClient.refetchQueries()
+  }
+}
+
+const { isOpen } = toRefs(props)
+
+const disableSearchShortcut = inject('disableSearchShortcut')
+const enableSearchShortcut = inject('enableSearchShortcut')
+
+watch(isOpen, (newIsOpen) => {
+  if (newIsOpen) {
+    selected.value = sheetStore.sheetId
+  }
+
+  newIsOpen ? disableSearchShortcut() : enableSearchShortcut()
+})
+</script>
+
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog as="template" @close="closeDialog">
@@ -34,18 +108,24 @@
               </DialogDescription>
             </div>
 
-            <button
-              class="close-button has-ring-focus"
-              @click="closeDialog"
-            >
+            <button class="close-button has-ring-focus" @click="closeDialog">
               <span aria-hidden="true">
                 <XIcon class="w-5 h-5" />
               </span>
             </button>
 
             <span aria-hidden="true" class="absolute left-2">
-              <svg class="text-white opacity-30 block h-48 w-48" viewBox="0 0 184 184" xmlns="http://www.w3.org/2000/svg">
-                <path d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z" fill="currentColor" fill-rule="evenodd" opacity="0.503"></path>
+              <svg
+                class="text-white opacity-30 block h-48 w-48"
+                viewBox="0 0 184 184"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M182 184a2 2 0 110-4 2 2 0 010 4zm-20-20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 0a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm-20 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 40a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 60a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm-20 80a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM22 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 144a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0 20a2 2 0 110-4 2 2 0 010 4zm0-60a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zm0-20a2 2 0 110-4 2 2 0 010 4zM2 4a2 2 0 110-4 2 2 0 010 4z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  opacity="0.503"
+                ></path>
               </svg>
             </span>
           </div>
@@ -84,15 +164,12 @@
                         class="owner-picture"
                         :alt="option.owners[0].displayName"
                         :src="option.owners[0].photoLink"
-                      >
+                      />
                       <div class="owner-info">
                         <p class="owner-name">
                           {{ option.owners[0].displayName }}
 
-                          <span
-                            v-if="option.ownedByMe"
-                            class="owner-self"
-                          >
+                          <span v-if="option.ownedByMe" class="owner-self">
                             {{ t('dashboard.sheetChooser.you') }}
                           </span>
                         </p>
@@ -179,116 +256,9 @@
   </TransitionRoot>
 </template>
 
-<script>
-import { computed, inject, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useQueryClient } from 'vue-query'
-
-import { useSheetStore } from '@/stores/sheet'
-
-import {
-  Dialog,
-  DialogDescription,
-  DialogOverlay,
-  DialogTitle,
-  RadioGroup,
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-  TransitionChild,
-  TransitionRoot
-} from '@headlessui/vue'
-
-import {
-  LockClosedIcon,
-  LockOpenIcon,
-  StarIcon,
-  UserGroupIcon
-} from '@heroicons/vue/outline'
-import { XIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle,
-    LockClosedIcon,
-    LockOpenIcon,
-    RadioGroup,
-    RadioGroupDescription,
-    RadioGroupLabel,
-    RadioGroupOption,
-    StarIcon,
-    TransitionChild,
-    TransitionRoot,
-    UserGroupIcon,
-    XIcon
-  },
-
-  props: {
-    isOpen: Boolean
-  },
-
-  emits: ['close'],
-
-  setup (props, context) {
-    const { t, d } = useI18n({ useScope: 'global' })
-
-    const sheetStore = useSheetStore()
-    const queryClient = useQueryClient()
-
-    function closeDialog () {
-      context.emit('close')
-    }
-
-    const selected = ref(sheetStore.sheetId)
-    const options = computed(() => sheetStore.options)
-
-    const selectedSheet = computed(() => {
-      return options.value.find(file => file.id === selected.value)
-    })
-
-    function selectCurrent () {
-      closeDialog()
-
-      if (selected.value !== sheetStore.sheetId) {
-        sheetStore.updateSheetId(selected.value)
-        sheetStore.updateSelected(selectedSheet.value)
-
-        queryClient.resetQueries()
-        queryClient.refetchQueries()
-      }
-    }
-
-    const { isOpen } = toRefs(props)
-
-    const disableSearchShortcut = inject('disableSearchShortcut')
-    const enableSearchShortcut = inject('enableSearchShortcut')
-
-    watch(isOpen, newIsOpen => {
-      if (newIsOpen) {
-        selected.value = sheetStore.sheetId
-      }
-
-      newIsOpen ? disableSearchShortcut() : enableSearchShortcut()
-    })
-
-    return {
-      t,
-      d,
-      closeDialog,
-      selected,
-      options,
-      selectCurrent
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dialog {
-  @apply fixed z-20 inset-0 flex flex-col items-center
+  @apply fixed z-30 inset-0 flex flex-col items-center
     sm:py-6 sm:px-6 md:px-0 md:py-12 lg:py-16;
 }
 
diff --git a/src/components/fields/BaseField.vue b/src/components/fields/BaseField.vue
index cf7f716a..a669f619 100644
--- a/src/components/fields/BaseField.vue
+++ b/src/components/fields/BaseField.vue
@@ -1,11 +1,41 @@
+<script setup>
+import { computed, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { nanoid } from 'nanoid'
+
+const props = defineProps({
+  error: String,
+  help: String,
+  label: String,
+  required: Boolean
+})
+
+const inputId = ref(nanoid())
+
+const { error, help } = toRefs(props)
+
+const hasError = computed(() => error.value && error.value.length > 0)
+const hasHelp = computed(() => help.value && help.value.length > 0)
+
+const ariaDescribedBy = computed(() => {
+  const helps = [inputId.value + '-error']
+
+  if (hasHelp.value) {
+    helps.push(inputId.value + '-help')
+  }
+
+  return helps.join(' ')
+})
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <div>
     <label
       v-if="label && label.length > 0"
-      :class="[
-        'label',
-        !required ? 'flex justify-between items-baseline' : ''
-      ]"
+      :class="['label', !required ? 'flex justify-between items-baseline' : '']"
       :for="inputId"
     >
       {{ label }}
@@ -16,15 +46,8 @@
         {{ t('book.form.optional') }}
       </span>
     </label>
-    <slot
-      :input-id="inputId"
-      :aria-described-by="ariaDescribedBy"
-    />
-    <p
-      class="sr-only"
-      aria-hidden="true"
-      :id="inputId + '-error'"
-    >
+    <slot :input-id="inputId" :aria-described-by="ariaDescribedBy" />
+    <p class="sr-only" aria-hidden="true" :id="inputId + '-error'">
       {{ hasError ? error : '' }}
     </p>
     <p
@@ -37,48 +60,3 @@
     </p>
   </div>
 </template>
-
-<script>
-import { computed, ref, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { nanoid } from 'nanoid'
-
-export default {
-  props: {
-    error: String,
-    help: String,
-    label: String,
-    required: Boolean
-  },
-
-  setup (props) {
-    const inputId = ref(nanoid())
-
-    const { error, help } = toRefs(props)
-
-    const hasError = computed(() => error.value && error.value.length > 0)
-    const hasHelp = computed(() => help.value && help.value.length > 0)
-
-    const ariaDescribedBy = computed(() => {
-      const helps = [inputId.value + '-error']
-
-      if (hasHelp.value) {
-        helps.push(inputId.value + '-help')
-      }
-
-      return helps.join(' ')
-    })
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      inputId,
-      hasError,
-      hasHelp,
-      ariaDescribedBy,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/components/fields/DimensionField.vue b/src/components/fields/DimensionField.vue
index db5f1bdc..bf063009 100644
--- a/src/components/fields/DimensionField.vue
+++ b/src/components/fields/DimensionField.vue
@@ -1,3 +1,54 @@
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BaseField from '@/components/fields/BaseField.vue'
+
+const VALIDATOR = /^\d+((,|\.)\d{1,2})?$/
+
+const props = defineProps({
+  error: String,
+  help: String,
+  label: String,
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  required: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { n } = useI18n({ useScope: 'global' })
+const { modelValue: dimensions } = toRefs(props)
+
+const width = ref(
+  dimensions.value?.width ? n(dimensions.value.width, 'dimensions') : ''
+)
+const height = ref(
+  dimensions.value?.height ? n(dimensions.value.height, 'dimensions') : ''
+)
+
+const dimensionsStr = computed(() => `${width.value} × ${height.value}`)
+
+watch(dimensionsStr, () => {
+  emit('update:modelValue', {
+    width: width.value.match(VALIDATOR)
+      ? parseFloat(width.value.replace(',', '.'))
+      : NaN,
+    height: height.value.match(VALIDATOR)
+      ? parseFloat(height.value.replace(',', '.'))
+      : NaN
+  })
+})
+
+const heightInput = ref(null)
+
+function focusHeight() {
+  heightInput.value?.select()
+}
+</script>
+
 <template>
   <BaseField
     :label="label"
@@ -15,7 +66,7 @@
         placeholder="0.0"
         v-model="width"
         @keydown.x.prevent="focusHeight()"
-      >
+      />
       <span class="symbol">×</span>
       <input
         ref="heightInput"
@@ -24,71 +75,12 @@
         inputmode="decimal"
         placeholder="0.0"
         v-model="height"
-      >
+      />
       <span class="symbol cm">cm</span>
     </div>
   </BaseField>
 </template>
 
-<script>
-import { computed, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import BaseField from '@/components/fields/BaseField.vue'
-
-const VALIDATOR = /^\d+((,|\.)\d{1,2})?$/
-
-export default {
-  components: { BaseField },
-
-  props: {
-    error: String,
-    help: String,
-    label: String,
-    modelValue: {
-      type: Object,
-      required: true
-    },
-    required: Boolean
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { n } = useI18n({ useScope: 'global' })
-    const { modelValue: dimensions } = toRefs(props)
-
-    const width = ref(
-      dimensions.value?.width ? n(dimensions.value.width, 'dimensions') : ''
-    )
-    const height = ref(
-      dimensions.value?.height ? n(dimensions.value.height, 'dimensions') : ''
-    )
-
-    const dimensionsStr = computed(() => `${width.value} × ${height.value}`)
-
-    watch(dimensionsStr, () => {
-      context.emit('update:modelValue', {
-        width: width.value.match(VALIDATOR)
-          ? parseFloat(width.value.replace(',', '.'))
-          : NaN,
-        height: height.value.match(VALIDATOR)
-          ? parseFloat(height.value.replace(',', '.'))
-          : NaN
-      })
-    })
-
-    const heightInput = ref(null)
-
-    function focusHeight () {
-      heightInput.value?.select()
-    }
-
-    return { width, height, heightInput, focusHeight }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .dimension-field {
   @apply flex w-full
diff --git a/src/components/fields/MarkdownField.vue b/src/components/fields/MarkdownField.vue
index 08f1a582..39548461 100644
--- a/src/components/fields/MarkdownField.vue
+++ b/src/components/fields/MarkdownField.vue
@@ -1,3 +1,63 @@
+<script setup>
+import { computed, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import useMarkdown from '@/composables/useMarkdown'
+
+import { Tab, TabGroup, TabList, TabPanels, TabPanel } from '@headlessui/vue'
+
+import BaseField from './BaseField.vue'
+
+const props = defineProps({
+  error: String,
+  inputClass: String,
+  inputMode: String,
+  inputType: {
+    type: String,
+    default: 'text'
+  },
+  label: String,
+  markdownOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  modelValue: {
+    type: String,
+    required: true
+  },
+  placeholder: String,
+  required: Boolean
+})
+
+defineEmits(['update:modelValue'])
+
+const { error, help, list, markdownOptions, modelValue } = toRefs(props)
+
+const hasError = computed(() => error.value && error.value.length > 0)
+const hasHelp = computed(() => help.value && help.value.length > 0)
+const hasList = computed(() => list.value && list.value.length > 0)
+
+const characterCount = computed(() => modelValue.value.length)
+
+const { renderMarkdown } = useMarkdown(markdownOptions.value)
+
+const markdownContent = ref(renderMarkdown(modelValue.value))
+
+const currentTab = ref(0)
+
+function changedTab(index) {
+  currentTab.value = index
+
+  if (index === 1) {
+    markdownContent.value = renderMarkdown(modelValue.value)
+  }
+}
+
+const hasFocus = ref(false)
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <BaseField
     :label="label"
@@ -59,10 +119,7 @@
           </a>
           <Tab class="tab has-ring-focus shrink-0">Editor</Tab>
           <Tab class="tab has-ring-focus shrink-0">Visualização</Tab>
-          <span
-            v-if="characterCount > 0"
-            class="characters flex-grow"
-          >
+          <span v-if="characterCount > 0" class="characters flex-grow">
             {{ characterCount }}
           </span>
         </TabList>
@@ -71,97 +128,6 @@
   </BaseField>
 </template>
 
-<script>
-import { computed, ref, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanels,
-  TabPanel
-} from '@headlessui/vue'
-
-import BaseField from './BaseField.vue'
-
-import useMarkdown from '@/composables/useMarkdown'
-
-export default {
-  components: {
-    BaseField,
-    Tab,
-    TabGroup,
-    TabList,
-    TabPanels,
-    TabPanel
-  },
-
-  props: {
-    error: String,
-    inputClass: String,
-    inputMode: String,
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    label: String,
-    markdownOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    modelValue: {
-      type: String,
-      required: true
-    },
-    placeholder: String,
-    required: Boolean
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props) {
-    const { error, help, list, markdownOptions, modelValue } = toRefs(props)
-
-    const hasError = computed(() => error.value && error.value.length > 0)
-    const hasHelp = computed(() => help.value && help.value.length > 0)
-    const hasList = computed(() => list.value && list.value.length > 0)
-
-    const characterCount = computed(() => modelValue.value.length)
-
-    const { renderMarkdown } = useMarkdown(markdownOptions.value)
-
-    const markdownContent = ref(renderMarkdown(modelValue.value))
-
-    const currentTab = ref(0)
-
-    function changedTab (index) {
-      currentTab.value = index
-
-      if (index === 1) {
-        markdownContent.value = renderMarkdown(modelValue.value)
-      }
-    }
-
-    const hasFocus = ref(false)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      hasError,
-      hasHelp,
-      hasList,
-      characterCount,
-      markdownContent,
-      changedTab,
-      hasFocus,
-      currentTab,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .markdown-editor {
   @apply rounded-md shadow-sm
@@ -199,7 +165,7 @@ export default {
     border-t-2 border-transparent -mt-px;
 }
 
-.markdown-editor:not(.has-focus) .tab:not([aria-selected="true"]):hover {
+.markdown-editor:not(.has-focus) .tab:not([aria-selected='true']):hover {
   @apply border-gray-300 dark:border-gray-400;
 }
 
@@ -207,7 +173,7 @@ export default {
   @apply text-gray-800 dark:text-gray-300;
 }
 
-.tab[aria-selected="true"] {
+.tab[aria-selected='true'] {
   @apply border-primary-600 dark:border-primary-400
     text-primary-600 dark:text-gray-100;
 }
diff --git a/src/components/fields/MonetaryField.vue b/src/components/fields/MonetaryField.vue
index c1b65c67..a2ff2fa4 100644
--- a/src/components/fields/MonetaryField.vue
+++ b/src/components/fields/MonetaryField.vue
@@ -1,3 +1,100 @@
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { decimalComma } from '@/util/validators'
+
+import BaseField from '@/components/fields/BaseField.vue'
+
+const props = defineProps({
+  base: Number,
+  error: String,
+  help: String,
+  label: String,
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  placeholder: String,
+  required: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t, n, locale } = useI18n({ useScope: 'global' })
+const { base, modelValue: monetaryValue } = toRefs(props)
+
+const DEFAULT_CURRENCIES = ['BRL', 'EUR', 'JPY', 'USD']
+
+const currencies = computed(() => {
+  const options = DEFAULT_CURRENCIES.slice()
+
+  if (currency.value.length === 3 && !options.includes(currency.value)) {
+    options.push(currency.value)
+  }
+
+  return options.sort((a, b) => a.localeCompare(b, locale.value))
+})
+
+const currency = ref(monetaryValue.value?.currency || 'BRL')
+const value = ref(
+  monetaryValue.value?.value ? n(monetaryValue.value.value, 'decimal') : ''
+)
+
+const validator = decimalComma(2)
+
+function emitValues() {
+  emit('update:modelValue', {
+    currency: currency.value,
+    value: validator(value.value)
+      ? parseFloat(value.value.replace(',', '.'))
+      : null,
+    valueStr: value.value
+  })
+}
+
+watch(currency, () => emitValues())
+watch(value, () => emitValues())
+
+function currencyName(currencyCode) {
+  const displayNames = new Intl.DisplayNames([locale.value], {
+    type: 'currency'
+  })
+
+  return displayNames.of(currencyCode)
+}
+
+const currencySymbol = computed(() => {
+  if (currency.value.length < 3) {
+    return ''
+  }
+
+  const formatter = new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: currency.value
+  })
+
+  const parts = formatter.formatToParts(0)
+
+  return parts[0].value
+})
+
+function handlePercent() {
+  if (!base.value || isNaN(base.value) || !validator(value.value)) {
+    return
+  }
+
+  const percent = parseFloat(value.value.replace(',', '.'))
+  value.value = n(base.value - (base.value * percent) / 100.0, 'decimal')
+}
+
+const currencyInput = ref(null)
+
+function focusCurrency() {
+  currencyInput.value?.focus()
+}
+</script>
+
 <template>
   <BaseField
     :label="label"
@@ -20,12 +117,8 @@
         placeholder="BRL"
         :list="inputId + '-datalist'"
         ref="currencyInput"
-      >
-      <span
-        aria-hidden="true"
-        class="currency-symbol"
-        @click="focusCurrency"
-      >
+      />
+      <span aria-hidden="true" class="currency-symbol" @click="focusCurrency">
         {{ currencySymbol }}
       </span>
       <datalist :id="inputId + '-datalist'">
@@ -44,126 +137,11 @@
         :placeholder="placeholder"
         v-model="value"
         @keydown.%.prevent="handlePercent"
-      >
+      />
     </div>
   </BaseField>
 </template>
 
-<script>
-import { computed, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import BaseField from '@/components/fields/BaseField.vue'
-
-import { decimalComma } from '@/util/validators'
-
-export default {
-  components: { BaseField },
-
-  props: {
-    base: Number,
-    error: String,
-    help: String,
-    label: String,
-    modelValue: {
-      type: Object,
-      required: true
-    },
-    placeholder: String,
-    required: Boolean
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { t, n, locale } = useI18n({ useScope: 'global' })
-    const { base, modelValue: monetaryValue } = toRefs(props)
-
-    const DEFAULT_CURRENCIES = ['BRL', 'EUR', 'JPY', 'USD']
-
-    const currencies = computed(() => {
-      const options = DEFAULT_CURRENCIES.slice()
-
-      if (currency.value.length === 3 && !options.includes(currency.value)) {
-        options.push(currency.value)
-      }
-
-      return options.sort((a, b) => a.localeCompare(b, locale.value))
-    })
-
-    const currency = ref(monetaryValue.value?.currency || 'BRL')
-    const value = ref(
-      monetaryValue.value?.value ? n(monetaryValue.value.value, 'decimal') : ''
-    )
-
-    const validator = decimalComma(2)
-
-    function emitValues () {
-      context.emit('update:modelValue', {
-        currency: currency.value,
-        value: validator(value.value)
-          ? parseFloat(value.value.replace(',', '.'))
-          : null,
-        valueStr: value.value
-      })
-    }
-
-    watch(currency, () => emitValues())
-    watch(value, () => emitValues())
-
-    function currencyName (currencyCode) {
-      const displayNames = new Intl.DisplayNames([locale.value], {
-        type: 'currency'
-      })
-
-      return displayNames.of(currencyCode)
-    }
-
-    const currencySymbol = computed(() => {
-      if (currency.value.length < 3) {
-        return ''
-      }
-
-      const formatter = new Intl.NumberFormat(locale.value, {
-        style: 'currency',
-        currency: currency.value
-      })
-
-      const parts = formatter.formatToParts(0)
-
-      return parts[0].value
-    })
-
-    function handlePercent () {
-      if (!base.value || isNaN(base.value) || !validator(value.value)) {
-        return
-      }
-
-      const percent = parseFloat(value.value.replace(',', '.'))
-      value.value = n(base.value - base.value * percent / 100.0, 'decimal')
-    }
-
-    const currencyInput = ref(null)
-
-    function focusCurrency () {
-      currencyInput.value?.focus()
-    }
-
-    return {
-      currencies,
-      currency,
-      value,
-      currencyName,
-      currencySymbol,
-      t,
-      handlePercent,
-      currencyInput,
-      focusCurrency
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .monetary-field {
   @apply flex w-full relative
diff --git a/src/components/fields/TagField.vue b/src/components/fields/TagField.vue
index 7a255c5a..fe29ea90 100644
--- a/src/components/fields/TagField.vue
+++ b/src/components/fields/TagField.vue
@@ -1,3 +1,87 @@
+<script setup>
+import { computed, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { MenuIcon, PlusIcon, XIcon } from '@heroicons/vue/solid'
+
+import Draggable from 'vuedraggable'
+
+import BaseField from './BaseField.vue'
+
+const props = defineProps({
+  breakCharacter: {
+    type: String,
+    default: ','
+  },
+  error: String,
+  inputClass: String,
+  inputMode: String,
+  inputType: {
+    type: String,
+    default: 'text'
+  },
+  label: String,
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  placeholder: String,
+  prefixClass: String,
+  removeAction: {
+    type: String,
+    required: true
+  },
+  required: Boolean,
+  tagClass: String
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { breakCharacter, error, modelValue, help, list } = toRefs(props)
+
+const hasError = computed(() => error.value && error.value.length > 0)
+const hasHelp = computed(() => help.value && help.value.length > 0)
+const hasList = computed(() => list.value && list.value.length > 0)
+
+const tempTag = ref('')
+
+function addTag(onInput) {
+  const newTag = onInput === true ? tempTag.value.slice(0, -1) : tempTag.value
+
+  if (
+    newTag.length > 0 &&
+    newTag.trim().length > 0 &&
+    !modelValue.value.includes(newTag.trim())
+  ) {
+    emit('update:modelValue', modelValue.value.concat([newTag.trim()]))
+  }
+
+  tempTag.value = ''
+}
+
+function flushTag(event) {
+  const lastCharacter = event.target.value.slice(-1)
+
+  if (lastCharacter === breakCharacter.value) {
+    event.preventDefault()
+    addTag(true)
+  }
+}
+
+function removeTag(i) {
+  const newModelValue = modelValue.value.slice()
+  newModelValue.splice(i, 1)
+
+  emit('update:modelValue', newModelValue)
+}
+
+function handleDragAndDrop(newTags) {
+  emit('update:modelValue', newTags)
+}
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <BaseField
     class="tag-field"
@@ -26,7 +110,7 @@
           :aria-invalid="hasError"
           @keydown.enter.prevent="addTag"
           @input="flushTag"
-        >
+        />
       </div>
 
       <button
@@ -51,17 +135,13 @@
       drag-class="cursor-grabbing"
       handle=".handle"
       :modelValue="modelValue"
-      :item-key="tag => tag"
+      :item-key="(tag) => tag"
       :disabled="modelValue.length === 1"
       @update:modelValue="handleDragAndDrop"
     >
       <template #item="{ element: tag, index }">
         <li :class="['tag', tagClass]">
-          <span
-            v-if="modelValue.length > 1"
-            class="handle"
-            aria-hidden="true"
-          >
+          <span v-if="modelValue.length > 1" class="handle" aria-hidden="true">
             <MenuIcon class="w-3 h-3" />
           </span>
           <span>{{ tag }}</span>
@@ -84,117 +164,6 @@
   </BaseField>
 </template>
 
-<script>
-import { computed, ref, toRefs } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { MenuIcon, PlusIcon, XIcon } from '@heroicons/vue/solid'
-
-import Draggable from 'vuedraggable'
-
-import BaseField from './BaseField.vue'
-
-export default {
-  components: {
-    BaseField,
-    Draggable,
-    MenuIcon,
-    PlusIcon,
-    XIcon
-  },
-
-  props: {
-    breakCharacter: {
-      type: String,
-      default: ','
-    },
-    error: String,
-    inputClass: String,
-    inputMode: String,
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    label: String,
-    modelValue: {
-      type: Array,
-      required: true
-    },
-    placeholder: String,
-    prefixClass: String,
-    removeAction: {
-      type: String,
-      required: true
-    },
-    required: Boolean,
-    tagClass: String
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props, context) {
-    const { breakCharacter, error, modelValue, help, list } = toRefs(props)
-
-    const hasError = computed(() => error.value && error.value.length > 0)
-    const hasHelp = computed(() => help.value && help.value.length > 0)
-    const hasList = computed(() => list.value && list.value.length > 0)
-
-    const tempTag = ref('')
-
-    function addTag (onInput) {
-      const newTag = onInput === true
-        ? tempTag.value.slice(0, -1)
-        : tempTag.value
-
-      if (newTag.length > 0 &&
-          newTag.trim().length > 0 &&
-          !modelValue.value.includes(newTag.trim())) {
-        context.emit(
-          'update:modelValue',
-          modelValue.value.concat([newTag.trim()])
-        )
-      }
-
-      tempTag.value = ''
-    }
-
-    function flushTag (event) {
-      const lastCharacter = event.target.value.slice(-1)
-
-      if (lastCharacter === breakCharacter.value) {
-        event.preventDefault()
-        addTag(true)
-      }
-    }
-
-    function removeTag (i) {
-      const newModelValue = modelValue.value.slice()
-      newModelValue.splice(i, 1)
-
-      context.emit('update:modelValue', newModelValue)
-    }
-
-    function handleDragAndDrop (newTags) {
-      context.emit('update:modelValue', newTags)
-    }
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      hasError,
-      hasHelp,
-      hasList,
-      tempTag,
-      addTag,
-      flushTag,
-      removeTag,
-      handleDragAndDrop,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .prefix {
   @apply text-gray-400 dark:text-gray-500;
diff --git a/src/components/fields/TextField.vue b/src/components/fields/TextField.vue
index 10d5b10a..b17e95ff 100644
--- a/src/components/fields/TextField.vue
+++ b/src/components/fields/TextField.vue
@@ -1,3 +1,44 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+
+import { SelectorIcon } from '@heroicons/vue/solid'
+
+import BaseField from './BaseField.vue'
+
+const props = defineProps({
+  error: String,
+  help: String,
+  inputClass: String,
+  inputMode: String,
+  inputType: {
+    type: String,
+    default: 'text'
+  },
+  label: String,
+  list: Array,
+  listText: Function,
+  listValue: Function,
+  max: String,
+  modelValue: {
+    type: String,
+    required: true
+  },
+  multiline: Boolean,
+  placeholder: String,
+  prefixClass: String,
+  required: Boolean,
+  suffixClass: String
+})
+
+defineEmits(['update:modelValue'])
+
+const { error, help, list } = toRefs(props)
+
+const hasError = computed(() => error.value && error.value.length > 0)
+const hasHelp = computed(() => help.value && help.value.length > 0)
+const hasList = computed(() => list.value && list.value.length > 0)
+</script>
+
 <template>
   <BaseField
     :label="label"
@@ -9,10 +50,7 @@
     <div class="group relative field-wrapper">
       <div
         v-if="$slots.prefix"
-        :class="[
-          'absolute inset-y-0 left-0 flex items-center',
-          prefixClass
-        ]"
+        :class="['absolute inset-y-0 left-0 flex items-center', prefixClass]"
       >
         <slot name="prefix" />
       </div>
@@ -42,7 +80,7 @@
         :inputmode="inputMode"
         :max="max"
         @input="$emit('update:modelValue', $event.target.value)"
-      >
+      />
       <template v-if="hasList">
         <datalist :id="inputId + '-list'">
           <option
@@ -59,10 +97,7 @@
       </template>
       <div
         v-if="$slots.suffix"
-        :class="[
-          'absolute inset-y-0 right-0 flex items-center',
-          suffixClass
-        ]"
+        :class="['absolute inset-y-0 right-0 flex items-center', suffixClass]"
       >
         <slot name="suffix" />
       </div>
@@ -70,59 +105,6 @@
   </BaseField>
 </template>
 
-<script>
-import { computed, toRefs } from 'vue'
-
-import { SelectorIcon } from '@heroicons/vue/solid'
-
-import BaseField from './BaseField.vue'
-
-export default {
-  components: { BaseField, SelectorIcon },
-
-  props: {
-    error: String,
-    help: String,
-    inputClass: String,
-    inputMode: String,
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    label: String,
-    list: Array,
-    listText: Function,
-    listValue: Function,
-    max: String,
-    modelValue: {
-      type: String,
-      required: true
-    },
-    multiline: Boolean,
-    placeholder: String,
-    prefixClass: String,
-    required: Boolean,
-    suffixClass: String
-  },
-
-  emits: ['update:modelValue'],
-
-  setup (props) {
-    const { error, help, list } = toRefs(props)
-
-    const hasError = computed(() => error.value && error.value.length > 0)
-    const hasHelp = computed(() => help.value && help.value.length > 0)
-    const hasList = computed(() => list.value && list.value.length > 0)
-
-    return {
-      hasError,
-      hasHelp,
-      hasList
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .selector-icon {
   @apply absolute inset-y-0 right-2 pl-3 text-gray-500
diff --git a/src/components/icons/AmazonIcon.vue b/src/components/icons/AmazonIcon.vue
index 2d5e4afd..9ef64ca0 100644
--- a/src/components/icons/AmazonIcon.vue
+++ b/src/components/icons/AmazonIcon.vue
@@ -1,7 +1,19 @@
 <template>
-  <svg version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
-    <path d="m0.79375 0h2.6458c0.43974 0 0.79375 0.35401 0.79375 0.79375v2.6458c0 0.43974-0.35401 0.79375-0.79375 0.79375h-2.6458c-0.43974 0-0.79375-0.35401-0.79375-0.79375v-2.6458c0-0.43974 0.35401-0.79375 0.79375-0.79375z" fill="#fff"></path>
-    <path d="m3.5367 3.0639c-0.12417 0.00169-0.27072 0.029406-0.38189 0.10749-0.034253 0.023977-0.028167 0.056862 0.00982 0.052193 0.12533-0.014946 0.40369-0.048332 0.4532 0.015502 0.049667 0.063834-0.054938 0.32594-0.1018 0.44287-0.014169 0.035343 0.015986 0.049673 0.048059 0.022738 0.20847-0.17438 0.26228-0.53959 0.21962-0.59221-0.021175-0.026157-0.12285-0.050269-0.24701-0.048576zm-3.1957 0.026872c-0.025449 0.00423-0.036676 0.042787-0.009818 0.07338 0.45541 0.51784 1.0565 0.82941 1.7244 0.82941 0.47658 0 1.0295-0.18917 1.4113-0.54415 0.063211-0.058697 0.00932-0.14722-0.055294-0.11265-0.42785 0.22918-0.89302 0.33951-1.3162 0.33951-0.62698 0-1.2344-0.21659-1.7255-0.57671-0.010782-0.00786-0.020456-0.010197-0.028939-0.00878z" fill="#ffa700"></path>
-    <path d="m2.0944 0.25683c-0.46802 1e-8 -0.99058 0.17488-1.1002 0.75344-0.011834 0.061343 0.033056 0.094124 0.073381 0.10284l0.47646 0.051676c0.044841-0.00234 0.077373-0.046579 0.085783-0.09095 0.040948-0.19913 0.20771-0.29507 0.39532-0.29507 0.10136 0 0.21653 0.037493 0.27647 0.12764 0.068981 0.10151 0.059428 0.23985 0.059428 0.35708v0.064079c-0.28523 0.031762-0.65799 0.053138-0.92501 0.17053-0.30812 0.13312-0.52452 0.40421-0.52452 0.80357 0 0.5113 0.32224 0.76688 0.73639 0.76688 0.34985 0 0.54135-0.082489 0.81132-0.3576 0.08968 0.12923 0.11836 0.19238 0.28215 0.32815 0.036277 0.019772 0.083732 0.017539 0.11627-0.011885l0.00103 0.00156c0.097933-0.087499 0.2765-0.24288 0.37724-0.32711 0.040017-0.032541 0.033312-0.086058 0.001561-0.13074-0.089681-0.1244-0.18552-0.2252-0.18552-0.45579v-0.76637c0-0.32478 0.022418-0.6234-0.21704-0.84698-0.18856-0.18123-0.50123-0.24495-0.74053-0.24495zm0.26717 1.4645v0.10645c0 0.19182 0.00455 0.35145-0.091984 0.52193-0.078159 0.13872-0.20276 0.22376-0.34055 0.22376-0.18901 0-0.29921-0.14409-0.29921-0.35708 0-0.41913 0.37598-0.49506 0.73174-0.49506z"></path>
+  <svg
+    version="1.1"
+    viewBox="0 0 4.2333 4.2333"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m0.79375 0h2.6458c0.43974 0 0.79375 0.35401 0.79375 0.79375v2.6458c0 0.43974-0.35401 0.79375-0.79375 0.79375h-2.6458c-0.43974 0-0.79375-0.35401-0.79375-0.79375v-2.6458c0-0.43974 0.35401-0.79375 0.79375-0.79375z"
+      fill="#fff"
+    />
+    <path
+      d="m3.5367 3.0639c-0.12417 0.00169-0.27072 0.029406-0.38189 0.10749-0.034253 0.023977-0.028167 0.056862 0.00982 0.052193 0.12533-0.014946 0.40369-0.048332 0.4532 0.015502 0.049667 0.063834-0.054938 0.32594-0.1018 0.44287-0.014169 0.035343 0.015986 0.049673 0.048059 0.022738 0.20847-0.17438 0.26228-0.53959 0.21962-0.59221-0.021175-0.026157-0.12285-0.050269-0.24701-0.048576zm-3.1957 0.026872c-0.025449 0.00423-0.036676 0.042787-0.009818 0.07338 0.45541 0.51784 1.0565 0.82941 1.7244 0.82941 0.47658 0 1.0295-0.18917 1.4113-0.54415 0.063211-0.058697 0.00932-0.14722-0.055294-0.11265-0.42785 0.22918-0.89302 0.33951-1.3162 0.33951-0.62698 0-1.2344-0.21659-1.7255-0.57671-0.010782-0.00786-0.020456-0.010197-0.028939-0.00878z"
+      fill="#ffa700"
+    />
+    <path
+      d="m2.0944 0.25683c-0.46802 1e-8 -0.99058 0.17488-1.1002 0.75344-0.011834 0.061343 0.033056 0.094124 0.073381 0.10284l0.47646 0.051676c0.044841-0.00234 0.077373-0.046579 0.085783-0.09095 0.040948-0.19913 0.20771-0.29507 0.39532-0.29507 0.10136 0 0.21653 0.037493 0.27647 0.12764 0.068981 0.10151 0.059428 0.23985 0.059428 0.35708v0.064079c-0.28523 0.031762-0.65799 0.053138-0.92501 0.17053-0.30812 0.13312-0.52452 0.40421-0.52452 0.80357 0 0.5113 0.32224 0.76688 0.73639 0.76688 0.34985 0 0.54135-0.082489 0.81132-0.3576 0.08968 0.12923 0.11836 0.19238 0.28215 0.32815 0.036277 0.019772 0.083732 0.017539 0.11627-0.011885l0.00103 0.00156c0.097933-0.087499 0.2765-0.24288 0.37724-0.32711 0.040017-0.032541 0.033312-0.086058 0.001561-0.13074-0.089681-0.1244-0.18552-0.2252-0.18552-0.45579v-0.76637c0-0.32478 0.022418-0.6234-0.21704-0.84698-0.18856-0.18123-0.50123-0.24495-0.74053-0.24495zm0.26717 1.4645v0.10645c0 0.19182 0.00455 0.35145-0.091984 0.52193-0.078159 0.13872-0.20276 0.22376-0.34055 0.22376-0.18901 0-0.29921-0.14409-0.29921-0.35708 0-0.41913 0.37598-0.49506 0.73174-0.49506z"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/GitHubIcon.vue b/src/components/icons/GitHubIcon.vue
index 76c40291..3e1f645d 100644
--- a/src/components/icons/GitHubIcon.vue
+++ b/src/components/icons/GitHubIcon.vue
@@ -1,7 +1,12 @@
 <template>
   <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
     <g fill="currentColor">
-      <path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/>
+      <path
+        d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"
+      />
+      <path
+        d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"
+      />
     </g>
   </svg>
 </template>
diff --git a/src/components/icons/GoogleIcon.vue b/src/components/icons/GoogleIcon.vue
index c49f7ed2..7aa7c0b9 100644
--- a/src/components/icons/GoogleIcon.vue
+++ b/src/components/icons/GoogleIcon.vue
@@ -1,11 +1,28 @@
 <template>
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true">
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+    aria-hidden="true"
+  >
     <g>
-      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
-      <path fill="none" d="M0 0h48v48H0z"></path>
+      <path
+        fill="#EA4335"
+        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+      />
+      <path
+        fill="#4285F4"
+        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+      />
+      <path
+        fill="#34A853"
+        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+      />
+      <path fill="none" d="M0 0h48v48H0z" />
     </g>
   </svg>
 </template>
diff --git a/src/components/icons/LoadingSpinIcon.vue b/src/components/icons/LoadingSpinIcon.vue
index d286cd41..833368c4 100644
--- a/src/components/icons/LoadingSpinIcon.vue
+++ b/src/components/icons/LoadingSpinIcon.vue
@@ -1,6 +1,17 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/NewPopIcon.vue b/src/components/icons/NewPopIcon.vue
index f74802bc..ea32e6bd 100644
--- a/src/components/icons/NewPopIcon.vue
+++ b/src/components/icons/NewPopIcon.vue
@@ -1,9 +1,36 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
-    <path d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z" fill="#fff"/>
+    <path
+      d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z"
+      fill="#fff"
+    />
     <g fill-rule="evenodd">
-      <path d="M186.55 485.306h97.909c-.884-1.199-9.819-7.099-12.718-9.98-4.931-4.897-6.486-7.413-9.3-14.138-4.157-9.929-2.278-30.035-2.278-43.705v-45.975c.051-13.925-9.606-24.11-22.766-24.11h-4.557c-6.486 0-11.91 3.936-15.37 7.345-5.186 5.101-5.891 7.762-5.883 17.53v45.966c0 13.347 1.258 33.963-2.78 43.203-2.907 6.656-4.608 8.612-9.071 13.611-3.452 3.894-12.063 8.739-13.185 10.253zm277.022-124.34v1.505c0 7.209 5.577 10.55 12.905 10.55h3.035c14.24 0 43.254-16.229 43.254-28.632 0-7.804-10.363-14.325-18.966-14.325h-3.035c-14.767.009-37.193 17.037-37.193 30.902zm301.413 114.716l-16.05 9.623 31.14-.017z"/>
-      <path fill="#fff" d="M397.543 675.964V532.785c0-16.969 12.514-29.397 29.601-29.397h147.242c16.569 0 31.115 11.213 31.115 26.379v146.945c0 12.658-12.896 26.379-25.036 26.379H422.596c-12.565 0-25.053-13.993-25.053-27.128zm66.029-314.998c0-13.857 22.426-30.894 37.193-30.894h3.035c8.612 0 18.966 6.52 18.966 14.325 0 12.403-29.015 28.632-43.254 28.632h-3.035c-7.328 0-12.905-3.35-12.905-10.55zm-100.179 15.073v14.325c0 21.865 23.191 52.504 35.467 63.496 7.694 6.886 20.548 15.379 30.656 19.289 6.393 2.482 11.443 4.191 18.337 6.656 4.446 1.598 16.824 3.817 19.51 5.5-21.347 0-48.083-2.508-62.748 4.769-13.466 6.682-26.048 21.559-26.048 41.206v144.692c0 23.634 20.369 45.21 44.02 45.21h159.373c23.132 0 42.506-22.426 42.506-46.723V530.524c0-17.173-9.819-29.278-19.85-36.802-13.236-9.929-26.226-8.416-48.449-8.416 1.054-.663 17.742-5.5 20.769-6.495 7.005-2.304 12.905-5.024 18.958-8.314 8.306-4.523 24.781-18.133 24.781-29.652v-5.288c0-13.245-25.929-29.38-39.48-29.38h-11.383c-23.14 0-45.082 25.623-67.543 25.623h-8.348c-5.322 0-20.497-4.752-20.497-9.793 0-8.688 11.341-8.79 19.57-9.963 7.566-1.08 17.411-3.196 24.611-4.956 16.824-4.089 30.775-7.532 46.425-12.684 27.204-8.969 62.705-21.134 62.705-56.049 0-20.828-19.842-39.259-34.405-46.459-14.197-7.039-45.048-15.336-65.774-15.336h-23.523c-61.966.009-139.642 42.124-139.642 99.482z"/><path fill="#a5a7aa" d="M812.694 575.725l-125.98.757H813.45v-18.83H688.227l124.467.748z"/><path d="M473.442 576.482v54.264h56.168v-54.264z"/><path fill="#fff" d="M473.442 576.482h56.168v54.264h-56.168zm-18.975 72.346h94.109v-91.176h-94.109z"/><path d="M133.425 529.767v.757c0 14.197 12.42 27.128 26.566 27.128h124.467v18.83H157.713c-12.803 0-24.288 14.401-24.288 28.649v72.337c0 12.021 13.177 25.623 25.045 25.623h5.313c14.767 0 26.558-12.854 26.558-27.884v-44.453h125.232c12.641 0 25.801-14.155 25.801-27.119v-73.859c0-15.158-14.546-26.379-31.115-26.379H164.548c-16.577-.009-31.123 11.213-31.123 26.371zm321.042 27.884h94.109v91.176h-94.109zm-56.925 118.312c0 13.134 12.488 27.119 25.053 27.119h157.869c12.148 0 25.036-13.713 25.036-26.379V529.767c0-15.158-14.546-26.379-31.115-26.379H427.144c-17.088 0-29.601 12.429-29.601 29.397zm290.685-118.312h125.215v18.83H686.713c-11.953 0-25.045 13.721-25.045 25.623v73.859c0 13.398 12.446 27.119 25.045 27.119h8.34c11.978 0 23.532-14.214 23.532-28.632v-43.714h119.919c16.552 0 31.106-11.222 31.106-26.379v-74.599c0-15.158-14.554-26.379-31.106-26.379h-145.72c-14.716 0-30.367 9.81-30.367 23.353v7.549c0 11.672 13.551 23.37 25.81 23.37z"/><path d="M133.425 529.767c0-15.158 14.546-26.379 31.123-26.379h145.72c16.569 0 31.115 11.213 31.115 26.379v73.859c0 12.964-13.16 27.119-25.801 27.119H190.35v44.453c0 15.039-11.791 27.884-26.558 27.884h-5.322c-11.868 0-25.045-13.602-25.045-25.623V605.13c0-14.248 11.494-28.649 24.288-28.649h126.745v-18.83H159.992c-14.146 0-26.566-12.93-26.566-27.128zm53.124-44.462c1.122-1.513 9.734-6.359 13.202-10.253 4.463-4.999 6.163-6.954 9.071-13.611 4.038-9.241 2.78-29.856 2.78-43.203v-45.966c0-9.759.706-12.42 5.883-17.53 3.46-3.409 8.884-7.345 15.37-7.345h4.557c13.151 0 22.817 10.185 22.766 24.11v45.975c0 13.67-1.887 33.776 2.278 43.705 2.814 6.725 4.37 9.232 9.3 14.138 2.899 2.873 11.834 8.782 12.718 9.98zm-72.091-168.053v132.637c0 16.008 17.113 35.765 31.115 36.921v1.513c-11.375.944-30.358 22.29-30.358 34.66v12.811c0 18.252 12.488 23.174 18.21 31.65-9.402 6.257-18.966 19.383-18.966 34.66v74.607c0 21.729 20.845 44.462 40.985 44.462h11.383c22.741 0 42.506-21.95 42.506-45.21v-27.136h103.222c26.082 0 47.811-19.799 47.811-45.201v-73.102c0-20.386-16.169-39.148-32.628-42.957 5.364-4.616 14.75-6.546 20.191-13.866 4.548-6.121 10.168-13.517 10.168-23.812V347.398c0-21.177-14.52-39.31-26.702-48.848-11.783-9.224-35.476-20.48-56.023-20.48H257.91c-13.9 0-54.944 13.007-56.916 20.352-6.214-.519-34.498-20.352-40.228-20.352h-.774c-22.962.009-45.533 17.589-45.533 39.182zm572.255 259.23l125.98-.757v-17.326l-124.467-.748c-12.259 0-25.81-11.698-25.81-23.361v-7.549c0-13.543 15.651-23.353 30.367-23.353h145.72c16.552 0 31.106 11.213 31.106 26.379v74.599c0 15.149-14.554 26.379-31.106 26.379H718.585v43.714c0 14.418-11.545 28.632-23.532 28.632h-8.34c-12.599 0-25.045-13.721-25.045-27.119v-73.859c-.009-11.91 13.083-25.631 25.045-25.631zm78.271-100.8l15.09 9.606-31.14.009zM635.859 303.701v103.988c0 16.229 9.334 37.312 16.093 47.335 4.786 7.116 8.918 11.001 14.835 16.918 6.631 6.614 13.696 8.663 19.162 13.373-20.599 1.7-42.498 19.791-42.498 40.704v9.037c0 7.005 3.069 14.571 5.891 19 3.868 6.061 9.759 9.598 12.318 13.39-7.779 5.169-18.218 17.649-18.218 30.146v83.653c0 18.737 22.231 39.939 40.22 39.939h11.383c22.766 0 42.506-21.806 42.506-45.21v-27.145h107.014c23.625 0 44.02-22.078 44.02-46.723V532.02c0-25.478-20.216-46.723-45.533-46.723 6.087-5.254 12.973-7.209 20.301-14.503 7.133-7.099 10.329-11.018 15.991-19.544 8.297-12.514 14.563-34.889 14.563-55.624v-84.392c0-44.555-53.388-54.213-66.148-12.174-2.822 9.309-1.403 49.97-1.403 64.168 0 20.131 5.271 51.237-15.166 51.237h-.765c-4.608 0-7.252-1.768-9.113-4.514v-90.428c0-18.099-.927-25.563-9.232-36.037-5.857-7.396-19.434-14.061-32.968-10.397-26.915 7.286-25.342 32.628-25.342 65.273v45.21c0 15.362.374 30.894-15.175 30.894h-.757c-19.485 0-15.183-28.632-15.183-48.228 0-14.418 1.666-52.776-.57-63.488-3.264-15.676-14.461-32.092-33.41-30.554-10.916.893-16.135 3.273-22.367 9.462-4.302 4.259-10.448 14.18-10.448 22.044z" fill="#fff"/><path d="M114.459 317.252c0-21.602 22.571-39.174 45.533-39.174h.757c5.738 0 34.014 19.833 40.228 20.352 1.972-7.345 43.016-20.352 56.916-20.352h17.462c20.548 0 44.241 11.256 56.023 20.48 12.182 9.538 26.702 27.672 26.702 48.848v102.491c0 10.295-5.619 17.7-10.168 23.812-5.432 7.32-14.826 9.241-20.191 13.866 16.458 3.809 32.628 22.562 32.628 42.957v73.102c0 25.402-21.729 45.201-47.811 45.201H209.324v27.136c0 23.259-19.765 45.21-42.506 45.21h-11.383c-20.14 0-40.985-22.741-40.985-44.462v-74.607c0-15.277 9.564-28.403 18.966-34.66-5.721-8.476-18.21-13.39-18.21-31.65v-12.811c0-12.369 18.983-33.716 30.358-34.66v-1.513c-14.002-1.156-31.115-20.913-31.115-36.921V317.252zm521.4-13.551c0-7.855 6.146-17.785 10.44-22.044 6.223-6.189 11.451-8.569 22.367-9.462 18.949-1.539 30.146 14.877 33.41 30.554 2.244 10.712.57 49.069.57 63.488 0 19.595-4.302 48.228 15.183 48.228h.757c15.549 0 15.175-15.54 15.175-30.894v-45.21c0-32.636-1.573-57.987 25.342-65.273 13.534-3.664 27.102 3.001 32.968 10.397 8.306 10.474 9.232 17.938 9.232 36.037v90.428c1.87 2.746 4.506 4.514 9.113 4.514h.765c20.437 0 15.166-31.106 15.166-51.237 0-14.189-1.42-54.859 1.403-64.168 12.76-42.047 66.148-32.39 66.148 12.174v84.401c0 20.735-6.265 43.11-14.563 55.624-5.662 8.527-8.858 12.446-15.991 19.544-7.32 7.294-14.214 9.249-20.301 14.503 25.325 0 45.533 21.245 45.533 46.723v70.076c0 24.645-20.386 46.723-44.02 46.723H737.56v27.136c0 23.404-19.74 45.21-42.506 45.21H683.67c-17.989 0-40.22-21.202-40.22-39.939v-83.653c0-12.497 10.44-24.977 18.218-30.146-2.559-3.792-8.45-7.328-12.318-13.39-2.822-4.429-5.891-11.995-5.891-19v-9.037c0-20.913 21.899-38.995 42.498-40.704-5.466-4.71-12.531-6.759-19.162-13.373-5.917-5.908-10.049-9.802-14.835-16.918-6.759-10.023-16.093-31.106-16.093-47.335V303.701zm-272.466 72.337c0-57.358 77.685-99.473 139.65-99.473h23.523c20.726 0 51.577 8.297 65.774 15.336 14.563 7.209 34.405 25.64 34.405 46.459 0 34.915-35.501 47.089-62.705 56.049-15.651 5.152-29.601 8.595-46.425 12.684-7.201 1.76-17.037 3.877-24.611 4.956-8.229 1.173-19.57 1.275-19.57 9.963 0 5.041 15.175 9.793 20.497 9.793h8.348c22.46 0 44.402-25.623 67.543-25.623h11.383c13.551 0 39.48 16.135 39.48 29.38v5.288c0 11.511-16.475 25.13-24.781 29.652-6.061 3.29-11.953 6.01-18.958 8.314-3.026.995-19.714 5.84-20.769 6.495 22.222 0 35.221-1.513 48.449 8.416 10.032 7.524 19.85 19.629 19.85 36.802v143.935c0 24.297-19.374 46.723-42.506 46.723H422.596c-23.659 0-44.02-21.576-44.02-45.21V531.289c0-19.646 12.582-34.524 26.048-41.206 14.665-7.277 41.401-4.769 62.748-4.769-2.686-1.683-15.064-3.911-19.51-5.5l-18.337-6.656c-10.108-3.911-22.97-12.403-30.656-19.289-12.276-10.992-35.467-41.631-35.467-63.496v-14.333zM74.987 703.091c0 43.008 56.108 64.049 101.701 64.049h653.45c38.196 0 94.874-24.458 94.874-58.786V292.386c.009-34.252-52.776-59.526-89.552-59.526H165.305c-39.429 0-90.318 24.866-90.318 63.3z"/>
+      <path
+        d="M186.55 485.306h97.909c-.884-1.199-9.819-7.099-12.718-9.98-4.931-4.897-6.486-7.413-9.3-14.138-4.157-9.929-2.278-30.035-2.278-43.705v-45.975c.051-13.925-9.606-24.11-22.766-24.11h-4.557c-6.486 0-11.91 3.936-15.37 7.345-5.186 5.101-5.891 7.762-5.883 17.53v45.966c0 13.347 1.258 33.963-2.78 43.203-2.907 6.656-4.608 8.612-9.071 13.611-3.452 3.894-12.063 8.739-13.185 10.253zm277.022-124.34v1.505c0 7.209 5.577 10.55 12.905 10.55h3.035c14.24 0 43.254-16.229 43.254-28.632 0-7.804-10.363-14.325-18.966-14.325h-3.035c-14.767.009-37.193 17.037-37.193 30.902zm301.413 114.716l-16.05 9.623 31.14-.017z"
+      />
+      <path
+        fill="#fff"
+        d="M397.543 675.964V532.785c0-16.969 12.514-29.397 29.601-29.397h147.242c16.569 0 31.115 11.213 31.115 26.379v146.945c0 12.658-12.896 26.379-25.036 26.379H422.596c-12.565 0-25.053-13.993-25.053-27.128zm66.029-314.998c0-13.857 22.426-30.894 37.193-30.894h3.035c8.612 0 18.966 6.52 18.966 14.325 0 12.403-29.015 28.632-43.254 28.632h-3.035c-7.328 0-12.905-3.35-12.905-10.55zm-100.179 15.073v14.325c0 21.865 23.191 52.504 35.467 63.496 7.694 6.886 20.548 15.379 30.656 19.289 6.393 2.482 11.443 4.191 18.337 6.656 4.446 1.598 16.824 3.817 19.51 5.5-21.347 0-48.083-2.508-62.748 4.769-13.466 6.682-26.048 21.559-26.048 41.206v144.692c0 23.634 20.369 45.21 44.02 45.21h159.373c23.132 0 42.506-22.426 42.506-46.723V530.524c0-17.173-9.819-29.278-19.85-36.802-13.236-9.929-26.226-8.416-48.449-8.416 1.054-.663 17.742-5.5 20.769-6.495 7.005-2.304 12.905-5.024 18.958-8.314 8.306-4.523 24.781-18.133 24.781-29.652v-5.288c0-13.245-25.929-29.38-39.48-29.38h-11.383c-23.14 0-45.082 25.623-67.543 25.623h-8.348c-5.322 0-20.497-4.752-20.497-9.793 0-8.688 11.341-8.79 19.57-9.963 7.566-1.08 17.411-3.196 24.611-4.956 16.824-4.089 30.775-7.532 46.425-12.684 27.204-8.969 62.705-21.134 62.705-56.049 0-20.828-19.842-39.259-34.405-46.459-14.197-7.039-45.048-15.336-65.774-15.336h-23.523c-61.966.009-139.642 42.124-139.642 99.482z"
+      />
+      <path
+        fill="#a5a7aa"
+        d="M812.694 575.725l-125.98.757H813.45v-18.83H688.227l124.467.748z"
+      />
+      <path d="M473.442 576.482v54.264h56.168v-54.264z" />
+      <path
+        fill="#fff"
+        d="M473.442 576.482h56.168v54.264h-56.168zm-18.975 72.346h94.109v-91.176h-94.109z"
+      />
+      <path
+        d="M133.425 529.767v.757c0 14.197 12.42 27.128 26.566 27.128h124.467v18.83H157.713c-12.803 0-24.288 14.401-24.288 28.649v72.337c0 12.021 13.177 25.623 25.045 25.623h5.313c14.767 0 26.558-12.854 26.558-27.884v-44.453h125.232c12.641 0 25.801-14.155 25.801-27.119v-73.859c0-15.158-14.546-26.379-31.115-26.379H164.548c-16.577-.009-31.123 11.213-31.123 26.371zm321.042 27.884h94.109v91.176h-94.109zm-56.925 118.312c0 13.134 12.488 27.119 25.053 27.119h157.869c12.148 0 25.036-13.713 25.036-26.379V529.767c0-15.158-14.546-26.379-31.115-26.379H427.144c-17.088 0-29.601 12.429-29.601 29.397zm290.685-118.312h125.215v18.83H686.713c-11.953 0-25.045 13.721-25.045 25.623v73.859c0 13.398 12.446 27.119 25.045 27.119h8.34c11.978 0 23.532-14.214 23.532-28.632v-43.714h119.919c16.552 0 31.106-11.222 31.106-26.379v-74.599c0-15.158-14.554-26.379-31.106-26.379h-145.72c-14.716 0-30.367 9.81-30.367 23.353v7.549c0 11.672 13.551 23.37 25.81 23.37z"
+      />
+      <path
+        d="M133.425 529.767c0-15.158 14.546-26.379 31.123-26.379h145.72c16.569 0 31.115 11.213 31.115 26.379v73.859c0 12.964-13.16 27.119-25.801 27.119H190.35v44.453c0 15.039-11.791 27.884-26.558 27.884h-5.322c-11.868 0-25.045-13.602-25.045-25.623V605.13c0-14.248 11.494-28.649 24.288-28.649h126.745v-18.83H159.992c-14.146 0-26.566-12.93-26.566-27.128zm53.124-44.462c1.122-1.513 9.734-6.359 13.202-10.253 4.463-4.999 6.163-6.954 9.071-13.611 4.038-9.241 2.78-29.856 2.78-43.203v-45.966c0-9.759.706-12.42 5.883-17.53 3.46-3.409 8.884-7.345 15.37-7.345h4.557c13.151 0 22.817 10.185 22.766 24.11v45.975c0 13.67-1.887 33.776 2.278 43.705 2.814 6.725 4.37 9.232 9.3 14.138 2.899 2.873 11.834 8.782 12.718 9.98zm-72.091-168.053v132.637c0 16.008 17.113 35.765 31.115 36.921v1.513c-11.375.944-30.358 22.29-30.358 34.66v12.811c0 18.252 12.488 23.174 18.21 31.65-9.402 6.257-18.966 19.383-18.966 34.66v74.607c0 21.729 20.845 44.462 40.985 44.462h11.383c22.741 0 42.506-21.95 42.506-45.21v-27.136h103.222c26.082 0 47.811-19.799 47.811-45.201v-73.102c0-20.386-16.169-39.148-32.628-42.957 5.364-4.616 14.75-6.546 20.191-13.866 4.548-6.121 10.168-13.517 10.168-23.812V347.398c0-21.177-14.52-39.31-26.702-48.848-11.783-9.224-35.476-20.48-56.023-20.48H257.91c-13.9 0-54.944 13.007-56.916 20.352-6.214-.519-34.498-20.352-40.228-20.352h-.774c-22.962.009-45.533 17.589-45.533 39.182zm572.255 259.23l125.98-.757v-17.326l-124.467-.748c-12.259 0-25.81-11.698-25.81-23.361v-7.549c0-13.543 15.651-23.353 30.367-23.353h145.72c16.552 0 31.106 11.213 31.106 26.379v74.599c0 15.149-14.554 26.379-31.106 26.379H718.585v43.714c0 14.418-11.545 28.632-23.532 28.632h-8.34c-12.599 0-25.045-13.721-25.045-27.119v-73.859c-.009-11.91 13.083-25.631 25.045-25.631zm78.271-100.8l15.09 9.606-31.14.009zM635.859 303.701v103.988c0 16.229 9.334 37.312 16.093 47.335 4.786 7.116 8.918 11.001 14.835 16.918 6.631 6.614 13.696 8.663 19.162 13.373-20.599 1.7-42.498 19.791-42.498 40.704v9.037c0 7.005 3.069 14.571 5.891 19 3.868 6.061 9.759 9.598 12.318 13.39-7.779 5.169-18.218 17.649-18.218 30.146v83.653c0 18.737 22.231 39.939 40.22 39.939h11.383c22.766 0 42.506-21.806 42.506-45.21v-27.145h107.014c23.625 0 44.02-22.078 44.02-46.723V532.02c0-25.478-20.216-46.723-45.533-46.723 6.087-5.254 12.973-7.209 20.301-14.503 7.133-7.099 10.329-11.018 15.991-19.544 8.297-12.514 14.563-34.889 14.563-55.624v-84.392c0-44.555-53.388-54.213-66.148-12.174-2.822 9.309-1.403 49.97-1.403 64.168 0 20.131 5.271 51.237-15.166 51.237h-.765c-4.608 0-7.252-1.768-9.113-4.514v-90.428c0-18.099-.927-25.563-9.232-36.037-5.857-7.396-19.434-14.061-32.968-10.397-26.915 7.286-25.342 32.628-25.342 65.273v45.21c0 15.362.374 30.894-15.175 30.894h-.757c-19.485 0-15.183-28.632-15.183-48.228 0-14.418 1.666-52.776-.57-63.488-3.264-15.676-14.461-32.092-33.41-30.554-10.916.893-16.135 3.273-22.367 9.462-4.302 4.259-10.448 14.18-10.448 22.044z"
+        fill="#fff"
+      />
+      <path
+        d="M114.459 317.252c0-21.602 22.571-39.174 45.533-39.174h.757c5.738 0 34.014 19.833 40.228 20.352 1.972-7.345 43.016-20.352 56.916-20.352h17.462c20.548 0 44.241 11.256 56.023 20.48 12.182 9.538 26.702 27.672 26.702 48.848v102.491c0 10.295-5.619 17.7-10.168 23.812-5.432 7.32-14.826 9.241-20.191 13.866 16.458 3.809 32.628 22.562 32.628 42.957v73.102c0 25.402-21.729 45.201-47.811 45.201H209.324v27.136c0 23.259-19.765 45.21-42.506 45.21h-11.383c-20.14 0-40.985-22.741-40.985-44.462v-74.607c0-15.277 9.564-28.403 18.966-34.66-5.721-8.476-18.21-13.39-18.21-31.65v-12.811c0-12.369 18.983-33.716 30.358-34.66v-1.513c-14.002-1.156-31.115-20.913-31.115-36.921V317.252zm521.4-13.551c0-7.855 6.146-17.785 10.44-22.044 6.223-6.189 11.451-8.569 22.367-9.462 18.949-1.539 30.146 14.877 33.41 30.554 2.244 10.712.57 49.069.57 63.488 0 19.595-4.302 48.228 15.183 48.228h.757c15.549 0 15.175-15.54 15.175-30.894v-45.21c0-32.636-1.573-57.987 25.342-65.273 13.534-3.664 27.102 3.001 32.968 10.397 8.306 10.474 9.232 17.938 9.232 36.037v90.428c1.87 2.746 4.506 4.514 9.113 4.514h.765c20.437 0 15.166-31.106 15.166-51.237 0-14.189-1.42-54.859 1.403-64.168 12.76-42.047 66.148-32.39 66.148 12.174v84.401c0 20.735-6.265 43.11-14.563 55.624-5.662 8.527-8.858 12.446-15.991 19.544-7.32 7.294-14.214 9.249-20.301 14.503 25.325 0 45.533 21.245 45.533 46.723v70.076c0 24.645-20.386 46.723-44.02 46.723H737.56v27.136c0 23.404-19.74 45.21-42.506 45.21H683.67c-17.989 0-40.22-21.202-40.22-39.939v-83.653c0-12.497 10.44-24.977 18.218-30.146-2.559-3.792-8.45-7.328-12.318-13.39-2.822-4.429-5.891-11.995-5.891-19v-9.037c0-20.913 21.899-38.995 42.498-40.704-5.466-4.71-12.531-6.759-19.162-13.373-5.917-5.908-10.049-9.802-14.835-16.918-6.759-10.023-16.093-31.106-16.093-47.335V303.701zm-272.466 72.337c0-57.358 77.685-99.473 139.65-99.473h23.523c20.726 0 51.577 8.297 65.774 15.336 14.563 7.209 34.405 25.64 34.405 46.459 0 34.915-35.501 47.089-62.705 56.049-15.651 5.152-29.601 8.595-46.425 12.684-7.201 1.76-17.037 3.877-24.611 4.956-8.229 1.173-19.57 1.275-19.57 9.963 0 5.041 15.175 9.793 20.497 9.793h8.348c22.46 0 44.402-25.623 67.543-25.623h11.383c13.551 0 39.48 16.135 39.48 29.38v5.288c0 11.511-16.475 25.13-24.781 29.652-6.061 3.29-11.953 6.01-18.958 8.314-3.026.995-19.714 5.84-20.769 6.495 22.222 0 35.221-1.513 48.449 8.416 10.032 7.524 19.85 19.629 19.85 36.802v143.935c0 24.297-19.374 46.723-42.506 46.723H422.596c-23.659 0-44.02-21.576-44.02-45.21V531.289c0-19.646 12.582-34.524 26.048-41.206 14.665-7.277 41.401-4.769 62.748-4.769-2.686-1.683-15.064-3.911-19.51-5.5l-18.337-6.656c-10.108-3.911-22.97-12.403-30.656-19.289-12.276-10.992-35.467-41.631-35.467-63.496v-14.333zM74.987 703.091c0 43.008 56.108 64.049 101.701 64.049h653.45c38.196 0 94.874-24.458 94.874-58.786V292.386c.009-34.252-52.776-59.526-89.552-59.526H165.305c-39.429 0-90.318 24.866-90.318 63.3z"
+      />
     </g>
   </svg>
 </template>
diff --git a/src/components/icons/PaniniIcon.vue b/src/components/icons/PaniniIcon.vue
index 357ed015..85e62f49 100644
--- a/src/components/icons/PaniniIcon.vue
+++ b/src/components/icons/PaniniIcon.vue
@@ -2,47 +2,116 @@
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
     <defs>
       <clipPath id="A">
-        <path d="M11.663 9.138H63.29v51.627H11.663z" fill="#ffea00" fill-opacity="1" stroke="none" stroke-miterlimit="4" stroke-dasharray="none"/>
+        <path
+          d="M11.663 9.138H63.29v51.627H11.663z"
+          fill="#ffea00"
+          fill-opacity="1"
+          stroke="none"
+          stroke-miterlimit="4"
+          stroke-dasharray="none"
+        />
       </clipPath>
     </defs>
-    <path d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z" fill="#ffea00"/>
-    <g transform="matrix(19.369729 0 0 19.369729 -225.91293 -177.00875)" clip-path="url(#A)">
-      <path d="M174.43 40.17l-109.33-.2c-7.05-.07-14.36-.05-20.73-2.04 0 0-.06 1.24-.23 1.75-.2-.52-.36-1.06-.87-1.46-.91-.96-1.58-.02-1.86-.7-.52-.42-1.37-.08-1.89.09-.19-.66-.17-1.55-.1-2.28l2.75-3.47-1.15-.92 1.54-1.64.69.36 3.5-2.57c.27-.19.37-.43.37-.74a.76.76 0 0 0-.28-.59l-3.16-2.07-.32.12c-1.08-.49-2.25-1.06-3.27-1.68 0 0 .47-.44.18-.88-.16-.19-.46-.26-.78-.14l.09-.14c.04-.16.23-.4.2-.85-.28-1.07-1.34-1.62-2.33-1.75-.79-.14-1.57.34-2.01-.35-.09-.15-.09-.41 0-.55.03-.17.16-.18.23-.35-.64-.12-.73.17-.91.2-.24.17-.35-.12-.26-.35-.88.32-1.02.17-1.22-.49-.3-.36-.72-.4-1.16-.41-1.5.15-1.83 2.05-3.2 2.42-.27-.01-.52-.07-.7-.29-.27-.3-.48-.71-.28-1.34-.48.12-1.01.53-1.35.7-.15.06.01-.46-.41-.33-.36.29-.41.36-.71.53-.48.14-.76.2-1.09.12-1.35-.55-2.2.77-3.11 1.63-.4.24-.62.05-1.02-.23.05.46.33.83.55 1.22.12.15.21.35-.03.47.42.6 1.14.74 1.69 1.16.15.91.68-.16 1.08.15-.09.99.76.04 1.19.47 1.09.68 2.07 1.63 3.43 1.66.14.71.32-.02.96.06.18.16-.11.52.15.7 1.09-.41 2.37.06 3.49-.17.99-.14 1.84-.99 2.42-1.78.39.33.86.56 1.34.58v-.2a1.84 1.84 0 0 1 1.25-1.16l-.01.05c-.2.17-.23.47-.06.68a.58.58 0 0 0 .17.14L35 26.44l-.01-1.01H24.9v10.75l-.31.21c-.34 1.03-.67-.18-1.48-.47-.55-.16-1.66.23-2.58.69-2.09 1.15-2.84 1.82-3.49 3.35-1.22.12-2.45-.1-3.67-.15v1.6c1.24-.16 2.47-.24 3.72-.29.22.49.37.64.7.96.58.23.64-.59 1.16-1.05h2.74l.23.77-1.66 1.5 2.56.77c.25 0 .48-.07.56-.13 1.54-.76 3.01-1.69 4.36-2.91h3l2.6 1.99.86-1.09.36.19c.69.47 1.1.73 1.57 1.73l-1.32 1.05s.89.22.89.2l-1.08 1.49c-.51.57-.81 1.27-1.34 1.78-.51-.35-1.13-.73-1.77-.79H31c-.57 0-1.03.45-1.03 1.01s.46 1.01 1.03 1.01a.99.99 0 0 0 1-.88c.42-.13.74.21.99.52.04.2-.09.47.17.59h7.36c-.23-.69-.58-.78-1.06-1.17-.54-.32-.93-.55-3.4-.68.2-.95.7-1.8 1.29-2.58l1.57.1v-3.1s-.89.39-.91.38c-.64-.61-1.32-1.2-2.12-1.74h1.77c.21.33.25.79.64.99.54.48 1.08-.61 1.45.26.3.26.75.32 1.14.2 1.34.75 1.96.24 1.96.24.48-.29.57-.29.86-.76.22-.28.44-.98.44-.96l.18 2.12c5.41-1.16 11.01-1.93 16.91-1.92l113.17-.47c-.01-.02.45-.36.45-.36 0 .02-.43-.21-.43-.21zm-154.5-.14s.53-.67 1.54-1.25c-.03.41.02.89.06 1.26zm3.08-.02c-.01-.94.42-2.87.42-2.87.36.22 1.02.59 1.45.67l-.01 1.72-.86.48zm1.82 1.28l-.44.12c.11-.24.04-.37.14-.44l.88.01c-.23.19-.58.31-.58.31zm1.83-1.26l-1.6.01c-.02.02.01-.32.01-.32h1.99c-.11.14-.4.31-.4.31zm1.82.09l.26-.39.31-.01.52.4zm9.17-.06s-1.93.01-1.92-.01l1.96-2.57s.3 2-.04 2.58z" fill="#231f20"/>
-      <path d="M57.08 40.25c.08.16-.04.31-.12.44-1.28.2-2.69.19-3.96.35-.01-.31.09-.67.41-.93l3.67.14z" fill="#ed1c24"/>
+    <path
+      d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z"
+      fill="#ffea00"
+    />
+    <g
+      transform="matrix(19.369729 0 0 19.369729 -225.91293 -177.00875)"
+      clip-path="url(#A)"
+    >
+      <path
+        d="M174.43 40.17l-109.33-.2c-7.05-.07-14.36-.05-20.73-2.04 0 0-.06 1.24-.23 1.75-.2-.52-.36-1.06-.87-1.46-.91-.96-1.58-.02-1.86-.7-.52-.42-1.37-.08-1.89.09-.19-.66-.17-1.55-.1-2.28l2.75-3.47-1.15-.92 1.54-1.64.69.36 3.5-2.57c.27-.19.37-.43.37-.74a.76.76 0 0 0-.28-.59l-3.16-2.07-.32.12c-1.08-.49-2.25-1.06-3.27-1.68 0 0 .47-.44.18-.88-.16-.19-.46-.26-.78-.14l.09-.14c.04-.16.23-.4.2-.85-.28-1.07-1.34-1.62-2.33-1.75-.79-.14-1.57.34-2.01-.35-.09-.15-.09-.41 0-.55.03-.17.16-.18.23-.35-.64-.12-.73.17-.91.2-.24.17-.35-.12-.26-.35-.88.32-1.02.17-1.22-.49-.3-.36-.72-.4-1.16-.41-1.5.15-1.83 2.05-3.2 2.42-.27-.01-.52-.07-.7-.29-.27-.3-.48-.71-.28-1.34-.48.12-1.01.53-1.35.7-.15.06.01-.46-.41-.33-.36.29-.41.36-.71.53-.48.14-.76.2-1.09.12-1.35-.55-2.2.77-3.11 1.63-.4.24-.62.05-1.02-.23.05.46.33.83.55 1.22.12.15.21.35-.03.47.42.6 1.14.74 1.69 1.16.15.91.68-.16 1.08.15-.09.99.76.04 1.19.47 1.09.68 2.07 1.63 3.43 1.66.14.71.32-.02.96.06.18.16-.11.52.15.7 1.09-.41 2.37.06 3.49-.17.99-.14 1.84-.99 2.42-1.78.39.33.86.56 1.34.58v-.2a1.84 1.84 0 0 1 1.25-1.16l-.01.05c-.2.17-.23.47-.06.68a.58.58 0 0 0 .17.14L35 26.44l-.01-1.01H24.9v10.75l-.31.21c-.34 1.03-.67-.18-1.48-.47-.55-.16-1.66.23-2.58.69-2.09 1.15-2.84 1.82-3.49 3.35-1.22.12-2.45-.1-3.67-.15v1.6c1.24-.16 2.47-.24 3.72-.29.22.49.37.64.7.96.58.23.64-.59 1.16-1.05h2.74l.23.77-1.66 1.5 2.56.77c.25 0 .48-.07.56-.13 1.54-.76 3.01-1.69 4.36-2.91h3l2.6 1.99.86-1.09.36.19c.69.47 1.1.73 1.57 1.73l-1.32 1.05s.89.22.89.2l-1.08 1.49c-.51.57-.81 1.27-1.34 1.78-.51-.35-1.13-.73-1.77-.79H31c-.57 0-1.03.45-1.03 1.01s.46 1.01 1.03 1.01a.99.99 0 0 0 1-.88c.42-.13.74.21.99.52.04.2-.09.47.17.59h7.36c-.23-.69-.58-.78-1.06-1.17-.54-.32-.93-.55-3.4-.68.2-.95.7-1.8 1.29-2.58l1.57.1v-3.1s-.89.39-.91.38c-.64-.61-1.32-1.2-2.12-1.74h1.77c.21.33.25.79.64.99.54.48 1.08-.61 1.45.26.3.26.75.32 1.14.2 1.34.75 1.96.24 1.96.24.48-.29.57-.29.86-.76.22-.28.44-.98.44-.96l.18 2.12c5.41-1.16 11.01-1.93 16.91-1.92l113.17-.47c-.01-.02.45-.36.45-.36 0 .02-.43-.21-.43-.21zm-154.5-.14s.53-.67 1.54-1.25c-.03.41.02.89.06 1.26zm3.08-.02c-.01-.94.42-2.87.42-2.87.36.22 1.02.59 1.45.67l-.01 1.72-.86.48zm1.82 1.28l-.44.12c.11-.24.04-.37.14-.44l.88.01c-.23.19-.58.31-.58.31zm1.83-1.26l-1.6.01c-.02.02.01-.32.01-.32h1.99c-.11.14-.4.31-.4.31zm1.82.09l.26-.39.31-.01.52.4zm9.17-.06s-1.93.01-1.92-.01l1.96-2.57s.3 2-.04 2.58z"
+        fill="#231f20"
+      />
+      <path
+        d="M57.08 40.25c.08.16-.04.31-.12.44-1.28.2-2.69.19-3.96.35-.01-.31.09-.67.41-.93l3.67.14z"
+        fill="#ed1c24"
+      />
       <g fill="#00aeef">
-        <path d="M30.6 48.87c0-.22.17-.39.39-.39a.39.39 0 0 1 .39.39c0 .22-.17.39-.39.39s-.39-.17-.39-.39z"/>
-        <path d="M32.14 48.13l-.15.33c-.54.15-.37-.45-1.22-.19h-.45a.79.79 0 0 1 .53-.38c.66-.11.9-.02 1.29.24zm4.72-2.8a10.69 10.69 0 0 0-1.37 2.69s-.49.09-.63.16c-1.08.53-1.37 1.17-1.37 1.17.32-.83 1.68-2.97 2.57-4.16z"/>
-        <path d="M35.39 49.36c-.02 0-1.34.02-1.34-.01.48-.63.76-.93 1.44-1.03.3-.04.77.04.77.04-.49.49-.87 1-.87 1z"/>
-        <path d="M38.3 48.55c-.34.25-.31.51-.46.79h-1.97c.34-.49.46-.66 1.03-.98.47.04 1.06.08 1.4.19z"/>
-        <path d="M39.74 49.35l-1.48.01c.08-.36.18-.58.46-.68.47.18.83.29 1.02.67zm-1.26-4.34c-.82-.02-1.92-.23-2.73-.38 1.25-.91 1.68-1.13 2.73-1.6zm-.91-2.03l-1.03.59c-.48-.76-1.23-1.58-2.02-2.09l.43-.56c1.19.58 2.04 1.22 2.62 2.06zm-17.76-3.5a6.03 6.03 0 0 0-.99.93c-.23-.54-.63-1.12-.47-1.72.35-.36.64-.72 1.19-.99.01 0 .1.91.27 1.78zm-1.89-.35c.07.65.37 1.39.59 1.64-.16.28-.35.44-.56.77-.33-.06-.45-.64-.55-.91-.12-.56.08-.93.52-1.5zm5.21-2.78c-.39 1.44-.63 3.17-.52 4.78l-.26.2c-.32-1.09-.33-2.29-.37-2.24 0 0 .02-1.73.22-2.7 0 0 .63-.22.93-.04zm-1.64 1.94c-.41.18-.84.53-1.32.85a8.36 8.36 0 0 1-.18-1.7c.46-.26 1.04-.67 1.56-.87zm2.71 2.51c-.39.98-.81 1.96-1.4 2.83l-1.72-.53c1.02-.91 1.83-1.63 3.12-2.3zm4.05-1.07c-1.32 1.8-3.11 2.9-4.71 3.62l.69-1.5c.67-.24 1.04-.29 1.6-.69l1.83-1.44z"/>
+        <path
+          d="M30.6 48.87c0-.22.17-.39.39-.39a.39.39 0 0 1 .39.39c0 .22-.17.39-.39.39s-.39-.17-.39-.39z"
+        />
+        <path
+          d="M32.14 48.13l-.15.33c-.54.15-.37-.45-1.22-.19h-.45a.79.79 0 0 1 .53-.38c.66-.11.9-.02 1.29.24zm4.72-2.8a10.69 10.69 0 0 0-1.37 2.69s-.49.09-.63.16c-1.08.53-1.37 1.17-1.37 1.17.32-.83 1.68-2.97 2.57-4.16z"
+        />
+        <path
+          d="M35.39 49.36c-.02 0-1.34.02-1.34-.01.48-.63.76-.93 1.44-1.03.3-.04.77.04.77.04-.49.49-.87 1-.87 1z"
+        />
+        <path
+          d="M38.3 48.55c-.34.25-.31.51-.46.79h-1.97c.34-.49.46-.66 1.03-.98.47.04 1.06.08 1.4.19z"
+        />
+        <path
+          d="M39.74 49.35l-1.48.01c.08-.36.18-.58.46-.68.47.18.83.29 1.02.67zm-1.26-4.34c-.82-.02-1.92-.23-2.73-.38 1.25-.91 1.68-1.13 2.73-1.6zm-.91-2.03l-1.03.59c-.48-.76-1.23-1.58-2.02-2.09l.43-.56c1.19.58 2.04 1.22 2.62 2.06zm-17.76-3.5a6.03 6.03 0 0 0-.99.93c-.23-.54-.63-1.12-.47-1.72.35-.36.64-.72 1.19-.99.01 0 .1.91.27 1.78zm-1.89-.35c.07.65.37 1.39.59 1.64-.16.28-.35.44-.56.77-.33-.06-.45-.64-.55-.91-.12-.56.08-.93.52-1.5zm5.21-2.78c-.39 1.44-.63 3.17-.52 4.78l-.26.2c-.32-1.09-.33-2.29-.37-2.24 0 0 .02-1.73.22-2.7 0 0 .63-.22.93-.04zm-1.64 1.94c-.41.18-.84.53-1.32.85a8.36 8.36 0 0 1-.18-1.7c.46-.26 1.04-.67 1.56-.87zm2.71 2.51c-.39.98-.81 1.96-1.4 2.83l-1.72-.53c1.02-.91 1.83-1.63 3.12-2.3zm4.05-1.07c-1.32 1.8-3.11 2.9-4.71 3.62l.69-1.5c.67-.24 1.04-.29 1.6-.69l1.83-1.44z"
+        />
       </g>
-      <path d="M31.61 39.73l-.69.86-1.26-.86z" fill="#00a651"/>
+      <path d="M31.61 39.73l-.69.86-1.26-.86z" fill="#00a651" />
       <g fill="#00aeef">
-        <path d="M39.06 37.84l-.81.96-.11-1.81.76-1.07c0 .67.05 1.38.16 1.92zm1.86.02A4.47 4.47 0 0 0 39 40.01l-.84.01c.11-1.05 1.29-1.97 2.21-2.31.19-.04.46-.06.55.15zm1.29 3.01c.01.12.03.29-.2.35-.22.05-.45-.42-.39-.55.3-.12.5-.07.59.2zm-.85.14c-.01.09-.01.24-.15.23a.15.15 0 0 1-.2-.2c-.04-.12.09-.15.15-.23.12-.01.17.1.2.2z"/>
-        <path d="M39.82 40.87c.27.06.54.28-.02.52-.34-.03-.4-.51.02-.52z" fill-rule="evenodd"/>
-        <path d="M43.08 38.74c-.06.29-.29.4-.73.53-.47.35-.2.91-1.02.78-.28-.19-.12-.6-.14-.87.12-.43.26-.92.76-1.07a1.24 1.24 0 0 1 1.13.63zm-2.41 1.29l-1.06-.01c-.03-.7 1.59-1.87 1.59-1.87-.47.83-.53 1.88-.53 1.88z"/>
-        <path d="M43.62 40.06a.96.96 0 0 1 0 .81c-.15.17-.51.28-.73.2-.29-.27-.63-.69-.54-1.1.13-.22.37-.43.59-.5.33-.08.59.35.68.59zm-4.37.98c.06.19-.17.55-.41.58-.24.05-.45.02-.6-.36-.13-.25-.02-.36-.02-.36s.42-.24 1.03.14zm1.35.41c-.02.04.03.6-.02.6-.1.04-.53-.19-.59-.23-.03-.2.26-.4.61-.37zm1.07.24l-.15.51c-.09.15-.51-.07-.59-.43.05-.16.74-.23.74-.08zm.97.59c-.2.18-.71.24-.83.1-.02-.07.17-.71.38-.71.31.07.39.44.45.61zm-1.98-1.65c.09.09.12.3.02.41l-.38-.15c-.1-.13.05-.32.36-.26zm2.81.88a.43.43 0 0 1-.43.44c-.12 0-.43-.21-.34-.5.18-.11.59-.01.77.06z"/>
+        <path
+          d="M39.06 37.84l-.81.96-.11-1.81.76-1.07c0 .67.05 1.38.16 1.92zm1.86.02A4.47 4.47 0 0 0 39 40.01l-.84.01c.11-1.05 1.29-1.97 2.21-2.31.19-.04.46-.06.55.15zm1.29 3.01c.01.12.03.29-.2.35-.22.05-.45-.42-.39-.55.3-.12.5-.07.59.2zm-.85.14c-.01.09-.01.24-.15.23a.15.15 0 0 1-.2-.2c-.04-.12.09-.15.15-.23.12-.01.17.1.2.2z"
+        />
+        <path
+          d="M39.82 40.87c.27.06.54.28-.02.52-.34-.03-.4-.51.02-.52z"
+          fill-rule="evenodd"
+        />
+        <path
+          d="M43.08 38.74c-.06.29-.29.4-.73.53-.47.35-.2.91-1.02.78-.28-.19-.12-.6-.14-.87.12-.43.26-.92.76-1.07a1.24 1.24 0 0 1 1.13.63zm-2.41 1.29l-1.06-.01c-.03-.7 1.59-1.87 1.59-1.87-.47.83-.53 1.88-.53 1.88z"
+        />
+        <path
+          d="M43.62 40.06a.96.96 0 0 1 0 .81c-.15.17-.51.28-.73.2-.29-.27-.63-.69-.54-1.1.13-.22.37-.43.59-.5.33-.08.59.35.68.59zm-4.37.98c.06.19-.17.55-.41.58-.24.05-.45.02-.6-.36-.13-.25-.02-.36-.02-.36s.42-.24 1.03.14zm1.35.41c-.02.04.03.6-.02.6-.1.04-.53-.19-.59-.23-.03-.2.26-.4.61-.37zm1.07.24l-.15.51c-.09.15-.51-.07-.59-.43.05-.16.74-.23.74-.08zm.97.59c-.2.18-.71.24-.83.1-.02-.07.17-.71.38-.71.31.07.39.44.45.61zm-1.98-1.65c.09.09.12.3.02.41l-.38-.15c-.1-.13.05-.32.36-.26zm2.81.88a.43.43 0 0 1-.43.44c-.12 0-.43-.21-.34-.5.18-.11.59-.01.77.06z"
+        />
       </g>
       <g fill="#ed1c24">
-        <path d="M50.67 39.81c-.25.58-.52 1.16-.9 1.69l-3.81.61s1-2.03 1.66-2.88c1 .28 2.02.43 3.05.58zM32.93 16.75c.14.18.19.86.06 1.23.51-.12.65-.22 1.09-.38.01.21.01.38.15.44l.47-.23c.13.3.38.75.73.91 1 .23 2.44-.09 3.14.56.31.31.74.79.6 1.33-.24.82-2.1 1.49-3.1 2.45-.21.25-.84-.24-1.15-.5-.58.99-1.46 1.7-2.53 1.96-.86.1-1.88-.03-2.71.09l-.08-.51c-.44-.36-.49-.02-.97.12-.2-.62-.44-.19-.8-.23-1.49-.26-3.09-2.29-3.85-1.73-.17-.04.01-.46-.27-.5-.26-.17-.5.15-.85.23.03-.38-.8-.52-1.41-.98-.07-.21.18-.09.11-.3-.27-.2-.45-.36-.56-.69 1.36-.4 1.54-2.12 3.06-1.81.33.1.53.21.85.42 0 0 .15-.18.34-.36.52.18.6-.32.93-.47-.03.21.03.33.2.41.42-.09.58-.63 1.02-.7.17.49.42 1.01.93 1.28 1.73.55 2.31-1.71 3.75-2.25.28-.09.64.04.85.21z"/>
+        <path
+          d="M50.67 39.81c-.25.58-.52 1.16-.9 1.69l-3.81.61s1-2.03 1.66-2.88c1 .28 2.02.43 3.05.58zM32.93 16.75c.14.18.19.86.06 1.23.51-.12.65-.22 1.09-.38.01.21.01.38.15.44l.47-.23c.13.3.38.75.73.91 1 .23 2.44-.09 3.14.56.31.31.74.79.6 1.33-.24.82-2.1 1.49-3.1 2.45-.21.25-.84-.24-1.15-.5-.58.99-1.46 1.7-2.53 1.96-.86.1-1.88-.03-2.71.09l-.08-.51c-.44-.36-.49-.02-.97.12-.2-.62-.44-.19-.8-.23-1.49-.26-3.09-2.29-3.85-1.73-.17-.04.01-.46-.27-.5-.26-.17-.5.15-.85.23.03-.38-.8-.52-1.41-.98-.07-.21.18-.09.11-.3-.27-.2-.45-.36-.56-.69 1.36-.4 1.54-2.12 3.06-1.81.33.1.53.21.85.42 0 0 .15-.18.34-.36.52.18.6-.32.93-.47-.03.21.03.33.2.41.42-.09.58-.63 1.02-.7.17.49.42 1.01.93 1.28 1.73.55 2.31-1.71 3.75-2.25.28-.09.64.04.85.21z"
+        />
       </g>
-      <path d="M34.56 39.29l-9.27-.01v-13.5l9.28.01z" fill="#f7941e"/>
-      <path d="M39.49 28.7a1.98 1.98 0 1 1 0-3.96c.41 0 .79.12 1.1.34l.02.01 2.03-1.06-3.16-1.65c-.11-.11.44-.41.17-.73-.35-.39-1.06.32-1.5.73-.23.29-.26.67.61.67l-3.36 3.67 5.22 3.9 1.46-1.54-1.24-.63c-.01 0-.92.25-1.35.25z" fill="#00aeef"/>
-      <path d="M34.96 35.42l-.01-4.05 2.27-2.71 1.9 1.37z" fill="#00a651"/>
-      <path d="M41.57 31.93l-8.29 10.5-2.04-1.56c.02.01.93-1.14.95-1.15h2.8v-3.55l4.54-5.79z" fill="#ed1c24"/>
-      <path d="M26.12 32.48l-.01-2.45 1.92-1.16 1.8 1.04 1.87-.98L33.64 30l.01 2.42-1.82 1.15-.03 2.39-2 1.03-2.05-1.16.01-2.35z" fill="#231f20"/>
-      <path d="M46.36 26.82c-.2.17-3.19 2.26-3.19 2.26l-2.38-1.22c-.29.34-.79.41-1.27.41-.86 0-1.56-.7-1.56-1.56s.7-1.56 1.56-1.56c.4 0 .77.15 1.05.4l2.92-1.39 2.76 1.7s.42.25.42.48c-.01.21-.18.37-.31.48z" fill="#00aeef"/>
+      <path d="M34.56 39.29l-9.27-.01v-13.5l9.28.01z" fill="#f7941e" />
+      <path
+        d="M39.49 28.7a1.98 1.98 0 1 1 0-3.96c.41 0 .79.12 1.1.34l.02.01 2.03-1.06-3.16-1.65c-.11-.11.44-.41.17-.73-.35-.39-1.06.32-1.5.73-.23.29-.26.67.61.67l-3.36 3.67 5.22 3.9 1.46-1.54-1.24-.63c-.01 0-.92.25-1.35.25z"
+        fill="#00aeef"
+      />
+      <path d="M34.96 35.42l-.01-4.05 2.27-2.71 1.9 1.37z" fill="#00a651" />
+      <path
+        d="M41.57 31.93l-8.29 10.5-2.04-1.56c.02.01.93-1.14.95-1.15h2.8v-3.55l4.54-5.79z"
+        fill="#ed1c24"
+      />
+      <path
+        d="M26.12 32.48l-.01-2.45 1.92-1.16 1.8 1.04 1.87-.98L33.64 30l.01 2.42-1.82 1.15-.03 2.39-2 1.03-2.05-1.16.01-2.35z"
+        fill="#231f20"
+      />
+      <path
+        d="M46.36 26.82c-.2.17-3.19 2.26-3.19 2.26l-2.38-1.22c-.29.34-.79.41-1.27.41-.86 0-1.56-.7-1.56-1.56s.7-1.56 1.56-1.56c.4 0 .77.15 1.05.4l2.92-1.39 2.76 1.7s.42.25.42.48c-.01.21-.18.37-.31.48z"
+        fill="#00aeef"
+      />
       <g fill="#fff">
-        <path d="M30 32.29v-2.06l1.69-.89 1.56.87v2.06l-1.58.93zm-3.48-.03v-2.03l1.55-.88 1.5.89v2.03l-1.51.94zm1.65 3.39l-.01-2.03 1.63-.95 1.66.94v2.09l-1.66.87z"/>
+        <path
+          d="M30 32.29v-2.06l1.69-.89 1.56.87v2.06l-1.58.93zm-3.48-.03v-2.03l1.55-.88 1.5.89v2.03l-1.51.94zm1.65 3.39l-.01-2.03 1.63-.95 1.66.94v2.09l-1.66.87z"
+        />
       </g>
-      <path d="M38.29 26.72a1.21 1.21 0 1 1 2.42 0 1.21 1.21 0 0 1-1.21 1.21c-.66 0-1.21-.54-1.21-1.21z" fill="#231f20"/>
-      <path d="M38.73 26.7a.78.78 0 0 1 .77-.78.78.78 0 0 1 0 1.56c-.43 0-.77-.35-.77-.78z" fill="#00aeef"/>
+      <path
+        d="M38.29 26.72a1.21 1.21 0 1 1 2.42 0 1.21 1.21 0 0 1-1.21 1.21c-.66 0-1.21-.54-1.21-1.21z"
+        fill="#231f20"
+      />
+      <path
+        d="M38.73 26.7a.78.78 0 0 1 .77-.78.78.78 0 0 1 0 1.56c-.43 0-.77-.35-.77-.78z"
+        fill="#00aeef"
+      />
       <g fill="#231f20">
-        <path d="M43.09 26.84c0 .24-.19.43-.43.43s-.43-.19-.43-.43v-1.02c.02-.22.2-.39.43-.39s.41.17.43.39z"/>
-        <path d="M43.3 26.32h0V25.3c.02-.22.21-.4.43-.4s.42.17.44.4v2.08.02c0 .24-.19.43-.43.43s-.45-.19-.45-.43v-1.08z" fill-rule="evenodd"/>
-        <path d="M45.27 26.84c0 .24-.19.43-.43.43s-.43-.19-.43-.43v-1.02c.02-.22.21-.39.43-.39.23 0 .41.17.43.39z"/>
+        <path
+          d="M43.09 26.84c0 .24-.19.43-.43.43s-.43-.19-.43-.43v-1.02c.02-.22.2-.39.43-.39s.41.17.43.39z"
+        />
+        <path
+          d="M43.3 26.32h0V25.3c.02-.22.21-.4.43-.4s.42.17.44.4v2.08.02c0 .24-.19.43-.43.43s-.45-.19-.45-.43v-1.08z"
+          fill-rule="evenodd"
+        />
+        <path
+          d="M45.27 26.84c0 .24-.19.43-.43.43s-.43-.19-.43-.43v-1.02c.02-.22.21-.39.43-.39.23 0 .41.17.43.39z"
+        />
         <g fill-rule="evenodd">
-          <path d="M27.44 32.23v-1.74h1.28v.31h-.92v.37h.84v.3h-.84v.45h.96v.31zm2.69 1.59h.58v1.75h-.37v-1.18-.14-.14l-.36 1.46h-.39l-.36-1.46v.14.14 1.18h-.37v-1.75h.58l.35 1.37zm1.88-2.98c-.05-.04-.11-.06-.2-.06h-.34v.51h.34c.09 0 .15-.02.2-.06s.07-.11.07-.2c0-.08-.02-.15-.07-.19zm.28.63c-.1.09-.25.13-.45.13h-.37v.63h-.36v-1.75h.76c.18 0 .31.05.42.14s.16.23.16.42c0 .2-.05.35-.16.43z"/>
+          <path
+            d="M27.44 32.23v-1.74h1.28v.31h-.92v.37h.84v.3h-.84v.45h.96v.31zm2.69 1.59h.58v1.75h-.37v-1.18-.14-.14l-.36 1.46h-.39l-.36-1.46v.14.14 1.18h-.37v-1.75h.58l.35 1.37zm1.88-2.98c-.05-.04-.11-.06-.2-.06h-.34v.51h.34c.09 0 .15-.02.2-.06s.07-.11.07-.2c0-.08-.02-.15-.07-.19zm.28.63c-.1.09-.25.13-.45.13h-.37v.63h-.36v-1.75h.76c.18 0 .31.05.42.14s.16.23.16.42c0 .2-.05.35-.16.43z"
+          />
         </g>
       </g>
     </g>
diff --git a/src/components/icons/PicPayIcon.vue b/src/components/icons/PicPayIcon.vue
index 8d66a50e..a3de1922 100644
--- a/src/components/icons/PicPayIcon.vue
+++ b/src/components/icons/PicPayIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 37.2 37.2">
-    <path d="M33.3 6.35h-3.9v3.9h3.9zm-21.9 1.9H5.8v4.9H11c3.3 0 5.2 1.6 5.2 4.6s-1.9 4.7-5.2 4.7H5.8v-9.2H0v21.5h5.8v-7.4h5.5c6.7 0 10.6-3.6 10.6-9.8 0-5.8-3.8-9.3-10.5-9.3zm14.1-5.8v11.699h11.699V2.45zm2 1.9h7.799v7.799H27.5z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 37.2 37.2"
+  >
+    <path
+      d="M33.3 6.35h-3.9v3.9h3.9zm-21.9 1.9H5.8v4.9H11c3.3 0 5.2 1.6 5.2 4.6s-1.9 4.7-5.2 4.7H5.8v-9.2H0v21.5h5.8v-7.4h5.5c6.7 0 10.6-3.6 10.6-9.8 0-5.8-3.8-9.3-10.5-9.3zm14.1-5.8v11.699h11.699V2.45zm2 1.9h7.799v7.799H27.5z"
+    />
   </svg>
 </template>
diff --git a/src/components/icons/SkoobIcon.vue b/src/components/icons/SkoobIcon.vue
index bb707d04..4314170c 100644
--- a/src/components/icons/SkoobIcon.vue
+++ b/src/components/icons/SkoobIcon.vue
@@ -1,6 +1,13 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
-    <path d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z" fill="#fff"/>
-    <path d="M170.498 128.639l.484 66.238 4.537 10.256c4.711 10.648 23.07 32.504 29.485 35.099 2.619 1.06 2.817 1.465.754 1.545-6.528.253-39.324 41.777-43.324 54.852-.711 2.326-2.258 5.383-3.439 6.793s-3.113 5.641-4.294 9.402-2.844 7.718-3.694 8.793-1.967 6.075-2.484 11.111-2.414 12.759-4.215 17.164c-4.655 11.384-4.677 48.409-.036 65.495l4.998 18.803c5.304 20.74 15.536 41.095 31.36 62.392 8.773 11.805 16.636 19.813 35.382 36.03 6.762 5.851 7.084 6.574 7.376 16.666l.427 14.396c.219 6.92-6.725 5.624-29.588-5.514l-24.136-12.118c-1.41-.884-4.487-2.386-6.837-3.342s-7.07-3.26-10.489-5.123-8.612-3.39-11.538-3.39h-5.323v78.289c0 49.772.62 78.91 1.704 79.993.938.938 4.687 7.822 8.333 15.299 4.535 9.302 10.066 17.116 17.524 24.75 14.824 15.172 20.651 19.33 42.974 30.656 16.207 8.224 19.424 10.525 20.6 14.736 8.742 31.304 17.335 48.58 32.741 65.838 17.528 19.636 37.587 32.945 56.695 37.616 4.573 1.118 10.549 3.155 13.28 4.528 3.316 1.667 14.666 2.995 34.187 4.003 16.072.831 34.991 2.641 42.042 4.026s15.513 2.573 18.803 2.641 9.06 1.612 12.82 3.429 7.776 3.328 8.923 3.361c8.714.243 43.213 25.682 43.213 31.866 0 1.769 2.632 2.379 10.256 2.379s10.256-.61 10.256-2.379c0-6.185 34.499-31.623 43.213-31.866 1.147-.032 5.162-1.544 8.923-3.361s9.53-3.359 12.82-3.429 11.752-1.258 18.803-2.641 25.97-3.195 42.042-4.026c19.521-1.009 30.871-2.337 34.187-4.003 2.732-1.373 8.708-3.41 13.28-4.528 19.107-4.672 39.167-17.981 56.695-37.616 15.407-17.258 24-34.534 32.741-65.838 1.176-4.212 4.393-6.513 20.6-14.736 22.345-11.338 28.177-15.502 42.945-30.656 7.595-7.795 12.93-15.41 17.707-25.271 3.761-7.766 7.523-14.542 8.361-15.058.855-.53 1.523-35.372 1.523-79.472v-78.53h-5.323c-2.926 0-8.12 1.525-11.538 3.39s-8.138 4.169-10.489 5.123-5.427 2.458-6.837 3.342c-10.704 6.704-46.42 22.528-49.777 22.054-3.93-.557-4.049-1.014-3.521-13.396.733-17.165 1.036-17.902 10.256-24.906 29.475-22.388 54.854-60.38 63.864-95.605l4.998-18.803c4.22-15.536 4.479-52.826.439-63.247-1.458-3.761-3.328-11.737-4.157-17.723s-2.193-11.755-3.034-12.82-2.496-5.012-3.677-8.772-3.114-7.991-4.294-9.402-2.728-4.467-3.439-6.793c-4.085-13.357-36.705-54.585-43.399-54.852-1.913-.077-1.667-.535.829-1.545 6.415-2.595 24.774-24.451 29.485-35.099l4.537-10.256.484-66.238.485-66.238h-9.34c-5.137 0-9.79.726-10.338 1.615-.897 1.451-102.889 52.514-161.594 80.903l-107.323 52.185c-15.307 7.812-24.306 15.841-31.984 28.541-3.979 6.581-8.241 11.966-9.47 11.966s-5.398-5.371-9.265-11.937c-11.651-19.793-3.214-14.904-139.389-80.756L189.691 64.016c-.549-.889-5.202-1.615-10.338-1.615h-9.34l.485 66.238m197.085 129.058c2.853 1.484 8.237 3.267 11.966 3.962 12.335 2.299 38.769 18.629 51.508 31.822 6.624 6.86 22.789 29.55 22.789 31.987 0 .595 1.439 3.766 3.198 7.048s3.776 9.424 4.482 13.649 2.605 11.145 4.22 15.376c5.955 15.6.005 51.379-12.919 77.681-11.007 22.394-43.057 52.36-62.228 58.177-2.35.713-5.49 2.362-6.978 3.665s-8.412 3.096-15.384 3.986-16.762 2.499-21.752 3.574c-12.022 2.593-38.661-1.597-59.977-9.434-18.249-6.709-52.849-35.41-59.936-49.717-1.369-2.766-3.342-6.181-4.383-7.591-4.532-6.142-11.043-27.813-13.008-43.297-1.668-13.157-1.691-19.851-.099-30.858 1.118-7.731 2.032-15.808 2.032-17.948 0-5.706 13.901-32.722 22.759-44.235 11.463-14.897 34.244-34.15 43.933-37.129 2.337-.72 5.126-2.009 6.202-2.865s7.229-3.114 13.675-5.019l16.849-5.003c8.467-2.547 47.016-.971 53.05 2.169m329.849 1.149c6.581 2.13 15.126 5.338 18.991 7.13s7.549 3.26 8.191 3.26c1.66 0 19.172 13.094 27.138 20.29 3.691 3.335 10.159 10.543 14.372 16.019 8.858 11.513 22.759 38.529 22.759 44.235 0 2.14.915 10.217 2.032 17.948 1.591 11.007 1.569 17.701-.099 30.858-1.966 15.483-8.477 37.155-13.008 43.297-1.041 1.41-3.014 4.796-4.383 7.525-2.95 5.877-25.581 29.423-34.114 35.493-12.733 9.06-37.582 20.229-45.004 20.229-2.311 0-10.15 1.231-17.422 2.733-12.039 2.491-14.536 2.496-27.96.067-8.108-1.467-18.331-3.12-22.719-3.672s-8.844-2.046-9.899-3.318-3.879-2.803-6.273-3.405c-10.104-2.535-24.623-12.796-39.95-28.23-17.76-17.885-25.935-31.647-32.876-55.356-6.855-23.405-4.332-59.348 5.67-80.799 1.802-3.863 3.275-7.415 3.275-7.892 0-2.268 16.47-25.23 22.789-31.776 11.275-11.675 41.387-30.974 48.616-31.158 1.624-.041 6.029-1.263 9.79-2.714 12.205-4.711 18.48-5.54 38.461-5.084 14.825.338 22.6 1.402 31.623 4.321M315.388 379.718c-22.136 8.496-35.897 28.911-35.897 53.261 0 16.513 4.762 27.049 17.8 39.38 13.641 12.899 20.584 15.591 40.333 15.637 14.246.033 17.306-.515 24.786-4.426 10.54-5.514 20.073-14.485 26.14-24.596 4.268-7.114 4.615-9.106 4.615-26.495 0-17.316-.361-19.412-4.564-26.495-15.603-26.295-45.338-36.963-73.212-26.266m329.054-1.084c-3.761 1.817-7.832 3.328-9.048 3.361-3.579.094-19.065 15.533-24.001 23.931-4.191 7.126-4.557 9.263-4.557 26.553 0 17.389.347 19.381 4.615 26.495 6.067 10.111 15.6 19.082 26.14 24.596 7.48 3.911 10.54 4.458 24.786 4.426 12.364-.029 17.998-.829 23.545-3.347 10.123-4.595 25.087-19.244 30.259-29.625 9.559-19.184 3.74-47.662-13.054-63.881-14.639-14.137-42.861-20.152-58.684-12.509M510.42 441.268c11.514 5.549 22.058 19.024 22.058 28.189 0 8.514-17.928 44.801-28.181 57.038L500 531.623l-4.297-5.128c-10.253-12.237-28.181-48.524-28.181-57.038 0-9.364 10.155-22.29 21.772-27.714 8.243-3.85 13.866-3.976 21.126-.475M254.705 638.545l191.862 94.229c18.068 8.832 22.213 11.668 30.372 20.776 5.996 6.696 10.762 14.121 13.048 20.33 5.846 15.885 14.251 15.752 20.111-.32 5.945-16.306 20.23-29.581 44.603-41.449l185.634-91.227 61.756-29.774c.967 0 2.646-1.068 3.73-2.374 2.935-3.537 10.227-4.405 13.073-1.559 1.913 1.913 2.468 7.788 2.468 26.126 0 40.117-4.482 54.544-22.353 71.951-7.957 7.75-22.724 15.507-129.781 68.163-6.111 3.005-12.265 6.178-13.675 7.048s-4.487 2.352-6.837 3.289-5.427 2.432-6.837 3.323c-2.655 1.677-58.536 28.779-75.349 36.543-5.244 2.424-21.359 10.213-35.808 17.314S502.448 853.84 500 853.84s-16.273-5.808-30.721-12.907l-35.808-17.314c-16.813-7.764-72.694-34.866-75.349-36.543-1.41-.891-4.487-2.385-6.837-3.323s-5.427-2.417-6.837-3.289-7.564-4.043-13.675-7.048c-107.056-52.655-121.823-60.413-129.781-68.163-17.988-17.521-22.353-31.746-22.353-72.841 0-21.27.386-24.767 2.889-26.167 1.588-.889 4.087-1.212 5.555-.718s31.897 15.354 67.623 33.018" fill="#3189c8" fill-rule="evenodd"/>
+    <path
+      d="M187.513 0H812.51C916.377 0 1000 83.625 1000 187.501v624.997C1000 916.375 916.377 1000 812.51 1000H187.513C83.623 1000 0 916.375 0 812.499V187.501C0 83.625 83.623 0 187.513 0z"
+      fill="#fff"
+    />
+    <path
+      d="M170.498 128.639l.484 66.238 4.537 10.256c4.711 10.648 23.07 32.504 29.485 35.099 2.619 1.06 2.817 1.465.754 1.545-6.528.253-39.324 41.777-43.324 54.852-.711 2.326-2.258 5.383-3.439 6.793s-3.113 5.641-4.294 9.402-2.844 7.718-3.694 8.793-1.967 6.075-2.484 11.111-2.414 12.759-4.215 17.164c-4.655 11.384-4.677 48.409-.036 65.495l4.998 18.803c5.304 20.74 15.536 41.095 31.36 62.392 8.773 11.805 16.636 19.813 35.382 36.03 6.762 5.851 7.084 6.574 7.376 16.666l.427 14.396c.219 6.92-6.725 5.624-29.588-5.514l-24.136-12.118c-1.41-.884-4.487-2.386-6.837-3.342s-7.07-3.26-10.489-5.123-8.612-3.39-11.538-3.39h-5.323v78.289c0 49.772.62 78.91 1.704 79.993.938.938 4.687 7.822 8.333 15.299 4.535 9.302 10.066 17.116 17.524 24.75 14.824 15.172 20.651 19.33 42.974 30.656 16.207 8.224 19.424 10.525 20.6 14.736 8.742 31.304 17.335 48.58 32.741 65.838 17.528 19.636 37.587 32.945 56.695 37.616 4.573 1.118 10.549 3.155 13.28 4.528 3.316 1.667 14.666 2.995 34.187 4.003 16.072.831 34.991 2.641 42.042 4.026s15.513 2.573 18.803 2.641 9.06 1.612 12.82 3.429 7.776 3.328 8.923 3.361c8.714.243 43.213 25.682 43.213 31.866 0 1.769 2.632 2.379 10.256 2.379s10.256-.61 10.256-2.379c0-6.185 34.499-31.623 43.213-31.866 1.147-.032 5.162-1.544 8.923-3.361s9.53-3.359 12.82-3.429 11.752-1.258 18.803-2.641 25.97-3.195 42.042-4.026c19.521-1.009 30.871-2.337 34.187-4.003 2.732-1.373 8.708-3.41 13.28-4.528 19.107-4.672 39.167-17.981 56.695-37.616 15.407-17.258 24-34.534 32.741-65.838 1.176-4.212 4.393-6.513 20.6-14.736 22.345-11.338 28.177-15.502 42.945-30.656 7.595-7.795 12.93-15.41 17.707-25.271 3.761-7.766 7.523-14.542 8.361-15.058.855-.53 1.523-35.372 1.523-79.472v-78.53h-5.323c-2.926 0-8.12 1.525-11.538 3.39s-8.138 4.169-10.489 5.123-5.427 2.458-6.837 3.342c-10.704 6.704-46.42 22.528-49.777 22.054-3.93-.557-4.049-1.014-3.521-13.396.733-17.165 1.036-17.902 10.256-24.906 29.475-22.388 54.854-60.38 63.864-95.605l4.998-18.803c4.22-15.536 4.479-52.826.439-63.247-1.458-3.761-3.328-11.737-4.157-17.723s-2.193-11.755-3.034-12.82-2.496-5.012-3.677-8.772-3.114-7.991-4.294-9.402-2.728-4.467-3.439-6.793c-4.085-13.357-36.705-54.585-43.399-54.852-1.913-.077-1.667-.535.829-1.545 6.415-2.595 24.774-24.451 29.485-35.099l4.537-10.256.484-66.238.485-66.238h-9.34c-5.137 0-9.79.726-10.338 1.615-.897 1.451-102.889 52.514-161.594 80.903l-107.323 52.185c-15.307 7.812-24.306 15.841-31.984 28.541-3.979 6.581-8.241 11.966-9.47 11.966s-5.398-5.371-9.265-11.937c-11.651-19.793-3.214-14.904-139.389-80.756L189.691 64.016c-.549-.889-5.202-1.615-10.338-1.615h-9.34l.485 66.238m197.085 129.058c2.853 1.484 8.237 3.267 11.966 3.962 12.335 2.299 38.769 18.629 51.508 31.822 6.624 6.86 22.789 29.55 22.789 31.987 0 .595 1.439 3.766 3.198 7.048s3.776 9.424 4.482 13.649 2.605 11.145 4.22 15.376c5.955 15.6.005 51.379-12.919 77.681-11.007 22.394-43.057 52.36-62.228 58.177-2.35.713-5.49 2.362-6.978 3.665s-8.412 3.096-15.384 3.986-16.762 2.499-21.752 3.574c-12.022 2.593-38.661-1.597-59.977-9.434-18.249-6.709-52.849-35.41-59.936-49.717-1.369-2.766-3.342-6.181-4.383-7.591-4.532-6.142-11.043-27.813-13.008-43.297-1.668-13.157-1.691-19.851-.099-30.858 1.118-7.731 2.032-15.808 2.032-17.948 0-5.706 13.901-32.722 22.759-44.235 11.463-14.897 34.244-34.15 43.933-37.129 2.337-.72 5.126-2.009 6.202-2.865s7.229-3.114 13.675-5.019l16.849-5.003c8.467-2.547 47.016-.971 53.05 2.169m329.849 1.149c6.581 2.13 15.126 5.338 18.991 7.13s7.549 3.26 8.191 3.26c1.66 0 19.172 13.094 27.138 20.29 3.691 3.335 10.159 10.543 14.372 16.019 8.858 11.513 22.759 38.529 22.759 44.235 0 2.14.915 10.217 2.032 17.948 1.591 11.007 1.569 17.701-.099 30.858-1.966 15.483-8.477 37.155-13.008 43.297-1.041 1.41-3.014 4.796-4.383 7.525-2.95 5.877-25.581 29.423-34.114 35.493-12.733 9.06-37.582 20.229-45.004 20.229-2.311 0-10.15 1.231-17.422 2.733-12.039 2.491-14.536 2.496-27.96.067-8.108-1.467-18.331-3.12-22.719-3.672s-8.844-2.046-9.899-3.318-3.879-2.803-6.273-3.405c-10.104-2.535-24.623-12.796-39.95-28.23-17.76-17.885-25.935-31.647-32.876-55.356-6.855-23.405-4.332-59.348 5.67-80.799 1.802-3.863 3.275-7.415 3.275-7.892 0-2.268 16.47-25.23 22.789-31.776 11.275-11.675 41.387-30.974 48.616-31.158 1.624-.041 6.029-1.263 9.79-2.714 12.205-4.711 18.48-5.54 38.461-5.084 14.825.338 22.6 1.402 31.623 4.321M315.388 379.718c-22.136 8.496-35.897 28.911-35.897 53.261 0 16.513 4.762 27.049 17.8 39.38 13.641 12.899 20.584 15.591 40.333 15.637 14.246.033 17.306-.515 24.786-4.426 10.54-5.514 20.073-14.485 26.14-24.596 4.268-7.114 4.615-9.106 4.615-26.495 0-17.316-.361-19.412-4.564-26.495-15.603-26.295-45.338-36.963-73.212-26.266m329.054-1.084c-3.761 1.817-7.832 3.328-9.048 3.361-3.579.094-19.065 15.533-24.001 23.931-4.191 7.126-4.557 9.263-4.557 26.553 0 17.389.347 19.381 4.615 26.495 6.067 10.111 15.6 19.082 26.14 24.596 7.48 3.911 10.54 4.458 24.786 4.426 12.364-.029 17.998-.829 23.545-3.347 10.123-4.595 25.087-19.244 30.259-29.625 9.559-19.184 3.74-47.662-13.054-63.881-14.639-14.137-42.861-20.152-58.684-12.509M510.42 441.268c11.514 5.549 22.058 19.024 22.058 28.189 0 8.514-17.928 44.801-28.181 57.038L500 531.623l-4.297-5.128c-10.253-12.237-28.181-48.524-28.181-57.038 0-9.364 10.155-22.29 21.772-27.714 8.243-3.85 13.866-3.976 21.126-.475M254.705 638.545l191.862 94.229c18.068 8.832 22.213 11.668 30.372 20.776 5.996 6.696 10.762 14.121 13.048 20.33 5.846 15.885 14.251 15.752 20.111-.32 5.945-16.306 20.23-29.581 44.603-41.449l185.634-91.227 61.756-29.774c.967 0 2.646-1.068 3.73-2.374 2.935-3.537 10.227-4.405 13.073-1.559 1.913 1.913 2.468 7.788 2.468 26.126 0 40.117-4.482 54.544-22.353 71.951-7.957 7.75-22.724 15.507-129.781 68.163-6.111 3.005-12.265 6.178-13.675 7.048s-4.487 2.352-6.837 3.289-5.427 2.432-6.837 3.323c-2.655 1.677-58.536 28.779-75.349 36.543-5.244 2.424-21.359 10.213-35.808 17.314S502.448 853.84 500 853.84s-16.273-5.808-30.721-12.907l-35.808-17.314c-16.813-7.764-72.694-34.866-75.349-36.543-1.41-.891-4.487-2.385-6.837-3.323s-5.427-2.417-6.837-3.289-7.564-4.043-13.675-7.048c-107.056-52.655-121.823-60.413-129.781-68.163-17.988-17.521-22.353-31.746-22.353-72.841 0-21.27.386-24.767 2.889-26.167 1.588-.889 4.087-1.212 5.555-.718s31.897 15.354 67.623 33.018"
+      fill="#3189c8"
+      fill-rule="evenodd"
+    />
   </svg>
 </template>
diff --git a/src/components/transitions/FadeTransition.vue b/src/components/transitions/FadeTransition.vue
index 4f9815dc..0920b63d 100644
--- a/src/components/transitions/FadeTransition.vue
+++ b/src/components/transitions/FadeTransition.vue
@@ -1,3 +1,13 @@
+<script setup>
+defineProps({
+  mode: {
+    type: String,
+    default: 'out-in'
+  },
+  simultaneous: Boolean
+})
+</script>
+
 <template>
   <transition
     :mode="!simultaneous ? mode : null"
@@ -11,15 +21,3 @@
     <slot />
   </transition>
 </template>
-
-<script>
-export default {
-  props: {
-    mode: {
-      type: String,
-      default: 'out-in'
-    },
-    simultaneous: Boolean
-  }
-}
-</script>
diff --git a/src/components/transitions/ScaleTransition.vue b/src/components/transitions/ScaleTransition.vue
index a5e0bc53..77635b76 100644
--- a/src/components/transitions/ScaleTransition.vue
+++ b/src/components/transitions/ScaleTransition.vue
@@ -1,3 +1,13 @@
+<script setup>
+defineProps({
+  mode: {
+    type: String,
+    default: 'out-in'
+  },
+  simultaneous: Boolean
+})
+</script>
+
 <template>
   <transition
     :mode="!simultaneous ? mode : null"
@@ -11,15 +21,3 @@
     <slot />
   </transition>
 </template>
-
-<script>
-export default {
-  props: {
-    mode: {
-      type: String,
-      default: 'out-in'
-    },
-    simultaneous: Boolean
-  }
-}
-</script>
diff --git a/src/composables/useAppInfo.js b/src/composables/useAppInfo.js
index 80672c11..1f5b3e97 100644
--- a/src/composables/useAppInfo.js
+++ b/src/composables/useAppInfo.js
@@ -1,6 +1,6 @@
 import { readonly, ref } from 'vue'
 
-export default function useAppInfo () {
+export default function useAppInfo() {
   const appVersion = ref(import.meta.env.PACKAGE_VERSION)
   // const gitHash = ref(import.meta.env.VITE_APP_GIT_HASH)
 
diff --git a/src/composables/useDarkMode.js b/src/composables/useDarkMode.js
index f21134f5..dd53b3dc 100644
--- a/src/composables/useDarkMode.js
+++ b/src/composables/useDarkMode.js
@@ -2,7 +2,7 @@ import { computed, onMounted, onUnmounted, readonly, ref, watch } from 'vue'
 
 import { useSettingsStore, THEME_SYSTEM, THEME_DARK } from '@/stores/settings'
 
-export default function useDarkMode () {
+export default function useDarkMode() {
   const settingsStore = useSettingsStore()
 
   const mediaDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
@@ -15,7 +15,7 @@ export default function useDarkMode () {
   /**
    * @param {MediaQueryListEvent} event
    */
-  function handleChange (event) {
+  function handleChange(event) {
     if (theme.value === 'system') {
       darkMode.value = event.matches
     }
@@ -23,22 +23,23 @@ export default function useDarkMode () {
 
   if (window.matchMedia) {
     onMounted(() => {
-      window.matchMedia('(prefers-color-scheme: dark)')
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
         .addEventListener('change', handleChange)
     })
 
     onUnmounted(() => {
-      window.matchMedia('(prefers-color-scheme: dark)')
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
         .removeEventListener('change', handleChange)
     })
   }
 
-  watch(theme, newValue => {
-    darkMode.value = newValue === THEME_DARK ||
-      (
-        newValue === THEME_SYSTEM &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-      )
+  watch(theme, (newValue) => {
+    darkMode.value =
+      newValue === THEME_DARK ||
+      (newValue === THEME_SYSTEM &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
   })
 
   return {
diff --git a/src/composables/useDebouncedRef.js b/src/composables/useDebouncedRef.js
index a213fb1b..500658a9 100644
--- a/src/composables/useDebouncedRef.js
+++ b/src/composables/useDebouncedRef.js
@@ -1,7 +1,7 @@
 // https://javascript.plainenglish.io/how-to-create-a-debounced-ref-in-vue-3-using-composition-api-c464cc39c82a
 import { ref, customRef } from 'vue'
 
-const debounce = (fn, delay = 0, immediate = false) => {
+function debounce(fn, delay = 0, immediate = false) {
   let timeout
   return (...args) => {
     if (immediate && !timeout) fn(...args)
@@ -13,15 +13,15 @@ const debounce = (fn, delay = 0, immediate = false) => {
   }
 }
 
-const useDebouncedRef = (initialValue, delay, immediate) => {
+function useDebouncedRef(initialValue, delay, immediate) {
   const state = ref(initialValue)
   const debouncedRef = customRef((track, trigger) => ({
-    get () {
+    get() {
       track()
       return state.value
     },
     set: debounce(
-      value => {
+      (value) => {
         state.value = value
         trigger()
       },
diff --git a/src/composables/useImageLazyLoader.js b/src/composables/useImageLazyLoader.js
index e7ed254d..dd9bfef9 100644
--- a/src/composables/useImageLazyLoader.js
+++ b/src/composables/useImageLazyLoader.js
@@ -1,6 +1,6 @@
 import { computed, onUnmounted, readonly, ref, watch } from 'vue'
 
-export default function useImageLazyLoader (imageUrl, elRef) {
+export default function useImageLazyLoader(imageUrl, elRef) {
   const imageHasError = ref(false)
   const imageLoading = ref(true)
   const intersected = ref(false)
@@ -25,7 +25,7 @@ export default function useImageLazyLoader (imageUrl, elRef) {
     imageLoading.value = false
   }
 
-  function loadImage () {
+  function loadImage() {
     if (imageUrl.value && imageUrl.value.length > 0) {
       image.src = imageUrl.value
     } else {
@@ -34,8 +34,8 @@ export default function useImageLazyLoader (imageUrl, elRef) {
     }
   }
 
-  function setupObserver () {
-    observer.value = new IntersectionObserver(entries => {
+  function setupObserver() {
+    observer.value = new IntersectionObserver((entries) => {
       const el = entries[0]
       if (el.isIntersecting) {
         intersected.value = true
@@ -46,7 +46,7 @@ export default function useImageLazyLoader (imageUrl, elRef) {
     observer.value.observe(elRef.value.$el || elRef.value)
   }
 
-  function disconnectObserver () {
+  function disconnectObserver() {
     observer.value.disconnect()
   }
 
@@ -56,7 +56,7 @@ export default function useImageLazyLoader (imageUrl, elRef) {
     }
   })
 
-  watch(intersected, newValue => {
+  watch(intersected, (newValue) => {
     if (newValue) {
       loadImage()
     }
diff --git a/src/composables/useImageLoader.js b/src/composables/useImageLoader.js
index 146e8dfd..e99ca4dd 100644
--- a/src/composables/useImageLoader.js
+++ b/src/composables/useImageLoader.js
@@ -1,6 +1,6 @@
 import { readonly, ref, watch } from 'vue'
 
-export default function useImageLoader (imageUrl) {
+export default function useImageLoader(imageUrl) {
   const imageHasError = ref(false)
   const imageLoading = ref(true)
   const imageWidth = ref(0)
diff --git a/src/composables/useIsbnSearch.js b/src/composables/useIsbnSearch.js
index beb7f56d..88dd0872 100644
--- a/src/composables/useIsbnSearch.js
+++ b/src/composables/useIsbnSearch.js
@@ -2,7 +2,7 @@ import { computed, readonly, ref } from 'vue'
 
 import lookupSearch from '@/services/lookup'
 
-export default function useIsbnSearch (isbnRef) {
+export default function useIsbnSearch(isbnRef) {
   const errorMessage = ref('')
   const results = ref(null)
   const searching = ref(false)
@@ -10,14 +10,14 @@ export default function useIsbnSearch (isbnRef) {
 
   const failed = computed(() => errorMessage.value.length > 0)
 
-  function clear () {
+  function clear() {
     noResultsFound.value = false
     results.value = null
     searching.value = false
     errorMessage.value = false
   }
 
-  async function search () {
+  async function search() {
     if (isbnRef.value.length === 0) {
       return
     }
diff --git a/src/composables/useMarkdown.js b/src/composables/useMarkdown.js
index 5b66ae65..d1c6f5fc 100644
--- a/src/composables/useMarkdown.js
+++ b/src/composables/useMarkdown.js
@@ -9,9 +9,10 @@ import slugify from 'slugify'
 
 import { useI18n } from 'vue-i18n'
 
-function youtube (md) {
+function youtube(md) {
   const defaultRenderer = md.renderer.rules.image
-  const youtubeRegex = /^https?:\/\/(www\.)?youtu\.?be(\.com)?\/(watch|embed|playlist)?(\?(?:v|list)=|\/)?([^$/\n]+)/
+  const youtubeRegex =
+    /^https?:\/\/(www\.)?youtu\.?be(\.com)?\/(watch|embed|playlist)?(\?(?:v|list)=|\/)?([^$/\n]+)/
 
   md.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
@@ -50,7 +51,7 @@ function youtube (md) {
   }
 }
 
-function imageLazyLoad (md) {
+function imageLazyLoad(md) {
   const defaultRenderer = md.renderer.rules.image
 
   md.renderer.rules.image = (tokens, idx, options, env, self) => {
@@ -66,10 +67,12 @@ function imageLazyLoad (md) {
   }
 }
 
-function externalLinks (md) {
-  const defaultRenderer = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
-    return self.renderToken(tokens, idx, options)
-  }
+function externalLinks(md) {
+  const defaultRenderer =
+    md.renderer.rules.link_open ||
+    function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
 
   md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
     const aIndex = tokens[idx].attrIndex('target')
@@ -87,7 +90,7 @@ function externalLinks (md) {
   }
 }
 
-export default function useMarkdown (options = {}) {
+export default function useMarkdown(options = {}) {
   const { t } = useI18n({ useScope: 'global' })
 
   let markdown = md(options.mdOptions || {})
@@ -95,10 +98,10 @@ export default function useMarkdown (options = {}) {
     .use(mdDefList)
     .use(mdAnchor, {
       permalink: mdAnchor.permalink.linkInsideHeader(),
-      slugify: s => slugify(s, { lower: true })
+      slugify: (s) => slugify(s, { lower: true })
     })
     .use(mdToc, {
-      slugify: s => slugify(s, { lower: true }),
+      slugify: (s) => slugify(s, { lower: true }),
       listType: 'ol',
       containerHeaderHtml: `<h2>${t('about.summary')}</h2>`
     })
@@ -123,7 +126,7 @@ export default function useMarkdown (options = {}) {
       ...(options.disable || [])
     ])
 
-  function renderMarkdown (source) {
+  function renderMarkdown(source) {
     return markdown.render(source)
   }
 
diff --git a/src/composables/useMotionSafe.js b/src/composables/useMotionSafe.js
index a0f0cd98..eb1189ff 100644
--- a/src/composables/useMotionSafe.js
+++ b/src/composables/useMotionSafe.js
@@ -1,23 +1,28 @@
 import { onMounted, onUnmounted, readonly, ref } from 'vue'
 
-export default function useMotionSafe () {
-  const motionSafe = ref(window.matchMedia && window.matchMedia('(prefers-reduced-motion: no-preference)').matches)
+export default function useMotionSafe() {
+  const motionSafe = ref(
+    window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+  )
 
   /**
    * @param {MediaQueryListEvent} event
    */
-  function handleChange (event) {
+  function handleChange(event) {
     motionSafe.value = event.matches
   }
 
   if (window.matchMedia) {
     onMounted(() => {
-      window.matchMedia('(prefers-reduced-motion: no-preference)')
+      window
+        .matchMedia('(prefers-reduced-motion: no-preference)')
         .addEventListener('change', handleChange)
     })
 
     onUnmounted(() => {
-      window.matchMedia('(prefers-reduced-motion: no-preference)')
+      window
+        .matchMedia('(prefers-reduced-motion: no-preference)')
         .removeEventListener('change', handleChange)
     })
   }
diff --git a/src/composables/useTailwindTheme.js b/src/composables/useTailwindTheme.js
index 1fb47910..381fff99 100644
--- a/src/composables/useTailwindTheme.js
+++ b/src/composables/useTailwindTheme.js
@@ -1,6 +1,6 @@
 import resolveConfig from 'tailwindcss/resolveConfig'
 import tailwindConfig from 'tailwind.config.js'
 
-export default function useTailwindTheme () {
+export default function useTailwindTheme() {
   return resolveConfig(tailwindConfig)
 }
diff --git a/src/data/DataTable.js b/src/data/DataTable.js
index 00ffecb6..054dc6b4 100644
--- a/src/data/DataTable.js
+++ b/src/data/DataTable.js
@@ -11,19 +11,19 @@ export default class DataTable {
    *
    * @param {google.visualization.DataTable} dataTable The original instance
    */
-  constructor (dataTable) {
+  constructor(dataTable) {
     this.#dataTable = dataTable
   }
 
-  get rows () {
+  get rows() {
     return this.#dataTable.getNumberOfRows()
   }
 
-  get columns () {
+  get columns() {
     return this.#dataTable.getNumberOfColumns()
   }
 
-  get length () {
+  get length() {
     return this.rows
   }
 
@@ -32,11 +32,11 @@ export default class DataTable {
    *
    * @type {any[][]}
    */
-  get asArray () {
+  get asArray() {
     return Array.from(this)
   }
 
-  getRow (rowIdx) {
+  getRow(rowIdx) {
     const rowData = []
 
     for (let j = 0; j < this.columns; j++) {
@@ -46,12 +46,12 @@ export default class DataTable {
     return rowData
   }
 
-  getValue (rowIndex, columnIndex) {
+  getValue(rowIndex, columnIndex) {
     return this.#dataTable.getValue(rowIndex, columnIndex)
   }
 
   /** @type {Iterable<any[]>} */
-  [Symbol.iterator] () {
+  [Symbol.iterator]() {
     let row = 0
 
     return {
diff --git a/src/data/Query.js b/src/data/Query.js
index 4753fd21..a9159709 100644
--- a/src/data/Query.js
+++ b/src/data/Query.js
@@ -28,7 +28,7 @@ export default class Query {
    * @param {Object | null} options.builderObj The builder object
    * @param {string} options.queryString The query string
    */
-  constructor (dataSourceUrl, { builderObj, queryString }) {
+  constructor(dataSourceUrl, { builderObj, queryString }) {
     this.#builderObj = builderObj ? cloneDeep(builderObj) : null
 
     this.#query = new window.google.visualization.Query(dataSourceUrl)
@@ -40,9 +40,9 @@ export default class Query {
    *
    * @returns {Promise<DataTable>} The DataTable object
    */
-  async send () {
+  async send() {
     return new Promise((resolve, reject) => {
-      this.#query.send(response => {
+      this.#query.send((response) => {
         if (response.isError()) {
           const message = i18n.global.t('errors.badQuery', {
             error: response.getMessage()
@@ -57,7 +57,7 @@ export default class Query {
     })
   }
 
-  newBuilder () {
+  newBuilder() {
     if (this.#builderObj === null) {
       return null
     }
diff --git a/src/data/QueryBuilder.js b/src/data/QueryBuilder.js
index ad5c31e0..e8279098 100644
--- a/src/data/QueryBuilder.js
+++ b/src/data/QueryBuilder.js
@@ -21,7 +21,7 @@ export default class QueryBuilder {
    *
    * @param {string?} sheetUrl The sheet URL
    */
-  constructor (sheetUrl) {
+  constructor(sheetUrl) {
     this.#sheetUrl = sheetUrl || ''
     this.#where = { operator: QueryBuilder.OR, restrictions: [] }
   }
@@ -32,7 +32,7 @@ export default class QueryBuilder {
    * @param  {...string} columns The columns to select
    * @returns {QueryBuilder} The current instance
    */
-  select (...columns) {
+  select(...columns) {
     this.#select = columns.length > 0 ? columns : []
 
     return this
@@ -46,7 +46,7 @@ export default class QueryBuilder {
    * @param {string} value The value
    * @returns {QueryBuilder} The current instance
    */
-  where (column, op, value) {
+  where(column, op, value) {
     if (arguments.length === 3) {
       this.#where.restrictions.push([column, op, value])
     } else if (arguments.length === 2 && op === null) {
@@ -72,7 +72,7 @@ export default class QueryBuilder {
    * @param {string} value The value
    * @returns {QueryBuilder} The current instance
    */
-  andWhere (column, op, value) {
+  andWhere(column, op, value) {
     this.#where.operator = QueryBuilder.AND
     this.where(...arguments)
 
@@ -87,7 +87,7 @@ export default class QueryBuilder {
    * @param {string} value The value
    * @returns {QueryBuilder} The current instance
    */
-  orWhere (column, op, value) {
+  orWhere(column, op, value) {
     this.#where.operator = QueryBuilder.OR
     this.where(...arguments)
 
@@ -100,7 +100,7 @@ export default class QueryBuilder {
    * @param  {...any} restrictions The restrictions
    * @returns An OR combined restriction
    */
-  static or (...restrictions) {
+  static or(...restrictions) {
     return {
       operator: QueryBuilder.OR,
       restrictions
@@ -113,7 +113,7 @@ export default class QueryBuilder {
    * @param  {...any} restrictions The restrictions
    * @returns An AND combined restriction
    */
-  static and (...restrictions) {
+  static and(...restrictions) {
     return {
       operator: QueryBuilder.AND,
       restrictions
@@ -126,7 +126,7 @@ export default class QueryBuilder {
    * @param  {...any} restrictions The restrictions
    * @returns An AND combined restriction
    */
-  static andNot (...restrictions) {
+  static andNot(...restrictions) {
     return {
       negated: true,
       operator: QueryBuilder.AND,
@@ -140,7 +140,7 @@ export default class QueryBuilder {
    * @param  {...string} columns The columns to group
    * @returns {QueryBuilder} The current instance
    */
-  groupBy (...columns) {
+  groupBy(...columns) {
     this.#groupBy = columns.length > 0 ? columns : []
 
     return this
@@ -152,7 +152,7 @@ export default class QueryBuilder {
    * @param  {...[string, 'asc' | 'desc']} columns The columns to sort
    * @returns {QueryBuilder} The current instance
    */
-  orderBy (...columns) {
+  orderBy(...columns) {
     this.#orderBy = columns.length > 0 ? columns : []
 
     return this
@@ -164,7 +164,7 @@ export default class QueryBuilder {
    * @param {number | null | undefined} limit The limit
    * @returns {QueryBuilder} The current instance
    */
-  limit (limit) {
+  limit(limit) {
     this.#limit = limit
 
     return this
@@ -176,7 +176,7 @@ export default class QueryBuilder {
    * @param {number | null | undefined} offset The offset
    * @returns {QueryBuilder} The current instance
    */
-  offset (offset) {
+  offset(offset) {
     this.#offset = offset
 
     return this
@@ -185,7 +185,7 @@ export default class QueryBuilder {
   /**
    * Convert the query to an object.
    */
-  toObject () {
+  toObject() {
     return {
       select: this.#select,
       where: this.#where,
@@ -203,7 +203,7 @@ export default class QueryBuilder {
    * @param {Object} obj The object
    * @returns {QueryBuilder} The instance
    */
-  static fromObject (obj) {
+  static fromObject(obj) {
     const qb = new QueryBuilder()
     qb.#select = obj.select || qb.#select
     qb.#where = obj.where || qb.#where
@@ -216,18 +216,21 @@ export default class QueryBuilder {
     return qb
   }
 
-  #whereString (where) {
+  #whereString(where) {
     if (Array.isArray(where)) {
       const [column, op, value] = where
-      const fixedValue = typeof value === 'string'
-        ? (op === 'is' || op === 'is not' ? value : `"${value}"`)
-        : value
+      const fixedValue =
+        typeof value === 'string'
+          ? op === 'is' || op === 'is not'
+            ? value
+            : `"${value}"`
+          : value
 
       return [column, op, fixedValue].join(' ')
     }
 
     const string = where.restrictions
-      .map(restriction => this.#whereString(restriction))
+      .map((restriction) => this.#whereString(restriction))
       .join(` ${where.operator} `)
     const not = where.negated ? 'not ' : ''
 
@@ -237,30 +240,22 @@ export default class QueryBuilder {
   /**
    * Generate the query string.
    */
-  toString () {
+  toString() {
     const parts = [
-      'select ' + ((this.#select.length > 0) ? this.#select.join(', ') : '*'),
-      (this.#where.restrictions.length > 0)
+      'select ' + (this.#select.length > 0 ? this.#select.join(', ') : '*'),
+      this.#where.restrictions.length > 0
         ? 'where ' + this.#whereString(this.#where)
         : '',
-      (this.#groupBy.length > 0)
-        ? 'group by ' + this.#groupBy.join(', ')
-        : '',
-      (this.#orderBy.length > 0)
+      this.#groupBy.length > 0 ? 'group by ' + this.#groupBy.join(', ') : '',
+      this.#orderBy.length > 0
         ? 'order by ' +
-          (
-            this.#orderBy
-              .map(([column, sort]) => `${column} ${sort}`)
-              .join(', ')
-          )
+          this.#orderBy.map(([column, sort]) => `${column} ${sort}`).join(', ')
         : '',
-      (this.#limit !== null) ? 'limit ' + this.#limit : '',
-      (this.#offset !== null) ? 'offset ' + this.#offset : ''
+      this.#limit !== null ? 'limit ' + this.#limit : '',
+      this.#offset !== null ? 'offset ' + this.#offset : ''
     ]
 
-    return parts
-      .filter(part => part.length > 0)
-      .join('\n')
+    return parts.filter((part) => part.length > 0).join('\n')
   }
 
   /**
@@ -268,7 +263,7 @@ export default class QueryBuilder {
    *
    * @returns {Query} The built query
    */
-  build () {
+  build() {
     return new Query(this.#sheetUrl, {
       builderObj: this.toObject(),
       queryString: this.toString()
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 478785ae..9bc75c5d 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -10,12 +10,11 @@ const numberModules = !isTest && import.meta.globEager('./number/*.js')
 
 const replacingRegex = /^\.\/(.*)\/(.*)\.js$/
 
-function mapToLocale (collection) {
-  const fixedEntries = Object.entries(collection)
-    .map(([path, value]) => [
-      path.replace(replacingRegex, '$2'),
-      value.default
-    ])
+function mapToLocale(collection) {
+  const fixedEntries = Object.entries(collection).map(([path, value]) => [
+    path.replace(replacingRegex, '$2'),
+    value.default
+  ])
 
   return Object.fromEntries(fixedEntries)
 }
@@ -32,7 +31,7 @@ const numberFormats = isTest
 
 const navigatorLanguage = navigator.language || navigator.userLanguage
 const userLocale = !isTest
-  ? (localStorage.getItem('locale') || navigatorLanguage)
+  ? localStorage.getItem('locale') || navigatorLanguage
   : 'en-US'
 
 const locale = messages[userLocale] ? userLocale : 'en-US'
diff --git a/src/i18n/messages/en-US.js b/src/i18n/messages/en-US.js
index 9d6d9649..8b3ac5d4 100644
--- a/src/i18n/messages/en-US.js
+++ b/src/i18n/messages/en-US.js
@@ -34,8 +34,10 @@ export default {
     pageChanged: 'Navigated to {pageTitle}.'
   },
   errors: {
-    cookiesDisabled: 'The cookies are disabled. Enable them and refresh the page.',
-    authStartedFailed: 'It was not possible to start the authentication system.',
+    cookiesDisabled:
+      'The cookies are disabled. Enable them and refresh the page.',
+    authStartedFailed:
+      'It was not possible to start the authentication system.',
     missingScopes: 'Some permissions were not granted to the app.',
     badQuery: 'There is a error in the query: {error}',
     refresh: 'Refresh the page',
@@ -93,14 +95,15 @@ export default {
         title: 'No covers found',
         description: 'You can add a custom one below.'
       },
-      about: 'The images are obtained from Amazon and the publishers\' websites.',
+      about:
+        "The images are obtained from Amazon and the publishers' websites.",
       custom: {
         title: 'Custom image',
         description: 'You can also add a new image to the options.',
         label: 'Image URL',
         placeholder: 'Insert a custom URL',
         add: 'Add',
-        error: 'There\'s an error in the custom image formulary'
+        error: "There's an error in the custom image formulary"
       }
     },
     form: {
@@ -129,7 +132,8 @@ export default {
         labelPrice: '19.95',
         paidPrice: '15.95',
         store: 'Amazon',
-        synopsis: 'A secret U.S. chemical weapon called "MW" accidentally leaks…',
+        synopsis:
+          'A secret U.S. chemical weapon called "MW" accidentally leaks…',
         notes: 'The manga have a Tezuka autograph in the first page.',
         boughtAt: '02/18/2021'
       },
@@ -142,9 +146,10 @@ export default {
     },
     deleteModal: {
       title: 'Delete the book | Delete the books',
-      message1: 'Are you sure you want to delete this book? | ' +
+      message1:
+        'Are you sure you want to delete this book? | ' +
         'Are you sure you want to delete this books?',
-      message2: 'This action can\'t be undone.',
+      message2: "This action can't be undone.",
       delete: 'Delete',
       cancel: 'Cancel'
     },
@@ -235,7 +240,7 @@ export default {
   },
   pageNotFound: {
     title: 'Page not found',
-    description: 'The content you\'re looking for coudn\'t be found.',
+    description: "The content you're looking for coudn't be found.",
     goBack: 'Go back to home',
     goBackDashboard: 'Go back to dashboard'
   },
@@ -403,7 +408,7 @@ export default {
           readToday: 'I finished the reading today',
           readOtherDate: 'I finished the reading at other date'
         },
-        fieldHelp: 'Leave it blank if you don\'t remember.',
+        fieldHelp: "Leave it blank if you don't remember.",
         actionClear: 'Clear'
       },
       organizationForm: {
@@ -441,7 +446,7 @@ export default {
       nextReads: 'Next reads',
       groups: 'Groups',
       empty: {
-        title: 'You don\'t have any books yet',
+        title: "You don't have any books yet",
         description: `
           Create at least one book to allow the information to
           be calculated and displayed at this page.
@@ -457,7 +462,8 @@ export default {
       filter: 'Filter',
       newBook: 'New book',
       items: {
-        current: 'Items from all groups | Items from the group {count} | Items from {count} groups',
+        current:
+          'Items from all groups | Items from the group {count} | Items from {count} groups',
         tableColumns: {
           actions: 'Actions',
           deleteSelection: 'Delete'
@@ -492,12 +498,12 @@ export default {
         sortBy: 'Sort by',
         favorites: {
           label: 'Favorites',
-          indiferent: 'Doesn\'t matter',
+          indiferent: "Doesn't matter",
           only: 'Only'
         },
         futureItems: {
           label: 'Future itens',
-          indiferent: 'Doesn\'t matter',
+          indiferent: "Doesn't matter",
           only: 'Only',
           hide: 'Hide'
         }
@@ -519,7 +525,8 @@ export default {
     },
     newBook: {
       title: 'New book',
-      description: 'Fill out the information below to create the book in the spreadsheet.',
+      description:
+        'Fill out the information below to create the book in the spreadsheet.',
       step: 'Step {0} of {1}',
       goBack: 'Previous step',
       autoFill: {
@@ -558,11 +565,12 @@ export default {
             *[ISBN]: International Standard Book Number
           `,
           additionalInfo: 'Additional information',
-          wikipediaLink: 'https://en.wikipedia.org/wiki/International_Standard_Book_Number'
+          wikipediaLink:
+            'https://en.wikipedia.org/wiki/International_Standard_Book_Number'
         },
         existAlert: {
           title: 'A book with this ISBN already exists',
-          body: 'You can make a copy if it\'s your need.',
+          body: "You can make a copy if it's your need.",
           actionView: 'View',
           actionMakeCopy: 'Make a copy'
         }
@@ -710,7 +718,7 @@ export default {
       title: 'Statistics',
       moreSoon: 'More statistics soon.',
       empty: {
-        title: 'You don\'t have any books yet',
+        title: "You don't have any books yet",
         description: `
           Create at least one book so we can start to do the calculation
           of your library statistics.
@@ -718,7 +726,7 @@ export default {
         action: 'New book'
       },
       tooEarly: {
-        title: 'It\'s too early to display the statistics',
+        title: "It's too early to display the statistics",
         description: `
           The statistics will be shown after books within the
           period of at least two months are created.
diff --git a/src/i18n/messages/pt-BR.js b/src/i18n/messages/pt-BR.js
index eb7a2ec8..051a74b0 100644
--- a/src/i18n/messages/pt-BR.js
+++ b/src/i18n/messages/pt-BR.js
@@ -34,8 +34,10 @@ export default {
     pageChanged: 'Página alterada para {pageTitle}.'
   },
   errors: {
-    cookiesDisabled: 'Os cookies estão desabilitados. Habilite-os e atualize a página.',
-    authStartedFailed: 'Não foi possivel inicializar o sistema de autenticação.',
+    cookiesDisabled:
+      'Os cookies estão desabilitados. Habilite-os e atualize a página.',
+    authStartedFailed:
+      'Não foi possivel inicializar o sistema de autenticação.',
     missingScopes: 'Algumas permissões não foram concedidas para a aplicação.',
     badQuery: 'Há um erro na query: {error}',
     refresh: 'Atualizar a página',
@@ -129,7 +131,8 @@ export default {
         labelPrice: '26,90',
         paidPrice: '22,90',
         store: 'Amazon',
-        synopsis: 'No meio dos pertences de seu falecido pai, o garoto Pete encontra…',
+        synopsis:
+          'No meio dos pertences de seu falecido pai, o garoto Pete encontra…',
         notes: 'O mangá tem um autógrafo do Tezuka na primeira página.',
         boughtAt: '18/02/2021'
       },
@@ -142,7 +145,8 @@ export default {
     },
     deleteModal: {
       title: 'Deletar livro | Deletar livros',
-      message1: 'Você tem certeza de que deseja deletar este livro? | ' +
+      message1:
+        'Você tem certeza de que deseja deletar este livro? | ' +
         'Você tem certeza de que deseja deletar estes livros?',
       message2: 'Esta ação não pode ser revertida.',
       delete: 'Deletar',
@@ -375,7 +379,8 @@ export default {
       },
       editDialog: {
         title: 'Edição do livro',
-        description: 'Preencha as informações abaixo para alterar os dados do livro.'
+        description:
+          'Preencha as informações abaixo para alterar os dados do livro.'
       },
       editForm: {
         title: 'Metadados',
@@ -458,7 +463,8 @@ export default {
       filter: 'Filtrar',
       newBook: 'Novo livro',
       items: {
-        current: 'Itens de todos os grupos | Itens do grupo {count} | Itens de {count} grupos',
+        current:
+          'Itens de todos os grupos | Itens do grupo {count} | Itens de {count} grupos',
         tableColumns: {
           actions: 'Ações',
           deleteSelection: 'Deletar'
@@ -520,7 +526,8 @@ export default {
     },
     newBook: {
       title: 'Novo livro',
-      description: 'Preencha as informações abaixo para inserir o livro na planilha.',
+      description:
+        'Preencha as informações abaixo para inserir o livro na planilha.',
       step: 'Etapa {0} de {1}',
       goBack: 'Voltar uma etapa',
       autoFill: {
@@ -562,7 +569,8 @@ export default {
             *[ISBN]: International Standard Book Number
           `,
           additionalInfo: 'Informações adicionais',
-          wikipediaLink: 'https://pt.wikipedia.org/wiki/International_Standard_Book_Number'
+          wikipediaLink:
+            'https://pt.wikipedia.org/wiki/International_Standard_Book_Number'
         },
         existAlert: {
           title: 'Já existe um livro com este ISBN',
@@ -741,7 +749,8 @@ export default {
     },
     sheetChooser: {
       title: 'Escolha uma planilha',
-      description: 'Você pode visualizar e editar outras planilhas compartilhadas.',
+      description:
+        'Você pode visualizar e editar outras planilhas compartilhadas.',
       actionCancel: 'Cancelar',
       actionSelect: 'Selecionar',
       actionSelectSheet: 'Escolher planilha',
diff --git a/src/model/Book.js b/src/model/Book.js
index d22bdae6..9fa531ce 100644
--- a/src/model/Book.js
+++ b/src/model/Book.js
@@ -1,11 +1,11 @@
 import { nanoid } from 'nanoid'
 
-import { PUBLISHER_REPLACEMENTS } from '../services/lookup/Cbl'
+import { PUBLISHER_REPLACEMENTS } from '@/services/lookup/Cbl'
 import {
   ean as validateEan,
   isbn as validateIsbn,
   issn as validateIssn
-} from '../util/validators'
+} from '@/util/validators'
 
 import i18n from '@/i18n'
 import { decimalComma } from '@/util/validators'
@@ -78,10 +78,7 @@ export const PropertyToColumn = {
     CollectionColumns.LABEL_PRICE_VALUE
   ],
   boughtAt: [CollectionColumns.BOUGHT_AT],
-  readAt: [
-    CollectionColumns.READ_AT,
-    CollectionColumns.UPDATED_AT
-  ],
+  readAt: [CollectionColumns.READ_AT, CollectionColumns.UPDATED_AT],
   createdAt: [CollectionColumns.CREATED_AT],
   updatedAt: [CollectionColumns.UPDATED_AT]
 }
@@ -177,7 +174,7 @@ export default class Book {
    *
    * @param {Partial<Book>} properties Object with the book properties.
    */
-  constructor (properties) {
+  constructor(properties) {
     Object.assign(this, properties)
   }
 
@@ -186,7 +183,7 @@ export default class Book {
    *
    * @type {{ title: string, number: string?, main: string, subtitle: string? }}
    */
-  get titleParts () {
+  get titleParts() {
     const titleRegex = /\s+#(\d+(?:[.,]\d+)?)(?::\s+)?/
     const parts = this.title.split(titleRegex)
 
@@ -207,7 +204,7 @@ export default class Book {
   /**
    * The type of the book barcode.
    */
-  get codeType () {
+  get codeType() {
     return Book.getCodeType(this.code)
   }
 
@@ -216,7 +213,7 @@ export default class Book {
    *
    * @type {string}
    */
-  get authorsStr () {
+  get authorsStr() {
     return this.authors.join('; ')
   }
 
@@ -225,8 +222,8 @@ export default class Book {
    *
    * @type {boolean}
    */
-  get isNsfw () {
-    return this.tags.some(tag => NSFW_TAGS.includes(tag.toLowerCase()))
+  get isNsfw() {
+    return this.tags.some((tag) => NSFW_TAGS.includes(tag.toLowerCase()))
   }
 
   /**
@@ -234,7 +231,7 @@ export default class Book {
    *
    * @type {boolean}
    */
-  get isRead () {
+  get isRead() {
     return this.status === STATUS_READ
   }
 
@@ -243,33 +240,31 @@ export default class Book {
    *
    * @type {boolean}
    */
-  get isFuture () {
+  get isFuture() {
     return this.status === STATUS_FUTURE
   }
 
   /** @type {string} */
-  get labelPriceValueStr () {
-    return (this.labelPrice?.value && monetaryValidator(this.labelPrice.value))
+  get labelPriceValueStr() {
+    return this.labelPrice?.value && monetaryValidator(this.labelPrice.value)
       ? n(this.labelPrice.value, 'decimal')
       : ''
   }
 
   /** @type {string} */
-  get paidPriceValueStr () {
-    return (this.paidPrice?.value && monetaryValidator(this.paidPrice.value))
+  get paidPriceValueStr() {
+    return this.paidPrice?.value && monetaryValidator(this.paidPrice.value)
       ? n(this.paidPrice.value, 'decimal')
       : ''
   }
 
   /** @type {string} */
-  get dimensionsStr () {
+  get dimensionsStr() {
     if (!this.dimensions?.width || !this.dimensions?.height) {
       return ''
     }
 
-    const width = isNaN(this.dimensions.width)
-      ? ''
-      : n(this.dimensions.width)
+    const width = isNaN(this.dimensions.width) ? '' : n(this.dimensions.width)
     const height = isNaN(this.dimensions.height)
       ? ''
       : n(this.dimensions.height)
@@ -278,7 +273,7 @@ export default class Book {
   }
 
   /** @type {string} */
-  get boughtAtStr () {
+  get boughtAtStr() {
     return this.boughtAt ? this.boughtAt.toISOString().substring(0, 10) : ''
   }
 
@@ -287,7 +282,7 @@ export default class Book {
    *
    * @type {{ countryCode: string, locale: string, flagUrl: string } | null}
    */
-  get isbnData () {
+  get isbnData() {
     if (!this.codeType.includes('ISBN')) {
       return null
     }
@@ -301,11 +296,16 @@ export default class Book {
    * @param {Book} b The other book to compare
    * @returns {number}
    */
-  compare (b) {
-    return this.group.localeCompare(b.group, locale.value) ||
+  compare(b) {
+    return (
+      this.group.localeCompare(b.group, locale.value) ||
       this.titleParts[0].localeCompare(b.titleParts[0], locale.value) ||
       this.publisher.localeCompare(b.publisher, locale.value) ||
-      (this.titleParts[1] || '01').localeCompare(b.titleParts[1] || '01', locale.value)
+      (this.titleParts[1] || '01').localeCompare(
+        b.titleParts[1] || '01',
+        locale.value
+      )
+    )
   }
 
   /**
@@ -313,17 +313,22 @@ export default class Book {
    *
    * @returns {string[]}
    */
-  toArray () {
-    function formatDateToSheet (date) {
-      return `=DATE(${date.getUTCFullYear()}, ${date.getUTCMonth() + 1}, ${date.getUTCDate()})`
+  toArray() {
+    function formatDateToSheet(date) {
+      return `=DATE(${date.getUTCFullYear()}, ${
+        date.getUTCMonth() + 1
+      }, ${date.getUTCDate()})`
     }
 
-    function formatDateTimeToSheet (date) {
-      return formatDateToSheet(date) + ' + ' +
+    function formatDateTimeToSheet(date) {
+      return (
+        formatDateToSheet(date) +
+        ' + ' +
         `TIME(${date.getUTCHours()}, ${date.getUTCMinutes()}, ${date.getUTCSeconds()})`
+      )
     }
 
-    function fixDate (date, timezoneOffset) {
+    function fixDate(date, timezoneOffset) {
       if (date) {
         date.setMinutes(date.getMinutes() - timezoneOffset)
       }
@@ -345,7 +350,8 @@ export default class Book {
       this.authorsStr,
       this.publisher,
       n(this.dimensions.width, 'dimensions', 'en-US') +
-        ' × ' + n(this.dimensions.height, 'dimensions', 'en-US'),
+        ' × ' +
+        n(this.dimensions.height, 'dimensions', 'en-US'),
       this.status || STATUS_UNREAD,
       this.readAt ? formatDateToSheet(fixDate(this.readAt, offset)) : '',
       this.labelPrice.currency,
@@ -370,7 +376,7 @@ export default class Book {
    * @param {any[]} row The data table row data
    * @returns {Book} The formatted book
    */
-  static fromDataTable (rowData) {
+  static fromDataTable(rowData) {
     const row = rowData[Columns.ROW]
     const dimensions = rowData[Columns.DIMENSIONS].split(' × ')
 
@@ -404,7 +410,7 @@ export default class Book {
       synopsis: rowData[Columns.SYNOPSIS] || '',
       notes: rowData[Columns.NOTES] || '',
       tags: rowData[Columns.TAGS]
-        ? rowData[Columns.TAGS].split(/,\s*/).map(t => t.toUpperCase())
+        ? rowData[Columns.TAGS].split(/,\s*/).map((t) => t.toUpperCase())
         : [],
       createdAt: rowData[Columns.CREATED_AT],
       updatedAt: rowData[Columns.UPDATED_AT]
@@ -417,7 +423,7 @@ export default class Book {
    * @param {Object} cblBook The CBL record
    * @returns {Book} A formatted book
    */
-  static fromCbl (cblBook) {
+  static fromCbl(cblBook) {
     const dimensions = cblBook.Dimensao
       ? cblBook.Dimensao.match(/(\d{2})(\d)?x(\d{2})(\d)?$/)
       : null
@@ -427,9 +433,13 @@ export default class Book {
       title: cblBook.Title.trim()
         .replace(/(?::| -)? ?(?:v|vol|volume)?(?:\.|:)? ?(\d+)$/i, ' #$1')
         .replace(/#(\d{1})$/, '#0$1'),
-      authors: cblBook.Profissoes && cblBook.Profissoes.length >= cblBook.Authors.length
-        ? cblBook.Authors.filter((_, i) => CBL_ALLOWED_ROLES.includes(cblBook.Profissoes[i]))
-        : cblBook.Authors,
+      authors:
+        cblBook.Profissoes &&
+        cblBook.Profissoes.length >= cblBook.Authors.length
+          ? cblBook.Authors.filter((_, i) =>
+              CBL_ALLOWED_ROLES.includes(cblBook.Profissoes[i])
+            )
+          : cblBook.Authors,
       publisher: PUBLISHER_REPLACEMENTS[cblBook.Imprint] || cblBook.Imprint,
       dimensions: dimensions
         ? {
@@ -452,12 +462,14 @@ export default class Book {
    * @param {Object} googleBook The Google Book record
    * @returns {Book} A formatted book
    */
-  static fromGoogleBooks (googleBook) {
+  static fromGoogleBooks(googleBook) {
     const volumeInfo = googleBook.volumeInfo
-    const isbn13 = (volumeInfo.industryIdentifiers || [])
-      .find(identifier => identifier.type === 'ISBN_13')
-    const isbn10 = (volumeInfo.industryIdentifiers || [])
-      .find(identifier => identifier.type === 'ISBN_10')
+    const isbn13 = (volumeInfo.industryIdentifiers || []).find(
+      (identifier) => identifier.type === 'ISBN_13'
+    )
+    const isbn10 = (volumeInfo.industryIdentifiers || []).find(
+      (identifier) => identifier.type === 'ISBN_10'
+    )
 
     const width = volumeInfo.dimensions
       ? parseFloat(volumeInfo.dimensions.width.replace(/\s(.*)$/, ''))
@@ -468,7 +480,8 @@ export default class Book {
 
     return new Book({
       code: isbn13 ? isbn13.identifier : isbn10.identifier,
-      title: volumeInfo.title.trim()
+      title: volumeInfo.title
+        .trim()
         .replace(/(?::| -)? ?(?:v|vol|volume)?(?:\.|:)? ?(\d+)$/i, ' #$1')
         .replace(/#(\d{1})$/, '#0$1'),
       authors: volumeInfo.authors || [],
@@ -486,18 +499,22 @@ export default class Book {
    * @param {Object | null} details The record details
    * @returns {Book} A formatted book
    */
-  static fromOpenLibrary (openLibraryBook, details) {
+  static fromOpenLibrary(openLibraryBook, details) {
     const code = openLibraryBook.identifiers.isbn_13
       ? openLibraryBook.identifiers.isbn_13[0]
       : openLibraryBook.identifiers.isbn_10[0]
 
     const book = new Book({
       code,
-      title: openLibraryBook.title.trim()
+      title: openLibraryBook.title
+        .trim()
         .replace(/(?::| -)? ?(?:v|vol|volume)?(?:\.|:)? ?(\d+)$/i, ' #$1')
         .replace(/#(\d{1})$/, '#0$1'),
-      authors: (openLibraryBook.authors || []).map(author => author.name),
-      publisher: openLibraryBook.publishers.length > 0 ? openLibraryBook.publishers[0].name : '',
+      authors: (openLibraryBook.authors || []).map((author) => author.name),
+      publisher:
+        openLibraryBook.publishers.length > 0
+          ? openLibraryBook.publishers[0].name
+          : '',
       coverUrl: openLibraryBook.cover ? openLibraryBook.cover.large : '',
       provider: 'Open Library'
     })
@@ -508,16 +525,17 @@ export default class Book {
         .replace(' centimeters', '')
         .split(' x ')
         .map(parseFloat)
-        .filter(dm => !isNaN(dm))
+        .filter((dm) => !isNaN(dm))
 
       Object.assign(book, {
         synopsis: details.description || '',
-        dimensions: physicalDimensions.includes('centimeters') && dimensions.length === 3
-          ? {
-              width: dimensions[1],
-              height: dimensions[0]
-            }
-          : null
+        dimensions:
+          physicalDimensions.includes('centimeters') && dimensions.length === 3
+            ? {
+                width: dimensions[1],
+                height: dimensions[0]
+              }
+            : null
       })
     }
 
@@ -530,7 +548,7 @@ export default class Book {
    * @param {string} code The barcode of the book.
    * @returns {'ISBN-13' | 'ISBN-10' | 'ISSN' | 'EAN-13' | 'ID' | 'N/A'} The type of the code
    */
-  static getCodeType (code) {
+  static getCodeType(code) {
     code = code.replace(/-/g, '')
 
     if (validateIsbn(code)) {
diff --git a/src/mutations/useBulkDeleteBookMutation.js b/src/mutations/useBulkDeleteBookMutation.js
index fcb9f139..fc35cb8a 100644
--- a/src/mutations/useBulkDeleteBookMutation.js
+++ b/src/mutations/useBulkDeleteBookMutation.js
@@ -3,26 +3,26 @@ import { useMutation, useQueryClient } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import bulkDeleteBooks from '@/services/sheet/bulkDeleteBooks'
 
-export default function useBulkDeleteBookMutation () {
+export default function useBulkDeleteBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation(books => bulkDeleteBooks(sheetStore.sheetId, books), {
-    onSuccess (_, books) {
-      books.forEach(book => {
+  return useMutation((books) => bulkDeleteBooks(sheetStore.sheetId, books), {
+    onSuccess(_, books) {
+      books.forEach((book) => {
         queryClient.setQueryData(['book', book.id], null)
       })
 
-      queryClient.setQueriesData('books', oldData => {
+      queryClient.setQueriesData('books', (oldData) => {
         return {
           ...oldData,
-          books: oldData.books.filter(oldBook => {
+          books: oldData.books.filter((oldBook) => {
             return books.find(({ id }) => id === oldBook.id) === undefined
           })
         }
       })
     },
-    onSettled () {
+    onSettled() {
       queryClient.invalidateQueries('last-added')
       queryClient.invalidateQueries('latest-readings')
       queryClient.invalidateQueries('next-reads')
diff --git a/src/mutations/useBulkEditBookMutation.js b/src/mutations/useBulkEditBookMutation.js
index ddf6d6cc..9f43fa4e 100644
--- a/src/mutations/useBulkEditBookMutation.js
+++ b/src/mutations/useBulkEditBookMutation.js
@@ -3,26 +3,26 @@ import { useMutation, useQueryClient } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import bulkUpdateBooks from '@/services/sheet/bulkUpdateBooks'
 
-export default function useBulkEditBookMutation () {
+export default function useBulkEditBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation(books => bulkUpdateBooks(sheetStore.sheetId, books), {
-    onSuccess (_, books) {
-      books.forEach(book => {
+  return useMutation((books) => bulkUpdateBooks(sheetStore.sheetId, books), {
+    onSuccess(_, books) {
+      books.forEach((book) => {
         queryClient.setQueryData(['book', book.id], book)
       })
 
-      queryClient.setQueriesData('books', oldData => {
+      queryClient.setQueriesData('books', (oldData) => {
         return {
           ...oldData,
-          books: oldData.books.map(oldBook => {
+          books: oldData.books.map((oldBook) => {
             return books.find(({ id }) => id === oldBook.id) || oldBook
           })
         }
       })
     },
-    onSettled () {
+    onSettled() {
       queryClient.invalidateQueries('latest-readings')
       queryClient.invalidateQueries('next-reads')
       queryClient.invalidateQueries('groups')
diff --git a/src/mutations/useCreateBookMutation.js b/src/mutations/useCreateBookMutation.js
index 255685f2..fcea5f06 100644
--- a/src/mutations/useCreateBookMutation.js
+++ b/src/mutations/useCreateBookMutation.js
@@ -4,13 +4,13 @@ import { useCollectionStore } from '@/stores/collection'
 import { useSheetStore } from '@/stores/sheet'
 import insertBook from '@/services/sheet/insertBook'
 
-export default function useCreateBookMutation () {
+export default function useCreateBookMutation() {
   const collectionStore = useCollectionStore()
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation(book => insertBook(sheetStore.sheetId, book), {
-    onSuccess (_, book) {
+  return useMutation((book) => insertBook(sheetStore.sheetId, book), {
+    onSuccess(_, book) {
       const groups = collectionStore.filters.groups
 
       if (!groups.includes(book.group) && groups.length > 0) {
@@ -21,7 +21,7 @@ export default function useCreateBookMutation () {
 
       queryClient.setQueryData(['book', book.id], book)
     },
-    onSettled () {
+    onSettled() {
       queryClient.invalidateQueries('last-added')
       queryClient.invalidateQueries('next-reads')
       queryClient.invalidateQueries('groups')
diff --git a/src/mutations/useDeleteBookMutation.js b/src/mutations/useDeleteBookMutation.js
index a66da95c..e0c078e4 100644
--- a/src/mutations/useDeleteBookMutation.js
+++ b/src/mutations/useDeleteBookMutation.js
@@ -3,22 +3,22 @@ import { useMutation, useQueryClient } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import deleteBook from '@/services/sheet/deleteBook'
 
-export default function useDeleteBookMutation () {
+export default function useDeleteBookMutation() {
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation(book => deleteBook(sheetStore.sheetId, book), {
-    onSuccess (_, book) {
+  return useMutation((book) => deleteBook(sheetStore.sheetId, book), {
+    onSuccess(_, book) {
       queryClient.setQueryData(['book', book.id], null)
 
-      queryClient.setQueriesData('books', oldData => {
+      queryClient.setQueriesData('books', (oldData) => {
         return {
           ...oldData,
           books: oldData.books.filter(({ id }) => id !== book.id)
         }
       })
     },
-    onSettled () {
+    onSettled() {
       queryClient.invalidateQueries('last-added')
       queryClient.invalidateQueries('latest-readings')
       queryClient.invalidateQueries('next-reads')
diff --git a/src/mutations/useEditBookMutation.js b/src/mutations/useEditBookMutation.js
index e22e10ae..f1437df9 100644
--- a/src/mutations/useEditBookMutation.js
+++ b/src/mutations/useEditBookMutation.js
@@ -4,13 +4,13 @@ import { useCollectionStore } from '@/stores/collection'
 import { useSheetStore } from '@/stores/sheet'
 import updateBook from '@/services/sheet/updateBook'
 
-export default function useEditBookMutation () {
+export default function useEditBookMutation() {
   const collectionStore = useCollectionStore()
   const sheetStore = useSheetStore()
   const queryClient = useQueryClient()
 
-  return useMutation(book => updateBook(sheetStore.sheetId, book), {
-    onSuccess (_, book) {
+  return useMutation((book) => updateBook(sheetStore.sheetId, book), {
+    onSuccess(_, book) {
       const groups = collectionStore.filters.groups
 
       if (!groups.includes(book.group) && groups.length > 0) {
@@ -19,17 +19,17 @@ export default function useEditBookMutation () {
         })
       }
 
-      queryClient.setQueriesData('books', oldData => {
+      queryClient.setQueriesData('books', (oldData) => {
         return {
           ...oldData,
-          books: oldData.books.map(oldBook => {
+          books: oldData.books.map((oldBook) => {
             return oldBook.id === book.id ? book : oldBook
           })
         }
       })
       queryClient.setQueryData(['book', book.id], book)
     },
-    onSettled () {
+    onSettled() {
       queryClient.invalidateQueries('last-added')
       queryClient.invalidateQueries('latest-readings')
       queryClient.invalidateQueries('next-reads')
diff --git a/src/queries/useBookCollectionQuery.js b/src/queries/useBookCollectionQuery.js
index cb282457..da38c041 100644
--- a/src/queries/useBookCollectionQuery.js
+++ b/src/queries/useBookCollectionQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getBooksFromCollection from '@/services/sheet/getBooksFromCollection'
 
-export default function useBookCollectionQuery (book, { enabled }) {
+export default function useBookCollectionQuery(book, { enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getBooksFromCollection(sheetId.value, book.value)
   }
 
diff --git a/src/queries/useBookExistsQuery.js b/src/queries/useBookExistsQuery.js
index 8354674b..bfcb5fb0 100644
--- a/src/queries/useBookExistsQuery.js
+++ b/src/queries/useBookExistsQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getBookByCode from '@/services/sheet/getBookByCode'
 
-export default function useBookExistsQuery (isbn, { enabled }) {
+export default function useBookExistsQuery(isbn, { enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getBookByCode(sheetId.value, isbn.value)
   }
 
diff --git a/src/queries/useBookQuery.js b/src/queries/useBookQuery.js
index e09e6de2..5ba2f7f2 100644
--- a/src/queries/useBookQuery.js
+++ b/src/queries/useBookQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getBookById from '@/services/sheet/getBookById'
 
-export default function useBookQuery (bookId, { enabled }) {
+export default function useBookQuery(bookId, { enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getBookById(sheetId.value, bookId.value)
   }
 
diff --git a/src/queries/useBookSearchQuery.js b/src/queries/useBookSearchQuery.js
index fa82a498..b63d843b 100644
--- a/src/queries/useBookSearchQuery.js
+++ b/src/queries/useBookSearchQuery.js
@@ -5,14 +5,14 @@ import { PropertyToColumn } from '@/model/Book'
 import { useSheetStore } from '@/stores/sheet'
 import searchBooks from '@/services/sheet/searchBooks'
 
-export default function useBookSearchQuery (
+export default function useBookSearchQuery(
   { query, sortBy, sortDirection, page },
   { enabled, keepPreviousData }
 ) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await searchBooks({
       sheetId: sheetId.value,
       searchTerm: query.value,
@@ -25,10 +25,7 @@ export default function useBookSearchQuery (
   }
 
   return useQuery(
-    [
-      'book-search',
-      { query, sortBy, sortDirection, page }
-    ],
+    ['book-search', { query, sortBy, sortDirection, page }],
     fetcher,
     { enabled, keepPreviousData }
   )
diff --git a/src/queries/useBooksQuery.js b/src/queries/useBooksQuery.js
index 5c2e159f..feb05dd2 100644
--- a/src/queries/useBooksQuery.js
+++ b/src/queries/useBooksQuery.js
@@ -5,14 +5,14 @@ import { useSheetStore } from '@/stores/sheet'
 import getBooks from '@/services/sheet/getBooks'
 import { PropertyToColumn } from '@/model/Book'
 
-export default function useBooksQuery (
+export default function useBooksQuery(
   { favorites, futureItems, groups, page, sortBy, sortDirection },
   { enabled }
 ) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getBooks(sheetId.value, page.value, {
       favorites: favorites.value,
       futureItems: futureItems.value,
@@ -23,10 +23,7 @@ export default function useBooksQuery (
   }
 
   return useQuery(
-    [
-      'books',
-      { favorites, futureItems, groups, page, sortBy, sortDirection }
-    ],
+    ['books', { favorites, futureItems, groups, page, sortBy, sortDirection }],
     fetcher,
     { enabled }
   )
diff --git a/src/queries/useCoverQuery.js b/src/queries/useCoverQuery.js
index ce405d6a..7b5796d3 100644
--- a/src/queries/useCoverQuery.js
+++ b/src/queries/useCoverQuery.js
@@ -3,10 +3,10 @@ import { useQuery } from 'vue-query'
 
 import { findCovers } from '@/services/cover'
 
-export default function useCoverQuery (book, { enabled } = {}) {
+export default function useCoverQuery(book, { enabled } = {}) {
   const bookCode = computed(() => book.value?.code)
 
-  async function fetcher () {
+  async function fetcher() {
     return await findCovers(book.value)
   }
 
diff --git a/src/queries/useGitHubReleaseQuery.js b/src/queries/useGitHubReleaseQuery.js
index 3b18d55b..18f5ed50 100644
--- a/src/queries/useGitHubReleaseQuery.js
+++ b/src/queries/useGitHubReleaseQuery.js
@@ -2,14 +2,15 @@ import { useQuery } from 'vue-query'
 
 import axios from 'axios'
 
-export default function useGitHubReleaseQuery () {
-  const RELEASE_URL = 'https://api.github.com/repos/alessandrojean/toshokan/releases/latest'
+export default function useGitHubReleaseQuery() {
+  const RELEASE_URL =
+    'https://api.github.com/repos/alessandrojean/toshokan/releases/latest'
 
-  async function fetcher () {
+  async function fetcher() {
     return await axios.get(RELEASE_URL)
   }
 
   return useQuery('github-release', fetcher, {
-    select: response => response?.data?.body
+    select: (response) => response?.data?.body
   })
 }
diff --git a/src/queries/useGroupsQuery.js b/src/queries/useGroupsQuery.js
index 2a88b8f9..85661b35 100644
--- a/src/queries/useGroupsQuery.js
+++ b/src/queries/useGroupsQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getGroups from '@/services/sheet/getGroups'
 
-export default function useGroupsQuery ({ enabled }) {
+export default function useGroupsQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getGroups(sheetId.value)
   }
 
diff --git a/src/queries/useIsbnSearchQuery.js b/src/queries/useIsbnSearchQuery.js
index e8491888..465592bf 100644
--- a/src/queries/useIsbnSearchQuery.js
+++ b/src/queries/useIsbnSearchQuery.js
@@ -2,8 +2,8 @@ import { useQuery } from 'vue-query'
 
 import lookupSearch from '@/services/lookup'
 
-export default function useIsbnSearchQuery (isbn, { enabled }) {
-  async function fetcher () {
+export default function useIsbnSearchQuery(isbn, { enabled }) {
+  async function fetcher() {
     return await lookupSearch(isbn.value)
   }
 
diff --git a/src/queries/useLastAddedQuery.js b/src/queries/useLastAddedQuery.js
index 3cee2be1..c37d67d4 100644
--- a/src/queries/useLastAddedQuery.js
+++ b/src/queries/useLastAddedQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getBooks from '@/services/sheet/getBooks'
 
-export default function useLastAddedQuery ({ enabled }) {
+export default function useLastAddedQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     const { books } = await getBooks(sheetId.value, 1, {
       limit: 6,
       dontCount: true
diff --git a/src/queries/useLatestReadingsQuery.js b/src/queries/useLatestReadingsQuery.js
index 35de2328..2e761cae 100644
--- a/src/queries/useLatestReadingsQuery.js
+++ b/src/queries/useLatestReadingsQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getLatestReadings from '@/services/sheet/getLatestReadings'
 
-export default function useLatestReadingsQuery ({ enabled }) {
+export default function useLatestReadingsQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getLatestReadings(sheetId.value, { limit: 6 })
   }
 
diff --git a/src/queries/useNextReadsQuery.js b/src/queries/useNextReadsQuery.js
index 05690bb8..25241e26 100644
--- a/src/queries/useNextReadsQuery.js
+++ b/src/queries/useNextReadsQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getNextReads from '@/services/sheet/getNextReads'
 
-export default function useNextReadsQuery ({ enabled }) {
+export default function useNextReadsQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getNextReads(sheetId.value)
   }
 
diff --git a/src/queries/usePublishersQuery.js b/src/queries/usePublishersQuery.js
index 8d2a0cee..4e0a1afb 100644
--- a/src/queries/usePublishersQuery.js
+++ b/src/queries/usePublishersQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getPublishers from '@/services/sheet/getPublishers'
 
-export default function usePublishersQuery ({ enabled }) {
+export default function usePublishersQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getPublishers(sheetId.value)
   }
 
diff --git a/src/queries/useStatisticsQuery.js b/src/queries/useStatisticsQuery.js
index 6a55849b..60d34793 100644
--- a/src/queries/useStatisticsQuery.js
+++ b/src/queries/useStatisticsQuery.js
@@ -4,17 +4,17 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getStatistics from '@/services/sheet/getStatistics'
 
-export default function useStatisticsQuery ({ enabled }) {
+export default function useStatisticsQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getStatistics(sheetId.value)
   }
 
   const query = useQuery('statistics', fetcher, { enabled })
 
-  watch(query.data, newData => {
+  watch(query.data, (newData) => {
     sheetStore.updateIsEmpty(newData?.count === 0)
   })
 
diff --git a/src/queries/useStoresQuery.js b/src/queries/useStoresQuery.js
index 5eb5445e..37dc0e8d 100644
--- a/src/queries/useStoresQuery.js
+++ b/src/queries/useStoresQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getStores from '@/services/sheet/getStores'
 
-export default function useStoresQuery ({ enabled }) {
+export default function useStoresQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getStores(sheetId.value)
   }
 
diff --git a/src/queries/useTimeZoneQuery.js b/src/queries/useTimeZoneQuery.js
index 6b5cbf88..74262af1 100644
--- a/src/queries/useTimeZoneQuery.js
+++ b/src/queries/useTimeZoneQuery.js
@@ -4,11 +4,11 @@ import { useQuery } from 'vue-query'
 import { useSheetStore } from '@/stores/sheet'
 import getTimeZone from '@/services/sheet/getTimeZone'
 
-export default function useTimeZoneQuery ({ enabled }) {
+export default function useTimeZoneQuery({ enabled }) {
   const sheetStore = useSheetStore()
   const sheetId = computed(() => sheetStore.sheetId)
 
-  async function fetcher () {
+  async function fetcher() {
     return await getTimeZone(sheetId.value)
   }
 
diff --git a/src/router/index.js b/src/router/index.js
index 668730b9..02fc2a6c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import i18n from '../i18n'
+import i18n from '@/i18n'
 import { useAuthStore } from '@/stores/auth'
 import { useStore } from '@/stores/main'
 
@@ -128,7 +128,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  scrollBehavior () {
+  scrollBehavior() {
     return {
       top: 0,
       behavior: 'smooth'
@@ -140,20 +140,19 @@ const router = createRouter({
 /**
  * Replace page title.
  */
-router.afterEach(to => {
+router.afterEach((to) => {
   document.title = to.meta.title() + ' | ' + t('app.name')
 })
 
 /**
  * Check if user is signed in in dashboard routes.
  */
-router.beforeEach(async (to, _, next) => {
+router.beforeEach(async (to) => {
   const authStore = useAuthStore()
   const mainStore = useStore()
 
   if (to.fullPath.includes('/dashboard')) {
     if (authStore.isStarted && authStore.isSignedIn) {
-      next()
       return
     }
 
@@ -162,35 +161,30 @@ router.beforeEach(async (to, _, next) => {
 
       try {
         isSignedIn = await authStore.initApp()
-        isSignedIn ? next() : next('/sign-in')
+
+        return !isSignedIn ? '/sign-in' : undefined
       } catch (e) {
         isSignedIn = false
         console.error(e)
         mainStore.updateCriticalError(e)
-        next('/error')
+        return '/error'
       }
-
-      return
     }
 
-    next('/')
-    return
+    return '/'
   }
 
   if (!authStore.isStarted && !mainStore.hasCriticalError) {
     try {
       const isSignedIn = await authStore.initApp()
-      isSignedIn && to.path === '/sign-in' ? next('/dashboard') : next()
+
+      return isSignedIn && to.path === '/sign-in' ? '/dashboard' : undefined
     } catch (e) {
       console.error(e)
       mainStore.updateCriticalError(e)
-      next('/error')
+      return '/error'
     }
-
-    return
   }
-
-  next()
 })
 
 export default router
diff --git a/src/services/cover.js b/src/services/cover.js
index 8fa20d26..d4150f87 100644
--- a/src/services/cover.js
+++ b/src/services/cover.js
@@ -9,7 +9,7 @@ import { convertIsbn13ToIsbn10 } from '@/util/isbn'
  * @param {import('@/model/Book').default} book The book
  * @returns {Promise<string>} The cover URL
  */
-export async function directUrl (book) {
+export async function directUrl(book) {
   if (this.condition && !this.condition(book)) {
     return []
   }
@@ -29,7 +29,7 @@ export async function directUrl (book) {
  * @param {import('@/model/Book').default} book The book
  * @returns {Promise<string?>} The cover URL
  */
-export async function wordpress (book) {
+export async function wordpress(book) {
   const collection = this.collection || 'posts'
   const searchParam = this.queryParameter || 'search'
   let searchQuery = book[this.searchWith]
@@ -39,20 +39,23 @@ export async function wordpress (book) {
   }
 
   try {
-    const response = await axios.get(this.url + '/wp-json/wp/v2/' + collection, {
-      params: {
-        _embed: 'wp:featuredmedia',
-        [searchParam]: searchQuery
+    const response = await axios.get(
+      this.url + '/wp-json/wp/v2/' + collection,
+      {
+        params: {
+          _embed: 'wp:featuredmedia',
+          [searchParam]: searchQuery
+        }
       }
-    })
+    )
 
     if (response.data.length === 0) {
       return []
     }
 
     return response.data
-      .filter(item => item._embedded['wp:featuredmedia'])
-      .map(item => item._embedded['wp:featuredmedia'][0].source_url)
+      .filter((item) => item._embedded['wp:featuredmedia'])
+      .map((item) => item._embedded['wp:featuredmedia'][0].source_url)
   } catch (e) {
     return []
   }
@@ -65,13 +68,15 @@ export async function wordpress (book) {
  * @returns {Promise<string?>} The cover URL
  */
 // eslint-disable-next-line no-unused-vars
-export async function oembed (book) {
+export async function oembed(book) {
   const urlPath = this.createPath(book)
 
   try {
     const url = encodeURIComponent(this.baseUrl + urlPath)
 
-    const response = await axios.get(this.baseUrl + '/wp-json/oembed/1.0/embed?url=' + url)
+    const response = await axios.get(
+      this.baseUrl + '/wp-json/oembed/1.0/embed?url=' + url
+    )
 
     if (!response.data.thumbnail_url) {
       return []
@@ -85,9 +90,9 @@ export async function oembed (book) {
 
 const AMAZON = {
   url: 'https://images-na.ssl-images-amazon.com/images/P/{value}.01._SCRM_SL700_.jpg',
-  condition: book => book.codeType.includes('ISBN'),
+  condition: (book) => book.codeType.includes('ISBN'),
   property: 'code',
-  propertyTransformer: isbn => {
+  propertyTransformer: (isbn) => {
     isbn = isbn.replace(/-/g, '')
 
     if (isbn.length === 10) {
@@ -136,7 +141,7 @@ const AVAILABLE_SITES = [
     name: 'Shueisha',
     url: 'https://dosbg3xlm0x1t.cloudfront.net/images/items/{value}/1200/{value}.jpg',
     property: 'code',
-    propertyTransformer: isbn => isbn.replace(/-/g, ''),
+    propertyTransformer: (isbn) => isbn.replace(/-/g, ''),
     find: directUrl
   },
   {
@@ -151,14 +156,15 @@ const AVAILABLE_SITES = [
     url: 'https://readvertical.com',
     searchWith: 'code',
     collection: 'product',
-    queryTransformer: isbn => isbn.replace(/-/g, ''),
+    queryTransformer: (isbn) => isbn.replace(/-/g, ''),
     find: wordpress
   },
   {
     name: 'VIZ Media',
     url: 'https://dw9to29mmj727.cloudfront.net/products/{value}.jpg',
     property: 'code',
-    propertyTransformer: isbn => convertIsbn13ToIsbn10(isbn.replace(/-/g, '')),
+    propertyTransformer: (isbn) =>
+      convertIsbn13ToIsbn10(isbn.replace(/-/g, '')),
     find: directUrl
   },
   {
@@ -167,7 +173,7 @@ const AVAILABLE_SITES = [
     searchWith: 'title',
     collection: 'product',
     queryParameter: 'slug',
-    queryTransformer: title => slugify(title),
+    queryTransformer: (title) => slugify(title),
     find: wordpress
   }
 ]
@@ -179,12 +185,14 @@ const AVAILABLE_SITES = [
  * @param {boolean?} forceAmazon If true, will only search on Amazon
  * @returns {Promise<string[]?>} The covers found
  */
-export async function findCovers (book, forceAmazon) {
+export async function findCovers(book, forceAmazon) {
   if (forceAmazon) {
     return await AMAZON.find(book)
   }
 
-  const siteHandler = AVAILABLE_SITES.find(site => site.name === book.publisher)
+  const siteHandler = AVAILABLE_SITES.find(
+    (site) => site.name === book.publisher
+  )
 
   if (!siteHandler) {
     return await AMAZON.find(book)
diff --git a/src/services/links.js b/src/services/links.js
index 35feab47..be99b11b 100644
--- a/src/services/links.js
+++ b/src/services/links.js
@@ -70,7 +70,7 @@ const WEBSITES = [
     url: 'https://loja.panini.com.br/panini/solucoes/busca.aspx?t={isbn}',
     country: 'BR',
     category: Categories.STORE,
-    check: book => book.publisher.includes('Panini'),
+    check: (book) => book.publisher.includes('Panini'),
     icon: PaniniIcon
   },
   {
@@ -78,7 +78,7 @@ const WEBSITES = [
     url: 'https://www.lojanewpop.com.br/buscar?q={isbn}',
     country: 'BR',
     category: Categories.STORE,
-    check: book => book.publisher.includes('NewPOP'),
+    check: (book) => book.publisher.includes('NewPOP'),
     icon: NewPopIcon
   },
   {
@@ -96,7 +96,7 @@ const WEBSITES = [
  * @param {import('@/model/Book').default} book
  * @param {string} locale
  */
-export default function getBookLinks (book, locale) {
+export default function getBookLinks(book, locale) {
   if (!book || !book.codeType.includes('ISBN')) {
     return []
   }
@@ -106,19 +106,15 @@ export default function getBookLinks (book, locale) {
 
   const country = book.isbnData?.countryCode
 
-  return WEBSITES
-    .filter(website => {
-      return website.country === country || website.country === ALL_COUNTRIES
-    })
-    .filter(website => website.check ? website.check(book) : true)
-    .map(website => ({
+  return WEBSITES.filter((website) => {
+    return website.country === country || website.country === ALL_COUNTRIES
+  })
+    .filter((website) => (website.check ? website.check(book) : true))
+    .map((website) => ({
       ...website,
-      url: website.url
-        .replace(/\{isbn\}/g, isbn)
-        .replace(/\{isbn10\}/g, isbn10)
+      url: website.url.replace(/\{isbn\}/g, isbn).replace(/\{isbn10\}/g, isbn10)
     }))
     .sort((a, b) => {
-      return (a.category - b.category) ||
-        a.title.localeCompare(b.title, locale)
+      return a.category - b.category || a.title.localeCompare(b.title, locale)
     })
 }
diff --git a/src/services/lookup/Cbl.js b/src/services/lookup/Cbl.js
index cc5277d7..c94e8cbe 100644
--- a/src/services/lookup/Cbl.js
+++ b/src/services/lookup/Cbl.js
@@ -46,9 +46,10 @@ export default class Cbl extends Lookup {
     'Sinopse'
   ]
 
-  _createAxios () {
+  _createAxios() {
     return axios.create({
-      baseURL: 'https://isbn-search-br.search.windows.net/indexes/isbn-index/docs/',
+      baseURL:
+        'https://isbn-search-br.search.windows.net/indexes/isbn-index/docs/',
       headers: {
         Accept: 'application/json',
         'Api-Key': import.meta.env.VITE_APP_CBL_QUERY_KEY
@@ -56,7 +57,7 @@ export default class Cbl extends Lookup {
     })
   }
 
-  #createSearchPayload (query, dataOptions) {
+  #createSearchPayload(query, dataOptions) {
     let payload = {
       count: true,
       facets: ['Imprint,count:50', 'Authors,count:50'],
@@ -78,7 +79,7 @@ export default class Cbl extends Lookup {
     return payload
   }
 
-  async #internalSearch (query = '', options) {
+  async #internalSearch(query = '', options) {
     const { t } = i18n.global
 
     const queryKey = import.meta.env.VITE_APP_CBL_QUERY_KEY
@@ -90,7 +91,10 @@ export default class Cbl extends Lookup {
     const dataPayload = this.#createSearchPayload(query, options.dataOptions)
 
     try {
-      const response = await this.axios.post('search?api-version=2016-09-01', dataPayload)
+      const response = await this.axios.post(
+        'search?api-version=2016-09-01',
+        dataPayload
+      )
 
       return response.data.value.map(Book.fromCbl)
     } catch (e) {
@@ -98,7 +102,7 @@ export default class Cbl extends Lookup {
     }
   }
 
-  async search (isbn) {
+  async search(isbn) {
     const { t } = i18n.global
 
     if (!validateIsbn(isbn)) {
diff --git a/src/services/lookup/GoogleBooks.js b/src/services/lookup/GoogleBooks.js
index 32384a0d..b79303d9 100644
--- a/src/services/lookup/GoogleBooks.js
+++ b/src/services/lookup/GoogleBooks.js
@@ -7,13 +7,13 @@ import i18n from '@/i18n'
 import Lookup from './Lookup'
 
 export default class GoogleBooks extends Lookup {
-  _createAxios () {
+  _createAxios() {
     return axios.create({
       baseURL: 'https://www.googleapis.com/books/v1'
     })
   }
 
-  async search (isbn) {
+  async search(isbn) {
     const { t } = i18n.global
 
     if (!validateIsbn(isbn)) {
diff --git a/src/services/lookup/Lookup.js b/src/services/lookup/Lookup.js
index 729510d9..ea92acc9 100644
--- a/src/services/lookup/Lookup.js
+++ b/src/services/lookup/Lookup.js
@@ -9,7 +9,7 @@ export default class Lookup {
    */
   axios = null
 
-  constructor () {
+  constructor() {
     this.axios = this._createAxios()
   }
 
@@ -18,7 +18,7 @@ export default class Lookup {
    *
    * @returns {import('axios').default} the axios instance
    */
-  _createAxios () {
+  _createAxios() {
     throw new Error('Not implemented!')
   }
 
@@ -28,7 +28,7 @@ export default class Lookup {
    * @param {String} isbn The ISBN to search
    * @returns {Promise<Object[]>} An array of books found
    */
-  async search (isbn) {
+  async search(isbn) {
     throw new Error('Not implemented!')
   }
 }
diff --git a/src/services/lookup/OpenLibrary.js b/src/services/lookup/OpenLibrary.js
index 34ba4e2c..afe7f6b8 100644
--- a/src/services/lookup/OpenLibrary.js
+++ b/src/services/lookup/OpenLibrary.js
@@ -7,7 +7,7 @@ import { isbn as validateIsbn } from '@/util/validators'
 import i18n from '@/i18n'
 
 export default class OpenLibrary extends Lookup {
-  _createAxios () {
+  _createAxios() {
     return axios.create({
       baseURL: 'https://openlibrary.org/',
       headers: {
@@ -16,7 +16,7 @@ export default class OpenLibrary extends Lookup {
     })
   }
 
-  async #findDetails (isbn) {
+  async #findDetails(isbn) {
     try {
       const { data } = await this.axios.get(`isbn/${isbn}.json`)
 
@@ -26,7 +26,7 @@ export default class OpenLibrary extends Lookup {
     }
   }
 
-  async search (isbn) {
+  async search(isbn) {
     const { t } = i18n.global
 
     isbn = isbn.replace(/-/g, '')
diff --git a/src/services/lookup/index.js b/src/services/lookup/index.js
index 1d2ad766..dc5f805d 100644
--- a/src/services/lookup/index.js
+++ b/src/services/lookup/index.js
@@ -10,16 +10,13 @@ import i18n from '@/i18n'
  * @param {String} isbn the ISBN to search
  * @returns {Promise<Object[]>} an array of books
  */
-export default async function search (isbn) {
+export default async function search(isbn) {
   const { locale } = i18n.global
 
   const googleBooks = new GoogleBooks()
   const openLibrary = new OpenLibrary()
 
-  const allPromises = [
-    googleBooks.search(isbn),
-    openLibrary.search(isbn)
-  ]
+  const allPromises = [googleBooks.search(isbn), openLibrary.search(isbn)]
 
   if (import.meta.env.VITE_APP_CBL_QUERY_KEY) {
     const cbl = new Cbl()
@@ -30,6 +27,6 @@ export default async function search (isbn) {
   const results = await Promise.allSettled(allPromises)
 
   return results
-    .flatMap(result => result.value || [])
+    .flatMap((result) => result.value || [])
     .sort((a, b) => a.provider.localeCompare(b.provider, locale.value))
 }
diff --git a/src/services/sheet/buildSheetUrl.js b/src/services/sheet/buildSheetUrl.js
index 83d8c743..1dffd409 100644
--- a/src/services/sheet/buildSheetUrl.js
+++ b/src/services/sheet/buildSheetUrl.js
@@ -7,8 +7,10 @@ const COLLECTION_SHEET = 'Collection'
  * @param {string} sheetId The sheet to create the URL
  * @returns {string} The sheet query URL
  */
-export default function buildSheetUrl (sheetId) {
-  const sheetUrl = new URL(`https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq`)
+export default function buildSheetUrl(sheetId) {
+  const sheetUrl = new URL(
+    `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq`
+  )
   const accessToken = window.gapi?.auth?.getToken?.()?.access_token
 
   sheetUrl.searchParams.append('range', COLLECTION_RANGE)
diff --git a/src/services/sheet/bulkDeleteBooks.js b/src/services/sheet/bulkDeleteBooks.js
index 69f94303..b7ec23be 100644
--- a/src/services/sheet/bulkDeleteBooks.js
+++ b/src/services/sheet/bulkDeleteBooks.js
@@ -4,25 +4,24 @@
  * @param {string} sheetId The sheet to perform the operation
  * @param {import('@/model/Book').default[]} books The books to delete
  */
-export default async function bulkDeleteBooks (sheetId, books) {
-  await window.gapi.client.sheets.spreadsheets
-    .batchUpdate({
-      spreadsheetId: sheetId,
-      resource: {
-        requests: books.map(book => {
-          const bookRow = parseInt(book.sheetLocation.substring(12))
+export default async function bulkDeleteBooks(sheetId, books) {
+  await window.gapi.client.sheets.spreadsheets.batchUpdate({
+    spreadsheetId: sheetId,
+    resource: {
+      requests: books.map((book) => {
+        const bookRow = parseInt(book.sheetLocation.substring(12))
 
-          return {
-            deleteDimension: {
-              range: {
-                sheetId: 0,
-                dimension: 'ROWS',
-                startIndex: bookRow - 1,
-                endIndex: bookRow
-              }
+        return {
+          deleteDimension: {
+            range: {
+              sheetId: 0,
+              dimension: 'ROWS',
+              startIndex: bookRow - 1,
+              endIndex: bookRow
             }
           }
-        })
-      }
-    })
+        }
+      })
+    }
+  })
 }
diff --git a/src/services/sheet/bulkUpdateBooks.js b/src/services/sheet/bulkUpdateBooks.js
index 95f881a9..45bc2353 100644
--- a/src/services/sheet/bulkUpdateBooks.js
+++ b/src/services/sheet/bulkUpdateBooks.js
@@ -4,16 +4,15 @@
  * @param {string} sheetId The ID of the sheet to update the books.
  * @param {import('@/model/Book').default[]} books The books to update.
  */
-export default async function bulkUpdateBooks (sheetId, books) {
-  await window.gapi.client.sheets.spreadsheets.values
-    .batchUpdate({
-      spreadsheetId: sheetId,
-      resource: {
-        valueInputOption: 'USER_ENTERED',
-        data: books.map(book => ({
-          range: book.sheetLocation,
-          values: [book.toArray()]
-        }))
-      }
-    })
+export default async function bulkUpdateBooks(sheetId, books) {
+  await window.gapi.client.sheets.spreadsheets.values.batchUpdate({
+    spreadsheetId: sheetId,
+    resource: {
+      valueInputOption: 'USER_ENTERED',
+      data: books.map((book) => ({
+        range: book.sheetLocation,
+        values: [book.toArray()]
+      }))
+    }
+  })
 }
diff --git a/src/services/sheet/countTotalResults.js b/src/services/sheet/countTotalResults.js
index d8df4135..5b6f843a 100644
--- a/src/services/sheet/countTotalResults.js
+++ b/src/services/sheet/countTotalResults.js
@@ -8,9 +8,10 @@ import { CollectionColumns } from '@/model/Book'
  * @param {import('@/data/Query').default} query The query to be transformed
  * @returns {Promise<number>} The number of results
  */
-export default async function countTotalResults (sheetId, query) {
+export default async function countTotalResults(sheetId, query) {
   const { ID } = CollectionColumns
-  const newQuery = query.newBuilder()
+  const newQuery = query
+    .newBuilder()
     .select(`count(${ID})`)
     .orderBy()
     .groupBy()
diff --git a/src/services/sheet/deleteBook.js b/src/services/sheet/deleteBook.js
index f94218ca..963d4ba9 100644
--- a/src/services/sheet/deleteBook.js
+++ b/src/services/sheet/deleteBook.js
@@ -4,25 +4,24 @@
  * @param {string} sheetId The sheet to perform the operation
  * @param {import('@/model/Book').default} book The book to delete
  */
-export default async function deleteBook (sheetId, book) {
+export default async function deleteBook(sheetId, book) {
   const bookRow = parseInt(book.sheetLocation.substring(12))
 
-  await window.gapi.client.sheets.spreadsheets
-    .batchUpdate({
-      spreadsheetId: sheetId,
-      resource: {
-        requests: [
-          {
-            deleteDimension: {
-              range: {
-                sheetId: 0,
-                dimension: 'ROWS',
-                startIndex: bookRow - 1,
-                endIndex: bookRow
-              }
+  await window.gapi.client.sheets.spreadsheets.batchUpdate({
+    spreadsheetId: sheetId,
+    resource: {
+      requests: [
+        {
+          deleteDimension: {
+            range: {
+              sheetId: 0,
+              dimension: 'ROWS',
+              startIndex: bookRow - 1,
+              endIndex: bookRow
             }
           }
-        ]
-      }
-    })
+        }
+      ]
+    }
+  })
 }
diff --git a/src/services/sheet/findSheetId.js b/src/services/sheet/findSheetId.js
index 42f8fea2..eb57a2a3 100644
--- a/src/services/sheet/findSheetId.js
+++ b/src/services/sheet/findSheetId.js
@@ -10,18 +10,17 @@ const SHEET_DEV_SUFFIX = '-dev'
  * @param {boolean} useDevSheet If it should only get dev sheets
  * @returns The sheet and other matches
  */
-export default async function findSheetId (useDevSheet = false) {
+export default async function findSheetId(useDevSheet = false) {
   // Use a development only sheet to prevent issues during tests.
   const isDevEnvironment = import.meta.env.DEV
-  const sheetSuffix = (isDevEnvironment && useDevSheet)
-    ? SHEET_DEV_SUFFIX
-    : ''
+  const sheetSuffix = isDevEnvironment && useDevSheet ? SHEET_DEV_SUFFIX : ''
   const fileName = SHEET_FILE_NAME + sheetSuffix
 
   const response = await window.gapi.client.drive.files.list({
     q: `name='${fileName}' and mimeType='${SHEET_MIME_TYPE}'`,
     orderBy: 'starred',
-    fields: 'files(capabilities/canEdit,id,modifiedTime,name,ownedByMe,owners(displayName,emailAddress,photoLink),starred)'
+    fields:
+      'files(capabilities/canEdit,id,modifiedTime,name,ownedByMe,owners(displayName,emailAddress,photoLink),starred)'
   })
 
   if (response.result.files.length === 0) {
@@ -30,8 +29,9 @@ export default async function findSheetId (useDevSheet = false) {
 
   const lastSheetOpened = localStorage.getItem('last_sheet_opened')
 
-  const sheet = response.result.files.find(sheet => sheet.id === lastSheetOpened) ||
-    response.result.files.find(sheet => sheet.ownedByMe) ||
+  const sheet =
+    response.result.files.find((sheet) => sheet.id === lastSheetOpened) ||
+    response.result.files.find((sheet) => sheet.ownedByMe) ||
     response.result.files[0]
 
   return { sheet, options: response.result.files }
diff --git a/src/services/sheet/getBookByCode.js b/src/services/sheet/getBookByCode.js
index 5ef9f0b5..e1abec79 100644
--- a/src/services/sheet/getBookByCode.js
+++ b/src/services/sheet/getBookByCode.js
@@ -10,13 +10,11 @@ import QueryBuilder from '@/data/QueryBuilder'
  * @param {string} code The code to find
  * @returns {Promise<Book[] | null>} The books found
  */
-export default async function getBookByCode (sheetId, code) {
+export default async function getBookByCode(sheetId, code) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { CODE } = CollectionColumns
-  const query = new QueryBuilder(sheetUrl)
-    .where(CODE, code)
-    .build()
+  const query = new QueryBuilder(sheetUrl).where(CODE, code).build()
 
   const dataTable = await query.send()
 
diff --git a/src/services/sheet/getBookById.js b/src/services/sheet/getBookById.js
index 6fd38612..66a18901 100644
--- a/src/services/sheet/getBookById.js
+++ b/src/services/sheet/getBookById.js
@@ -10,13 +10,11 @@ import QueryBuilder from '@/data/QueryBuilder'
  * @param {string} id The ID to find
  * @returns {Promise<Book | null>} The book found
  */
-export default async function getBookById (sheetId, id) {
+export default async function getBookById(sheetId, id) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { ID } = CollectionColumns
-  const query = new QueryBuilder(sheetUrl)
-    .where(ID, id)
-    .build()
+  const query = new QueryBuilder(sheetUrl).where(ID, id).build()
 
   const dataTable = await query.send()
 
diff --git a/src/services/sheet/getBookNeighbors.js b/src/services/sheet/getBookNeighbors.js
index 22567cd3..3361fb34 100644
--- a/src/services/sheet/getBookNeighbors.js
+++ b/src/services/sheet/getBookNeighbors.js
@@ -10,7 +10,7 @@ import Book, { CollectionColumns, Columns } from '@/model/Book'
  * @param {Book} book The code to find
  * @returns {Promise<{ previous: Book, next: Book } | null>} The books found
  */
-export default async function getBookNeighbors (sheetId, book) {
+export default async function getBookNeighbors(sheetId, book) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { TITLE, PUBLISHER, GROUP } = CollectionColumns
@@ -27,16 +27,17 @@ export default async function getBookNeighbors (sheetId, book) {
     return null
   }
 
-  const bookRow = dataTable.asArray
-    .findIndex(rowData => rowData[Columns.TITLE] === book.title)
+  const bookRow = dataTable.asArray.findIndex(
+    (rowData) => rowData[Columns.TITLE] === book.title
+  )
 
-  const previous = bookRow > 0
-    ? Book.fromDataTable(dataTable.getRow(bookRow - 1))
-    : null
+  const previous =
+    bookRow > 0 ? Book.fromDataTable(dataTable.getRow(bookRow - 1)) : null
 
-  const next = bookRow < dataTable.rows - 1
-    ? Book.fromDataTable(dataTable.getRow(bookRow + 1))
-    : null
+  const next =
+    bookRow < dataTable.rows - 1
+      ? Book.fromDataTable(dataTable.getRow(bookRow + 1))
+      : null
 
   return { previous, next }
 }
diff --git a/src/services/sheet/getBooks.js b/src/services/sheet/getBooks.js
index fbec6613..3e93dbcc 100644
--- a/src/services/sheet/getBooks.js
+++ b/src/services/sheet/getBooks.js
@@ -24,16 +24,15 @@ import Book, {
  * @param {boolean?} options.dontCount Define if the count should be skipped
  * @returns {Promise<{ books: Book[], totalResults: number? }>} The books found
  */
-export default async function getBooks (sheetId, page = 1, options = {}) {
+export default async function getBooks(sheetId, page = 1, options = {}) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { CREATED_AT, FAVORITE, GROUP, STATUS } = CollectionColumns
-  const orderBy = (options.orderBy || [CREATED_AT])
-    .map(property => {
-      return (typeof property === 'string')
-        ? [property, options.orderDirection || 'desc']
-        : property
-    })
+  const orderBy = (options.orderBy || [CREATED_AT]).map((property) => {
+    return typeof property === 'string'
+      ? [property, options.orderDirection || 'desc']
+      : property
+  })
 
   const queryBuilder = new QueryBuilder(sheetUrl)
     .orderBy(...orderBy)
@@ -41,8 +40,7 @@ export default async function getBooks (sheetId, page = 1, options = {}) {
     .offset((page - 1) * PER_PAGE)
 
   if (options.groups && options.groups.length > 0) {
-    const groupConditions = options.groups
-      .map(group => [GROUP, '=', group])
+    const groupConditions = options.groups.map((group) => [GROUP, '=', group])
 
     queryBuilder.where(QueryBuilder.or(...groupConditions))
   }
diff --git a/src/services/sheet/getBooksFromCollection.js b/src/services/sheet/getBooksFromCollection.js
index 5d30326d..bcc5f7d1 100644
--- a/src/services/sheet/getBooksFromCollection.js
+++ b/src/services/sheet/getBooksFromCollection.js
@@ -10,7 +10,7 @@ import Book, { CollectionColumns } from '@/model/Book'
  * @param {Book} book The book to find
  * @returns {Promise<Book[]>} The books found
  */
-export default async function getBooksFromCollection (sheetId, book) {
+export default async function getBooksFromCollection(sheetId, book) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { TITLE, PUBLISHER, GROUP } = CollectionColumns
diff --git a/src/services/sheet/getBooksFromGroup.js b/src/services/sheet/getBooksFromGroup.js
index 76519e1b..d9177b5f 100644
--- a/src/services/sheet/getBooksFromGroup.js
+++ b/src/services/sheet/getBooksFromGroup.js
@@ -9,6 +9,11 @@ import getBooks from './getBooks'
  * @param {Record<string, any>} options The options
  * @returns The books found
  */
-export default function getBooksFromGroup (sheetId, group, page = 1, options = {}) {
+export default function getBooksFromGroup(
+  sheetId,
+  group,
+  page = 1,
+  options = {}
+) {
   return getBooks(sheetId, page, { ...options, group })
 }
diff --git a/src/services/sheet/getColumnUniqueValues.js b/src/services/sheet/getColumnUniqueValues.js
index 22dc8a62..3b6a85f8 100644
--- a/src/services/sheet/getColumnUniqueValues.js
+++ b/src/services/sheet/getColumnUniqueValues.js
@@ -9,7 +9,11 @@ import QueryBuilder from '@/data/QueryBuilder'
  * @param {boolean} alphabetically The default sort
  * @returns {Promise<{ name: string, count: number }[]}>} The values found
  */
-export default async function getColumnUniqueValues (sheetId, column, alphabetically) {
+export default async function getColumnUniqueValues(
+  sheetId,
+  column,
+  alphabetically
+) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const queryBuilder = new QueryBuilder(sheetUrl)
diff --git a/src/services/sheet/getGroups.js b/src/services/sheet/getGroups.js
index 885a0525..18f90027 100644
--- a/src/services/sheet/getGroups.js
+++ b/src/services/sheet/getGroups.js
@@ -9,7 +9,7 @@ import QueryBuilder from '@/data/QueryBuilder'
  * @param {string} sheetId The sheet to perform the operation
  * @returns {Promise<{ name: string, count: number, futureCount: number, totalCount: number }[]}>} The groups found
  */
-export default async function getGroups (sheetId) {
+export default async function getGroups(sheetId) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { GROUP, STATUS } = CollectionColumns
@@ -22,7 +22,7 @@ export default async function getGroups (sheetId) {
   const dataTable = await query.send()
   const groupMap = new Map()
 
-  dataTable.asArray.forEach(rowData => {
+  dataTable.asArray.forEach((rowData) => {
     const [group, status, count] = rowData
 
     if (!groupMap.has(group)) {
@@ -45,6 +45,5 @@ export default async function getGroups (sheetId) {
     groupObj.totalCount += count
   })
 
-  return Array.from(groupMap.values())
-    .sort((a, b) => b.count - a.count)
+  return Array.from(groupMap.values()).sort((a, b) => b.count - a.count)
 }
diff --git a/src/services/sheet/getLatestReadings.js b/src/services/sheet/getLatestReadings.js
index 3c9e86a9..2f2e4e19 100644
--- a/src/services/sheet/getLatestReadings.js
+++ b/src/services/sheet/getLatestReadings.js
@@ -12,7 +12,7 @@ import QueryBuilder from '@/data/QueryBuilder'
  * @param {number?} options.limit The limit
  * @returns {Promise<Book[]}>} The books found
  */
-export default async function getLatestReadings (sheetId, options = {}) {
+export default async function getLatestReadings(sheetId, options = {}) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const { STATUS, READ_AT, UPDATED_AT } = CollectionColumns
diff --git a/src/services/sheet/getNextReads.js b/src/services/sheet/getNextReads.js
index df6b5be3..49d9ae0d 100644
--- a/src/services/sheet/getNextReads.js
+++ b/src/services/sheet/getNextReads.js
@@ -1,5 +1,9 @@
 import QueryBuilder from '@/data/QueryBuilder'
-import Book, { CollectionColumns, STATUS_READ, STATUS_UNREAD } from '@/model/Book'
+import Book, {
+  CollectionColumns,
+  STATUS_READ,
+  STATUS_UNREAD
+} from '@/model/Book'
 import buildSheetUrl from './buildSheetUrl'
 
 /**
@@ -9,10 +13,11 @@ import buildSheetUrl from './buildSheetUrl'
  * @param {string} sheetId The sheet to perform the operation
  * @returns {Promise<Book[]>} The next books to read
  */
-export default async function getNextReads (sheetId) {
+export default async function getNextReads(sheetId) {
   const sheetUrl = buildSheetUrl(sheetId)
 
-  const { TITLE, READ_AT, UPDATED_AT, GROUP, PUBLISHER, STATUS } = CollectionColumns
+  const { TITLE, READ_AT, UPDATED_AT, GROUP, PUBLISHER, STATUS } =
+    CollectionColumns
   const lastReadsQuery = new QueryBuilder(sheetUrl)
     .where(READ_AT)
     .andWhere(STATUS, STATUS_READ)
@@ -23,10 +28,10 @@ export default async function getNextReads (sheetId) {
   const lastReadsResult = await lastReadsQuery.send()
   const lastReads = lastReadsResult.asArray
     .map(Book.fromDataTable)
-    .filter(book => book.titleParts.number !== null)
+    .filter((book) => book.titleParts.number !== null)
     .reduce((array, current) => {
       const series = current.titleParts.title
-      const exists = array.find(book => book.titleParts.title === series)
+      const exists = array.find((book) => book.titleParts.title === series)
 
       if (!exists) {
         array.push(current)
@@ -43,7 +48,7 @@ export default async function getNextReads (sheetId) {
     .where(STATUS, STATUS_UNREAD)
     .andWhere(
       QueryBuilder.or(
-        ...lastReads.map(book => {
+        ...lastReads.map((book) => {
           return [TITLE, 'starts with', book.titleParts.title + ' #']
         })
       )
@@ -55,22 +60,24 @@ export default async function getNextReads (sheetId) {
   const collectionsBooks = collectionsResult.asArray.map(Book.fromDataTable)
 
   return lastReads
-    .map(book => {
+    .map((book) => {
       const readNumber = parseInt(book.titleParts.number)
 
-      const next = collectionsBooks.find(colBook => {
+      const next = collectionsBooks.find((colBook) => {
         const colNumber = parseInt(colBook.titleParts.number)
 
-        return colBook.titleParts.title === book.titleParts.title &&
+        return (
+          colBook.titleParts.title === book.titleParts.title &&
           (colNumber === readNumber + 1 || colNumber === readNumber) &&
           colBook.publisher === book.publisher &&
           colBook.group === book.group
+        )
       })
 
       return { readAt: book.readAt, next }
     })
-    .filter(tuple => tuple.next !== undefined)
+    .filter((tuple) => tuple.next !== undefined)
     .sort((a, b) => b.readAt - a.readAt)
-    .map(tuple => tuple.next)
+    .map((tuple) => tuple.next)
     .slice(0, 6)
 }
diff --git a/src/services/sheet/getPublishers.js b/src/services/sheet/getPublishers.js
index 79551c27..28ba149e 100644
--- a/src/services/sheet/getPublishers.js
+++ b/src/services/sheet/getPublishers.js
@@ -8,6 +8,6 @@ import { CollectionColumns } from '@/model/Book'
  * @param {string} sheetId The sheet to perform the operation
  * @returns The publishers found
  */
-export default async function getPublishers (sheetId) {
+export default async function getPublishers(sheetId) {
   return await getColumnUniqueValues(sheetId, CollectionColumns.PUBLISHER, true)
 }
diff --git a/src/services/sheet/getSheetData.js b/src/services/sheet/getSheetData.js
index ebbc8cd6..18808217 100644
--- a/src/services/sheet/getSheetData.js
+++ b/src/services/sheet/getSheetData.js
@@ -4,9 +4,9 @@
  * @param {string} sheetId The sheet to perform the operation
  * @returns The sheet data and statistics
  */
-export default async function getSheetData (sheetId) {
-  const response = await window.gapi.client.sheets.spreadsheets.values
-    .batchGet({
+export default async function getSheetData(sheetId) {
+  const response = await window.gapi.client.sheets.spreadsheets.values.batchGet(
+    {
       spreadsheetId: sheetId,
       ranges: [
         'TotalItems',
@@ -18,7 +18,8 @@ export default async function getSheetData (sheetId) {
         'PublisherRank',
         'Currency'
       ]
-    })
+    }
+  )
 
   const stats = {
     count: parseInt(response.result.valueRanges[0].values[0][0]),
@@ -37,8 +38,8 @@ export default async function getSheetData (sheetId) {
     monthly: (response.result.valueRanges[3].values || [])
       .slice(0, 10)
       .reverse()
-      .filter(row => row[0].length > 0)
-      .map(row => ({
+      .filter((row) => row[0].length > 0)
+      .map((row) => ({
         month: new Date(`${row[0]}-02`),
         totalSpent: parseFloat(row[1]),
         count: parseInt(row[2], 10),
@@ -46,20 +47,19 @@ export default async function getSheetData (sheetId) {
       })),
     authors: (response.result.valueRanges[4].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) })),
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) })),
     series: (response.result.valueRanges[5].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) })),
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) })),
     publishers: (response.result.valueRanges[6].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) }))
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) }))
   }
 
-  const propertiesResponse = await window.gapi.client.sheets.spreadsheets
-    .get({
-      spreadsheetId: sheetId,
-      fields: 'properties.timeZone'
-    })
+  const propertiesResponse = await window.gapi.client.sheets.spreadsheets.get({
+    spreadsheetId: sheetId,
+    fields: 'properties.timeZone'
+  })
 
   const timeZoneName = propertiesResponse.result.properties.timeZone
   const offset = parseInt(
@@ -75,10 +75,11 @@ export default async function getSheetData (sheetId) {
   const timeZone = {
     name: timeZoneName,
     offset,
-    offsetStr: offset.toLocaleString('en-US', {
-      minimumIntegerDigits: 2,
-      signDisplay: 'always'
-    }) + ':00',
+    offsetStr:
+      offset.toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        signDisplay: 'always'
+      }) + ':00',
     timezoneOffset: -offset * 60
   }
 
diff --git a/src/services/sheet/getStatistics.js b/src/services/sheet/getStatistics.js
index 215630fd..a54cb0a1 100644
--- a/src/services/sheet/getStatistics.js
+++ b/src/services/sheet/getStatistics.js
@@ -4,9 +4,9 @@
  * @param {string} sheetId The sheet to perform the operation
  * @returns The sheet statistics
  */
-export default async function getStatistics (sheetId) {
-  const response = await window.gapi.client.sheets.spreadsheets.values
-    .batchGet({
+export default async function getStatistics(sheetId) {
+  const response = await window.gapi.client.sheets.spreadsheets.values.batchGet(
+    {
       spreadsheetId: sheetId,
       ranges: [
         'TotalItems',
@@ -18,7 +18,8 @@ export default async function getStatistics (sheetId) {
         'PublisherRank',
         'Currency'
       ]
-    })
+    }
+  )
 
   return {
     count: parseInt(response.result.valueRanges[0].values[0][0]),
@@ -37,8 +38,8 @@ export default async function getStatistics (sheetId) {
     monthly: (response.result.valueRanges[3].values || [])
       .slice(0, 10)
       .reverse()
-      .filter(row => row[0].length > 0)
-      .map(row => ({
+      .filter((row) => row[0].length > 0)
+      .map((row) => ({
         month: new Date(`${row[0]}-02`),
         totalSpent: parseFloat(row[1]),
         count: parseInt(row[2], 10),
@@ -46,12 +47,12 @@ export default async function getStatistics (sheetId) {
       })),
     authors: (response.result.valueRanges[4].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) })),
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) })),
     series: (response.result.valueRanges[5].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) })),
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) })),
     publishers: (response.result.valueRanges[6].values || [])
       .slice(0, 10)
-      .map(row => ({ name: row[0], count: parseInt(row[1], 10) }))
+      .map((row) => ({ name: row[0], count: parseInt(row[1], 10) }))
   }
 }
diff --git a/src/services/sheet/getStores.js b/src/services/sheet/getStores.js
index c445feb2..e5436991 100644
--- a/src/services/sheet/getStores.js
+++ b/src/services/sheet/getStores.js
@@ -8,6 +8,6 @@ import { CollectionColumns } from '@/model/Book'
  * @param {string} sheetId The sheet to perform the operation
  * @returns The stores found
  */
-export default async function getStores (sheetId) {
+export default async function getStores(sheetId) {
   return await getColumnUniqueValues(sheetId, CollectionColumns.STORE, true)
 }
diff --git a/src/services/sheet/getTimeZone.js b/src/services/sheet/getTimeZone.js
index a424e5dc..ffe2f89b 100644
--- a/src/services/sheet/getTimeZone.js
+++ b/src/services/sheet/getTimeZone.js
@@ -4,12 +4,11 @@
  * @param {string} sheetId The sheet to perform the operation
  * @returns The sheet time zone
  */
-export default async function getTimeZone (sheetId) {
-  const propertiesResponse = await window.gapi.client.sheets.spreadsheets
-    .get({
-      spreadsheetId: sheetId,
-      fields: 'properties.timeZone'
-    })
+export default async function getTimeZone(sheetId) {
+  const propertiesResponse = await window.gapi.client.sheets.spreadsheets.get({
+    spreadsheetId: sheetId,
+    fields: 'properties.timeZone'
+  })
 
   const timeZoneName = propertiesResponse.result.properties.timeZone
   const offset = parseInt(
@@ -25,10 +24,11 @@ export default async function getTimeZone (sheetId) {
   return {
     name: timeZoneName,
     offset,
-    offsetStr: offset.toLocaleString('en-US', {
-      minimumIntegerDigits: 2,
-      signDisplay: 'always'
-    }) + ':00',
+    offsetStr:
+      offset.toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        signDisplay: 'always'
+      }) + ':00',
     timezoneOffset: -offset * 60
   }
 }
diff --git a/src/services/sheet/insertBook.js b/src/services/sheet/insertBook.js
index 060ada69..c744d65f 100644
--- a/src/services/sheet/insertBook.js
+++ b/src/services/sheet/insertBook.js
@@ -5,17 +5,16 @@
  * @param {import('@/model/Book').default} book The book to be inserted.
  * @returns {Promise<string>}
  */
-export default async function insertBook (sheetId, book) {
+export default async function insertBook(sheetId, book) {
   const bookFormatted = book.toArray()
 
-  await window.gapi.client.sheets.spreadsheets.values
-    .append({
-      spreadsheetId: sheetId,
-      range: 'Collection!B5',
-      valueInputOption: 'USER_ENTERED',
-      insertDataOption: 'INSERT_ROWS',
-      values: [bookFormatted]
-    })
+  await window.gapi.client.sheets.spreadsheets.values.append({
+    spreadsheetId: sheetId,
+    range: 'Collection!B5',
+    valueInputOption: 'USER_ENTERED',
+    insertDataOption: 'INSERT_ROWS',
+    values: [bookFormatted]
+  })
 
   return bookFormatted[1]
 }
diff --git a/src/services/sheet/searchBooks.js b/src/services/sheet/searchBooks.js
index e2066404..4eab589e 100644
--- a/src/services/sheet/searchBooks.js
+++ b/src/services/sheet/searchBooks.js
@@ -11,7 +11,7 @@ import { isoDate as validateDate } from '@/util/validators'
 import QueryBuilder from '@/data/QueryBuilder'
 import { isoDate, lastDayOfMonth } from '@/util/date'
 
-export function createSearchKeywords () {
+export function createSearchKeywords() {
   return {
     [i18n.global.t('dashboard.search.keywords.id')]: {
       column: CollectionColumns.ID,
@@ -142,7 +142,12 @@ export function createSearchKeywords () {
  * @param {number} options.page The page
  * @returns {Promise<{ results: Book[], total: number }>} The books found
  */
-export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1 }) {
+export default async function searchBooks({
+  sheetId,
+  searchTerm,
+  sort,
+  page = 1
+}) {
   const sheetUrl = buildSheetUrl(sheetId)
 
   const queryBuilder = new QueryBuilder(sheetUrl)
@@ -154,12 +159,13 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
 
   if (sort) {
     const builderObj = queryBuilder.toObject()
-    const orderBy = (sort.sortBy || [builderObj.orderBy[0][0]])
-      .map(property => {
+    const orderBy = (sort.sortBy || [builderObj.orderBy[0][0]]).map(
+      (property) => {
         return !Array.isArray(property)
           ? [property, sort.sortDirection || builderObj.orderBy[0][1]]
           : property
-      })
+      }
+    )
 
     queryBuilder.orderBy(...orderBy)
   }
@@ -191,8 +197,8 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
       .orWhere(ID, searchTerm)
       .orWhere(CODE, searchTerm)
   } else {
-    const restrictions = Object.entries(searchQueryObj)
-      .flatMap(([localeKeyword, values]) => {
+    const restrictions = Object.entries(searchQueryObj).flatMap(
+      ([localeKeyword, values]) => {
         const keywordInfo = keywords[localeKeyword]
 
         if (!keywordInfo) {
@@ -203,12 +209,12 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
 
         if (keywordInfo.equals) {
           const column = `lower(${keywordInfo.column})`
-          tests = values.map(v => [column, '=', v])
+          tests = values.map((v) => [column, '=', v])
         } else if (keywordInfo.date) {
           const isEquality = keywordInfo.operation === '='
           const isUnique = values.length === 1 || isEquality
           const isValidDate = isEquality
-            ? values.every(date => validateDate(date, true))
+            ? values.every((date) => validateDate(date, true))
             : validateDate(values[0])
 
           if (isUnique && isValidDate) {
@@ -217,11 +223,11 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
               : keywordInfo.column
             const operation = keywordInfo.operation
 
-            const checks = values.map(date => {
+            const checks = values.map((date) => {
               if (isEquality) {
                 const [year, month, day] = date
                   .split('-')
-                  .map(n => parseInt(n, 10))
+                  .map((n) => parseInt(n, 10))
                 const dates = []
 
                 if (year && month && day) {
@@ -237,11 +243,9 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
                 const [start, end] = dates.map(isoDate)
 
                 return start && end
-                  ? (
-                      QueryBuilder.and(
-                        [column, '>= date', start],
-                        [column, '<= date', end]
-                      )
+                  ? QueryBuilder.and(
+                      [column, '>= date', start],
+                      [column, '<= date', end]
                     )
                   : [column, `${operation} date`, start]
               }
@@ -249,101 +253,99 @@ export default async function searchBooks ({ sheetId, searchTerm, sort, page = 1
               return [column, `${operation} date`, isoDate(date)]
             })
 
-            const dateTests = checks.length > 1
-              ? [QueryBuilder.or(...checks)]
-              : checks
+            const dateTests =
+              checks.length > 1 ? [QueryBuilder.or(...checks)] : checks
 
             tests = [QueryBuilder.and([column, 'is not', 'null'], ...dateTests)]
           }
         } else {
           const column = `lower(${keywordInfo.column})`
-          tests = values.map(v => [column, 'matches', `.*${v}.*`])
+          tests = values.map((v) => [column, 'matches', `.*${v}.*`])
         }
 
         /** @type {'and' | 'or'} */
         const joinWith = keywordInfo.joinWith || 'or'
 
-        return (values.length === 1 || keywordInfo.date)
+        return values.length === 1 || keywordInfo.date
           ? tests
           : [QueryBuilder[joinWith](...tests)]
-      })
-
-    const excludingRestrictions = Object.entries(searchQueryObj.exclude)
-      .flatMap(([localeKeyword, values]) => {
-        const keywordInfo = keywords[localeKeyword]
-
-        if (!keywordInfo) {
-          return []
-        }
-
-        let tests = []
-
-        if (keywordInfo.equals) {
-          const column = `lower(${keywordInfo.column})`
-          tests = values.map(v => [column, '!=', v])
-        } else if (keywordInfo.date) {
-          const isDifferent = keywordInfo.inverseOperation === '!='
-          const isUnique = values.length === 1 || isDifferent
-          const isValidDate = isDifferent
-            ? values.every(date => validateDate(date, true))
-            : validateDate(values[0])
-
-          if (isUnique && isValidDate) {
-            const column = keywordInfo.withTime
-              ? `toDate(${keywordInfo.column})`
-              : keywordInfo.column
-            const inverseOperation = keywordInfo.inverseOperation
-
-            const checks = values.map(date => {
-              if (isDifferent) {
-                const [year, month, day] = date
-                  .split('-')
-                  .map(n => parseInt(n, 10))
-                const dates = []
-
-                if (year && month && day) {
-                  dates.push(date)
-                } else if (year && month) {
-                  const start = date + '-01'
-                  const end = date + '-' + lastDayOfMonth(year, month)
-                  dates.push(start, end)
-                } else {
-                  dates.push(date + '-01-01', date + '-12-31')
-                }
-
-                const [start, end] = dates.map(isoDate)
-
-                return start && end
-                  ? (
-                      QueryBuilder.andNot(
-                        [column, '>= date', start],
-                        [column, '<= date', end]
-                      )
-                    )
-                  : [column, `${inverseOperation} date`, start]
+      }
+    )
+
+    const excludingRestrictions = Object.entries(
+      searchQueryObj.exclude
+    ).flatMap(([localeKeyword, values]) => {
+      const keywordInfo = keywords[localeKeyword]
+
+      if (!keywordInfo) {
+        return []
+      }
+
+      let tests = []
+
+      if (keywordInfo.equals) {
+        const column = `lower(${keywordInfo.column})`
+        tests = values.map((v) => [column, '!=', v])
+      } else if (keywordInfo.date) {
+        const isDifferent = keywordInfo.inverseOperation === '!='
+        const isUnique = values.length === 1 || isDifferent
+        const isValidDate = isDifferent
+          ? values.every((date) => validateDate(date, true))
+          : validateDate(values[0])
+
+        if (isUnique && isValidDate) {
+          const column = keywordInfo.withTime
+            ? `toDate(${keywordInfo.column})`
+            : keywordInfo.column
+          const inverseOperation = keywordInfo.inverseOperation
+
+          const checks = values.map((date) => {
+            if (isDifferent) {
+              const [year, month, day] = date
+                .split('-')
+                .map((n) => parseInt(n, 10))
+              const dates = []
+
+              if (year && month && day) {
+                dates.push(date)
+              } else if (year && month) {
+                const start = date + '-01'
+                const end = date + '-' + lastDayOfMonth(year, month)
+                dates.push(start, end)
+              } else {
+                dates.push(date + '-01-01', date + '-12-31')
               }
 
-              return [column, `${inverseOperation} date`, isoDate(date)]
-            })
+              const [start, end] = dates.map(isoDate)
 
-            const dateTests = checks.length > 1
-              ? [QueryBuilder.and(...checks)]
-              : checks
+              return start && end
+                ? QueryBuilder.andNot(
+                    [column, '>= date', start],
+                    [column, '<= date', end]
+                  )
+                : [column, `${inverseOperation} date`, start]
+            }
 
-            tests = [QueryBuilder.and([column, 'is not', 'null'], ...dateTests)]
-          }
-        } else {
-          const column = `not lower(${keywordInfo.column})`
-          tests = values.map(v => [column, 'matches', `.*${v}.*`])
-        }
+            return [column, `${inverseOperation} date`, isoDate(date)]
+          })
 
-        /** @type {'and' | 'or'} */
-        const excludeJoinWith = keywordInfo.excludeJoinWith || 'and'
+          const dateTests =
+            checks.length > 1 ? [QueryBuilder.and(...checks)] : checks
 
-        return (values.length === 1 || keywordInfo.date)
-          ? tests
-          : [QueryBuilder[excludeJoinWith](...tests)]
-      })
+          tests = [QueryBuilder.and([column, 'is not', 'null'], ...dateTests)]
+        }
+      } else {
+        const column = `not lower(${keywordInfo.column})`
+        tests = values.map((v) => [column, 'matches', `.*${v}.*`])
+      }
+
+      /** @type {'and' | 'or'} */
+      const excludeJoinWith = keywordInfo.excludeJoinWith || 'and'
+
+      return values.length === 1 || keywordInfo.date
+        ? tests
+        : [QueryBuilder[excludeJoinWith](...tests)]
+    })
 
     restrictions.push(...excludingRestrictions)
 
diff --git a/src/services/sheet/updateBook.js b/src/services/sheet/updateBook.js
index d4c6736e..e74dfa4e 100644
--- a/src/services/sheet/updateBook.js
+++ b/src/services/sheet/updateBook.js
@@ -4,14 +4,13 @@
  * @param {string} sheetId The sheet to perform the operation
  * @param {import('@/model/Book').default} book The book to update
  */
-export default async function updateBook (sheetId, book) {
+export default async function updateBook(sheetId, book) {
   const bookFormatted = book.toArray()
 
-  await window.gapi.client.sheets.spreadsheets.values
-    .update({
-      spreadsheetId: sheetId,
-      range: book.sheetLocation,
-      valueInputOption: 'USER_ENTERED',
-      values: [bookFormatted]
-    })
+  await window.gapi.client.sheets.spreadsheets.values.update({
+    spreadsheetId: sheetId,
+    range: book.sheetLocation,
+    valueInputOption: 'USER_ENTERED',
+    values: [bookFormatted]
+  })
 }
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 0e43ade8..e121bb7b 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -28,31 +28,33 @@ export const useAuthStore = defineStore('auth', {
     profileImageUrl: null
   }),
   getters: {
-    isSignedIn: state => state.signedIn,
-    isStarted: state => state.started
+    isSignedIn: (state) => state.signedIn,
+    isStarted: (state) => state.started
   },
   actions: {
     /**
      * Attempt to disconnect the user.
      */
-    disconnect () {
+    disconnect() {
       this.googleAuth?.disconnect()
     },
 
     /**
      * Try to grant the missing permissions.
      */
-    async grantPermissions () {
+    async grantPermissions() {
       const GoogleUser = this.googleAuth?.currentUser?.get()
-      const missingScopes = SCOPES.filter(scope => {
+      const missingScopes = SCOPES.filter((scope) => {
         return !GoogleUser.hasGrantedScopes(scope)
       })
 
       if (missingScopes.length) {
-        await this.googleAuth?.currentUser?.get()
+        await this.googleAuth?.currentUser
+          ?.get()
           ?.grant({ scope: missingScopes.join(' ') })
 
-        this.hasGrantedScopes = this.googleAuth?.currentUser?.get()
+        this.hasGrantedScopes = this.googleAuth?.currentUser
+          ?.get()
           ?.hasGrantedScopes(SCOPES.join(' '))
       }
     },
@@ -62,7 +64,7 @@ export const useAuthStore = defineStore('auth', {
      *
      * @returns {Promise<boolean>} the signedIn status
      */
-    async initApp () {
+    async initApp() {
       return new Promise((resolve, reject) => {
         window.gapi.load('client:auth2', () => {
           window.gapi.client
@@ -71,31 +73,36 @@ export const useAuthStore = defineStore('auth', {
               clientId: import.meta.env.VITE_APP_CLIENT_ID,
               scope: SCOPES.join(' ')
             })
-            .then(() => {
-              this.googleAuth = window.gapi.auth2.getAuthInstance()
+            .then(
+              () => {
+                this.googleAuth = window.gapi.auth2.getAuthInstance()
 
-              this.googleAuth.isSignedIn.listen(signedIn => {
-                this.updateSignedIn(signedIn)
-              })
-
-              const signedIn = this.googleAuth.isSignedIn.get()
-              const hasGrantedScopes = this.hasGrantedScopes
-
-              this.started = true
-              this.updateSignedIn(signedIn)
-              this.hasGrantedScopes = hasGrantedScopes
+                this.googleAuth.isSignedIn.listen((signedIn) => {
+                  this.updateSignedIn(signedIn)
+                })
 
-              resolve(signedIn)
-            }, (error) => {
-              const errorMessage =
-                error.details === GoogleApiErrors.COOKIES_DISABLED
-                  ? t('errors.cookiesDisabled')
-                  : t('errors.authStartedFailed')
+                const signedIn = this.googleAuth.isSignedIn.get()
+                const hasGrantedScopes = this.hasGrantedScopes
 
-              reject(new Error(errorMessage, {
-                cause: { ...error, refresh: true }
-              }))
-            })
+                this.started = true
+                this.updateSignedIn(signedIn)
+                this.hasGrantedScopes = hasGrantedScopes
+
+                resolve(signedIn)
+              },
+              (error) => {
+                const errorMessage =
+                  error.details === GoogleApiErrors.COOKIES_DISABLED
+                    ? t('errors.cookiesDisabled')
+                    : t('errors.authStartedFailed')
+
+                reject(
+                  new Error(errorMessage, {
+                    cause: { ...error, refresh: true }
+                  })
+                )
+              }
+            )
         })
       })
     },
@@ -103,7 +110,7 @@ export const useAuthStore = defineStore('auth', {
     /**
      * Attempt to sign in the user.
      */
-    async signIn () {
+    async signIn() {
       try {
         await this.googleAuth?.signIn()
       } catch (e) {
@@ -114,7 +121,7 @@ export const useAuthStore = defineStore('auth', {
     /**
      * Attempt to sign out the user.
      */
-    async signOut () {
+    async signOut() {
       await this.googleAuth?.signOut()
     },
 
@@ -123,7 +130,7 @@ export const useAuthStore = defineStore('auth', {
      *
      * @param {boolean} signedIn the signedIn status
      */
-    updateSignedIn (signedIn) {
+    updateSignedIn(signedIn) {
       this.signedIn = signedIn
 
       if (signedIn) {
diff --git a/src/stores/collection.js b/src/stores/collection.js
index d4a3aa3f..ecf7cadb 100644
--- a/src/stores/collection.js
+++ b/src/stores/collection.js
@@ -20,13 +20,13 @@ export const useCollectionStore = defineStore('collection', {
     sortDirection: 'desc'
   }),
   actions: {
-    buildPaginationInfo ({ perPage, links, totalResults, page }) {
+    buildPaginationInfo({ perPage, links, totalResults, page }) {
       const paginator = new Paginator(perPage, links)
 
       return paginator.build(totalResults, page)
     },
 
-    updateCurrentPage ({ page, totalResults }) {
+    updateCurrentPage({ page, totalResults }) {
       this.currentPage = page
 
       this.paginationInfo = {
@@ -40,21 +40,21 @@ export const useCollectionStore = defineStore('collection', {
       }
     },
 
-    updateFavorites (favorites) {
+    updateFavorites(favorites) {
       this.favorites = favorites
     },
 
-    updateFutureItems (futureItems) {
+    updateFutureItems(futureItems) {
       this.futureItems = futureItems
     },
 
-    updateGroups (groups) {
+    updateGroups(groups) {
       this.filters.groups = groups || []
 
       localStorage.setItem('collection_groups', JSON.stringify(groups || []))
     },
 
-    updateSort ({ sortBy, sortDirection }) {
+    updateSort({ sortBy, sortDirection }) {
       this.sortBy = sortBy || this.sortBy
       this.sortDirection = sortDirection || this.sortDirection
     }
diff --git a/src/stores/main.js b/src/stores/main.js
index 4d59f8af..9eca125a 100644
--- a/src/stores/main.js
+++ b/src/stores/main.js
@@ -5,16 +5,16 @@ export const useStore = defineStore('main', {
     criticalError: null
   }),
   getters: {
-    hasCriticalError () {
+    hasCriticalError() {
       return this.criticalError !== null
     }
   },
   actions: {
-    clearCriticalError () {
+    clearCriticalError() {
       this.updateCriticalError(null)
     },
 
-    updateCriticalError (error) {
+    updateCriticalError(error) {
       this.criticalError = error
     }
   }
diff --git a/src/stores/search.js b/src/stores/search.js
index 7765d7f2..d2d4f571 100644
--- a/src/stores/search.js
+++ b/src/stores/search.js
@@ -12,7 +12,7 @@ export const useSearchStore = defineStore('search', {
     sortDirection: 'desc'
   }),
   actions: {
-    clear () {
+    clear() {
       this.$patch({
         query: '',
         page: 1,
@@ -22,27 +22,27 @@ export const useSearchStore = defineStore('search', {
       })
     },
 
-    updateHistory (history) {
+    updateHistory(history) {
       this.history = history
       localStorage.setItem('search_history', JSON.stringify(history))
     },
 
-    updatePage (page) {
+    updatePage(page) {
       this.page = page
     },
 
-    updatePagination (pagination) {
+    updatePagination(pagination) {
       this.pagination = {
         ...this.pagination,
         ...pagination
       }
     },
 
-    updateQuery (query) {
+    updateQuery(query) {
       this.query = query
     },
 
-    updateSort ({ sortBy, sortDirection }) {
+    updateSort({ sortBy, sortDirection }) {
       this.sortBy = sortBy || this.sortBy
       this.sortDirection = sortDirection || this.sortDirection
     }
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 6ba4f72a..26369625 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -14,7 +14,7 @@ export const THEME_SYSTEM = 'system'
 export const THEME_DARK = 'dark'
 export const THEME_LIGHT = 'light'
 
-export function getTheme () {
+export function getTheme() {
   const theme = localStorage.getItem(LocalStorageKeys.THEME)
 
   if (theme === null) {
@@ -37,7 +37,7 @@ export function getTheme () {
 /**
  * @param {MediaQueryListEvent} event
  */
-function handleThemeChange (event) {
+function handleThemeChange(event) {
   const settingsStore = useSettingsStore()
 
   if (settingsStore.theme === THEME_SYSTEM) {
@@ -49,7 +49,8 @@ function handleThemeChange (event) {
   }
 }
 
-window.matchMedia('(prefers-color-scheme: dark)')
+window
+  .matchMedia('(prefers-color-scheme: dark)')
   .addEventListener('change', handleThemeChange)
 
 const isDevEnvironment = !!import.meta.env.DEV
@@ -58,38 +59,46 @@ export const useSettingsStore = defineStore('settings', {
   state: () => ({
     blurNsfw: localStorage.getItem(LocalStorageKeys.BLUR_NSFW) === 'true',
     gridMode: localStorage.getItem(LocalStorageKeys.GRID_MODE) || 'comfortable',
-    showVueQueryDevTools: isDevEnvironment &&
-      localStorage.getItem(LocalStorageKeys.SHOW_VUE_QUERY_DEV_TOOLS) === 'true',
+    showVueQueryDevTools:
+      isDevEnvironment &&
+      localStorage.getItem(LocalStorageKeys.SHOW_VUE_QUERY_DEV_TOOLS) ===
+        'true',
     spoilerMode: {
-      cover: localStorage.getItem(LocalStorageKeys.SPOILER_MODE_COVER) === 'true',
-      synopsis: localStorage.getItem(LocalStorageKeys.SPOILER_MODE_SYNOPSIS) === 'true'
+      cover:
+        localStorage.getItem(LocalStorageKeys.SPOILER_MODE_COVER) === 'true',
+      synopsis:
+        localStorage.getItem(LocalStorageKeys.SPOILER_MODE_SYNOPSIS) === 'true'
     },
     theme: getTheme(),
     useDevSheet: isDevEnvironment,
     viewMode: localStorage.getItem(LocalStorageKeys.VIEW_MODE) || 'grid'
   }),
   actions: {
-    updateBlurNsfw (blurNsfw) {
+    updateBlurNsfw(blurNsfw) {
       this.blurNsfw = blurNsfw
 
       localStorage.setItem(LocalStorageKeys.BLUR_NSFW, blurNsfw)
     },
 
-    updateGridMode (gridMode) {
+    updateGridMode(gridMode) {
       this.gridMode = gridMode
 
       localStorage.setItem(LocalStorageKeys.GRID_MODE, gridMode)
     },
 
-    updateShowVueQueryDevTools (showVueQueryDevTools) {
+    updateShowVueQueryDevTools(showVueQueryDevTools) {
       this.showVueQueryDevTools = showVueQueryDevTools
 
-      localStorage.setItem(LocalStorageKeys.SHOW_VUE_QUERY_DEV_TOOLS, showVueQueryDevTools)
+      localStorage.setItem(
+        LocalStorageKeys.SHOW_VUE_QUERY_DEV_TOOLS,
+        showVueQueryDevTools
+      )
     },
 
-    updateSpoilerMode (spoilerMode) {
+    updateSpoilerMode(spoilerMode) {
       this.spoilerMode.cover = spoilerMode.cover || this.spoilerMode.cover
-      this.spoilerMode.synopsis = spoilerMode.synopsis || this.spoilerMode.synopsis
+      this.spoilerMode.synopsis =
+        spoilerMode.synopsis || this.spoilerMode.synopsis
 
       localStorage.setItem(
         LocalStorageKeys.SPOILER_MODE_COVER,
@@ -101,7 +110,7 @@ export const useSettingsStore = defineStore('settings', {
       )
     },
 
-    updateTheme (theme) {
+    updateTheme(theme) {
       this.theme = theme
 
       if (theme === THEME_SYSTEM) {
@@ -121,11 +130,11 @@ export const useSettingsStore = defineStore('settings', {
       }
     },
 
-    updateUseDevSheet (useDevSheet) {
+    updateUseDevSheet(useDevSheet) {
       this.useDevSheet = useDevSheet
     },
 
-    updateViewMode (viewMode) {
+    updateViewMode(viewMode) {
       this.viewMode = viewMode
 
       localStorage.setItem(LocalStorageKeys.VIEW_MODE, viewMode)
diff --git a/src/stores/sheet.js b/src/stores/sheet.js
index 822c498f..b14be1d2 100644
--- a/src/stores/sheet.js
+++ b/src/stores/sheet.js
@@ -11,31 +11,31 @@ export const useSheetStore = defineStore('sheet', {
     sheetId: null
   }),
   getters: {
-    canChange () {
+    canChange() {
       return this.options.length > 1
     },
 
-    canEdit () {
+    canEdit() {
       return this.selected?.capabilities?.canEdit
     },
 
-    loadedOnce () {
+    loadedOnce() {
       return this.sheetId !== null
     },
 
-    loading () {
+    loading() {
       return this.sheetId === null
     },
 
-    ownerDisplayName () {
+    ownerDisplayName() {
       return this.selected?.owners?.[0]?.displayName
     },
 
-    ownerPictureUrl () {
+    ownerPictureUrl() {
       return this.selected?.owners?.[0]?.photoLink
     },
 
-    shared () {
+    shared() {
       return this.selected && this.selected.ownedByMe === false
     }
   },
@@ -45,7 +45,7 @@ export const useSheetStore = defineStore('sheet', {
      *
      * @returns {Promise<string>} the sheet ID
      */
-    async findSheetId () {
+    async findSheetId() {
       const settingsStore = useSettingsStore()
       const useDevSheet = settingsStore.useDevSheet
 
@@ -58,19 +58,19 @@ export const useSheetStore = defineStore('sheet', {
       return sheet.id
     },
 
-    updateIsEmpty (isEmpty) {
+    updateIsEmpty(isEmpty) {
       this.isEmpty = isEmpty
     },
 
-    updateOptions (options) {
+    updateOptions(options) {
       this.options = options ? options.slice() : []
     },
 
-    updateSelected (sheet) {
+    updateSelected(sheet) {
       this.selected = sheet ? { ...this.selected, ...sheet } : null
     },
 
-    updateSheetId (sheetId) {
+    updateSheetId(sheetId) {
       this.sheetId = sheetId
       localStorage.setItem('last_sheet_opened', sheetId)
     }
diff --git a/src/tests/book.test.js b/src/tests/book.test.js
index 5adb619e..60177656 100644
--- a/src/tests/book.test.js
+++ b/src/tests/book.test.js
@@ -33,7 +33,8 @@ const testBook = new Book({
   },
   store: 'Amazon',
   status: STATUS_READ,
-  coverUrl: 'https://pipocaenanquim.com.br/wp-content/uploads/2021/11/A1uvtpMPsfL.jpeg',
+  coverUrl:
+    'https://pipocaenanquim.com.br/wp-content/uploads/2021/11/A1uvtpMPsfL.jpeg',
   boughtAt: new Date('2022-02-22'),
   readAt: new Date('2022-02-22'),
   createdAt: new Date('2022-02-22T21:00:00.000Z'),
@@ -111,11 +112,11 @@ it('Should split the titles correctly', () => {
 
 it('Should detect the correct code type', () => {
   const codes = {
-    // eslint-disable-next-line quote-props
+    // eslint-disable-next-line
     '9788545702870': 'ISBN-13',
-    // eslint-disable-next-line quote-props
+    // eslint-disable-next-line
     '8576161877': 'ISBN-10',
-    // eslint-disable-next-line quote-props
+    // eslint-disable-next-line
     '7897780165585': 'EAN-13',
     'a-random-string': 'ID',
     'N/A': 'N/A'
diff --git a/src/tests/cover.test.js b/src/tests/cover.test.js
index dbde50ee..2eadb4f3 100644
--- a/src/tests/cover.test.js
+++ b/src/tests/cover.test.js
@@ -18,8 +18,9 @@ it('Should replace the value in direct URL', async () => {
     property: 'code'
   })
 
-  await expect(directUrl(new Book({ code: '12345' })))
-    .resolves.toStrictEqual(['https://cool.api.dev/isbn/12345.jpg'])
+  await expect(directUrl(new Book({ code: '12345' }))).resolves.toStrictEqual([
+    'https://cool.api.dev/isbn/12345.jpg'
+  ])
 })
 
 it('Should find the cover in WordPress if available', async () => {
@@ -27,9 +28,7 @@ it('Should find the cover in WordPress if available', async () => {
     data: [
       {
         _embedded: {
-          'wp:featuredmedia': [
-            { source_url: 'COVER_URL' }
-          ]
+          'wp:featuredmedia': [{ source_url: 'COVER_URL' }]
         }
       }
     ]
@@ -41,8 +40,9 @@ it('Should find the cover in WordPress if available', async () => {
     searchWith: 'code'
   })
 
-  await expect(wordpress(new Book({ code: '12345' })))
-    .resolves.toStrictEqual(['COVER_URL'])
+  await expect(wordpress(new Book({ code: '12345' }))).resolves.toStrictEqual([
+    'COVER_URL'
+  ])
 })
 
 it('Should return no results in WordPress if not available', async () => {
@@ -54,8 +54,7 @@ it('Should return no results in WordPress if not available', async () => {
     searchWith: 'code'
   })
 
-  await expect(wordpress(new Book({ code: '12345' })))
-    .resolves.toHaveLength(0)
+  await expect(wordpress(new Book({ code: '12345' }))).resolves.toHaveLength(0)
 })
 
 it('Should check only on Amazon when forced', async () => {
@@ -63,15 +62,13 @@ it('Should check only on Amazon when forced', async () => {
 
   const book = new Book({ code: '9786589912415' })
 
-  await expect(Cover.findCovers(book, true))
-    .resolves.toStrictEqual([
-      'https://images-na.ssl-images-amazon.com/images/P/6589912416.01._SCRM_SL700_.jpg'
-    ])
+  await expect(Cover.findCovers(book, true)).resolves.toStrictEqual([
+    'https://images-na.ssl-images-amazon.com/images/P/6589912416.01._SCRM_SL700_.jpg'
+  ])
 })
 
 it('Should return no results if book does not have a ISBN', async () => {
   const book = new Book({ code: '12345' })
 
-  await expect(Cover.findCovers(book))
-    .resolves.toHaveLength(0)
+  await expect(Cover.findCovers(book)).resolves.toHaveLength(0)
 })
diff --git a/src/tests/lookup.test.js b/src/tests/lookup.test.js
index ac936794..781fef22 100644
--- a/src/tests/lookup.test.js
+++ b/src/tests/lookup.test.js
@@ -72,8 +72,9 @@ describe('CBL', () => {
     const cbl = new Cbl()
     const search = jest.spyOn(cbl, 'search')
 
-    await expect(cbl.search('9788545702871')).rejects
-      .toThrowError('The informed ISBN is invalid.')
+    await expect(cbl.search('9788545702871')).rejects.toThrowError(
+      'The informed ISBN is invalid.'
+    )
 
     expect(search).toHaveBeenCalled()
   })
@@ -84,8 +85,9 @@ describe('CBL', () => {
     const cbl = new Cbl()
     jest.spyOn(cbl, 'search')
 
-    await expect(cbl.search('9788545702870')).rejects
-      .toThrowError('Authorization key missing.')
+    await expect(cbl.search('9788545702870')).rejects.toThrowError(
+      'Authorization key missing.'
+    )
   })
 })
 
@@ -145,8 +147,9 @@ describe('Google Books', () => {
     const googleBooks = new GoogleBooks()
     const search = jest.spyOn(googleBooks, 'search')
 
-    await expect(googleBooks.search('9788545702871')).rejects
-      .toThrowError('The informed ISBN is invalid.')
+    await expect(googleBooks.search('9788545702871')).rejects.toThrowError(
+      'The informed ISBN is invalid.'
+    )
 
     expect(search).toHaveBeenCalled()
   })
@@ -205,8 +208,9 @@ describe('Open Library', () => {
     const openLibrary = new OpenLibrary()
     const search = jest.spyOn(openLibrary, 'search')
 
-    await expect(openLibrary.search('9788545702871')).rejects
-      .toThrowError('The informed ISBN is invalid.')
+    await expect(openLibrary.search('9788545702871')).rejects.toThrowError(
+      'The informed ISBN is invalid.'
+    )
 
     expect(search).toHaveBeenCalled()
   })
diff --git a/src/tests/sheet.test.js b/src/tests/sheet.test.js
index db41b47d..e58cfb59 100644
--- a/src/tests/sheet.test.js
+++ b/src/tests/sheet.test.js
@@ -1,5 +1,11 @@
 import QueryBuilder from '@/data/QueryBuilder'
-import Book, { CollectionColumns, FAVORITE_ACTIVE, PropertyToColumn, STATUS_FUTURE, STATUS_READ } from '@/model/Book'
+import Book, {
+  CollectionColumns,
+  FAVORITE_ACTIVE,
+  PropertyToColumn,
+  STATUS_FUTURE,
+  STATUS_READ
+} from '@/model/Book'
 import SheetService from '@/services/sheet'
 import { PER_PAGE } from '@/services/sheet/constants'
 
@@ -8,13 +14,14 @@ describe('Sheet service', () => {
   const queryToString = jest.spyOn(QueryBuilder.prototype, 'toString')
 
   const queryMock = jest.fn().mockReturnValue({
-    send: resultFn => resultFn({
-      getDataTable: jest.fn().mockReturnValue({
-        getNumberOfColumns: jest.fn().mockReturnValue(0),
-        getNumberOfRows: jest.fn().mockReturnValue(0)
+    send: (resultFn) =>
+      resultFn({
+        getDataTable: jest.fn().mockReturnValue({
+          getNumberOfColumns: jest.fn().mockReturnValue(0),
+          getNumberOfRows: jest.fn().mockReturnValue(0)
+        }),
+        isError: jest.fn().mockReturnValue(false)
       }),
-      isError: jest.fn().mockReturnValue(false)
-    }),
     setQuery: setQueryMock
   })
 
@@ -123,7 +130,10 @@ describe('Sheet service', () => {
     expect(queryToString.mock.instances[0].toObject()).toMatchObject({
       select: [STORE, `count(${STORE})`],
       where: { restrictions: [] },
-      orderBy: [[`count(${STORE})`, 'desc'], [STORE, 'asc']]
+      orderBy: [
+        [`count(${STORE})`, 'desc'],
+        [STORE, 'asc']
+      ]
     })
 
     queryToString.mockClear()
@@ -148,9 +158,7 @@ describe('Sheet service', () => {
     expect(queryToString.mock.instances[0].toObject()).toMatchObject({
       select: [GROUP, STATUS, `count(${GROUP})`],
       where: {
-        restrictions: [
-          [GROUP, 'is not', 'null']
-        ]
+        restrictions: [[GROUP, 'is not', 'null']]
       },
       groupBy: [GROUP, STATUS]
     })
@@ -305,10 +313,12 @@ describe('Sheet service', () => {
       expect(queryToString.mock.instances[0].toObject()).toMatchObject({
         select: [],
         where: {
-          restrictions: [{
-            operator: QueryBuilder.OR,
-            restrictions: [[GROUP, '=', 'Manga']]
-          }]
+          restrictions: [
+            {
+              operator: QueryBuilder.OR,
+              restrictions: [[GROUP, '=', 'Manga']]
+            }
+          ]
         },
         orderBy: [[CREATED_AT, 'desc']]
       })
@@ -374,7 +384,7 @@ describe('Sheet service', () => {
       expect(setQueryMock).toHaveBeenCalled()
     })
 
-    it('Should build the query correctly (with don\'t count)', async () => {
+    it("Should build the query correctly (with don't count)", async () => {
       const { CREATED_AT } = CollectionColumns
       await SheetService.getBooks('TEST_SHEET_ID', 1, { dontCount: true })
 
diff --git a/src/util/date.js b/src/util/date.js
index e85c6d7b..ed18b700 100644
--- a/src/util/date.js
+++ b/src/util/date.js
@@ -5,7 +5,7 @@
  * @param {number} month The month
  * @returns {number} The last day of the month
  */
-export function lastDayOfMonth (year, month) {
+export function lastDayOfMonth(year, month) {
   if (year < 1000 || year > 3000 || month === 0 || month > 12) {
     return null
   }
@@ -19,8 +19,6 @@ export function lastDayOfMonth (year, month) {
   return monthLength[month - 1]
 }
 
-export function isoDate (date) {
-  return date
-    .replace(/-(\d)-/, '0$1')
-    .replace(/-(\d)$/, '0$1')
+export function isoDate(date) {
+  return date.replace(/-(\d)-/, '0$1').replace(/-(\d)$/, '0$1')
 }
diff --git a/src/util/index.js b/src/util/index.js
index c5e34d2e..4dee45e3 100644
--- a/src/util/index.js
+++ b/src/util/index.js
@@ -1,3 +1,3 @@
-export function getFlagUrl (countryCode) {
+export function getFlagUrl(countryCode) {
   return `https://hatscripts.github.io/circle-flags/flags/${countryCode.toLowerCase()}.svg`
 }
diff --git a/src/util/isbn.js b/src/util/isbn.js
index cff4c403..841cee08 100644
--- a/src/util/isbn.js
+++ b/src/util/isbn.js
@@ -1,7 +1,7 @@
 import { getFlagUrl } from '.'
 import { isbn as validateIsbn } from './validators'
 
-export function convertIsbn13ToIsbn10 (isbn13) {
+export function convertIsbn13ToIsbn10(isbn13) {
   isbn13 = isbn13?.replace(/-/g, '') || ''
 
   if (!validateIsbn(isbn13)) {
@@ -13,7 +13,8 @@ export function convertIsbn13ToIsbn10 (isbn13) {
   }
 
   const equalPart = isbn13.slice(3, -1)
-  const sum = equalPart.split('')
+  const sum = equalPart
+    .split('')
     .map((d, i) => parseInt(d, 10) * (i + 1))
     .reduce((acm, crr) => acm + crr, 0)
   const lastDigit = sum % 11
@@ -55,24 +56,22 @@ const REGISTRATION_GROUPS = {
   99974: ['BO', 'es']
 }
 
-export function getIsbnCountry (isbn) {
+export function getIsbnCountry(isbn) {
   if (!validateIsbn(isbn)) {
     return null
   }
 
-  isbn = isbn.replace(/-/g, '')
-    .replace(/^97[8|9]/, '')
+  isbn = isbn.replace(/-/g, '').replace(/^97[8|9]/, '')
 
   const registrationGroups = Object.fromEntries(
-    Object.entries(REGISTRATION_GROUPS)
-      .map(([code, info]) => [
-        code,
-        {
-          countryCode: info[0],
-          locale: info[1],
-          flagUrl: getFlagUrl(info[0])
-        }
-      ])
+    Object.entries(REGISTRATION_GROUPS).map(([code, info]) => [
+      code,
+      {
+        countryCode: info[0],
+        locale: info[1],
+        flagUrl: getFlagUrl(info[0])
+      }
+    ])
   )
 
   for (let i = 1; i <= 5; i++) {
diff --git a/src/util/validators.js b/src/util/validators.js
index ea2838c2..99e2d0c8 100644
--- a/src/util/validators.js
+++ b/src/util/validators.js
@@ -1,14 +1,12 @@
 import { helpers } from '@vuelidate/validators'
 
-export function decimalComma (digits) {
-  return helpers.regex(
-    new RegExp(`^\\d+([\\,\\.]\\d{1,${digits}})?$`)
-  )
+export function decimalComma(digits) {
+  return helpers.regex(new RegExp(`^\\d+([\\,\\.]\\d{1,${digits}})?$`))
 }
 
 export const dimension = decimalComma(2)
 
-export function isbn (isbn) {
+export function isbn(isbn) {
   isbn = isbn?.replace(/-/g, '') || ''
 
   if (isbn.length !== 10 && isbn.length !== 13) {
@@ -20,21 +18,23 @@ export function isbn (isbn) {
   }
 
   if (isbn.length === 10) {
-    const sum = isbn.split('')
+    const sum = isbn
+      .split('')
       .map((d, i) => (10 - i) * (d === 'X' ? 10 : parseInt(d, 10)))
       .reduce((acm, cv) => acm + cv)
 
     return sum % 11 === 0
   }
 
-  const sum = isbn.split('')
-    .map((d, i) => (((i + 1) % 2 === 0) ? 3 : 1) * parseInt(d, 10))
+  const sum = isbn
+    .split('')
+    .map((d, i) => ((i + 1) % 2 === 0 ? 3 : 1) * parseInt(d, 10))
     .reduce((acm, cv) => acm + cv)
 
   return sum % 10 === 0
 }
 
-export function issn (issn) {
+export function issn(issn) {
   issn = issn?.replace(/-/g, '') || ''
 
   if (!issn.match(/^[0-9]{7}[0-9xX]{1}$/)) {
@@ -42,7 +42,8 @@ export function issn (issn) {
   }
 
   const withoutDigit = issn.slice(0, -1)
-  let calcDigit = withoutDigit.split('')
+  let calcDigit = withoutDigit
+    .split('')
     .map((d, i) => parseInt(d, 10) * (8 - i))
     .reduce((acm, cv) => acm + cv, 0)
   calcDigit = calcDigit % 11
@@ -52,7 +53,7 @@ export function issn (issn) {
   return calcDigitStr === issn.slice(-1)
 }
 
-export function ean (ean) {
+export function ean(ean) {
   ean = ean?.replace(/-/g, '') || ''
 
   if (!ean.match(/^\d{13}$/)) {
@@ -60,14 +61,15 @@ export function ean (ean) {
   }
 
   const withoutDigit = ean.slice(0, -1)
-  const checkSum = withoutDigit.split('')
+  const checkSum = withoutDigit
+    .split('')
     .map((d, i) => parseInt(d, 10) * ((i + 1) % 2 === 0 ? 3 : 1))
     .reduce((acm, cv) => acm + cv, 0)
 
   return (10 - (checkSum % 10)) % 10 === parseInt(ean.slice(-1), 10)
 }
 
-export function isoDate (dateString, incomplete) {
+export function isoDate(dateString, incomplete) {
   if (typeof dateString !== 'string') {
     return false
   }
diff --git a/src/views/Error.vue b/src/views/Error.vue
index e83638f0..e6a620c0 100644
--- a/src/views/Error.vue
+++ b/src/views/Error.vue
@@ -1,12 +1,66 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import useAppInfo from '@/composables/useAppInfo'
+import { useAuthStore } from '@/stores/auth'
+import { useStore } from '@/stores/main'
+
+import { IdentificationIcon, RefreshIcon } from '@heroicons/vue/solid'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const mainStore = useStore()
+
+const { appVersion } = useAppInfo()
+
+const hasCriticalError = computed(() => mainStore.hasCriticalError)
+const criticalError = computed(() => mainStore.criticalError)
+
+onMounted(() => {
+  if (!hasCriticalError.value) {
+    router.replace({ name: 'Home' })
+  }
+})
+
+const isDev = ref(import.meta.env.DEV)
+
+const { t } = useI18n({ useScope: 'global' })
+
+function refresh() {
+  window.location.reload()
+}
+
+const hasGrantedScopes = computed(() => authStore.hasGrantedScopes)
+
+async function grantPermissions() {
+  await authStore.grantPermissions()
+}
+
+watch(hasGrantedScopes, (newValue) => {
+  if (newValue) {
+    router.replace({ name: 'DashboardHome' })
+  }
+})
+</script>
+
 <template>
-  <main class="min-h-screen flex md:items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8" id="main-content">
+  <main
+    class="min-h-screen flex md:items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"
+    id="main-content"
+  >
     <div class="max-w-2xl w-full space-y-8">
       <div class="flex flex-col md:flex-row w-full">
-        <p class="shrink-0 font-semibold font-display text-4xl text-primary-600 dark:text-primary-500">
+        <p
+          class="shrink-0 font-semibold font-display text-4xl text-primary-600 dark:text-primary-500"
+        >
           500
         </p>
         <div class="flex-1 min-w-0">
-          <header class="md:border-l md:border-gray-200 dark:md:border-gray-700 md:pl-6 md:ml-6">
+          <header
+            class="md:border-l md:border-gray-200 dark:md:border-gray-700 md:pl-6 md:ml-6"
+          >
             <h2 class="font-semibold font-display text-4xl dark:text-gray-100">
               {{ t('criticalError.title') }}
             </h2>
@@ -14,8 +68,13 @@
               {{ criticalError?.message || t('errors.unexpected') }}
             </p>
           </header>
-          <div class="mt-10 md:ml-6 md:pl-6" v-if="isDev && criticalError?.stack">
-            <div class="text-sm text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-md py-4 px-6">
+          <div
+            class="mt-10 md:ml-6 md:pl-6"
+            v-if="isDev && criticalError?.stack"
+          >
+            <div
+              class="text-sm text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-md py-4 px-6"
+            >
               <div class="w-full overflow-auto">
                 <pre><code>{{ criticalError?.stack || '' }}</code></pre>
               </div>
@@ -53,66 +112,3 @@
     </div>
   </main>
 </template>
-
-<script>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import useAppInfo from '@/composables/useAppInfo'
-import { useAuthStore } from '@/stores/auth'
-import { useStore } from '@/stores/main'
-
-import { IdentificationIcon, RefreshIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: { IdentificationIcon, RefreshIcon },
-
-  setup () {
-    const router = useRouter()
-    const authStore = useAuthStore()
-    const mainStore = useStore()
-
-    const { appVersion } = useAppInfo()
-
-    const hasCriticalError = computed(() => mainStore.hasCriticalError)
-    const criticalError = computed(() => mainStore.criticalError)
-
-    onMounted(() => {
-      if (!hasCriticalError.value) {
-        router.replace({ name: 'Home' })
-      }
-    })
-
-    const isDev = ref(import.meta.env.DEV)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    function refresh () {
-      window.location.reload()
-    }
-
-    const hasGrantedScopes = computed(() => authStore.hasGrantedScopes)
-
-    async function grantPermissions () {
-      await authStore.grantPermissions()
-    }
-
-    watch(hasGrantedScopes, newValue => {
-      if (newValue) {
-        router.replace({ name: 'DashboardHome' })
-      }
-    })
-
-    return {
-      appVersion,
-      criticalError,
-      isDev,
-      refresh,
-      t,
-      hasGrantedScopes,
-      grantPermissions
-    }
-  }
-}
-</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8a03b911..3424ea63 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,13 +1,66 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+
+import {
+  CodeIcon,
+  DatabaseIcon,
+  PhotographIcon,
+  SearchIcon,
+  SparklesIcon
+} from '@heroicons/vue/outline'
+
+import HomeFooter from '@/components/HomeFooter.vue'
+import HomeHeader from '@/components/HomeHeader.vue'
+import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
+import Typewriter from '@/components/Typewriter.vue'
+
+const authStore = useAuthStore()
+const signedIn = computed(() => authStore.signedIn)
+
+const { t } = useI18n({ useScope: 'global' })
+
+const features = computed(() => [
+  {
+    icon: SearchIcon,
+    title: t('home.features.isbn.title'),
+    description: t('home.features.isbn.description')
+  },
+  {
+    icon: PhotographIcon,
+    title: t('home.features.cover.title'),
+    description: t('home.features.cover.description')
+  },
+  {
+    icon: SparklesIcon,
+    title: t('home.features.data.title'),
+    description: t('home.features.data.description')
+  },
+  {
+    icon: CodeIcon,
+    title: t('home.features.openSource.title'),
+    description: t('home.features.openSource.description')
+  }
+])
+</script>
+
 <template>
   <div class="bg-gray-50 dark:bg-gray-900">
     <HomeHeader />
 
-    <main class="max-w-7xl mx-auto pb-16 px-6 lg:px-8 space-y-16" id="main-content">
+    <main
+      class="max-w-7xl mx-auto pb-16 px-6 lg:px-8 space-y-16"
+      id="main-content"
+    >
       <section class="w-full">
         <div class="flex flex-col items-center pt-24 space-y-24">
           <div class="space-y-8">
-            <h2 class="text-gray-800 dark:text-gray-100 font-bold font-display text-center text-5xl">
-              {{ t('home.leading1') + ' ' }}<br class="hidden md:block">
+            <h2
+              class="text-gray-800 dark:text-gray-100 font-bold font-display text-center text-5xl"
+            >
+              {{ t('home.leading1') + ' ' }}<br class="hidden md:block" />
               <i18n-t
                 class="text-primary-600 dark:text-primary-500"
                 keypath="home.leading2"
@@ -29,16 +82,22 @@
                 />
               </i18n-t>
             </h2>
-            <p class="w-full text-gray-500 dark:text-gray-400 text-center max-w-2xl text-lg">
+            <p
+              class="w-full text-gray-500 dark:text-gray-400 text-center max-w-2xl text-lg"
+            >
               {{ t('home.shortDescription') }}
             </p>
           </div>
-          <figure class="w-full flex flex-col justify-center border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden">
+          <figure
+            class="w-full flex flex-col justify-center border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+          >
             <div
               aria-hidden="true"
               class="bg-gray-800 py-2.5 px-4 flex justify-between items-center"
             >
-              <p class="text-sm text-gray-400 font-medium leading-tight select-none">
+              <p
+                class="text-sm text-gray-400 font-medium leading-tight select-none"
+              >
                 {{ t('app.name') }}
               </p>
               <div class="space-x-2 hidden md:flex">
@@ -47,8 +106,16 @@
                 <span class="w-3.5 h-3.5 rounded-lg bg-gray-700 block"></span>
               </div>
             </div>
-            <img class="md:hidden" src="@/assets/home/screenshot-library-mobile.png" alt="">
-            <img class="hidden md:block" src="@/assets/home/screenshot-dashboard.jpg" alt="">
+            <img
+              class="md:hidden"
+              src="@/assets/home/screenshot-library-mobile.png"
+              alt=""
+            />
+            <img
+              class="hidden md:block"
+              src="@/assets/home/screenshot-dashboard.jpg"
+              alt=""
+            />
           </figure>
         </div>
       </section>
@@ -57,43 +124,19 @@
         <h2>{{ t('home.features.title') }}</h2>
 
         <div class="features-grid">
-          <div class="feature">
-            <span class="icon" aria-hidden="true">
-              <SearchIcon />
-            </span>
-            <h3>{{ t('home.features.isbn.title') }}</h3>
-            <p>{{ t('home.features.isbn.description') }}</p>
-          </div>
-
-          <div class="feature">
+          <div v-for="feature in features" :key="feature.title" class="feature">
             <span class="icon" aria-hidden="true">
-              <PhotographIcon />
+              <component :is="feature.icon" />
             </span>
-            <h3>{{ t('home.features.cover.title') }}</h3>
-            <p>{{ t('home.features.cover.description') }}</p>
-          </div>
-
-          <div class="feature">
-            <span class="icon" aria-hidden="true">
-              <SparklesIcon />
-            </span>
-            <h3>{{ t('home.features.data.title') }}</h3>
-            <p>{{ t('home.features.data.description') }}</p>
-          </div>
-
-          <div class="feature">
-            <span class="icon" aria-hidden="true">
-              <CodeIcon />
-            </span>
-            <h3>{{ t('home.features.openSource.title') }}</h3>
-            <p>{{ t('home.features.openSource.description') }}</p>
+            <h3>{{ feature.title }}</h3>
+            <p>{{ feature.description }}</p>
           </div>
         </div>
       </section>
 
       <section class="functionality">
         <figure>
-          <img src="@/assets/home/screenshot-metadata.png" alt="">
+          <img src="@/assets/home/screenshot-metadata.png" alt="" />
         </figure>
 
         <div class="functionality-description">
@@ -133,49 +176,6 @@
   </div>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-
-import {
-  CodeIcon,
-  DatabaseIcon,
-  PhotographIcon,
-  SearchIcon,
-  SparklesIcon
-} from '@heroicons/vue/outline'
-
-import HomeFooter from '@/components/HomeFooter.vue'
-import HomeHeader from '@/components/HomeHeader.vue'
-import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
-import Typewriter from '@/components/Typewriter.vue'
-
-export default {
-  components: {
-    HomeFooter,
-    HomeHeader,
-    SignInWithGoogleButton,
-    CodeIcon,
-    DatabaseIcon,
-    PhotographIcon,
-    SearchIcon,
-    SparklesIcon,
-    Typewriter
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const signedIn = computed(() => authStore.signedIn)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { signedIn, t }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .features {
   @apply grid grid-cols-3 gap-12 py-6;
diff --git a/src/views/PageNotFound.vue b/src/views/PageNotFound.vue
index 5e731bb2..7e9815b9 100644
--- a/src/views/PageNotFound.vue
+++ b/src/views/PageNotFound.vue
@@ -1,12 +1,33 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/auth'
+
+import { ArrowSmLeftIcon } from '@heroicons/vue/solid'
+
+const authStore = useAuthStore()
+const signedIn = computed(() => authStore.signedIn)
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
- <main class="min-h-screen flex md:items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8" id="main-content">
+  <main
+    class="min-h-screen flex md:items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"
+    id="main-content"
+  >
     <div class="max-w-xl w-full">
       <header class="flex flex-col md:flex-row">
-        <p class="font-semibold font-display text-4xl text-primary-600 dark:text-primary-500">
+        <p
+          class="font-semibold font-display text-4xl text-primary-600 dark:text-primary-500"
+        >
           404
         </p>
         <div>
-          <div class="md:border-l md:border-gray-200 dark:md:border-gray-700 md:pl-6 md:ml-6">
+          <div
+            class="md:border-l md:border-gray-200 dark:md:border-gray-700 md:pl-6 md:ml-6"
+          >
             <h2 class="font-semibold font-display text-4xl dark:text-gray-100">
               {{ t('pageNotFound.title') }}
             </h2>
@@ -20,7 +41,9 @@
               class="button is-ghost is-link -ml-3 group"
             >
               <span aria-hidden="true">
-                <ArrowSmLeftIcon class="motion-safe:transition-transform group-hover:-translate-x-1" />
+                <ArrowSmLeftIcon
+                  class="motion-safe:transition-transform group-hover:-translate-x-1"
+                />
               </span>
               {{
                 t(
@@ -36,25 +59,3 @@
     </div>
   </main>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useAuthStore } from '@/stores/auth'
-
-import { ArrowSmLeftIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: { ArrowSmLeftIcon },
-
-  setup () {
-    const authStore = useAuthStore()
-    const signedIn = computed(() => authStore.signedIn)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { signedIn, t }
-  }
-}
-</script>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index 0e60539f..e7466941 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -1,15 +1,69 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import useAppInfo from '@/composables/useAppInfo'
+import { useAuthStore } from '@/stores/auth'
+
+import { LibraryIcon } from '@heroicons/vue/solid'
+
+import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const isDev = ref(import.meta.env.DEV)
+
+const { appVersion } = useAppInfo()
+
+const started = computed(() => authStore.started)
+const signedIn = computed(() => authStore.signedIn)
+
+const redirectToDashboard = () => {
+  if (signedIn.value) {
+    router.replace('/dashboard')
+  }
+}
+
+onMounted(redirectToDashboard)
+
+watch(signedIn, redirectToDashboard)
+
+const { t } = useI18n({ useScope: 'global' })
+
+const links = computed(() => [
+  { route: 'Accessibility', text: t('footer.links.a11y') },
+  { route: 'Instructions', text: t('footer.links.instructions') },
+  { route: 'PrivacyPolicy', text: t('footer.links.privacyPolicy') },
+  { route: 'TermsOfUse', text: t('footer.links.termsOfUse') }
+])
+</script>
+
 <template>
- <main role="main" class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8" id="main-content">
+  <main
+    role="main"
+    class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"
+    id="main-content"
+  >
     <div class="max-w-xs w-full space-y-8">
       <header>
         <span aria-hidden="true">
-          <LibraryIcon class="h-14 w-14 mx-auto text-primary-500" aria-hidden="true" />
+          <LibraryIcon
+            class="h-14 w-14 mx-auto text-primary-500"
+            aria-hidden="true"
+          />
         </span>
-        <h1 class="mt-6 font-display text-center text-3xl font-bold text-gray-900 dark:text-gray-100">
+        <h1
+          class="mt-6 font-display text-center text-3xl font-bold text-gray-900 dark:text-gray-100"
+        >
           {{ t('signIn.title') }}
           <span class="sr-only">{{ t('signIn.titleSr') }}</span>
         </h1>
-        <p aria-hidden="true" class="mt-1 text-center text-sm text-gray-600 dark:text-gray-300">
+        <p
+          aria-hidden="true"
+          class="mt-1 text-center text-sm text-gray-600 dark:text-gray-300"
+        >
           {{ t('signIn.subTitle') }}
         </p>
       </header>
@@ -17,42 +71,11 @@
         <SignInWithGoogleButton class="is-large" />
 
         <footer role="contentinfo">
-          <nav
-            role="navigation"
-            aria-label="Links úteis"
-            class="text-sm mb-6"
-          >
+          <nav role="navigation" aria-label="Links úteis" class="text-sm mb-6">
             <ul class="flex flex-col items-center space-y-1">
-              <li>
-                <router-link
-                  :to="{ name: 'Accessibility' }"
-                  class="utility-link"
-                >
-                  {{ t('footer.links.a11y') }}
-                </router-link>
-              </li>
-              <li>
-                <router-link
-                  :to="{ name: 'Instructions' }"
-                  class="utility-link"
-                >
-                  {{ t('footer.links.instructions') }}
-                </router-link>
-              </li>
-              <li>
-                <router-link
-                  :to="{ name: 'PrivacyPolicy' }"
-                  class="utility-link"
-                >
-                  {{ t('footer.links.privacyPolicy') }}
-                </router-link>
-              </li>
-              <li>
-                <router-link
-                  :to="{ name: 'TermsOfUse' }"
-                  class="utility-link"
-                >
-                  {{ t('footer.links.termsOfUse') }}
+              <li v-for="link in links" :key="link.route">
+                <router-link :to="{ name: link.route }" class="utility-link">
+                  {{ link.text }}
                 </router-link>
               </li>
             </ul>
@@ -62,12 +85,28 @@
             {{ t('footer.version', { version: appVersion }) }}
           </p>
 
-          <p v-if="!isDev" class="text-center text-xs text-gray-600 dark:text-gray-500 mt-1" lang="en">
-            <a href="https://www.netlify.com/" target="_blank" class="rounded-sm hover:underline hover:text-primary-600 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900 focus-visible:ring-primary-500">This site is powered by Netlify</a>
-            <img src="@/assets/netlify-logo.svg" alt="Netlify logo" class="h-3.5 w-3.5 inline-block align-text-bottom ml-1"/>
+          <p
+            v-if="!isDev"
+            class="text-center text-xs text-gray-600 dark:text-gray-500 mt-1"
+            lang="en"
+          >
+            <a
+              href="https://www.netlify.com/"
+              target="_blank"
+              class="rounded-sm hover:underline hover:text-primary-600 dark:hover:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900 focus-visible:ring-primary-500"
+              >This site is powered by Netlify</a
+            >
+            <img
+              src="@/assets/netlify-logo.svg"
+              alt="Netlify logo"
+              class="h-3.5 w-3.5 inline-block align-text-bottom ml-1"
+            />
           </p>
 
-          <p v-else class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">
+          <p
+            v-else
+            class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1"
+          >
             {{ t('footer.dev') }}
           </p>
         </footer>
@@ -76,60 +115,6 @@
   </main>
 </template>
 
-<script>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import useAppInfo from '@/composables/useAppInfo'
-import { useAuthStore } from '@/stores/auth'
-
-import { LibraryIcon } from '@heroicons/vue/solid'
-
-import SignInWithGoogleButton from '@/components/SignInWithGoogleButton.vue'
-
-export default {
-  name: 'Home',
-
-  components: {
-    LibraryIcon,
-    SignInWithGoogleButton
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const router = useRouter()
-
-    const isDev = ref(import.meta.env.DEV)
-
-    const { appVersion } = useAppInfo()
-
-    const started = computed(() => authStore.started)
-    const signedIn = computed(() => authStore.signedIn)
-
-    const redirectToDashboard = () => {
-      if (signedIn.value) {
-        router.replace('/dashboard')
-      }
-    }
-
-    onMounted(redirectToDashboard)
-
-    watch(signedIn, redirectToDashboard)
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return {
-      appVersion,
-      isDev,
-      started,
-      signedIn,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .utility-link {
   @apply text-primary-500 dark:text-primary-400 font-semibold rounded-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900 focus-visible:ring-primary-500;
diff --git a/src/views/about/Accessibility.vue b/src/views/about/Accessibility.vue
index 41a6c3b8..639ad748 100644
--- a/src/views/about/Accessibility.vue
+++ b/src/views/about/Accessibility.vue
@@ -1,46 +1,33 @@
-<template>
-  <Content>
-    <ContentTitle>{{ t('about.a11y.title') }}</ContentTitle>
-    <ContentBody v-html="body" />
-    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
-  </Content>
-</template>
-
-<script>
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import useMarkdown from '@/composables/useMarkdown'
+
 import Content from '@/components/Content.vue'
 import ContentTitle from '@/components/ContentTitle.vue'
 import ContentBody from '@/components/ContentBody.vue'
 import ContentFooter from '@/components/ContentFooter.vue'
 
-import useMarkdown from '@/composables/useMarkdown'
-
-export default {
-  components: {
-    Content,
-    ContentBody,
-    ContentFooter,
-    ContentTitle
-  },
+const { t } = useI18n({ useScope: 'global' })
 
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
+const { renderMarkdown } = useMarkdown({
+  mdOptions: { typographer: true }
+})
 
-    const { renderMarkdown } = useMarkdown({
-      mdOptions: { typographer: true }
+const body = ref(
+  renderMarkdown(
+    t('about.a11y.body', {
+      headlessUiLink: 'https://headlessui.dev/vue/menu#keyboard-interaction'
     })
-
-    const body = ref(
-      renderMarkdown(
-        t('about.a11y.body', {
-          headlessUiLink: 'https://headlessui.dev/vue/menu#keyboard-interaction'
-        })
-      )
-    )
-
-    return { t, body }
-  }
-}
+  )
+)
 </script>
+
+<template>
+  <Content>
+    <ContentTitle>{{ t('about.a11y.title') }}</ContentTitle>
+    <ContentBody v-html="body" />
+    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
+  </Content>
+</template>
diff --git a/src/views/about/Index.vue b/src/views/about/Index.vue
index 6d69dc8a..10dfe458 100644
--- a/src/views/about/Index.vue
+++ b/src/views/about/Index.vue
@@ -1,47 +1,38 @@
-<template>
-  <div>
-    <PageHeader />
-    <router-view v-slot="{ Component }">
-      <transition
-        mode="out-in"
-        enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100 "
-        leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <component :is="Component" />
-      </transition>
-    </router-view>
-  </div>
-</template>
-
-<script>
+<script setup>
 import { nextTick, onMounted, watch } from 'vue'
 
 import { useAuthStore } from '@/stores/auth'
 
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
 import PageHeader from '@/components/PageHeader.vue'
 
-export default {
-  components: { PageHeader },
-
-  setup () {
-    const authStore = useAuthStore()
+const authStore = useAuthStore()
 
-    watch(() => authStore.started, async () => await handleHash())
-    onMounted(async () => await handleHash())
+watch(
+  () => authStore.started,
+  async () => await handleHash()
+)
+onMounted(async () => await handleHash())
 
-    async function handleHash () {
-      if (window.location.hash && authStore.started) {
-        await nextTick()
-        await nextTick()
+async function handleHash() {
+  if (window.location.hash && authStore.started) {
+    await nextTick()
+    await nextTick()
 
-        document.querySelector(window.location.hash)
-          ?.scrollIntoView({ behavior: 'smooth' })
-      }
-    }
+    document
+      .querySelector(window.location.hash)
+      ?.scrollIntoView({ behavior: 'smooth' })
   }
 }
 </script>
+
+<template>
+  <div>
+    <PageHeader />
+    <router-view v-slot="{ Component }">
+      <FadeTransition>
+        <component :is="Component" />
+      </FadeTransition>
+    </router-view>
+  </div>
+</template>
diff --git a/src/views/about/Instructions.vue b/src/views/about/Instructions.vue
index 720c6f9b..0315d724 100644
--- a/src/views/about/Instructions.vue
+++ b/src/views/about/Instructions.vue
@@ -1,22 +1,14 @@
-<template>
-  <Content>
-    <ContentTitle>{{ t('about.instructions.title') }}</ContentTitle>
-    <ContentBody v-html="body" />
-    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
-  </Content>
-</template>
-
-<script>
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import useMarkdown from '@/composables/useMarkdown'
+
 import Content from '@/components/Content.vue'
 import ContentTitle from '@/components/ContentTitle.vue'
 import ContentBody from '@/components/ContentBody.vue'
 import ContentFooter from '@/components/ContentFooter.vue'
 
-import dedent from 'dedent'
-
 import step1 from '@/assets/about/new-book-step-01.png'
 import step2 from '@/assets/about/new-book-step-02.png'
 import step3 from '@/assets/about/new-book-step-03.png'
@@ -25,41 +17,34 @@ import step5 from '@/assets/about/new-book-step-05.png'
 import step6 from '@/assets/about/new-book-step-06.png'
 import step7 from '@/assets/about/new-book-step-07.png'
 
-import useMarkdown from '@/composables/useMarkdown'
-
-export default {
-  components: {
-    Content,
-    ContentBody,
-    ContentFooter,
-    ContentTitle
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { renderMarkdown } = useMarkdown({
-      mdOptions: { typographer: true }
+const { t } = useI18n({ useScope: 'global' })
+
+const { renderMarkdown } = useMarkdown({
+  mdOptions: { typographer: true }
+})
+
+const body = ref(
+  renderMarkdown(
+    t('about.instructions.body', {
+      googleDriveLink: 'https://drive.google.com/',
+      templateSheetLink: '#',
+      iso4217link: 'https://en.wikipedia.org/wiki/ISO_4217',
+      figure1: step1,
+      figure2: step2,
+      figure3: step3,
+      figure4: step4,
+      figure5: step5,
+      figure6: step6,
+      figure7: step7
     })
-
-    const body = ref(
-      renderMarkdown(
-        t('about.instructions.body', {
-          googleDriveLink: 'https://drive.google.com/',
-          templateSheetLink: '#',
-          iso4217link: 'https://en.wikipedia.org/wiki/ISO_4217',
-          figure1: step1,
-          figure2: step2,
-          figure3: step3,
-          figure4: step4,
-          figure5: step5,
-          figure6: step6,
-          figure7: step7
-        })
-      )
-    )
-
-    return { t, body }
-  }
-}
+  )
+)
 </script>
+
+<template>
+  <Content>
+    <ContentTitle>{{ t('about.instructions.title') }}</ContentTitle>
+    <ContentBody v-html="body" />
+    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
+  </Content>
+</template>
diff --git a/src/views/about/PrivacyPolicy.vue b/src/views/about/PrivacyPolicy.vue
index 985b4e11..ed5cb238 100644
--- a/src/views/about/PrivacyPolicy.vue
+++ b/src/views/about/PrivacyPolicy.vue
@@ -1,50 +1,40 @@
-<template>
-  <Content>
-    <ContentTitle>{{ t('about.privacyPolicy.title') }}</ContentTitle>
-    <ContentBody v-html="body" />
-
-    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
-  </Content>
-</template>
-
-<script>
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import useMarkdown from '@/composables/useMarkdown'
+
 import Content from '@/components/Content.vue'
 import ContentTitle from '@/components/ContentTitle.vue'
 import ContentBody from '@/components/ContentBody.vue'
 import ContentFooter from '@/components/ContentFooter.vue'
 
-import useMarkdown from '@/composables/useMarkdown'
-
-export default {
-  components: {
-    Content,
-    ContentBody,
-    ContentFooter,
-    ContentTitle
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-
-    const { renderMarkdown } = useMarkdown({
-      mdOptions: { typographer: true }
+const { t } = useI18n({ useScope: 'global' })
+
+const { renderMarkdown } = useMarkdown({
+  mdOptions: { typographer: true }
+})
+
+const body = ref(
+  renderMarkdown(
+    t('about.privacyPolicy.body', {
+      googleHelpLink:
+        'https://support.google.com/accounts/answer/3466521?hl=pt-BR#remove-access',
+      demoBuildLink: 'https://toshokan-app.netlify.com',
+      googleLgpdLink:
+        'https://support.google.com/authorizedbuyers/answer/9928204?hl=pt-BR',
+      lgpdLawLink:
+        'http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm'
     })
+  )
+)
+</script>
 
-    const body = ref(
-      renderMarkdown(
-        t('about.privacyPolicy.body', {
-          googleHelpLink: 'https://support.google.com/accounts/answer/3466521?hl=pt-BR#remove-access',
-          demoBuildLink: 'https://toshokan-app.netlify.com',
-          googleLgpdLink: 'https://support.google.com/authorizedbuyers/answer/9928204?hl=pt-BR',
-          lgpdLawLink: 'http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm'
-        })
-      )
-    )
+<template>
+  <Content>
+    <ContentTitle>{{ t('about.privacyPolicy.title') }}</ContentTitle>
+    <ContentBody v-html="body" />
 
-    return { t, body }
-  }
-}
-</script>
+    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
+  </Content>
+</template>
diff --git a/src/views/about/TermsOfUse.vue b/src/views/about/TermsOfUse.vue
index 8d43ec68..ceac0ff5 100644
--- a/src/views/about/TermsOfUse.vue
+++ b/src/views/about/TermsOfUse.vue
@@ -1,48 +1,35 @@
-<template>
-  <Content>
-    <ContentTitle>{{ t('about.termsOfUse.title') }}</ContentTitle>
-    <ContentBody v-html="body" />
-    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
-  </Content>
-</template>
-
-<script>
+<script setup>
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import useMarkdown from '@/composables/useMarkdown'
+
 import Content from '@/components/Content.vue'
 import ContentTitle from '@/components/ContentTitle.vue'
 import ContentBody from '@/components/ContentBody.vue'
 import ContentFooter from '@/components/ContentFooter.vue'
 
-import useMarkdown from '@/composables/useMarkdown'
-
-export default {
-  components: {
-    Content,
-    ContentBody,
-    ContentFooter,
-    ContentTitle
-  },
+const { t } = useI18n({ useScope: 'global' })
 
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
+const { renderMarkdown } = useMarkdown({
+  mdOptions: { typographer: true }
+})
 
-    const { renderMarkdown } = useMarkdown({
-      mdOptions: { typographer: true }
+const body = ref(
+  renderMarkdown(
+    t('about.termsOfUse.body', {
+      googleSignInLink: 'https://developers.google.com/identity/sign-in/web',
+      googleTermsLink: 'https://policies.google.com/terms?hl=pt-BR',
+      googlePrivacyPolicyLink: 'https://policies.google.com/privacy?hl=pt-BR'
     })
-
-    const body = ref(
-      renderMarkdown(
-        t('about.termsOfUse.body', {
-          googleSignInLink: 'https://developers.google.com/identity/sign-in/web',
-          googleTermsLink: 'https://policies.google.com/terms?hl=pt-BR',
-          googlePrivacyPolicyLink: 'https://policies.google.com/privacy?hl=pt-BR'
-        })
-      )
-    )
-
-    return { t, body }
-  }
-}
+  )
+)
 </script>
+
+<template>
+  <Content>
+    <ContentTitle>{{ t('about.termsOfUse.title') }}</ContentTitle>
+    <ContentBody v-html="body" />
+    <ContentFooter date="2021-07-08T22:30:00.000-03:00" />
+  </Content>
+</template>
diff --git a/src/views/dashboard/Home.vue b/src/views/dashboard/Home.vue
index 5186d6f9..de2793a1 100644
--- a/src/views/dashboard/Home.vue
+++ b/src/views/dashboard/Home.vue
@@ -1,17 +1,103 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useIsFetching, useQueryClient } from 'vue-query'
+
+import { useAuthStore } from '@/stores/auth'
+import { useSheetStore } from '@/stores/sheet'
+import useStatisticsQuery from '@/queries/useStatisticsQuery'
+
+import {
+  BookOpenIcon,
+  BookmarkIcon,
+  CurrencyDollarIcon,
+  EmojiHappyIcon,
+  ExclamationCircleIcon
+} from '@heroicons/vue/outline'
+
+import { CollectionIcon, PlusIcon, RefreshIcon } from '@heroicons/vue/solid'
+
+import Avatar from '@/components/Avatar.vue'
+import BookCarousel from '@/components/book/BookCarousel.vue'
+import BookCreateDialog from '@/components/dialogs/BookCreateDialog.vue'
+import GroupGrid from '@/components/GroupGrid.vue'
+import SheetChooserDialog from '@/components/dialogs/SheetChooserDialog.vue'
+import StatCard from '@/components/StatCard.vue'
+
+const authStore = useAuthStore()
+const sheetStore = useSheetStore()
+const { n, t } = useI18n({ useScope: 'global' })
+
+const sheetIsEmpty = computed(() => sheetStore.isEmpty)
+
+const ownerDisplayName = computed(() => sheetStore.ownerDisplayName)
+const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
+const profileName = computed(() => authStore.profileName)
+const loading = computed(() => sheetStore.loading)
+const shared = computed(() => sheetStore.shared)
+
+const {
+  data: stats,
+  isLoading: statsLoading,
+  isSuccess: statsSuccess
+} = useStatisticsQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+const isDev = ref(import.meta.env.DEV)
+const queryClient = useQueryClient()
+const isFetching = useIsFetching()
+
+async function reload() {
+  queryClient.resetQueries()
+  queryClient.refetchQueries()
+}
+
+const createDialogOpen = ref(false)
+
+function openCreateDialog() {
+  createDialogOpen.value = true
+}
+
+function closeCreateDialog() {
+  createDialogOpen.value = false
+}
+
+const canChange = computed(() => sheetStore.canChange)
+const canEdit = computed(() => sheetStore.canEdit)
+
+const sheetChooserOpen = ref(false)
+
+function openSheetChooser() {
+  sheetChooserOpen.value = true
+}
+
+function closeSheetChooser() {
+  sheetChooserOpen.value = false
+}
+</script>
+
 <template>
   <div class="flex flex-col">
     <header class="bg-white shadow dark:bg-gray-800">
-      <div class="max-w-7xl mx-auto md:flex md:items-center md:justify-between py-4 px-4 sm:px-6 lg:px-8">
+      <div
+        class="max-w-7xl mx-auto md:flex md:items-center md:justify-between py-4 px-4 sm:px-6 lg:px-8"
+      >
         <div class="flex-1 flex items-center space-x-4">
           <Avatar :picture-url="ownerPictureUrl" :shared="shared" />
           <div>
-            <h1 class="text-xl font-semibold font-display text-gray-900 dark:text-gray-100">
+            <h1
+              class="text-xl font-semibold font-display text-gray-900 dark:text-gray-100"
+            >
               {{ t('dashboard.home.hello', { name: profileName }) }}
             </h1>
-            <p v-if="isDev || shared" class="text-sm text-gray-600 dark:text-gray-300">
+            <p
+              v-if="isDev || shared"
+              class="text-sm text-gray-600 dark:text-gray-300"
+            >
               {{
-                shared ?
-                  t('dashboard.sheetChooser.viewing', [ownerDisplayName])
+                shared
+                  ? t('dashboard.sheetChooser.viewing', [ownerDisplayName])
                   : t('footer.dev')
               }}
             </p>
@@ -25,7 +111,7 @@
           >
             <span
               aria-hidden="true"
-              :class="(loading || isFetching) ? 'motion-safe:animate-spin' : ''"
+              :class="loading || isFetching ? 'motion-safe:animate-spin' : ''"
               class="origin-center w-5 h-5 -ml-1 mr-2"
             >
               <RefreshIcon class="-scale-x-100 !mx-0" />
@@ -65,12 +151,18 @@
           :aria-labelledby="loading ? '' : 'overview-title'"
         >
           <div v-if="loading" class="skeleton h-6 w-40 mb-3"></div>
-          <h2 v-else id="overview-title" class="font-medium font-display text-lg mb-2 dark:text-gray-200">
+          <h2
+            v-else
+            id="overview-title"
+            class="font-medium font-display text-lg mb-2 dark:text-gray-200"
+          >
             {{ t('dashboard.home.overview.title') }}
           </h2>
 
           <!-- Stats -->
-          <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-5 lg:grid-cols-4 rounded-md sm:rounded-none overflow-hidden sm:overflow-visible shadow sm:shadow-none divide-y sm:divide-y-0 divide-gray-200 dark:divide-gray-700">
+          <div
+            class="grid grid-cols-1 sm:grid-cols-2 sm:gap-5 lg:grid-cols-4 rounded-md sm:rounded-none overflow-hidden sm:overflow-visible shadow sm:shadow-none divide-y sm:divide-y-0 divide-gray-200 dark:divide-gray-700"
+          >
             <StatCard
               :title="t('dashboard.home.overview.stats.count')"
               :value="n(stats?.count || 0.0, 'integer')"
@@ -93,7 +185,11 @@
 
             <StatCard
               :title="t('dashboard.home.overview.stats.totalExpense')"
-              :value="n(stats?.money?.totalSpentPaid || 0.0, 'currency', { currency: stats?.money?.currency || 'USD' })"
+              :value="
+                n(stats?.money?.totalSpentPaid || 0.0, 'currency', {
+                  currency: stats?.money?.currency || 'USD'
+                })
+              "
               :loading="!statsSuccess"
               :always-hidden="shared"
               sensitive
@@ -105,7 +201,11 @@
 
             <StatCard
               :title="t('dashboard.home.overview.stats.totalSavings')"
-              :value="n(stats?.money?.saved || 0.0, 'currency', { currency: stats?.money?.currency || 'USD' })"
+              :value="
+                n(stats?.money?.saved || 0.0, 'currency', {
+                  currency: stats?.money?.currency || 'USD'
+                })
+              "
               :loading="!statsSuccess"
               :always-hidden="shared"
               sensitive
@@ -122,7 +222,10 @@
           :title="t('dashboard.home.nextReads')"
           collection="next-reads"
           :button-text="t('dashboard.search.history')"
-          :button-link="{ name: 'DashboardLibrary', query: { sortProperty: 'readAt' } }"
+          :button-link="{
+            name: 'DashboardLibrary',
+            query: { sortProperty: 'readAt' }
+          }"
         />
 
         <!-- Last added books -->
@@ -130,7 +233,10 @@
           :title="t('dashboard.home.lastAdded')"
           collection="last-added"
           :button-text="t('dashboard.home.viewAll')"
-          :button-link="{ name: 'DashboardLibrary', query: { sortProperty: 'createdAt' } }"
+          :button-link="{
+            name: 'DashboardLibrary',
+            query: { sortProperty: 'createdAt' }
+          }"
         />
 
         <!-- Latest readings -->
@@ -138,7 +244,10 @@
           :title="t('dashboard.home.latestReadings')"
           collection="latest-readings"
           :button-text="t('dashboard.search.history')"
-          :button-link="{ name: 'DashboardLibrary', query: { sortProperty: 'readAt' } }"
+          :button-link="{
+            name: 'DashboardLibrary',
+            query: { sortProperty: 'readAt' }
+          }"
         />
 
         <!-- Groups -->
@@ -151,7 +260,9 @@
           class="w-full max-w-lg mx-auto h-full flex items-center justify-center flex-col px-4"
         >
           <span aria-hidden="true">
-            <ExclamationCircleIcon class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600" />
+            <ExclamationCircleIcon
+              class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600"
+            />
           </span>
           <h2
             id="empty-sheet-title"
@@ -176,10 +287,7 @@
       </div>
     </div>
 
-    <BookCreateDialog
-      :is-open="createDialogOpen"
-      @close="closeCreateDialog"
-    />
+    <BookCreateDialog :is-open="createDialogOpen" @close="closeCreateDialog" />
 
     <SheetChooserDialog
       :is-open="sheetChooserOpen"
@@ -187,130 +295,3 @@
     />
   </div>
 </template>
-
-<script>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useIsFetching, useQueryClient } from 'vue-query'
-
-import { useAuthStore } from '@/stores/auth'
-import { useSheetStore } from '@/stores/sheet'
-import useStatisticsQuery from '@/queries/useStatisticsQuery'
-
-import {
-  BookOpenIcon,
-  BookmarkIcon,
-  CurrencyDollarIcon,
-  EmojiHappyIcon,
-  ExclamationCircleIcon
-} from '@heroicons/vue/outline'
-
-import { CollectionIcon, PlusIcon, RefreshIcon } from '@heroicons/vue/solid'
-
-import Avatar from '@/components/Avatar.vue'
-import BookCarousel from '@/components/book/BookCarousel.vue'
-import BookCreateDialog from '@/components/dialogs/BookCreateDialog.vue'
-import GroupGrid from '@/components/GroupGrid.vue'
-import SheetChooserDialog from '@/components/dialogs/SheetChooserDialog.vue'
-import StatCard from '@/components/StatCard.vue'
-
-export default {
-  name: 'DashboardHome',
-
-  components: {
-    Avatar,
-    BookCarousel,
-    BookCreateDialog,
-    GroupGrid,
-    SheetChooserDialog,
-    StatCard,
-    BookOpenIcon,
-    BookmarkIcon,
-    CollectionIcon,
-    CurrencyDollarIcon,
-    EmojiHappyIcon,
-    ExclamationCircleIcon,
-    PlusIcon,
-    RefreshIcon
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const sheetStore = useSheetStore()
-    const { n, t } = useI18n({ useScope: 'global' })
-
-    const sheetIsEmpty = computed(() => sheetStore.isEmpty)
-
-    const ownerDisplayName = computed(() => sheetStore.ownerDisplayName)
-    const ownerPictureUrl = computed(() => sheetStore.ownerPictureUrl)
-    const profileName = computed(() => authStore.profileName)
-    const loading = computed(() => sheetStore.loading)
-    const shared = computed(() => sheetStore.shared)
-
-    const {
-      data: stats,
-      isLoading: statsLoading,
-      isSuccess: statsSuccess
-    } = useStatisticsQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
-
-    const isDev = ref(import.meta.env.DEV)
-    const queryClient = useQueryClient()
-    const isFetching = useIsFetching()
-
-    async function reload () {
-      queryClient.resetQueries()
-      queryClient.refetchQueries()
-    }
-
-    const createDialogOpen = ref(false)
-
-    function openCreateDialog () {
-      createDialogOpen.value = true
-    }
-
-    function closeCreateDialog () {
-      createDialogOpen.value = false
-    }
-
-    const canChange = computed(() => sheetStore.canChange)
-    const canEdit = computed(() => sheetStore.canEdit)
-
-    const sheetChooserOpen = ref(false)
-
-    function openSheetChooser () {
-      sheetChooserOpen.value = true
-    }
-
-    function closeSheetChooser () {
-      sheetChooserOpen.value = false
-    }
-
-    return {
-      sheetIsEmpty,
-      loading,
-      isFetching,
-      ownerDisplayName,
-      ownerPictureUrl,
-      profileName,
-      stats,
-      statsLoading,
-      statsSuccess,
-      shared,
-      isDev,
-      reload,
-      createDialogOpen,
-      openCreateDialog,
-      closeCreateDialog,
-      canChange,
-      canEdit,
-      sheetChooserOpen,
-      openSheetChooser,
-      closeSheetChooser,
-      n,
-      t
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/Index.vue b/src/views/dashboard/Index.vue
index bb80c060..f6aeb0fa 100644
--- a/src/views/dashboard/Index.vue
+++ b/src/views/dashboard/Index.vue
@@ -1,52 +1,4 @@
-<template>
-  <div class="bg-gray-100 min-h-screen dark:bg-gray-900 flex flex-col sm:pl-16 md:pl-0">
-    <a href="#main-menu-desktop" class="jump-to hidden md:block">
-      {{ t('a11y.jumpToNavigation') }}
-    </a>
-
-    <AppNavbar :transparent="navbarTransparent" />
-
-    <MobileNavbar />
-
-    <main class="flex-1 flex pt-16" role="main" id="main-content">
-      <router-view v-slot="{ Component }">
-        <transition
-          mode="out-in"
-          enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100 "
-          leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-        >
-          <component :is="Component" class="w-full" />
-        </transition>
-      </router-view>
-    </main>
-
-    <DashboardFooter />
-
-    <SearchDialog
-      ref="searchDialog"
-      :is-open="searchDialogIsOpen"
-      @close="closeSearchDialog"
-    />
-
-    <SettingsDialog
-      :is-open="settingsDialogIsOpen"
-      @close="closeSettingsDialog"
-    />
-
-    <BetaWarning />
-
-    <VueQueryDevTools
-      v-if="showVueQueryDevTools"
-      position="bottom-right"
-    />
-  </div>
-</template>
-
-<script>
+<script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -60,148 +12,162 @@ import { useStore } from '@/stores/main'
 import AppNavbar from '@/components/AppNavbar.vue'
 import BetaWarning from '@/components/BetaWarning.vue'
 import DashboardFooter from '@/components/DashboardFooter.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
 import MobileNavbar from '@/components/MobileNavbar.vue'
 import SearchDialog from '@/components/dialogs/SearchDialog.vue'
 import SettingsDialog from '@/components/dialogs/SettingsDialog.vue'
 
-export default {
-  components: {
-    AppNavbar,
-    BetaWarning,
-    DashboardFooter,
-    MobileNavbar,
-    SearchDialog,
-    SettingsDialog,
-    VueQueryDevTools
-  },
-
-  setup () {
-    const authStore = useAuthStore()
-    const mainStore = useStore()
-    const sheetStore = useSheetStore()
-    const settingsStore = useSettingsStore()
-    const router = useRouter()
-
-    const signedIn = computed(() => authStore.signedIn)
-    const hasGrantedScopes = computed(() => authStore.hasGrantedScopes)
-
-    async function findSheetId () {
-      if (sheetStore.sheetId === null) {
-        try {
-          await sheetStore.findSheetId()
-        } catch (e) {
-          const error = !hasGrantedScopes.value
-            ? new Error(t('errors.missingScopes'))
-            : e
-
-          mainStore.updateCriticalError(error)
-          router.replace({ name: 'Error' })
-        }
-      }
+const authStore = useAuthStore()
+const mainStore = useStore()
+const sheetStore = useSheetStore()
+const settingsStore = useSettingsStore()
+const router = useRouter()
+
+const signedIn = computed(() => authStore.signedIn)
+const hasGrantedScopes = computed(() => authStore.hasGrantedScopes)
+
+async function findSheetId() {
+  if (sheetStore.sheetId === null) {
+    try {
+      await sheetStore.findSheetId()
+    } catch (e) {
+      const error = !hasGrantedScopes.value
+        ? new Error(t('errors.missingScopes'))
+        : e
+
+      mainStore.updateCriticalError(error)
+      router.replace({ name: 'Error' })
     }
+  }
+}
 
-    onMounted(findSheetId)
+onMounted(findSheetId)
 
-    watch(signedIn, newValue => {
-      if (!newValue) {
-        router.replace('/')
-      }
-    })
+watch(signedIn, (newValue) => {
+  if (!newValue) {
+    router.replace('/')
+  }
+})
 
-    const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: 'global' })
 
-    const showSearch = computed(() => !sheetStore.loading)
-    const searchDialog = ref(null)
-    const searchDialogIsOpen = ref(false)
+const showSearch = computed(() => !sheetStore.loading)
+const searchDialog = ref(null)
+const searchDialogIsOpen = ref(false)
 
-    const searchShortcutDisabled = ref(false)
+const searchShortcutDisabled = ref(false)
 
-    function showSearchDialog (query) {
-      if (!searchShortcutDisabled.value) {
-        searchDialogIsOpen.value = true
+function showSearchDialog(query) {
+  if (!searchShortcutDisabled.value) {
+    searchDialogIsOpen.value = true
 
-        if (typeof query === 'string') {
-          searchDialog.value?.search(query)
-        }
-      }
+    if (typeof query === 'string') {
+      searchDialog.value?.search(query)
     }
+  }
+}
 
-    function closeSearchDialog () {
-      searchDialogIsOpen.value = false
-    }
+function closeSearchDialog() {
+  searchDialogIsOpen.value = false
+}
 
-    function disableSearchShortcut () {
-      searchShortcutDisabled.value = true
-    }
+function disableSearchShortcut() {
+  searchShortcutDisabled.value = true
+}
 
-    function enableSearchShortcut () {
-      searchShortcutDisabled.value = false
-    }
+function enableSearchShortcut() {
+  searchShortcutDisabled.value = false
+}
 
-    provide('showSearchDialog', showSearchDialog)
-    provide('disableSearchShortcut', disableSearchShortcut)
-    provide('enableSearchShortcut', enableSearchShortcut)
+provide('showSearchDialog', showSearchDialog)
+provide('disableSearchShortcut', disableSearchShortcut)
+provide('enableSearchShortcut', enableSearchShortcut)
 
-    const navbarTransparent = ref(false)
+const navbarTransparent = ref(false)
 
-    function setNavbarTransparent (value) {
-      navbarTransparent.value = value
-    }
-
-    provide('setNavbarTransparent', setNavbarTransparent)
-
-    /**
-     * @param {KeyboardEvent} event
-     */
-    function handleKeyDown (event) {
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.key === 'k' &&
-        showSearch.value &&
-        !searchDialogIsOpen.value &&
-        !searchShortcutDisabled.value
-      ) {
-        event.stopPropagation()
-        event.preventDefault()
-        showSearchDialog()
-      }
-    }
+function setNavbarTransparent(value) {
+  navbarTransparent.value = value
+}
 
-    onMounted(() => {
-      document.addEventListener('keydown', handleKeyDown)
-    })
+provide('setNavbarTransparent', setNavbarTransparent)
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (
+    (event.ctrlKey || event.metaKey) &&
+    event.key === 'k' &&
+    showSearch.value &&
+    !searchDialogIsOpen.value &&
+    !searchShortcutDisabled.value
+  ) {
+    event.stopPropagation()
+    event.preventDefault()
+    showSearchDialog()
+  }
+}
 
-    onUnmounted(() => {
-      document.removeEventListener('keydown', handleKeyDown)
-    })
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown)
+})
 
-    const settingsDialogIsOpen = ref(false)
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+})
 
-    function showSettingsDialog (delay = 200) {
-      setTimeout(() => { settingsDialogIsOpen.value = true }, delay)
-    }
+const settingsDialogIsOpen = ref(false)
 
-    function closeSettingsDialog () {
-      settingsDialogIsOpen.value = false
-    }
+function showSettingsDialog(delay = 200) {
+  setTimeout(() => {
+    settingsDialogIsOpen.value = true
+  }, delay)
+}
 
-    provide('showSettingsDialog', showSettingsDialog)
-
-    const showVueQueryDevTools = computed(() => settingsStore.showVueQueryDevTools)
-
-    return {
-      findSheetId,
-      signedIn,
-      t,
-      searchDialog,
-      searchDialogIsOpen,
-      showSearchDialog,
-      closeSearchDialog,
-      navbarTransparent,
-      closeSettingsDialog,
-      settingsDialogIsOpen,
-      showVueQueryDevTools
-    }
-  }
+function closeSettingsDialog() {
+  settingsDialogIsOpen.value = false
 }
+
+provide('showSettingsDialog', showSettingsDialog)
+
+const showVueQueryDevTools = computed(() => settingsStore.showVueQueryDevTools)
 </script>
+
+<template>
+  <div
+    class="bg-gray-100 min-h-screen dark:bg-gray-900 flex flex-col sm:pl-16 md:pl-0"
+  >
+    <a href="#main-menu-desktop" class="jump-to hidden md:block">
+      {{ t('a11y.jumpToNavigation') }}
+    </a>
+
+    <AppNavbar :transparent="navbarTransparent" />
+
+    <MobileNavbar />
+
+    <main class="flex-1 flex pt-16" role="main" id="main-content">
+      <router-view v-slot="{ Component }">
+        <FadeTransition>
+          <component :is="Component" class="w-full" />
+        </FadeTransition>
+      </router-view>
+    </main>
+
+    <DashboardFooter />
+
+    <SearchDialog
+      ref="searchDialog"
+      :is-open="searchDialogIsOpen"
+      @close="closeSearchDialog"
+    />
+
+    <SettingsDialog
+      :is-open="settingsDialogIsOpen"
+      @close="closeSettingsDialog"
+    />
+
+    <BetaWarning />
+
+    <VueQueryDevTools v-if="showVueQueryDevTools" position="bottom-right" />
+  </div>
+</template>
diff --git a/src/views/dashboard/Stats.vue b/src/views/dashboard/Stats.vue
index 07554644..ab032bde 100644
--- a/src/views/dashboard/Stats.vue
+++ b/src/views/dashboard/Stats.vue
@@ -1,19 +1,71 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { useSheetStore } from '@/stores/sheet'
+import useStatisticsQuery from '@/queries/useStatisticsQuery'
+
+import {
+  ExclamationCircleIcon,
+  PresentationChartLineIcon
+} from '@heroicons/vue/outline'
+
+import BasicBarChart from '@/components/BasicBarChart.vue'
+import MonthlyBoughtsChart from '@/components/MonthlyBoughtsChart.vue'
+import MonthlyExpenseChart from '@/components/MonthlyExpenseChart.vue'
+import SimpleHeader from '@/components/SimpleHeader.vue'
+
+const sheetStore = useSheetStore()
+const router = useRouter()
+
+const {
+  data: stats,
+  isLoading,
+  isIdle
+} = useStatisticsQuery({
+  enabled: computed(() => sheetStore.sheetId !== null)
+})
+
+const loading = computed(() => isLoading.value || isIdle.value)
+
+const sheetIsEmpty = computed(() => sheetStore.isEmpty)
+const tooEarly = computed(() => stats.value?.monthly?.length === 1)
+
+const shared = computed(() => sheetStore.shared)
+
+function checkPermissions() {
+  if (shared.value) {
+    router.replace({ name: 'DashboardHome' })
+  }
+}
+
+onMounted(() => checkPermissions())
+
+watch(shared, () => checkPermissions())
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
 <template>
   <div class="flex flex-col">
-    <SimpleHeader
-      :title="t('dashboard.stats.title')"
-      :loading="loading"
-      class="mb-3 md:mb-0"
-    />
+    <SimpleHeader :title="t('dashboard.stats.title')" class="mb-3 md:mb-0" />
 
     <div class="flex-1">
-      <div v-if="!sheetIsEmpty && !tooEarly" class="h-full flex flex-col max-w-7xl w-full mx-auto md:py-6 md:px-6 lg:px-8 space-y-1 md:space-y-6">
-        <div class="flex overflow-x-scroll md:overflow-x-visible pb-2 md:pb-0 snap-x snap-mandatory md:grid md:grid-cols-2 gap-6">
+      <div
+        v-if="!sheetIsEmpty && !tooEarly"
+        class="h-full flex flex-col max-w-7xl w-full mx-auto md:py-6 md:px-6 lg:px-8 space-y-1 md:space-y-6"
+      >
+        <div
+          class="flex overflow-x-scroll md:overflow-x-visible pb-2 md:pb-0 snap-x snap-mandatory md:grid md:grid-cols-2 gap-6"
+        >
           <MonthlyExpenseChart class="w-full shrink-0 snap-start" />
           <MonthlyBoughtsChart class="w-full shrink-0 snap-start" />
         </div>
 
-        <div class="flex overflow-x-auto md:overflow-x-visible pb-2 md:pb-0 snap-x snap-mandatory md:grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          class="flex overflow-x-auto md:overflow-x-visible pb-2 md:pb-0 snap-x snap-mandatory md:grid md:grid-cols-2 lg:grid-cols-3 gap-6"
+        >
           <BasicBarChart
             class="w-full shrink-0 snap-start"
             :series="(stats?.publishers || []).slice(0, 10)"
@@ -45,7 +97,9 @@
         class="w-full max-w-lg mx-auto h-full flex items-center justify-center flex-col px-4"
       >
         <span aria-hidden="true">
-          <ExclamationCircleIcon class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600" />
+          <ExclamationCircleIcon
+            class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600"
+          />
         </span>
         <h2
           id="empty-sheet-title"
@@ -54,7 +108,7 @@
           {{ t('dashboard.stats.empty.title') }}
         </h2>
         <p class="text-center text-gray-600 dark:text-gray-400 mb-8">
-          {{ t('dashboard.stats.empty.description' )}}
+          {{ t('dashboard.stats.empty.description') }}
         </p>
       </section>
 
@@ -65,7 +119,9 @@
         class="w-full max-w-lg mx-auto h-full flex items-center justify-center flex-col px-4"
       >
         <span aria-hidden="true">
-          <PresentationChartLineIcon class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600" />
+          <PresentationChartLineIcon
+            class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600"
+          />
         </span>
         <h2
           id="too-early-title"
@@ -80,65 +136,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { computed, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import { useSheetStore } from '@/stores/sheet'
-import useStatisticsQuery from '@/queries/useStatisticsQuery'
-
-import {
-  ExclamationCircleIcon,
-  PresentationChartLineIcon
-} from '@heroicons/vue/outline'
-
-import BasicBarChart from '@/components/BasicBarChart.vue'
-import MonthlyBoughtsChart from '@/components/MonthlyBoughtsChart.vue'
-import MonthlyExpenseChart from '@/components/MonthlyExpenseChart.vue'
-import SimpleHeader from '@/components/SimpleHeader.vue'
-
-export default {
-  name: 'DashboardStats',
-
-  components: {
-    BasicBarChart,
-    MonthlyBoughtsChart,
-    MonthlyExpenseChart,
-    SimpleHeader,
-    ExclamationCircleIcon,
-    PresentationChartLineIcon
-  },
-
-  setup () {
-    const sheetStore = useSheetStore()
-    const router = useRouter()
-
-    const { data: stats, isLoading, isIdle } = useStatisticsQuery({
-      enabled: computed(() => sheetStore.sheetId !== null)
-    })
-
-    const loading = computed(() => isLoading.value || isIdle.value)
-
-    const sheetIsEmpty = computed(() => sheetStore.isEmpty)
-    const tooEarly = computed(() => stats.value?.monthly?.length === 1)
-
-    const shared = computed(() => sheetStore.shared)
-
-    function checkPermissions () {
-      if (shared.value) {
-        router.replace({ name: 'DashboardHome' })
-      }
-    }
-
-    onMounted(() => checkPermissions())
-
-    watch(shared, () => checkPermissions())
-
-    const { t } = useI18n({ useScope: 'global' })
-
-    return { loading, sheetIsEmpty, tooEarly, stats, t }
-  }
-}
-</script>
diff --git a/src/views/dashboard/library/Book.vue b/src/views/dashboard/library/Book.vue
index 2c6c197e..f8534a99 100644
--- a/src/views/dashboard/library/Book.vue
+++ b/src/views/dashboard/library/Book.vue
@@ -1,20 +1,154 @@
+<script setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import useDeleteBookMutation from '@/mutations/useDeleteBookMutation'
+import useEditBookMutation from '@/mutations/useEditBookMutation'
+import Book, { STATUS_READ, STATUS_UNREAD } from '@/model/Book'
+import { useSheetStore } from '@/stores/sheet'
+import useBookQuery from '@/queries/useBookQuery'
+import useBookCollectionQuery from '@/queries/useBookCollectionQuery'
+
+import BookBreadcrumb from '@/components/book/BookBreadcrumb.vue'
+import BookCover from '@/components/book/BookCover.vue'
+import BookDeleteDialog from '@/components/dialogs/BookDeleteDialog.vue'
+import BookEditDialog from '@/components/dialogs/BookEditDialog.vue'
+import BookInformation from '@/components/book/BookInformation.vue'
+import BookTabs from '@/components/book/BookTabs.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+const router = useRouter()
+const route = useRoute()
+const sheetStore = useSheetStore()
+
+const bookId = computed(() => route.params.bookId)
+const loading = computed(() => sheetStore.loading)
+
+const enabled = computed(() => {
+  return !loading.value && !!bookId.value
+})
+
+const { isLoading, data: book } = useBookQuery(bookId, { enabled })
+
+const { data: collection } = useBookCollectionQuery(book, {
+  enabled: computed(() => {
+    return (
+      enabled.value &&
+      book.value?.titleParts !== undefined &&
+      book.value.titleParts.number !== null
+    )
+  })
+})
+
+const redirectToHome = () => {
+  router.replace({ name: 'DashboardLibrary' })
+}
+
+watch(book, (newBook) => {
+  if (newBook === null) {
+    redirectToHome()
+    return
+  }
+
+  if (newBook !== undefined) {
+    document.title = newBook.title + ' | ' + t('app.name')
+  }
+})
+
+const showBookInfo = computed(() => {
+  return !loading.value && !isLoading.value && book.value
+})
+
+const { mutate: updateBook, isLoading: editing } = useEditBookMutation()
+
+const editDialogOpen = ref(false)
+const bookToEdit = ref(null)
+
+function openEditDialog() {
+  bookToEdit.value = cloneDeep(book.value)
+  editDialogOpen.value = true
+}
+
+function closeEditDialog() {
+  editDialogOpen.value = false
+}
+
+function handleEdit(editedBook) {
+  updateBook(editedBook)
+}
+
+function toDateInputValue(date) {
+  const local = new Date(date)
+  local.setMinutes(date.getMinutes() - date.getTimezoneOffset())
+
+  return local
+}
+
+function toggleStatus() {
+  if (book.value.isFuture) {
+    return
+  }
+
+  /** @type {Book} */
+  const updatedBook = cloneDeep(book.value)
+  updatedBook.status = updatedBook.isRead ? STATUS_UNREAD : STATUS_READ
+  updatedBook.readAt = updatedBook.isRead ? toDateInputValue(new Date()) : null
+
+  updateBook(updatedBook)
+}
+
+function toggleFavorite() {
+  /** @type {Book} */
+  const updatedBook = cloneDeep(book.value)
+  updatedBook.favorite = !updatedBook.favorite
+
+  updateBook(updatedBook)
+}
+
+const deleteModalOpen = ref(false)
+const { mutate: deleteBook, isLoading: deleting } = useDeleteBookMutation()
+
+function handleDelete() {
+  deleteBook(book.value)
+}
+
+function openDeleteModal() {
+  setTimeout(() => {
+    deleteModalOpen.value = true
+  })
+}
+
+const writing = computed(() => editing.value || deleting.value)
+
+const setNavbarTransparent = inject('setNavbarTransparent')
+
+onMounted(() => setNavbarTransparent(true))
+onUnmounted(() => setNavbarTransparent(false))
+</script>
+
 <template>
-  <div class="bg-white dark:bg-gray-900 motion-safe:transition-colors duration-300 ease-in-out">
-    <div class="border-b dark:border-b-0 border-gray-300 hidden md:block bg-white dark:bg-transparent">
+  <div
+    class="bg-white dark:bg-gray-900 motion-safe:transition-colors duration-300 ease-in-out"
+  >
+    <div
+      class="border-b dark:border-b-0 border-gray-300 hidden md:block bg-white dark:bg-transparent"
+    >
       <div class="max-w-7xl mx-auto md:px-6 lg:px-8 dark:mt-6">
         <!-- Breadcrumb -->
         <div class="py-2.5 dark:py-0">
-          <BookBreadcrumb
-            :loading="!showBookInfo"
-            :book="book"
-          />
+          <BookBreadcrumb :loading="!showBookInfo" :book="book" />
         </div>
       </div>
     </div>
     <div class="max-w-7xl mx-auto md:px-6 lg:px-8 md:py-10 md:dark:py-6">
       <!-- Main section -->
       <div class="md:space-y-8 bg-white dark:bg-transparent">
-        <section class="bg-gray-800 dark:bg-gray-700 md:bg-transparent md:dark:bg-transparent md:grid md:grid-cols-2 lg:grid-cols-7 md:gap-8 -mt-16 md:mt-0">
+        <section
+          class="bg-gray-800 dark:bg-gray-700 md:bg-transparent md:dark:bg-transparent md:grid md:grid-cols-2 lg:grid-cols-7 md:gap-8 -mt-16 md:mt-0"
+        >
           <!-- Book cover -->
           <div class="lg:col-span-3">
             <BookCover
@@ -25,7 +159,9 @@
           </div>
 
           <!-- Book information -->
-          <div class="bg-white dark:bg-gray-800 md:dark:bg-transparent relative -mt-5 md:mt-0 p-6 md:p-0 shadow-inner md:shadow-none rounded-t-3xl md:rounded-none lg:col-span-4">
+          <div
+            class="bg-white dark:bg-gray-800 md:dark:bg-transparent relative -mt-5 md:mt-0 p-6 md:p-0 shadow-inner md:shadow-none rounded-t-3xl md:rounded-none lg:col-span-4"
+          >
             <BookInformation
               :loading="!showBookInfo"
               :book="book"
@@ -62,169 +198,3 @@
     />
   </div>
 </template>
-
-<script>
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import useDeleteBookMutation from '@/mutations/useDeleteBookMutation'
-import useEditBookMutation from '@/mutations/useEditBookMutation'
-import Book, { STATUS_READ, STATUS_UNREAD } from '@/model/Book'
-import { useSheetStore } from '@/stores/sheet'
-import useBookQuery from '@/queries/useBookQuery'
-import useBookCollectionQuery from '@/queries/useBookCollectionQuery'
-
-import BookBreadcrumb from '@/components/book/BookBreadcrumb.vue'
-import BookCover from '@/components/book/BookCover.vue'
-import BookDeleteDialog from '@/components/dialogs/BookDeleteDialog.vue'
-import BookEditDialog from '@/components/dialogs/BookEditDialog.vue'
-import BookInformation from '@/components/book/BookInformation.vue'
-import BookTabs from '@/components/book/BookTabs.vue'
-
-export default {
-  components: {
-    BookBreadcrumb,
-    BookCover,
-    BookDeleteDialog,
-    BookEditDialog,
-    BookInformation,
-    BookTabs
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-    const router = useRouter()
-    const route = useRoute()
-    const sheetStore = useSheetStore()
-
-    const bookId = computed(() => route.params.bookId)
-    const loading = computed(() => sheetStore.loading)
-
-    const enabled = computed(() => {
-      return !loading.value && !!bookId.value
-    })
-
-    const { isLoading, data: book } = useBookQuery(bookId, { enabled })
-
-    const { data: collection } = useBookCollectionQuery(book, {
-      enabled: computed(() => {
-        return enabled.value &&
-          book.value?.titleParts !== undefined &&
-          book.value.titleParts.number !== null
-      })
-    })
-
-    const redirectToHome = () => {
-      router.replace({ name: 'DashboardLibrary' })
-    }
-
-    watch(book, newBook => {
-      if (newBook === null) {
-        redirectToHome()
-        return
-      }
-
-      if (newBook !== undefined) {
-        document.title = newBook.title + ' | ' + t('app.name')
-      }
-    })
-
-    const showBookInfo = computed(() => {
-      return !loading.value && !isLoading.value && book.value
-    })
-
-    const { mutate: updateBook, isLoading: editing } = useEditBookMutation()
-
-    const editDialogOpen = ref(false)
-    const bookToEdit = ref(null)
-
-    function openEditDialog () {
-      bookToEdit.value = cloneDeep(book.value)
-      editDialogOpen.value = true
-    }
-
-    function closeEditDialog () {
-      editDialogOpen.value = false
-    }
-
-    function handleEdit (editedBook) {
-      updateBook(editedBook)
-    }
-
-    function toDateInputValue (date) {
-      const local = new Date(date)
-      local.setMinutes(date.getMinutes() - date.getTimezoneOffset())
-
-      return local
-    }
-
-    function toggleStatus () {
-      if (book.value.isFuture) {
-        return
-      }
-
-      /** @type {Book} */
-      const updatedBook = cloneDeep(book.value)
-      updatedBook.status = updatedBook.isRead
-        ? STATUS_UNREAD
-        : STATUS_READ
-      updatedBook.readAt = updatedBook.isRead
-        ? toDateInputValue(new Date())
-        : null
-
-      updateBook(updatedBook)
-    }
-
-    function toggleFavorite () {
-      /** @type {Book} */
-      const updatedBook = cloneDeep(book.value)
-      updatedBook.favorite = !updatedBook.favorite
-
-      updateBook(updatedBook)
-    }
-
-    const deleteModalOpen = ref(false)
-    const { mutate: deleteBook, isLoading: deleting } = useDeleteBookMutation()
-
-    function handleDelete () {
-      deleteBook(book.value)
-    }
-
-    function openDeleteModal () {
-      setTimeout(() => {
-        deleteModalOpen.value = true
-      })
-    }
-
-    const writing = computed(() => editing.value || deleting.value)
-
-    const setNavbarTransparent = inject('setNavbarTransparent')
-
-    onMounted(() => setNavbarTransparent(true))
-    onUnmounted(() => setNavbarTransparent(false))
-
-    return {
-      t,
-      bookId,
-      loading,
-      book,
-      collection,
-      showBookInfo,
-      writing,
-      bookToEdit,
-      handleEdit,
-      editDialogOpen,
-      openEditDialog,
-      closeEditDialog,
-      toggleStatus,
-      toggleFavorite,
-      deleteModalOpen,
-      openDeleteModal,
-      handleDelete
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/library/Explorer.vue b/src/views/dashboard/library/Explorer.vue
index 0a86dca0..e060d674 100644
--- a/src/views/dashboard/library/Explorer.vue
+++ b/src/views/dashboard/library/Explorer.vue
@@ -1,3 +1,378 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import useBulkDeleteBookMutation from '@/mutations/useBulkDeleteBookMutation'
+import useBulkEditBookMutation from '@/mutations/useBulkEditBookMutation'
+import { useCollectionStore } from '@/stores/collection'
+import { useSettingsStore } from '@/stores/settings'
+import { useSheetStore } from '@/stores/sheet'
+import { STATUS_READ } from '@/model/Book'
+import useBooksQuery from '@/queries/useBooksQuery'
+import useGroupsQuery from '@/queries/useGroupsQuery'
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  FilterIcon,
+  PlusIcon
+} from '@heroicons/vue/solid'
+import {
+  DocumentSearchIcon,
+  ExclamationCircleIcon,
+  TableIcon,
+  ViewGridAddIcon,
+  ViewGridIcon
+} from '@heroicons/vue/outline'
+
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+
+import BookCreateDialog from '@/components/dialogs/BookCreateDialog.vue'
+import BookDeleteDialog from '@/components/dialogs/BookDeleteDialog.vue'
+import BookGrid from '@/components/book/BookGrid.vue'
+import BookTable from '@/components/book/BookTable.vue'
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+import LibraryFiltersDialog from '@/components/dialogs/LibraryFiltersDialog.vue'
+import LibraryHeader from '@/components/LibraryHeader.vue'
+import Paginator from '@/components/Paginator.vue'
+
+const { t } = useI18n({ useScope: 'global' })
+const collectionStore = useCollectionStore()
+const settingsStore = useSettingsStore()
+const sheetStore = useSheetStore()
+
+const filterOpen = ref(false)
+
+const sheetIsEmpty = computed(() => sheetStore.isEmpty)
+
+const currentPage = computed(() => collectionStore.currentPage)
+const paginationInfo = computed(() => collectionStore.paginationInfo)
+const sortProperty = computed(() => collectionStore.sortBy)
+const sortDirection = computed(() => collectionStore.sortDirection)
+
+const viewMode = computed({
+  get() {
+    if (settingsStore.viewMode === 'table') {
+      return 'table'
+    }
+
+    return settingsStore.viewMode + ',' + settingsStore.gridMode
+  },
+  set(value) {
+    const [viewMode, gridMode] = value.split(',')
+
+    settingsStore.updateViewMode(viewMode)
+
+    if (gridMode) {
+      settingsStore.updateGridMode(gridMode)
+    }
+
+    selection.value = []
+  }
+})
+
+const sortPropertyNames = computed(() => ({
+  title: t('book.properties.title'),
+  publisher: t('book.properties.publisher'),
+  status: t('book.properties.status'),
+  readAt: t('book.properties.readAt'),
+  'paidPrice.value': t('book.properties.paidPrice'),
+  'labelPrice.value': t('book.properties.labelPrice'),
+  createdAt: t('book.properties.createdAt'),
+  updatedAt: t('book.properties.updatedAt')
+}))
+
+const sortPropertyName = computed(() => {
+  return sortPropertyNames.value[sortProperty.value]
+})
+
+const route = useRoute()
+const sheetId = computed(() => sheetStore.sheetId)
+const sheetLoading = computed(() => sheetStore.loading)
+const sheetLoadedOnce = computed(() => sheetStore.loadedOnce)
+const groupsFilter = computed(() => collectionStore.filters.groups)
+
+const queriesEnabled = computed(() => {
+  return !sheetLoading.value && sheetId.value !== null
+})
+
+const {
+  data: groupsData,
+  isIdle: groupsIdle,
+  isLoading: groupsLoading
+} = useGroupsQuery({ enabled: queriesEnabled })
+
+const {
+  data: booksData,
+  isFetching: booksFetching,
+  isIdle: booksIdle,
+  isLoading: booksLoading,
+  isStale: booksStale
+} = useBooksQuery(
+  {
+    favorites: computed(() => collectionStore.favorites),
+    futureItems: computed(() => collectionStore.futureItems),
+    groups: groupsFilter,
+    page: currentPage,
+    sortBy: sortProperty,
+    sortDirection
+  },
+  { enabled: queriesEnabled }
+)
+
+const books = computed(() => booksData.value?.books || [])
+
+const loading = computed(() => {
+  return (
+    booksLoading.value ||
+    groupsLoading.value ||
+    groupsIdle.value ||
+    booksIdle.value
+  )
+})
+
+watch(groupsData, (newGroups) => {
+  if (!newGroups) {
+    return
+  }
+
+  // Remove the inexistent groups from selection.
+  const fixedGroups = collectionStore.filters.groups.filter((selGroup) =>
+    groupsData.value.includes(selGroup)
+  )
+
+  collectionStore.updateGroups(fixedGroups)
+})
+
+watch(
+  () => booksData.value?.totalResults,
+  (newTotals) => {
+    collectionStore.updateCurrentPage({
+      page: currentPage.value,
+      totalResults: newTotals
+    })
+  }
+)
+
+function updateGroupFromQuery() {
+  const newGroup = route.query.group
+
+  if (sheetLoading.value || loading.value) {
+    return false
+  }
+
+  if (!newGroup) {
+    // Remove inexistent groups from selection.
+    const fixedGroups = collectionStore.filters.groups.filter((selGroup) =>
+      groupsData.value.includes(selGroup)
+    )
+
+    collectionStore.updateGroups(fixedGroups)
+
+    return false
+  }
+
+  const groupExists = groupsData.value?.find((grp) => grp.name === newGroup)
+
+  if (groupExists) {
+    collectionStore.updateGroups([newGroup])
+
+    return true
+  }
+
+  return false
+}
+
+function updateSortPropertyFromQuery() {
+  const newSortProperty = route.query.sortProperty
+
+  if (sheetLoading.value || !newSortProperty) {
+    return false
+  }
+
+  if (!sortPropertyNames.value[newSortProperty]) {
+    return false
+  }
+
+  if (newSortProperty !== sortProperty.value) {
+    collectionStore.updateSort({
+      sortBy: newSortProperty,
+      sortDirection: 'desc'
+    })
+
+    return true
+  }
+
+  return false
+}
+
+function updateFromQuery() {
+  const groupChanged = updateGroupFromQuery()
+  const sortChanged = updateSortPropertyFromQuery()
+
+  if (groupChanged || sortChanged || books.value.length === 0) {
+    collectionStore.$patch({
+      currentPage: sortChanged ? 1 : currentPage.value
+    })
+  }
+}
+
+watch(sheetLoading, (newSheetLoading) => {
+  if (!newSheetLoading) {
+    updateFromQuery()
+  }
+})
+
+onMounted(() => {
+  if (sheetId.value) {
+    updateFromQuery()
+  }
+})
+
+const table = ref(null)
+const grid = ref(null)
+const currentView = computed(() => {
+  return viewMode.value === 'table' ? table.value : grid.value
+})
+
+const lastFocus = ref(null)
+
+watch(booksFetching, (value) => {
+  if (value) {
+    lastFocus.value = document.activeElement
+    lastFocus.value?.blur()
+  }
+})
+
+async function handleFocus() {
+  await nextTick()
+
+  const classList = lastFocus.value?.classList
+
+  if (classList?.contains('table-header-button')) {
+    table.value?.focusOnActiveHeader()
+  } else if (classList?.contains('pag-button')) {
+    currentView.value?.focus()
+  }
+}
+
+watch(collectionStore.$state, handleFocus)
+watch(booksLoading, async (newValue) => {
+  if (newValue) {
+    await handleFocus()
+  }
+})
+
+async function handlePage(page) {
+  window.scroll({
+    top: 0,
+    left: 0,
+    behavior: 'smooth'
+  })
+
+  const totalResults = collectionStore.paginationInfo.total_results
+  collectionStore.updateCurrentPage({ page, totalResults })
+}
+
+async function handleFilter(filters) {
+  selection.value = []
+
+  if (
+    collectionStore.filters.groups !== filters.groups ||
+    collectionStore.sortBy !== filters.sortProperty ||
+    collectionStore.sortDirection !== filters.sortDirection ||
+    collectionStore.favorites !== filters.favorites ||
+    collectionStore.futureItems !== filters.futureItems
+  ) {
+    const totalResults = collectionStore.paginationInfo.total_results
+    collectionStore.updateCurrentPage({
+      page: 1,
+      totalResults
+    })
+
+    collectionStore.updateGroups(filters.groups)
+    collectionStore.updateSort({
+      sortBy: filters.sortProperty,
+      sortDirection: filters.sortDirection
+    })
+    collectionStore.updateFavorites(filters.favorites)
+    collectionStore.updateFutureItems(filters.futureItems)
+  }
+}
+
+async function handleTableSort({ property, direction }) {
+  const totalResults = collectionStore.paginationInfo.total_results
+  collectionStore.updateCurrentPage({
+    page: 1,
+    totalResults
+  })
+
+  collectionStore.updateSort({
+    sortBy: property,
+    sortDirection: direction
+  })
+}
+
+const createDialogOpen = ref(false)
+
+function openCreateDialog() {
+  createDialogOpen.value = true
+}
+
+function closeCreateDialog() {
+  createDialogOpen.value = false
+}
+
+const canEdit = computed(() => sheetStore.canEdit)
+
+const selection = ref([])
+const booksToDelete = computed(() => {
+  return selection.value.map((idx) => books.value[idx])
+})
+
+const deleteDialogOpen = ref(false)
+const { mutate: bulkDeleteBooks, isLoading: deleting } =
+  useBulkDeleteBookMutation()
+
+function handleDeleteSelection() {
+  bulkDeleteBooks(booksToDelete.value)
+}
+
+const { mutate: bulkUpdateBooks, isLoading: updating } =
+  useBulkEditBookMutation()
+
+function handleBulkMarkAs({ booksToEdit, newStatus }) {
+  const editedBooks = booksToEdit
+    .filter((book) => book.status !== newStatus)
+    .map((book) => {
+      /** @type {import('@/model/Book').default} */
+      const clone = cloneDeep(book)
+      clone.status = newStatus
+      clone.readAt = newStatus === STATUS_READ ? new Date() : null
+      return clone
+    })
+
+  bulkUpdateBooks(editedBooks)
+}
+
+function handleBulkToggleFavorite({ booksToEdit, newFavorite }) {
+  const editedBooks = booksToEdit
+    .filter((book) => book.favorite !== newFavorite)
+    .map((book) => {
+      const clone = cloneDeep(book)
+      clone.favorite = newFavorite
+      return clone
+    })
+
+  bulkUpdateBooks(editedBooks)
+}
+
+const writing = computed(() => deleting.value || updating.value)
+</script>
+
 <template>
   <div class="flex flex-col">
     <LibraryHeader
@@ -12,21 +387,35 @@
         <section
           class="h-full max-w-7xl mx-auto pt-4 sm:pt-6 px-4 sm:px-6 lg:px-8 space-y-4 sm:space-y-6 !mb-6"
           aria-labelledby="results-title"
-          v-if="(sheetLoading || loading || writing || books.length > 0) && !sheetIsEmpty"
+          v-if="
+            (sheetLoading || loading || writing || books.length > 0) &&
+            !sheetIsEmpty
+          "
         >
-          <h2 id="results-title" class="sr-only" hidden aria-live="polite" aria-hidden="true">
+          <h2
+            id="results-title"
+            class="sr-only"
+            hidden
+            aria-live="polite"
+            aria-hidden="true"
+          >
             {{
               t('dashboard.library.items.current', groupsFilter.length, {
-                count: groupsFilter.length === 1
-                  ? groupsFilter[0]
-                  : groupsFilter.length
+                count:
+                  groupsFilter.length === 1
+                    ? groupsFilter[0]
+                    : groupsFilter.length
               })
             }}
           </h2>
 
-          <div class="bg-white dark:bg-gray-800 px-4 py-4 md:py-3 sm:px-6 -mx-4 sm:-mx-6 md:mx-0 shadow md:rounded-md flex flex-row justify-between items-center">
+          <div
+            class="bg-white dark:bg-gray-800 px-4 py-4 md:py-3 sm:px-6 -mx-4 sm:-mx-6 md:mx-0 shadow md:rounded-md flex flex-row justify-between items-center"
+          >
             <div
-              v-if="(sheetLoading && !writing) || (loading && books.length === 0)"
+              v-if="
+                (sheetLoading && !writing) || (loading && books.length === 0)
+              "
               class="skeleton h-5 w-40 md:w-48"
             />
             <div v-else>
@@ -36,9 +425,15 @@
                 class="text-xs sm:text-sm text-gray-700 dark:text-gray-300"
                 scope="global"
               >
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.current_page || 1 }} </span>
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.total_pages || 1 }} </span>
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.total_results || 0 }} </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.current_page || 1 }}
+                </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.total_pages || 1 }}
+                </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.total_results || 0 }}
+                </span>
               </i18n-t>
             </div>
 
@@ -63,10 +458,14 @@
                   <RadioGroupOption
                     value="grid,comfortable"
                     class="view-button has-ring-focus"
-                    :title="t('dashboard.library.filters.gridMode.comfortableGrid')"
+                    :title="
+                      t('dashboard.library.filters.gridMode.comfortableGrid')
+                    "
                   >
                     <span class="sr-only">
-                      {{ t('dashboard.library.filters.gridMode.comfortableGrid') }}
+                      {{
+                        t('dashboard.library.filters.gridMode.comfortableGrid')
+                      }}
                     </span>
                     <span aria-hidden="true">
                       <ViewGridIcon class="h-5 w-5" />
@@ -126,7 +525,9 @@
             class="bg-white dark:bg-gray-800 px-4 py-4 md:py-3 sm:px-6 shadow md:rounded-md flex -mx-4 sm:-mx-6 md:mx-0 flex-col md:flex-row md:justify-between items-center"
           >
             <div
-              v-if="(sheetLoading && !writing) || (loading && books.length === 0)"
+              v-if="
+                (sheetLoading && !writing) || (loading && books.length === 0)
+              "
               class="skeleton h-5 w-40 md:w-48"
             />
             <div v-else>
@@ -136,9 +537,15 @@
                 class="text-sm text-gray-700 dark:text-gray-300 mb-4 md:mb-0"
                 scope="global"
               >
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.current_page }} </span>
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.total_pages }} </span>
-                <span class="font-semibold dark:text-gray-100"> {{ paginationInfo.total_results }} </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.current_page }}
+                </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.total_pages }}
+                </span>
+                <span class="font-semibold dark:text-gray-100">
+                  {{ paginationInfo.total_results }}
+                </span>
               </i18n-t>
             </div>
 
@@ -150,14 +557,19 @@
               <ul class="flex justify-center space-x-4">
                 <li>
                   <div
-                    v-if="(sheetLoading && !writing) || (loading && books.length === 0)"
+                    v-if="
+                      (sheetLoading && !writing) ||
+                      (loading && books.length === 0)
+                    "
                     class="skeleton h-9 w-28"
                   />
                   <button
                     v-else
                     type="button"
                     class="button"
-                    :disabled="!paginationInfo.has_previous_page || loading || writing"
+                    :disabled="
+                      !paginationInfo.has_previous_page || loading || writing
+                    "
                     @click.stop="handlePage(paginationInfo.current_page - 1)"
                   >
                     <span aria-hidden="true">
@@ -169,14 +581,19 @@
 
                 <li>
                   <div
-                    v-if="(sheetLoading && !writing) || (loading && books.length === 0)"
+                    v-if="
+                      (sheetLoading && !writing) ||
+                      (loading && books.length === 0)
+                    "
                     class="skeleton h-9 w-28"
                   />
                   <button
                     v-else
                     type="button"
                     class="button"
-                    :disabled="!paginationInfo.has_next_page || loading || writing"
+                    :disabled="
+                      !paginationInfo.has_next_page || loading || writing
+                    "
                     @click.stop="handlePage(paginationInfo.current_page + 1)"
                   >
                     {{ t('pagination.next') }}
@@ -189,7 +606,9 @@
             </nav>
 
             <div
-              v-if="(sheetLoading && !writing) || (loading && books.length === 0)"
+              v-if="
+                (sheetLoading && !writing) || (loading && books.length === 0)
+              "
               class="skeleton h-10 w-60 hidden sm:block"
             />
             <div v-else class="hidden sm:block">
@@ -209,7 +628,9 @@
           class="w-full max-w-lg mx-auto h-full flex items-center justify-center flex-col px-4"
         >
           <span aria-hidden="true">
-            <ExclamationCircleIcon class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600" />
+            <ExclamationCircleIcon
+              class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600"
+            />
           </span>
           <h2
             id="empty-sheet-title"
@@ -238,7 +659,9 @@
           class="w-full max-w-lg mx-auto h-full flex items-center justify-center flex-col px-4"
         >
           <span aria-hidden="true">
-            <DocumentSearchIcon class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600" />
+            <DocumentSearchIcon
+              class="h-16 w-16 mb-8 text-gray-400 dark:text-gray-600"
+            />
           </span>
           <h2
             id="empty-sheet-title"
@@ -249,10 +672,7 @@
           <p class="text-center text-gray-600 dark:text-gray-400 mb-8">
             {{ t('dashboard.library.noResults.description') }}
           </p>
-          <button
-            class="button text-lg"
-            @click="filterOpen = true"
-          >
+          <button class="button text-lg" @click="filterOpen = true">
             <span aria-hidden="true">
               <FilterIcon />
             </span>
@@ -284,433 +704,6 @@
   </div>
 </template>
 
-<script>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import cloneDeep from 'lodash.clonedeep'
-
-import useBulkDeleteBookMutation from '@/mutations/useBulkDeleteBookMutation'
-import useBulkEditBookMutation from '@/mutations/useBulkEditBookMutation'
-import { useCollectionStore } from '@/stores/collection'
-import { useSettingsStore } from '@/stores/settings'
-import { useSheetStore } from '@/stores/sheet'
-import { STATUS_READ } from '@/model/Book'
-import useBooksQuery from '@/queries/useBooksQuery'
-import useGroupsQuery from '@/queries/useGroupsQuery'
-
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  FilterIcon,
-  PlusIcon
-} from '@heroicons/vue/solid'
-import {
-  DocumentSearchIcon,
-  ExclamationCircleIcon,
-  TableIcon,
-  ViewGridAddIcon,
-  ViewGridIcon
-} from '@heroicons/vue/outline'
-
-import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
-
-import BookCreateDialog from '@/components/dialogs/BookCreateDialog.vue'
-import BookDeleteDialog from '@/components/dialogs/BookDeleteDialog.vue'
-import BookGrid from '@/components/book/BookGrid.vue'
-import BookTable from '@/components/book/BookTable.vue'
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import LibraryFiltersDialog from '@/components/dialogs/LibraryFiltersDialog.vue'
-import LibraryHeader from '@/components/LibraryHeader.vue'
-import Paginator from '@/components/Paginator.vue'
-
-export default {
-  components: {
-    BookCreateDialog,
-    BookDeleteDialog,
-    BookGrid,
-    BookTable,
-    FadeTransition,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    DocumentSearchIcon,
-    ExclamationCircleIcon,
-    FilterIcon,
-    LibraryFiltersDialog,
-    LibraryHeader,
-    Paginator,
-    PlusIcon,
-    RadioGroup,
-    RadioGroupLabel,
-    RadioGroupOption,
-    TableIcon,
-    ViewGridAddIcon,
-    ViewGridIcon
-  },
-
-  setup () {
-    const { t } = useI18n({ useScope: 'global' })
-    const collectionStore = useCollectionStore()
-    const settingsStore = useSettingsStore()
-    const sheetStore = useSheetStore()
-
-    const filterOpen = ref(false)
-
-    const sheetIsEmpty = computed(() => sheetStore.isEmpty)
-
-    const currentPage = computed(() => collectionStore.currentPage)
-    const paginationInfo = computed(() => collectionStore.paginationInfo)
-    const sortProperty = computed(() => collectionStore.sortBy)
-    const sortDirection = computed(() => collectionStore.sortDirection)
-
-    const viewMode = computed({
-      get () {
-        if (settingsStore.viewMode === 'table') {
-          return 'table'
-        }
-
-        return settingsStore.viewMode + ',' + settingsStore.gridMode
-      },
-      set (value) {
-        const [viewMode, gridMode] = value.split(',')
-
-        settingsStore.updateViewMode(viewMode)
-
-        if (gridMode) {
-          settingsStore.updateGridMode(gridMode)
-        }
-
-        selection.value = []
-      }
-    })
-
-    const sortPropertyNames = computed(() => ({
-      title: t('book.properties.title'),
-      publisher: t('book.properties.publisher'),
-      status: t('book.properties.status'),
-      readAt: t('book.properties.readAt'),
-      'paidPrice.value': t('book.properties.paidPrice'),
-      'labelPrice.value': t('book.properties.labelPrice'),
-      createdAt: t('book.properties.createdAt'),
-      updatedAt: t('book.properties.updatedAt')
-    }))
-
-    const sortPropertyName = computed(() => {
-      return sortPropertyNames.value[sortProperty.value]
-    })
-
-    const route = useRoute()
-    const sheetId = computed(() => sheetStore.sheetId)
-    const sheetLoading = computed(() => sheetStore.loading)
-    const sheetLoadedOnce = computed(() => sheetStore.loadedOnce)
-    const groupsFilter = computed(() => collectionStore.filters.groups)
-
-    const queriesEnabled = computed(() => {
-      return !sheetLoading.value && sheetId.value !== null
-    })
-
-    const {
-      data: groupsData,
-      isIdle: groupsIdle,
-      isLoading: groupsLoading
-    } = useGroupsQuery({ enabled: queriesEnabled })
-
-    const {
-      data: booksData,
-      isFetching: booksFetching,
-      isIdle: booksIdle,
-      isLoading: booksLoading,
-      isStale: booksStale
-    } = useBooksQuery({
-      favorites: computed(() => collectionStore.favorites),
-      futureItems: computed(() => collectionStore.futureItems),
-      groups: groupsFilter,
-      page: currentPage,
-      sortBy: sortProperty,
-      sortDirection
-    }, { enabled: queriesEnabled })
-
-    const books = computed(() => booksData.value?.books || [])
-
-    const loading = computed(() => {
-      return booksLoading.value || groupsLoading.value ||
-        groupsIdle.value || booksIdle.value
-    })
-
-    watch(groupsData, newGroups => {
-      if (!newGroups) {
-        return
-      }
-
-      // Remove the inexistent groups from selection.
-      const fixedGroups = collectionStore.filters.groups
-        .filter(selGroup => groupsData.value.includes(selGroup))
-
-      collectionStore.updateGroups(fixedGroups)
-    })
-
-    watch(() => booksData.value?.totalResults, newTotals => {
-      collectionStore.updateCurrentPage({
-        page: currentPage.value,
-        totalResults: newTotals
-      })
-    })
-
-    function updateGroupFromQuery () {
-      const newGroup = route.query.group
-
-      if (sheetLoading.value || loading.value) {
-        return false
-      }
-
-      if (!newGroup) {
-        // Remove inexistent groups from selection.
-        const fixedGroups = collectionStore.filters.groups
-          .filter(selGroup => groupsData.value.includes(selGroup))
-
-        collectionStore.updateGroups(fixedGroups)
-
-        return false
-      }
-
-      const groupExists = groupsData.value
-        ?.find(grp => grp.name === newGroup)
-
-      if (groupExists) {
-        collectionStore.updateGroups([newGroup])
-
-        return true
-      }
-
-      return false
-    }
-
-    function updateSortPropertyFromQuery () {
-      const newSortProperty = route.query.sortProperty
-
-      if (sheetLoading.value || !newSortProperty) {
-        return false
-      }
-
-      if (!sortPropertyNames.value[newSortProperty]) {
-        return false
-      }
-
-      if (newSortProperty !== sortProperty.value) {
-        collectionStore.updateSort({
-          sortBy: newSortProperty,
-          sortDirection: 'desc'
-        })
-
-        return true
-      }
-
-      return false
-    }
-
-    function updateFromQuery () {
-      const groupChanged = updateGroupFromQuery()
-      const sortChanged = updateSortPropertyFromQuery()
-
-      if (groupChanged || sortChanged || books.value.length === 0) {
-        collectionStore.$patch({
-          currentPage: sortChanged ? 1 : currentPage.value
-        })
-      }
-    }
-
-    watch(sheetLoading, newSheetLoading => {
-      if (!newSheetLoading) {
-        updateFromQuery()
-      }
-    })
-
-    onMounted(() => {
-      if (sheetId.value) {
-        updateFromQuery()
-      }
-    })
-
-    const table = ref(null)
-    const grid = ref(null)
-    const currentView = computed(() => {
-      return viewMode.value === 'table' ? table.value : grid.value
-    })
-
-    const lastFocus = ref(null)
-
-    watch(booksFetching, value => {
-      if (value) {
-        lastFocus.value = document.activeElement
-        lastFocus.value?.blur()
-      }
-    })
-
-    async function handleFocus () {
-      await nextTick()
-
-      const classList = lastFocus.value?.classList
-
-      if (classList?.contains('table-header-button')) {
-        table.value?.focusOnActiveHeader()
-      } else if (classList?.contains('pag-button')) {
-        currentView.value?.focus()
-      }
-    }
-
-    watch(collectionStore.$state, handleFocus)
-    watch(booksLoading, async newValue => {
-      if (newValue) {
-        await handleFocus()
-      }
-    })
-
-    async function handlePage (page) {
-      window.scroll({
-        top: 0,
-        left: 0,
-        behavior: 'smooth'
-      })
-
-      const totalResults = collectionStore.paginationInfo.total_results
-      collectionStore.updateCurrentPage({ page, totalResults })
-    }
-
-    async function handleFilter (filters) {
-      selection.value = []
-
-      if (
-        collectionStore.filters.groups !== filters.groups ||
-        collectionStore.sortBy !== filters.sortProperty ||
-        collectionStore.sortDirection !== filters.sortDirection ||
-        collectionStore.favorites !== filters.favorites ||
-        collectionStore.futureItems !== filters.futureItems
-      ) {
-        const totalResults = collectionStore.paginationInfo.total_results
-        collectionStore.updateCurrentPage({
-          page: 1,
-          totalResults
-        })
-
-        collectionStore.updateGroups(filters.groups)
-        collectionStore.updateSort({
-          sortBy: filters.sortProperty,
-          sortDirection: filters.sortDirection
-        })
-        collectionStore.updateFavorites(filters.favorites)
-        collectionStore.updateFutureItems(filters.futureItems)
-      }
-    }
-
-    async function handleTableSort ({ property, direction }) {
-      const totalResults = collectionStore.paginationInfo.total_results
-      collectionStore.updateCurrentPage({
-        page: 1,
-        totalResults
-      })
-
-      collectionStore.updateSort({
-        sortBy: property,
-        sortDirection: direction
-      })
-    }
-
-    const createDialogOpen = ref(false)
-
-    function openCreateDialog () {
-      createDialogOpen.value = true
-    }
-
-    function closeCreateDialog () {
-      createDialogOpen.value = false
-    }
-
-    const canEdit = computed(() => sheetStore.canEdit)
-
-    const selection = ref([])
-    const booksToDelete = computed(() => {
-      return selection.value.map(idx => books.value[idx])
-    })
-
-    const deleteDialogOpen = ref(false)
-    const {
-      mutate: bulkDeleteBooks,
-      isLoading: deleting
-    } = useBulkDeleteBookMutation()
-
-    function handleDeleteSelection () {
-      bulkDeleteBooks(booksToDelete.value)
-    }
-
-    const {
-      mutate: bulkUpdateBooks,
-      isLoading: updating
-    } = useBulkEditBookMutation()
-
-    function handleBulkMarkAs ({ booksToEdit, newStatus }) {
-      const editedBooks = booksToEdit
-        .filter(book => book.status !== newStatus)
-        .map(book => {
-          /** @type {import('@/model/Book').default} */
-          const clone = cloneDeep(book)
-          clone.status = newStatus
-          clone.readAt = newStatus === STATUS_READ ? new Date() : null
-          return clone
-        })
-
-      bulkUpdateBooks(editedBooks)
-    }
-
-    function handleBulkToggleFavorite ({ booksToEdit, newFavorite }) {
-      const editedBooks = booksToEdit
-        .filter(book => book.favorite !== newFavorite)
-        .map(book => {
-          const clone = cloneDeep(book)
-          clone.favorite = newFavorite
-          return clone
-        })
-
-      bulkUpdateBooks(editedBooks)
-    }
-
-    const writing = computed(() => deleting.value || updating.value)
-
-    return {
-      filterOpen,
-      sheetIsEmpty,
-      handlePage,
-      sheetLoading,
-      sheetLoadedOnce,
-      loading,
-      books,
-      paginationInfo,
-      sortDirection,
-      sortProperty,
-      sortPropertyName,
-      currentPage,
-      viewMode,
-      handleFilter,
-      handleTableSort,
-      createDialogOpen,
-      openCreateDialog,
-      closeCreateDialog,
-      canEdit,
-      groupsFilter,
-      selection,
-      deleteDialogOpen,
-      handleDeleteSelection,
-      handleBulkMarkAs,
-      handleBulkToggleFavorite,
-      writing,
-      table,
-      grid,
-      t
-    }
-  }
-}
-</script>
-
 <style lang="postcss" scoped>
 .view-button {
   @apply p-2 rounded-md
@@ -718,11 +711,11 @@ export default {
     motion-safe:transition cursor-pointer;
 }
 
-.view-button:not([aria-disabled="true"]):hover {
+.view-button:not([aria-disabled='true']):hover {
   @apply bg-gray-700/10 dark:bg-gray-200/10;
 }
 
-.view-button:not([aria-disabled="true"]):hover:not([aria-checked="true"]) {
+.view-button:not([aria-disabled='true']):hover:not([aria-checked='true']) {
   @apply text-gray-600 dark:text-gray-300;
 }
 
@@ -730,16 +723,16 @@ export default {
   @apply outline-none;
 }
 
-.view-button[aria-checked="true"] {
+.view-button[aria-checked='true'] {
   @apply text-primary-600 dark:text-gray-300
     bg-primary-50 dark:bg-gray-600/50;
 }
 
-.view-button[aria-checked="true"]:not([aria-disabled="true"]):hover {
+.view-button[aria-checked='true']:not([aria-disabled='true']):hover {
   @apply bg-primary-100 dark:bg-gray-500/60;
 }
 
-.view-button[aria-disabled="true"] {
+.view-button[aria-disabled='true'] {
   @apply opacity-50 cursor-default;
 }
 </style>
diff --git a/src/views/dashboard/library/Index.vue b/src/views/dashboard/library/Index.vue
index 379cda0a..390bb8e0 100644
--- a/src/views/dashboard/library/Index.vue
+++ b/src/views/dashboard/library/Index.vue
@@ -1,15 +1,11 @@
+<script setup>
+import FadeTransition from '@/components/transitions/FadeTransition.vue'
+</script>
+
 <template>
   <router-view v-slot="{ Component }">
-    <transition
-      mode="out-in"
-      enter-active-class="transition motion-reduce:transition-none duration-500 ease-out"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100 "
-      leave-active-class="transition motion-reduce:transition-none duration-300 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
+    <FadeTransition>
       <component :is="Component" class="w-full" />
-    </transition>
+    </FadeTransition>
   </router-view>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4918e33f..fee80e8d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,13 +1,11 @@
 const colors = require('tailwindcss/colors')
 const defaultTheme = require('tailwindcss/defaultTheme')
-const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette')
+const {
+  default: flattenColorPalette
+} = require('tailwindcss/lib/util/flattenColorPalette')
 
 module.exports = {
-  content: [
-    './index.html',
-    './src/**/*.vue',
-    './src/**/*.js'
-  ],
+  content: ['./index.html', './src/**/*.vue', './src/**/*.js'],
   darkMode: 'class', // or 'media' or 'class'
   theme: {
     fontFamily: {
@@ -40,7 +38,7 @@ module.exports = {
       spacing: {
         '2px': '2px'
       },
-      typography: theme => ({
+      typography: (theme) => ({
         DEFAULT: {
           css: {
             'h1, h2, h3, h4, h5, h6': {
@@ -105,7 +103,11 @@ module.exports = {
               marginLeft: '-1.25em',
               opacity: '0',
               paddingRight: '0.25em',
-              textDecoration: 'none'
+              textDecoration: 'none',
+
+              '&:focus-visible': {
+                opacity: '1'
+              }
             },
             ':where(h1, h2, h3, h4, h5, h6):hover .header-anchor': {
               opacity: '1'
@@ -177,7 +179,7 @@ module.exports = {
     },
     function ({ matchUtilities, theme }) {
       matchUtilities(
-        { skeleton: value => ({ backgroundColor: value }) },
+        { skeleton: (value) => ({ backgroundColor: value }) },
         { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
       )
     }
diff --git a/yarn.lock b/yarn.lock
index 1dfacfc7..635ef369 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1040,10 +1040,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@eslint/eslintrc@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.1.0.tgz#583d12dbec5d4f22f333f9669f7d0b7c7815b4d3"
-  integrity sha512-C1DfL7XX4nPqGd6jcP01W9pVM1HYCuUkFk1432D7F0v3JSlUIeOYn9oCoi3eoLZ+iwBSb29BMFxxny0YrrEZqg==
+"@eslint/eslintrc@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.0.tgz#7ce1547a5c46dfe56e1e45c3c9ed18038c721c6a"
+  integrity sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1060,10 +1060,10 @@
   resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.5.0.tgz#8cd4877d3d344e482073a04ae8e3b7f987bb267c"
   integrity sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==
 
-"@heroicons/vue@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.5.tgz#ccef02a9a75e47129a0b8faf5d1d93bd90723264"
-  integrity sha512-idWtp20Fjr7mqnD7EdGDUDi83oWHnx3SwyuQY6GZyF33OApzpBOLxz7xa4t6rPOddGz9tI5RGnndLk+ake7ijQ==
+"@heroicons/vue@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
+  integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
 
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
@@ -1439,10 +1439,10 @@
   resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.0.tgz#c635dd7331cbcc1b111cebdc2647dd3493ebdd3e"
   integrity sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==
 
-"@tailwindcss/forms@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.4.0.tgz#a46715e347a32d216a3973eb67473bd29ae3798e"
-  integrity sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==
+"@tailwindcss/forms@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.0.tgz#d4bea2560a10aac642573e72d3b4d62a88960449"
+  integrity sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
@@ -1553,12 +1553,12 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^27.4.0":
-  version "27.4.0"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
-  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
+"@types/jest@^27.4.1":
+  version "27.4.1"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.1.tgz#185cbe2926eaaf9662d340cc02e548ce9e11ab6d"
+  integrity sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==
   dependencies:
-    jest-diff "^27.0.0"
+    jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
 "@types/json-schema@^7.0.9":
@@ -1671,10 +1671,10 @@
     "@typescript-eslint/types" "5.12.1"
     eslint-visitor-keys "^3.0.0"
 
-"@vitejs/plugin-vue@^2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.2.2.tgz#df5d4464ad8cb97c9fb7407a1e5a3a34f716febb"
-  integrity sha512-3C0s45VOwIFEDU+2ownJOpb0zD5fnjXWaHVOLID2R1mYOlAx3doNBFnNbVjaZvpke/L7IdPJXjpyYpXZToDKig==
+"@vitejs/plugin-vue@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.2.4.tgz#ab8b199ca82496b05d2654c5f34ffcf9b947243d"
+  integrity sha512-ev9AOlp0ljCaDkFZF3JwC/pD2N4Hh+r5srl5JHM6BKg5+99jiiK0rE/XaRs3pVm1wzyKkjUy/StBSoXX5fFzcw==
 
 "@vue/compiler-core@3.2.31":
   version "3.2.31"
@@ -1718,12 +1718,7 @@
     "@vue/compiler-dom" "3.2.31"
     "@vue/shared" "3.2.31"
 
-"@vue/devtools-api@^6.0.0-beta.18":
-  version "6.0.0-beta.19"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
-  integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw==
-
-"@vue/devtools-api@^6.0.0-beta.21":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.21":
   version "6.0.12"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
   integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
@@ -1733,15 +1728,6 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
   integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
 
-"@vue/eslint-config-standard@^6.1.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@vue/eslint-config-standard/-/eslint-config-standard-6.1.0.tgz#b362ba67c86caa4e7b44481c2303c9dccc2dc037"
-  integrity sha512-9+hrEyflDzsGdlBDl9jPV5DIYUx1TOU5OSQqRDKCrNumrxRj5HRWKuk+ocXWnha6uoNRtLC24mY7d/MwqvBCNw==
-  dependencies:
-    eslint-config-standard "^16.0.3"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-import-resolver-webpack "^0.13.1"
-
 "@vue/reactivity-transform@3.2.31":
   version "3.2.31"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
@@ -1917,10 +1903,10 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@^3.33.1:
-  version "3.33.1"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.33.1.tgz#7159f45e7d726a548e5135a327c03e7894d0bf13"
-  integrity sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==
+apexcharts@^3.33.2:
+  version "3.33.2"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.33.2.tgz#ebb186f1da954fc31857f1ee562a6b281d25db6b"
+  integrity sha512-GkHZ3o36ZT/jSBh5y1pxxRzwM3tvtladtkcUTfXwP0wYAHK8Qj0X4ZPsupP7emRIjhOVpGsCxW9xeO3F5w+AOQ==
   dependencies:
     svg.draggable.js "^2.2.2"
     svg.easing.js "^2.0.0"
@@ -1946,11 +1932,6 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-array-find@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"
-  integrity sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg=
-
 array-includes@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
@@ -2564,15 +2545,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-enhanced-resolve@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
-  integrity sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.2.0"
-    tapable "^0.1.8"
-
 entities@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -2772,12 +2744,12 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-standard@^16.0.3:
-  version "16.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-16.0.3.tgz#6c8761e544e96c531ff92642eeb87842b8488516"
-  integrity sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
+eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
   integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
@@ -2785,23 +2757,6 @@ eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-import-resolver-webpack@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.1.tgz#6d2fb928091daf2da46efa1e568055555b2de902"
-  integrity sha512-O/8mG6AHmaKYSMb4lWxiXPpaARxOJ4rMQEHJ8vTgjS1MXooJA3KPgBPPAdOPoV17v5ML5120qod5FBLM+DtgEw==
-  dependencies:
-    array-find "^1.0.0"
-    debug "^3.2.7"
-    enhanced-resolve "^0.9.1"
-    find-root "^1.1.0"
-    has "^1.0.3"
-    interpret "^1.4.0"
-    is-core-module "^2.4.0"
-    is-regex "^1.1.3"
-    lodash "^4.17.21"
-    resolve "^1.20.0"
-    semver "^5.7.1"
-
 eslint-module-utils@^2.7.2:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz#1d0aa455dcf41052339b63cada8ab5fd57577129"
@@ -2856,6 +2811,13 @@ eslint-plugin-node@^11.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
+eslint-plugin-prettier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
+  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-promise@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
@@ -2866,10 +2828,10 @@ eslint-plugin-standard@^5.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-5.0.0.tgz#c43f6925d669f177db46f095ea30be95476b1ee4"
   integrity sha512-eSIXPc9wBM4BrniMzJRBm2uoVuXz2EPa+NXPk2+itrVt+r5SbKFERx/IgrK/HmfjddyKVz2f+j+7gBRvu19xLg==
 
-eslint-plugin-vue@^8.4.1:
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-8.4.1.tgz#0a25493bbfee6baa21614e637e3fd390617c0bb4"
-  integrity sha512-nmWOhNmDx9TZ+yP9ZhezTkZUupSHsYA2TocRm+efPSXMOyFrVczVlaIuQcLBjCtI8CbkBiUQ3VcyQsjlIhDrhA==
+eslint-plugin-vue@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz#65832bba43ca713fa5da16bdfcf55d0095677f6f"
+  integrity sha512-i1uHCTAKOoEj12RDvdtONWrGzjFm/djkzqfhmQ0d6M/W8KM81mhswd/z+iTZ0jCpdUedW3YRgcVfQ37/J4zoYQ==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
@@ -2934,12 +2896,12 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@^8.9.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.9.0.tgz#a2a8227a99599adc4342fd9b854cb8d8d6412fdb"
-  integrity sha512-PB09IGwv4F4b0/atrbcMFboF/giawbBLVC7fyDamk5Wtey4Jh2K+rYaBhCAbUyEI4QzB1ly09Uglc9iCtFaG2Q==
+eslint@^8.10.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.10.0.tgz#931be395eb60f900c01658b278e05b6dae47199d"
+  integrity sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==
   dependencies:
-    "@eslint/eslintrc" "^1.1.0"
+    "@eslint/eslintrc" "^1.2.0"
     "@humanwhocodes/config-array" "^0.9.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
@@ -3072,6 +3034,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -3139,11 +3106,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -3342,11 +3304,6 @@ globby@^11.0.4:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-graceful-fs@^4.1.2:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
-  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
-
 graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
   version "4.2.9"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
@@ -3420,6 +3377,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+husky@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -3504,11 +3466,6 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-interpret@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
-  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3541,7 +3498,7 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-core-module@^2.2.0, is-core-module@^2.4.0:
+is-core-module@^2.2.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
   integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
@@ -3630,7 +3587,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.3, is-regex@^1.1.4:
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -3818,7 +3775,7 @@ jest-config@^27.5.1:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
-jest-diff@^27.0.0, jest-diff@^27.5.1:
+jest-diff@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
   integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
@@ -3927,7 +3884,7 @@ jest-leak-detector@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-matcher-utils@^27.5.1:
+jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
   integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
@@ -4451,11 +4408,6 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
-memory-fs@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
-  integrity sha1-8rslNovBIeORwlIN6Slpyu4KApA=
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -4865,6 +4817,15 @@ postcss@^8.4.6:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.7:
+  version "8.4.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8"
+  integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -4875,6 +4836,18 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -5144,7 +5117,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^5.6.0, semver@^5.7.1:
+semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -5485,11 +5458,6 @@ tailwindcss@^3.0.23:
     quick-lru "^5.1.1"
     resolve "^1.22.0"
 
-tapable@^0.1.8:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
-  integrity sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=
-
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@@ -5750,10 +5718,10 @@ vite-plugin-pwa@^0.11.13:
     workbox-build "^6.4.2"
     workbox-window "^6.4.2"
 
-vite@^2.8.4:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.4.tgz#4e52a534289b7b4e94e646df2fc5556ceaa7336b"
-  integrity sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==
+vite@^2.8.6:
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3"
+  integrity sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==
   dependencies:
     esbuild "^0.14.14"
     postcss "^8.4.6"
@@ -5809,12 +5777,12 @@ vue-query@^1.19.1:
     react-query "^3.34.9"
     vue-demi "0.10.1"
 
-vue-router@^4.0.12:
-  version "4.0.12"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
-  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+vue-router@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.13.tgz#47f06e2f8ff6120bfff3c27ade1356cc9de7d870"
+  integrity sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.18"
+    "@vue/devtools-api" "^6.0.0"
 
 vue3-apexcharts@^1.4.1:
   version "1.4.1"