diff --git a/.prettierrc.js b/.prettierrc.js
index 5a95674e..329c0f14 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,3 +1,4 @@
 module.exports = {
   printWidth: 120,
+  plugins: ["prettier-plugin-tailwindcss"],
 };
diff --git a/Dockerfile b/Dockerfile
index 1bed79bf..2af767f5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,7 +14,7 @@ COPY package.json ./
 RUN pnpm install --offline --ignore-scripts --no-optional
 
 # Copy assets and translations to build
-COPY .* vite.config.ts ./
+COPY .* *.config.ts *.config.js ./
 COPY assets ./assets
 COPY locales ./locales
 COPY public ./public
diff --git a/assets/App.vue b/assets/App.vue
index e199dccb..1bd5ae95 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -22,5 +22,3 @@ watchEffect(() => {
   }
 });
 </script>
-
-<style scoped lang="scss"></style>
diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index a2615e10..ad4163ae 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -29,9 +29,11 @@ declare global {
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
+  const createProjection: typeof import('@vueuse/math')['createProjection']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
@@ -60,12 +62,14 @@ declare global {
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isMobile: typeof import('./composables/media')['isMobile']
   const isObject: typeof import('./utils/index')['isObject']
-  const isPinnedContainer: typeof import('./composables/storage')['isPinnedContainer']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const lightTheme: typeof import('./composables/settings')['lightTheme']
+  const logicAnd: typeof import('@vueuse/math')['logicAnd']
+  const logicNot: typeof import('@vueuse/math')['logicNot']
+  const logicOr: typeof import('@vueuse/math')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
@@ -141,7 +145,6 @@ declare global {
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
-  const togglePinnedContainer: typeof import('./composables/storage')['togglePinnedContainer']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -151,6 +154,7 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
+  const useAbs: typeof import('@vueuse/math')['useAbs']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
@@ -168,6 +172,7 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
+  const useAverage: typeof import('@vueuse/math')['useAverage']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -175,6 +180,8 @@ declare global {
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
+  const useCeil: typeof import('@vueuse/math')['useCeil']
+  const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
@@ -213,6 +220,7 @@ declare global {
   const useFetch: typeof import('@vueuse/core')['useFetch']
   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFloor: typeof import('@vueuse/math')['useFloor']
   const useFocus: typeof import('@vueuse/core')['useFocus']
   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
@@ -234,10 +242,13 @@ declare global {
   const useLogStream: typeof import('./composables/eventsource')['useLogStream']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMath: typeof import('@vueuse/math')['useMath']
+  const useMax: typeof import('@vueuse/math')['useMax']
   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMin: typeof import('@vueuse/math')['useMin']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -257,15 +268,18 @@ declare global {
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePrecision: typeof import('@vueuse/math')['usePrecision']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useProjection: typeof import('@vueuse/math')['useProjection']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRound: typeof import('@vueuse/math')['useRound']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
@@ -285,6 +299,7 @@ declare global {
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSum: typeof import('@vueuse/math')['useSum']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
@@ -304,6 +319,7 @@ declare global {
   const useToString: typeof import('@vueuse/core')['useToString']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useTrunc: typeof import('@vueuse/math')['useTrunc']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
   const useVModel: typeof import('@vueuse/core')['useVModel']
@@ -480,7 +496,6 @@ declare module 'vue' {
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly togglePinnedContainer: UnwrapRef<typeof import('./composables/storage')['togglePinnedContainer']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -813,7 +828,6 @@ declare module '@vue/runtime-core' {
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly togglePinnedContainer: UnwrapRef<typeof import('./composables/storage')['togglePinnedContainer']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
diff --git a/assets/components.d.ts b/assets/components.d.ts
index 2ba8f5a2..40939a63 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
+    'Cil:check': typeof import('~icons/cil/check')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
@@ -28,13 +29,14 @@ declare module 'vue' {
     DateTime: typeof import('./components/common/DateTime.vue')['default']
     DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
+    Dropdown: typeof import('./components/common/Dropdown.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     'Ic:sharpFindInPage': typeof import('~icons/ic/sharp-find-in-page')['default']
     'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
-    KeyShortcut: typeof import('./components/KeyShortcut.vue')['default']
+    KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
     LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
     LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
@@ -75,6 +77,7 @@ declare module 'vue' {
     StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
     Tag: typeof import('./components/common/Tag.vue')['default']
+    Toggle: typeof import('./components/common/Toggle.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }
diff --git a/assets/components/BarChart.vue b/assets/components/BarChart.vue
index 5e4f151f..36ecd024 100644
--- a/assets/components/BarChart.vue
+++ b/assets/components/BarChart.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="is-relative">
-    <div class="bar"></div>
-    <div class="is-overlay">
+  <div class="relative">
+    <div class="bar h-7 origin-left rounded-br rounded-tr bg-primary transition-transform"></div>
+    <div class="absolute inset-0 flex flex-col justify-center px-2 text-sm">
       <slot></slot>
     </div>
   </div>
@@ -15,17 +15,6 @@ const minValue = computed(() => Math.min(value, 1));
 
 <style scoped>
 .bar {
-  height: 1.5em;
-  background-color: var(--primary-color);
-  transform-origin: left;
   transform: scaleX(v-bind(minValue));
-  transition: transform 0.2s ease-out;
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
-}
-
-.is-overlay {
-  font-size: 0.9em;
-  padding: 0 0.5em;
 }
 </style>
diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue
index 8ff1f38c..ac2525ec 100644
--- a/assets/components/ContainerTable.vue
+++ b/assets/components/ContainerTable.vue
@@ -1,6 +1,6 @@
 !
 <template>
-  <table class="table is-fullwidth">
+  <table class="table table-lg bg-base">
     <thead>
       <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
         <th
@@ -10,12 +10,10 @@
           :class="{ 'selected-sort': key === sortField }"
           v-show="isVisible(key)"
         >
-          <a>
-            <span class="icon-text">
-              <span>{{ $t(value.label) }}</span>
-              <span class="icon">
-                <mdi:arrow-up />
-              </span>
+          <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
+            <span>{{ $t(value.label) }}</span>
+            <span class="h-4" data-icon>
+              <mdi:arrow-up />
             </span>
           </a>
         </th>
@@ -46,15 +44,18 @@
       </tr>
     </tbody>
   </table>
-  <nav class="pagination is-right" role="navigation" aria-label="pagination" v-if="isPaginated">
-    <ul class="pagination-list">
-      <li v-for="i in totalPages">
-        <a class="pagination-link" :class="{ 'is-current': i === currentPage }" @click.prevent="currentPage = i">{{
-          i
-        }}</a>
-      </li>
-    </ul>
-  </nav>
+  <div class="p-4 text-center">
+    <nav class="join" v-if="isPaginated">
+      <button
+        v-for="i in totalPages"
+        class="btn join-item"
+        :class="{ 'btn-primary': i === currentPage }"
+        @click="currentPage = i"
+      >
+        {{ i }}
+      </button>
+    </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -137,19 +138,23 @@ function isVisible(field: keys) {
 }
 </script>
 
-<style lang="scss" scoped>
-.icon {
+<style lang="postcss" scoped>
+[data-icon] {
   display: none;
   transition: transform 0.2s ease-in-out;
   [data-direction="desc"] & {
     transform: rotate(180deg);
   }
 }
-.selected-sort {
-  font-weight: bold;
-  border-color: var(--primary-color);
-  .icon {
-    display: inline-block;
+
+th {
+  @apply border-b-2 border-base-lighter;
+  &.selected-sort {
+    font-weight: bold;
+    @apply border-primary;
+    [data-icon] {
+      display: inline-block;
+    }
   }
 }
 
@@ -159,4 +164,8 @@ tbody td {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+a {
+  @apply hover:text-primary;
+}
 </style>
diff --git a/assets/components/DropdownMenu.vue b/assets/components/DropdownMenu.vue
index 72f13d31..f7c34ae9 100644
--- a/assets/components/DropdownMenu.vue
+++ b/assets/components/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown is-hoverable">
+  <div class="is-hoverable dropdown">
     <div class="dropdown-trigger">
       <slot name="trigger">
         <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup></script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
 .minimal .button {
   background-color: rgba(0, 0, 0, 0);
   border: none;
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 7f712536..d74f4d43 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -1,50 +1,57 @@
 <template>
-  <div class="panel">
-    <o-autocomplete
-      ref="autocomplete"
-      v-model="query"
-      :placeholder="$t('placeholder.search-containers')"
-      open-on-focus
-      keep-first
-      expanded
-      :data="data"
-      @select="selected"
-    >
-      <template #default="{ option: item }">
-        <div class="media">
-          <div class="media-left">
-            <span class="icon is-small" :class="item.state">
-              <octicon:container-24 />
-            </span>
+  <div class="dropdown dropdown-open w-full">
+    <div class="input input-primary flex h-auto items-center">
+      <mdi:light-magnify class="flex h-8 w-8" />
+      <input
+        tabindex="0"
+        class="input input-ghost input-lg flex-1 px-1"
+        ref="input"
+        @keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
+        @keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
+        @keypress.enter="selected(data[selectedIndex])"
+        v-model="query"
+        :placeholder="$t('placeholder.search-containers')"
+      />
+      <mdi:keyboard-esc class="flex" />
+    </div>
+    <ul tabindex="0" class="menu dropdown-content rounded-box !relative mt-2 w-full bg-base-lighter p-2">
+      <li v-for="(item, index) in data">
+        <a
+          class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"
+          @click.prevent="selected(item)"
+          @mouseenter="selectedIndex = index"
+          :class="index === selectedIndex ? 'focus' : ''"
+        >
+          <div :class="{ 'text-primary': item.state === 'running' }">
+            <octicon:container-24 />
           </div>
-          <div class="media-content">{{ item.host }} / {{ item.name }}</div>
-          <div class="media-right">
-            <span
-              class="icon is-small column-icon"
-              @click.stop.prevent="addColumn(item)"
-              :title="$t('tooltip.pin-column')"
-            >
-              <cil:columns />
-            </span>
+          <div class="truncate">
+            <span class="font-light">{{ item.host }}</span> / {{ item.name }}
           </div>
-        </div>
-      </template>
-    </o-autocomplete>
+          <distance-time :date="item.created" class="ml-auto text-xs font-light" />
+          <a @click.stop.prevent="addColumn(item)" :title="$t('tooltip.pin-column')" class="hover:text-secondary">
+            <ic:sharp-keyboard-return v-if="index === selectedIndex" />
+            <cil:columns v-else />
+          </a>
+        </a>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
 import { useFuse } from "@vueuse/integrations/useFuse";
 
-const { maxResults: resultLimit = 20 } = defineProps<{
+const { maxResults: resultLimit = 5 } = defineProps<{
   maxResults?: number;
 }>();
 
 const close = defineEmit();
 
 const query = ref("");
-const autocomplete = ref<HTMLElement>();
+const input = ref<HTMLInputElement>();
+const selectedIndex = ref(0);
+
 const router = useRouter();
 const store = useContainerStore();
 const { containers } = storeToRefs(store);
@@ -62,7 +69,7 @@ const list = computed(() => {
 });
 
 const { results } = useFuse(query, list, {
-  fuseOptions: { keys: ["name"], includeScore: true },
+  fuseOptions: { keys: ["name", "host"], includeScore: true },
   resultLimit,
   matchAllWhenSearchEmpty: true,
 });
@@ -82,62 +89,28 @@ const data = computed(() => {
         return 0;
       }
     })
-    .map(({ item }) => item);
+    .map(({ item }) => item)
+    .slice(0, resultLimit);
 });
-watchOnce(autocomplete, () => autocomplete.value?.focus());
+
+watch(query, (data) => {
+  if (data.length > 0) {
+    selectedIndex.value = 0;
+  }
+});
+
+onMounted(() => input.value?.focus());
 
 function selected({ id }: { id: string }) {
   router.push({ name: "container-id", params: { id } });
+  query.value = "";
   close();
 }
-function addColumn(container: Container) {
+function addColumn(container: { id: string }) {
   store.appendActiveContainer(container);
+  query.value = "";
   close();
 }
 </script>
 
-<style lang="scss" scoped>
-.panel {
-  min-height: 400px;
-  width: 580px;
-}
-
-@media screen and (max-width: 768px) {
-  .panel {
-    min-height: 200px;
-    width: auto;
-    margin-left: 0.25rem !important;
-    margin-right: 0.25rem !important;
-  }
-}
-
-.running {
-  color: var(--primary-color);
-}
-
-.exited {
-  color: var(--scheme-main-ter);
-}
-
-.column-icon {
-  &:hover {
-    color: var(--secondary-color);
-  }
-}
-
-:deep(a.dropdown-item) {
-  padding-right: 1em;
-
-  .media-right {
-    visibility: hidden;
-  }
-
-  &:hover .media-right {
-    visibility: visible;
-  }
-}
-
-.icon {
-  vertical-align: middle;
-}
-</style>
+<style scoped lang="postcss"></style>
diff --git a/assets/components/InfiniteLoader.vue b/assets/components/InfiniteLoader.vue
index 167877a4..a23bc562 100644
--- a/assets/components/InfiniteLoader.vue
+++ b/assets/components/InfiniteLoader.vue
@@ -1,10 +1,6 @@
 <template>
-  <div ref="root" class="infinte-loader">
-    <div class="spinner" v-show="isLoading">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
-    </div>
+  <div ref="root" class="flex min-h-[1px] justify-center">
+    <span class="loading loading-bars loading-md mt-4 text-primary" v-show="isLoading"></span>
   </div>
 </template>
 
@@ -33,41 +29,3 @@ const observer = new IntersectionObserver(async (entries) => {
 onMounted(() => observer.observe(root.value!));
 onUnmounted(() => observer.disconnect());
 </script>
-
-<style scoped lang="scss">
-.infinte-loader {
-  min-height: 1px;
-}
-.spinner {
-  margin: 10px auto 0;
-  width: 70px;
-  text-align: center;
-
-  & > div {
-    width: 12px;
-    height: 12px;
-    background-color: var(--primary-color);
-    border-radius: 100%;
-    display: inline-block;
-    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
-  }
-  & .bounce1 {
-    animation-delay: -0.32s;
-  }
-
-  & .bounce2 {
-    animation-delay: -0.16s;
-  }
-}
-
-@keyframes sk-bouncedelay {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-</style>
diff --git a/assets/components/KeyShortcut.vue b/assets/components/KeyShortcut.vue
deleted file mode 100644
index 57e47b25..00000000
--- a/assets/components/KeyShortcut.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <span class="icon-text">
-    <span class="icon mx-0" v-if="modifiers.includes('shift')">
-      <carbon:mac-shift />
-    </span>
-    <span class="icon mx-0" v-if="modifiers.includes('meta')">
-      <ph:command v-if="isMac" />
-      <ph:control-bold v-else />
-    </span>
-    <kbd class="is-uppercase is-family-sans-serif ml-1">{{ char }}</kbd>
-  </span>
-</template>
-
-<script lang="ts">
-const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
-</script>
-<script lang="ts" setup>
-const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
-</script>
-
-<style scoped lang="scss">
-.icon {
-  width: unset;
-}
-</style>
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index f5fd5c48..5f5e4cd9 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,25 +1,24 @@
 <template>
-  <div class="columns is-1 is-variable is-mobile">
-    <div class="column is-narrow" v-if="showStd">
+  <div class="flex gap-x-2">
+    <div v-if="showStd">
       <log-std :std="logEntry.std"></log-std>
     </div>
-    <div class="column is-narrow" v-if="showTimestamp">
+    <div v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
-    <div class="column is-narrow is-flex">
+    <div class="flex">
       <log-level :level="logEntry.level"></log-level>
     </div>
-    <div class="column">
-      <ul class="fields" :class="{ expanded }" @click="expandToggle()">
-        <li v-for="(value, name) in validValues">
-          <span class="has-text-grey">{{ name }}=</span
-          ><span class="has-text-weight-bold" v-if="value === null">&lt;null&gt;</span>
+    <div>
+      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }" @click="expandToggle()">
+        <li v-for="(value, name) in validValues" class="inline-block">
+          <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
           <template v-else-if="Array.isArray(value)">
-            <span class="has-text-weight-bold" v-html="markSearch(JSON.stringify(value))"> </span>
+            <span class="font-bold" v-html="markSearch(JSON.stringify(value))"> </span>
           </template>
-          <span class="has-text-weight-bold" v-html="markSearch(value)" v-else></span>
+          <span class="font-bold" v-html="markSearch(value)" v-else></span>
         </li>
-        <li class="has-text-grey" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
+        <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
       <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
     </div>
@@ -42,19 +41,15 @@ const validValues = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="postcss" scoped>
+.text-light {
+  @apply text-base-content/70;
+}
 .fields {
-  display: inline-block;
-  list-style: none;
-
   &:hover {
-    cursor: pointer;
-
     &::after {
       content: "expand json";
-      color: var(--secondary-color);
-      display: inline-block;
-      margin-left: 0.5em;
+      @apply ml-2 inline-block text-secondary;
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     }
   }
@@ -64,13 +59,5 @@ const validValues = computed(() => {
       content: "collapse json";
     }
   }
-
-  li {
-    display: inline-block;
-
-    & + li {
-      margin-left: 1em;
-    }
-  }
 }
 </style>
diff --git a/assets/components/LogViewer/ContainerHealth.vue b/assets/components/LogViewer/ContainerHealth.vue
index 2f8c595a..e815ae7a 100644
--- a/assets/components/LogViewer/ContainerHealth.vue
+++ b/assets/components/LogViewer/ContainerHealth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="icon is-small health" :health="health" v-if="health" :title="health">
+  <div class="inline-flex h-4 w-4" :health="health" v-if="health" :title="health">
     <cil:check-circle v-if="health == 'healthy'" />
     <cil:x-circle v-else-if="health == 'unhealthy'" />
     <cil:circle v-else />
@@ -14,14 +14,12 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.health {
-  &[health="unhealthy"] {
-    color: var(--red-color);
-  }
+<style lang="postcss" scoped>
+[health="unhealthy"] {
+  @apply text-red;
+}
 
-  &[health="healthy"] {
-    color: var(--green-color);
-  }
+[health="healthy"] {
+  @apply text-green;
 }
 </style>
diff --git a/assets/components/LogViewer/ContainerPopup.vue b/assets/components/LogViewer/ContainerPopup.vue
index 3361244c..675dae88 100644
--- a/assets/components/LogViewer/ContainerPopup.vue
+++ b/assets/components/LogViewer/ContainerPopup.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <span class="has-text-weight-light"> RUNNING </span>
-    <span class="has-text-weight-semibold">
+    <span class="font-light capitalize"> RUNNING </span>
+    <span class="font-semibold">
       <distance-time :date="container.created" strict :suffix="false"></distance-time>
     </span>
   </div>
   <div>
-    <span class="has-text-weight-light"> LOAD </span>
-    <span class="has-text-weight-semibold"> {{ container.stat.cpu }}% </span>
+    <span class="font-light capitalize"> Load </span>
+    <span class="font-semibold"> {{ container.stat.cpu }}% </span>
   </div>
   <div>
-    <span class="has-text-weight-light"> MEM </span>
-    <span class="has-text-weight-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
+    <span class="font-light capitalize"> MEM </span>
+    <span class="font-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
   </div>
 </template>
 
@@ -22,5 +22,3 @@ const { container } = defineProps<{
   container: Container;
 }>();
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/assets/components/LogViewer/ContainerStat.vue b/assets/components/LogViewer/ContainerStat.vue
index 96b944fd..15572a5f 100644
--- a/assets/components/LogViewer/ContainerStat.vue
+++ b/assets/components/LogViewer/ContainerStat.vue
@@ -1,17 +1,7 @@
 <template>
-  <div class="is-size-7 is-uppercase columns is-marginless is-mobile is-vcentered" v-if="container.stat">
-    <stat-monitor
-      class="column is-narrow"
-      :data="memoryData"
-      label="mem"
-      :stat-value="formatBytes(unref(container.stat).memoryUsage)"
-    ></stat-monitor>
-    <stat-monitor
-      class="column is-narrow"
-      :data="cpuData"
-      label="load"
-      :stat-value="unref(container.stat).cpu + '%'"
-    ></stat-monitor>
+  <div class="flex gap-4" v-if="container.stat">
+    <stat-monitor :data="memoryData" label="mem" :stat-value="formatBytes(unref(container.stat).memoryUsage)" />
+    <stat-monitor :data="cpuData" label="load" :stat-value="unref(container.stat).cpu + '%'" />
   </div>
 </template>
 
@@ -47,24 +37,3 @@ const memoryData = computedWithControl(
   },
 );
 </script>
-
-<style lang="scss" scoped>
-.has-border {
-  border: 1px solid var(--primary-color);
-  border-radius: 3px;
-  padding: 1px 1px 0 1px;
-  display: flex;
-  overflow: hidden;
-  padding-top: 0.25em;
-}
-
-.has-background-body-color {
-  background-color: var(--body-background-color);
-}
-
-.is-top-left {
-  position: absolute;
-  top: 0;
-  left: 0.75em;
-}
-</style>
diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index 96c5c38e..2a21e672 100644
--- a/assets/components/LogViewer/ContainerTitle.vue
+++ b/assets/components/LogViewer/ContainerTitle.vue
@@ -1,19 +1,24 @@
 <template>
-  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <div class="column is-ellipsis">
-      <container-health :health="container.health" v-if="container.health"></container-health>
-      <div class="name">
-        <span v-if="config.hosts.length > 1" class="host has-text-weight-light is-hidden-mobile"
-          >{{ container.hostLabel }}<span class="has-text-weight-light mx-2">/</span></span
-        ><span class="">{{ container.name }}</span
-        ><span v-if="container.isSwarm" class="swarm-id is-hidden-mobile is-ellipsis">{{ container.swarmId }}</span>
+  <div class="flex flex-1 items-center gap-2 truncate">
+    <container-health :health="container.health" v-if="container.health"></container-health>
+    <div class="inline-flex font-mono text-sm">
+      <div v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
+        {{ container.hostLabel }}<span class="mx-2">/</span>
+      </div>
+      <div class="font-semibold">{{ container.name }}</div>
+      <div
+        class="mobile-hidden max-w-[1.5em] truncate transition-[max-width] hover:max-w-[400px]"
+        v-if="container.isSwarm"
+      >
+        {{ container.swarmId }}
       </div>
-      <tag class="is-hidden-mobile">{{ container.image.replace(/@sha.*/, "") }}</tag>
-      <span class="icon is-clickable" @click="togglePinnedContainer(container.storageKey)">
-        <carbon:star-filled v-if="pinned" />
-        <carbon:star v-else />
-      </span>
     </div>
+    <tag class="mobile-hidden font-mono" size="small">{{ container.image.replace(/@sha.*/, "") }}</tag>
+    <label class="swap swap-rotate">
+      <input type="checkbox" v-model="pinned" />
+      <carbon:star-filled class="swap-on" />
+      <carbon:star class="swap-off" />
+    </label>
   </div>
 </template>
 
@@ -22,29 +27,14 @@ import { Container } from "@/models/Container";
 import { type ComputedRef } from "vue";
 
 const container = inject("container") as ComputedRef<Container>;
-const pinned = computed(() => pinnedContainers.value.has(container.value.storageKey));
-</script>
-
-<style lang="scss" scoped>
-.icon {
-  vertical-align: middle;
-}
-
-.name {
-  display: inline-flex;
-  .swarm-id {
-    max-width: 1.5em;
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    transition: max-width 0.2s ease-in-out;
-    will-change: max-width;
-  }
-
-  &:hover {
-    .swarm-id {
-      max-width: 400px;
+const pinned = computed({
+  get: () => pinnedContainers.value.has(container.value.storageKey),
+  set: (value) => {
+    if (value) {
+      pinnedContainers.value.add(container.value.storageKey);
+    } else {
+      pinnedContainers.value.delete(container.value.storageKey);
     }
-  }
-}
-</style>
+  },
+});
+</script>
diff --git a/assets/components/LogViewer/DockerEventLogItem.vue b/assets/components/LogViewer/DockerEventLogItem.vue
index d7b4ea2c..cca3b0a9 100644
--- a/assets/components/LogViewer/DockerEventLogItem.vue
+++ b/assets/components/LogViewer/DockerEventLogItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="text" :data-event="logEntry.event" v-html="logEntry.message"></span>
+  <span class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></span>
 </template>
 <script lang="ts" setup>
 import { DockerEventLogEntry } from "@/models/LogEntry";
@@ -9,16 +9,11 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-span {
-  &[data-event="container-stopped"] {
-    color: #f14668;
-  }
-  &[data-event="container-started"] {
-    color: hsl(141, 53%, 53%);
-  }
-  &.text {
-    white-space: pre-wrap;
-  }
+<style lang="postcss" scoped>
+[data-event="container-stopped"] {
+  @apply text-red;
+}
+[data-event="container-started"] {
+  @apply text-green;
 }
 </style>
diff --git a/assets/components/LogViewer/FieldList.vue b/assets/components/LogViewer/FieldList.vue
index f547f677..1326aa8d 100644
--- a/assets/components/LogViewer/FieldList.vue
+++ b/assets/components/LogViewer/FieldList.vue
@@ -1,8 +1,8 @@
 <template>
-  <ul v-if="expanded" ref="root">
+  <ul v-if="expanded" ref="root" class="ml-8">
     <li v-for="(value, name) in fields">
       <template v-if="isObject(value)">
-        <span class="has-text-grey">{{ name }}=</span>
+        <span class="text-light">{{ name }}=</span>
         <field-list
           :fields="value"
           :parent-key="parentKey.concat(name)"
@@ -12,15 +12,15 @@
       </template>
       <template v-else-if="Array.isArray(value)">
         <a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
-        <span class="has-text-grey">{{ name }}=</span>[
-        <span class="has-text-weight-bold" v-for="(item, index) in value">
+        <span class="text-light">{{ name }}=</span>[
+        <span class="font-bold" v-for="(item, index) in value">
           <span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
         </span>
         ]
       </template>
       <template v-else>
         <a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
-        <span class="has-text-grey">{{ name }}=</span><span class="has-text-weight-bold" v-html="value"></span>
+        <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
       </template>
     </li>
   </ul>
@@ -68,8 +68,8 @@ function fieldIndex(field: string) {
 }
 </script>
 
-<style lang="scss" scoped>
-ul {
-  margin-left: 2em;
+<style scoped lang="postcss">
+.text-light {
+  @apply text-base-content/70;
 }
 </style>
diff --git a/assets/components/LogViewer/LogActionsToolbar.vue b/assets/components/LogViewer/LogActionsToolbar.vue
index 11d63d56..afb99d1a 100644
--- a/assets/components/LogViewer/LogActionsToolbar.vue
+++ b/assets/components/LogViewer/LogActionsToolbar.vue
@@ -1,114 +1,72 @@
 <template>
-  <dropdown-menu class="is-right">
-    <template #trigger>
-      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-        <span class="icon">
-          <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr" />
-          <carbon:circle-solid class="is-blue is-small" v-if="streamConfig.stdout" />
-        </span>
-      </button>
-    </template>
-    <a class="dropdown-item" @click="clear()">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <octicon:trash-24 />
-          </div>
-        </div>
-        <div class="level-right is-justify-content-space-between is-flex-grow-1">
-          <div class="level-item">{{ $t("toolbar.clear") }}</div>
-          <div class="level-item"><key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut></div>
-        </div>
-      </div>
-    </a>
-    <a class="dropdown-item" :href="`${base}/api/logs/download/${container.host}/${container.id}`">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <octicon:download-24 />
-          </div>
-        </div>
-        <div class="level-right">
-          <div class="level-item">{{ $t("toolbar.download") }}</div>
-        </div>
-      </div>
-    </a>
-    <hr class="dropdown-divider" />
-    <a class="dropdown-item" @click="showSearch = true">
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <mdi:light-magnify />
-          </div>
-        </div>
-        <div class="level-right is-justify-content-space-between is-flex-grow-1">
-          <div class="level-item">{{ $t("toolbar.search") }}</div>
-          <div class="level-item"><key-shortcut char="f"></key-shortcut></div>
-        </div>
-      </div>
-    </a>
-
-    <hr class="dropdown-divider" />
-    <a
-      class="dropdown-item"
-      @click="
-        streamConfig.stdout = true;
-        streamConfig.stderr = true;
-      "
-    >
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
+  <div class="dropdown dropdown-end dropdown-hover">
+    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
+      <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
+    </label>
+    <ul tabindex="0" class="menu dropdown-content rounded-box z-50 w-52 bg-base p-1 shadow">
+      <li>
+        <a @click.prevent="clear()">
+          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
+          <key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut>
+        </a>
+      </li>
+      <li>
+        <a :href="`${base}/api/logs/download/${container.host}/${container.id}`" download>
+          <octicon:download-24 /> {{ $t("toolbar.download") }}
+        </a>
+      </li>
+      <li>
+        <a @click.prevent="showSearch = true">
+          <mdi:light-magnify /> {{ $t("toolbar.search") }}
+          <key-shortcut char="f"></key-shortcut>
+        </a>
+      </li>
+      <li class="line"></li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = true;
+          "
+        >
+          <div class="flex h-4 w-4 gap-0.5">
             <template v-if="streamConfig.stderr && streamConfig.stdout">
-              <carbon:circle-solid class="is-red is-small" />
-              <carbon:circle-solid class="is-blue is-small" />
+              <carbon:circle-solid class="w-2 text-red" />
+              <carbon:circle-solid class="w-2 text-blue" />
             </template>
           </div>
-        </div>
-        <div class="level-right">
           {{ $t("toolbar.show-all") }}
-        </div>
-      </div>
-    </a>
-    <a
-      class="dropdown-item"
-      @click="
-        streamConfig.stdout = true;
-        streamConfig.stderr = false;
-      "
-    >
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <carbon:circle-solid class="is-blue is-small" v-if="!streamConfig.stderr && streamConfig.stdout" />
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = false;
+          "
+        >
+          <div class="flex h-4 w-4 flex-col gap-1">
+            <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
           </div>
-        </div>
-        <div class="level-right">
           {{ $t("toolbar.show", { std: "STDOUT" }) }}
-        </div>
-      </div>
-    </a>
-    <a
-      class="dropdown-item"
-      @click="
-        streamConfig.stdout = false;
-        streamConfig.stderr = true;
-      "
-    >
-      <div class="level is-justify-content-start">
-        <div class="level-left">
-          <div class="level-item">
-            <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr && !streamConfig.stdout" />
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = false;
+            streamConfig.stderr = true;
+          "
+        >
+          <div class="flex h-4 w-4 flex-col gap-1">
+            <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
           </div>
-        </div>
-        <div class="level-right">
-          <div class="level-item">
-            {{ $t("toolbar.show", { std: "STDERR" }) }}
-          </div>
-        </div>
-      </div>
-    </a>
-  </dropdown-menu>
+          {{ $t("toolbar.show", { std: "STDERR" }) }}
+        </a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -124,14 +82,12 @@ const container = inject("container") as ComputedRef<Container>;
 const streamConfig = inject("stream-config") as { stdout: boolean; stderr: boolean };
 </script>
 
-<style lang="scss" scoped>
-.level-left .level-item {
-  width: 2.2em;
-  align-items: center;
-  margin-right: 0.5em;
+<style scoped lang="postcss">
+li.line {
+  @apply h-px bg-base-content/20;
 }
 
-.is-small {
-  width: 0.6em;
+a {
+  @apply whitespace-nowrap;
 }
 </style>
diff --git a/assets/components/LogViewer/LogContainer.vue b/assets/components/LogViewer/LogContainer.vue
index 7b797121..00f1dec5 100644
--- a/assets/components/LogViewer/LogContainer.vue
+++ b/assets/components/LogViewer/LogContainer.vue
@@ -1,20 +1,14 @@
 <template>
   <scrollable-view :scrollable="scrollable" v-if="container">
     <template #header v-if="showTitle">
-      <div class="mr-0 columns is-mobile is-vcentered is-marginless has-boxshadow">
-        <div class="column is-clipped is-paddingless">
-          <container-title @close="$emit('close')" />
-        </div>
-        <div class="column is-narrow is-paddingless">
-          <container-stat />
-        </div>
+      <div class="mx-2 flex items-center gap-2">
+        <container-title @close="$emit('close')" />
+        <container-stat class="ml-auto" />
 
-        <div class="mr-2 column is-narrow is-paddingless is-hidden-mobile">
-          <log-actions-toolbar @clear="onClearClicked()" />
-        </div>
-        <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
-          <button class="delete is-medium" @click="close()"></button>
-        </div>
+        <log-actions-toolbar @clear="onClearClicked()" class="mobile-hidden" />
+        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
+          <mdi:close />
+        </a>
       </div>
     </template>
     <template #default="{ setLoading }">
@@ -61,18 +55,3 @@ onKeyStroke("k", (e) => {
   }
 });
 </script>
-<style lang="scss" scoped>
-button.delete {
-  background-color: var(--scheme-main-ter);
-  opacity: 0.6;
-
-  &:after,
-  &:before {
-    background-color: var(--text-color);
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/assets/components/LogViewer/LogDate.vue b/assets/components/LogViewer/LogDate.vue
index e324efce..1a7aecb7 100644
--- a/assets/components/LogViewer/LogDate.vue
+++ b/assets/components/LogViewer/LogDate.vue
@@ -1,19 +1,10 @@
 <template>
-  <date-time :date="date" class="date"></date-time>
+  <tag size="small">
+    <date-time :date="date" class="whitespace-nowrap text-[#258ccd]"></date-time>
+  </tag>
 </template>
 <script lang="ts" setup>
 defineProps<{
   date: Date;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.date {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 3px;
-  white-space: nowrap;
-  background-color: var(--scheme-main-ter);
-  color: #258ccd;
-}
-</style>
diff --git a/assets/components/LogViewer/LogLevel.vue b/assets/components/LogViewer/LogLevel.vue
index f73bb43b..94fc01c3 100644
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="level" :data-position="position"></div>
+  <div :data-level="level" :data-position="position" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg"></div>
 </template>
 <script lang="ts" setup>
 import { Position } from "@/models/LogEntry";
@@ -10,54 +10,45 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-div {
-  display: inline-block;
-  width: 0.7em;
-  height: 0.7em;
-  border-radius: 0.5em;
-  align-self: auto;
-  margin-top: 0.4em;
+<style lang="postcss" scoped>
+[data-position="start"] {
+  border-radius: 0.5em 0.5em 0 0;
+  height: 70%;
+  margin-bottom: -0.4em;
+  margin-top: auto;
+  align-self: flex-end;
+}
 
-  &[data-position="start"] {
-    border-radius: 0.5em 0.5em 0 0;
-    height: 70%;
-    margin-bottom: -0.2em;
-    margin-top: auto;
-    align-self: flex-end;
-  }
+[data-position="middle"] {
+  border-radius: 0;
+  height: auto;
+  margin: -0.4em 0;
+  align-self: stretch;
+}
 
-  &[data-position="middle"] {
-    border-radius: 0;
-    height: auto;
-    margin: -0.2em 0;
-    align-self: auto;
-  }
+[data-position="end"] {
+  border-radius: 0 0 0.5em 0.5em;
+  height: 70%;
+  margin-top: -0.4em;
+  align-self: flex-start;
+}
 
-  &[data-position="end"] {
-    border-radius: 0 0 0.5em 0.5em;
-    height: 70%;
-    margin-top: -0.2em;
-    align-self: flex-start;
-  }
+[data-level="debug"],
+[data-level="trace"] {
+  @apply bg-purple;
+}
 
-  &.debug,
-  &.trace {
-    background-color: var(--purple-color);
-  }
+[data-level="info"] {
+  @apply bg-green;
+}
 
-  &.info {
-    background-color: var(--green-color);
-  }
+[data-level="error"],
+[data-level="fatal"] {
+  @apply bg-red;
+}
 
-  &.error,
-  &.fatal {
-    background-color: var(--red-color);
-  }
-
-  &.warn,
-  &.warning {
-    background-color: var(--orange-color);
-  }
+[data-level="warn"],
+[data-level="warning"] {
+  @apply bg-orange;
 }
 </style>
diff --git a/assets/components/LogViewer/LogStd.vue b/assets/components/LogViewer/LogStd.vue
index d07020a1..067f1d23 100644
--- a/assets/components/LogViewer/LogStd.vue
+++ b/assets/components/LogViewer/LogStd.vue
@@ -12,14 +12,12 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.tag {
-  &[std="stdout"] {
-    color: var(--blue-color);
-  }
+<style lang="postcss" scoped>
+[std="stdout"] {
+  @apply text-blue;
+}
 
-  &[std="stderr"] {
-    color: var(--red-color);
-  }
+[std="stderr"] {
+  @apply text-red;
 }
 </style>
diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue
index 2d835ee6..1ec1a002 100644
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -1,27 +1,21 @@
 <template>
-  <ul class="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
+  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true }">
     <li
-      v-for="(item, index) in filtered"
+      v-for="item in filtered"
       :key="item.id"
       :data-key="item.id"
-      :class="{ selected: toRaw(item) === toRaw(lastSelectedItem) }"
+      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      class="flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30"
     >
-      <div class="line-options" v-show="isSearching()">
-        <dropdown-menu :class="{ 'is-last': index === filtered.length - 1 }" class="is-top minimal">
-          <a class="dropdown-item" @click="handleJumpLineSelected($event, item)" :href="`#${item.id}`">
-            <div class="level is-justify-content-start">
-              <div class="level-left">
-                <div class="level-item">
-                  <cil:find-in-page class="mr-4" />
-                </div>
-              </div>
-              <div class="level-right">
-                <div class="level-item">Jump to Context</div>
-              </div>
-            </div>
-          </a>
-        </dropdown-menu>
-      </div>
+      <a
+        class="btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus"
+        v-show="isSearching()"
+        data-tip="Jump to Context"
+        @click="handleJumpLineSelected($event, item)"
+        :href="`#${item.id}`"
+      >
+        <ic:sharp-find-in-page />
+      </a>
       <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
     </li>
   </ul>
@@ -64,9 +58,8 @@ watch(
   { immediate: true, flush: "post" },
 );
 </script>
-<style scoped lang="scss">
+<style scoped lang="postcss">
 .events {
-  padding: 1em 0;
   font-family:
     ui-monospace,
     SFMono-Regular,
@@ -77,41 +70,22 @@ watch(
     Menlo,
     monospace;
 
-  & > li {
-    display: flex;
-    word-wrap: break-word;
-    padding: 0.2em 1em;
-
+  > li {
     &:last-child {
-      scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
-
-    &:nth-child(odd) {
-      background-color: rgba(125, 125, 125, 0.08);
-    }
-
-    &.selected {
-      border: 1px var(--secondary-color) solid;
-    }
-
-    & > .line-options {
-      display: flex;
-      flex-direction: row-reverse;
-      margin-right: 1em;
-    }
   }
 
   &.small {
-    font-size: 60%;
+    @apply text-[0.7em];
   }
 
   &.medium {
-    font-size: 80%;
+    @apply text-[0.8em];
   }
 
   &.large {
-    font-size: 120%;
+    @apply text-lg;
   }
 }
 </style>
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index 13a2f2d3..2e1d887a 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -1,15 +1,9 @@
 <template>
-  <div class="columns is-1 is-variable is-mobile">
-    <div class="column is-narrow" v-if="showStd">
-      <log-std :std="logEntry.std"></log-std>
-    </div>
-    <div class="column is-narrow" v-if="showTimestamp">
-      <log-date :date="logEntry.date"></log-date>
-    </div>
-    <div class="column is-narrow is-flex">
-      <log-level :level="logEntry.level" :position="logEntry.position"></log-level>
-    </div>
-    <div class="text column" v-html="colorize(logEntry.message)"></div>
+  <div class="flex items-start gap-x-2">
+    <log-std :std="logEntry.std" v-if="showStd" />
+    <log-date :date="logEntry.date" v-if="showTimestamp" />
+    <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
+    <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -24,15 +18,3 @@ defineProps<{
 const { markSearch } = useSearchFilter();
 const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
 </script>
-
-<style lang="scss" scoped>
-.disable-wrap {
-  .text {
-    white-space: nowrap;
-  }
-}
-
-.text {
-  white-space: pre-wrap;
-}
-</style>
diff --git a/assets/components/LogViewer/SkippedEntriesLogItem.vue b/assets/components/LogViewer/SkippedEntriesLogItem.vue
index fe89ca9d..692e0c02 100644
--- a/assets/components/LogViewer/SkippedEntriesLogItem.vue
+++ b/assets/components/LogViewer/SkippedEntriesLogItem.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="is-flex-grow-1 has-text-centered my-4">
-    <div class="is-relative">
-      <zig-zag class="is-overlay mt-2"></zig-zag>
-      <span class="text is-relative py-2 px-4">{{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}</span>
+  <div class="my-4 flex-1 text-center">
+    <div class="relative">
+      <zig-zag class="absolute inset-0 mt-2"></zig-zag>
+      <span class="relative whitespace-pre-wrap bg-base px-4 py-2 font-bold">{{
+        $t("error.logs-skipped", { total: logEntry.totalSkipped })
+      }}</span>
     </div>
   </div>
 </template>
@@ -13,11 +15,3 @@ defineProps<{
   logEntry: SkippedLogsEntry;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.text {
-  font-weight: bold;
-  white-space: pre-wrap;
-  background-color: var(--body-background-color);
-}
-</style>
diff --git a/assets/components/LogViewer/StatMonitor.vue b/assets/components/LogViewer/StatMonitor.vue
index f0543edf..dbb292a8 100644
--- a/assets/components/LogViewer/StatMonitor.vue
+++ b/assets/components/LogViewer/StatMonitor.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="has-border has-boxshadow is-hidden-mobile">
+  <div class="relative hover:text-secondary" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
+    <div class="mobile-hidden flex overflow-hidden rounded-sm border border-primary px-px pb-px pt-1">
       <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
     </div>
-    <div class="has-background-body-color is-top-left">
-      <span class="has-text-weight-light">{{ label }}</span>
-      <span class="has-text-weight-bold">
+    <div class="inline-flex gap-1 rounded bg-base p-px text-xs lg:absolute lg:-left-0.5 lg:-top-2">
+      <div class="font-light uppercase">{{ label }}</div>
+      <div class="select-none font-bold">
         {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
-      </span>
+      </div>
     </div>
   </div>
 </template>
@@ -23,30 +23,3 @@ function onSelectedPoint(point: Point<unknown>) {
 
 let mouseOver = $ref(false);
 </script>
-
-<style lang="scss" scoped>
-.has-border {
-  border: 1px solid var(--primary-color);
-  border-radius: 3px;
-  padding: 1px 1px 0 1px;
-  display: flex;
-  overflow: hidden;
-  padding-top: 0.25em;
-}
-
-.has-background-body-color {
-  background-color: var(--body-background-color);
-}
-
-.host:hover span {
-  color: var(--secondary-color);
-}
-
-@media screen and (min-width: 768px) {
-  .is-top-left {
-    position: absolute;
-    top: 0;
-    left: 0.75em;
-  }
-}
-</style>
diff --git a/assets/components/LogViewer/StatSparkline.vue b/assets/components/LogViewer/StatSparkline.vue
index e0ae4eac..0300b469 100644
--- a/assets/components/LogViewer/StatSparkline.vue
+++ b/assets/components/LogViewer/StatSparkline.vue
@@ -1,7 +1,7 @@
 <template>
-  <svg :width="width" :height="height" @mousemove="onMove">
-    <path :d="path" class="area" />
-    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="line" />
+  <svg :width="width" :height="height" @mousemove="onMove" class="group">
+    <path :d="path" class="fill-primary" />
+    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="invisible stroke-secondary stroke-2 group-hover:visible" />
   </svg>
 </template>
 
@@ -42,19 +42,3 @@ function onMove(e: MouseEvent) {
   selectedPoint(point);
 }
 </script>
-
-<style scoped>
-:deep(.area) {
-  fill: var(--primary-color);
-}
-
-:deep(.line) {
-  stroke: var(--secondary-color);
-  stroke-width: 2;
-  display: none;
-}
-
-svg:hover :deep(.line) {
-  display: unset;
-}
-</style>
diff --git a/assets/components/LogViewer/ZigZag.vue b/assets/components/LogViewer/ZigZag.vue
index 6ad47115..4c7ec3c1 100644
--- a/assets/components/LogViewer/ZigZag.vue
+++ b/assets/components/LogViewer/ZigZag.vue
@@ -2,18 +2,10 @@
   <svg width="100%" height="8" class="zigzag">
     <defs>
       <pattern id="zigzag" x="0" y="0" width="30" height="8" patternUnits="userSpaceOnUse">
-        <line x1="0" y1="0" x2="15" y2="8" class="line" />
-        <line x1="15" y1="8" x2="30" y2="0" class="line" />
+        <line x1="0" y1="0" x2="15" y2="8" class="stroke-primary stroke-1" />
+        <line x1="15" y1="8" x2="30" y2="0" class="stroke-primary stroke-1" />
       </pattern>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#zigzag)"></rect>
   </svg>
 </template>
-
-<style lang="scss" scoped>
-.line {
-  stroke: var(--primary-color);
-  stroke-width: 1;
-  stroke-linecap: round;
-}
-</style>
diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
index 6fe7cb4a..3b6ecca3 100644
--- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
@@ -1,237 +1,110 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">This is a message.</div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">This is a message.</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#2\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><mark>test</mark> bar</div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><mark>test</mark> bar</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
-      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
-        <div data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
-          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
-              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
-                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
-                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
-                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
-                    </svg></div>
-                </div>
-                <div data-v-2e92daca=\\"\\" class=\\"level-right\\">
-                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-base-lighter/30\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
+      </svg></a>
+    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
-        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
+        <div class=\\"whitespace-nowrap text-[#258ccd]\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
       </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
-        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
-      </div>
-      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
+      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
     </div>
   </li>
 </ul>"
 `;
 
 exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div data-v-1cd63c6e=\\"\\" class=\\"infinte-loader\\">
-  <div data-v-1cd63c6e=\\"\\" class=\\"spinner\\" style=\\"display: none;\\">
-    <div data-v-1cd63c6e=\\"\\" class=\\"bounce1\\"></div>
-    <div data-v-1cd63c6e=\\"\\" class=\\"bounce2\\"></div>
-    <div data-v-1cd63c6e=\\"\\" class=\\"bounce3\\"></div>
-  </div>
-</div>
-
-<ul data-v-2e92daca=\\"\\" class=\\"events medium\\"></ul>"
+"<div class=\\"flex min-h-[1px] justify-center\\"><span class=\\"loading loading-bars loading-md mt-4 text-primary\\" style=\\"display: none;\\"></span></div>
+<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\"></ul>"
 `;
 
 exports[`<LogEventSource /> > should parse messages 1`] = `
diff --git a/assets/components/Popup.vue b/assets/components/Popup.vue
index 7dfc8288..91d257fc 100644
--- a/assets/components/Popup.vue
+++ b/assets/components/Popup.vue
@@ -1,12 +1,16 @@
 <template>
-  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="trigger"><slot></slot></div>
-  <Teleport to="body">
-    <Transition name="fade">
-      <div v-show="show && (delayedShow || glopbalShow)" class="content" ref="content">
+  <slot></slot>
+  <teleport to="body">
+    <transition name="fade">
+      <div
+        v-show="show && (delayedShow || glopbalShow)"
+        class="fixed z-50 rounded border border-secondary/50 bg-base-lighter p-4 shadow"
+        ref="content"
+      >
         <slot name="content"></slot>
       </div>
-    </Transition>
-  </Teleport>
+    </transition>
+  </teleport>
 </template>
 
 <script lang="ts" setup>
@@ -17,9 +21,8 @@ let show = ref(glopbalShow.value);
 let delayedShow = refDebounced(show, 1000);
 
 let content: HTMLElement | null = $ref(null);
-let trigger: HTMLElement | null = $ref(null);
 
-function onMouseEnter(e: MouseEvent) {
+const onMouseEnter = (e: Event) => {
   show.value = true;
   glopbalShow.value = true;
   if (e.target && content && e.target instanceof Element) {
@@ -30,22 +33,26 @@ function onMouseEnter(e: MouseEvent) {
     content.style.left = `${x}px`;
     content.style.top = `${y}px`;
   }
-}
+};
 
-function onMouseLeave() {
+const onMouseLeave = () => {
   show.value = false;
   glopbalShow.value = false;
-}
+};
+
+const el = useCurrentElement();
+useEventListener(() => el.value?.nextElementSibling, "mouseenter", onMouseEnter);
+useEventListener(() => el.value?.nextElementSibling, "mouseleave", onMouseLeave);
 </script>
 
-<style scoped>
-.content {
-  position: fixed;
-  z-index: 9999;
-  background: var(--scheme-main-ter);
-  border-radius: 0.5em;
-  padding: 1em;
-  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
-  border: 1px solid var(--border-color);
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
 }
 </style>
diff --git a/assets/components/ScrollProgress.vue b/assets/components/ScrollProgress.vue
index f4467538..17bdc599 100644
--- a/assets/components/ScrollProgress.vue
+++ b/assets/components/ScrollProgress.vue
@@ -1,18 +1,18 @@
 <template>
-  <transition name="fade">
-    <div class="scroll-progress" ref="root" v-show="!autoHide || show">
+  <transition name="fadeout">
+    <div class="pointer-events-none relative inline-block" ref="root" v-show="!autoHide || show">
       <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-        <circle r="44" cx="50" cy="50" />
+        <circle r="44" cx="50" cy="50" class="fill-base-darker stroke-primary" />
       </svg>
-      <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
+      <div class="absolute inset-0 flex items-center justify-center font-light">
         <template v-if="indeterminate">
-          <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
+          <div class="text-4xl">&#8734;</div>
         </template>
         <template v-else-if="!isNaN(scrollProgress)">
-          <span class="column is-narrow is-paddingless is-size-2">
+          <span class="text-4xl">
             {{ Math.ceil(scrollProgress * 100) }}
           </span>
-          <span class="column is-narrow is-paddingless"> % </span>
+          <span> % </span>
         </template>
       </div>
     </div>
@@ -54,36 +54,28 @@ watchPostEffect(() => {
   }
 });
 </script>
-<style scoped lang="scss">
-.scroll-progress {
-  display: inline-block;
-  position: relative;
-  pointer-events: none;
+<style scoped lang="postcss">
+svg {
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
+  margin-top: 5px;
+  &.indeterminate {
+    animation: 2s linear infinite svg-animation;
 
-  svg {
-    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
-    margin-top: 5px;
-    &.indeterminate {
-      animation: 2s linear infinite svg-animation;
-
-      circle {
-        animation: 1.4s ease-in-out infinite both circle-animation;
-      }
-    }
     circle {
-      fill: var(--scheme-main-ter);
-      fill-opacity: 0.8;
-      transition: stroke-dashoffset 250ms ease-out;
-      transform: rotate(-90deg);
-      transform-origin: 50% 50%;
-      stroke: var(--primary-color);
-      stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
-      stroke-dasharray: 276.32px 276.32px;
-      stroke-linecap: round;
-      stroke-width: 3;
-      will-change: stroke-dashoffset;
+      animation: 1.4s ease-in-out infinite both circle-animation;
     }
   }
+  circle {
+    fill-opacity: 0.75;
+    transition: stroke-dashoffset 250ms ease-out;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
+    stroke-dasharray: 276.32px 276.32px;
+    stroke-linecap: round;
+    stroke-width: 3;
+    will-change: stroke-dashoffset;
+  }
 }
 
 @keyframes svg-animation {
@@ -113,11 +105,11 @@ watchPostEffect(() => {
   }
 }
 
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+.fadeout-leave-active {
+  @apply transition-opacity;
 }
 
-.fade-leave-to {
+.fadeout-leave-to {
   opacity: 0;
 }
 </style>
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 6b633434..8bebae08 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -1,24 +1,27 @@
 <template>
-  <section :class="{ 'is-full-height-scrollable': scrollable }">
-    <header v-if="$slots.header">
+  <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
+    <header
+      v-if="$slots.header"
+      class="sticky top-[70px] z-[2] border-b border-base-content/10 bg-base py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
+    >
       <slot name="header"></slot>
     </header>
-    <main :data-scrolling="scrollable ? true : undefined">
-      <div class="is-scrollbar-progress is-hidden-mobile" v-show="paused">
-        <scroll-progress :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+    <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
+      <div class="invisible mr-28 text-right md:visible" v-show="paused">
+        <scroll-progress :indeterminate="loading" :auto-hide="!loading" class="z-2 !fixed top-16" />
       </div>
       <div ref="scrollableContent">
         <slot :setLoading="setLoading"></slot>
       </div>
 
-      <div ref="scrollObserver" class="is-scroll-observer"></div>
+      <div ref="scrollObserver" class="h-px"></div>
     </main>
 
-    <div class="is-scrollbar-notification">
+    <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="button has-boxshadow"
-          :class="hasMore ? 'has-more' : ''"
+          class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
+          :class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
           @click="scrollToBottom()"
           v-show="paused"
         >
@@ -71,106 +74,20 @@ function setLoading(value: boolean) {
   loading = value;
 }
 </script>
-<style scoped lang="scss">
-section {
-  display: flex;
-  flex-direction: column;
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
 
-  header {
-    position: sticky;
-    top: 0;
-    background: var(--body-background-color);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    z-index: 1;
-
-    @media screen and (max-width: 768px) {
-      top: 70px;
-    }
-  }
-
-  &.is-full-height-scrollable {
-    height: 100vh;
-    min-height: 0;
-  }
-
-  main {
-    flex: 1;
-    overflow: auto;
-    scroll-snap-type: y proximity;
-  }
-
-  .is-scrollbar-progress {
-    text-align: right;
-    margin-right: 110px;
-
-    .scroll-progress {
-      position: fixed;
-      top: 60px;
-      z-index: 2;
-    }
-  }
-
-  .is-scroll-observer {
-    height: 1px;
-  }
-
-  .is-scrollbar-notification {
-    text-align: right;
-    margin-right: 65px;
-
-    button {
-      position: fixed;
-      bottom: 30px;
-      background-color: var(--primary-color);
-      transition: background-color 0.24s ease-out;
-      border: none !important;
-      color: #eee;
-
-      &.has-more {
-        background-color: var(--secondary-color);
-        animation-name: bounce;
-        animation-duration: 1000ms;
-        animation-fill-mode: both;
-
-        color: #222;
-      }
-    }
-  }
-
-  @keyframes bounce {
-    0%,
-    20%,
-    50%,
-    80%,
-    100% {
-      transform: translateY(0);
-    }
-
-    40% {
-      transform: translateY(-30px);
-    }
-
-    60% {
-      transform: translateY(-15px);
-    }
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s ease-out !important;
-  }
-
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
 }
 </style>
 
 <style>
-@media screen and (max-width: 768px) {
-  .splitpanes__pane {
-    overflow: unset !important;
-  }
+.splitpanes__pane {
+  overflow: unset !important;
 }
 </style>
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index 624d0c07..3428ab15 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -1,23 +1,22 @@
 <template>
-  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="search">
-    <div class="column">
-      <p class="control has-icons-left">
-        <input
-          class="input"
-          type="text"
-          placeholder="Find / RegEx"
-          ref="input"
-          v-model="searchFilter"
-          @keyup.esc="resetSearch()"
-        />
-        <span class="icon is-left">
-          <mdi:light-magnify />
-        </span>
-      </p>
-    </div>
-    <div class="column is-1 has-text-centered">
-      <button class="delete is-medium" @click="resetSearch()"></button>
+  <div
+    class="fixed -right-px -top-px z-10 flex w-96 items-center gap-4 rounded-bl border border-secondary/20 bg-base-darker p-4 shadow"
+    v-show="showSearch"
+    v-if="search"
+  >
+    <div class="input input-primary flex h-auto items-center">
+      <mdi:light-magnify />
+      <input
+        class="input flex-1"
+        type="text"
+        placeholder="Find / RegEx"
+        ref="input"
+        v-model="searchFilter"
+        @keyup.esc="resetSearch()"
+      />
     </div>
+
+    <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
   </div>
 </template>
 
@@ -35,46 +34,3 @@ onKeyStroke("f", (e) => {
 
 onUnmounted(() => resetSearch());
 </script>
-
-<style lang="scss" scoped>
-.search {
-  width: 350px;
-  position: fixed;
-  padding: 10px;
-  background: var(--scheme-main-ter);
-  top: 0;
-  right: 0;
-  border-radius: 0 0 0 5px;
-  z-index: 10;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.24);
-
-  button.delete {
-    margin-left: 1em;
-    background-color: var(--scheme-main-ter);
-    opacity: 0.6;
-
-    &:after,
-    &:before {
-      background-color: var(--text-color);
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .icon {
-    padding: 10px 3px;
-  }
-
-  .input {
-    color: var(--body-color);
-
-    &::placeholder {
-      color: var(--border-color);
-    }
-  }
-}
-</style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index ccc0aed4..fdeede63 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -1,50 +1,51 @@
 <template>
-  <div v-if="ready">
-    <nav class="breadcrumb menu-label" aria-label="breadcrumbs">
-      <ul v-if="sessionHost">
-        <li>
-          <a href="#" @click.prevent="setHost(null)">{{ hosts[sessionHost].name }}</a>
+  <div v-if="ready" data-testid="side-menu">
+    <div class="breadcrumbs text-sm">
+      <ul>
+        <li><a @click.prevent="setHost(null)">Hosts</a></li>
+        <li v-if="sessionHost && hosts[sessionHost]">
+          {{ hosts[sessionHost].name }}
         </li>
       </ul>
-      <ul v-else>
-        <li>Hosts</li>
-      </ul>
-    </nav>
+    </div>
     <transition :name="sessionHost ? 'slide-left' : 'slide-right'" mode="out-in">
-      <ul class="menu-list" v-if="!sessionHost">
+      <ul class="menu p-0" v-if="!sessionHost">
         <li v-for="host in config.hosts">
-          <a @click.prevent="setHost(host.id)">{{ host.name }}</a>
+          <a @click.prevent="setHost(host.id)">
+            <ph:computer-tower />
+            {{ host.name }}
+          </a>
         </li>
       </ul>
-      <transition-group tag="ul" name="list" class="menu-list" v-else>
-        <li v-for="item in menuItems" :key="item.id" :class="item.state" :data-label="item.id">
-          <div class="menu-label mt-4 mb-3" v-if="isLabel(item)">
+      <transition-group tag="ul" name="list" class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
+        <li
+          v-for="item in menuItems"
+          :key="item.id"
+          :class="isLabel(item) ? 'menu-title' : item.state"
+          :data-testid="item.id"
+        >
+          <template v-if="isLabel(item)">
             {{ item.label }}
-          </div>
+          </template>
           <popup v-else>
             <router-link
               :to="{ name: 'container-id', params: { id: item.id } }"
-              active-class="is-active"
+              active-class="active-primary"
               :title="item.name"
             >
-              <div class="container is-flex is-align-items-center">
-                <div class="is-flex-grow-1 is-ellipsis">
-                  <span>{{ item.name }}</span
-                  ><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">{{ item.swarmId }}</span>
-                </div>
-                <div class="is-flex-shrink-1 is-flex icons">
-                  <div
-                    class="icon is-small pin"
-                    @click.stop.prevent="store.appendActiveContainer(item)"
-                    v-show="!activeContainersById[item.id]"
-                    :title="$t('tooltip.pin-column')"
-                  >
-                    <cil:columns />
-                  </div>
-
-                  <container-health :health="item.health"></container-health>
-                </div>
+              <div class="truncate">
+                {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
               </div>
+              <span
+                class="pin"
+                @click.stop.prevent="store.appendActiveContainer(item)"
+                v-show="!activeContainersById[item.id]"
+                :title="$t('tooltip.pin-column')"
+              >
+                <cil:columns />
+              </span>
+
+              <container-health :health="item.health"></container-health>
             </router-link>
             <template #content>
               <container-popup :container="item"></container-popup>
@@ -54,9 +55,10 @@
       </transition-group>
     </transition>
   </div>
-  <ul class="menu-list is-hidden-mobile has-light-opacity" v-else>
-    <li v-for="index in 7" class="my-4"><o-skeleton animated size="large" :key="index"></o-skeleton></li>
-  </ul>
+  <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
+    <div class="h-3 w-full rounded-full bg-base-content/50 opacity-50" v-for="_ in 9"></div>
+    <span class="sr-only">Loading...</span>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -104,7 +106,7 @@ const groupedContainers = computed(() =>
 
 type MenuLabel = { label: string; id: string; state: string };
 const pinnedLabel = { label: t("label.pinned"), id: "pinned", state: "label" } as MenuLabel;
-const allLabel = { label: t("label.containers"), id: "all", state: "label" } as MenuLabel;
+const allLabel = { label: t("label.containers"), id: "containers", state: "label" } as MenuLabel;
 
 function isLabel(item: Container | MenuLabel): item is MenuLabel {
   return (item as MenuLabel).label !== undefined;
@@ -138,35 +140,26 @@ const activeContainersById = computed(() =>
   ),
 );
 </script>
-<style scoped lang="scss">
-.has-light-opacity {
-  opacity: 0.5;
-}
-
-li.exited a,
-li.dead a {
-  color: #777;
-}
-
-.icons {
-  column-gap: 0.35em;
-  align-items: baseline;
-}
-a {
+<style scoped lang="postcss">
+.containers a {
+  @apply auto-cols-[auto_max-content];
   .pin {
     display: none;
 
     &:hover {
-      color: var(--secondary-color);
+      @apply text-secondary;
     }
   }
 
   &:hover {
     .pin {
-      display: block;
+      display: inline-block;
     }
   }
 }
+li.exited {
+  @apply opacity-50;
+}
 
 .slide-left-enter-active,
 .slide-left-leave-active,
@@ -177,22 +170,22 @@ a {
 
 .slide-left-enter-from {
   opacity: 0;
-  transform: translateX(100%);
+  transform: translateX(20px);
 }
 
 .slide-right-enter-from {
   opacity: 0;
-  transform: translateX(-100%);
+  transform: translateX(-20px);
 }
 
 .slide-left-leave-to {
   opacity: 0;
-  transform: translateX(-100%);
+  transform: translateX(-20px);
 }
 
 .slide-right-leave-to {
   opacity: 0;
-  transform: translateX(100%);
+  transform: translateX(20px);
 }
 
 .list-move,
diff --git a/assets/components/SidePanel.vue b/assets/components/SidePanel.vue
index b43a4a0a..c0968346 100644
--- a/assets/components/SidePanel.vue
+++ b/assets/components/SidePanel.vue
@@ -1,48 +1,40 @@
 <template>
-  <aside>
-    <div class="columns is-marginless">
-      <div class="column is-paddingless">
-        <h1>
-          <router-link :to="{ name: 'index' }">
-            <svg class="logo">
-              <use href="#logo"></use>
-            </svg>
-          </router-link>
+  <aside class="fixed h-screen w-[inherit] overflow-auto p-4" data-testid="navigation">
+    <h1>
+      <router-link :to="{ name: 'index' }">
+        <svg class="h-14 w-28 fill-secondary">
+          <use href="#logo"></use>
+        </svg>
+      </router-link>
 
-          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
-            {{ hostname }}
-          </small>
-        </h1>
-      </div>
-    </div>
-    <div class="columns is-marginless">
-      <div class="column is-narrow py-0 pl-0 pr-1">
-        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
-          <span class="icon">
-            <mdi:light-magnify />
-          </span>
-        </button>
-      </div>
-      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
-        <router-link
-          :to="{ name: 'settings' }"
-          active-class="is-active"
-          class="button is-rounded is-small"
-          :aria-label="$t('title.settings')"
-        >
-          <span class="icon">
-            <mdi:light-cog />
-          </span>
-        </router-link>
-      </div>
-      <div class="column is-narrow py-0 px-0" v-if="secured">
-        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
-          <span class="icon">
-            <mdi:light-logout />
-          </span>
-        </a>
-      </div>
+      <small class="mb-4 block text-xs font-light" v-if="hostname">
+        {{ hostname }}
+      </small>
+    </h1>
+
+    <div class="mt-4 flex gap-4">
+      <router-link
+        :to="{ name: 'settings' }"
+        :aria-label="$t('title.settings')"
+        data-testid="settings"
+        class="btn btn-circle btn-sm"
+      >
+        <mdi:light-cog />
+      </router-link>
+      <a :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured" class="btn btn-circle btn-sm">
+        <mdi:light-logout />
+      </a>
     </div>
+    <a
+      class="input input-sm mt-4 inline-flex cursor-pointer items-center gap-2 font-light hover:border-primary"
+      @click="$emit('search')"
+      :title="$t('tooltip.search')"
+    >
+      <mdi:light-magnify />
+      Search
+      <key-shortcut char="k"></key-shortcut>
+    </a>
+
     <side-menu class="mt-4"></side-menu>
   </aside>
 </template>
@@ -50,22 +42,3 @@
 <script lang="ts" setup>
 const { base, secured, hostname } = config;
 </script>
-<style scoped lang="scss">
-aside {
-  padding: 1em;
-  height: 100vh;
-  overflow: auto;
-  position: fixed;
-  width: inherit;
-
-  .is-hidden-mobile.is-active {
-    display: block !important;
-  }
-}
-
-.logo {
-  width: 122px;
-  height: 54px;
-  fill: var(--logo-color);
-}
-</style>
diff --git a/assets/components/common/DateTime.vue b/assets/components/common/DateTime.vue
index 23079aa0..8d691ebb 100644
--- a/assets/components/common/DateTime.vue
+++ b/assets/components/common/DateTime.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <time :datetime="date.toISOString()" class="is-hidden-mobile">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()" class="mobile-hidden">{{ dateStr }}</time>
     <time :datetime="date.toISOString()">{{ timeStr }}</time>
   </div>
 </template>
diff --git a/assets/components/common/Dropdown.vue b/assets/components/common/Dropdown.vue
new file mode 100644
index 00000000..c0f3d97a
--- /dev/null
+++ b/assets/components/common/Dropdown.vue
@@ -0,0 +1,44 @@
+<template>
+  <details class="dropdown" ref="details" v-on-click-outside="close">
+    <summary class="btn btn-primary flex-nowrap font-normal" v-bind="$attrs">
+      <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
+    </summary>
+    <ul class="menu dropdown-content rounded-box z-50 w-52 bg-base p-2 shadow">
+      <slot>
+        <li v-for="item in options">
+          <a @click="modelValue = item.value">
+            <mdi-light:check class="w-4" v-if="modelValue == item.value" />
+            <div v-else class="w-4"></div>
+            {{ item.label }}
+          </a>
+        </li>
+      </slot>
+    </ul>
+  </details>
+</template>
+
+<script lang="ts" setup>
+import { vOnClickOutside } from "@vueuse/components";
+type DropdownItem = {
+  label: string;
+  value: string;
+};
+const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
+const { modelValue } = defineModels<{
+  modelValue: string;
+}>();
+
+const values = computed(() =>
+  options.reduce(
+    (acc, curr) => {
+      acc[curr.value] = curr.label;
+      return acc;
+    },
+    {} as Record<string, string>,
+  ),
+);
+
+const details = ref<HTMLElement | null>(null);
+const close = () => details.value?.removeAttribute("open");
+watch(modelValue, () => close());
+</script>
diff --git a/assets/components/common/KeyShortcut.vue b/assets/components/common/KeyShortcut.vue
new file mode 100644
index 00000000..315ff839
--- /dev/null
+++ b/assets/components/common/KeyShortcut.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="inline-flex items-center">
+    <template v-if="modifiers.includes('shift')">
+      <carbon:mac-shift />
+    </template>
+    <template v-if="modifiers.includes('meta')">
+      <ph:command v-if="isMac" class="h-4 w-4" />
+      <ph:control-bold v-else class="h-4 w-4" />
+    </template>
+    <kbd class="uppercase">{{ char }}</kbd>
+  </div>
+</template>
+
+<script lang="ts">
+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+</script>
+<script lang="ts" setup>
+const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
+</script>
diff --git a/assets/components/common/MobileMenu.vue b/assets/components/common/MobileMenu.vue
index b4cb14e6..99a3d91e 100644
--- a/assets/components/common/MobileMenu.vue
+++ b/assets/components/common/MobileMenu.vue
@@ -1,88 +1,58 @@
 <template>
-  <aside>
-    <div class="columns is-marginless is-gapless is-mobile is-vcentered">
-      <div class="column is-narrow">
-        <router-link :to="{ name: 'index' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
-      </div>
+  <nav class="fixed top-0 z-10 w-full border-b border-base-content/20 bg-base p-2" data-testid="navigation">
+    <div class="flex items-center">
+      <router-link :to="{ name: 'index' }">
+        <svg class="h-14 w-28 fill-secondary">
+          <use href="#logo"></use>
+        </svg>
+      </router-link>
 
-      <div class="column is-narrow push-right">
-        <a
-          role="button"
-          class="navbar-burger burger is-hidden-tablet is-pulled-right"
-          @click="showNav = !showNav"
-          :class="{ 'is-active': showNav }"
-        >
-          <span></span> <span></span> <span></span>
+      <div class="ml-auto flex items-center gap-2">
+        <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
+          <mdi:light-magnify class="h-5 w-5" />
         </a>
+        <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
+          <input type="checkbox" v-model="show" />
+          <mdi:close class="swap-on" />
+          <mdi:hamburger-menu class="swap-off" />
+        </label>
       </div>
     </div>
 
-    <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
-      <div v-if="config.hosts.length > 1">
-        <o-dropdown v-model="sessionHost" aria-role="list">
-          <template #trigger>
-            <o-button variant="primary" type="button" size="small">
-              <span>{{ sessionHost ? hosts[sessionHost].name : "" }}</span>
-              <span class="icon">
-                <carbon:caret-down />
-              </span>
-            </o-button>
-          </template>
-
-          <o-dropdown-item :value="value.id" aria-role="listitem" v-for="value in config.hosts" :key="value">
-            <span>{{ value.name }}</span>
-          </o-dropdown-item>
-        </o-dropdown>
-      </div>
-
-      <div class="level-item has-text-centered">
-        <div>
-          <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
-            <span class="icon">
-              <mdi:light-magnify />
-            </span>
-          </button>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
-            <span class="icon">
-              <mdi:light-cog />
-            </span>
+    <transition name="fade">
+      <div v-show="show">
+        <div class="mt-4 flex items-center justify-center gap-2">
+          <dropdown
+            v-model="sessionHost"
+            :options="hosts"
+            defaultLabel="Hosts"
+            class="btn-sm"
+            v-if="config.hosts.length > 1"
+          />
+          <router-link :to="{ name: 'settings' }" class="btn btn-outline btn-sm">
+            <mdi:light-cog /> {{ $t("button.settings") }}
           </router-link>
-        </div>
-      </div>
-      <div class="level-item has-text-centered" v-if="secured">
-        <div>
-          <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
-            <span class="icon">
-              <mdi:light-logout />
-            </span>
+          <a class="btn btn-outline btn-sm" :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured">
+            <mdi:light-logout /> {{ $t("button.logout") }}
           </a>
         </div>
-      </div>
-    </div>
 
-    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">{{ $t("label.containers") }}</p>
-    <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
-      <li v-for="item in sortedContainers" :key="item.id">
-        <router-link
-          :to="{ name: 'container-id', params: { id: item.id } }"
-          active-class="is-active"
-          :title="item.name"
-        >
-          <div class="is-ellipsis">
-            {{ item.name }}
-          </div>
-        </router-link>
-      </li>
-    </ul>
-  </aside>
+        <ul class="menu">
+          <li class="menu-title">{{ $t("label.containers") }}</li>
+          <li v-for="item in sortedContainers" :key="item.id">
+            <router-link
+              :to="{ name: 'container-id', params: { id: item.id } }"
+              active-class="active-primary"
+              class="truncate"
+              :title="item.name"
+            >
+              {{ item.name }}
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </nav>
 </template>
 
 <script lang="ts" setup>
@@ -92,10 +62,10 @@ const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers } = storeToRefs(store);
 
-let showNav = $ref(false);
+const show = ref(false);
 
 watch(route, () => {
-  showNav = false;
+  show.value = false;
 });
 
 const sortedContainers = computed(() =>
@@ -112,59 +82,26 @@ const sortedContainers = computed(() =>
     }),
 );
 
-const hosts = computed(() =>
-  config.hosts.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, { name: string; id: string }>,
-  ),
-);
+const hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
 </script>
-<style scoped lang="scss">
-aside {
-  padding: 1em;
-  position: fixed;
-  left: 0;
-  right: 0;
-  background: var(--scheme-main-ter);
-  z-index: 10;
-  max-height: 100vh;
-  overflow: auto;
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
 
-  .level.is-hidden-mobile.is-active {
-    display: flex !important;
-  }
+.fade-enter-active .menu,
+.fade-leave-active .menu {
+  @apply transition-transform;
+}
 
-  .menu-label {
-    margin-top: 1em;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
 
-  .title {
-    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  }
-
-  .burger {
-    color: var(--body-color);
-  }
-
-  .is-hidden-mobile.is-active {
-    display: block !important;
-  }
-
-  .navbar-burger {
-    height: 2.35rem;
-  }
-
-  .logo {
-    width: 82px;
-    height: 36px;
-    fill: var(--logo-color);
-  }
-
-  .column.push-right {
-    margin-left: auto;
-  }
+.fade-enter-from .menu,
+.fade-leave-to .menu {
+  @apply -translate-y-2;
 }
 </style>
diff --git a/assets/components/common/Tag.vue b/assets/components/common/Tag.vue
index a7a399da..f98670bd 100644
--- a/assets/components/common/Tag.vue
+++ b/assets/components/common/Tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tag" :size="size">
+  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" :size="size">
     <slot></slot>
   </div>
 </template>
@@ -8,12 +8,8 @@
 const { size = undefined } = defineProps<{ size?: "small" | undefined }>();
 </script>
 
-<style scoped lang="scss">
-.tag {
-  background-color: var(--scheme-main-ter);
-  border: 1px solid var(--border-color);
-  &[size="small"] {
-    font-size: 0.61rem;
-  }
+<style scoped lang="postcss">
+[size="small"] {
+  @apply text-xs;
 }
 </style>
diff --git a/assets/components/common/Toggle.vue b/assets/components/common/Toggle.vue
new file mode 100644
index 00000000..9bf8295e
--- /dev/null
+++ b/assets/components/common/Toggle.vue
@@ -0,0 +1,19 @@
+<template>
+  <label class="label inline-flex cursor-pointer gap-4 font-normal">
+    <input
+      type="checkbox"
+      class="toggle toggle-primary hover:bg-primary-focus"
+      :checked="modelValue"
+      @click="toggle()"
+    />
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+const { modelValue } = defineModels<{
+  modelValue: boolean;
+}>();
+
+const toggle = useToggle(modelValue);
+</script>
diff --git a/assets/composables/storage.ts b/assets/composables/storage.ts
index 5af79812..9af7f5a7 100644
--- a/assets/composables/storage.ts
+++ b/assets/composables/storage.ts
@@ -13,11 +13,3 @@ export function persistentVisibleKeys(container: ComputedRef<Container>) {
 
 const DOZZLE_PINNED_CONTAINERS = "DOZZLE_PINNED_CONTAINERS";
 export const pinnedContainers = useStorage(DOZZLE_PINNED_CONTAINERS, new Set<string>());
-
-export function togglePinnedContainer(id: string) {
-  if (pinnedContainers.value.has(id)) {
-    pinnedContainers.value.delete(id);
-  } else {
-    pinnedContainers.value.add(id);
-  }
-}
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index aa37aa34..44653fff 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <main v-if="!authorizationNeeded">
+  <div v-if="!authorizationNeeded">
     <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
       <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
@@ -7,7 +7,7 @@
       </pane>
       <pane min-size="10">
         <splitpanes>
-          <pane class="has-min-height router-view">
+          <pane class="router-view min-h-screen">
             <router-view></router-view>
           </pane>
           <template v-if="!isMobile">
@@ -26,33 +26,43 @@
     </splitpanes>
     <button
       @click="collapse"
-      class="button is-small is-rounded"
-      :class="{ collapsed: collapseNav }"
-      id="hide-nav"
+      class="btn btn-circle fixed bottom-8 left-4"
+      :class="{ '-left-3': collapseNav }"
       v-if="!isMobile"
     >
-      <span class="icon ml-2" v-if="collapseNav">
-        <mdi:light-chevron-right />
-      </span>
-      <span class="icon" v-else>
-        <mdi:light-chevron-left />
-      </span>
+      <mdi:light-chevron-right v-if="collapseNav" />
+      <mdi:light-chevron-left v-else />
     </button>
-  </main>
+  </div>
+  <dialog ref="modal" class="modal items-start bg-white/20 backdrop:backdrop-blur-sm" @close="open = false">
+    <div class="modal-box max-w-2xl bg-transparent pt-20 shadow-none">
+      <FuzzySearchModal @close="open = false" v-if="open" />
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
 </template>
 
 <script lang="ts" setup>
 // @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
-import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
-
-const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
 
 const containerStore = useContainerStore();
 const { activeContainers } = storeToRefs(containerStore);
 
+const modal = ref<HTMLDialogElement>();
+const open = ref(false);
+
+watch(open, () => {
+  if (open.value) {
+    modal.value?.showModal();
+  } else {
+    modal.value?.close();
+  }
+});
+
 onKeyStroke("k", (e) => {
   if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
     showFuzzySearch();
@@ -61,14 +71,9 @@ onKeyStroke("k", (e) => {
 });
 
 function showFuzzySearch() {
-  oruga.modal.open({
-    // parent: this,
-    component: FuzzySearchModal,
-    animation: "false",
-    width: 600,
-    active: true,
-  });
+  open.value = true;
 }
+
 function collapse() {
   collapseNav.value = !collapseNav.value;
 }
@@ -79,14 +84,9 @@ function onResized(e: any) {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="postcss">
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
-  min-width: 3px;
-  background: var(--border-color);
-
-  &:hover {
-    background: var(--border-hover-color);
-  }
+  @apply min-w-[3px] bg-base-lighter hover:bg-secondary;
 }
 
 @media screen and (max-width: 768px) {
@@ -94,30 +94,4 @@ function onResized(e: any) {
     padding-top: 75px;
   }
 }
-
-.button.has-no-border {
-  border-color: transparent !important;
-}
-
-.has-min-height {
-  min-height: 100vh;
-}
-
-#hide-nav {
-  position: fixed;
-  left: 10px;
-  bottom: 10px;
-
-  &.collapsed {
-    left: -40px;
-    width: 60px;
-    padding-left: 40px;
-    color: var(--text-strong-color);
-    background: var(--scheme-main);
-
-    &:hover {
-      left: -25px;
-    }
-  }
-}
 </style>
diff --git a/assets/layouts/splash.vue b/assets/layouts/splash.vue
index a103f135..75b75fdb 100644
--- a/assets/layouts/splash.vue
+++ b/assets/layouts/splash.vue
@@ -1,9 +1,7 @@
 <template>
-  <main>
-    <router-view></router-view>
-  </main>
+  <div class="hero min-h-screen">
+    <div class="hero-content">
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
-
-<script lang="ts" setup></script>
-
-<style scoped lang="scss"></style>
diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 00000000..5345722b
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,108 @@
+@import "splitpanes/dist/splitpanes.css";
+
+@define-mixin light {
+  --base-lighter-color: 0 0% 100%;
+  --base-color: 0 0% 97%;
+  --base-darker-color: 0 0% 90%;
+  --base-content-color: 0 0% 21%;
+  --primary-color: 171 100% 41%;
+  --primary-focus-color: 171 100% 31%;
+  --secondary-color: 44 100% 77%;
+}
+
+@define-mixin dark {
+  --base-lighter-color: 0 0% 14%;
+  --base-color: 0 0% 7%;
+  --base-darker-color: 0 0% 4%;
+  --base-content-color: 0 0% 86%;
+  --primary-color: 171 100% 41%;
+  --primary-focus-color: 171 100% 31%;
+  --secondary-color: 44 100% 77%;
+  --secondary-focus-color: 44 100% 67%;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --p: var(--primary-color);
+    --pf: var(--primary-focus-color);
+    --pc: 0 0% 100%;
+    --s: var(--secondary-color);
+    --sf: var(--secondary-focus-color);
+    --sc: 0 0% 4%;
+    --b1: var(--base-lighter-color);
+    --b2: var(--base-color);
+    --b3: var(--base-darker-color);
+    --bc: var(--base-content-color);
+  }
+  html[data-theme="dark"] {
+    @mixin dark;
+  }
+  @media (prefers-color-scheme: dark) {
+    html {
+      @mixin dark;
+    }
+  }
+  html[data-theme="light"] {
+    @mixin light;
+  }
+  @media (prefers-color-scheme: light) {
+    html {
+      @mixin light;
+    }
+  }
+  @media screen and (max-device-width: 480px) {
+    body {
+      -webkit-text-size-adjust: 100%;
+    }
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  mark {
+    @apply inline-block rounded-sm bg-secondary;
+    animation: pops 200ms ease-out;
+  }
+
+  @keyframes pops {
+    0% {
+      transform: scale(1.5);
+    }
+    100% {
+      transform: scale(1.05);
+    }
+  }
+}
+
+@layer components {
+  .input {
+    @apply focus:outline-none;
+  }
+}
+
+@layer utilities {
+  @media (max-width: 768px) {
+    .mobile-hidden {
+      display: none;
+    }
+  }
+
+  .active-primary {
+    --n: var(--p);
+    --nc: var(--pc);
+    @apply active;
+  }
+}
diff --git a/assets/main.ts b/assets/main.ts
index 12a15404..3c0611f0 100644
--- a/assets/main.ts
+++ b/assets/main.ts
@@ -1,4 +1,5 @@
-import "./styles.scss";
+// import "./styles.scss";
+import "./main.css";
 import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";
 
diff --git a/assets/modules/oruga.ts b/assets/modules/oruga.ts
deleted file mode 100644
index 6653ea16..00000000
--- a/assets/modules/oruga.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type App } from "vue";
-import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, Modal, Config } from "@oruga-ui/oruga-next";
-import { bulmaConfig } from "@oruga-ui/theme-bulma";
-
-export const install = (app: App) => {
-  app
-    .use(Autocomplete)
-    .use(Button)
-    .use(Dropdown)
-    .use(Switch)
-    .use(Modal)
-    .use(Field)
-    .use(Skeleton)
-    .use(Config, bulmaConfig);
-};
diff --git a/assets/pages/[...all].vue b/assets/pages/[...all].vue
index d4d8d12b..d507ce1d 100644
--- a/assets/pages/[...all].vue
+++ b/assets/pages/[...all].vue
@@ -1,11 +1,8 @@
 <template>
-  <div class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">
-          404.
-          <small class="subtitle">{{ $t("error.page-not-found") }}</small>
-        </h1>
+  <div class="hero min-h-screen bg-base-200">
+    <div class="hero-content text-center">
+      <div class="max-w-md">
+        <p class="py-6 text-2xl font-bold">{{ $t("error.page-not-found") }}</p>
       </div>
     </div>
   </div>
diff --git a/assets/pages/container/[id].vue b/assets/pages/container/[id].vue
index 0a12028e..033f29be 100644
--- a/assets/pages/container/[id].vue
+++ b/assets/pages/container/[id].vue
@@ -1,10 +1,17 @@
 <template>
   <search></search>
-  <log-container :id="id" show-title :scrollable="activeContainers.length > 0" v-if="currentContainer"></log-container>
-  <div v-else-if="ready" class="notification is-warning is-light m-6">
-    <h1 class="title">
-      {{ $t("error.container-not-found") }}
-    </h1>
+  <log-container
+    :id="id"
+    :show-title="true"
+    :scrollable="activeContainers.length > 0"
+    v-if="currentContainer"
+  ></log-container>
+  <div v-else-if="ready" class="hero min-h-screen bg-base-200">
+    <div class="hero-content text-center">
+      <div class="max-w-md">
+        <p class="py-6 text-2xl font-bold">{{ $t("error.container-not-found") }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 8dec3eb9..785c25d0 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -1,52 +1,31 @@
 <template>
-  <div class="section tile is-ancestor">
-    <div class="tile is-parent">
-      <div class="tile is-child box">
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="title">{{ runningContainers.length }} / {{ containers.length }}</p>
-            <p class="heading">{{ $t("label.running") }} / {{ $t("label.total-containers") }}</p>
-          </div>
+  <div class="flex flex-col gap-16 px-8 pt-8">
+    <section>
+      <div class="stats grid bg-base-lighter shadow">
+        <div class="stat">
+          <div class="stat-value">{{ runningContainers.length }} / {{ containers.length }}</div>
+          <div class="stat-title">{{ $t("label.running") }} / {{ $t("label.total-containers") }}</div>
         </div>
-      </div>
-    </div>
-    <div class="tile is-parent">
-      <div class="tile is-child box">
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="title">{{ totalCpu }}%</p>
-            <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
-          </div>
+        <div class="stat">
+          <div class="stat-value">{{ totalCpu }}%</div>
+          <div class="stat-title">{{ $t("label.total-cpu-usage") }}</div>
         </div>
-      </div>
-    </div>
-    <div class="tile is-parent">
-      <div class="tile is-child box">
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="title">{{ formatBytes(totalMem) }}</p>
-            <p class="heading">{{ $t("label.total-mem-usage") }}</p>
-          </div>
+        <div class="stat">
+          <div class="stat-value">{{ formatBytes(totalMem) }}</div>
+          <div class="stat-title">{{ $t("label.total-mem-usage") }}</div>
         </div>
-      </div>
-    </div>
-    <div class="tile is-parent">
-      <div class="tile is-child box">
-        <div class="level-item has-text-centered">
-          <div>
-            <p class="title">{{ version }}</p>
-            <p class="heading">{{ $t("label.dozzle-version") }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 
-  <section class="section table-container">
-    <div class="box">
+        <div class="stat">
+          <div class="stat-value">{{ version }}</div>
+          <div class="stat-title">{{ $t("label.dozzle-version") }}</div>
+        </div>
+      </div>
+    </section>
+
+    <section>
       <container-table :containers="runningContainers"></container-table>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -87,58 +66,24 @@ watchEffect(() => {
   }
 });
 </script>
-<style lang="scss" scoped>
-.panel {
-  border: 1px solid var(--border-color);
-
-  .panel-block,
-  .panel-tabs {
-    border-color: var(--border-color);
-
-    .is-active {
-      border-color: var(--border-hover-color);
-    }
-
-    .name {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .status {
-      margin-left: auto;
-      white-space: nowrap;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .pb-0-is-mobile {
-    padding-bottom: 0 !important;
-  }
-
-  .pt-0-is-mobile {
-    padding-top: 0 !important;
-  }
-}
-
-.icon {
-  padding: 10px 3px;
-}
-
-.bar-chart {
-  height: 1.5em;
-  .bar-text {
-    font-size: 0.9em;
-    padding: 0 0.5em;
-  }
-}
-
+<style lang="postcss" scoped>
 :deep(tr td) {
   padding-top: 1em;
   padding-bottom: 1em;
 }
 
+.stat > div {
+  @apply text-center;
+}
+
+.stat-value {
+  @apply font-light;
+}
+
+.stat-title {
+  @apply font-light;
+}
+
 .section + .section {
   padding-top: 0;
 }
diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index cd0b7c3a..404e6fef 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -1,50 +1,39 @@
 <template>
-  <div class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container">
-        <section class="columns is-centered section">
-          <div class="column is-4">
-            <div class="card">
-              <div class="card-content">
-                <form action="" method="post" @submit.prevent="onLogin" ref="form">
-                  <div class="field">
-                    <label class="label">{{ $t("label.username") }}</label>
-                    <div class="control">
-                      <input
-                        class="input"
-                        type="text"
-                        name="username"
-                        autocomplete="username"
-                        v-model="username"
-                        autofocus
-                      />
-                    </div>
-                  </div>
-
-                  <div class="field">
-                    <label class="label">{{ $t("label.password") }}</label>
-                    <div class="control">
-                      <input
-                        class="input"
-                        type="password"
-                        name="password"
-                        autocomplete="current-password"
-                        v-model="password"
-                      />
-                    </div>
-                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
-                  </div>
-                  <div class="field is-grouped is-grouped-centered mt-5">
-                    <p class="control">
-                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
-                    </p>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
+  <div class="card w-96 flex-shrink-0 bg-base-lighter shadow-2xl">
+    <div class="card-body">
+      <form action="" method="post" @submit.prevent="onLogin" ref="form">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text"> {{ $t("label.username") }} </span>
+          </label>
+          <input
+            class="input input-bordered"
+            type="text"
+            name="username"
+            autocomplete="username"
+            v-model="username"
+            autofocus
+          />
+        </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Password</span>
+          </label>
+          <input
+            class="input input-bordered"
+            type="password"
+            name="password"
+            autocomplete="current-password"
+            v-model="password"
+          />
+        </div>
+        <label class="label text-red" v-if="error">
+          {{ $t("error.invalid-auth") }}
+        </label>
+        <div class="form-control mt-6">
+          <button class="btn btn-primary" type="submit">{{ $t("button.login") }}</button>
+        </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 440caab7..954739df 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <section class="section">
+  <div class="mt-10 flex flex-col gap-8 px-10">
+    <section>
       <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
+        <h2>{{ $t("settings.about") }}</h2>
       </div>
 
       <div>
@@ -14,120 +14,71 @@
       </div>
     </section>
 
-    <section class="section">
+    <section class="flex flex-col gap-4">
       <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
+        <h2>{{ $t("settings.display") }}</h2>
       </div>
 
-      <div class="item">
-        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
+      <div>
+        <toggle v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </toggle>
       </div>
-      <div class="item">
-        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
+      <div>
+        <toggle v-model="showTimestamp">{{ $t("settings.show-timesamps") }}</toggle>
       </div>
-      <div class="item">
-        <o-switch v-model="showStd"> {{ $t("settings.show-std") }} </o-switch>
+      <div>
+        <toggle v-model="showStd">{{ $t("settings.show-std") }}</toggle>
       </div>
 
-      <div class="item">
-        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
+      <div>
+        <toggle v-model="softWrap">{{ $t("settings.soft-wrap") }}</toggle>
       </div>
 
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="hourStyle" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ hourStyle }}</span>
-                    <span class="icon">
-                      <carbon:caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item :value="value" aria-role="listitem" v-for="value in ['auto', '12', '24']" :key="value">
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">
-            {{ $t("settings.12-24-format") }}
-          </div>
-        </div>
+      <div class="flex items-center gap-6">
+        <dropdown
+          v-model="hourStyle"
+          :options="[
+            { label: 'Auto', value: 'auto' },
+            { label: '12', value: '12' },
+            { label: '24', value: '24' },
+          ]"
+        />
+        {{ $t("settings.12-24-format") }}
       </div>
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="size" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ size }}</span>
-                    <span class="icon">
-                      <carbon:caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item
-                  :value="value"
-                  aria-role="listitem"
-                  v-for="value in ['small', 'medium', 'large']"
-                  :key="value"
-                >
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">{{ $t("settings.font-size") }}</div>
-        </div>
+      <div class="flex items-center gap-6">
+        <dropdown
+          v-model="size"
+          :options="[
+            { label: 'Small', value: 'small' },
+            { label: 'Medium', value: 'medium' },
+            { label: 'Large', value: 'large' },
+          ]"
+        />
+        {{ $t("settings.font-size") }}
       </div>
-      <div class="item">
-        <div class="columns is-vcentered">
-          <div class="column is-narrow">
-            <o-field>
-              <o-dropdown v-model="lightTheme" aria-role="list">
-                <template #trigger>
-                  <o-button variant="primary" type="button">
-                    <span class="is-capitalized">{{ lightTheme }}</span>
-                    <span class="icon">
-                      <carbon:caret-down />
-                    </span>
-                  </o-button>
-                </template>
-
-                <o-dropdown-item
-                  :value="value"
-                  aria-role="listitem"
-                  v-for="value in ['auto', 'dark', 'light']"
-                  :key="value"
-                >
-                  <span class="is-capitalized">{{ value }}</span>
-                </o-dropdown-item>
-              </o-dropdown>
-            </o-field>
-          </div>
-          <div class="column">{{ $t("settings.color-scheme") }}</div>
-        </div>
+      <div class="flex items-center gap-6">
+        <dropdown
+          v-model="lightTheme"
+          :options="[
+            { label: 'Auto', value: 'auto' },
+            { label: 'Dark', value: 'dark' },
+            { label: 'Light', value: 'light' },
+          ]"
+        />
+        {{ $t("settings.color-scheme") }}
       </div>
     </section>
-    <section class="section">
+    <section class="flex flex-col gap-2">
       <div class="has-underline">
-        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
+        <h2>{{ $t("settings.options") }}</h2>
+      </div>
+      <div>
+        <toggle v-model="search">
+          <div>{{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut></div>
+        </toggle>
       </div>
 
-      <div class="item">
-        <o-switch v-model="search">
-          <span>{{ $t("settings.search") }} <key-shortcut char="f"></key-shortcut></span>
-        </o-switch>
-      </div>
-
-      <div class="item">
-        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
+      <div>
+        <toggle v-model="showAllContainers">{{ $t("settings.show-stopped-containers") }}</toggle>
       </div>
     </section>
   </div>
@@ -174,35 +125,8 @@ async function fetchNextRelease() {
 
 fetchNextRelease();
 </script>
-<style lang="scss" scoped>
-.title {
-  color: var(--title-color);
-}
-
-a.next-release {
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.section {
-  padding: 1rem 1.5rem;
-}
-
+<style lang="postcss" scoped>
 .has-underline {
-  border-bottom: 1px solid var(--border-color);
-  padding: 1em 0px;
-  margin-bottom: 1em;
-}
-
-.item {
-  padding: 1em 0;
-}
-
-code {
-  border-radius: 4px;
-  background-color: #444;
+  @apply mb-4 border-b border-base-content/50 py-4;
 }
 </style>
diff --git a/assets/stores/container.ts b/assets/stores/container.ts
index 0c844690..60b0429c 100644
--- a/assets/stores/container.ts
+++ b/assets/stores/container.ts
@@ -93,8 +93,8 @@ export const useContainerStore = defineStore("container", () => {
   };
 
   const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
-  const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
-  const removeActiveContainer = ({ id }: Container) =>
+  const appendActiveContainer = ({ id }: { id: string }) => activeContainerIds.value.push(id);
+  const removeActiveContainer = ({ id }: { id: string }) =>
     activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
 
   return {
diff --git a/assets/styles.scss b/assets/styles.scss
deleted file mode 100644
index 636112fa..00000000
--- a/assets/styles.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-@charset "utf-8";
-@import "bulma/sass/utilities/initial-variables.sass";
-
-$body-background-color: var(--body-background-color);
-
-$scheme-main: var(--scheme-main);
-$scheme-main-bis: var(--scheme-main-bis);
-$scheme-main-ter: var(--scheme-main-ter);
-
-$border: var(--border-color);
-$border-hover: var(--border-hover-color);
-
-$menu-item-active-background-color: var(--menu-item-active-background-color);
-$menu-item-color: var(--menu-item-color);
-$menu-item-hover-background-color: var(--menu-item-hover-background-color);
-$menu-item-hover-color: var(--menu-item-hover-color);
-
-$text-strong: var(--text-strong-color);
-$text: var(--text-color);
-$text-light: var(--text-light-color);
-
-$panel-heading-background-color: var(--panel-heading-background-color);
-$panel-heading-color: var(--panel-heading-color);
-
-$link: $turquoise;
-$link-active: $grey-dark;
-$link-hover: $yellow;
-
-$dark-toolbar-color: rgba($black-bis, 0.7);
-$light-toolbar-color: rgba($grey-darker, 0.7);
-
-@import "bulma/bulma";
-@import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/button.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
-@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
-@import "splitpanes/dist/splitpanes.css";
-
-@mixin dark {
-  --scheme-main: #{$black};
-  --scheme-main-bis: #{$black-bis};
-  --scheme-main-ter: #{$black-ter};
-
-  --border-color: #{$grey-darker};
-  --border-hover-color: var(--secondary-color);
-  --logo-color: var(--secondary-color);
-
-  --primary-color: #{$turquoise};
-  --secondary-color: #{$yellow};
-
-  --body-background-color: #{$black-bis};
-  --action-toolbar-background-color: #{$dark-toolbar-color};
-  --body-color: #{$grey-lighter};
-
-  --menu-item-active-background-color: var(--primary-color);
-  --menu-item-color: hsl(0, 6%, 87%);
-  --menu-item-hover-background-color: #{$white-ter};
-  --menu-item-hover-color: #{$black-ter};
-
-  --panel-heading-background-color: var(--secondary-color);
-  --panel-heading-color: var(--scheme-main-bis);
-
-  --text-strong-color: #{$grey-lightest};
-  --text-color: #{$grey-lighter};
-  --text-light-color: #{$grey};
-}
-
-@mixin light {
-  --scheme-main: #{$white};
-  --scheme-main-bis: #{$white-bis};
-  --scheme-main-ter: #{$white-ter};
-
-  --border-color: #{$grey-lighter};
-  --border-hover-color: var(--secondary-color);
-  --logo-color: var(--secondary-color);
-
-  --primary-color: #{$turquoise};
-  --secondary-color: rgb(249 115 22);
-
-  --body-background-color: #{$white-bis};
-  --action-toolbar-background-color: #{$light-toolbar-color};
-  --body-color: #{$grey-darker};
-
-  --menu-item-active-background-color: var(--primary-color);
-  --menu-item-color: #{$grey-dark};
-  --menu-item-hover-background-color: #eee8e7;
-  --menu-item-hover-color: #{$black-ter};
-
-  --panel-heading-background-color: var(--secondary-color);
-  --panel-heading-color: var(--text-strong-color);
-
-  --text-strong-color: #{$grey-dark};
-  --text-color: #{$grey-darker};
-  --text-light-color: #{$grey};
-}
-
-[data-theme="dark"] {
-  @include dark;
-}
-
-[data-theme="light"] {
-  @include light;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    @include dark;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html {
-    @include light;
-  }
-}
-
-:root {
-  --green-color: #00b5ad;
-  --red-color: #f44336;
-  --purple-color: #9c27b0;
-  --orange-color: #ff9800;
-  --blue-color: #2196f3;
-}
-
-.is-red {
-  color: var(--red-color);
-}
-
-.is-green {
-  color: var(--green-color);
-}
-
-.is-purple {
-  color: var(--purple-color);
-}
-
-.is-orange {
-  color: var(--orange-color);
-}
-
-.is-blue {
-  color: var(--blue-color);
-}
-
-html {
-  overflow-x: unset;
-  overflow-y: unset;
-  scroll-snap-type: y proximity;
-}
-
-html.has-custom-scrollbars {
-  ::-webkit-scrollbar {
-    width: 8px;
-    display: content;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(128, 128, 128, 0.33);
-    outline: 1px solid slategrey;
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb:active {
-    background-color: #777;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background-color: rgba(64, 64, 64, 0.33);
-  }
-
-  section main {
-    scrollbar-color: #353535 transparent;
-    scrollbar-width: thin;
-  }
-}
-
-@media screen and (min-width: 770px) {
-  .splitpanes__pane {
-    overflow: unset;
-  }
-}
-
-@media screen and (max-device-width: 480px) {
-  body {
-    -webkit-text-size-adjust: 100%;
-  }
-}
-
-.splitpanes__splitter {
-  z-index: 99;
-}
-
-.is-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.modal {
-  z-index: 1000;
-  .modal-background {
-    backdrop-filter: blur(10px);
-  }
-}
-
-.button .button-wrapper > span {
-  display: contents;
-}
-
-.has-dropshadow {
-  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
-}
-
-.has-boxshadow {
-  box-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.1),
-    0 1px 2px -1px rgb(0 0 0 / 0.1);
-}
-
-mark {
-  border-radius: 2px;
-  background-color: var(--secondary-color);
-  animation: pops 200ms ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-
-.button.is-rounded:hover {
-  color: var(--text-strong-color);
-  background: var(--scheme-main-ter);
-}
-
-a {
-  transition: color 0.2s ease-in-out;
-}
diff --git a/docs/package.json b/docs/package.json
index 54e85b6a..6641bdc2 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,11 +3,11 @@
   "type": "module",
   "devDependencies": {
     "@netlify/functions": "^2.0.2",
-    "@unocss/preset-typography": "^0.55.7",
-    "@unocss/reset": "^0.55.7",
-    "@unocss/transformer-directives": "^0.55.7",
+    "@unocss/preset-typography": "^0.56.1",
+    "@unocss/reset": "^0.56.1",
+    "@unocss/transformer-directives": "^0.56.1",
     "dozzle": "workspace:*",
     "sitemap": "^7.1.1",
-    "unocss": "^0.55.7"
+    "unocss": "^0.56.1"
   }
 }
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index f62243e6..ed07a4f3 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -9,14 +9,14 @@ devDependencies:
     specifier: ^2.0.2
     version: 2.0.2
   '@unocss/preset-typography':
-    specifier: ^0.55.7
-    version: 0.55.7
+    specifier: ^0.56.1
+    version: 0.56.1
   '@unocss/reset':
-    specifier: ^0.55.7
-    version: 0.55.7
+    specifier: ^0.56.1
+    version: 0.56.1
   '@unocss/transformer-directives':
-    specifier: ^0.55.7
-    version: 0.55.7
+    specifier: ^0.56.1
+    version: 0.56.1
   dozzle:
     specifier: workspace:*
     version: link:..
@@ -24,8 +24,8 @@ devDependencies:
     specifier: ^7.1.1
     version: 7.1.1
   unocss:
-    specifier: ^0.55.7
-    version: 0.55.7(postcss@8.4.28)(vite@4.4.9)
+    specifier: ^0.56.1
+    version: 0.56.1(postcss@8.4.30)(vite@4.4.9)
 
 packages:
 
@@ -44,8 +44,8 @@ packages:
       find-up: 5.0.0
     dev: true
 
-  /@antfu/utils@0.7.5:
-    resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
+  /@antfu/utils@0.7.6:
+    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
     dev: true
 
   /@esbuild/android-arm64@0.18.20:
@@ -250,11 +250,11 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.9:
-    resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==}
+  /@iconify/utils@2.1.10:
+    resolution: {integrity: sha512-0/+5hxjzCZ9RoYpqxnOzbnpQyMdZRuHcMxPJeuX+x/aZkAAD/N4TajDjAPT7LpX+M0bfLExj/p0bbDkUfp0lrg==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.5
+      '@antfu/utils': 0.7.6
       '@iconify/types': 2.0.0
       debug: 4.3.4
       kolorist: 1.8.0
@@ -335,12 +335,12 @@ packages:
       fastq: 1.15.0
     dev: true
 
-  /@polka/url@1.0.0-next.21:
-    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+  /@polka/url@1.0.0-next.23:
+    resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==}
     dev: true
 
-  /@rollup/pluginutils@5.0.3:
-    resolution: {integrity: sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==}
+  /@rollup/pluginutils@5.0.4:
+    resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0
@@ -371,32 +371,32 @@ packages:
       '@types/node': 18.14.2
     dev: true
 
-  /@unocss/astro@0.55.7(vite@4.4.9):
-    resolution: {integrity: sha512-mw8r14ArxUQBVCCisAJlF/WsZb650iBsduD/lXMk56N/nQ3MMArCcn62kcAxgZSb5tfIOQGQu/tbR8hEcD8y2g==}
+  /@unocss/astro@0.56.1(vite@4.4.9):
+    resolution: {integrity: sha512-ivWm69J76DRwCiEFM75qR4WPMCC6nyOrUM5iQDTypwKbBX26XlXcYYCN3DLoQTmWdp5f2BubZXAg3KIdgVxrYg==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       vite:
         optional: true
     dependencies:
-      '@unocss/core': 0.55.7
-      '@unocss/reset': 0.55.7
-      '@unocss/vite': 0.55.7(vite@4.4.9)
+      '@unocss/core': 0.56.1
+      '@unocss/reset': 0.56.1
+      '@unocss/vite': 0.56.1(vite@4.4.9)
       vite: 4.4.9
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/cli@0.55.7:
-    resolution: {integrity: sha512-ZHX2SR2WQbKfcmgOOHjBLB3V57Ct76Zb76YULzBj2EVX43lX/YDCVG87n6ePDY7rOcjCAthjrFQYCLV5KVLKHg==}
+  /@unocss/cli@0.56.1:
+    resolution: {integrity: sha512-s7lRtPkNw7GXdej3uYKFgfyal3Bq0Ux9oJKQ3rV7ysvY5AMfHs+ayc1EC6vXsAunziJ39dloPrRY5cx1H7abkQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.3
-      '@unocss/config': 0.55.7
-      '@unocss/core': 0.55.7
-      '@unocss/preset-uno': 0.55.7
+      '@rollup/pluginutils': 5.0.4
+      '@unocss/config': 0.56.1
+      '@unocss/core': 0.56.1
+      '@unocss/preset-uno': 0.56.1
       cac: 6.7.14
       chokidar: 3.5.3
       colorette: 2.0.20
@@ -409,154 +409,167 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/config@0.55.7:
-    resolution: {integrity: sha512-+X6rPScyFEWbkZyCyM+HfoJhJNN+CEl2n2izWkm0kuDj3w9fY9B3f/0dsk+jmx/gJEI5Y797q9zspNMNDib1AA==}
+  /@unocss/config@0.56.1:
+    resolution: {integrity: sha512-ZwKWtbMfg38laUNwjERkiTo3JKCgpw+hZMBqbbr2N4Rhc1ZaT4EJyQmcc/+P05JoNNr+ueYMoCMOCOtn/wuheQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
       unconfig: 0.3.10
     dev: true
 
-  /@unocss/core@0.55.7:
-    resolution: {integrity: sha512-c+bWe844Xjlwc1EPwHj0+n3LpntJG7ELPbEOOxNIG+CQdcEX0l1G0rkM8+nKstJ9WJmgpf1HdJQLVMF62HXvhw==}
+  /@unocss/core@0.56.1:
+    resolution: {integrity: sha512-2qmb/+hQ2CXmIgSqaeL6Pw2reO2MxsZlLMFuu71J8T3+UKrkI9NAwkZ4sdb38EoOisVIr2lvE48uc44XBfaOdg==}
     dev: true
 
-  /@unocss/extractor-arbitrary-variants@0.55.7:
-    resolution: {integrity: sha512-imK2g/frlo5Ag0uVB+C/Psyo5+9AnqhoRAgYa6gyrQ/TJnrnwf+M3jFngU9evIMHw92vig1DGfPa2ZId901DwQ==}
+  /@unocss/extractor-arbitrary-variants@0.56.1:
+    resolution: {integrity: sha512-2vEcVwUTpC0yROjvKGjR3HSE8jaf1cwQqL+Ba5oP+Y4Vrjlf8hqvoSowgVT+wp/ecPH8z82xFNhS+XMOdgXpGA==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/inspector@0.55.7:
-    resolution: {integrity: sha512-N0mjZozDDyqx8Mh6C/ZlMTlDzGiq22sXY/hPRX55Cf44WZI4W/ZWajqAAp42B+lw2MN0k1FYEMIAwn9n+xgq/g==}
+  /@unocss/inspector@0.56.1:
+    resolution: {integrity: sha512-PJ3MEwOvUjLaiySPQQKlw0XgwpReNK7c+nDX0D8ZBmUyw3swSn8wSar2cCOLsKLRtKRRp4kz1brM/BaleyYyeg==}
     dependencies:
+      '@unocss/rule-utils': 0.56.1
       gzip-size: 6.0.0
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.55.7(postcss@8.4.28):
-    resolution: {integrity: sha512-53Z/yv/CNdlTqKZQ9gpYRoLZSuzQ28J0SDrGCdzwjLcvHG/FD7/x1S7yxE7cUp/4sjvLL15HSzkWq8vNy6SkwQ==}
+  /@unocss/postcss@0.56.1(postcss@8.4.30):
+    resolution: {integrity: sha512-8jUS5ynopvMbZmdUQhGv+lvKziuAPHHl9LaZzCJ4uHgPOwITNXWTi4dmNbytdYC3iYPQ++8eOph93VPCxdqVsw==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.55.7
-      '@unocss/core': 0.55.7
+      '@unocss/config': 0.56.1
+      '@unocss/core': 0.56.1
+      '@unocss/rule-utils': 0.56.1
       css-tree: 2.3.1
       fast-glob: 3.3.1
       magic-string: 0.30.3
-      postcss: 8.4.28
+      postcss: 8.4.30
     dev: true
 
-  /@unocss/preset-attributify@0.55.7:
-    resolution: {integrity: sha512-L1sNw3DyM4mymIm4DBTTTOllk8LmhYlWMgDlaAW2MYWygjqDCsp99wRKT2175Ya5xHYBA6XetMoBryZD23qJYQ==}
+  /@unocss/preset-attributify@0.56.1:
+    resolution: {integrity: sha512-z+riyM9Fl+aYReg3cgxDRrI52teOL6ebj1UkMOje5sXuhneEQobUkg3k4Oi9NGTdalO5PU/jwcYCNfVksMPWZg==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/preset-icons@0.55.7:
-    resolution: {integrity: sha512-JXLOHkyEKKAjLTqjAxYfhwln05WXilGg3jctkZWKpMNawPaonrGt3kZT12YMuMmOryxk7UcyKB0dtYc+p3QYvw==}
+  /@unocss/preset-icons@0.56.1:
+    resolution: {integrity: sha512-Jwyy7i39Hvt4gf+/vtlIcKucNP2y7IV5nF9KPuDnikho4xS/D24z3lbUclrscbH8XGfRcsUzGHI/y+8gD7zZjQ==}
     dependencies:
-      '@iconify/utils': 2.1.9
-      '@unocss/core': 0.55.7
+      '@iconify/utils': 2.1.10
+      '@unocss/core': 0.56.1
       ofetch: 1.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.55.7:
-    resolution: {integrity: sha512-ZCskE2uprjGkpQezEPM6KPMf84rIZEUNc1p2DxWVHaFUPRV24/JSNsO4PsKrQgNIb2dLQxzPNlMzQJI7ssdBXQ==}
+  /@unocss/preset-mini@0.56.1:
+    resolution: {integrity: sha512-hOujmUN5kiA7KCkH1mUFf3cStsa3WZTi3g/I91VQ8EM4S6R7aRvME7LBXlb38z68+pckoDLhOhbN7gSg2iZTjA==}
     dependencies:
-      '@unocss/core': 0.55.7
-      '@unocss/extractor-arbitrary-variants': 0.55.7
+      '@unocss/core': 0.56.1
+      '@unocss/extractor-arbitrary-variants': 0.56.1
+      '@unocss/rule-utils': 0.56.1
     dev: true
 
-  /@unocss/preset-tagify@0.55.7:
-    resolution: {integrity: sha512-aDsuN3a/ZirbCDKpFsue9tc8MHs3l0Rl81n2ZOdIrJoZW4YWyydMVl++cz/HERZW81ZySK8EJKwGBaMJMgsnHA==}
+  /@unocss/preset-tagify@0.56.1:
+    resolution: {integrity: sha512-cd1McbaEpoerduOt8dA6MOkVZQIutuF3dHyjrI/pXbDtoyzBWjT9MLEeV77Hlz3S09+9cqGZddBBkqo0WGsM0w==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/preset-typography@0.55.7:
-    resolution: {integrity: sha512-hLV4nsgsDIk66pt7Ej4NYUmaGtI2EfGb1h2yl5FmBtdtACrgPq+Skr2Br9Iq+Bj1QFhbsMOWLDdbojFQwBdH6A==}
+  /@unocss/preset-typography@0.56.1:
+    resolution: {integrity: sha512-3p+dWEtMDe8MSPbUZseS94OpdYbv/pMTs2K1NBysE5BjIEVlyxRNWcZ8FC6risAJ1U0Ouctb6BqP6IA8r9BiWQ==}
     dependencies:
-      '@unocss/core': 0.55.7
-      '@unocss/preset-mini': 0.55.7
+      '@unocss/core': 0.56.1
+      '@unocss/preset-mini': 0.56.1
     dev: true
 
-  /@unocss/preset-uno@0.55.7:
-    resolution: {integrity: sha512-z4pCxOv/OU1ARo++cvbijWNW2zy/EVTMqJXa+SEep9b99wFXPQE3gaPvLdURp/e5f1PoxVyPZ6JiBknbClSDuA==}
+  /@unocss/preset-uno@0.56.1:
+    resolution: {integrity: sha512-rNnjpmnfrP/1P462dyELBQHe5NDlFSrJevwjCpAOeFXdO0XCCULpHokuaovZYwesNvzzWu+cZequya38n5hkSw==}
     dependencies:
-      '@unocss/core': 0.55.7
-      '@unocss/preset-mini': 0.55.7
-      '@unocss/preset-wind': 0.55.7
+      '@unocss/core': 0.56.1
+      '@unocss/preset-mini': 0.56.1
+      '@unocss/preset-wind': 0.56.1
+      '@unocss/rule-utils': 0.56.1
     dev: true
 
-  /@unocss/preset-web-fonts@0.55.7:
-    resolution: {integrity: sha512-ygAz0540kdBapErW2BcObWfQT/6g0SpVUPYg92PPiZD57CZAvuNXiYTfFMRXd88QrBL1zIrZ6NrzY0NZ645H+w==}
+  /@unocss/preset-web-fonts@0.56.1:
+    resolution: {integrity: sha512-SO2ZjrcFSi02QgQT3UVUtIlZE59A92gB1pzmYTMGZhjhmxqq6aghvBKEC00LfnQ200MRtAawgiZ+5Xysi/XsGg==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
       ofetch: 1.3.3
     dev: true
 
-  /@unocss/preset-wind@0.55.7:
-    resolution: {integrity: sha512-vLi0mtYDnvx3uYtBR4fSCR52T59drTUp3XVAAqQTbhvRctnSWm65MWE4G+gqdt2qQ9fM4SVCsxLLaXuJkI2eqw==}
+  /@unocss/preset-wind@0.56.1:
+    resolution: {integrity: sha512-/fR0eYlmezu6R3wWvN5zVNAfOE6rcC1CsEZKH0SdwchMvNDjJNd0rmAechI2BnVBaa3++H2Cz+0AfCDEP8tsjg==}
     dependencies:
-      '@unocss/core': 0.55.7
-      '@unocss/preset-mini': 0.55.7
+      '@unocss/core': 0.56.1
+      '@unocss/preset-mini': 0.56.1
+      '@unocss/rule-utils': 0.56.1
     dev: true
 
-  /@unocss/reset@0.55.7:
-    resolution: {integrity: sha512-yvmLhxqUNgf6wue7IvhV/FdrQW9H9LF1Bmmhwwaiz2aV0E74aN4pbuYPZwNq3YafsQvNQ0UdtuXjddY4QMRCPw==}
+  /@unocss/reset@0.56.1:
+    resolution: {integrity: sha512-nfzLKv2W9Y3fZLny6lYTroa/YExczGYHsVPCBPGkVt0TrM0yDA+ZKOHbN93b5myY9hzJ3pHTEQmYFsFwzzr6Kg==}
     dev: true
 
-  /@unocss/scope@0.55.7:
-    resolution: {integrity: sha512-r0CaS1aSpcC37ztqOJ3qaWIzM6zwdlX8r0rib2vTvWTckw1J0ocVhjNkWRBM9kRWte006JhecdiZzXNHA40akg==}
-    dev: true
-
-  /@unocss/transformer-attributify-jsx-babel@0.55.7:
-    resolution: {integrity: sha512-xl5K/Zg7tLyI6Oee+xHgvBm0gSEviYdBDwaGC4O6cP9VXTBm6waz9NUU6CmmVYKh4dSeLQ1PKNboMeg2nFuJMw==}
+  /@unocss/rule-utils@0.56.1:
+    resolution: {integrity: sha512-mmmbx10eELAyhYZqBWlQFPOafnL1hHp2fo18rUbZLedvMJWds3Z23Q/u3VKEpJnCszNkr03BXVwscR5+ZdF4uw==}
+    engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.55.7:
-    resolution: {integrity: sha512-ZyUBc0wguBhd+nbIlcrSYpmzKtqBi+8BII8SK4lIB/Ol1wBboByPTjBENsQkxRyffp5K9VTuZZ/LamFgPGOWDg==}
-    dependencies:
-      '@unocss/core': 0.55.7
+  /@unocss/scope@0.56.1:
+    resolution: {integrity: sha512-qIq/JuibrVOAJw/TCUm54XwHRcDImgrb1abZVuaicFh6fjmpdOi/iglYxoFqXS5gusp0m2vNnOLbaBB4LrPf5Q==}
     dev: true
 
-  /@unocss/transformer-compile-class@0.55.7:
-    resolution: {integrity: sha512-tiYiT9EG4ucSBvMo+9Hv43GY0YvXQjfQCXDhDm3tcJyreMg6BRMO412eir54RBS+JAdNU0DUoITVYu+PkF7hLg==}
+  /@unocss/transformer-attributify-jsx-babel@0.56.1:
+    resolution: {integrity: sha512-8+l4tfifHiSnga3iaxqXfAMgEJG7yLphKPDSm6DHEMUqKeia9rn3V/bABx5KZxpMmnH6FoiYboJL4uf5W58a5Q==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/transformer-directives@0.55.7:
-    resolution: {integrity: sha512-xNmR40FssHWYJSmJv/9TQC2IdTyZPV8U3Iv/PIuke1zndMwMciclghEFiw0wSeRmhoRI7iFZck5EI/Bokyo7CQ==}
+  /@unocss/transformer-attributify-jsx@0.56.1:
+    resolution: {integrity: sha512-2dQ7immRBnZJQ9aU+VIiAbcFCycXq8yXG2RPd82Pl0tAV8f5DtLbbuTC5mzo5lGOhuXJ+/u+IpuL9xchjOV7WQ==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
+    dev: true
+
+  /@unocss/transformer-compile-class@0.56.1:
+    resolution: {integrity: sha512-v3ICzTWj3oQ1S6qkGzg/oyzrk05ZgdcvjYFSZlgBIu2iUJldBhO0+7ZMuDpniaT21GjJvukLwiWrOF4mYyJCyg==}
+    dependencies:
+      '@unocss/core': 0.56.1
+    dev: true
+
+  /@unocss/transformer-directives@0.56.1:
+    resolution: {integrity: sha512-Pwh+JUxxn8ECqpEWETeD38OON5Y2oYAOC1CFKAyXoK22J7f51THoS07z2rZpDNdQA2T/szxenNCdRt72/NJ/pg==}
+    dependencies:
+      '@unocss/core': 0.56.1
+      '@unocss/rule-utils': 0.56.1
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.55.7:
-    resolution: {integrity: sha512-uLyZ08XXVriUDenZCTGA3xGgMD3B9GVr6mSz002pDlLpQDi8FcMQTOGg8X4ViCGzS3l03S/+r+JY7kJTpMFa9w==}
+  /@unocss/transformer-variant-group@0.56.1:
+    resolution: {integrity: sha512-UwXNcW00R6MjHZajy8lmSfwWDwhnvd+rF9eRGfcJTEzWr+LtEmgw8SJBr7STCB4ZwRE37NIp4oLLl1jF8omGNg==}
     dependencies:
-      '@unocss/core': 0.55.7
+      '@unocss/core': 0.56.1
     dev: true
 
-  /@unocss/vite@0.55.7(vite@4.4.9):
-    resolution: {integrity: sha512-xmdyDnt9Ag4o7DGl22/P6MaB+HSjWOQw9qYYzIefSv3SVUvn3cEhIX/PCWqFp8Kts2HyvAoJLbZmygSf1XdZNQ==}
+  /@unocss/vite@0.56.1(vite@4.4.9):
+    resolution: {integrity: sha512-IztLc304zP2LYQMsP3yVHmLwXlLUgCY3q6Nkqw6Hpds7l5JXBsE7Q19DtNW+4nDOp9wvWhw7CjQLmoh8d+V0lQ==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.3
-      '@unocss/config': 0.55.7
-      '@unocss/core': 0.55.7
-      '@unocss/inspector': 0.55.7
-      '@unocss/scope': 0.55.7
-      '@unocss/transformer-directives': 0.55.7
+      '@rollup/pluginutils': 5.0.4
+      '@unocss/config': 0.56.1
+      '@unocss/core': 0.56.1
+      '@unocss/inspector': 0.56.1
+      '@unocss/scope': 0.56.1
+      '@unocss/transformer-directives': 0.56.1
       chokidar: 3.5.3
       fast-glob: 3.3.1
       magic-string: 0.30.3
@@ -815,8 +828,8 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /jiti@1.19.1:
-    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
+  /jiti@1.20.0:
+    resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
     hasBin: true
     dev: true
 
@@ -873,8 +886,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /mlly@1.4.0:
-    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
+  /mlly@1.4.2:
+    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
     dependencies:
       acorn: 8.10.0
       pathe: 1.1.1
@@ -973,12 +986,12 @@ packages:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.0
-      mlly: 1.4.0
+      mlly: 1.4.2
       pathe: 1.1.1
     dev: true
 
-  /postcss@8.4.28:
-    resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
+  /postcss@8.4.30:
+    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -1002,8 +1015,8 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
-  /rollup@3.28.1:
-    resolution: {integrity: sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==}
+  /rollup@3.29.2:
+    resolution: {integrity: sha512-CJouHoZ27v6siztc21eEQGo0kIcE5D1gVPA571ez0mMYb25LGYGKnVNXpEj5MGlepmDWGXNjDB5q7uNiPHC11A==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -1040,7 +1053,7 @@ packages:
     resolution: {integrity: sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==}
     engines: {node: '>= 10'}
     dependencies:
-      '@polka/url': 1.0.0-next.21
+      '@polka/url': 1.0.0-next.23
       mrmime: 1.0.1
       totalist: 3.0.1
     dev: true
@@ -1085,17 +1098,17 @@ packages:
   /unconfig@0.3.10:
     resolution: {integrity: sha512-tj317lhIq2iZF/NXrJnU1t2UaGUKKz1eL1sK2t63Oq66V9BxqvZV12m55fp/fpQJ+DDmVlLgo7cnLVOZkhlO/A==}
     dependencies:
-      '@antfu/utils': 0.7.5
+      '@antfu/utils': 0.7.6
       defu: 6.1.2
-      jiti: 1.19.1
-      mlly: 1.4.0
+      jiti: 1.20.0
+      mlly: 1.4.2
     dev: true
 
-  /unocss@0.55.7(postcss@8.4.28)(vite@4.4.9):
-    resolution: {integrity: sha512-3W9P7vj2EhSk/4oPCHBS0VgrwSf5zZL6Az1/XARVOpBnRJtCM2szFInYxHkMgt9pkZTsW8SFCuk/g+QIJ6A8tg==}
+  /unocss@0.56.1(postcss@8.4.30)(vite@4.4.9):
+    resolution: {integrity: sha512-jjkcyXfW90CUjN4tBV6SrHX9ifi5GQgcwAQlMRB0copJEW3ejM/nyZnRgNexaV7hi7Ao76XMVqCKbOC5B+IuOA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.55.7
+      '@unocss/webpack': 0.56.1
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       '@unocss/webpack':
@@ -1103,26 +1116,26 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.55.7(vite@4.4.9)
-      '@unocss/cli': 0.55.7
-      '@unocss/core': 0.55.7
-      '@unocss/extractor-arbitrary-variants': 0.55.7
-      '@unocss/postcss': 0.55.7(postcss@8.4.28)
-      '@unocss/preset-attributify': 0.55.7
-      '@unocss/preset-icons': 0.55.7
-      '@unocss/preset-mini': 0.55.7
-      '@unocss/preset-tagify': 0.55.7
-      '@unocss/preset-typography': 0.55.7
-      '@unocss/preset-uno': 0.55.7
-      '@unocss/preset-web-fonts': 0.55.7
-      '@unocss/preset-wind': 0.55.7
-      '@unocss/reset': 0.55.7
-      '@unocss/transformer-attributify-jsx': 0.55.7
-      '@unocss/transformer-attributify-jsx-babel': 0.55.7
-      '@unocss/transformer-compile-class': 0.55.7
-      '@unocss/transformer-directives': 0.55.7
-      '@unocss/transformer-variant-group': 0.55.7
-      '@unocss/vite': 0.55.7(vite@4.4.9)
+      '@unocss/astro': 0.56.1(vite@4.4.9)
+      '@unocss/cli': 0.56.1
+      '@unocss/core': 0.56.1
+      '@unocss/extractor-arbitrary-variants': 0.56.1
+      '@unocss/postcss': 0.56.1(postcss@8.4.30)
+      '@unocss/preset-attributify': 0.56.1
+      '@unocss/preset-icons': 0.56.1
+      '@unocss/preset-mini': 0.56.1
+      '@unocss/preset-tagify': 0.56.1
+      '@unocss/preset-typography': 0.56.1
+      '@unocss/preset-uno': 0.56.1
+      '@unocss/preset-web-fonts': 0.56.1
+      '@unocss/preset-wind': 0.56.1
+      '@unocss/reset': 0.56.1
+      '@unocss/transformer-attributify-jsx': 0.56.1
+      '@unocss/transformer-attributify-jsx-babel': 0.56.1
+      '@unocss/transformer-compile-class': 0.56.1
+      '@unocss/transformer-directives': 0.56.1
+      '@unocss/transformer-variant-group': 0.56.1
+      '@unocss/vite': 0.56.1(vite@4.4.9)
       vite: 4.4.9
     transitivePeerDependencies:
       - postcss
@@ -1163,8 +1176,8 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.28
-      rollup: 3.28.1
+      postcss: 8.4.30
+      rollup: 3.29.2
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
diff --git a/e2e/auth.spec.ts b/e2e/auth.spec.ts
index bdb23a81..c6df058e 100644
--- a/e2e/auth.spec.ts
+++ b/e2e/auth.spec.ts
@@ -4,6 +4,6 @@ test("authentication", async ({ page }) => {
   await page.goto("http://auth:8080/");
   await page.locator('input[name="username"]').fill("foo");
   await page.locator('input[name="password"]').fill("bar");
-  await page.getByRole("button", { name: "Login" }).click();
-  await expect(page.locator("[data-label=all].label")).toHaveText("Containers");
+  await page.locator('button[type="submit"]').click();
+  await expect(page.getByTestId("containers")).toHaveText("Containers");
 });
diff --git a/e2e/default.spec.ts b/e2e/default.spec.ts
index 78bd63ba..8bb98d83 100644
--- a/e2e/default.spec.ts
+++ b/e2e/default.spec.ts
@@ -16,7 +16,7 @@ test("has dashboard text", async ({ page }) => {
 });
 
 test("click on settings button", async ({ page }) => {
-  await page.getByRole("link", { name: "Settings" }).click();
+  await page.getByTestId("settings").click();
   await expect(page.getByRole("heading", { name: "About" })).toBeVisible();
 });
 
@@ -34,6 +34,6 @@ test.describe("es locale", () => {
   test.use({ locale: "es" });
 
   test("translated text", async ({ page }) => {
-    await expect(page.locator("[data-label=all].label")).toHaveText("Contenedores");
+    await expect(page.getByTestId("containers")).toHaveText("Contenedores");
   });
 });
diff --git a/e2e/remote.spec.ts b/e2e/remote.spec.ts
index 835ed414..3694eabc 100644
--- a/e2e/remote.spec.ts
+++ b/e2e/remote.spec.ts
@@ -9,7 +9,7 @@ test("has right title", async ({ page }) => {
 });
 
 test("select running container", async ({ page }) => {
-  await page.locator("ul.menu-list").getByRole("link", { name: "dozzle" }).click();
+  await page.getByTestId("side-menu").getByRole("link", { name: "dozzle" }).click();
   await expect(page).toHaveURL(/\/container/);
   await expect(page.getByText("Accepting connections")).toBeVisible();
 });
diff --git a/e2e/visual.spec.ts b/e2e/visual.spec.ts
index d26f721b..6150f2d0 100644
--- a/e2e/visual.spec.ts
+++ b/e2e/visual.spec.ts
@@ -5,14 +5,20 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe("default", () => {
-  test("homepage", async ({ page }) => {
-    await expect(page.locator("aside")).toHaveScreenshot({});
+  test("homepage", async ({ page, isMobile }) => {
+    if (isMobile) {
+      await page.getByTestId("hamburger").click();
+    }
+    await expect(page.getByTestId("navigation")).toHaveScreenshot();
   });
 });
 
 test.describe("dark", () => {
   test.use({ colorScheme: "dark" });
-  test("homepage", async ({ page }) => {
-    await expect(page.locator("aside")).toHaveScreenshot({});
+  test("homepage", async ({ page, isMobile }) => {
+    if (isMobile) {
+      await page.getByTestId("hamburger").click();
+    }
+    await expect(page.getByTestId("navigation")).toHaveScreenshot();
   });
 });
diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png
index e64154ff..8848f5af 100644
Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png and b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png differ
diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png
index 6a39d16d..558fd493 100644
Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png and b/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png differ
diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png
index 70e77a3f..4cf334c3 100644
Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png and b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png differ
diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png
index 8434a099..0fb5f2fd 100644
Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png and b/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png differ
diff --git a/locales/de.yml b/locales/de.yml
index cba9d1b2..eaa9edb8 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -36,6 +36,7 @@ title:
 button:
   logout: Ausloggen
   login: Anmeldung
+  settings: Einstellungen
 placeholder:
   search-containers: Suche Container (⌘ + k, ⌃k)
 settings:
@@ -54,6 +55,5 @@ settings:
   search: Aktiviere die Suche mit Dozzle mit
   using-version: Du verwendest Dozzle {version}.
   update-available: >-
-    Eine neue Version ist verfügbar! Aktualisiere auf <a href="{href}" class="next-release"
-    target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
+    Eine neue Version ist verfügbar! Aktualisiere auf <a href="{href}" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
   show-std: Zeige stdout und stderr Labels
diff --git a/locales/en.yml b/locales/en.yml
index cd2d4a33..15e0a552 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -37,6 +37,7 @@ title:
 button:
   logout: Logout
   login: Login
+  settings: Settings
 placeholder:
   search-containers: Search containers (⌘ + k, ⌃k)
 settings:
@@ -55,6 +56,5 @@ settings:
   search: Enable searching with Dozzle using
   using-version: You are using Dozzle {version}.
   update-available: >-
-    New version is available! Update to <a href="{href}" class="next-release"
-    target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
+    New version is available! Update to <a href="{href}" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
   show-std: Show stdout and stderr labels
diff --git a/locales/es.yml b/locales/es.yml
index ac1494bf..4df0f235 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -36,6 +36,7 @@ title:
 button:
   logout: Cerrar la sesión
   login: Iniciar sesión
+  settings: Configuración
 placeholder:
   search-containers: Buscar contenedores (⌘ + K, CTRL + K)
 settings:
@@ -55,5 +56,5 @@ settings:
   using-version: Estás usando Dozzle {version}.
   update-available: >-
     ¡La nueva versión está disponible! Actualizar a la
-    <a href="{href}" class="next-release" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
+    <a href="{href}" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
   show-std: Mostrar etiquetas de salida estándar y salida de error estándar
diff --git a/locales/pr.yml b/locales/pr.yml
index f4c50954..46618454 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -36,6 +36,7 @@ title:
 button:
   logout: Terminar sessão
   login: Iniciar sessão
+  settings: Configurações
 placeholder:
   search-containers: Pesquisar contentores (⌘ + K, CTRL + K)
 settings:
@@ -55,5 +56,5 @@ settings:
   using-version: Está a usar o Dozzle {version}.
   update-available: >-
     Está disponível uma nova versão! Actualização para
-    <a href="{href}" class="next-release" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
+    <a href="{href}" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
   show-std: Mostrar etiquetas de saída padrão e saída de erro padrão
diff --git a/locales/ru.yml b/locales/ru.yml
index bc476af5..15e231d2 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -36,6 +36,7 @@ title:
 button:
   logout: Выйти
   login: Войти
+  settings: Настройки
 placeholder:
   search-containers: Поиск контейнеров (⌘ + k, ⌃k)
 settings:
@@ -53,6 +54,5 @@ settings:
   search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете версию Dozzle {version}.
   update-available: >-
-    Доступна новая версия! Обновить до <a href="{href}" class="next-release"
-    target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
+    Доступна новая версия! Обновить до <a href="{href}" target="_blank" rel="noreferrer noopener">{nextVersion}</a>.
   show-std: Показывать метки stdout и stderr
diff --git a/locales/zh.yml b/locales/zh.yml
index 91fbfbf1..5d1e53b7 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -36,6 +36,7 @@ title:
 button:
   logout: 退出
   login: 登录
+  settings: 设置
 placeholder:
   search-containers: 搜索容器 (⌘ + k, ⌃k)
 settings:
@@ -53,6 +54,5 @@ settings:
   search: 使用Dozzle启用搜索
   using-version: 您正在使用Dozzle {version}。
   update-available: >-
-    新版本可用！更新到 <a href="{href}" class="next-release"
-    target="_blank" rel="noreferrer noopener">{nextVersion}</a>。
+    新版本可用！更新到 <a href="{href}" rel="noreferrer noopener">{nextVersion}</a>。
   show-std: 显示stdout和stderr标签
diff --git a/package.json b/package.json
index cf647970..f37553f3 100644
--- a/package.json
+++ b/package.json
@@ -34,33 +34,40 @@
   "@iconify-json/octicon": "^1.1.49",
   "@iconify-json/ph": "^1.1.6",
   "@intlify/unplugin-vue-i18n": "^1.2.0",
-  "@oruga-ui/oruga-next": "^0.6.0",
-  "@oruga-ui/theme-bulma": "^0.2.11",
+  "@vueuse/components": "^10.4.1",
   "@vueuse/core": "^10.4.1",
   "@vueuse/integrations": "^10.4.1",
+  "@vueuse/math": "^10.4.1",
   "@vueuse/router": "^10.4.1",
   "ansi-to-html": "^0.7.2",
-  "bulma": "^0.9.4",
+  "autoprefixer": "^10.4.16",
   "d3-array": "^3.2.4",
   "d3-ease": "^3.0.1",
   "d3-scale": "^4.0.2",
   "d3-selection": "^3.0.0",
   "d3-shape": "^3.2.0",
   "d3-transition": "^3.0.1",
+  "daisyui": "^3.7.7",
   "date-fns": "^2.30.0",
   "entities": "^4.5.0",
   "fuse.js": "^6.6.2",
   "lodash.debounce": "^4.0.8",
   "pinia": "^2.1.6",
-  "sass": "^1.67.0",
+  "postcss": "^8.4.30",
+  "postcss-mixins": "^9.0.4",
   "splitpanes": "^3.1.5",
+  "tailwindcss": "^3.3.3",
+  "vite": "4.4.9",
+  "vite-plugin-pages": "^0.31.0",
+  "vite-plugin-vue-layouts": "^0.8.0",
   "vue": "^3.3.4",
   "vue-i18n": "^9.4.1",
   "vue-router": "^4.2.4"
  },
  "devDependencies": {
+  "@iconify-json/ic": "^1.1.14",
   "@pinia/testing": "^0.1.3",
-  "@playwright/test": "^1.38.0",
+  "@playwright/test": "^1.38.1",
   "@types/d3-array": "^3.0.7",
   "@types/d3-ease": "^3.0.0",
   "@types/d3-scale": "^4.0.4",
@@ -68,7 +75,7 @@
   "@types/d3-shape": "^3.1.2",
   "@types/d3-transition": "^3.0.4",
   "@types/lodash.debounce": "^4.0.7",
-  "@types/node": "^20.6.2",
+  "@types/node": "^20.6.3",
   "@types/semver": "^7.5.2",
   "@vitejs/plugin-vue": "4.3.4",
   "@vue/compiler-sfc": "^3.3.4",
@@ -81,6 +88,7 @@
   "jsdom": "^22.1.0",
   "lint-staged": "^14.0.1",
   "prettier": "^3.0.3",
+  "prettier-plugin-tailwindcss": "^0.5.4",
   "simple-git-hooks": "^2.9.0",
   "ts-node": "^10.9.1",
   "typescript": "^5.2.2",
@@ -91,9 +99,9 @@
   "vite": "4.4.9",
   "vite-plugin-pages": "^0.31.0",
   "vite-plugin-vue-layouts": "^0.8.0",
-  "vitepress": "1.0.0-rc.14",
-  "vitest": "^0.34.4",
-  "vue-tsc": "^1.8.11"
+  "vitepress": "1.0.0-rc.15",
+  "vitest": "^0.34.5",
+  "vue-tsc": "^1.8.13"
  },
  "lint-staged": {
   "*.{js,vue,css,ts,html,md}": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eeadc75e..b8a1c166 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,27 +26,27 @@ dependencies:
   '@intlify/unplugin-vue-i18n':
     specifier: ^1.2.0
     version: 1.2.0(vue-i18n@9.4.1)
-  '@oruga-ui/oruga-next':
-    specifier: ^0.6.0
-    version: 0.6.0(vue@3.3.4)
-  '@oruga-ui/theme-bulma':
-    specifier: ^0.2.11
-    version: 0.2.11
+  '@vueuse/components':
+    specifier: ^10.4.1
+    version: 10.4.1(vue@3.3.4)
   '@vueuse/core':
     specifier: ^10.4.1
     version: 10.4.1(vue@3.3.4)
   '@vueuse/integrations':
     specifier: ^10.4.1
     version: 10.4.1(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4)
+  '@vueuse/math':
+    specifier: ^10.4.1
+    version: 10.4.1(vue@3.3.4)
   '@vueuse/router':
     specifier: ^10.4.1
     version: 10.4.1(vue-router@4.2.4)(vue@3.3.4)
   ansi-to-html:
     specifier: ^0.7.2
     version: 0.7.2
-  bulma:
-    specifier: ^0.9.4
-    version: 0.9.4
+  autoprefixer:
+    specifier: ^10.4.16
+    version: 10.4.16(postcss@8.4.30)
   d3-array:
     specifier: ^3.2.4
     version: 3.2.4
@@ -65,6 +65,9 @@ dependencies:
   d3-transition:
     specifier: ^3.0.1
     version: 3.0.1(d3-selection@3.0.0)
+  daisyui:
+    specifier: ^3.7.7
+    version: 3.7.7(ts-node@10.9.1)
   date-fns:
     specifier: ^2.30.0
     version: 2.30.0
@@ -80,12 +83,27 @@ dependencies:
   pinia:
     specifier: ^2.1.6
     version: 2.1.6(typescript@5.2.2)(vue@3.3.4)
-  sass:
-    specifier: ^1.67.0
-    version: 1.67.0
+  postcss:
+    specifier: ^8.4.30
+    version: 8.4.30
+  postcss-mixins:
+    specifier: ^9.0.4
+    version: 9.0.4(postcss@8.4.30)
   splitpanes:
     specifier: ^3.1.5
     version: 3.1.5
+  tailwindcss:
+    specifier: ^3.3.3
+    version: 3.3.3(ts-node@10.9.1)
+  vite:
+    specifier: 4.4.9
+    version: 4.4.9(@types/node@20.6.3)
+  vite-plugin-pages:
+    specifier: ^0.31.0
+    version: 0.31.0(@vue/compiler-sfc@3.3.4)(vite@4.4.9)
+  vite-plugin-vue-layouts:
+    specifier: ^0.8.0
+    version: 0.8.0(vite@4.4.9)(vue-router@4.2.4)(vue@3.3.4)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -97,12 +115,15 @@ dependencies:
     version: 4.2.4(vue@3.3.4)
 
 devDependencies:
+  '@iconify-json/ic':
+    specifier: ^1.1.14
+    version: 1.1.14
   '@pinia/testing':
     specifier: ^0.1.3
     version: 0.1.3(pinia@2.1.6)(vue@3.3.4)
   '@playwright/test':
-    specifier: ^1.38.0
-    version: 1.38.0
+    specifier: ^1.38.1
+    version: 1.38.1
   '@types/d3-array':
     specifier: ^3.0.7
     version: 3.0.7
@@ -125,8 +146,8 @@ devDependencies:
     specifier: ^4.0.7
     version: 4.0.7
   '@types/node':
-    specifier: ^20.6.2
-    version: 20.6.2
+    specifier: ^20.6.3
+    version: 20.6.3
   '@types/semver':
     specifier: ^7.5.2
     version: 7.5.2
@@ -163,12 +184,15 @@ devDependencies:
   prettier:
     specifier: ^3.0.3
     version: 3.0.3
+  prettier-plugin-tailwindcss:
+    specifier: ^0.5.4
+    version: 0.5.4(prettier@3.0.3)
   simple-git-hooks:
     specifier: ^2.9.0
     version: 2.9.0
   ts-node:
     specifier: ^10.9.1
-    version: 10.9.1(@types/node@20.6.2)(typescript@5.2.2)
+    version: 10.9.1(@types/node@20.6.3)(typescript@5.2.2)
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
@@ -184,161 +208,157 @@ devDependencies:
   unplugin-vue-macros:
     specifier: ^2.5.1
     version: 2.5.1(@vueuse/core@10.4.1)(vite@4.4.9)(vue@3.3.4)
-  vite:
-    specifier: 4.4.9
-    version: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
-  vite-plugin-pages:
-    specifier: ^0.31.0
-    version: 0.31.0(@vue/compiler-sfc@3.3.4)(vite@4.4.9)
-  vite-plugin-vue-layouts:
-    specifier: ^0.8.0
-    version: 0.8.0(vite@4.4.9)(vue-router@4.2.4)(vue@3.3.4)
   vitepress:
-    specifier: 1.0.0-rc.14
-    version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@20.6.2)(fuse.js@6.6.2)(sass@1.67.0)(search-insights@2.7.0)
+    specifier: 1.0.0-rc.15
+    version: 1.0.0-rc.15(@algolia/client-search@4.20.0)(@types/node@20.6.3)(fuse.js@6.6.2)(search-insights@2.8.2)
   vitest:
-    specifier: ^0.34.4
-    version: 0.34.4(jsdom@22.1.0)(sass@1.67.0)
+    specifier: ^0.34.5
+    version: 0.34.5(jsdom@22.1.0)
   vue-tsc:
-    specifier: ^1.8.11
-    version: 1.8.11(typescript@5.2.2)
+    specifier: ^1.8.13
+    version: 1.8.13(typescript@5.2.2)
 
 packages:
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0)
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
-      search-insights: 2.7.0
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      search-insights: 2.8.2
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1):
+  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
     resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
-      '@algolia/client-search': 4.19.1
-      algoliasearch: 4.19.1
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
+      '@algolia/client-search': 4.20.0
+      algoliasearch: 4.20.0
     dev: true
 
-  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1):
+  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
     resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/client-search': 4.19.1
-      algoliasearch: 4.19.1
+      '@algolia/client-search': 4.20.0
+      algoliasearch: 4.20.0
     dev: true
 
-  /@algolia/cache-browser-local-storage@4.19.1:
-    resolution: {integrity: sha512-FYAZWcGsFTTaSAwj9Std8UML3Bu8dyWDncM7Ls8g+58UOe4XYdlgzXWbrIgjaguP63pCCbMoExKr61B+ztK3tw==}
+  /@algolia/cache-browser-local-storage@4.20.0:
+    resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==}
     dependencies:
-      '@algolia/cache-common': 4.19.1
+      '@algolia/cache-common': 4.20.0
     dev: true
 
-  /@algolia/cache-common@4.19.1:
-    resolution: {integrity: sha512-XGghi3l0qA38HiqdoUY+wvGyBsGvKZ6U3vTiMBT4hArhP3fOGLXpIINgMiiGjTe4FVlTa5a/7Zf2bwlIHfRqqg==}
+  /@algolia/cache-common@4.20.0:
+    resolution: {integrity: sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==}
     dev: true
 
-  /@algolia/cache-in-memory@4.19.1:
-    resolution: {integrity: sha512-+PDWL+XALGvIginigzu8oU6eWw+o76Z8zHbBovWYcrtWOEtinbl7a7UTt3x3lthv+wNuFr/YD1Gf+B+A9V8n5w==}
+  /@algolia/cache-in-memory@4.20.0:
+    resolution: {integrity: sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==}
     dependencies:
-      '@algolia/cache-common': 4.19.1
+      '@algolia/cache-common': 4.20.0
     dev: true
 
-  /@algolia/client-account@4.19.1:
-    resolution: {integrity: sha512-Oy0ritA2k7AMxQ2JwNpfaEcgXEDgeyKu0V7E7xt/ZJRdXfEpZcwp9TOg4TJHC7Ia62gIeT2Y/ynzsxccPw92GA==}
+  /@algolia/client-account@4.20.0:
+    resolution: {integrity: sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==}
     dependencies:
-      '@algolia/client-common': 4.19.1
-      '@algolia/client-search': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/client-common': 4.20.0
+      '@algolia/client-search': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
-  /@algolia/client-analytics@4.19.1:
-    resolution: {integrity: sha512-5QCq2zmgdZLIQhHqwl55ZvKVpLM3DNWjFI4T+bHr3rGu23ew2bLO4YtyxaZeChmDb85jUdPDouDlCumGfk6wOg==}
+  /@algolia/client-analytics@4.20.0:
+    resolution: {integrity: sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==}
     dependencies:
-      '@algolia/client-common': 4.19.1
-      '@algolia/client-search': 4.19.1
-      '@algolia/requester-common': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/client-common': 4.20.0
+      '@algolia/client-search': 4.20.0
+      '@algolia/requester-common': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
-  /@algolia/client-common@4.19.1:
-    resolution: {integrity: sha512-3kAIVqTcPrjfS389KQvKzliC559x+BDRxtWamVJt8IVp7LGnjq+aVAXg4Xogkur1MUrScTZ59/AaUd5EdpyXgA==}
+  /@algolia/client-common@4.20.0:
+    resolution: {integrity: sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==}
     dependencies:
-      '@algolia/requester-common': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/requester-common': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
-  /@algolia/client-personalization@4.19.1:
-    resolution: {integrity: sha512-8CWz4/H5FA+krm9HMw2HUQenizC/DxUtsI5oYC0Jxxyce1vsr8cb1aEiSJArQT6IzMynrERif1RVWLac1m36xw==}
+  /@algolia/client-personalization@4.20.0:
+    resolution: {integrity: sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==}
     dependencies:
-      '@algolia/client-common': 4.19.1
-      '@algolia/requester-common': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/client-common': 4.20.0
+      '@algolia/requester-common': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
-  /@algolia/client-search@4.19.1:
-    resolution: {integrity: sha512-mBecfMFS4N+yK/p0ZbK53vrZbL6OtWMk8YmnOv1i0LXx4pelY8TFhqKoTit3NPVPwoSNN0vdSN9dTu1xr1XOVw==}
+  /@algolia/client-search@4.20.0:
+    resolution: {integrity: sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==}
     dependencies:
-      '@algolia/client-common': 4.19.1
-      '@algolia/requester-common': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/client-common': 4.20.0
+      '@algolia/requester-common': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
-  /@algolia/logger-common@4.19.1:
-    resolution: {integrity: sha512-i6pLPZW/+/YXKis8gpmSiNk1lOmYCmRI6+x6d2Qk1OdfvX051nRVdalRbEcVTpSQX6FQAoyeaui0cUfLYW5Elw==}
+  /@algolia/logger-common@4.20.0:
+    resolution: {integrity: sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==}
     dev: true
 
-  /@algolia/logger-console@4.19.1:
-    resolution: {integrity: sha512-jj72k9GKb9W0c7TyC3cuZtTr0CngLBLmc8trzZlXdfvQiigpUdvTi1KoWIb2ZMcRBG7Tl8hSb81zEY3zI2RlXg==}
+  /@algolia/logger-console@4.20.0:
+    resolution: {integrity: sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==}
     dependencies:
-      '@algolia/logger-common': 4.19.1
+      '@algolia/logger-common': 4.20.0
     dev: true
 
-  /@algolia/requester-browser-xhr@4.19.1:
-    resolution: {integrity: sha512-09K/+t7lptsweRTueHnSnmPqIxbHMowejAkn9XIcJMLdseS3zl8ObnS5GWea86mu3vy4+8H+ZBKkUN82Zsq/zg==}
+  /@algolia/requester-browser-xhr@4.20.0:
+    resolution: {integrity: sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==}
     dependencies:
-      '@algolia/requester-common': 4.19.1
+      '@algolia/requester-common': 4.20.0
     dev: true
 
-  /@algolia/requester-common@4.19.1:
-    resolution: {integrity: sha512-BisRkcWVxrDzF1YPhAckmi2CFYK+jdMT60q10d7z3PX+w6fPPukxHRnZwooiTUrzFe50UBmLItGizWHP5bDzVQ==}
+  /@algolia/requester-common@4.20.0:
+    resolution: {integrity: sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==}
     dev: true
 
-  /@algolia/requester-node-http@4.19.1:
-    resolution: {integrity: sha512-6DK52DHviBHTG2BK/Vv2GIlEw7i+vxm7ypZW0Z7vybGCNDeWzADx+/TmxjkES2h15+FZOqVf/Ja677gePsVItA==}
+  /@algolia/requester-node-http@4.20.0:
+    resolution: {integrity: sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==}
     dependencies:
-      '@algolia/requester-common': 4.19.1
+      '@algolia/requester-common': 4.20.0
     dev: true
 
-  /@algolia/transporter@4.19.1:
-    resolution: {integrity: sha512-nkpvPWbpuzxo1flEYqNIbGz7xhfhGOKGAZS7tzC+TELgEmi7z99qRyTfNSUlW7LZmB3ACdnqAo+9A9KFBENviQ==}
+  /@algolia/transporter@4.20.0:
+    resolution: {integrity: sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==}
     dependencies:
-      '@algolia/cache-common': 4.19.1
-      '@algolia/logger-common': 4.19.1
-      '@algolia/requester-common': 4.19.1
+      '@algolia/cache-common': 4.20.0
+      '@algolia/logger-common': 4.20.0
+      '@algolia/requester-common': 4.20.0
     dev: true
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -419,17 +439,16 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
-    dev: true
 
   /@docsearch/css@3.5.2:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
-      preact: 10.15.1
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2)
+      preact: 10.17.1
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -438,7 +457,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -455,11 +474,11 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)(search-insights@2.7.0)
-      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.19.1)(algoliasearch@4.19.1)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
       '@docsearch/css': 3.5.2
-      algoliasearch: 4.19.1
-      search-insights: 2.7.0
+      algoliasearch: 4.20.0
+      search-insights: 2.8.2
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -470,7 +489,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.18.19:
@@ -479,7 +497,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.18.19:
@@ -488,7 +505,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.18.19:
@@ -497,7 +513,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.18.19:
@@ -506,7 +521,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.18.19:
@@ -515,7 +529,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.18.19:
@@ -524,7 +537,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.18.19:
@@ -533,7 +545,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.18.19:
@@ -542,7 +553,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.18.19:
@@ -551,7 +561,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.18.19:
@@ -560,7 +569,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.18.19:
@@ -569,7 +577,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.18.19:
@@ -578,7 +585,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.18.19:
@@ -587,7 +593,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.18.19:
@@ -596,7 +601,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.18.19:
@@ -605,7 +609,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.18.19:
@@ -614,7 +617,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.18.19:
@@ -623,7 +625,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.18.19:
@@ -632,7 +633,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.18.19:
@@ -641,7 +641,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.18.19:
@@ -650,7 +649,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.18.19:
@@ -659,7 +657,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@iconify-json/carbon@1.1.21:
@@ -674,6 +671,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: false
 
+  /@iconify-json/ic@1.1.14:
+    resolution: {integrity: sha512-vbATa9uwb9pIsRWQ+iXObQCgLTePk/0vo4shBr3Td0GnTjsAU/7VUGTkrZFVf5vpgiG6OsXkcKMPzBPvt966sg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/mdi-light@1.1.7:
     resolution: {integrity: sha512-vzG+1gCku2lVKKMXjT2U8ZFZXPJd2UASblAQki7T6RcuXz/67Q4KtLk+MwXgiyBIDwVOacKYsMfm6NmiTVdZFA==}
     dependencies:
@@ -798,26 +801,37 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /@jest/schemas@29.6.0:
-    resolution: {integrity: sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==}
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@sinclair/typebox': 0.27.8
     dev: true
 
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.18
+    dev: false
+
   /@jridgewell/resolve-uri@3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
-    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: false
 
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
@@ -827,14 +841,12 @@ packages:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@jsdevtools/ez-spawn@3.0.4:
     resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==}
@@ -868,20 +880,6 @@ packages:
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
     dev: true
 
-  /@oruga-ui/oruga-next@0.6.0(vue@3.3.4):
-    resolution: {integrity: sha512-M1Y5PgCWBUDmQGH74cgzrp3vKaRFdHVtGNr0DwejeJGScB7Q6jodW4xgCz6K4hajLgHW6zxz/3ukpC4ZczlfaQ==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      vue: 3.3.4
-    dev: false
-
-  /@oruga-ui/theme-bulma@0.2.11:
-    resolution: {integrity: sha512-yMYNTWDNZQ0qyzAlWVyvEO/ZDRjRIyPDTf58IL+OVJuVCsq1Nn/4nFltemuQA1foL6KpsqXMFT9pBTf4wQHMPw==}
-    dependencies:
-      bulma: 0.9.4
-    dev: false
-
   /@pinia/testing@0.1.3(pinia@2.1.6)(vue@3.3.4):
     resolution: {integrity: sha512-D2Ds2s69kKFaRf2KCcP1NhNZEg5+we59aRyQalwRm7ygWfLM25nDH66267U3hNvRUOTx8ofL24GzodZkOmB5xw==}
     peerDependencies:
@@ -894,12 +892,12 @@ packages:
       - vue
     dev: true
 
-  /@playwright/test@1.38.0:
-    resolution: {integrity: sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==}
+  /@playwright/test@1.38.1:
+    resolution: {integrity: sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright: 1.38.0
+      playwright: 1.38.1
     dev: true
 
   /@polka/url@1.0.0-next.21:
@@ -959,28 +957,24 @@ packages:
 
   /@tsconfig/node10@1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    dev: true
 
   /@tsconfig/node12@1.0.11:
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: true
 
   /@tsconfig/node14@1.0.3:
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: true
 
   /@tsconfig/node16@1.0.3:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
-    dev: true
 
   /@types/chai-subset@1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
-      '@types/chai': 4.3.5
+      '@types/chai': 4.3.6
     dev: true
 
-  /@types/chai@4.3.5:
-    resolution: {integrity: sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==}
+  /@types/chai@4.3.6:
+    resolution: {integrity: sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==}
     dev: true
 
   /@types/d3-array@3.0.7:
@@ -1025,7 +1019,7 @@ packages:
     resolution: {integrity: sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==}
     dependencies:
       '@types/ms': 0.7.31
-    dev: true
+    dev: false
 
   /@types/estree@1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
@@ -1046,11 +1040,10 @@ packages:
 
   /@types/ms@0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
-    dev: true
+    dev: false
 
-  /@types/node@20.6.2:
-    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
-    dev: true
+  /@types/node@20.6.3:
+    resolution: {integrity: sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA==}
 
   /@types/semver@7.5.2:
     resolution: {integrity: sha512-7aqorHYgdNO4DM36stTiGO3DvKoex9TQRwsJU6vMaFGyqpBA1MNZkz+PG3gaNUPpTAOYhT1WR7M1JyA3fbS9Cw==}
@@ -1066,64 +1059,64 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
       vue: 3.3.4
     dev: true
 
-  /@vitest/expect@0.34.4:
-    resolution: {integrity: sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==}
+  /@vitest/expect@0.34.5:
+    resolution: {integrity: sha512-/3RBIV9XEH+nRpRMqDJBufKIOQaYUH2X6bt0rKSCW0MfKhXFLYsR5ivHifeajRSTsln0FwJbitxLKHSQz/Xwkw==}
     dependencies:
-      '@vitest/spy': 0.34.4
-      '@vitest/utils': 0.34.4
-      chai: 4.3.7
+      '@vitest/spy': 0.34.5
+      '@vitest/utils': 0.34.5
+      chai: 4.3.8
     dev: true
 
-  /@vitest/runner@0.34.4:
-    resolution: {integrity: sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==}
+  /@vitest/runner@0.34.5:
+    resolution: {integrity: sha512-RDEE3ViVvl7jFSCbnBRyYuu23XxmvRTSZWW6W4M7eC5dOsK75d5LIf6uhE5Fqf809DQ1+9ICZZNxhIolWHU4og==}
     dependencies:
-      '@vitest/utils': 0.34.4
+      '@vitest/utils': 0.34.5
       p-limit: 4.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.34.4:
-    resolution: {integrity: sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==}
+  /@vitest/snapshot@0.34.5:
+    resolution: {integrity: sha512-+ikwSbhu6z2yOdtKmk/aeoDZ9QPm2g/ZO5rXT58RR9Vmu/kB2MamyDSx77dctqdZfP3Diqv4mbc/yw2kPT8rmA==}
     dependencies:
       magic-string: 0.30.3
       pathe: 1.1.1
-      pretty-format: 29.6.2
+      pretty-format: 29.7.0
     dev: true
 
-  /@vitest/spy@0.34.4:
-    resolution: {integrity: sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==}
+  /@vitest/spy@0.34.5:
+    resolution: {integrity: sha512-epsicsfhvBjRjCMOC/3k00mP/TBGQy8/P0DxOFiWyLt55gnZ99dqCfCiAsKO17BWVjn4eZRIjKvcqNmSz8gvmg==}
     dependencies:
       tinyspy: 2.1.1
     dev: true
 
-  /@vitest/utils@0.34.4:
-    resolution: {integrity: sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==}
+  /@vitest/utils@0.34.5:
+    resolution: {integrity: sha512-ur6CmmYQoeHMwmGb0v+qwkwN3yopZuZyf4xt1DBBSGBed8Hf9Gmbm/5dEWqgpLPdRx6Av6jcWXrjcKfkTzg/pw==}
     dependencies:
-      diff-sequences: 29.4.3
+      diff-sequences: 29.6.3
       loupe: 2.3.6
-      pretty-format: 29.6.2
+      pretty-format: 29.7.0
     dev: true
 
-  /@volar/language-core@1.10.0:
-    resolution: {integrity: sha512-ddyWwSYqcbEZNFHm+Z3NZd6M7Ihjcwl/9B5cZd8kECdimVXUFdFi60XHWD27nrWtUQIsUYIG7Ca1WBwV2u2LSQ==}
+  /@volar/language-core@1.10.1:
+    resolution: {integrity: sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==}
     dependencies:
-      '@volar/source-map': 1.10.0
+      '@volar/source-map': 1.10.1
     dev: true
 
-  /@volar/source-map@1.10.0:
-    resolution: {integrity: sha512-/ibWdcOzDGiq/GM1JU2eX8fH1bvAhl66hfe8yEgLEzg9txgr6qb5sQ/DEz5PcDL75tF5H5sCRRwn8Eu8ezi9mw==}
+  /@volar/source-map@1.10.1:
+    resolution: {integrity: sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==}
     dependencies:
       muggle-string: 0.3.1
     dev: true
 
-  /@volar/typescript@1.10.0:
-    resolution: {integrity: sha512-OtqGtFbUKYC0pLNIk3mHQp5xWnvL1CJIUc9VE39VdZ/oqpoBh5jKfb9uJ45Y4/oP/WYTrif/Uxl1k8VTPz66Gg==}
+  /@volar/typescript@1.10.1:
+    resolution: {integrity: sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==}
     dependencies:
-      '@volar/language-core': 1.10.0
+      '@volar/language-core': 1.10.1
     dev: true
 
   /@vue-macros/api@0.8.6(rollup@3.29.1)(vue@3.3.4):
@@ -1300,7 +1293,7 @@ packages:
         optional: true
     dependencies:
       sirv: 2.0.3
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
       vue: 3.3.4
     dev: true
 
@@ -1477,7 +1470,7 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.0
-      postcss: 8.4.23
+      postcss: 8.4.30
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.3.4:
@@ -1489,16 +1482,16 @@ packages:
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
-  /@vue/language-core@1.8.11(typescript@5.2.2):
-    resolution: {integrity: sha512-+MZOBGqGwfld6hpo0DB47x8eNM0dNqk15ZdfOhj19CpvuYuOWCeVdOEGZunKDyo3QLkTn3kLOSysJzg7FDOQBA==}
+  /@vue/language-core@1.8.13(typescript@5.2.2):
+    resolution: {integrity: sha512-nata2fYBZAkl4QJrU+IcArJCMTHt1VP8ePL/Z7eUPC2AF+Cm7Qgo9ksNCPBzZRh1LYjCaSaqV7njqNogwpsMVg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@volar/language-core': 1.10.0
-      '@volar/source-map': 1.10.0
+      '@volar/language-core': 1.10.1
+      '@volar/source-map': 1.10.1
       '@vue/compiler-dom': 3.3.4
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
@@ -1515,7 +1508,7 @@ packages:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.3
+      magic-string: 0.30.0
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
@@ -1561,15 +1554,26 @@ packages:
       vue-component-type-helpers: 1.8.4
     dev: true
 
-  /@vue/typescript@1.8.11(typescript@5.2.2):
-    resolution: {integrity: sha512-skUmMDiPUUtu1flPmf2YybF+PX8IzBtMioQOaNn6Ck/RhdrPJGj1AX/7s3Buf9G6ln+/KHR1XQuti/FFxw5XVA==}
+  /@vue/typescript@1.8.13(typescript@5.2.2):
+    resolution: {integrity: sha512-ALJjHFqQ3dgZVCI/ogAS/dZ7JEhIi1N0Em5I7uwabY1p9RDRK3odLsycMHyxZRjm5dLI15c07eeBloHiD2Otlg==}
     dependencies:
-      '@volar/typescript': 1.10.0
-      '@vue/language-core': 1.8.11(typescript@5.2.2)
+      '@volar/typescript': 1.10.1
+      '@vue/language-core': 1.8.13(typescript@5.2.2)
     transitivePeerDependencies:
       - typescript
     dev: true
 
+  /@vueuse/components@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-hEWeumCfH394fkEYc/hng6T5VcjVkdqx7b75Sd6z4Uw3anjeo93Zp9qqtzFOv5bAmHls3Zy04Kowo1glrxDFRQ==}
+    dependencies:
+      '@vueuse/core': 10.4.1(vue@3.3.4)
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/core@10.4.1(vue@3.3.4):
     resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
     dependencies:
@@ -1631,6 +1635,16 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/math@10.4.1(vue@3.3.4):
+    resolution: {integrity: sha512-8XAssBPg6jQ9Z/oD4Yq+gkSjr/r2Sm7pyloWf7i8RQNXiXvf39N0rNZBufFXezKeDa2JmsuMR8JsqlIW7AnG/w==}
+    dependencies:
+      '@vueuse/shared': 10.4.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/metadata@10.4.1:
     resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
 
@@ -1674,7 +1688,6 @@ packages:
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn@8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
@@ -1685,7 +1698,6 @@ packages:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
@@ -1696,23 +1708,23 @@ packages:
       - supports-color
     dev: true
 
-  /algoliasearch@4.19.1:
-    resolution: {integrity: sha512-IJF5b93b2MgAzcE/tuzW0yOPnuUyRgGAtaPv5UUywXM8kzqfdwZTO4sPJBzoGz1eOy6H9uEchsJsBFTELZSu+g==}
+  /algoliasearch@4.20.0:
+    resolution: {integrity: sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==}
     dependencies:
-      '@algolia/cache-browser-local-storage': 4.19.1
-      '@algolia/cache-common': 4.19.1
-      '@algolia/cache-in-memory': 4.19.1
-      '@algolia/client-account': 4.19.1
-      '@algolia/client-analytics': 4.19.1
-      '@algolia/client-common': 4.19.1
-      '@algolia/client-personalization': 4.19.1
-      '@algolia/client-search': 4.19.1
-      '@algolia/logger-common': 4.19.1
-      '@algolia/logger-console': 4.19.1
-      '@algolia/requester-browser-xhr': 4.19.1
-      '@algolia/requester-common': 4.19.1
-      '@algolia/requester-node-http': 4.19.1
-      '@algolia/transporter': 4.19.1
+      '@algolia/cache-browser-local-storage': 4.20.0
+      '@algolia/cache-common': 4.20.0
+      '@algolia/cache-in-memory': 4.20.0
+      '@algolia/client-account': 4.20.0
+      '@algolia/client-analytics': 4.20.0
+      '@algolia/client-common': 4.20.0
+      '@algolia/client-personalization': 4.20.0
+      '@algolia/client-search': 4.20.0
+      '@algolia/logger-common': 4.20.0
+      '@algolia/logger-console': 4.20.0
+      '@algolia/requester-browser-xhr': 4.20.0
+      '@algolia/requester-common': 4.20.0
+      '@algolia/requester-node-http': 4.20.0
+      '@algolia/transporter': 4.20.0
     dev: true
 
   /ansi-escapes@5.0.0:
@@ -1732,8 +1744,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ansi-sequence-parser@1.1.0:
-    resolution: {integrity: sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==}
+  /ansi-sequence-parser@1.1.1:
+    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
     dev: true
 
   /ansi-styles@4.3.0:
@@ -1761,6 +1773,10 @@ packages:
       entities: 2.2.0
     dev: false
 
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: false
+
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -1770,7 +1786,10 @@ packages:
 
   /arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: true
+
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -1781,7 +1800,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       is-array-buffer: 3.0.2
-    dev: true
+    dev: false
 
   /assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
@@ -1823,14 +1842,29 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
+  /autoprefixer@10.4.16(postcss@8.4.30):
+    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.11
+      caniuse-lite: 1.0.30001538
+      fraction.js: 4.3.6
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.30
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
-    dev: true
+    dev: false
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
@@ -1841,7 +1875,6 @@ packages:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
-    dev: true
 
   /brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
@@ -1855,8 +1888,15 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /bulma@0.9.4:
-    resolution: {integrity: sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==}
+  /browserslist@4.21.11:
+    resolution: {integrity: sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001538
+      electron-to-chromium: 1.4.527
+      node-releases: 2.0.13
+      update-browserslist-db: 1.0.13(browserslist@4.21.11)
     dev: false
 
   /bumpp@9.2.0:
@@ -1921,14 +1961,23 @@ packages:
     dependencies:
       function-bind: 1.1.1
       get-intrinsic: 1.2.1
-    dev: true
+    dev: false
 
   /call-me-maybe@1.0.2:
     resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==}
     dev: true
 
-  /chai@4.3.7:
-    resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /caniuse-lite@1.0.30001538:
+    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
+    dev: false
+
+  /chai@4.3.8:
+    resolution: {integrity: sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
@@ -2011,6 +2060,10 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: false
+
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
@@ -2036,9 +2089,13 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true
 
   /concurrently@8.2.1:
     resolution: {integrity: sha512-nVraf3aXOpIcNud5pB9M82p1tynmZkrSGQ1p6X/VY8cJ+2LMVqAgXsJxYYefACSHbTYlm92O1xuhdGTjwoEvbQ==}
@@ -2078,7 +2135,6 @@ packages:
 
   /create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    dev: true
 
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -2089,6 +2145,19 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-selector-tokenizer@0.8.0:
+    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
+    dependencies:
+      cssesc: 3.0.0
+      fastparse: 1.1.2
+    dev: false
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
   /cssstyle@3.0.0:
     resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
     engines: {node: '>=14'}
@@ -2194,6 +2263,19 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
+  /daisyui@3.7.7(ts-node@10.9.1):
+    resolution: {integrity: sha512-2/nFdW/6R9MMnR8tTm07jPVyPaZwpUSkVsFAADb7Oq8N2Ynbls57laDdNqxTCUmn0QvcZi01TKl8zQbAwRfw1w==}
+    engines: {node: '>=16.9.0'}
+    dependencies:
+      colord: 2.9.3
+      css-selector-tokenizer: 0.8.0
+      postcss: 8.4.30
+      postcss-js: 4.0.1(postcss@8.4.30)
+      tailwindcss: 3.3.3(ts-node@10.9.1)
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /data-urls@4.0.0:
     resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
     engines: {node: '>=14'}
@@ -2256,7 +2338,7 @@ packages:
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
       which-typed-array: 1.1.9
-    dev: true
+    dev: false
 
   /define-properties@1.2.0:
     resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
@@ -2264,7 +2346,7 @@ packages:
     dependencies:
       has-property-descriptors: 1.0.0
       object-keys: 1.1.1
-    dev: true
+    dev: false
 
   /defu@6.1.2:
     resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
@@ -2279,15 +2361,22 @@ packages:
     resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
     dev: true
 
-  /diff-sequences@29.4.3:
-    resolution: {integrity: sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==}
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: false
+
+  /diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dev: true
 
   /diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    dev: true
+
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    dev: false
 
   /domexception@4.0.0:
     resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
@@ -2326,6 +2415,10 @@ packages:
       semver: 7.5.4
     dev: true
 
+  /electron-to-chromium@1.4.527:
+    resolution: {integrity: sha512-EafxEiEDzk2aLrdbtVczylHflHdHkNrpGNHIgDyA63sUQLQVS2ayj2hPw3RsVB42qkwURH+T2OxV7kGPUuYszA==}
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -2354,7 +2447,7 @@ packages:
       is-string: 1.0.7
       isarray: 2.0.5
       stop-iteration-iterator: 1.0.0
-    dev: true
+    dev: false
 
   /esbuild@0.18.19:
     resolution: {integrity: sha512-ra3CaIKCzJp5bU5BDfrCc0FRqKj71fQi+gbld0aj6lN0ifuX2fWJYPgLVLGwPfA+ruKna+OWwOvf/yHj6n+i0g==}
@@ -2384,12 +2477,10 @@ packages:
       '@esbuild/win32-arm64': 0.18.19
       '@esbuild/win32-ia32': 0.18.19
       '@esbuild/win32-x64': 0.18.19
-    dev: true
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: true
 
   /escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -2427,12 +2518,13 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       esprima: 4.0.1
-    dev: true
+    dev: false
 
   /esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: false
 
   /estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
@@ -2498,7 +2590,7 @@ packages:
     dependencies:
       esprima-extract-comments: 1.1.0
       parse-code-context: 1.0.0
-    dev: true
+    dev: false
 
   /fast-glob@3.2.12:
     resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
@@ -2509,7 +2601,7 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
+    dev: false
 
   /fast-glob@3.3.0:
     resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
@@ -2532,6 +2624,10 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fastparse@1.1.2:
+    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
+    dev: false
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -2565,7 +2661,7 @@ packages:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
       is-callable: 1.2.7
-    dev: true
+    dev: false
 
   /foreground-child@2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
@@ -2584,6 +2680,10 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /fraction.js@4.3.6:
+    resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==}
+    dev: false
+
   /fs-minipass@2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
@@ -2593,7 +2693,6 @@ packages:
 
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
 
   /fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -2612,11 +2711,10 @@ packages:
 
   /function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: true
+    dev: false
 
   /fuse.js@6.6.2:
     resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
@@ -2638,7 +2736,7 @@ packages:
       has: 1.0.3
       has-proto: 1.0.1
       has-symbols: 1.0.3
-    dev: true
+    dev: false
 
   /get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
@@ -2666,6 +2764,24 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: false
+
+  /glob@7.1.6:
+    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: false
+
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -2692,11 +2808,11 @@ packages:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
       get-intrinsic: 1.2.1
-    dev: true
+    dev: false
 
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: true
+    dev: false
 
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -2707,31 +2823,30 @@ packages:
     resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
     dependencies:
       get-intrinsic: 1.2.1
-    dev: true
+    dev: false
 
   /has-proto@1.0.1:
     resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
     engines: {node: '>= 0.4'}
-    dev: true
+    dev: false
 
   /has-symbols@1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
-    dev: true
+    dev: false
 
   /has-tostringtag@1.0.0:
     resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
-    dev: true
+    dev: false
 
   /has@1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
 
   /he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
@@ -2787,19 +2902,14 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /immutable@4.3.1:
-    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
-
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
-    dev: true
 
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
 
   /ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
@@ -2812,7 +2922,7 @@ packages:
       get-intrinsic: 1.2.1
       has: 1.0.3
       side-channel: 1.0.4
-    dev: true
+    dev: false
 
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
@@ -2825,7 +2935,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
@@ -2833,13 +2943,13 @@ packages:
       call-bind: 1.0.2
       get-intrinsic: 1.2.1
       is-typed-array: 1.1.10
-    dev: true
+    dev: false
 
   /is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
       has-bigints: 1.0.2
-    dev: true
+    dev: false
 
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
@@ -2853,7 +2963,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-buffer@1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
@@ -2862,20 +2972,19 @@ packages:
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
-    dev: true
+    dev: false
 
   /is-core-module@2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
@@ -2904,14 +3013,14 @@ packages:
 
   /is-map@2.0.2:
     resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: true
+    dev: false
 
   /is-number-object@1.0.7:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
@@ -2927,17 +3036,17 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-set@2.0.2:
     resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: true
+    dev: false
 
   /is-shared-array-buffer@1.0.2:
     resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
     dependencies:
       call-bind: 1.0.2
-    dev: true
+    dev: false
 
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
@@ -2954,14 +3063,14 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-symbol@1.0.4:
     resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
-    dev: true
+    dev: false
 
   /is-typed-array@1.1.10:
     resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==}
@@ -2972,18 +3081,18 @@ packages:
       for-each: 0.3.3
       gopd: 1.0.1
       has-tostringtag: 1.0.0
-    dev: true
+    dev: false
 
   /is-weakmap@2.0.1:
     resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: true
+    dev: false
 
   /is-weakset@2.0.2:
     resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
     dependencies:
       call-bind: 1.0.2
       get-intrinsic: 1.2.1
-    dev: true
+    dev: false
 
   /is-whitespace@0.3.0:
     resolution: {integrity: sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==}
@@ -2992,7 +3101,7 @@ packages:
 
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: true
+    dev: false
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -3029,7 +3138,6 @@ packages:
   /jiti@1.18.2:
     resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
     hasBin: true
-    dev: true
 
   /js-beautify@1.14.7:
     resolution: {integrity: sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==}
@@ -3102,6 +3210,7 @@ packages:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
+    dev: false
 
   /jsonc-eslint-parser@2.3.0:
     resolution: {integrity: sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==}
@@ -3135,7 +3244,10 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
 
   /lint-staged@14.0.1:
     resolution: {integrity: sha512-Mw0cL6HXnHN1ag0mN/Dg4g6sr8uf8sn98w2Oc1ECtFto9tvRF7nkXGJRbx8gPlHyoR0pLyBr2lQHbWwmUHe1Sw==}
@@ -3177,7 +3289,6 @@ packages:
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}
-    dev: true
 
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -3258,7 +3369,6 @@ packages:
 
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    dev: true
 
   /mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
@@ -3305,7 +3415,6 @@ packages:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
       brace-expansion: 1.1.11
-    dev: true
 
   /minimatch@5.1.6:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
@@ -3373,6 +3482,15 @@ packages:
       pkg-types: 1.0.3
       ufo: 1.1.2
 
+  /mlly@1.4.2:
+    resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
+    dependencies:
+      acorn: 8.10.0
+      pathe: 1.1.1
+      pkg-types: 1.0.3
+      ufo: 1.3.0
+    dev: true
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -3390,6 +3508,14 @@ packages:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
     dev: true
 
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: false
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3399,6 +3525,10 @@ packages:
     resolution: {integrity: sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==}
     dev: true
 
+  /node-releases@2.0.13:
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
+    dev: false
+
   /nopt@6.0.0:
     resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -3411,6 +3541,11 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  /normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -3429,9 +3564,19 @@ packages:
     resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
     dev: true
 
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: true
+    dev: false
 
   /object-is@1.1.5:
     resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
@@ -3439,12 +3584,12 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-    dev: true
+    dev: false
 
   /object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
-    dev: true
+    dev: false
 
   /object.assign@4.1.4:
     resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
@@ -3454,7 +3599,7 @@ packages:
       define-properties: 1.2.0
       has-symbols: 1.0.3
       object-keys: 1.1.1
-    dev: true
+    dev: false
 
   /ohash@1.1.2:
     resolution: {integrity: sha512-9CIOSq5945rI045GFtcO3uudyOkYVY1nyfFxVQp+9BRgslr8jPNiSSrsFGg/BNTUFOLqx0P5tng6G32brIPw0w==}
@@ -3464,7 +3609,6 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -3504,7 +3648,7 @@ packages:
   /parse-code-context@1.0.0:
     resolution: {integrity: sha512-OZQaqKaQnR21iqhlnPfVisFjBWjhnMl5J9MgbP8xC+EwoVqbXrq78lp+9Zb3ahmLzrIX5Us/qbvBnaS3hkH6OA==}
     engines: {node: '>=6'}
-    dev: true
+    dev: false
 
   /parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
@@ -3520,7 +3664,6 @@ packages:
   /path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@@ -3534,7 +3677,6 @@ packages:
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /pathe@1.1.1:
     resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
@@ -3560,6 +3702,11 @@ packages:
     hasBin: true
     dev: true
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /pinia@2.1.6(typescript@5.2.2)(vue@3.3.4):
     resolution: {integrity: sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==}
     peerDependencies:
@@ -3577,6 +3724,11 @@ packages:
       vue: 3.3.4
       vue-demi: 0.14.5(vue@3.3.4)
 
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
@@ -3584,41 +3736,171 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
 
-  /playwright-core@1.38.0:
-    resolution: {integrity: sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==}
+  /playwright-core@1.38.1:
+    resolution: {integrity: sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==}
     engines: {node: '>=16'}
     hasBin: true
     dev: true
 
-  /playwright@1.38.0:
-    resolution: {integrity: sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==}
+  /playwright@1.38.1:
+    resolution: {integrity: sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright-core: 1.38.0
+      playwright-core: 1.38.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /postcss@8.4.23:
-    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
+  /postcss-import@15.1.0(postcss@8.4.30):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.30
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.2
+    dev: false
+
+  /postcss-js@4.0.1(postcss@8.4.30):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.30
+    dev: false
+
+  /postcss-load-config@4.0.1(postcss@8.4.30)(ts-node@10.9.1):
+    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.30
+      ts-node: 10.9.1(@types/node@20.6.3)(typescript@5.2.2)
+      yaml: 2.3.1
+    dev: false
+
+  /postcss-mixins@9.0.4(postcss@8.4.30):
+    resolution: {integrity: sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==}
+    engines: {node: '>=14.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      fast-glob: 3.3.1
+      postcss: 8.4.30
+      postcss-js: 4.0.1(postcss@8.4.30)
+      postcss-simple-vars: 7.0.1(postcss@8.4.30)
+      sugarss: 4.0.1(postcss@8.4.30)
+    dev: false
+
+  /postcss-nested@6.0.1(postcss@8.4.30):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.30
+      postcss-selector-parser: 6.0.13
+    dev: false
+
+  /postcss-selector-parser@6.0.13:
+    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
+  /postcss-simple-vars@7.0.1(postcss@8.4.30):
+    resolution: {integrity: sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==}
+    engines: {node: '>=14.0'}
+    peerDependencies:
+      postcss: ^8.2.1
+    dependencies:
+      postcss: 8.4.30
+    dev: false
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
+
+  /postcss@8.4.30:
+    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /postcss@8.4.27:
-    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
+  /preact@10.17.1:
+    resolution: {integrity: sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==}
     dev: true
 
-  /preact@10.15.1:
-    resolution: {integrity: sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==}
+  /prettier-plugin-tailwindcss@0.5.4(prettier@3.0.3):
+    resolution: {integrity: sha512-QZzzB1bID6qPsKHTeA9qPo1APmmxfFrA5DD3LQ+vbTmAnY40eJI7t9Q1ocqel2EKMWNPLJqdTDWZj1hKYgqSgg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.0.3
     dev: true
 
   /prettier@3.0.3:
@@ -3627,11 +3909,11 @@ packages:
     hasBin: true
     dev: true
 
-  /pretty-format@29.6.2:
-    resolution: {integrity: sha512-1q0oC8eRveTg5nnBEWMXAU2qpv65Gnuf2eCQzSjxpWFkPaPARwqZZDGuNE0zPAZfTCHzIk3A8dIjwlQKKLphyg==}
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jest/schemas': 29.6.0
+      '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
       react-is: 18.2.0
     dev: true
@@ -3689,6 +3971,12 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -3705,7 +3993,7 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.2.0
       functions-have-names: 1.2.3
-    dev: true
+    dev: false
 
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
@@ -3728,7 +4016,6 @@ packages:
       is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /restore-cursor@4.0.0:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
@@ -3759,7 +4046,6 @@ packages:
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /rollup@3.29.1:
     resolution: {integrity: sha512-c+ebvQz0VIH4KhhCpDsI+Bik0eT8ZFEVZEYw0cGMVqIP8zc+gnwl7iXCamTw7vzv2MeuZFZfdx5JJIq+ehzDlg==}
@@ -3787,15 +4073,6 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass@1.67.0:
-    resolution: {integrity: sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.1
-      source-map-js: 1.0.2
-
   /saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -3807,9 +4084,8 @@ packages:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: true
 
-  /search-insights@2.7.0:
-    resolution: {integrity: sha512-GLbVaGgzYEKMvuJbHRhLi1qoBFnjXZGZ6l4LxOYPCp4lI2jDRB3jPU9/XNhMwv6kvnA9slTreq6pvK+b3o3aqg==}
-    engines: {node: '>=8.16.0'}
+  /search-insights@2.8.2:
+    resolution: {integrity: sha512-PxA9M5Q2bpBelVvJ3oDZR8nuY00Z6qwOxL53wNpgzV28M/D6u9WUbImDckjLSILBF8F1hn/mgyuUaOPtjow4Qw==}
     dev: true
 
   /semver@5.7.2:
@@ -3843,7 +4119,7 @@ packages:
   /shiki@0.14.4:
     resolution: {integrity: sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==}
     dependencies:
-      ansi-sequence-parser: 1.1.0
+      ansi-sequence-parser: 1.1.1
       jsonc-parser: 3.2.0
       vscode-oniguruma: 1.7.0
       vscode-textmate: 8.0.0
@@ -3855,7 +4131,7 @@ packages:
       call-bind: 1.0.2
       get-intrinsic: 1.2.1
       object-inspect: 1.12.3
-    dev: true
+    dev: false
 
   /siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
@@ -3919,8 +4195,8 @@ packages:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
 
-  /std-env@3.3.3:
-    resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
+  /std-env@3.4.3:
+    resolution: {integrity: sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==}
     dev: true
 
   /stop-iteration-iterator@1.0.0:
@@ -3928,7 +4204,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       internal-slot: 1.0.5
-    dev: true
+    dev: false
 
   /string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@@ -3983,6 +4259,35 @@ packages:
       acorn: 8.10.0
     dev: true
 
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.10.0
+    dev: true
+
+  /sucrase@3.34.0:
+    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 7.1.6
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: false
+
+  /sugarss@4.0.1(postcss@8.4.30):
+    resolution: {integrity: sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      postcss: 8.4.30
+    dev: false
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4000,7 +4305,6 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -4009,6 +4313,37 @@ packages:
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  /tailwindcss@3.3.3(ts-node@10.9.1):
+    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.1
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.18.2
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.30
+      postcss-import: 15.1.0(postcss@8.4.30)
+      postcss-js: 4.0.1(postcss@8.4.30)
+      postcss-load-config: 4.0.1(postcss@8.4.30)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.30)
+      postcss-selector-parser: 6.0.13
+      resolve: 1.22.2
+      sucrase: 3.34.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tar@6.1.15:
     resolution: {integrity: sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==}
     engines: {node: '>=10'}
@@ -4030,8 +4365,21 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /tinybench@2.5.0:
-    resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+    dev: false
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+    dev: false
+
+  /tinybench@2.5.1:
+    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
     dev: true
 
   /tinypool@0.7.0:
@@ -4081,7 +4429,11 @@ packages:
     hasBin: true
     dev: true
 
-  /ts-node@10.9.1(@types/node@20.6.2)(typescript@5.2.2):
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: false
+
+  /ts-node@10.9.1(@types/node@20.6.3)(typescript@5.2.2):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -4100,7 +4452,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
-      '@types/node': 20.6.2
+      '@types/node': 20.6.3
       acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -4110,7 +4462,6 @@ packages:
       typescript: 5.2.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: true
 
   /tslib@2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
@@ -4134,6 +4485,10 @@ packages:
   /ufo@1.1.2:
     resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
 
+  /ufo@1.3.0:
+    resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
+    dev: true
+
   /unimport@3.0.14:
     resolution: {integrity: sha512-67Rh/sGpEuVqdHWkXaZ6NOq+I7sKt86o+DUtKeGB6dh4Hk1A8AQrzyVGg2+LaVEYotStH7HwvV9YSaRjyT7Uqg==}
     dependencies:
@@ -4202,7 +4557,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.6
       unplugin: 1.4.0
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
     dev: true
 
   /unplugin-icons@0.17.0(@vue/compiler-sfc@3.3.4):
@@ -4337,6 +4692,17 @@ packages:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
 
+  /update-browserslist-db@1.0.13(browserslist@4.21.11):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.11
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: false
+
   /url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
     dependencies:
@@ -4344,9 +4710,12 @@ packages:
       requires-port: 1.0.0
     dev: true
 
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: false
+
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: true
 
   /v8-to-istanbul@9.1.0:
     resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==}
@@ -4357,17 +4726,17 @@ packages:
       convert-source-map: 1.9.0
     dev: true
 
-  /vite-node@0.34.4(@types/node@20.6.2)(sass@1.67.0):
-    resolution: {integrity: sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==}
+  /vite-node@0.34.5(@types/node@20.6.3):
+    resolution: {integrity: sha512-RNZ+DwbCvDoI5CbCSQSyRyzDTfFvFauvMs6Yq4ObJROKlIKuat1KgSX/Ako5rlDMfVCyMcpMRMTkJBxd6z8YRA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.0
+      mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4397,11 +4766,11 @@ packages:
       json5: 2.2.3
       local-pkg: 0.4.3
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
       yaml: 2.3.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
+    dev: false
 
   /vite-plugin-vue-layouts@0.8.0(vite@4.4.9)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-UZW2nSV2LraTSe7gsAL46hfdi7a0X1RvkGGoJVtA2O8beu7anzpXFwQLou8+kHy31CzVycT4gIPySBsHhtBN5g==}
@@ -4413,14 +4782,14 @@ packages:
       '@vue/compiler-sfc': 3.3.4
       debug: 4.3.4
       fast-glob: 3.2.12
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
       vue: 3.3.4
       vue-router: 4.2.4(vue@3.3.4)
     transitivePeerDependencies:
       - supports-color
-    dev: true
+    dev: false
 
-  /vite@4.4.9(@types/node@20.6.2)(sass@1.67.0):
+  /vite@4.4.9(@types/node@20.6.3):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -4448,17 +4817,15 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.6.2
+      '@types/node': 20.6.3
       esbuild: 0.18.19
-      postcss: 8.4.27
+      postcss: 8.4.30
       rollup: 3.27.2
-      sass: 1.67.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
-  /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@20.6.2)(fuse.js@6.6.2)(sass@1.67.0)(search-insights@2.7.0):
-    resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==}
+  /vitepress@1.0.0-rc.15(@algolia/client-search@4.20.0)(@types/node@20.6.3)(fuse.js@6.6.2)(search-insights@2.8.2):
+    resolution: {integrity: sha512-5criiHoEibkT/du7t6wQ2xQVsuTNuirQZbMAi0M9Hp0YzJoJvEX68Ej9p2PtNC84bYb/CxAh5QkMtMutk03lHw==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -4467,7 +4834,7 @@ packages:
         optional: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.4.1(vue@3.3.4)
       '@vueuse/integrations': 10.4.1(focus-trap@7.5.2)(fuse.js@6.6.2)(vue@3.3.4)
@@ -4475,7 +4842,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.4
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4504,8 +4871,8 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest@0.34.4(jsdom@22.1.0)(sass@1.67.0):
-    resolution: {integrity: sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==}
+  /vitest@0.34.5(jsdom@22.1.0):
+    resolution: {integrity: sha512-CPI68mmnr2DThSB3frSuE5RLm9wo5wU4fbDrDwWQQB1CWgq9jQVoQwnQSzYAjdoBOPoH2UtXpOgHVge/uScfZg==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -4535,30 +4902,30 @@ packages:
       webdriverio:
         optional: true
     dependencies:
-      '@types/chai': 4.3.5
+      '@types/chai': 4.3.6
       '@types/chai-subset': 1.3.3
-      '@types/node': 20.6.2
-      '@vitest/expect': 0.34.4
-      '@vitest/runner': 0.34.4
-      '@vitest/snapshot': 0.34.4
-      '@vitest/spy': 0.34.4
-      '@vitest/utils': 0.34.4
+      '@types/node': 20.6.3
+      '@vitest/expect': 0.34.5
+      '@vitest/runner': 0.34.5
+      '@vitest/snapshot': 0.34.5
+      '@vitest/spy': 0.34.5
+      '@vitest/utils': 0.34.5
       acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
-      chai: 4.3.7
+      chai: 4.3.8
       debug: 4.3.4
       jsdom: 22.1.0
       local-pkg: 0.4.3
       magic-string: 0.30.3
       pathe: 1.1.1
       picocolors: 1.0.0
-      std-env: 3.3.3
-      strip-literal: 1.0.1
-      tinybench: 2.5.0
+      std-env: 3.4.3
+      strip-literal: 1.3.0
+      tinybench: 2.5.1
       tinypool: 0.7.0
-      vite: 4.4.9(@types/node@20.6.2)(sass@1.67.0)
-      vite-node: 0.34.4(@types/node@20.6.2)(sass@1.67.0)
+      vite: 4.4.9(@types/node@20.6.3)
+      vite-node: 0.34.5(@types/node@20.6.3)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -4615,6 +4982,7 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.5.0
       vue: 3.3.4
+    dev: false
 
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
@@ -4623,14 +4991,14 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.11(typescript@5.2.2):
-    resolution: {integrity: sha512-BzfiMdPqDHBlysx4g26NkfVHSQwGD/lTRausmxN9sFyjXz34OWfsbkh0YsVkX84Hu65In1fFlxHiG39Tr4Vojg==}
+  /vue-tsc@1.8.13(typescript@5.2.2):
+    resolution: {integrity: sha512-Hl8zUXPVK2KzPtbXeMCN0CSFkwvD96YOtYt9KvJPG9W8QGcNpGk9KHwPuGMxA8blWXSIli7gtsoC+clICEVdVg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@vue/language-core': 1.8.11(typescript@5.2.2)
-      '@vue/typescript': 1.8.11(typescript@5.2.2)
+      '@vue/language-core': 1.8.13(typescript@5.2.2)
+      '@vue/typescript': 1.8.13(typescript@5.2.2)
       semver: 7.5.4
       typescript: 5.2.2
     dev: true
@@ -4691,7 +5059,7 @@ packages:
       is-number-object: 1.0.7
       is-string: 1.0.7
       is-symbol: 1.0.4
-    dev: true
+    dev: false
 
   /which-collection@1.0.1:
     resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
@@ -4700,7 +5068,7 @@ packages:
       is-set: 2.0.2
       is-weakmap: 2.0.1
       is-weakset: 2.0.2
-    dev: true
+    dev: false
 
   /which-typed-array@1.1.9:
     resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
@@ -4712,7 +5080,7 @@ packages:
       gopd: 1.0.1
       has-tostringtag: 1.0.0
       is-typed-array: 1.1.10
-    dev: true
+    dev: false
 
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -4751,7 +5119,6 @@ packages:
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
   /ws@8.13.0:
     resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
@@ -4821,7 +5188,6 @@ packages:
   /yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
-    dev: true
 
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..3b03a395
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-mixins": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/index.html b/public/index.html
index c639fb01..4c4d88e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html class="bg-base text-base-content">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -26,7 +26,7 @@
   <body>
     <svg
       aria-hidden="true"
-      class="is-hidden"
+      class="hidden"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..788c3589
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,34 @@
+import type { Config } from "tailwindcss";
+import DaisyUI from "daisyui";
+
+export default {
+  content: ["./assets/**/*.{vue,js,ts}", "./public/index.html"],
+  theme: {
+    extend: {
+      animation: {
+        "bounce-fast": "bounce 0.5s 2 both",
+      },
+      colors: {
+        green: "hsl(177 100% 35%)",
+        red: "hsl(4 90% 58%)",
+        purple: "hsl(291 64% 42%)",
+        blue: "hsl(207 90% 54%)",
+        orange: "hsl(25 95% 53%)",
+        base: "hsl(var(--base-color) / <alpha-value>)",
+        "base-darker": "hsl(var(--base-darker-color) / <alpha-value>)",
+        "base-lighter": "hsl(var(--base-lighter-color) / <alpha-value>)",
+        "base-content": "hsl(var(--base-content-color) / <alpha-value>)",
+
+        primary: "hsl(var(--primary-color) / <alpha-value>)",
+        "primary-focus": "hsl(var(--primary-focus-color) / <alpha-value>)",
+        secondary: "hsl(var(--secondary-color) / <alpha-value>)",
+      },
+    },
+  },
+  plugins: [DaisyUI],
+  daisyui: {
+    themes: [],
+    base: false,
+    logs: false,
+  },
+} satisfies Config;
diff --git a/vite.config.ts b/vite.config.ts
index 42c78d5e..38a169a6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,13 +28,7 @@ export default defineConfig(() => ({
   plugins: [
     VueMacros({
       plugins: {
-        vue: Vue({
-          template: {
-            compilerOptions: {
-              whitespace: "preserve",
-            },
-          },
-        }),
+        vue: Vue(),
       },
     }),
     Icons({