From cbaf4837883a9cd9ca063fd2b8354e560dfc2a40 Mon Sep 17 00:00:00 2001
From: Tonya <tonya@tokia.dev>
Date: Sun, 20 Apr 2025 08:58:03 +0100
Subject: [PATCH] migrate pages to shadcn (#628)

* feat: migrate tools page and label generator to shadcn

* chore: lint issues

* feat: also do profile page

* feat: shadcn 404 page

* feat: login page shadcn

* fix: daisyui ironically breaks the z height for the login page

* feat: componentise the language selector and add it to the login page

* feat: use nuxtlink

* feat: card and table made more shadcn

* feat: shadcn statscard

* chore: lint

* feat: shadcn labelchip and locationcard

* feat: shadcn locations page

* refactor: remove unused new item page

* chore: lint

* feat: shadcn item card

* fix: wrapping of location and lint

* feat: ctrl enter in text area in form submits form

* feat: begin shadcn locations page and remove pageqrcode comp in favour of integrating it into labelmaker

* chore: lint + remove unused code

* fix: remove uneeded margin

* feat: shadcn labels page and fix some issues with location

* feat: shadcn scanner

* chore: lint

* feat: begin shadcning item pages

* feat: shadcn maintenance page

* feat: begin shadcn search page

* fix: quick switch blurry text and crashing page when switching + incorrect z height for create menu

* feat: finish shadcn search page

* chore: lint

* feat: shadcn edit item page

* fix: quickmenumodal bug

* feat: shadcn item details page

* feat: remove all non-color related daisyui classes

* fix: type error

* fix: quick menu modal again :(
---
 frontend/.eslintrc.js                         |   2 +-
 frontend/assets/css/main.css                  |   8 -
 frontend/components/App/Header.vue            | 123 --------
 frontend/components/App/ImportDialog.vue      |  56 ++--
 frontend/components/App/LanguageSelector.vue  |  51 ++++
 frontend/components/App/OutdatedModal.vue     |  11 +-
 frontend/components/App/QuickMenuModal.vue    |  10 +-
 frontend/components/Base/Button.vue           |  77 -----
 frontend/components/Base/Card.vue             |  21 +-
 frontend/components/Base/Modal.vue            | 110 -------
 frontend/components/Base/SectionHeader.vue    |  12 +-
 frontend/components/DetailAction.vue          |  30 +-
 frontend/components/Form/Autocomplete.vue     | 175 -----------
 frontend/components/Form/Autocomplete2.vue    | 188 ------------
 frontend/components/Form/Checkbox.vue         |  27 +-
 frontend/components/Form/DatePicker.vue       |  32 +--
 frontend/components/Form/Multiselect.vue      | 120 --------
 frontend/components/Form/Password.vue         |  23 +-
 frontend/components/Form/Select.vue           | 103 -------
 frontend/components/Form/TextArea.vue         |  69 +++--
 frontend/components/Form/Toggle.vue           |  35 ---
 frontend/components/Item/AttachmentsList.vue  |  32 ++-
 frontend/components/Item/Card.vue             |  93 +++---
 frontend/components/Item/Selector.vue         | 139 +++++++++
 frontend/components/Item/View/Selectable.vue  |  37 ++-
 frontend/components/Item/View/Table.types.ts  |   2 +-
 frontend/components/Item/View/Table.vue       | 220 +++++++-------
 frontend/components/Label/Chip.vue            |  31 +-
 frontend/components/Location/Card.vue         |  64 ++---
 .../components/Location/LegacySelector.vue    |  63 ----
 frontend/components/Location/Tree/Node.vue    |  22 +-
 frontend/components/Location/Tree/Root.vue    |   5 +-
 frontend/components/Maintenance/EditModal.vue |  57 ++--
 frontend/components/Maintenance/ListView.vue  | 116 ++++----
 frontend/components/Search/Filter.vue         | 112 ++++----
 frontend/components/global/CopyText.vue       |  73 +++--
 .../global/DetailsSection/DetailsSection.vue  |  29 +-
 frontend/components/global/LabelMaker.vue     | 114 +++++---
 frontend/components/global/PageQRCode.vue     |  50 ++--
 frontend/components/global/PasswordScore.vue  |  13 +-
 .../components/global/StatCard/StatCard.vue   |  21 +-
 .../components/ui/breadcrumb/Breadcrumb.vue   |  13 +
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |  22 ++
 .../ui/breadcrumb/BreadcrumbItem.vue          |  16 ++
 .../ui/breadcrumb/BreadcrumbLink.vue          |  19 ++
 .../ui/breadcrumb/BreadcrumbList.vue          |  16 ++
 .../ui/breadcrumb/BreadcrumbPage.vue          |  19 ++
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |  21 ++
 frontend/components/ui/breadcrumb/index.ts    |   7 +
 frontend/components/ui/button/Button.vue      |   7 +-
 frontend/components/ui/button/ButtonGroup.vue |   9 +-
 frontend/components/ui/card/Card.vue          |  21 ++
 frontend/components/ui/card/CardContent.vue   |  14 +
 .../components/ui/card/CardDescription.vue    |  14 +
 frontend/components/ui/card/CardFooter.vue    |  14 +
 frontend/components/ui/card/CardHeader.vue    |  14 +
 frontend/components/ui/card/CardTitle.vue     |  18 ++
 frontend/components/ui/card/index.ts          |   6 +
 frontend/components/ui/checkbox/Checkbox.vue  |  33 +++
 frontend/components/ui/checkbox/index.ts      |   1 +
 .../components/ui/command/CommandDialog.vue   |   3 +-
 .../components/ui/command/CommandInput.vue    |   2 +-
 .../components/ui/dialog/DialogContent.vue    |  78 +++--
 .../ui/pagination/PaginationEllipsis.vue      |  22 ++
 .../ui/pagination/PaginationFirst.vue         |  29 ++
 .../ui/pagination/PaginationLast.vue          |  29 ++
 .../ui/pagination/PaginationNext.vue          |  29 ++
 .../ui/pagination/PaginationPrev.vue          |  29 ++
 frontend/components/ui/pagination/index.ts    |  10 +
 frontend/components/ui/progress/Progress.vue  |  36 +++
 frontend/components/ui/progress/index.ts      |   1 +
 frontend/components/ui/select/Select.vue      |  15 +
 .../components/ui/select/SelectContent.vue    |  53 ++++
 frontend/components/ui/select/SelectGroup.vue |  19 ++
 frontend/components/ui/select/SelectItem.vue  |  44 +++
 .../components/ui/select/SelectItemText.vue   |  11 +
 frontend/components/ui/select/SelectLabel.vue |  13 +
 .../ui/select/SelectScrollDownButton.vue      |  24 ++
 .../ui/select/SelectScrollUpButton.vue        |  24 ++
 .../components/ui/select/SelectSeparator.vue  |  17 ++
 .../components/ui/select/SelectTrigger.vue    |  31 ++
 frontend/components/ui/select/SelectValue.vue |  11 +
 frontend/components/ui/select/index.ts        |  11 +
 frontend/components/ui/switch/Switch.vue      |  39 +++
 frontend/components/ui/switch/index.ts        |   1 +
 frontend/components/ui/table/Table.vue        |  16 ++
 frontend/components/ui/table/TableBody.vue    |  14 +
 frontend/components/ui/table/TableCaption.vue |  14 +
 frontend/components/ui/table/TableCell.vue    |  21 ++
 frontend/components/ui/table/TableEmpty.vue   |  37 +++
 frontend/components/ui/table/TableFooter.vue  |  14 +
 frontend/components/ui/table/TableHead.vue    |  14 +
 frontend/components/ui/table/TableHeader.vue  |  14 +
 frontend/components/ui/table/TableRow.vue     |  14 +
 frontend/components/ui/table/index.ts         |   9 +
 frontend/composables/use-preferences.ts       |   4 +-
 frontend/composables/utils.test.ts            |   2 +-
 frontend/composables/utils.ts                 |   2 +-
 frontend/layouts/default.vue                  |   6 +-
 frontend/locales/en.json                      |  17 +-
 frontend/pages/[...all].vue                   |   8 +-
 frontend/pages/home/index.vue                 |   2 +-
 frontend/pages/index.vue                      | 158 +++++-----
 frontend/pages/item/[id]/index.vue            | 238 ++++++++++-----
 frontend/pages/item/[id]/index/edit.vue       | 252 +++++++---------
 frontend/pages/item/new.vue                   |  97 -------
 frontend/pages/items.vue                      | 272 +++++++++---------
 frontend/pages/label/[id].vue                 | 121 ++++----
 frontend/pages/location/[id].vue              | 135 +++++----
 frontend/pages/locations.vue                  |  51 +++-
 frontend/pages/profile.vue                    | 206 ++++++-------
 frontend/pages/reports/label-generator.vue    |  38 +--
 frontend/pages/scanner.vue                    |  66 +++--
 frontend/pages/tools.vue                      |  14 +-
 114 files changed, 2818 insertions(+), 2479 deletions(-)
 delete mode 100644 frontend/components/App/Header.vue
 create mode 100644 frontend/components/App/LanguageSelector.vue
 delete mode 100644 frontend/components/Base/Button.vue
 delete mode 100644 frontend/components/Base/Modal.vue
 delete mode 100644 frontend/components/Form/Autocomplete.vue
 delete mode 100644 frontend/components/Form/Autocomplete2.vue
 delete mode 100644 frontend/components/Form/Multiselect.vue
 delete mode 100644 frontend/components/Form/Select.vue
 delete mode 100644 frontend/components/Form/Toggle.vue
 create mode 100644 frontend/components/Item/Selector.vue
 delete mode 100644 frontend/components/Location/LegacySelector.vue
 create mode 100644 frontend/components/ui/breadcrumb/Breadcrumb.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbEllipsis.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbItem.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbLink.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbList.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbPage.vue
 create mode 100644 frontend/components/ui/breadcrumb/BreadcrumbSeparator.vue
 create mode 100644 frontend/components/ui/breadcrumb/index.ts
 create mode 100644 frontend/components/ui/card/Card.vue
 create mode 100644 frontend/components/ui/card/CardContent.vue
 create mode 100644 frontend/components/ui/card/CardDescription.vue
 create mode 100644 frontend/components/ui/card/CardFooter.vue
 create mode 100644 frontend/components/ui/card/CardHeader.vue
 create mode 100644 frontend/components/ui/card/CardTitle.vue
 create mode 100644 frontend/components/ui/card/index.ts
 create mode 100644 frontend/components/ui/checkbox/Checkbox.vue
 create mode 100644 frontend/components/ui/checkbox/index.ts
 create mode 100644 frontend/components/ui/pagination/PaginationEllipsis.vue
 create mode 100644 frontend/components/ui/pagination/PaginationFirst.vue
 create mode 100644 frontend/components/ui/pagination/PaginationLast.vue
 create mode 100644 frontend/components/ui/pagination/PaginationNext.vue
 create mode 100644 frontend/components/ui/pagination/PaginationPrev.vue
 create mode 100644 frontend/components/ui/pagination/index.ts
 create mode 100644 frontend/components/ui/progress/Progress.vue
 create mode 100644 frontend/components/ui/progress/index.ts
 create mode 100644 frontend/components/ui/select/Select.vue
 create mode 100644 frontend/components/ui/select/SelectContent.vue
 create mode 100644 frontend/components/ui/select/SelectGroup.vue
 create mode 100644 frontend/components/ui/select/SelectItem.vue
 create mode 100644 frontend/components/ui/select/SelectItemText.vue
 create mode 100644 frontend/components/ui/select/SelectLabel.vue
 create mode 100644 frontend/components/ui/select/SelectScrollDownButton.vue
 create mode 100644 frontend/components/ui/select/SelectScrollUpButton.vue
 create mode 100644 frontend/components/ui/select/SelectSeparator.vue
 create mode 100644 frontend/components/ui/select/SelectTrigger.vue
 create mode 100644 frontend/components/ui/select/SelectValue.vue
 create mode 100644 frontend/components/ui/select/index.ts
 create mode 100644 frontend/components/ui/switch/Switch.vue
 create mode 100644 frontend/components/ui/switch/index.ts
 create mode 100644 frontend/components/ui/table/Table.vue
 create mode 100644 frontend/components/ui/table/TableBody.vue
 create mode 100644 frontend/components/ui/table/TableCaption.vue
 create mode 100644 frontend/components/ui/table/TableCell.vue
 create mode 100644 frontend/components/ui/table/TableEmpty.vue
 create mode 100644 frontend/components/ui/table/TableFooter.vue
 create mode 100644 frontend/components/ui/table/TableHead.vue
 create mode 100644 frontend/components/ui/table/TableHeader.vue
 create mode 100644 frontend/components/ui/table/TableRow.vue
 create mode 100644 frontend/components/ui/table/index.ts
 delete mode 100644 frontend/pages/item/new.vue

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index a865e8ea..e2bc53c5 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -29,7 +29,7 @@ module.exports = {
     "vue/no-v-html": 0,
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/ban-ts-comment": 0,
-    "tailwindcss/no-custom-classname": 0,
+    "tailwindcss/no-custom-classname": "warn",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index 4231c882..f9953584 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -777,14 +777,6 @@
     text-transform: none !important;
 }
 
-.btn {
-    text-transform: none !important;
-}
-
-.tooltip {
-  overflow-wrap: break-word;
-}
-
 /* transparent subtle scrollbar */
 ::-webkit-scrollbar {
   width: 0.2em;
diff --git a/frontend/components/App/Header.vue b/frontend/components/App/Header.vue
deleted file mode 100644
index c3703730..00000000
--- a/frontend/components/App/Header.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts" setup>
-  import MdiPlus from "~icons/mdi/plus";
-
-  const ctx = useAuthContext();
-  const api = useUserApi();
-
-  async function logout() {
-    const { error } = await ctx.logout(api);
-    if (error) {
-      return;
-    }
-
-    navigateTo("/");
-  }
-
-  const links = [
-    {
-      name: "Home",
-      href: "/home",
-    },
-    {
-      name: "Items",
-      href: "/items",
-    },
-    {
-      name: "Logout",
-      action: logout,
-      last: true,
-    },
-  ];
-
-  const modals = reactive({
-    item: false,
-    location: false,
-    label: false,
-  });
-
-  const dropdown = [
-    {
-      name: "Item / Asset",
-      action: () => {
-        modals.item = true;
-      },
-    },
-    {
-      name: "Location",
-      action: () => {
-        modals.location = true;
-      },
-    },
-    {
-      name: "Label",
-      action: () => {
-        modals.label = true;
-      },
-    },
-  ];
-</script>
-
-<template>
-  <!--
-    Confirmation Modal is a singleton used by all components so we render
-    it here to ensure it's always available. Possibly could move this further
-    up the tree
-   -->
-  <ModalConfirm />
-  <ItemCreateModal v-model="modals.item" />
-  <LabelCreateModal v-model="modals.label" />
-  <LocationCreateModal v-model="modals.location" />
-
-  <div class="absolute top-0 -z-10 h-80 max-h-96 w-full bg-neutral shadow-xl"></div>
-
-  <BaseContainer cmp="header" class="max-w-none py-6">
-    <BaseContainer>
-      <NuxtLink to="/home">
-        <h2 class="mt-1 flex text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl">
-          HomeB
-          <AppLogo class="-mb-4 w-12" />
-          x
-        </h2>
-      </NuxtLink>
-      <div class="ml-1 mt-2 space-x-2 text-lg text-neutral-content/75">
-        <template v-for="link in links">
-          <NuxtLink
-            v-if="!link.action"
-            :key="link.name"
-            class="italic transition-colors duration-200 hover:text-base-content"
-            :to="link.href"
-          >
-            {{ link.name }}
-          </NuxtLink>
-          <button
-            v-else
-            :key="link.name + 'link'"
-            for="location-form-modal"
-            class="italic transition-colors duration-200 hover:text-base-content"
-            @click="link.action"
-          >
-            {{ link.name }}
-          </button>
-          <span v-if="!link.last" :key="link.name"> / </span>
-        </template>
-      </div>
-      <div class="mt-6 flex">
-        <div class="dropdown">
-          <label tabindex="0" class="btn btn-primary btn-sm">
-            <span>
-              <MdiPlus class="-ml-1 mr-1" />
-            </span>
-            Create
-          </label>
-          <ul tabindex="0" class="dropdown-content menu rounded-box w-52 bg-base-100 p-2 shadow">
-            <li v-for="btn in dropdown" :key="btn.name">
-              <button @click="btn.action">
-                {{ btn.name }}
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </BaseContainer>
-  </BaseContainer>
-</template>
diff --git a/frontend/components/App/ImportDialog.vue b/frontend/components/App/ImportDialog.vue
index e553f77d..8f946346 100644
--- a/frontend/components/App/ImportDialog.vue
+++ b/frontend/components/App/ImportDialog.vue
@@ -1,11 +1,12 @@
 <template>
-  <BaseModal v-model="dialog">
-    <template #title> {{ $t("components.app.import_dialog.title") }} </template>
-    <p>
-      {{ $t("components.app.import_dialog.description") }}
-    </p>
-    <div class="alert alert-warning mt-4 shadow-lg">
-      <div>
+  <Dialog dialog-id="import">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ $t("components.app.import_dialog.title") }}</DialogTitle>
+        <DialogDescription> {{ $t("components.app.import_dialog.description") }} </DialogDescription>
+      </DialogHeader>
+
+      <div class="flex gap-2 rounded bg-destructive p-2 text-destructive-foreground shadow-lg">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="mb-auto size-6 shrink-0 stroke-current"
@@ -23,31 +24,30 @@
           {{ $t("components.app.import_dialog.change_warning") }}
         </span>
       </div>
-    </div>
 
-    <form @submit.prevent="submitCsvFile">
-      <div class="flex flex-col gap-2 py-6">
-        <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
+      <form class="flex flex-col gap-4" @submit.prevent="submitCsvFile">
+        <Input ref="importRef" type="file" accept=".csv,.tsv" @change="setFile" />
 
-        <BaseButton type="button" @click="uploadCsv">
-          <MdiUpload class="mr-2 size-5" />
-          {{ $t("components.app.import_dialog.upload") }}
-        </BaseButton>
-        <p class="-mb-5 pt-4 text-center">
-          {{ importCsv?.name }}
-        </p>
-      </div>
-
-      <div class="modal-action">
-        <BaseButton type="submit" :disabled="!importCsv"> {{ $t("global.submit") }} </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
+        <DialogFooter>
+          <Button type="submit" :disabled="!importCsv"> {{ $t("global.submit") }} </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
   import { toast } from "@/components/ui/sonner";
-  import MdiUpload from "~icons/mdi/upload";
+  import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+  } from "@/components/ui/dialog";
+  import { Button } from "@/components/ui/button";
+  import { Input } from "@/components/ui/input";
   type Props = {
     modelValue: boolean;
   };
@@ -81,10 +81,6 @@
     importCsv.value = result.files[0];
   }
 
-  function uploadCsv() {
-    importRef.value?.click();
-  }
-
   async function submitCsvFile() {
     if (!importCsv.value) {
       toast.error("Please select a file to import.");
diff --git a/frontend/components/App/LanguageSelector.vue b/frontend/components/App/LanguageSelector.vue
new file mode 100644
index 00000000..90a8c723
--- /dev/null
+++ b/frontend/components/App/LanguageSelector.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import { Label } from "@/components/ui/label";
+  import { fmtDate } from "~~/composables/use-formatters";
+  import { useViewPreferences } from "~~/composables/use-preferences";
+
+  defineProps({
+    includeText: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  const preferences = useViewPreferences();
+
+  function setLanguage(lang: string) {
+    preferences.value.language = lang;
+  }
+
+  const dateExample = computed(() => {
+    return fmtDate(new Date(Date.now() - 15 * 60000), "relative");
+  });
+</script>
+
+<template>
+  <div class="w-full" :class="{ 'p-5 pt-0': includeText }">
+    <Label v-if="includeText" for="language"> {{ $t("profile.language") }} </Label>
+    <Select
+      id="language"
+      v-model="$i18n.locale"
+      @update:model-value="
+        event => {
+          setLanguage(event as string);
+        }
+      "
+    >
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
+          {{ $t(`languages.${lang}`) }} ({{ $t(`languages.${lang}`, 1, { locale: lang }) }})
+        </SelectItem>
+      </SelectContent>
+    </Select>
+    <p v-if="includeText" class="m-2 text-sm">
+      {{ $t("profile.example") }}: {{ $t("global.created") }} {{ dateExample }}
+    </p>
+  </div>
+</template>
diff --git a/frontend/components/App/OutdatedModal.vue b/frontend/components/App/OutdatedModal.vue
index 58eb9457..a2d51c13 100644
--- a/frontend/components/App/OutdatedModal.vue
+++ b/frontend/components/App/OutdatedModal.vue
@@ -7,7 +7,12 @@
           <p>{{ $t("components.app.outdated.current_version") }}: {{ current }}</p>
           <p>{{ $t("components.app.outdated.latest_version") }}: {{ latest }}</p>
           <p>
-            <a href="https://github.com/sysadminsmedia/homebox/releases" target="_blank" rel="noopener" class="link">
+            <a
+              href="https://github.com/sysadminsmedia/homebox/releases"
+              target="_blank"
+              rel="noopener"
+              class="underline hover:text-primary"
+            >
               {{ $t("components.app.outdated.new_version_available_link") }}
             </a>
           </p>
@@ -30,8 +35,8 @@
     AlertDialogDescription,
     AlertDialogFooter,
     AlertDialogAction,
-  } from "~/components/ui/alert-dialog";
-  import { useDialog } from "~/components/ui/dialog-provider";
+  } from "@/components/ui/alert-dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
 
   const props = defineProps<{
     status: {
diff --git a/frontend/components/App/QuickMenuModal.vue b/frontend/components/App/QuickMenuModal.vue
index 8ecddfa3..428056c6 100644
--- a/frontend/components/App/QuickMenuModal.vue
+++ b/frontend/components/App/QuickMenuModal.vue
@@ -38,12 +38,19 @@
         (e: KeyboardEvent) => {
           const item = props.actions.filter(item => 'shortcut' in item).find(item => item.shortcut === e.key);
           if (item) {
+            e.preventDefault();
             openDialog(item.dialogId);
           }
+          // if esc is pressed, close the dialog
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            closeDialog('quick-menu');
+          }
         }
       "
     />
     <CommandList>
+      <CommandSeparator />
       <CommandEmpty>{{ t("components.quick_menu.no_results") }}</CommandEmpty>
       <CommandGroup :heading="t('global.create')">
         <CommandItem
@@ -51,7 +58,8 @@
           :key="`$global.create_${i + 1}`"
           :value="create.text"
           @select="
-            () => {
+            e => {
+              e.preventDefault();
               openDialog(create.dialogId);
             }
           "
diff --git a/frontend/components/Base/Button.vue b/frontend/components/Base/Button.vue
deleted file mode 100644
index 915ef51a..00000000
--- a/frontend/components/Base/Button.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <NuxtLink
-    v-if="to"
-    v-bind="attributes"
-    ref="submitBtn"
-    class="btn"
-    :class="{
-      loading: loading,
-      'btn-sm': size === 'sm',
-      'btn-lg': size === 'lg',
-    }"
-    :style="upper ? '' : 'text-transform: none'"
-  >
-    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
-      <slot name="icon" />
-    </label>
-    <slot />
-  </NuxtLink>
-  <button
-    v-else
-    v-bind="attributes"
-    ref="submitBtn"
-    class="btn"
-    :class="{
-      loading: loading,
-      'btn-sm': size === 'sm',
-      'btn-lg': size === 'lg',
-    }"
-    :style="upper ? '' : 'text-transform: none'"
-  >
-    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
-      <slot name="icon" />
-    </label>
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-  type Sizes = "sm" | "md" | "lg";
-
-  const props = defineProps({
-    upper: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String as () => Sizes,
-      default: "md",
-    },
-    to: {
-      type: String as () => string | null,
-      default: null,
-    },
-  });
-
-  const attributes = computed(() => {
-    if (props.to) {
-      return {
-        to: props.to,
-      };
-    }
-    return {
-      disabled: props.disabled || props.loading,
-    };
-  });
-
-  const submitBtn = ref(null);
-  const isHover = useElementHover(submitBtn);
-</script>
diff --git a/frontend/components/Base/Card.vue b/frontend/components/Base/Card.vue
index ddc2ed81..5b8aded2 100644
--- a/frontend/components/Base/Card.vue
+++ b/frontend/components/Base/Card.vue
@@ -1,13 +1,12 @@
 <template>
-  <div class="card rounded-lg bg-base-100 shadow-xl">
-    <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
+  <Card class="overflow-hidden shadow-xl">
+    <CardHeader v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
         <h3 class="flex items-center text-lg font-medium leading-6">
           <slot name="title"></slot>
           <template v-if="collapsable">
-            <span class="swap swap-rotate ml-2" :class="`${collapsed ? 'swap-active' : ''}`">
-              <MdiChevronRight class="swap-on size-6" />
-              <MdiChevronDown class="swap-off size-6" />
+            <span class="ml-2 transition-transform" :class="{ 'rotate-180': collapsed }">
+              <MdiChevronDown class="size-6" />
             </span>
           </template>
         </h3>
@@ -20,22 +19,22 @@
           <slot name="title-actions"></slot>
         </template>
       </div>
-    </div>
-    <div
+    </CardHeader>
+    <CardContent
       :class="{
         'max-h-[9000px]': collapsable && !collapsed,
         'max-h-0 overflow-hidden': collapsed,
       }"
-      class="transition-[max-height] duration-200"
+      class="p-0 transition-[max-height] duration-200"
     >
       <slot />
-    </div>
-  </div>
+    </CardContent>
+  </Card>
 </template>
 
 <script setup lang="ts">
   import MdiChevronDown from "~icons/mdi/chevron-down";
-  import MdiChevronRight from "~icons/mdi/chevron-right";
+  import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
   defineProps<{
     collapsable?: boolean;
diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
deleted file mode 100644
index 9eb4be12..00000000
--- a/frontend/components/Base/Modal.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div class="z-[999]">
-    <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
-    <div
-      class="modal overflow-visible sm:modal-middle"
-      :class="{ 'modal-bottom': !props.modalTop }"
-      :modal-top="props.modalTop"
-    >
-      <div ref="modalBox" class="modal-box relative overflow-x-hidden overflow-y-scroll">
-        <button
-          v-if="props.showCloseButton"
-          :for="modalId"
-          class="btn btn-circle btn-sm absolute right-2 top-2"
-          @click="close"
-        >
-          ✕
-        </button>
-
-        <h3 class="text-lg font-bold">
-          <slot name="title"></slot>
-        </h3>
-        <slot> </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const emit = defineEmits(["cancel", "update:modelValue"]);
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    /**
-     * in readonly mode the modal only `emits` a "cancel" event to indicate
-     * that the modal was closed via the "x" button. The parent component is
-     * responsible for closing the modal.
-     */
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    clickOutsideToClose: {
-      type: Boolean,
-      default: false,
-    },
-    modalTop: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const modalBox = ref();
-
-  function escClose(e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      close();
-    }
-  }
-
-  if (props.clickOutsideToClose) {
-    onClickOutside(modalBox, () => {
-      close();
-    });
-  }
-
-  function close() {
-    if (props.readonly) {
-      emit("cancel");
-      return;
-    }
-    modal.value = false;
-  }
-
-  const modalId = useId();
-  const modal = useVModel(props, "modelValue", emit);
-
-  watchEffect(() => {
-    if (modal.value) {
-      document.addEventListener("keydown", escClose);
-    } else {
-      document.removeEventListener("keydown", escClose);
-    }
-  });
-</script>
-
-<style lang="css" scoped>
-  @media (max-width: 640px) {
-    .modal[modal-top="true"] {
-      align-items: start;
-    }
-
-    .modal[modal-top="true"] :where(.modal-box) {
-      max-width: none;
-      --tw-translate-y: 2.5rem /* 40px */;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-      width: 100%;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-  }
-</style>
diff --git a/frontend/components/Base/SectionHeader.vue b/frontend/components/Base/SectionHeader.vue
index 9f1a86f2..f9d88315 100644
--- a/frontend/components/Base/SectionHeader.vue
+++ b/frontend/components/Base/SectionHeader.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="pb-3">
-    <h3
-      class="flex items-center text-3xl font-bold tracking-tight"
+    <CardTitle
+      class="flex items-center"
       :class="{
         'text-neutral-content': dark,
       }"
     >
       <slot />
-    </h3>
-    <p v-if="$slots.description" class="mt-2 max-w-4xl text-sm text-base-content">
+    </CardTitle>
+    <CardDescription v-if="$slots.description">
       <slot name="description" />
-    </p>
+    </CardDescription>
     <div v-if="$slots.after">
       <slot name="after" />
     </div>
@@ -18,6 +18,8 @@
 </template>
 
 <script lang="ts" setup>
+  import { CardDescription, CardTitle } from "@/components/ui/card";
+
   defineProps({
     dark: {
       type: Boolean,
diff --git a/frontend/components/DetailAction.vue b/frontend/components/DetailAction.vue
index 600f8915..8eb96fc8 100644
--- a/frontend/components/DetailAction.vue
+++ b/frontend/components/DetailAction.vue
@@ -8,10 +8,30 @@
         <slot></slot>
       </p>
     </div>
-    <BaseButton class="btn-primary mt-auto" @click="$emit('action')">
-      <slot name="button">
-        <slot name="title"></slot>
-      </slot>
-    </BaseButton>
+    <template v-if="to">
+      <NuxtLink class="mt-auto" :to="to" :class="buttonVariants({ size: 'lg' })">
+        <slot name="button">
+          <slot name="title"></slot>
+        </slot>
+      </NuxtLink>
+    </template>
+    <template v-else>
+      <Button class="mt-auto" size="lg" @click="$emit('action')">
+        <slot name="button">
+          <slot name="title"></slot>
+        </slot>
+      </Button>
+    </template>
   </div>
 </template>
+
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import { Button, buttonVariants } from "@/components/ui/button";
+
+  defineProps<{
+    to?: string;
+  }>();
+
+  defineEmits(["action"]);
+</script>
diff --git a/frontend/components/Form/Autocomplete.vue b/frontend/components/Form/Autocomplete.vue
deleted file mode 100644
index 527f7ac6..00000000
--- a/frontend/components/Form/Autocomplete.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div ref="menu" class="form-control w-full">
-    <label class="label">
-      <span class="label-text">{{ label }}</span>
-    </label>
-    <div class="dropdown dropdown-top sm:dropdown-end">
-      <div class="relative">
-        <input
-          v-model="internalSearch"
-          tabindex="0"
-          class="input flex w-full flex-wrap items-center rounded-lg border border-gray-400"
-          @keyup.enter="selectFirst"
-        />
-        <button
-          v-if="!!modelValue && Object.keys(modelValue).length !== 0"
-          style="transform: translateY(-50%)"
-          class="btn btn-circle btn-xs no-animation absolute right-2 top-1/2"
-          @click="clear"
-        >
-          x
-        </button>
-      </div>
-      <ul
-        tabindex="0"
-        style="display: inline"
-        class="dropdown-content menu z-[9999] mb-1 max-h-60 w-full overflow-y-scroll rounded border border-gray-400 bg-base-100 shadow"
-      >
-        <li v-for="(obj, idx) in filtered" :key="idx">
-          <div type="button" @click="select(obj)">
-            <slot name="display" v-bind="{ item: obj }">
-              {{ extractor(obj, itemText) }}
-            </slot>
-          </div>
-        </li>
-        <li class="hidden first:flex">
-          <button disabled>
-            {{ noResultsText }}
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  type ItemsObject = {
-    text?: string;
-    value?: string;
-    [key: string]: unknown;
-  };
-
-  interface Props {
-    label: string;
-    modelValue: string | ItemsObject | null | undefined;
-    items: ItemsObject[] | string[];
-    itemText?: keyof ItemsObject;
-    itemSearch?: keyof ItemsObject | null;
-    itemValue?: keyof ItemsObject;
-    search?: string;
-    noResultsText?: string;
-  }
-
-  const emit = defineEmits(["update:modelValue", "update:search"]);
-  const props = withDefaults(defineProps<Props>(), {
-    label: "",
-    modelValue: "",
-    items: () => [],
-    itemText: "text",
-    search: "",
-    itemSearch: null,
-    itemValue: "value",
-    noResultsText: "No Results Found",
-  });
-
-  const searchKey = computed(() => props.itemSearch || props.itemText);
-
-  function clear() {
-    select(value.value);
-  }
-
-  const internalSearch = ref("");
-
-  watch(
-    () => props.search,
-    val => {
-      internalSearch.value = val;
-    }
-  );
-
-  watch(
-    () => internalSearch.value,
-    val => {
-      emit("update:search", val);
-    }
-  );
-
-  function extractor(obj: string | ItemsObject, key: string | number): string {
-    if (typeof obj === "string") {
-      return obj;
-    }
-
-    return obj[key] as string;
-  }
-
-  const value = useVModel(props, "modelValue", emit);
-
-  const usingObjects = computed(() => {
-    return props.items.length > 0 && typeof props.items[0] === "object";
-  });
-
-  /**
-   * isStrings is a type guard function to check if the items are an array of string
-   */
-  function isStrings(_arr: string[] | ItemsObject[]): _arr is string[] {
-    return !usingObjects.value;
-  }
-
-  function selectFirst() {
-    if (filtered.value.length > 0) {
-      select(filtered.value[0]);
-    }
-  }
-
-  watch(
-    value,
-    () => {
-      if (value.value) {
-        if (typeof value.value === "string") {
-          internalSearch.value = value.value;
-        } else {
-          internalSearch.value = value.value[searchKey.value] as string;
-        }
-      }
-    },
-    {
-      immediate: true,
-    }
-  );
-
-  function select(obj: Props["modelValue"]) {
-    if (isStrings(props.items)) {
-      if (obj === value.value) {
-        value.value = "";
-        return;
-      }
-      // @ts-ignore
-      value.value = obj;
-    } else {
-      if (obj === value.value) {
-        value.value = {};
-        return;
-      }
-
-      // @ts-ignore
-      value.value = obj;
-    }
-  }
-
-  const filtered = computed(() => {
-    if (!internalSearch.value || internalSearch.value === "") {
-      return props.items;
-    }
-
-    if (isStrings(props.items)) {
-      return props.items.filter(item => item.toLowerCase().includes(internalSearch.value.toLowerCase()));
-    } else {
-      return props.items.filter(item => {
-        if (searchKey.value && searchKey.value in item) {
-          return (item[searchKey.value] as string).toLowerCase().includes(internalSearch.value.toLowerCase());
-        }
-        return false;
-      });
-    }
-  });
-</script>
diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue
deleted file mode 100644
index 552c5da5..00000000
--- a/frontend/components/Form/Autocomplete2.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <div>
-    <Combobox v-model="value">
-      <ComboboxLabel class="label">
-        <span class="label-text">{{ label }}</span>
-      </ComboboxLabel>
-      <div class="relative">
-        <ComboboxInput
-          :display-value="i => extractDisplay(i as SupportValues)"
-          class="input input-bordered w-full"
-          @change="search = $event.target.value"
-        />
-        <button
-          v-if="!!value"
-          type="button"
-          class="absolute inset-y-0 right-6 flex items-center rounded-r-md px-2 focus:outline-none"
-          @click="clear"
-        >
-          <MdiClose class="size-5" />
-        </button>
-        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
-          <MdiChevronDown class="size-5" />
-        </ComboboxButton>
-        <ComboboxOptions
-          v-if="computedItems.length > 0"
-          class="card dropdown-content absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded-md border border-gray-400 bg-base-100"
-        >
-          <ComboboxOption
-            v-for="item in computedItems"
-            :key="item.id"
-            v-slot="{ active, selected }"
-            :value="item.value"
-            as="template"
-          >
-            <li
-              :class="[
-                'relative cursor-default select-none py-2 pl-3 pr-9 transition-colors duration-75 ease-in-out',
-                active ? 'bg-primary text-primary-content' : 'text-base-content',
-              ]"
-            >
-              <slot name="display" v-bind="{ item: item, selected, active }">
-                <span :class="['block truncate', selected && 'font-semibold']">
-                  {{ item.display }}
-                </span>
-                <span
-                  v-if="selected"
-                  :class="[
-                    'absolute inset-y-0 right-0 flex items-center pr-4 text-primary',
-                    active ? 'text-primary-content' : 'bg-primary',
-                  ]"
-                >
-                  <MdiCheck class="size-5" aria-hidden="true" />
-                </span>
-              </slot>
-            </li>
-          </ComboboxOption>
-        </ComboboxOptions>
-      </div>
-    </Combobox>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import lunr from "lunr";
-  import {
-    Combobox,
-    ComboboxInput,
-    ComboboxOptions,
-    ComboboxOption,
-    ComboboxButton,
-    ComboboxLabel,
-  } from "@headlessui/vue";
-  import MdiClose from "~icons/mdi/close";
-  import MdiChevronDown from "~icons/mdi/chevron-down";
-  import MdiCheck from "~icons/mdi/check";
-
-  type SupportValues = string | { [key: string]: any };
-
-  type ComboItem = {
-    display: string;
-    value: SupportValues;
-    id: number;
-  };
-
-  type Props = {
-    label: string;
-    modelValue: SupportValues | null | undefined;
-    items: {
-      id: string;
-      treeString: string;
-    }[];
-    display?: string;
-    multiple?: boolean;
-  };
-
-  const emit = defineEmits(["update:modelValue", "update:search"]);
-  const props = withDefaults(defineProps<Props>(), {
-    label: "",
-    modelValue: "",
-    display: "text",
-    multiple: false,
-  });
-
-  function clear() {
-    emit("update:modelValue", null);
-  }
-
-  const search = ref("");
-  const value = useVModel(props, "modelValue", emit);
-
-  function extractDisplay(item?: SupportValues): string {
-    if (!item) {
-      return "";
-    }
-
-    if (typeof item === "string") {
-      return item;
-    }
-
-    if (props.display in item) {
-      return item[props.display] as string;
-    }
-
-    // Try these options as well
-    const fallback = ["name", "title", "display", "value"];
-    for (let i = 0; i < fallback.length; i++) {
-      const key = fallback[i];
-      if (key in item) {
-        return item[key] as string;
-      }
-    }
-
-    return "";
-  }
-
-  function lunrFactory() {
-    return lunr(function () {
-      this.ref("id");
-      this.field("display");
-
-      for (let i = 0; i < props.items.length; i++) {
-        const item = props.items[i];
-        const display = extractDisplay(item);
-        this.add({ id: i, display });
-      }
-    });
-  }
-
-  const index = ref<ReturnType<typeof lunrFactory>>(lunrFactory());
-
-  watchEffect(() => {
-    if (props.items) {
-      index.value = lunrFactory();
-    }
-  });
-
-  const computedItems = computed<ComboItem[]>(() => {
-    const list: ComboItem[] = [];
-
-    const matches = index.value.search("*" + search.value + "*");
-
-    const resultIDs = [];
-    for (let i = 0; i < matches.length; i++) {
-      const match = matches[i];
-      const item = props.items[parseInt(match.ref)];
-      const display = extractDisplay(item);
-      list.push({ id: i, display, value: item });
-      resultIDs.push(item.id);
-    }
-
-    /**
-     * Supplementary search,
-     * Resolve the issue of language not being supported
-     */
-    for (let i = 0; i < props.items.length; i++) {
-      const item = props.items[i];
-      if (resultIDs.find(item_ => item_ === item.id) !== undefined) {
-        continue;
-      }
-      if (item.treeString.includes(search.value)) {
-        const display = extractDisplay(item);
-        list.push({ id: i, display, value: item });
-      }
-    }
-
-    return list;
-  });
-</script>
diff --git a/frontend/components/Form/Checkbox.vue b/frontend/components/Form/Checkbox.vue
index ebf43224..11236348 100644
--- a/frontend/components/Form/Checkbox.vue
+++ b/frontend/components/Form/Checkbox.vue
@@ -1,21 +1,22 @@
 <template>
-  <div v-if="!inline" class="form-control w-full">
-    <label class="label cursor-pointer">
-      <input v-model="value" type="checkbox" class="checkbox checkbox-primary" />
-      <span class="label-text"> {{ label }}</span>
-    </label>
+  <div v-if="!inline" class="flex w-full items-center gap-1.5">
+    <Checkbox :id="id" v-model="value" class="size-6" />
+    <Label :for="id" class="cursor-pointer">
+      {{ label }}
+    </Label>
   </div>
-  <div v-else class="label cursor-pointer sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
-    <label>
-      <span class="label-text">
-        {{ label }}
-      </span>
-    </label>
-    <input v-model="value" type="checkbox" class="checkbox checkbox-primary" />
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <Label :for="id" class="flex w-full cursor-pointer px-1 py-2">
+      {{ label }}
+    </Label>
+    <Checkbox :id="id" v-model="value" class="size-6" />
   </div>
 </template>
 
 <script setup lang="ts">
+  import { Label } from "@/components/ui/label";
+  import { Checkbox } from "@/components/ui/checkbox";
+
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -32,4 +33,6 @@
   });
 
   const value = useVModel(props, "modelValue");
+
+  const id = useId();
 </script>
diff --git a/frontend/components/Form/DatePicker.vue b/frontend/components/Form/DatePicker.vue
index 7422b603..8ef24a04 100644
--- a/frontend/components/Form/DatePicker.vue
+++ b/frontend/components/Form/DatePicker.vue
@@ -1,29 +1,11 @@
 <template>
-  <div v-if="!inline" class="form-control w-full">
-    <label class="label">
-      <span class="label-text"> {{ label }} </span>
-    </label>
-    <VueDatePicker
-      v-model="selected"
-      :enable-time-picker="false"
-      clearable
-      :dark="isDark"
-      :teleport="true"
-      :format="formatDate"
-    />
+  <div v-if="!inline" class="flex w-full flex-col">
+    <Label class="cursor-pointer"> {{ label }} </Label>
+    <VueDatePicker v-model="selected" :enable-time-picker="false" clearable :dark="isDark" :format="formatDate" />
   </div>
-  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
-    <label class="label">
-      <span class="label-text"> {{ label }} </span>
-    </label>
-    <VueDatePicker
-      v-model="selected"
-      :enable-time-picker="false"
-      clearable
-      :dark="isDark"
-      :teleport="true"
-      :format="formatDate"
-    />
+  <div v-else class="sm:flex sm:items-start sm:gap-4">
+    <Label class="flex w-full cursor-pointer px-1 py-2"> {{ label }} </Label>
+    <VueDatePicker v-model="selected" :enable-time-picker="false" clearable :dark="isDark" :format="formatDate" />
   </div>
 </template>
 
@@ -32,6 +14,8 @@
   import VueDatePicker from "@vuepic/vue-datepicker";
   import "@vuepic/vue-datepicker/dist/main.css";
   import * as datelib from "~/lib/datelib/datelib";
+  import { Label } from "@/components/ui/label";
+
   const emit = defineEmits(["update:modelValue", "update:text"]);
 
   const props = defineProps({
diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
deleted file mode 100644
index a822b43a..00000000
--- a/frontend/components/Form/Multiselect.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div ref="menu" class="form-control w-full">
-    <label class="label">
-      <span class="label-text">{{ label }}</span>
-    </label>
-    <div class="dropdown dropdown-top sm:dropdown-end">
-      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content/20 p-4">
-        <span v-for="itm in value" :key="itm.id" class="badge">
-          {{ itm.name }}
-        </span>
-        <button
-          v-if="value.length > 0"
-          type="button"
-          class="absolute inset-y-0 right-6 flex items-center rounded-r-md px-2 focus:outline-none"
-          @click="clear"
-        >
-          <MdiClose class="size-5" />
-        </button>
-      </div>
-      <div
-        tabindex="0"
-        style="display: inline"
-        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-base-content/20 bg-base-100 shadow"
-      >
-        <div class="m-2">
-          <input v-model="search" placeholder="Search…" class="input input-bordered input-sm w-full" />
-        </div>
-        <ul class="max-h-60 overflow-y-scroll">
-          <li
-            v-for="(obj, idx) in filteredItems"
-            :key="idx"
-            :class="{
-              bordered: selected.includes(obj.id),
-            }"
-          >
-            <button type="button" @click="toggle(obj.id)">
-              {{ obj.name }}
-            </button>
-          </li>
-          <li v-if="!filteredItems.some(itm => itm.name === search) && search.length > 0">
-            <button type="button" @click="createAndAdd(search)">{{ $t("global.create") }} {{ search }}</button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { toast } from "@/components/ui/sonner";
-  import MdiClose from "~icons/mdi/close";
-
-  const emit = defineEmits(["update:modelValue"]);
-  const props = defineProps({
-    label: {
-      type: String,
-      default: "",
-    },
-    modelValue: {
-      type: Array as () => any[],
-      default: null,
-    },
-    items: {
-      type: Array as () => any[],
-      required: true,
-    },
-    selectFirst: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const value = useVModel(props, "modelValue", emit);
-
-  const search = ref("");
-
-  const filteredItems = computed(() => {
-    if (!search.value) {
-      return props.items;
-    }
-
-    return props.items.filter(item => {
-      return item.name.toLowerCase().includes(search.value.toLowerCase());
-    });
-  });
-
-  function clear() {
-    value.value = [];
-  }
-
-  const selected = computed<string[]>(() => {
-    return value.value.map(itm => itm.id);
-  });
-
-  function toggle(uniqueField: string) {
-    const item = props.items.find(itm => itm.id === uniqueField);
-    if (selected.value.includes(item.id)) {
-      value.value = value.value.filter(itm => itm.id !== item.id);
-    } else {
-      value.value = [...value.value, item];
-    }
-  }
-
-  const api = useUserApi();
-
-  async function createAndAdd(name: string) {
-    const { error, data } = await api.labels.create({
-      name,
-      color: "", // Future!
-      description: "",
-    });
-
-    if (error) {
-      console.error(error);
-      toast.error(`Failed to create label: ${name}`);
-    } else {
-      value.value = [...value.value, data];
-    }
-  }
-</script>
diff --git a/frontend/components/Form/Password.vue b/frontend/components/Form/Password.vue
index 6a1791a7..76102189 100644
--- a/frontend/components/Form/Password.vue
+++ b/frontend/components/Form/Password.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="relative">
     <FormTextField v-model="value" placeholder="Password" :label="label" :type="inputType"> </FormTextField>
-    <button
-      type="button"
-      class="tooltip absolute right-3 top-6 mb-3 ml-1 mt-auto inline-flex justify-center p-1"
-      data-tip="Toggle Password Show"
-      @click="toggle()"
-    >
-      <MdiEye name="mdi-eye" class="size-5" />
-    </button>
+    <TooltipProvider :delay-duration="0">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <button
+            type="button"
+            class="absolute right-3 top-6 mb-3 ml-1 mt-auto inline-flex justify-center p-1"
+            @click="toggle()"
+          >
+            <MdiEye name="mdi-eye" class="size-5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Toggle Password Show</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   </div>
 </template>
 
 <script setup lang="ts">
   import MdiEye from "~icons/mdi/eye";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 
   type Props = {
     modelValue: string;
diff --git a/frontend/components/Form/Select.vue b/frontend/components/Form/Select.vue
deleted file mode 100644
index 919720f0..00000000
--- a/frontend/components/Form/Select.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="form-control w-full">
-    <label class="label">
-      <span class="label-text">{{ label }}</span>
-    </label>
-    <select v-model="selectedIdx" class="select select-bordered">
-      <option disabled selected>Pick one</option>
-      <option v-for="(obj, idx) in items" :key="name != '' ? obj[name] : obj" :value="idx">
-        {{ name != "" ? obj[name] : obj }}
-      </option>
-    </select>
-    <!-- <label class="label">
-      <span class="label-text-alt">Alt label</span>
-      <span class="label-text-alt">Alt label</span>
-    </label> -->
-  </div>
-</template>
-
-<script lang="ts" setup>
-  const emit = defineEmits(["update:modelValue", "update:value"]);
-  const props = defineProps({
-    label: {
-      type: String,
-      default: "",
-    },
-    modelValue: {
-      type: [Object, String] as any,
-      default: null,
-    },
-    items: {
-      type: Array as () => any[],
-      required: true,
-    },
-    name: {
-      type: String,
-      default: "name",
-    },
-    valueKey: {
-      type: String,
-      default: null,
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    compareKey: {
-      type: String,
-      default: null,
-    },
-  });
-
-  const selectedIdx = ref(-1);
-
-  const internalSelected = useVModel(props, "modelValue", emit);
-  const internalValue = useVModel(props, "value", emit);
-
-  watch(
-    selectedIdx,
-    newVal => {
-      if (newVal === -1) {
-        return;
-      }
-
-      if (props.value) {
-        internalValue.value = props.items[newVal][props.valueKey];
-      }
-
-      internalSelected.value = props.items[newVal];
-    },
-    { immediate: true }
-  );
-
-  watch(
-    [internalSelected, () => props.value],
-    () => {
-      if (props.valueKey) {
-        const idx = props.items.findIndex(item => compare(item, internalValue.value));
-        selectedIdx.value = idx;
-        return;
-      }
-      const idx = props.items.findIndex(item => compare(item, internalSelected.value));
-      selectedIdx.value = idx;
-    },
-    { immediate: true }
-  );
-
-  function compare(a: any, b: any): boolean {
-    if (a === b) {
-      return true;
-    }
-
-    if (props.valueKey) {
-      return a[props.valueKey] === b;
-    }
-
-    // Try compare key
-    if (props.compareKey && a && b) {
-      return a[props.compareKey] === b[props.compareKey];
-    }
-
-    return JSON.stringify(a) === JSON.stringify(b);
-  }
-</script>
diff --git a/frontend/components/Form/TextArea.vue b/frontend/components/Form/TextArea.vue
index 18e7f49c..9c878a59 100644
--- a/frontend/components/Form/TextArea.vue
+++ b/frontend/components/Form/TextArea.vue
@@ -3,37 +3,39 @@
     <Label :for="id" class="flex w-full px-1">
       <span>{{ label }}</span>
       <span class="grow"></span>
-      <span
-        :class="{
-          'text-red-600':
-            typeof value === 'string' &&
-            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
-        }"
-      >
-        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
+      <span :class="{ 'text-red-600': isLengthInvalid }">
+        {{ lengthIndicator }}
       </span>
     </Label>
-    <Textarea :id="id" v-model="value" :placeholder="placeholder" class="min-h-[112px] w-full resize-none" />
+    <Textarea
+      :id="id"
+      v-model="value"
+      :placeholder="placeholder"
+      class="min-h-[112px] w-full resize-none"
+      @keydown="handleKeyDown"
+    />
   </div>
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <Label :for="id" class="flex w-full px-1 py-2">
       <span>{{ label }}</span>
       <span class="grow"></span>
-      <span
-        :class="{
-          'text-red-600':
-            typeof value === 'string' &&
-            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
-        }"
-      >
-        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
+      <span :class="{ 'text-red-600': isLengthInvalid }">
+        {{ lengthIndicator }}
       </span>
     </Label>
-    <Textarea :id="id" v-model="value" autosize :placeholder="placeholder" class="col-span-3 mt-2 w-full resize-none" />
+    <Textarea
+      :id="id"
+      v-model="value"
+      autosize
+      :placeholder="placeholder"
+      class="col-span-3 mt-2 w-full resize-none"
+      @keydown="handleKeyDown"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+  import { computed } from "vue";
   import { Label } from "~/components/ui/label";
   import { Textarea } from "~/components/ui/textarea";
 
@@ -68,4 +70,35 @@
 
   const id = useId();
   const value = useVModel(props, "modelValue");
+
+  const isLengthInvalid = computed(() => {
+    if (typeof value.value !== "string") return false;
+    const len = value.value.length;
+    const max = props.maxLength;
+    const min = props.minLength;
+    // invalid if max length exists and is exceeded OR min length exists and is not met
+    return (max !== -1 && len > max) || (min !== -1 && len < min);
+  });
+
+  const lengthIndicator = computed(() => {
+    if (typeof value.value !== "string") return "";
+    const max = props.maxLength;
+    if (max !== -1) {
+      return `${value.value.length}/${max}`;
+    }
+    return "";
+  });
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.ctrlKey && event.key === "Enter") {
+      // find the closest ancestor form element
+      const targetElement = event.target as HTMLElement;
+      const form = targetElement.closest("form");
+
+      if (form) {
+        event.preventDefault();
+        form.requestSubmit();
+      }
+    }
+  };
 </script>
diff --git a/frontend/components/Form/Toggle.vue b/frontend/components/Form/Toggle.vue
deleted file mode 100644
index e22decd5..00000000
--- a/frontend/components/Form/Toggle.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div v-if="!inline" class="form-control w-full">
-    <label class="label cursor-pointer">
-      <input v-model="value" type="checkbox" class="toggle toggle-primary" />
-      <span class="label-text"> {{ label }}</span>
-    </label>
-  </div>
-  <div v-else class="label cursor-pointer sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
-    <label>
-      <span class="label-text">
-        {{ label }}
-      </span>
-    </label>
-    <input v-model="value" type="checkbox" class="toggle toggle-primary" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    inline: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-  });
-
-  const value = useVModel(props, "modelValue");
-</script>
diff --git a/frontend/components/Item/AttachmentsList.vue b/frontend/components/Item/AttachmentsList.vue
index ccfbacdb..e0247d76 100644
--- a/frontend/components/Item/AttachmentsList.vue
+++ b/frontend/components/Item/AttachmentsList.vue
@@ -9,13 +9,29 @@
         <MdiPaperclip class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
         <span class="ml-2 w-0 flex-1 truncate"> {{ attachment.document.title }}</span>
       </div>
-      <div class="ml-4 shrink-0">
-        <a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank">
-          <MdiDownload class="size-5" />
-        </a>
-        <a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank">
-          <MdiOpenInNew class="size-5" />
-        </a>
+      <div class="ml-4 flex shrink-0 gap-2">
+        <TooltipProvider :delay-duration="0">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <a
+                :class="buttonVariants({ size: 'icon' })"
+                :href="attachmentURL(attachment.id)"
+                :download="attachment.document.title"
+              >
+                <MdiDownload />
+              </a>
+            </TooltipTrigger>
+            <TooltipContent> Download </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <a :class="buttonVariants({ size: 'icon' })" :href="attachmentURL(attachment.id)" target="_blank">
+                <MdiOpenInNew />
+              </a>
+            </TooltipTrigger>
+            <TooltipContent> Open in new tab </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
     </li>
   </ul>
@@ -26,6 +42,8 @@
   import MdiPaperclip from "~icons/mdi/paperclip";
   import MdiDownload from "~icons/mdi/download";
   import MdiOpenInNew from "~icons/mdi/open-in-new";
+  import { buttonVariants } from "@/components/ui/button";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 
   const props = defineProps({
     attachments: {
diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue
index f164e3b8..b90b30e0 100644
--- a/frontend/components/Item/Card.vue
+++ b/frontend/components/Item/Card.vue
@@ -1,52 +1,67 @@
 <template>
-  <NuxtLink class="group card rounded-md border border-gray-300" :to="`/item/${item.id}`">
-    <div class="relative h-[200px]">
-      <img
-        v-if="imageUrl"
-        class="h-[200px] w-full rounded-t border-gray-300 object-cover shadow-sm"
-        loading="lazy"
-        :src="imageUrl"
-        alt=""
-      />
-      <div class="absolute inset-x-1 bottom-1 text-wrap">
-        <NuxtLink
-          v-if="item.location"
-          class="badge h-auto rounded-md text-sm shadow-md hover:link"
-          :to="`/location/${item.location.id}`"
-        >
-          {{ locationString }}
-        </NuxtLink>
-      </div>
-    </div>
-    <div class="col-span-4 flex grow flex-col gap-y-1 rounded-b bg-base-100 p-4 pt-2">
-      <h2 class="line-clamp-2 text-ellipsis text-wrap text-lg font-bold">{{ item.name }}</h2>
-      <div class="divider my-0"></div>
-      <div class="flex gap-2">
-        <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">
-          <MdiShieldCheck class="size-5 text-primary" />
-        </div>
-        <div v-if="item.archived" class="tooltip z-10" data-tip="Archived">
-          <MdiArchive class="size-5 text-red-700" />
-        </div>
-        <div class="grow"></div>
-        <div class="tooltip" data-tip="Quantity">
-          <span class="badge badge-primary badge-sm h-5 text-xs">
-            {{ item.quantity }}
-          </span>
+  <Card class="overflow-hidden">
+    <NuxtLink :to="`/item/${item.id}`">
+      <div class="relative h-[200px]">
+        <img v-if="imageUrl" class="h-[200px] w-full object-cover shadow-md" loading="lazy" :src="imageUrl" alt="" />
+        <div class="absolute inset-x-1 bottom-1">
+          <Badge class="text-wrap bg-neutral text-neutral-content hover:bg-neutral/90 hover:underline">
+            <NuxtLink v-if="item.location" :to="`/location/${item.location.id}`">
+              {{ locationString }}
+            </NuxtLink>
+          </Badge>
         </div>
       </div>
-      <Markdown class="mb-2 line-clamp-3 text-ellipsis" :source="item.description" />
-      <div class="-mr-1 mt-auto flex flex-wrap justify-end gap-2">
-        <LabelChip v-for="label in top3" :key="label.id" :label="label" size="sm" />
+      <div class="col-span-4 flex grow flex-col gap-y-1 bg-base-100 p-4 pt-2">
+        <h2 class="line-clamp-2 text-ellipsis text-wrap text-lg font-bold">{{ item.name }}</h2>
+        <Separator class="mb-1" />
+        <TooltipProvider :delay-duration="0">
+          <div class="flex items-center gap-2">
+            <Tooltip v-if="item.insured">
+              <TooltipTrigger>
+                <MdiShieldCheck class="size-5 text-primary" />
+              </TooltipTrigger>
+              <TooltipContent>
+                {{ $t("global.insured") }}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip v-if="item.archived">
+              <TooltipTrigger>
+                <MdiArchive class="size-5 text-red-700" />
+              </TooltipTrigger>
+              <TooltipContent>
+                {{ $t("global.archived") }}
+              </TooltipContent>
+            </Tooltip>
+            <div class="grow"></div>
+            <Tooltip>
+              <TooltipTrigger>
+                <Badge>
+                  {{ item.quantity }}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                {{ $t("global.quantity") }}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+        <Markdown class="mb-2 line-clamp-3 text-ellipsis" :source="item.description" />
+        <div class="-mr-1 mt-auto flex flex-wrap justify-end gap-2">
+          <LabelChip v-for="label in top3" :key="label.id" :label="label" size="sm" />
+        </div>
       </div>
-    </div>
-  </NuxtLink>
+    </NuxtLink>
+  </Card>
 </template>
 
 <script setup lang="ts">
   import type { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
   import MdiShieldCheck from "~icons/mdi/shield-check";
   import MdiArchive from "~icons/mdi/archive";
+  import { Badge } from "@/components/ui/badge";
+  import { Card } from "@/components/ui/card";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+  import { Separator } from "@/components/ui/separator";
 
   const api = useUserApi();
 
diff --git a/frontend/components/Item/Selector.vue b/frontend/components/Item/Selector.vue
new file mode 100644
index 00000000..a455f6a0
--- /dev/null
+++ b/frontend/components/Item/Selector.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Label :for="id" class="px-1">
+      {{ label }}
+    </Label>
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button :id="id" variant="outline" role="combobox" :aria-expanded="open" class="w-full justify-between">
+          <span>
+            <slot name="display" v-bind="{ item: value }">
+              {{ displayValue(value) || placeholder }}
+            </slot>
+          </span>
+          <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[--reka-popper-anchor-width] p-0">
+        <Command :ignore-filter="true">
+          <CommandInput v-model="search" :placeholder="searchPlaceholder" :display-value="_ => ''" />
+          <CommandEmpty>
+            {{ noResultsText }}
+          </CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              <CommandItem v-for="item in filtered" :key="itemKey(item)" :value="itemKey(item)" @select="select(item)">
+                <Check :class="cn('mr-2 h-4 w-4', isSelected(item) ? 'opacity-100' : 'opacity-0')" />
+                <slot name="display" v-bind="{ item }">
+                  {{ displayValue(item) }}
+                </slot>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch } from "vue";
+  import { Check, ChevronsUpDown } from "lucide-vue-next";
+  import fuzzysort from "fuzzysort";
+  import { useVModel } from "@vueuse/core";
+  import { Button } from "~/components/ui/button";
+  import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "~/components/ui/command";
+  import { Label } from "~/components/ui/label";
+  import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
+  import { cn } from "~/lib/utils";
+  import { useId } from "#imports";
+
+  type ItemsObject = {
+    [key: string]: unknown;
+  };
+
+  interface Props {
+    label: string;
+    modelValue: string | ItemsObject | null | undefined;
+    items: ItemsObject[] | string[];
+    itemText?: string;
+    itemValue?: string;
+    search?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    placeholder?: string;
+  }
+
+  const emit = defineEmits(["update:modelValue", "update:search"]);
+  const props = withDefaults(defineProps<Props>(), {
+    label: "",
+    modelValue: "",
+    items: () => [],
+    itemText: "text",
+    itemValue: "value",
+    search: "",
+    searchPlaceholder: "Type to search...",
+    noResultsText: "No Results Found",
+    placeholder: "Select...",
+  });
+
+  const id = useId();
+  const open = ref(false);
+  const search = ref(props.search);
+  const value = useVModel(props, "modelValue", emit);
+
+  watch(
+    () => props.search,
+    val => {
+      search.value = val;
+    }
+  );
+
+  watch(
+    () => search.value,
+    val => {
+      emit("update:search", val);
+    }
+  );
+
+  function isStrings(arr: string[] | ItemsObject[]): arr is string[] {
+    return typeof arr[0] === "string";
+  }
+
+  function displayValue(item: string | ItemsObject | null | undefined): string {
+    if (!item) return "";
+    if (typeof item === "string") return item;
+    return (item[props.itemText] as string) || "";
+  }
+
+  function itemKey(item: string | ItemsObject): string {
+    if (typeof item === "string") return item;
+    return (item[props.itemValue] as string) || displayValue(item);
+  }
+
+  function isSelected(item: string | ItemsObject): boolean {
+    if (!value.value) return false;
+    if (typeof item === "string") return value.value === item;
+    if (typeof value.value === "string") return itemKey(item) === value.value;
+    return itemKey(item) === itemKey(value.value);
+  }
+
+  function select(item: string | ItemsObject) {
+    if (isSelected(item)) {
+      value.value = null;
+    } else {
+      value.value = item;
+    }
+    open.value = false;
+  }
+
+  const filtered = computed(() => {
+    if (!search.value) return props.items;
+    if (isStrings(props.items)) {
+      return props.items.filter(item => item.toLowerCase().includes(search.value.toLowerCase()));
+    } else {
+      // Fuzzy search on itemText
+      return fuzzysort.go(search.value, props.items, { key: props.itemText, all: true }).map(i => i.obj);
+    }
+  });
+</script>
diff --git a/frontend/components/Item/View/Selectable.vue b/frontend/components/Item/View/Selectable.vue
index 1687123d..78de9229 100644
--- a/frontend/components/Item/View/Selectable.vue
+++ b/frontend/components/Item/View/Selectable.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
   import type { ViewType } from "~~/composables/use-preferences";
   import type { ItemSummary } from "~~/lib/api/types/data-contracts";
-  import MdiDotsVertical from "~icons/mdi/dots-vertical";
   import MdiCardTextOutline from "~icons/mdi/card-text-outline";
   import MdiTable from "~icons/mdi/table";
+  import { Button, ButtonGroup } from "@/components/ui/button";
 
   type Props = {
     view?: ViewType;
@@ -28,27 +28,24 @@
 
 <template>
   <section>
-    <BaseSectionHeader class="mb-2 flex items-center justify-between">
+    <BaseSectionHeader class="mb-2 mt-4 flex items-center justify-between">
       {{ $t("components.item.view.selectable.items") }}
       <template #description>
-        <div v-if="!viewSet" class="dropdown dropdown-left dropdown-hover">
-          <label tabindex="0" class="btn btn-ghost m-1">
-            <MdiDotsVertical class="size-7" />
-          </label>
-          <ul tabindex="0" class="dropdown-content menu rounded-box w-32 bg-base-100 p-2 shadow">
-            <li>
-              <button @click="setViewPreference('card')">
-                <MdiCardTextOutline class="size-5" />
-                {{ $t("components.item.view.selectable.card") }}
-              </button>
-            </li>
-            <li>
-              <button @click="setViewPreference('table')">
-                <MdiTable class="size-5" />
-                {{ $t("components.item.view.selectable.table") }}
-              </button>
-            </li>
-          </ul>
+        <div v-if="!viewSet">
+          <ButtonGroup>
+            <Button size="sm" :variant="itemView === 'card' ? 'default' : 'outline'" @click="setViewPreference('card')">
+              <MdiCardTextOutline class="size-5" />
+              {{ $t("components.item.view.selectable.card") }}
+            </Button>
+            <Button
+              size="sm"
+              :variant="itemView === 'table' ? 'default' : 'outline'"
+              @click="setViewPreference('table')"
+            >
+              <MdiTable class="size-5" />
+              {{ $t("components.item.view.selectable.table") }}
+            </Button>
+          </ButtonGroup>
         </div>
       </template>
     </BaseSectionHeader>
diff --git a/frontend/components/Item/View/Table.types.ts b/frontend/components/Item/View/Table.types.ts
index b1f91dbf..91c271f4 100644
--- a/frontend/components/Item/View/Table.types.ts
+++ b/frontend/components/Item/View/Table.types.ts
@@ -1,6 +1,6 @@
 import type { ItemSummary } from "~~/lib/api/types/data-contracts";
 
-export type TableHeader = {
+export type TableHeaderType = {
   text: string;
   value: keyof ItemSummary;
   sortable?: boolean;
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index 8fadf7a4..53c96b0e 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -1,12 +1,58 @@
 <template>
+  <Dialog dialog-id="item-table-settings">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ $t("components.item.view.table.table_settings") }}</DialogTitle>
+      </DialogHeader>
+
+      <div>{{ $t("components.item.view.table.headers") }}</div>
+      <div class="flex flex-col">
+        <div v-for="(h, i) in headers" :key="h.value" class="flex flex-row items-center gap-1">
+          <Button size="icon" class="size-6" variant="ghost" :disabled="i === 0" @click="moveHeader(i, i - 1)">
+            <MdiArrowUp />
+          </Button>
+          <Button
+            size="icon"
+            class="size-6"
+            variant="ghost"
+            :disabled="i === headers.length - 1"
+            @click="moveHeader(i, i + 1)"
+          >
+            <MdiArrowDown />
+          </Button>
+          <Checkbox :id="h.value" :model-value="h.enabled" @update:model-value="toggleHeader(h.value)" />
+          <label class="text-sm" :for="h.value"> {{ $t(h.text) }} </label>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <Label> {{ $t("components.item.view.table.rows_per_page") }} </Label>
+        <Select :model-value="pagination.rowsPerPage" @update:model-value="pagination.rowsPerPage = Number($event)">
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem :value="10">10</SelectItem>
+            <SelectItem :value="25">25</SelectItem>
+            <SelectItem :value="50">50</SelectItem>
+            <SelectItem :value="100">100</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <DialogFooter>
+        <Button @click="closeDialog('item-table-settings')"> {{ $t("global.save") }} </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
   <BaseCard>
-    <table class="table w-full">
-      <thead>
-        <tr>
-          <th
+    <Table class="w-full">
+      <TableHeader>
+        <TableRow>
+          <TableHead
             v-for="h in headers.filter(h => h.enabled)"
             :key="h.value"
-            class="text-no-transform cursor-pointer bg-neutral text-sm text-neutral-content"
+            class="text-no-transform cursor-pointer bg-neutral text-sm text-neutral-content hover:bg-neutral/90"
             @click="sortBy(h.value)"
           >
             <div
@@ -20,24 +66,21 @@
               <template v-if="typeof h === 'string'">{{ h }}</template>
               <template v-else>{{ $t(h.text) }}</template>
               <div
-                v-if="sortByProperty === h.value"
-                :class="`inline-flex ${sortByProperty === h.value ? '' : 'opacity-0'}`"
+                :data-swap="pagination.descending"
+                :class="{ 'opacity-0': sortByProperty !== h.value }"
+                class="transition-transform duration-300 data-[swap=true]:rotate-180"
               >
-                <span class="swap swap-rotate" :class="{ 'swap-active': pagination.descending }">
-                  <MdiArrowDown class="swap-on size-5" />
-                  <MdiArrowUp class="swap-off size-5" />
-                </span>
+                <MdiArrowUp class="size-5" />
               </div>
             </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(d, i) in data" :key="d.id" class="hover cursor-pointer" @click="navigateTo(`/item/${d.id}`)">
-          <td
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="(d, i) in data" :key="d.id" class="cursor-pointer" @click="navigateTo(`/item/${d.id}`)">
+          <TableCell
             v-for="h in headers.filter(h => h.enabled)"
             :key="`${h.value}-${i}`"
-            class="bg-base-100"
             :class="{
               'text-center': h.align === 'center',
               'text-right': h.align === 'right',
@@ -45,7 +88,7 @@
             }"
           >
             <template v-if="h.type === 'name'">
-              <NuxtLink class="hover text-wrap" :to="`/item/${d.id}`">
+              <NuxtLink class="text-wrap" :to="`/item/${d.id}`">
                 {{ d.name }}
               </NuxtLink>
             </template>
@@ -57,7 +100,7 @@
               <MdiClose v-else class="inline size-5 text-red-500" />
             </template>
             <template v-else-if="h.type === 'location'">
-              <NuxtLink v-if="d.location" class="hover:link" :to="`/location/${d.location.id}`">
+              <NuxtLink v-if="d.location" class="hover:underline" :to="`/location/${d.location.id}`">
                 {{ d.location.name }}
               </NuxtLink>
             </template>
@@ -67,76 +110,69 @@
             <slot v-else :name="cell(h)" v-bind="{ item: d }">
               {{ extractValue(d, h.value) }}
             </slot>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
     <div
-      class="flex items-center justify-end gap-3 border-t p-3"
+      class="flex items-center justify-between gap-2 border-t p-3"
       :class="{
         hidden: disableControls,
       }"
     >
-      <div class="dropdown dropdown-top dropdown-hover">
-        <label tabindex="0" class="btn btn-square btn-outline btn-sm m-1">
-          <MdiTableCog />
-        </label>
-        <ul tabindex="0" class="dropdown-content rounded-box flex w-64 flex-col gap-2 bg-base-100 p-2 pl-3 shadow">
-          <li>Headers:</li>
-          <li v-for="(h, i) in headers" :key="h.value" class="flex flex-row items-center gap-1">
-            <button
-              class="btn btn-square btn-ghost btn-xs"
-              :class="{
-                'btn-disabled': i === 0,
-              }"
-              @click="moveHeader(i, i - 1)"
-            >
-              <MdiArrowUp />
-            </button>
-            <button
-              class="btn btn-square btn-ghost btn-xs"
-              :class="{
-                'btn-disabled': i === headers.length - 1,
-              }"
-              @click="moveHeader(i, i + 1)"
-            >
-              <MdiArrowDown />
-            </button>
-            <input
-              :id="h.value"
-              type="checkbox"
-              class="checkbox checkbox-primary"
-              :checked="h.enabled"
-              @change="toggleHeader(h.value)"
-            />
-            <label class="label-text" :for="h.value"> {{ $t(h.text) }} </label>
-          </li>
-        </ul>
-      </div>
-      <div class="hidden md:block">{{ $t("components.item.view.table.rows_per_page") }}</div>
-      <select v-model.number="pagination.rowsPerPage" class="select select-primary select-sm">
-        <option :value="10">10</option>
-        <option :value="25">25</option>
-        <option :value="50">50</option>
-        <option :value="100">100</option>
-      </select>
-      <div class="btn-group">
-        <button :disabled="!hasPrev" class="btn btn-sm" @click="prev()">«</button>
-        <button class="btn btn-sm">{{ $t("components.item.view.table.page") }} {{ pagination.page }}</button>
-        <button :disabled="!hasNext" class="btn btn-sm" @click="next()">»</button>
-      </div>
+      <Button class="size-10 p-0" variant="outline" @click="openDialog('item-table-settings')">
+        <MdiTableCog />
+      </Button>
+      <Pagination
+        v-slot="{ page }"
+        :items-per-page="pagination.rowsPerPage"
+        :total="props.items.length"
+        :sibling-count="2"
+        @update:page="pagination.page = $event"
+      >
+        <PaginationList v-slot="{ pageItems }" class="flex items-center gap-1">
+          <PaginationFirst />
+          <template v-for="(item, index) in pageItems">
+            <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+              <Button class="size-10 p-0" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+          <PaginationLast />
+        </PaginationList>
+      </Pagination>
+      <Button class="invisible hidden size-10 p-0 md:block">
+        <!-- properly centre the pagination buttons -->
+      </Button>
     </div>
   </BaseCard>
 </template>
 
 <script setup lang="ts">
-  import type { TableData, TableHeader } from "./Table.types";
+  import type { TableData, TableHeaderType } from "./Table.types";
   import type { ItemSummary } from "~~/lib/api/types/data-contracts";
   import MdiArrowDown from "~icons/mdi/arrow-down";
   import MdiArrowUp from "~icons/mdi/arrow-up";
   import MdiCheck from "~icons/mdi/check";
   import MdiClose from "~icons/mdi/close";
   import MdiTableCog from "~icons/mdi/table-cog";
+  import { Checkbox } from "@/components/ui/checkbox";
+  import { Table, TableBody, TableHeader, TableCell, TableHead, TableRow } from "@/components/ui/table";
+  import {
+    Pagination,
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+  } from "@/components/ui/pagination";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+
+  const { openDialog, closeDialog } = useDialog();
 
   type Props = {
     items: ItemSummary[];
@@ -162,14 +198,14 @@
     { text: "items.archived", value: "archived", align: "center", enabled: false, type: "boolean" },
     { text: "items.created_at", value: "createdAt", align: "center", enabled: false, type: "date" },
     { text: "items.updated_at", value: "updatedAt", align: "center", enabled: false, type: "date" },
-  ] satisfies TableHeader[];
+  ] satisfies TableHeaderType[];
 
-  const headers = ref<TableHeader[]>(
+  const headers = ref<TableHeaderType[]>(
     (preferences.value.tableHeaders ?? [])
       .concat(defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value)))
       // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
       .map(h => ({
-        ...(defaultHeaders.find(h2 => h2.value === h.value) as TableHeader),
+        ...(defaultHeaders.find(h2 => h2.value === h.value) as TableHeaderType),
         enabled: h.enabled,
       }))
   );
@@ -206,16 +242,6 @@
     }
   );
 
-  const next = () => pagination.page++;
-  const hasNext = computed<boolean>(() => {
-    return pagination.page * pagination.rowsPerPage < props.items.length;
-  });
-
-  const prev = () => pagination.page--;
-  const hasPrev = computed<boolean>(() => {
-    return pagination.page > 1;
-  });
-
   function sortBy(property: keyof ItemSummary) {
     if (sortByProperty.value === property) {
       pagination.descending = !pagination.descending;
@@ -290,25 +316,7 @@
     return current;
   }
 
-  function cell(h: TableHeader) {
+  function cell(h: TableHeaderType) {
     return `cell-${h.value.replace(".", "_")}`;
   }
 </script>
-
-<style scoped>
-  :where(.table *:first-child) :where(*:first-child) :where(th, td):first-child {
-    border-top-left-radius: 0.5rem;
-  }
-
-  :where(.table *:first-child) :where(*:first-child) :where(th, td):last-child {
-    border-top-right-radius: 0.5rem;
-  }
-
-  :where(.table *:last-child) :where(*:last-child) :where(th, td):first-child {
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  :where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
-    border-bottom-right-radius: 0.5rem;
-  }
-</style>
diff --git a/frontend/components/Label/Chip.vue b/frontend/components/Label/Chip.vue
index ddd32853..8f164732 100644
--- a/frontend/components/Label/Chip.vue
+++ b/frontend/components/Label/Chip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { LabelOut, LabelSummary } from "~~/lib/api/types/data-contracts";
-  import MdiArrowRight from "~icons/mdi/arrow-right";
+  import MdiArrowUp from "~icons/mdi/arrow-up";
   import MdiTagOutline from "~icons/mdi/tag-outline";
 
   export type sizes = "sm" | "md" | "lg" | "xl";
@@ -14,29 +14,28 @@
       default: "md",
     },
   });
-
-  const badge = ref(null);
-  const isHover = useElementHover(badge);
-  const { focused } = useFocus(badge);
-
-  const isActive = computed(() => isHover.value || focused.value);
 </script>
 
 <template>
   <NuxtLink
-    ref="badge"
-    class="badge badge-secondary text-secondary-content"
+    class="group/label-chip flex gap-2 rounded-full bg-secondary text-secondary-foreground shadow transition duration-300 hover:bg-secondary/70"
     :class="{
-      'badge-lg p-4': size === 'lg',
-      'p-3': size !== 'sm' && size !== 'lg',
-      'badge-sm p-2': size === 'sm',
+      'p-4 py-1 text-base': size === 'lg',
+      'p-3 py-1 text-sm': size !== 'sm' && size !== 'lg',
+      'p-2 py-0.5 text-xs': size === 'sm',
     }"
     :to="`/label/${label.id}`"
   >
-    <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
-      <MdiArrowRight class="swap-on mr-2" />
-      <MdiTagOutline class="swap-off mr-2" />
-    </label>
+    <div class="relative">
+      <MdiTagOutline class="invisible" /><!-- hack to ensure the size is correct -->
+
+      <div
+        class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover/label-chip:rotate-90"
+      >
+        <MdiTagOutline class="group-hover/label-chip:hidden" />
+        <MdiArrowUp class="hidden group-hover/label-chip:block" />
+      </div>
+    </div>
     {{ label.name.length > 20 ? `${label.name.substring(0, 20)}...` : label.name }}
   </NuxtLink>
 </template>
diff --git a/frontend/components/Location/Card.vue b/frontend/components/Location/Card.vue
index ce2f7f30..474e575b 100644
--- a/frontend/components/Location/Card.vue
+++ b/frontend/components/Location/Card.vue
@@ -1,36 +1,40 @@
 <template>
-  <NuxtLink
-    ref="card"
-    :to="`/location/${location.id}`"
-    class="card rounded-md bg-base-100 text-base-content shadow-md transition duration-300"
-  >
-    <div
-      class="card-body"
-      :class="{
-        'p-4': !dense,
-        'px-3 py-2': dense,
-      }"
-    >
-      <h2 class="flex items-center justify-between gap-2">
-        <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
-          <MdiArrowRight class="swap-on size-6" />
-          <MdiMapMarkerOutline class="swap-off size-6" />
-        </label>
-        <span class="mx-auto">
-          {{ location.name }}
-        </span>
-        <span class="badge badge-primary badge-lg h-6" :class="{ 'opacity-0': !hasCount }">
-          {{ count }}
-        </span>
-      </h2>
-    </div>
-  </NuxtLink>
+  <Card>
+    <NuxtLink :to="`/location/${location.id}`" class="group/location-card transition duration-300">
+      <div
+        class=""
+        :class="{
+          'p-4': !dense,
+          'px-3 py-2': dense,
+        }"
+      >
+        <h2 class="flex items-center justify-between gap-2">
+          <div class="relative size-6">
+            <div
+              class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover/location-card:-rotate-90"
+            >
+              <MdiMapMarkerOutline class="size-6 group-hover/location-card:hidden" />
+              <MdiArrowUp class="hidden size-6 group-hover/location-card:block" />
+            </div>
+          </div>
+          <span class="mx-auto">
+            {{ location.name }}
+          </span>
+          <Badge class="" :class="{ 'opacity-0': !hasCount }">
+            {{ count }}
+          </Badge>
+        </h2>
+      </div>
+    </NuxtLink>
+  </Card>
 </template>
 
 <script lang="ts" setup>
   import type { LocationOut, LocationOutCount, LocationSummary } from "~~/lib/api/types/data-contracts";
-  import MdiArrowRight from "~icons/mdi/arrow-right";
+  import MdiArrowUp from "~icons/mdi/arrow-down";
   import MdiMapMarkerOutline from "~icons/mdi/map-marker-outline";
+  import { Card } from "@/components/ui/card";
+  import { Badge } from "@/components/ui/badge";
 
   const props = defineProps({
     location: {
@@ -52,10 +56,4 @@
       return (props.location as LocationOutCount).itemCount;
     }
   });
-
-  const card = ref(null);
-  const isHover = useElementHover(card);
-  const { focused } = useFocus(card);
-
-  const isActive = computed(() => isHover.value || focused.value);
 </script>
diff --git a/frontend/components/Location/LegacySelector.vue b/frontend/components/Location/LegacySelector.vue
deleted file mode 100644
index bbb4997d..00000000
--- a/frontend/components/Location/LegacySelector.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <FormAutocomplete2
-    v-if="locations"
-    v-model="value"
-    :items="locations"
-    display="name"
-    :label="$t('components.location.selector.parent_location')"
-  >
-    <template #display="{ item, selected, active }">
-      <div>
-        <div class="flex w-full">
-          {{ cast(item.value).name }}
-          <span
-            v-if="selected"
-            :class="['absolute inset-y-0 right-0 flex  items-center pr-4', active ? 'text-white' : 'text-primary']"
-          >
-            <MdiCheck class="size-5" aria-hidden="true" />
-          </span>
-        </div>
-        <div v-if="cast(item.value).name != cast(item.value).treeString" class="mt-1 text-xs">
-          {{ cast(item.value).treeString }}
-        </div>
-      </div>
-    </template>
-  </FormAutocomplete2>
-</template>
-
-<script lang="ts" setup>
-  import type { FlatTreeItem } from "~~/composables/use-location-helpers";
-  import { useFlatLocations } from "~~/composables/use-location-helpers";
-  import type { LocationSummary } from "~~/lib/api/types/data-contracts";
-  import MdiCheck from "~icons/mdi/check";
-
-  type Props = {
-    modelValue?: LocationSummary | null;
-  };
-
-  // Cast the type of the item to a FlatTreeItem so we can get type "safety" in the template
-  // Note that this does not actually change the type of the item, it just tells the compiler
-  // that the type is FlatTreeItem. We must keep this in sync with the type of the items
-  function cast(value: any): FlatTreeItem {
-    return value as FlatTreeItem;
-  }
-
-  const props = defineProps<Props>();
-  const value = useVModel(props, "modelValue");
-
-  const locations = useFlatLocations();
-  const form = ref({
-    parent: null as LocationSummary | null,
-    search: "",
-  });
-
-  // Whenever parent goes from value to null reset search
-  watch(
-    () => value.value,
-    () => {
-      if (!value.value) {
-        form.value.search = "";
-      }
-    }
-  );
-</script>
diff --git a/frontend/components/Location/Tree/Node.vue b/frontend/components/Location/Tree/Node.vue
index 056b1498..72f8ca63 100644
--- a/frontend/components/Location/Tree/Node.vue
+++ b/frontend/components/Location/Tree/Node.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import { useTreeState } from "./tree-state";
   import type { TreeItem } from "~~/lib/api/types/data-contracts";
-  import MdiChevronDown from "~icons/mdi/chevron-down";
   import MdiChevronRight from "~icons/mdi/chevron-right";
   import MdiMapMarker from "~icons/mdi/map-marker";
   import MdiPackageVariant from "~icons/mdi/package-variant";
@@ -53,25 +52,20 @@
         }"
       >
         <div v-if="!hasChildren" class="size-6"></div>
-        <label
-          v-else
-          class="swap swap-rotate"
-          :class="{
-            'swap-active': openRef,
-          }"
-        >
-          <MdiChevronRight name="mdi-chevron-right" class="swap-off size-6" />
-          <MdiChevronDown name="mdi-chevron-down" class="swap-on size-6" />
-        </label>
+        <div v-else class="group/node relative size-6" :data-swap="openRef">
+          <div
+            class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-data-[swap=true]/node:rotate-90"
+          >
+            <MdiChevronRight class="size-6" />
+          </div>
+        </div>
       </div>
       <MdiMapMarker v-if="item.type === 'location'" class="size-4" />
       <MdiPackageVariant v-else class="size-4" />
-      <NuxtLink class="text-lg hover:link" :to="link" @click.stop>{{ item.name }} </NuxtLink>
+      <NuxtLink class="text-lg hover:underline" :to="link" @click.stop>{{ item.name }} </NuxtLink>
     </div>
     <div v-if="openRef" class="ml-4">
       <LocationTreeNode v-for="child in item.children" :key="child.id" :item="child" :tree-id="treeId" />
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/frontend/components/Location/Tree/Root.vue b/frontend/components/Location/Tree/Root.vue
index 523e0676..6e65be91 100644
--- a/frontend/components/Location/Tree/Root.vue
+++ b/frontend/components/Location/Tree/Root.vue
@@ -10,13 +10,10 @@
 </script>
 
 <template>
-  <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
-  <div class="root border-2 p-4">
+  <div>
     <p v-if="locs.length === 0" class="text-center text-sm">
       {{ $t("location.tree.no_locations") }}
     </p>
     <LocationTreeNode v-for="item in locs" :key="item.id" :item="item" :tree-id="treeId" />
   </div>
 </template>
-
-<style></style>
diff --git a/frontend/components/Maintenance/EditModal.vue b/frontend/components/Maintenance/EditModal.vue
index 07c14848..ff53bfb7 100644
--- a/frontend/components/Maintenance/EditModal.vue
+++ b/frontend/components/Maintenance/EditModal.vue
@@ -1,24 +1,28 @@
 <template>
-  <BaseModal v-model="visible">
-    <template #title>
-      {{ entry.id ? $t("maintenance.modal.edit_title") : $t("maintenance.modal.new_title") }}
-    </template>
-    <form @submit.prevent="dispatchFormSubmit">
-      <FormTextField v-model="entry.name" autofocus :label="$t('maintenance.modal.entry_name')" />
-      <DatePicker v-model="entry.completedDate" :label="$t('maintenance.modal.completed_date')" />
-      <DatePicker v-model="entry.scheduledDate" :label="$t('maintenance.modal.scheduled_date')" />
-      <FormTextArea v-model="entry.description" :label="$t('maintenance.modal.notes')" class="pt-2" />
-      <FormTextField v-model="entry.cost" autofocus :label="$t('maintenance.modal.cost')" class="pt-2" />
-      <div class="flex justify-end py-2">
-        <BaseButton type="submit" class="ml-2 mt-2">
-          <template #icon>
+  <Dialog dialog-id="edit-maintenance">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          {{ entry.id ? $t("maintenance.modal.edit_title") : $t("maintenance.modal.new_title") }}
+        </DialogTitle>
+      </DialogHeader>
+
+      <form class="flex flex-col gap-2" @submit.prevent="dispatchFormSubmit">
+        <FormTextField v-model="entry.name" autofocus :label="$t('maintenance.modal.entry_name')" />
+        <DatePicker v-model="entry.completedDate" :label="$t('maintenance.modal.completed_date')" />
+        <DatePicker v-model="entry.scheduledDate" :label="$t('maintenance.modal.scheduled_date')" />
+        <FormTextArea v-model="entry.description" :label="$t('maintenance.modal.notes')" />
+        <FormTextField v-model="entry.cost" autofocus :label="$t('maintenance.modal.cost')" />
+
+        <DialogFooter>
+          <Button type="submit">
             <MdiPost />
-          </template>
-          {{ entry.id ? $t("maintenance.modal.edit_action") : $t("maintenance.modal.new_action") }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
+            {{ entry.id ? $t("maintenance.modal.edit_action") : $t("maintenance.modal.new_action") }}
+          </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -27,13 +31,16 @@
   import type { MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
   import MdiPost from "~icons/mdi/post";
   import DatePicker from "~~/components/Form/DatePicker.vue";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+
+  const { openDialog, closeDialog } = useDialog();
 
   const { t } = useI18n();
   const api = useUserApi();
 
   const emit = defineEmits(["changed"]);
 
-  const visible = ref(false);
   const entry = reactive({
     id: null as string | null,
     name: "",
@@ -70,7 +77,7 @@
       return;
     }
 
-    visible.value = false;
+    closeDialog("edit-maintenance");
     emit("changed");
   }
 
@@ -92,7 +99,7 @@
       return;
     }
 
-    visible.value = false;
+    closeDialog("edit-maintenance");
     emit("changed");
   }
 
@@ -104,7 +111,7 @@
     entry.description = "";
     entry.cost = "";
     entry.itemId = itemId;
-    visible.value = true;
+    openDialog("edit-maintenance");
   };
 
   const openUpdateModal = (maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails) => {
@@ -115,7 +122,7 @@
     entry.description = maintenanceEntry.description;
     entry.cost = maintenanceEntry.cost;
     entry.itemId = null;
-    visible.value = true;
+    openDialog("edit-maintenance");
   };
 
   const confirm = useConfirm();
@@ -157,7 +164,7 @@
     entry.description = maintenanceEntry.description;
     entry.cost = maintenanceEntry.cost;
     entry.itemId = itemId;
-    visible.value = true;
+    openDialog("edit-maintenance");
   }
 
   defineExpose({ openCreateModal, openUpdateModal, deleteEntry, complete, duplicate });
diff --git a/frontend/components/Maintenance/ListView.vue b/frontend/components/Maintenance/ListView.vue
index 71664321..1faaeb06 100644
--- a/frontend/components/Maintenance/ListView.vue
+++ b/frontend/components/Maintenance/ListView.vue
@@ -11,6 +11,9 @@
   import MdiWrenchClock from "~icons/mdi/wrench-clock";
   import MdiContentDuplicate from "~icons/mdi/content-duplicate";
   import MaintenanceEditModal from "~~/components/Maintenance/EditModal.vue";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Badge } from "@/components/ui/badge";
+  import { ButtonGroup, Button } from "@/components/ui/button";
 
   const maintenanceFilterStatus = ref(MaintenanceFilterStatus.MaintenanceFilterStatusScheduled);
   const maintenanceEditModal = ref<InstanceType<typeof MaintenanceEditModal>>();
@@ -77,50 +80,47 @@
 <template>
   <section class="space-y-6">
     <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
-      <StatCard
-        v-for="stat in stats"
-        :key="stat.id"
-        class="stats block border-l-primary shadow-xl"
-        :title="stat.title"
-        :value="stat.value"
-        :type="stat.type"
-      />
+      <StatCard v-for="stat in stats" :key="stat.id" :title="stat.title" :value="stat.value" :type="stat.type" />
     </div>
     <div class="flex">
-      <div class="btn-group">
-        <BaseButton
+      <ButtonGroup>
+        <Button
           size="sm"
-          :class="`${maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusScheduled ? 'btn-active' : ''}`"
+          :variant="
+            maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusScheduled ? 'default' : 'outline'
+          "
           @click="maintenanceFilterStatus = MaintenanceFilterStatus.MaintenanceFilterStatusScheduled"
         >
           {{ $t("maintenance.filter.scheduled") }}
-        </BaseButton>
-        <BaseButton
+        </Button>
+        <Button
           size="sm"
-          :class="`${maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusCompleted ? 'btn-active' : ''}`"
+          :variant="
+            maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusCompleted ? 'default' : 'outline'
+          "
           @click="maintenanceFilterStatus = MaintenanceFilterStatus.MaintenanceFilterStatusCompleted"
         >
           {{ $t("maintenance.filter.completed") }}
-        </BaseButton>
-        <BaseButton
+        </Button>
+        <Button
           size="sm"
-          :class="`${maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusBoth ? 'btn-active' : ''}`"
+          :variant="
+            maintenanceFilterStatus == MaintenanceFilterStatus.MaintenanceFilterStatusBoth ? 'default' : 'outline'
+          "
           @click="maintenanceFilterStatus = MaintenanceFilterStatus.MaintenanceFilterStatusBoth"
         >
           {{ $t("maintenance.filter.both") }}
-        </BaseButton>
-      </div>
-      <BaseButton
+        </Button>
+      </ButtonGroup>
+      <Button
         v-if="props.currentItemId"
         class="ml-auto"
         size="sm"
         @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
       >
-        <template #icon>
-          <MdiPlus />
-        </template>
+        <MdiPlus />
         {{ $t("maintenance.list.new") }}
-      </BaseButton>
+      </Button>
     </div>
   </section>
   <section>
@@ -129,7 +129,7 @@
     <div class="container space-y-6">
       <BaseCard v-for="e in maintenanceDataList" :key="e.id">
         <BaseSectionHeader class="border-b border-b-gray-300 p-6">
-          <span class="text-base-content">
+          <span class="mb-2 text-base-content">
             <span v-if="!props.currentItemId">
               <NuxtLink class="hover:underline" :to="`/item/${(e as MaintenanceEntryWithDetails).itemID}/maintenance`">
                 {{ (e as MaintenanceEntryWithDetails).itemName }}
@@ -140,51 +140,53 @@
           </span>
           <template #description>
             <div class="flex flex-wrap gap-2">
-              <div v-if="validDate(e.completedDate)" class="badge p-3">
+              <Badge v-if="validDate(e.completedDate)" variant="outline">
                 <MdiCheck class="mr-2" />
                 <DateTime :date="e.completedDate" format="human" datetime-type="date" />
-              </div>
-              <div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
+              </Badge>
+              <Badge v-else-if="validDate(e.scheduledDate)" variant="outline">
                 <MdiCalendar class="mr-2" />
                 <DateTime :date="e.scheduledDate" format="human" datetime-type="date" />
-              </div>
-              <div class="tooltip tooltip-primary" data-tip="Cost">
-                <div class="badge badge-primary p-3">
-                  <Currency :amount="e.cost" />
-                </div>
-              </div>
+              </Badge>
+              <TooltipProvider :delay-duration="0">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Badge>
+                      <Currency :amount="e.cost" />
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent> Cost </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
           </template>
         </BaseSectionHeader>
-        <div class="p-6">
+        <div :class="{ 'p-6': e.description }">
           <Markdown :source="e.description" />
         </div>
-        <div class="flex flex-wrap justify-end gap-1 p-4">
-          <BaseButton size="sm" @click="maintenanceEditModal?.openUpdateModal(e)">
-            <template #icon>
-              <MdiEdit />
-            </template>
+        <ButtonGroup class="flex flex-wrap justify-end p-4">
+          <Button size="sm" @click="maintenanceEditModal?.openUpdateModal(e)">
+            <MdiEdit />
             {{ $t("maintenance.list.edit") }}
-          </BaseButton>
-          <BaseButton v-if="!validDate(e.completedDate)" size="sm" @click="maintenanceEditModal?.complete(e)">
-            <template #icon>
-              <MdiCheck />
-            </template>
+          </Button>
+          <Button
+            v-if="!validDate(e.completedDate)"
+            size="sm"
+            variant="outline"
+            @click="maintenanceEditModal?.complete(e)"
+          >
+            <MdiCheck />
             {{ $t("maintenance.list.complete") }}
-          </BaseButton>
-          <BaseButton size="sm" @click="maintenanceEditModal?.duplicate(e, e.itemID)">
-            <template #icon>
-              <MdiContentDuplicate />
-            </template>
+          </Button>
+          <Button size="sm" variant="outline" @click="maintenanceEditModal?.duplicate(e, e.itemID)">
+            <MdiContentDuplicate />
             {{ $t("maintenance.list.duplicate") }}
-          </BaseButton>
-          <BaseButton size="sm" class="btn-error" @click="maintenanceEditModal?.deleteEntry(e.id)">
-            <template #icon>
-              <MdiDelete />
-            </template>
+          </Button>
+          <Button size="sm" variant="destructive" @click="maintenanceEditModal?.deleteEntry(e.id)">
+            <MdiDelete />
             {{ $t("maintenance.list.delete") }}
-          </BaseButton>
-        </div>
+          </Button>
+        </ButtonGroup>
       </BaseCard>
       <div v-if="props.currentItemId" class="hidden first:block">
         <button
diff --git a/frontend/components/Search/Filter.vue b/frontend/components/Search/Filter.vue
index 4c487649..ca2cb3b9 100644
--- a/frontend/components/Search/Filter.vue
+++ b/frontend/components/Search/Filter.vue
@@ -1,82 +1,73 @@
 <template>
-  <div ref="el" class="dropdown" :class="{ 'dropdown-open': dropdownOpen }">
-    <button ref="btn" tabindex="0" class="btn btn-xs" @click="toggle">
-      {{ label }} {{ len }} <MdiChevronDown class="size-4" />
-    </button>
-    <div tabindex="0" class="dropdown-content mt-1 w-64 rounded-md bg-base-100 shadow">
-      <div class="mb-1 px-4 pt-4 shadow-sm">
-        <input v-model="search" type="text" placeholder="Search…" class="input input-bordered input-sm mb-2 w-full" />
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button size="sm" variant="outline" class="group/filter">
+        {{ label }} {{ len }}
+        <MdiChevronDown class="transition-transform group-data-[state=open]/filter:rotate-180" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="z-40 p-0">
+      <div class="p-4 shadow-sm">
+        <Input v-model="search" type="text" placeholder="Search…" />
       </div>
       <div class="max-h-72 divide-y overflow-y-auto">
-        <label
+        <Label
           v-for="v in selectedView"
-          :key="v"
-          class="label flex cursor-pointer justify-between px-4 hover:bg-base-200"
+          :key="v.id"
+          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-base-200"
         >
-          <span class="label-text mr-2">
-            <slot name="display" v-bind="{ item: v }">
-              {{ v[display] }}
-            </slot>
-          </span>
-          <input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-primary checkbox-sm" />
-        </label>
+          <div>
+            <span>{{ v.name }}</span>
+            <span v-if="v.treeString && v.treeString !== v.name" class="ml-auto text-xs">{{ v.treeString }}</span>
+          </div>
+          <Checkbox :model-value="true" @update:model-value="_ => (selected = selected.filter(s => s.id !== v.id))" />
+        </Label>
         <hr v-if="selected.length > 0" />
-        <label
+        <Label
           v-for="v in unselected"
-          :key="v"
-          class="label flex cursor-pointer justify-between px-4 hover:bg-base-200"
+          :key="v.id"
+          class="flex cursor-pointer justify-between px-4 py-2 text-sm hover:bg-base-200"
         >
-          <span class="label-text mr-2">
-            <slot name="display" v-bind="{ item: v }">
-              {{ v[display] }}
-            </slot>
-          </span>
-          <input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-primary checkbox-sm" />
-        </label>
+          <div>
+            <div>{{ v.name }}</div>
+            <div v-if="v.treeString && v.treeString !== v.name" class="ml-auto text-xs">{{ v.treeString }}</div>
+          </div>
+          <Checkbox :model-value="false" @update:model-value="_ => (selected = [...selected, v])" />
+        </Label>
       </div>
-    </div>
-  </div>
+    </PopoverContent>
+  </Popover>
 </template>
 
 <script setup lang="ts">
   import MdiChevronDown from "~icons/mdi/chevron-down";
+  import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+  import { Button } from "@/components/ui/button";
+  import { Checkbox } from "@/components/ui/checkbox";
+  import { Input } from "@/components/ui/input";
+  import { Label } from "@/components/ui/label";
+
   type Props = {
     label: string;
-    options: any[];
-    display?: string;
-    modelValue: any[];
-    uniqueField: string;
+    options: {
+      name: string;
+      id: string;
+      treeString?: string;
+    }[];
+    modelValue: {
+      name: string;
+      id: string;
+      treeString?: string;
+    }[];
   };
 
-  const btn = ref<HTMLButtonElement>();
-
   const search = ref("");
   const searchFold = computed(() => search.value.toLowerCase());
-  const dropdownOpen = ref(false);
-  const el = ref();
-
-  function toggle() {
-    dropdownOpen.value = !dropdownOpen.value;
-
-    if (!dropdownOpen.value) {
-      btn.value?.blur();
-    }
-  }
-
-  onClickOutside(el, () => {
-    dropdownOpen.value = false;
-  });
-
-  watch(dropdownOpen, val => {
-    console.log(val);
-  });
 
   const emit = defineEmits(["update:modelValue"]);
   const props = withDefaults(defineProps<Props>(), {
     label: "",
-    display: "name",
     modelValue: () => [],
-    uniqueField: "id",
   });
 
   const len = computed(() => {
@@ -86,7 +77,7 @@
   const selectedView = computed(() => {
     return selected.value.filter(o => {
       if (searchFold.value.length > 0) {
-        return o[props.display].toLowerCase().includes(searchFold.value);
+        return o.name.toLowerCase().includes(searchFold.value);
       }
       return true;
     });
@@ -97,14 +88,9 @@
   const unselected = computed(() => {
     return props.options.filter(o => {
       if (searchFold.value.length > 0) {
-        return (
-          o[props.display].toLowerCase().includes(searchFold.value) &&
-          selected.value.every(s => s[props.uniqueField] !== o[props.uniqueField])
-        );
+        return o.name.toLowerCase().includes(searchFold.value) && selected.value.every(s => s.id !== o.id);
       }
-      return selected.value.every(s => s[props.uniqueField] !== o[props.uniqueField]);
+      return selected.value.every(s => s.id !== o.id);
     });
   });
 </script>
-
-<style scoped></style>
diff --git a/frontend/components/global/CopyText.vue b/frontend/components/global/CopyText.vue
index ed67674c..da5f83f5 100644
--- a/frontend/components/global/CopyText.vue
+++ b/frontend/components/global/CopyText.vue
@@ -1,53 +1,64 @@
 <template>
-  <button @click="copyText">
-    <label
-      class="swap swap-rotate"
-      :class="{
-        'swap-active': copied,
-      }"
+  <Button size="icon" variant="outline" class="relative" @click="copyText">
+    <div
+      :data-copied="copied"
+      class="group absolute inset-0 flex items-center justify-center transition-transform duration-300 data-[copied=true]:rotate-[360deg]"
     >
       <MdiContentCopy
-        class="swap-off"
+        class="group-data-[copied=true]:hidden"
         :style="{
           height: `${iconSize}px`,
           width: `${iconSize}px`,
         }"
       />
       <MdiClipboard
-        class="swap-on"
+        class="hidden group-data-[copied=true]:block"
         :style="{
           height: `${iconSize}px`,
           width: `${iconSize}px`,
         }"
       />
-    </label>
-    <Teleport to="#app">
-      <BaseModal v-model="copyError">
-        <div class="space-y-2">
-          <p>
-            {{ $t("components.global.copy_text.failed_to_copy") }}
-            {{ isNotHttps ? $t("components.global.copy_text.https_required") : "" }}
-          </p>
-          <p class="text-sm">
-            {{ $t("components.global.copy_text.learn_more") }}
-            <a
-              href="https://homebox.software/en/user-guide/tips-tricks.html#copy-to-clipboard"
-              class="text-primary hover:underline"
-              target="_blank"
-              rel="noopener"
-            >
-              {{ $t("components.global.copy_text.documentation") }}
-            </a>
-          </p>
-        </div>
-      </BaseModal></Teleport
-    >
-  </button>
+    </div>
+  </Button>
+
+  <AlertDialog v-model:open="copyError">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle class="space-y-2">
+          {{ $t("components.global.copy_text.failed_to_copy") }}
+          {{ isNotHttps ? $t("components.global.copy_text.https_required") : "" }}
+        </AlertDialogTitle>
+        <AlertDialogDescription class="text-sm">
+          {{ $t("components.global.copy_text.learn_more") }}
+          <a
+            href="https://homebox.software/en/user-guide/tips-tricks.html#copy-to-clipboard"
+            class="text-primary hover:underline"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ $t("components.global.copy_text.documentation") }}
+          </a>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup lang="ts">
   import MdiContentCopy from "~icons/mdi/content-copy";
   import MdiClipboard from "~icons/mdi/clipboard";
+  import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+  } from "@/components/ui/alert-dialog";
 
   const props = defineProps({
     text: {
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index 09087cb6..09a5abec 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -14,15 +14,23 @@
             />
             <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
             <template v-else-if="detail.type === 'link'">
-              <div class="tooltip tooltip-top tooltip-primary" :data-tip="detail.href">
-                <a class="btn btn-primary btn-xs" :href="detail.href" target="_blank">
-                  <MdiOpenInNew class="swap-on mr-2" />
-                  {{ detail.text }}
-                </a>
-              </div>
+              <TooltipProvider :delay-duration="0">
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <a :href="detail.href" target="_blank" :class="badgeVariants()" class="gap-1">
+                      <MdiOpenInNew />
+                      {{ detail.text }}
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {{ detail.href }}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </template>
             <template v-else-if="detail.type === 'markdown'">
               <ClientOnly>
+                <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
                 <div class="markdown-container w-full overflow-hidden break-words">
                   <Markdown :source="detail.text" />
                 </div>
@@ -36,12 +44,7 @@
                   v-if="detail.copyable"
                   class="my-0 ml-4 shrink-0 opacity-0 transition-opacity duration-75 group-hover:opacity-100"
                 >
-                  <CopyText
-                    v-if="detail.text.toString()"
-                    :text="detail.text.toString()"
-                    :icon-size="16"
-                    class="btn btn-circle btn-ghost btn-xs"
-                  />
+                  <CopyText v-if="detail.text.toString()" :text="detail.text.toString()" :icon-size="16" />
                 </span>
               </span>
             </template>
@@ -55,6 +58,8 @@
 <script setup lang="ts">
   import type { AnyDetail, Detail } from "./types";
   import MdiOpenInNew from "~icons/mdi/open-in-new";
+  import { badgeVariants } from "~/components/ui/badge";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 
   defineProps({
     details: {
diff --git a/frontend/components/global/LabelMaker.vue b/frontend/components/global/LabelMaker.vue
index bc40c3dd..589ae4c1 100644
--- a/frontend/components/global/LabelMaker.vue
+++ b/frontend/components/global/LabelMaker.vue
@@ -1,9 +1,24 @@
 <script setup lang="ts">
   import { route } from "../../lib/api/base";
+  import PageQRCode from "./PageQRCode.vue";
   import { toast } from "@/components/ui/sonner";
   import MdiPrinterPos from "~icons/mdi/printer-pos";
   import MdiFileDownload from "~icons/mdi/file-download";
 
+  import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+  } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Button, ButtonGroup } from "@/components/ui/button";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+
+  const { openDialog, closeDialog } = useDialog();
+
   const props = defineProps<{
     type: string;
     id: string;
@@ -21,13 +36,8 @@
     return data;
   });
 
-  const printModal = ref(false);
   const serverPrinting = ref(false);
 
-  function openPrint() {
-    printModal.value = true;
-  }
-
   function browserPrint() {
     const printWindow = window.open(getLabelUrl(false), "popup=true");
 
@@ -50,7 +60,7 @@
     }
 
     toast.success("Label printed");
-    printModal.value = false;
+    closeDialog("print-label");
     serverPrinting.value = false;
   }
 
@@ -80,46 +90,60 @@
 
 <template>
   <div>
-    <BaseModal v-model="printModal">
-      <template #title>{{ $t("components.global.label_maker.print") }}</template>
-      <p>
-        {{ $t("components.global.label_maker.confirm_description") }}
-      </p>
-      <img :src="getLabelUrl(false)" />
-      <div class="modal-action">
-        <BaseButton
-          v-if="status?.labelPrinting || false"
-          type="submit"
-          :loading="serverPrinting"
-          @click="serverPrint"
-          >{{ $t("components.global.label_maker.server_print") }}</BaseButton
-        >
-        <BaseButton type="submit" @click="browserPrint">{{
-          $t("components.global.label_maker.browser_print")
-        }}</BaseButton>
-      </div>
-    </BaseModal>
-
-    <div class="dropdown dropdown-left">
-      <slot>
-        <label tabindex="0" class="btn btn-sm">
-          {{ $t("components.global.label_maker.titles") }}
-        </label>
-      </slot>
-      <ul class="dropdown-content menu compact rounded-box w-52 bg-base-100 shadow-lg">
-        <li>
-          <button @click="openPrint">
-            <MdiPrinterPos name="mdi-printer-pos" class="mr-2" />
+    <Dialog dialog-id="print-label">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
             {{ $t("components.global.label_maker.print") }}
-          </button>
-        </li>
-        <li>
-          <button @click="downloadLabel">
-            <MdiFileDownload name="mdi-file-download" class="mr-2" />
+          </DialogTitle>
+          <DialogDescription>
+            {{ $t("components.global.label_maker.confirm_description") }}
+          </DialogDescription>
+        </DialogHeader>
+        <img :src="getLabelUrl(false)" />
+        <DialogFooter>
+          <ButtonGroup>
+            <Button v-if="status?.labelPrinting || false" type="submit" :loading="serverPrinting" @click="serverPrint">
+              {{ $t("components.global.label_maker.server_print") }}
+            </Button>
+            <Button type="submit" @click="browserPrint">
+              {{ $t("components.global.label_maker.browser_print") }}
+            </Button>
+          </ButtonGroup>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <TooltipProvider :delay-duration="0">
+      <ButtonGroup>
+        <Button variant="outline" disabled class="disabled:opacity-100">
+          {{ $t("components.global.label_maker.titles") }}
+        </Button>
+
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button size="icon" @click="downloadLabel">
+              <MdiFileDownload name="mdi-file-download" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
             {{ $t("components.global.label_maker.download") }}
-          </button>
-        </li>
-      </ul>
-    </div>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button size="icon" @click="openDialog('print-label')">
+              <MdiPrinterPos name="mdi-printer-pos" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {{ $t("components.global.label_maker.browser_print") }}
+          </TooltipContent>
+        </Tooltip>
+
+        <PageQRCode />
+      </ButtonGroup>
+    </TooltipProvider>
   </div>
 </template>
diff --git a/frontend/components/global/PageQRCode.vue b/frontend/components/global/PageQRCode.vue
index fce54373..8b5f9e02 100644
--- a/frontend/components/global/PageQRCode.vue
+++ b/frontend/components/global/PageQRCode.vue
@@ -1,28 +1,40 @@
-<template>
-  <div class="dropdown dropdown-left">
-    <slot>
-      <label tabindex="0" class="btn btn-circle btn-sm">
-        <MdiQrcode />
-      </label>
-    </slot>
-    <div tabindex="0" class="card dropdown-content compact rounded-box w-64 bg-base-100 shadow-lg">
-      <div class="card-body">
-        <h2 class="text-center">{{ $t("components.global.page_qr_code.page_url") }}</h2>
-        <img :src="getQRCodeUrl()" />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-  import { route } from "../../lib/api/base";
+  import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { route } from "~/lib/api/base";
   import MdiQrcode from "~icons/mdi/qrcode";
+  import { Button } from "@/components/ui/button";
+  import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+  import { useDialog } from "@/components/ui/dialog-provider";
+
+  const { openDialog } = useDialog();
 
   function getQRCodeUrl(): string {
     const currentURL = window.location.href;
-
+    // Adjust route import as needed
     return route(`/qrcode`, { data: encodeURIComponent(currentURL) });
   }
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <Dialog dialog-id="page-qr-code">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          {{ $t("components.global.page_qr_code.page_url") }}
+        </DialogTitle>
+      </DialogHeader>
+      <img :src="getQRCodeUrl()" />
+    </DialogContent>
+  </Dialog>
+
+  <Tooltip>
+    <TooltipTrigger as-child>
+      <Button size="icon" @click="openDialog('page-qr-code')">
+        <MdiQrcode name="mdi-qrcode" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      {{ $t("components.global.page_qr_code.qr_tooltip") }}
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/frontend/components/global/PasswordScore.vue b/frontend/components/global/PasswordScore.vue
index a0bd41b5..a22d7c60 100644
--- a/frontend/components/global/PasswordScore.vue
+++ b/frontend/components/global/PasswordScore.vue
@@ -1,20 +1,13 @@
 <template>
   <div class="py-4">
     <p class="text-sm">{{ $t("components.global.password_score.password_strength") }}: {{ message }}</p>
-    <progress
-      class="progress w-full"
-      :value="score"
-      max="100"
-      :class="{
-        'progress-success': score > 50,
-        'progress-warning': score > 25 && score < 50,
-        'progress-error': score < 25,
-      }"
-    />
+    <Progress class="w-full" :model-value="score" />
   </div>
 </template>
 
 <script setup lang="ts">
+  import { Progress } from "@/components/ui/progress";
+
   const props = defineProps({
     password: {
       type: String,
diff --git a/frontend/components/global/StatCard/StatCard.vue b/frontend/components/global/StatCard/StatCard.vue
index a34b94c9..9e1e41ea 100644
--- a/frontend/components/global/StatCard/StatCard.vue
+++ b/frontend/components/global/StatCard/StatCard.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="stats rounded-md bg-neutral shadow">
-    <div class="stat space-y-1 p-3 text-center text-neutral-content">
-      <div class="stat-title text-neutral-content">{{ title }}</div>
-      <div class="stat-value text-2xl">
-        <Currency v-if="type === 'currency'" :amount="value" />
-        <template v-if="type === 'number'">{{ value }}</template>
-      </div>
-      <div v-if="subtitle" class="stat-desc">{{ subtitle }}</div>
-    </div>
-  </div>
+  <Card class="flex flex-col items-center bg-neutral p-3 text-neutral-content shadow">
+    <CardHeader class="p-0">
+      <CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="p-0 text-2xl font-bold">
+      <Currency v-if="type === 'currency'" :amount="value" />
+      <template v-if="type === 'number'">{{ value }}</template>
+    </CardContent>
+    <CardFooter v-if="subtitle">{{ subtitle }}</CardFooter>
+  </Card>
 </template>
 
 <script setup lang="ts">
   import type { StatsFormat } from "./types";
+  import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 
   type Props = {
     title: string;
diff --git a/frontend/components/ui/breadcrumb/Breadcrumb.vue b/frontend/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..72ca1437
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/frontend/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..cfccf9fe
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbItem.vue b/frontend/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..42e721cd
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbLink.vue b/frontend/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..bb0e6652
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbList.vue b/frontend/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..60856cc4
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbPage.vue b/frontend/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..fe43bda6
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/components/ui/breadcrumb/BreadcrumbSeparator.vue b/frontend/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..a9c47fea
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/frontend/components/ui/breadcrumb/index.ts b/frontend/components/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..05909832
--- /dev/null
+++ b/frontend/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/frontend/components/ui/button/Button.vue b/frontend/components/ui/button/Button.vue
index b330368b..8360b20b 100644
--- a/frontend/components/ui/button/Button.vue
+++ b/frontend/components/ui/button/Button.vue
@@ -16,7 +16,12 @@
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :data-button="true"
+  >
     <slot />
   </Primitive>
 </template>
diff --git a/frontend/components/ui/button/ButtonGroup.vue b/frontend/components/ui/button/ButtonGroup.vue
index 1f41545f..dc9bf926 100644
--- a/frontend/components/ui/button/ButtonGroup.vue
+++ b/frontend/components/ui/button/ButtonGroup.vue
@@ -10,9 +10,12 @@
     :class="
       cn(
         'inline-flex rounded-lg',
-        '[&>*]:rounded-none',
-        '[&>*:first-child]:rounded-l-lg',
-        '[&>*:last-child]:rounded-r-lg',
+        '[&>[data-button=true]]:rounded-none',
+        '[&>[data-button=true]:first-child]:rounded-l-lg',
+        '[&>[data-button=true]:last-child]:rounded-r-lg',
+        '[&_[data-button=true]]:rounded-none',
+        '[&_[data-button=true][data-pos=start]]:rounded-l-lg',
+        '[&_[data-button=true][data-pos=end]]:rounded-r-lg',
         props.class
       )
     "
diff --git a/frontend/components/ui/card/Card.vue b/frontend/components/ui/card/Card.vue
new file mode 100644
index 00000000..82429a4d
--- /dev/null
+++ b/frontend/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg bg-card text-card-foreground shadow',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/card/CardContent.vue b/frontend/components/ui/card/CardContent.vue
new file mode 100644
index 00000000..785913a1
--- /dev/null
+++ b/frontend/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/card/CardDescription.vue b/frontend/components/ui/card/CardDescription.vue
new file mode 100644
index 00000000..d5faedd5
--- /dev/null
+++ b/frontend/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/frontend/components/ui/card/CardFooter.vue b/frontend/components/ui/card/CardFooter.vue
new file mode 100644
index 00000000..1ed2efe5
--- /dev/null
+++ b/frontend/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/card/CardHeader.vue b/frontend/components/ui/card/CardHeader.vue
new file mode 100644
index 00000000..951d227e
--- /dev/null
+++ b/frontend/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/card/CardTitle.vue b/frontend/components/ui/card/CardTitle.vue
new file mode 100644
index 00000000..842e1689
--- /dev/null
+++ b/frontend/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/frontend/components/ui/card/index.ts b/frontend/components/ui/card/index.ts
new file mode 100644
index 00000000..9ff6d5e7
--- /dev/null
+++ b/frontend/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
diff --git a/frontend/components/ui/checkbox/Checkbox.vue b/frontend/components/ui/checkbox/Checkbox.vue
new file mode 100644
index 00000000..de746b58
--- /dev/null
+++ b/frontend/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/frontend/components/ui/checkbox/index.ts b/frontend/components/ui/checkbox/index.ts
new file mode 100644
index 00000000..8c28c286
--- /dev/null
+++ b/frontend/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/frontend/components/ui/command/CommandDialog.vue b/frontend/components/ui/command/CommandDialog.vue
index 825774ec..6356ed26 100644
--- a/frontend/components/ui/command/CommandDialog.vue
+++ b/frontend/components/ui/command/CommandDialog.vue
@@ -12,7 +12,8 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <Dialog v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 shadow-lg">
+    <!-- https://github.com/unovue/reka-ui/issues/1743 -->
+    <DialogContent class="overflow-hidden p-0 shadow-lg" disable-portal>
       <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
         <slot />
       </Command>
diff --git a/frontend/components/ui/command/CommandInput.vue b/frontend/components/ui/command/CommandInput.vue
index 2713203f..84111c4b 100644
--- a/frontend/components/ui/command/CommandInput.vue
+++ b/frontend/components/ui/command/CommandInput.vue
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+  <div class="flex items-center px-3" cmdk-input-wrapper>
     <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
diff --git a/frontend/components/ui/dialog/DialogContent.vue b/frontend/components/ui/dialog/DialogContent.vue
index be00c5e6..4ceba298 100644
--- a/frontend/components/ui/dialog/DialogContent.vue
+++ b/frontend/components/ui/dialog/DialogContent.vue
@@ -1,50 +1,78 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
-import {
-  DialogClose,
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+  import { X } from "lucide-vue-next";
+  import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+  } from "reka-ui";
+  import { computed, type HTMLAttributes } from "vue";
+  import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+  const props = defineProps<
+    DialogContentProps & { class?: HTMLAttributes["class"]; disableClose?: boolean; disablePortal?: boolean }
+  >();
+  const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const delegatedProps = computed(() => {
+    const { class: _, disableClose, disablePortal, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+  });
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
+  <DialogPortal v-if="!props.disablePortal">
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
     />
     <DialogContent
       v-bind="forwarded"
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )"
+          props.class
+        )
+      "
     >
       <slot />
 
       <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+        v-if="!props.disableClose"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
       >
-        <X class="w-4 h-4" />
+        <X class="size-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>
+  <template v-else>
+    <DialogOverlay
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class
+        )
+      "
+    >
+      <slot />
+
+      <DialogClose
+        v-if="!props.disableClose"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </template>
 </template>
diff --git a/frontend/components/ui/pagination/PaginationEllipsis.vue b/frontend/components/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000..0f493d59
--- /dev/null
+++ b/frontend/components/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
+    <slot>
+      <MoreHorizontal />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/frontend/components/ui/pagination/PaginationFirst.vue b/frontend/components/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000..9893e36b
--- /dev/null
+++ b/frontend/components/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  Button,
+} from '@/components/ui/button'
+import { ChevronsLeft } from 'lucide-vue-next'
+import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/frontend/components/ui/pagination/PaginationLast.vue b/frontend/components/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000..95d74a8b
--- /dev/null
+++ b/frontend/components/ui/pagination/PaginationLast.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  Button,
+} from '@/components/ui/button'
+import { ChevronsRight } from 'lucide-vue-next'
+import { PaginationLast, type PaginationLastProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/frontend/components/ui/pagination/PaginationNext.vue b/frontend/components/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000..d985132f
--- /dev/null
+++ b/frontend/components/ui/pagination/PaginationNext.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  Button,
+} from '@/components/ui/button'
+import { ChevronRight } from 'lucide-vue-next'
+import { PaginationNext, type PaginationNextProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/frontend/components/ui/pagination/PaginationPrev.vue b/frontend/components/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000..9ab56ae1
--- /dev/null
+++ b/frontend/components/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  Button,
+} from '@/components/ui/button'
+import { ChevronLeft } from 'lucide-vue-next'
+import { PaginationPrev, type PaginationPrevProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/frontend/components/ui/pagination/index.ts b/frontend/components/ui/pagination/index.ts
new file mode 100644
index 00000000..61eb2b50
--- /dev/null
+++ b/frontend/components/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'reka-ui'
diff --git a/frontend/components/ui/progress/Progress.vue b/frontend/components/ui/progress/Progress.vue
new file mode 100644
index 00000000..5c98e8c4
--- /dev/null
+++ b/frontend/components/ui/progress/Progress.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from "reka-ui";
+  import { computed, type HTMLAttributes } from "vue";
+  import { cn } from "@/lib/utils";
+
+  const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(), {
+    modelValue: 0,
+  });
+
+  const value = computed(() => {
+    return props.modelValue ?? 0;
+  });
+
+  const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+  });
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', props.class)"
+  >
+    <ProgressIndicator
+      class="size-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - value}%);`"
+      :class="{
+        'bg-green-500': value > 50,
+        'bg-yellow-500': value > 25 && value < 50,
+        'bg-red-500': value < 25,
+      }"
+    />
+  </ProgressRoot>
+</template>
diff --git a/frontend/components/ui/progress/index.ts b/frontend/components/ui/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/frontend/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
diff --git a/frontend/components/ui/select/Select.vue b/frontend/components/ui/select/Select.vue
new file mode 100644
index 00000000..b9b1f331
--- /dev/null
+++ b/frontend/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/frontend/components/ui/select/SelectContent.vue b/frontend/components/ui/select/SelectContent.vue
new file mode 100644
index 00000000..7e80b794
--- /dev/null
+++ b/frontend/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/frontend/components/ui/select/SelectGroup.vue b/frontend/components/ui/select/SelectGroup.vue
new file mode 100644
index 00000000..d0010e0e
--- /dev/null
+++ b/frontend/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/frontend/components/ui/select/SelectItem.vue b/frontend/components/ui/select/SelectItem.vue
new file mode 100644
index 00000000..9fcada82
--- /dev/null
+++ b/frontend/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/frontend/components/ui/select/SelectItemText.vue b/frontend/components/ui/select/SelectItemText.vue
new file mode 100644
index 00000000..a4bcea84
--- /dev/null
+++ b/frontend/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/frontend/components/ui/select/SelectLabel.vue b/frontend/components/ui/select/SelectLabel.vue
new file mode 100644
index 00000000..31f6d45b
--- /dev/null
+++ b/frontend/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/frontend/components/ui/select/SelectScrollDownButton.vue b/frontend/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..eb41eda4
--- /dev/null
+++ b/frontend/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/frontend/components/ui/select/SelectScrollUpButton.vue b/frontend/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..f634e213
--- /dev/null
+++ b/frontend/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/frontend/components/ui/select/SelectSeparator.vue b/frontend/components/ui/select/SelectSeparator.vue
new file mode 100644
index 00000000..cbfae609
--- /dev/null
+++ b/frontend/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/frontend/components/ui/select/SelectTrigger.vue b/frontend/components/ui/select/SelectTrigger.vue
new file mode 100644
index 00000000..d50d719d
--- /dev/null
+++ b/frontend/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/frontend/components/ui/select/SelectValue.vue b/frontend/components/ui/select/SelectValue.vue
new file mode 100644
index 00000000..5ed42d17
--- /dev/null
+++ b/frontend/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/frontend/components/ui/select/index.ts b/frontend/components/ui/select/index.ts
new file mode 100644
index 00000000..31b92946
--- /dev/null
+++ b/frontend/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/frontend/components/ui/switch/Switch.vue b/frontend/components/ui/switch/Switch.vue
new file mode 100644
index 00000000..bbe3a3bc
--- /dev/null
+++ b/frontend/components/ui/switch/Switch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/frontend/components/ui/switch/index.ts b/frontend/components/ui/switch/index.ts
new file mode 100644
index 00000000..87b4b17d
--- /dev/null
+++ b/frontend/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/frontend/components/ui/table/Table.vue b/frontend/components/ui/table/Table.vue
new file mode 100644
index 00000000..a4238918
--- /dev/null
+++ b/frontend/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/frontend/components/ui/table/TableBody.vue b/frontend/components/ui/table/TableBody.vue
new file mode 100644
index 00000000..ab7a937d
--- /dev/null
+++ b/frontend/components/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/frontend/components/ui/table/TableCaption.vue b/frontend/components/ui/table/TableCaption.vue
new file mode 100644
index 00000000..3904c563
--- /dev/null
+++ b/frontend/components/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/frontend/components/ui/table/TableCell.vue b/frontend/components/ui/table/TableCell.vue
new file mode 100644
index 00000000..4a4da400
--- /dev/null
+++ b/frontend/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/frontend/components/ui/table/TableEmpty.vue b/frontend/components/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..3f6e0ffa
--- /dev/null
+++ b/frontend/components/ui/table/TableEmpty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/frontend/components/ui/table/TableFooter.vue b/frontend/components/ui/table/TableFooter.vue
new file mode 100644
index 00000000..693a4386
--- /dev/null
+++ b/frontend/components/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/frontend/components/ui/table/TableHead.vue b/frontend/components/ui/table/TableHead.vue
new file mode 100644
index 00000000..e882b608
--- /dev/null
+++ b/frontend/components/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/frontend/components/ui/table/TableHeader.vue b/frontend/components/ui/table/TableHeader.vue
new file mode 100644
index 00000000..220352f6
--- /dev/null
+++ b/frontend/components/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/frontend/components/ui/table/TableRow.vue b/frontend/components/ui/table/TableRow.vue
new file mode 100644
index 00000000..5b9e8749
--- /dev/null
+++ b/frontend/components/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/frontend/components/ui/table/index.ts b/frontend/components/ui/table/index.ts
new file mode 100644
index 00000000..2b4ce391
--- /dev/null
+++ b/frontend/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
diff --git a/frontend/composables/use-preferences.ts b/frontend/composables/use-preferences.ts
index 5ef71707..924e7be0 100644
--- a/frontend/composables/use-preferences.ts
+++ b/frontend/composables/use-preferences.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { TableHeader } from "~/components/Item/View/Table.types";
+import type { TableHeaderType } from "~/components/Item/View/Table.types";
 import type { DaisyTheme } from "~~/lib/data/themes";
 
 export type ViewType = "table" | "card" | "tree";
@@ -11,7 +11,7 @@ export type LocationViewPreferences = {
   itemDisplayView: ViewType;
   theme: DaisyTheme;
   itemsPerTablePage: number;
-  tableHeaders?: TableHeader[];
+  tableHeaders?: TableHeaderType[];
   displayHeaderDecor: boolean;
   language?: string;
 };
diff --git a/frontend/composables/utils.test.ts b/frontend/composables/utils.test.ts
index 2b839d55..9cbc3b03 100644
--- a/frontend/composables/utils.test.ts
+++ b/frontend/composables/utils.test.ts
@@ -6,7 +6,7 @@ describe("maybeURL works as expected", () => {
     const result = maybeUrl("https://example.com");
     expect(result.isUrl).toBe(true);
     expect(result.url).toBe("https://example.com");
-    expect(result.text).toBe("Link");
+    expect(result.text).toBe("https://example.com");
   });
 
   test("special URL syntax", () => {
diff --git a/frontend/composables/utils.ts b/frontend/composables/utils.ts
index 42b05ce4..87f11f17 100644
--- a/frontend/composables/utils.ts
+++ b/frontend/composables/utils.ts
@@ -64,7 +64,7 @@ export function maybeUrl(str: string): MaybeUrlResult {
     }
   } else {
     result.url = str;
-    result.text = "Link";
+    result.text = str;
   }
 
   return result;
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b3c65988..bf79f04e 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -15,8 +15,8 @@
       <Sidebar collapsible="icon">
         <SidebarHeader class="items-center bg-base-200">
           <SidebarGroupLabel class="text-base">{{ $t("global.welcome", { username: username }) }}</SidebarGroupLabel>
-          <NuxtLink class="avatar placeholder group-data-[collapsible=icon]:hidden" to="/home">
-            <div class="w-24 rounded-full bg-base-300 p-4 text-neutral-content">
+          <NuxtLink class="group-data-[collapsible=icon]:hidden" to="/home">
+            <div class="flex size-24 items-center justify-center rounded-full bg-base-300 p-4 text-neutral-content">
               <AppLogo />
             </div>
           </NuxtLink>
@@ -33,7 +33,7 @@
                 </span>
               </SidebarMenuButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent class="min-w-[var(--reka-dropdown-menu-trigger-width)]">
+            <DropdownMenuContent class="z-40 min-w-[var(--reka-dropdown-menu-trigger-width)]">
               <DropdownMenuItem
                 v-for="btn in dropdown"
                 :key="btn.id"
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 1c19e868..30887583 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -4,8 +4,7 @@
             "import_dialog": {
                 "change_warning": "Behavior for imports with existing import_refs has changed. If an import_ref is present in the CSV file, the \nitem will be updated with the values in the CSV file.",
                 "description": "Import a CSV file containing your items, labels, and locations. See documentation for more information on the \nrequired format.",
-                "title": "Import CSV File",
-                "upload": "Upload"
+                "title": "Import CSV File"
             },
             "outdated": {
                 "current_version": "Current Version",
@@ -55,7 +54,8 @@
                 "titles": "Labels"
             },
             "page_qr_code": {
-                "page_url": "Page URL"
+                "page_url": "Page URL",
+                "qr_tooltip": "Show QR Code"
             },
             "password_score": {
                 "password_strength": "Password Strength"
@@ -78,7 +78,9 @@
                 },
                 "table": {
                     "page": "Page",
-                    "rows_per_page": "Rows per page"
+                    "rows_per_page": "Rows per page",
+                    "table_settings": "Table Settings",
+                    "headers": "Headers"
                 }
             }
         },
@@ -148,7 +150,10 @@
         "update": "Update",
         "value": "Value",
         "version": "Version: { version }",
-        "welcome": "Welcome, { username }"
+        "welcome": "Welcome, { username }",
+        "insured": "Insured",
+        "archived": "Archived",
+        "quantity": "Quantity"
     },
     "home": {
         "labels": "Labels",
@@ -279,6 +284,7 @@
     "locations": {
         "child_locations": "Child Locations",
         "collapse_tree": "Collapse Tree",
+        "expand_tree": "Expand Tree",
         "no_results": "No Locations Found",
         "update_location": "Update Location"
     },
@@ -359,6 +365,7 @@
         "user_profile_sub": "Invite users, and manage your account."
     },
     "scanner": {
+        "title": "Scanner",
         "error": "An error occurred while scanning",
         "invalid_url": "Invalid barcode URL",
         "no_sources": "No video sources available",
diff --git a/frontend/pages/[...all].vue b/frontend/pages/[...all].vue
index 2fdddf16..9abc3a2a 100644
--- a/frontend/pages/[...all].vue
+++ b/frontend/pages/[...all].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import { buttonVariants } from "@/components/ui/button";
+
   useHead({
     title: "404. Not Found",
   });
@@ -8,9 +10,9 @@
 </script>
 
 <template>
-  <h1 class="flex flex-col text-center font-extrabold">
+  <h1 class="flex flex-col gap-5 text-center font-extrabold">
     <span class="text-7xl">404.</span>
-    <span class="mt-5 text-5xl"> Page Not Found </span>
-    <NuxtLink to="/" class="btn mt-5 text-xl"> Return Home </NuxtLink>
+    <span class="text-5xl"> Page Not Found </span>
+    <NuxtLink to="/" :class="buttonVariants({ size: 'lg' })"> Return Home </NuxtLink>
   </h1>
 </template>
diff --git a/frontend/pages/home/index.vue b/frontend/pages/home/index.vue
index 1678783d..efa1ea8d 100644
--- a/frontend/pages/home/index.vue
+++ b/frontend/pages/home/index.vue
@@ -49,7 +49,7 @@
       <section>
         <Subtitle> {{ $t("home.storage_locations") }} </Subtitle>
         <p v-if="locations.length === 0" class="ml-2 text-sm">{{ $t("locations.no_results") }}</p>
-        <div v-else class="card grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
           <LocationCard v-for="location in locations" :key="location.id" :location="location" />
         </div>
       </section>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index dc15e54f..402637a6 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -9,6 +9,10 @@
   import MdiArrowRight from "~icons/mdi/arrow-right";
   import MdiLock from "~icons/mdi/lock";
   import MdiMastodon from "~icons/mdi/mastodon";
+  import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+  import { Button } from "@/components/ui/button";
+  import LanguageSelector from "~/components/App/LanguageSelector.vue";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 
   useHead({
     title: "Homebox | Organize and Tag Your Stuff",
@@ -136,6 +140,7 @@
 
 <template>
   <div class="flex min-h-screen flex-col">
+    <!-- TODO: when daisyui is removed then add -z-10 -->
     <div class="absolute top-0 min-w-full fill-primary">
       <div class="flex min-h-[20vh] flex-col bg-primary" />
       <svg
@@ -160,41 +165,61 @@
           </h2>
           <p class="ml-1 text-lg text-base-content/50">{{ $t("index.tagline") }}</p>
         </div>
-        <div class="ml-auto mt-6 flex gap-4 text-neutral-content sm:mt-0">
-          <a
-            class="tooltip"
-            :data-tip="$t('global.github')"
-            href="https://github.com/sysadminsmedia/homebox"
-            target="_blank"
-          >
-            <MdiGithub class="size-8" />
-          </a>
-          <a
-            href="https://noc.social/@sysadminszone"
-            class="tooltip"
-            :data-tip="$t('global.follow_dev')"
-            target="_blank"
-          >
-            <MdiMastodon class="size-8" />
-          </a>
-          <a href="https://discord.gg/aY4DCkpNA9" class="tooltip" :data-tip="$t('global.join_discord')" target="_blank">
-            <MdiDiscord class="size-8" />
-          </a>
-          <a href="https://homebox.software/en/" class="tooltip" :data-tip="$t('global.read_docs')" target="_blank">
-            <MdiFolder class="size-8" />
-          </a>
-        </div>
+        <TooltipProvider :delay-duration="0">
+          <div class="z-10 ml-auto mt-6 flex items-center gap-4 text-neutral-content sm:mt-0">
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <a href="https://github.com/sysadminsmedia/homebox" target="_blank">
+                  <MdiGithub class="size-8" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>{{ $t("global.github") }}</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <a href="https://noc.social/@sysadminszone" target="_blank">
+                  <MdiMastodon class="size-8" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>{{ $t("global.follow_dev") }}</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <a href="https://discord.gg/aY4DCkpNA9" target="_blank">
+                  <MdiDiscord class="size-8" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>{{ $t("global.join_discord") }}</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <a href="https://homebox.software/en/" target="_blank">
+                  <MdiFolder class="size-8" />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent>{{ $t("global.read_docs") }}</TooltipContent>
+            </Tooltip>
+
+            <LanguageSelector class="z-10 text-primary" :include-text="false" />
+          </div>
+        </TooltipProvider>
       </header>
       <div class="grid min-h-[50vh] p-6 sm:place-items-center">
-        <div>
+        <!-- TODO: when daisyui is removed then remove z-10 -->
+        <div class="z-10">
           <Transition name="slide-fade">
             <form v-if="registerForm" @submit.prevent="registerUser">
-              <div class="card bg-base-100 shadow-xl md:w-[500px]">
-                <div class="card-body">
-                  <h2 class="card-title text-2xl">
+              <Card class="md:w-[500px]">
+                <CardHeader>
+                  <CardTitle class="flex items-center gap-2">
                     <MdiAccount class="mr-1 size-7" />
                     {{ $t("index.register") }}
-                  </h2>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent class="flex flex-col gap-2">
                   <FormTextField v-model="email" :label="$t('index.set_email')" />
                   <FormTextField v-model="username" :label="$t('index.set_name')" />
                   <div v-if="!(groupToken == '')" class="pb-1 pt-4 text-center">
@@ -205,26 +230,28 @@
                   </div>
                   <FormPassword v-model="password" :label="$t('index.set_password')" />
                   <PasswordScore v-model:valid="canRegister" :password="password" />
-                  <div class="card-actions justify-end">
-                    <button
-                      type="submit"
-                      class="btn btn-primary mt-2"
-                      :class="loading ? 'loading' : ''"
-                      :disabled="loading || !canRegister"
-                    >
-                      {{ $t("index.register") }}
-                    </button>
-                  </div>
-                </div>
-              </div>
+                </CardContent>
+                <CardFooter>
+                  <Button
+                    class="w-full"
+                    type="submit"
+                    :class="loading ? 'loading' : ''"
+                    :disabled="loading || !canRegister"
+                  >
+                    {{ $t("index.register") }}
+                  </Button>
+                </CardFooter>
+              </Card>
             </form>
             <form v-else @submit.prevent="login">
-              <div class="card bg-base-100 shadow-xl md:w-[500px]">
-                <div class="card-body">
-                  <h2 class="card-title text-2xl">
+              <Card class="md:w-[500px]">
+                <CardHeader>
+                  <CardTitle class="flex items-center gap-2">
                     <MdiAccount class="mr-1 size-7" />
                     {{ $t("index.login") }}
-                  </h2>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent class="flex flex-col gap-2">
                   <template v-if="status && status.demo">
                     <p class="text-center text-xs italic">This is a demo instance</p>
                     <p class="text-center text-xs">
@@ -239,33 +266,28 @@
                   <div class="max-w-[140px]">
                     <FormCheckbox v-model="remember" :label="$t('index.remember_me')" />
                   </div>
-                  <div class="card-actions justify-end">
-                    <button
-                      type="submit"
-                      class="btn btn-primary btn-block"
-                      :class="loading ? 'loading' : ''"
-                      :disabled="loading"
-                    >
-                      {{ $t("index.login") }}
-                    </button>
-                  </div>
-                </div>
-              </div>
+                </CardContent>
+                <CardFooter>
+                  <Button class="w-full" type="submit" :class="loading ? 'loading' : ''" :disabled="loading">
+                    {{ $t("index.login") }}
+                  </Button>
+                </CardFooter>
+              </Card>
             </form>
           </Transition>
           <div class="mt-6 text-center">
-            <BaseButton
-              v-if="status && status.allowRegistration"
-              class="btn-primary btn-wide"
-              @click="() => toggleLogin()"
-            >
-              <template #icon>
-                <MdiAccountPlus v-if="!registerForm" class="swap-off size-5" />
-                <MdiLogin v-else class="swap-off size-5" />
-                <MdiArrowRight class="swap-on size-5" />
-              </template>
+            <Button v-if="status && status.allowRegistration" class="group" variant="link" @click="() => toggleLogin()">
+              <div class="relative mx-2">
+                <div
+                  class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-[360deg]"
+                >
+                  <MdiAccountPlus v-if="!registerForm" class="size-5 group-hover:hidden" />
+                  <MdiLogin v-else class="size-5 group-hover:hidden" />
+                  <MdiArrowRight class="hidden size-5 group-hover:block" />
+                </div>
+              </div>
               {{ registerForm ? $t("index.login") : $t("index.register") }}
-            </BaseButton>
+            </Button>
             <p v-else class="inline-flex items-center gap-2 text-sm italic text-base-content">
               <MdiLock class="inline-block size-4" />
               {{ $t("index.disabled_registration") }}
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index cb8f592e..13040e5d 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -8,6 +8,23 @@
   import MdiPlus from "~icons/mdi/plus";
   import MdiMinus from "~icons/mdi/minus";
   import MdiDownload from "~icons/mdi/download";
+  import MdiContentCopy from "~icons/mdi/content-copy";
+  import MdiDelete from "~icons/mdi/delete";
+  import { Separator } from "@/components/ui/separator";
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+  } from "@/components/ui/breadcrumb";
+  import { Button, ButtonGroup, buttonVariants } from "@/components/ui/button";
+  import { Dialog, DialogContent } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Label } from "@/components/ui/label";
+  import { Switch } from "@/components/ui/switch";
+
+  const { openDialog, closeDialog } = useDialog();
 
   definePageMeta({
     middleware: ["auth"],
@@ -365,27 +382,19 @@
     return v;
   });
 
-  const refDialog = ref<HTMLDialogElement>();
   const dialoged = reactive({
     src: "",
   });
 
-  function openDialog(img: Photo) {
-    // @ts-ignore - I don't know why this is happening
-    refDialog.value?.showModal();
+  function openImageDialog(img: Photo) {
     dialoged.src = img.src;
+    openDialog("item-image");
   }
 
-  function closeDialog() {
-    // @ts-ignore - I don't know why this is happening
-    refDialog.value?.close();
+  function closeImageDialog() {
+    closeDialog("item-image");
   }
 
-  const refDialogBody = ref<HTMLDivElement>();
-  onClickOutside(refDialogBody, () => {
-    closeDialog();
-  });
-
   const currentUrl = computed(() => {
     return window.location.href;
   });
@@ -444,43 +453,108 @@
 
     return resp.data.items;
   });
+
+  async function duplicateItem() {
+    if (!item.value) {
+      return;
+    }
+
+    const { error, data } = await api.items.create({
+      name: `${item.value.name} Copy`,
+      description: item.value.description,
+      locationId: item.value.location!.id,
+      parentId: item.value.parent?.id,
+      labelIds: item.value.labels.map(l => l.id),
+    });
+
+    if (error) {
+      toast.error("Failed to duplicate item");
+      return;
+    }
+
+    // add extra fields
+    const { error: updateError } = await api.items.update(data.id, {
+      ...item.value,
+      id: data.id,
+      labelIds: data.labels.map(l => l.id),
+      locationId: data.location!.id,
+      name: data.name,
+      assetId: data.assetId,
+    });
+
+    if (updateError) {
+      toast.error("Failed to duplicate item");
+      return;
+    }
+
+    navigateTo(`/item/${data.id}`);
+  }
+
+  const confirm = useConfirm();
+
+  async function deleteItem() {
+    const confirmed = await confirm.open("Are you sure you want to delete this item?");
+
+    if (!confirmed.data) {
+      return;
+    }
+
+    const { error } = await api.items.delete(itemId.value);
+    if (error) {
+      toast.error("Failed to delete item");
+      return;
+    }
+    toast.success("Item deleted");
+    navigateTo("/home");
+  }
 </script>
 
 <template>
   <BaseContainer v-if="item" class="pb-8">
+    <!-- set page title -->
     <Title>{{ item.name }}</Title>
-    <dialog ref="refDialog" class="fixed z-[999] overflow-visible bg-transparent">
-      <div ref="refDialogBody" class="relative">
-        <div class="absolute right-0 -mr-3 -mt-3 space-x-1 sm:-mr-4 sm:-mt-4">
-          <a class="btn btn-circle btn-primary btn-sm sm:btn-md" :href="dialoged.src" download>
-            <MdiDownload class="size-5" />
-          </a>
-          <button class="btn btn-circle btn-primary btn-sm sm:btn-md" @click="closeDialog()">
-            <MdiClose class="size-5" />
-          </button>
-        </div>
 
-        <img class="max-h-[80vh] max-w-[80vw]" :src="dialoged.src" />
-      </div>
-    </dialog>
+    <Dialog dialog-id="item-image">
+      <DialogContent class="w-auto border-transparent bg-transparent p-0" disable-close>
+        <img :src="dialoged.src" />
+        <a :class="buttonVariants({ size: 'icon' })" :href="dialoged.src" download class="absolute right-11 top-1">
+          <MdiDownload />
+        </a>
+        <Button size="icon" class="absolute right-1 top-1" @click="closeImageDialog">
+          <MdiClose />
+        </Button>
+      </DialogContent>
+    </Dialog>
 
     <section>
       <div class="rounded bg-base-100 p-3">
-        <header class="mb-2">
+        <header :class="{ 'mb-2': item.description }">
           <div class="flex flex-wrap items-end gap-2">
-            <div class="avatar placeholder mb-auto">
-              <div class="w-12 rounded-full bg-neutral-focus text-neutral-content">
-                <MdiPackageVariant class="size-7" />
-              </div>
+            <div
+              class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+            >
+              <MdiPackageVariant class="size-7" />
             </div>
             <div>
-              <div v-if="fullpath && fullpath.length > 0" class="breadcrumbs py-0 text-sm">
-                <ul class="text-base-content/70">
-                  <li v-for="part in fullpath" :key="part.id" class="text-wrap">
-                    <NuxtLink :to="`/${part.type}/${part.id}`"> {{ part.name }}</NuxtLink>
-                  </li>
-                </ul>
-              </div>
+              <Breadcrumb v-if="fullpath && fullpath.length > 0">
+                <BreadcrumbList>
+                  <BreadcrumbItem v-for="(part, idx) in fullpath" :key="part.id">
+                    <BreadcrumbLink
+                      v-if="idx < fullpath.length - 1"
+                      as-child
+                      class="text-base-content/70 hover:underline"
+                    >
+                      <NuxtLink :to="`/${part.type}/${part.id}`">
+                        {{ part.name }}
+                      </NuxtLink>
+                    </BreadcrumbLink>
+                    <template v-else>
+                      {{ part.name }}
+                    </template>
+                    <BreadcrumbSeparator v-if="idx < fullpath.length - 1" :key="`sep-${part.id}`" />
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
               <h1 class="text-wrap pb-1 text-2xl">
                 {{ item ? item.name : "" }}
               </h1>
@@ -489,83 +563,103 @@
               </div>
               <div class="flex flex-wrap gap-1 text-wrap text-xs">
                 <div>
-                  Created
+                  {{ $t("items.created_at") }}
                   <DateTime :date="item?.createdAt" />
                 </div>
                 -
                 <div>
-                  Updated
+                  {{ $t("items.updated_at") }}
                   <DateTime :date="item?.updatedAt" />
                 </div>
               </div>
             </div>
+            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
+              <LabelMaker
+                v-if="typeof item.assetId === 'string' && item.assetId != ''"
+                :id="item.assetId"
+                type="asset"
+              />
+              <LabelMaker v-else :id="item.id" type="item" />
+              <Button class="w-9 md:w-auto" @click="duplicateItem">
+                <MdiContentCopy />
+                <span class="hidden md:inline">{{ $t("global.duplicate") }}</span>
+              </Button>
+              <Button variant="destructive" class="w-9 md:w-auto" @click="deleteItem">
+                <MdiDelete />
+                <span class="hidden md:inline">{{ $t("global.delete") }}</span>
+              </Button>
+            </div>
           </div>
         </header>
-        <div class="divider my-0 mb-1"></div>
-        <div class="prose max-w-full p-1">
-          <Markdown v-if="item && item.description" class="text-base" :source="item.description"> </Markdown>
+        <Separator v-if="item.description" />
+        <div v-if="item.description" class="prose max-w-full p-1">
+          <Markdown class="text-base" :source="item.description"> </Markdown>
         </div>
       </div>
 
       <div class="mb-6 mt-3 flex flex-wrap items-center justify-between">
-        <div class="btn-group">
-          <NuxtLink
+        <ButtonGroup>
+          <Button
             v-for="t in tabs"
             :key="t.id"
-            :to="t.to"
-            class="btn btn-sm"
-            :class="`${t.to === currentPath ? 'btn-active' : ''}`"
+            as-child
+            :variant="t.to === currentPath ? 'default' : 'outline'"
+            size="sm"
           >
-            {{ $t(t.name) }}
-          </NuxtLink>
-        </div>
-
-        <LabelMaker v-if="typeof item.assetId === 'string' && item.assetId != ''" :id="item.assetId" type="asset" />
-        <LabelMaker v-else :id="item.id" type="item" />
+            <NuxtLink :to="t.to">
+              {{ $t(t.name) }}
+            </NuxtLink>
+          </Button>
+        </ButtonGroup>
       </div>
     </section>
 
     <section>
       <div class="space-y-6">
+        <!-- this renders the other pages content -->
+        <NuxtPage :item="item" :page-key="itemId" />
+
+        <!-- anything in this is not rendered if on another page -->
         <BaseCard v-if="!hasNested" collapsable>
           <template #title> {{ $t("items.details") }} </template>
           <template #title-actions>
             <div class="mt-2 flex flex-wrap items-center justify-between gap-4">
-              <label class="label cursor-pointer">
-                <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
-                <span class="label-text ml-4"> Show Empty </span>
-              </label>
+              <Label class="flex cursor-pointer items-center gap-2">
+                <Switch v-model="preferences.showEmpty" />
+                Show Empty
+              </Label>
               <div class="space-x-1">
-                <CopyText :text="currentUrl" :icon-size="16" class="btn btn-circle btn-ghost btn-xs" />
-                <PageQRCode />
+                <CopyText :text="currentUrl" :icon-size="16" />
               </div>
             </div>
           </template>
           <DetailsSection :details="itemDetails">
             <template #quantity="{ detail }">
-              {{ detail.text }}
-              <span
-                class="my-0 ml-4 inline-flex gap-2 opacity-0 transition-opacity duration-75 group-hover:opacity-100"
-              >
-                <button class="btn btn-circle btn-xs" @click="adjustQuantity(-1)">
-                  <MdiMinus class="size-3" />
-                </button>
-                <button class="btn btn-circle btn-xs" @click="adjustQuantity(1)">
-                  <MdiPlus class="size-3" />
-                </button>
-              </span>
+              <div class="flex items-center">
+                {{ detail.text }}
+                <span
+                  class="my-0 ml-4 inline-flex gap-2 opacity-10 transition-opacity duration-75 group-hover:opacity-100"
+                >
+                  <Button size="icon" variant="outline" class="size-8 rounded-full" @click="adjustQuantity(-1)">
+                    <MdiMinus class="size-3" />
+                  </Button>
+                  <Button size="icon" variant="outline" class="size-8 rounded-full" @click="adjustQuantity(1)">
+                    <MdiPlus class="size-3" />
+                  </Button>
+                </span>
+              </div>
             </template>
           </DetailsSection>
         </BaseCard>
 
-        <NuxtPage :item="item" :page-key="itemId" />
+        <!-- anything in this is not rendered if on another page -->
         <template v-if="!hasNested">
           <BaseCard v-if="photos && photos.length > 0">
             <template #title> {{ $t("items.photos") }} </template>
             <div
               class="scroll-bg container mx-auto flex max-h-[500px] flex-wrap gap-2 overflow-y-scroll border-t border-gray-300 p-4"
             >
-              <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
+              <button v-for="(img, i) in photos" :key="i" @click="openImageDialog(img)">
                 <img class="max-h-[200px] rounded" :src="img.src" />
               </button>
             </div>
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index 7eb7e6e9..85df2c9a 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -4,11 +4,19 @@
   import { AttachmentTypes } from "~~/lib/api/types/non-generated";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
-  import Autocomplete from "~~/components/Form/Autocomplete.vue";
   import MdiDelete from "~icons/mdi/delete";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiContentSaveOutline from "~icons/mdi/content-save-outline";
-  import MdiContentCopy from "~icons/mdi/content-copy";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { Button } from "@/components/ui/button";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Checkbox } from "@/components/ui/checkbox";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Switch } from "@/components/ui/switch";
+  import { Label } from "@/components/ui/label";
+
+  const { openDialog, closeDialog } = useDialog();
 
   definePageMeta({
     middleware: ["auth"],
@@ -53,44 +61,23 @@
     return data;
   });
 
-  const item = computed<ItemOut>(() => nullableItem.value as ItemOut);
+  const item = ref<ItemOut & { labelIds: string[] }>(null as any);
+
+  watchEffect(() => {
+    if (nullableItem.value) {
+      item.value = {
+        ...nullableItem.value,
+        labelIds: nullableItem.value.labels.map(l => l.id) ?? [],
+      };
+    }
+  });
+
+  // const item = computed(() => nullableItem.value as ItemOut);
 
   onMounted(() => {
     refresh();
   });
 
-  async function duplicateItem() {
-    const { error, data } = await api.items.create({
-      name: `${item.value.name} Copy`,
-      description: item.value.description,
-      locationId: item.value.location!.id,
-      parentId: item.value.parent?.id,
-      labelIds: item.value.labels.map(l => l.id),
-    });
-
-    if (error) {
-      toast.error("Failed to duplicate item");
-      return;
-    }
-
-    // add extra fields
-    const { error: updateError } = await api.items.update(data.id, {
-      ...item.value,
-      id: data.id,
-      labelIds: data.labels.map(l => l.id),
-      locationId: data.location!.id,
-      name: data.name,
-      assetId: data.assetId,
-    });
-
-    if (updateError) {
-      toast.error("Failed to duplicate item");
-      return;
-    }
-
-    navigateTo(`/item/${data.id}`);
-  }
-
   async function saveItem() {
     if (!item.value.location?.id) {
       toast.error("Failed to save item: no location selected");
@@ -112,7 +99,7 @@
     const payload: ItemUpdate = {
       ...item.value,
       locationId: item.value.location?.id,
-      labelIds: item.value.labels.map(l => l.id),
+      labelIds: item.value.labelIds,
       parentId: parent.value ? parent.value.id : null,
       assetId: item.value.assetId,
       purchasePrice,
@@ -366,7 +353,6 @@
   }
 
   const editState = reactive({
-    modal: false,
     loading: false,
 
     // Values
@@ -387,7 +373,7 @@
     editState.title = attachment.document.title;
     editState.type = attachment.type;
     editState.primary = attachment.primary;
-    editState.modal = true;
+    openDialog("attachment-edit");
 
     editState.obj = attachmentOpts.find(o => o.value === attachment.type) || attachmentOpts[0];
   }
@@ -408,7 +394,7 @@
     item.value.attachments = data.attachments;
 
     editState.loading = false;
-    editState.modal = false;
+    closeDialog("attachment-edit");
 
     editState.id = "";
     editState.title = "";
@@ -432,22 +418,6 @@
   const { query, results } = useItemSearch(api, { immediate: false });
   const parent = ref();
 
-  async function deleteItem() {
-    const confirmed = await confirm.open("Are you sure you want to delete this item?");
-
-    if (!confirmed.data) {
-      return;
-    }
-
-    const { error } = await api.items.delete(itemId.value);
-    if (error) {
-      toast.error("Failed to delete item");
-      return;
-    }
-    toast.success("Item deleted");
-    navigateTo("/home");
-  }
-
   async function keyboardSave(e: KeyboardEvent) {
     // Cmd + S
     if (e.metaKey && e.key === "s") {
@@ -502,7 +472,7 @@
     const payload: ItemUpdate = {
       ...item.value,
       locationId: item.value.location?.id,
-      labelIds: item.value.labels.map(l => l.id),
+      labelIds: item.value.labelIds,
       parentId: parent.value ? parent.value.id : null,
       assetId: item.value.assetId,
     };
@@ -532,75 +502,65 @@
 
 <template>
   <div v-if="item" class="pb-8">
-    <BaseModal v-model="editState.modal">
-      <template #title> Attachment Edit </template>
+    <Dialog dialog-id="attachment-edit">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Attachment Edit</DialogTitle>
+        </DialogHeader>
 
-      <FormTextField v-model="editState.title" label="Attachment Title" />
-      <FormSelect
-        v-model:value="editState.type"
-        label="Attachment Type"
-        value-key="value"
-        name="text"
-        :items="attachmentOpts"
-      />
-      <div v-if="editState.type == 'photo'" class="mt-3 flex gap-2">
-        <input v-model="editState.primary" type="checkbox" class="checkbox" />
-        <p class="text-sm">
-          <span class="font-semibold">Primary Photo</span>
-          This options is only available for photos. Only one photo can be primary. If you select this option, the
-          current primary photo, if any will be unselected.
-        </p>
-      </div>
-      <div class="modal-action">
-        <BaseButton :loading="editState.loading" @click="updateAttachment"> Update </BaseButton>
-      </div>
-    </BaseModal>
-
-    <section class="relative">
-      <div class="sticky top-1 z-10 my-4 flex items-center justify-end gap-2">
-        <div class="tooltip tooltip-right mr-auto" :data-tip="$t('items.show_advanced_view_options')">
-          <label class="label mr-auto cursor-pointer">
-            <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
-            <span class="label-text ml-4"> {{ $t("items.advanced") }} </span>
+        <FormTextField v-model="editState.title" label="Attachment Title" />
+        <div>
+          <Label for="attachment-type"> Attachment Type </Label>
+          <Select id="attachment-type" v-model:model-value="editState.type">
+            <SelectTrigger>
+              <SelectValue placeholder="Select a type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="opt in attachmentOpts" :key="opt.value" :value="opt.value">
+                {{ opt.text }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div v-if="editState.type == 'photo'" class="mt-3 flex items-center gap-2">
+          <Checkbox id="primary" v-model="editState.primary" label="Primary Photo" />
+          <label class="cursor-pointer text-sm" for="primary">
+            <span class="font-semibold">Primary Photo</span>
+            This options is only available for photos. Only one photo can be primary. If you select this option, the
+            current primary photo, if any will be unselected.
           </label>
         </div>
-        <BaseButton size="sm" class="btn" @click="duplicateItem">
-          <template #icon>
-            <MdiContentCopy />
-          </template>
-          {{ $t("global.duplicate") }}
-        </BaseButton>
-        <BaseButton size="sm" @click="saveItem">
-          <template #icon>
-            <MdiContentSaveOutline />
-          </template>
+
+        <DialogFooter>
+          <Button :loading="editState.loading" @click="updateAttachment"> Update </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <section class="relative">
+      <div class="sticky top-1 z-10 my-4 flex items-center justify-between gap-2">
+        <TooltipProvider :delay-duration="0">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Label class="flex cursor-pointer items-center gap-2 backdrop-blur-sm">
+                <Switch v-model="preferences.editorAdvancedView" />
+                {{ $t("items.advanced") }}
+              </Label>
+            </TooltipTrigger>
+            <TooltipContent>{{ $t("items.show_advanced_view_options") }}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <Button class="" size="sm" @click="saveItem">
+          <MdiContentSaveOutline />
           {{ $t("global.save") }}
-        </BaseButton>
-        <BaseButton class="btn btn-error btn-sm" @click="deleteItem()">
-          <MdiDelete class="mr-2" />
-          {{ $t("global.delete") }}
-        </BaseButton>
+        </Button>
       </div>
       <div v-if="!requestPending" class="space-y-6">
         <BaseCard class="overflow-visible">
           <template #title> {{ $t("items.edit_details") }} </template>
-          <template #title-actions>
-            <div class="mt-2 flex flex-wrap items-center justify-between gap-4"></div>
-          </template>
           <div class="mb-6 grid gap-4 border-t px-5 pt-2 md:grid-cols-2">
-            <LocationLegacySelector
-              v-model="item.location"
-              @update:model-value="informAboutDesyncingLocationFromParent()"
-            />
-            <FormMultiselect v-model="item.labels" :label="$t('global.labels')" :items="labels ?? []" />
-            <FormToggle
-              v-model="item.syncChildItemsLocations"
-              label="Sync child items' locations"
-              inline
-              @update:model-value="syncChildItemsLocations()"
-            />
-            <Autocomplete
-              v-if="preferences.editorAdvancedView"
+            <LocationSelector v-model="item.location" @update:model-value="informAboutDesyncingLocationFromParent()" />
+            <ItemSelector
               v-model="parent"
               v-model:search="query"
               :items="results"
@@ -609,6 +569,11 @@
               no-results-text="Type to search..."
               @update:model-value="maybeSyncWithParentLocation()"
             />
+            <div class="flex flex-col gap-2">
+              <Label class="px-1">Sync child items' locations</Label>
+              <Switch v-model="item.syncChildItemsLocations" @update:model-value="syncChildItemsLocations()" />
+            </div>
+            <LabelSelector v-model="item.labelIds" :labels="labels" />
           </div>
 
           <div class="border-t border-gray-300 sm:p-0">
@@ -655,7 +620,7 @@
           </div>
         </BaseCard>
 
-        <BaseCard>
+        <BaseCard v-if="preferences.editorAdvancedView">
           <template #title> {{ $t("items.custom_fields") }} </template>
           <div class="space-y-4 divide-y divide-gray-300 border-t px-5">
             <div
@@ -667,24 +632,23 @@
               <FormTextField v-model="field.name" :label="$t('global.name')" />
               <div class="col-span-3 flex items-end">
                 <FormTextField v-model="field.textValue" :label="$t('global.value')" :max-length="500" />
-                <div class="tooltip" :data-tip="$t('global.delete')">
-                  <button class="btn btn-square btn-sm mb-2 ml-2" @click="item.fields.splice(idx, 1)">
-                    <MdiDelete />
-                  </button>
-                </div>
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <Button size="icon" variant="destructive" class="ml-2" @click="item.fields.splice(idx, 1)">
+                      <MdiDelete />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{{ $t("global.delete") }}</TooltipContent>
+                </Tooltip>
               </div>
             </div>
           </div>
           <div class="mt-4 flex justify-end px-5 pb-4">
-            <BaseButton size="sm" @click="addField"> {{ $t("global.add") }} </BaseButton>
+            <Button size="sm" @click="addField"> {{ $t("global.add") }} </Button>
           </div>
         </BaseCard>
 
-        <div
-          v-if="preferences.editorAdvancedView"
-          ref="attDropZone"
-          class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg"
-        >
+        <div ref="attDropZone" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.attachments") }}</h3>
             <p class="text-xs">{{ $t("items.changes_persisted_immediately") }}</p>
@@ -721,23 +685,29 @@
                   {{ $t(`items.${attachment.type}`) }}
                 </p>
                 <div class="flex justify-end gap-2">
-                  <div class="tooltip" :data-tip="$t('global.delete')">
-                    <button class="btn btn-square btn-sm" @click="deleteAttachment(attachment.id)">
-                      <MdiDelete />
-                    </button>
-                  </div>
-                  <div class="tooltip" :data-tip="$t('global.edit')">
-                    <button class="btn btn-square btn-sm" @click="openAttachmentEditDialog(attachment)">
-                      <MdiPencil />
-                    </button>
-                  </div>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <Button variant="destructive" size="icon" @click="deleteAttachment(attachment.id)">
+                        <MdiDelete />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{{ $t("global.delete") }}</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <Button size="icon" @click="openAttachmentEditDialog(attachment)">
+                        <MdiPencil />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{{ $t("global.edit") }}</TooltipContent>
+                  </Tooltip>
                 </div>
               </li>
             </ul>
           </div>
         </div>
 
-        <div v-if="preferences.editorAdvancedView" class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.purchase_details") }}</h3>
           </div>
@@ -788,7 +758,7 @@
           </div>
         </div>
 
-        <div v-if="preferences.editorAdvancedView" class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">{{ $t("items.warranty_details") }}</h3>
           </div>
@@ -839,7 +809,7 @@
           </div>
         </div>
 
-        <div v-if="preferences.editorAdvancedView" class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">Sold Details</h3>
           </div>
diff --git a/frontend/pages/item/new.vue b/frontend/pages/item/new.vue
deleted file mode 100644
index 477a591f..00000000
--- a/frontend/pages/item/new.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-  definePageMeta({
-    middleware: ["auth"],
-  });
-
-  const show = reactive({
-    identification: true,
-    purchase: false,
-    sold: false,
-    extras: false,
-  });
-
-  const form = reactive({
-    name: "",
-    description: "",
-    notes: "",
-
-    // Item Identification
-    serialNumber: "",
-    modelNumber: "",
-    manufacturer: "",
-
-    // Purchase Information
-    purchaseTime: "",
-    purchasePrice: "",
-    purchaseFrom: "",
-
-    // Sold Information
-    soldTime: "",
-    soldPrice: "",
-    soldTo: "",
-    soldNotes: "",
-  });
-
-  function submit() {
-    console.log("Submitted!");
-  }
-</script>
-
-<template>
-  <BaseContainer cmp="section">
-    <BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader>
-    <form class="mx-auto my-5 max-w-3xl space-y-6" @submit.prevent="submit">
-      <div class="collapse-title divider cursor-pointer px-0">Required Information</div>
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <FormTextField v-model="form.name" label="Name" />
-          <FormTextArea v-model="form.description" label="Description" limit="1000" />
-        </div>
-      </div>
-
-      <div class="divider">
-        <button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button>
-      </div>
-      <div v-if="show.identification" class="card bg-base-200">
-        <div class="card-body grid md:grid-cols-2">
-          <FormTextField v-model="form.serialNumber" label="Serial Number" />
-          <FormTextField v-model="form.modelNumber" label="Model Number" />
-          <FormTextField v-model="form.manufacturer" label="Manufacturer" />
-        </div>
-      </div>
-      <div class="">
-        <button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button>
-        <div class="divider"></div>
-      </div>
-      <div v-if="show.purchase" class="card bg-base-200">
-        <div class="card-body grid md:grid-cols-2">
-          <FormTextField v-model="form.purchaseTime" label="Purchase Time" />
-          <FormTextField v-model="form.purchasePrice" label="Purchase Price" />
-          <FormTextField v-model="form.purchaseFrom" label="Purchase From" />
-        </div>
-      </div>
-
-      <div class="divider">
-        <button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button>
-      </div>
-      <div v-if="show.sold" class="card bg-base-200">
-        <div class="card-body">
-          <div class="grid gap-2 md:grid-cols-2">
-            <FormTextField v-model="form.soldTime" label="Sold Time" />
-            <FormTextField v-model="form.soldPrice" label="Sold Price" />
-            <FormTextField v-model="form.soldTo" label="Sold To" />
-          </div>
-          <FormTextArea v-model="form.soldNotes" label="Sold Notes" limit="1000" />
-        </div>
-      </div>
-      <div class="divider">
-        <button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button>
-      </div>
-      <div v-if="show.extras" class="card bg-base-200">
-        <div class="card-body">
-          <FormTextArea v-model="form.notes" label="Notes" limit="1000" />
-        </div>
-      </div>
-    </form>
-  </BaseContainer>
-</template>
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index 848545e7..f3693d74 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -8,8 +8,20 @@
   import MdiSelectSearch from "~icons/mdi/select-search";
   import MdiMagnify from "~icons/mdi/magnify";
   import MdiDelete from "~icons/mdi/delete";
-  import MdiChevronRight from "~icons/mdi/chevron-right";
-  import MdiChevronLeft from "~icons/mdi/chevron-left";
+  import { Button } from "@/components/ui/button";
+  import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+  import { Label } from "@/components/ui/label";
+  import { Switch } from "@/components/ui/switch";
+  import { Separator } from "@/components/ui/separator";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import {
+    Pagination,
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+  } from "@/components/ui/pagination";
 
   definePageMeta({
     middleware: ["auth"],
@@ -48,16 +60,6 @@
   const orderBy = useRouteQuery("orderBy", "name");
 
   const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
-  const hasNext = computed(() => page.value * pageSize.value < total.value);
-  const hasPrev = computed(() => page.value > 1);
-
-  function prev() {
-    page.value = Math.max(1, page.value - 1);
-  }
-
-  function next() {
-    page.value = Math.min(Math.ceil(total.value / pageSize.value), page.value + 1);
-  }
 
   const route = useRoute();
   const router = useRouter();
@@ -376,75 +378,73 @@
             <p>{{ $t("items.query_id", { id: parsedAssetId }) }}</p>
           </div>
         </div>
-        <BaseButton class="btn-block md:w-auto" @click.prevent="submit">
-          <template #icon>
-            <MdiLoading v-if="loading" class="animate-spin" />
-            <MdiMagnify v-else />
-          </template>
+        <Button class="mb-auto h-12 w-full md:w-auto" @click.prevent="submit">
+          <MdiLoading v-if="loading" class="animate-spin" />
+          <MdiMagnify v-else />
           {{ $t("global.search") }}
-        </BaseButton>
+        </Button>
       </div>
 
       <div class="flex w-full flex-wrap gap-2 py-2 md:flex-nowrap">
-        <SearchFilter v-model="selectedLocations" :label="$t('global.locations')" :options="locationFlatTree">
-          <template #display="{ item }">
-            <div>
-              <div class="flex w-full">
-                {{ item.name }}
-              </div>
-              <div v-if="item.name != item.treeString" class="mt-1 text-xs">
-                {{ item.treeString }}
-              </div>
-            </div>
-          </template>
-        </SearchFilter>
+        <SearchFilter v-model="selectedLocations" :label="$t('global.locations')" :options="locationFlatTree" />
         <SearchFilter v-model="selectedLabels" :label="$t('global.labels')" :options="labels" />
-        <div class="dropdown">
-          <label tabindex="0" class="btn btn-xs">{{ $t("items.options") }}</label>
-          <div
-            tabindex="0"
-            class="dropdown-content mt-1 w-72 -translate-x-24 overflow-auto rounded-md bg-base-100 p-4 shadow"
-          >
-            <label class="label mr-auto cursor-pointer">
-              <input v-model="includeArchived" type="checkbox" class="toggle toggle-primary toggle-sm" />
-              <span class="label-text ml-4 text-right"> {{ $t("items.include_archive") }} </span>
-            </label>
-            <label class="label mr-auto cursor-pointer">
-              <input v-model="fieldSelector" type="checkbox" class="toggle toggle-primary toggle-sm" />
-              <span class="label-text ml-4 text-right"> {{ $t("items.field_selector") }} </span>
-            </label>
-            <label class="label mr-auto cursor-pointer">
-              <input v-model="negateLabels" type="checkbox" class="toggle toggle-primary toggle-sm" />
-              <span class="label-text ml-4 text-right"> {{ $t("items.negate_labels") }} </span>
-            </label>
-            <label class="label mr-auto cursor-pointer">
-              <input v-model="onlyWithoutPhoto" type="checkbox" class="toggle toggle-primary toggle-sm" />
-              <span class="label-text ml-4 text-right"> {{ $t("items.only_without_photo") }} </span>
-            </label>
-            <label class="label mr-auto cursor-pointer">
-              <input v-model="onlyWithPhoto" type="checkbox" class="toggle toggle-primary toggle-sm" />
-              <span class="label-text ml-4 text-right"> {{ $t("items.only_with_photo") }} </span>
-            </label>
-            <label class="label mr-auto cursor-pointer">
-              <select v-model="orderBy" class="select select-bordered select-sm">
-                <option value="name" selected>{{ $t("global.name") }}</option>
-                <option value="createdAt">{{ $t("items.created_at") }}</option>
-                <option value="updatedAt">{{ $t("items.updated_at") }}</option>
-              </select>
-              <span class="label-text ml-4 text-right"> {{ $t("items.order_by") }} </span>
-            </label>
-            <hr class="my-2" />
-            <BaseButton class="btn-sm btn-block" @click="reset"> {{ $t("items.reset_search") }} </BaseButton>
-          </div>
-        </div>
-        <div class="dropdown dropdown-end ml-auto">
-          <label tabindex="0" class="btn btn-xs">{{ $t("items.tips") }}</label>
-          <div
-            tabindex="0"
-            class="dropdown-content mt-1 w-[325px] overflow-auto rounded-md bg-base-100 p-4 text-sm shadow"
-          >
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button size="sm" variant="outline"> {{ $t("items.options") }}</Button>
+          </PopoverTrigger>
+          <PopoverContent class="z-40 flex flex-col gap-2">
+            <Label class="flex cursor-pointer items-center">
+              <Switch v-model="includeArchived" class="ml-auto" />
+              <div class="grow"></div>
+              {{ $t("items.include_archive") }}
+            </Label>
+            <Label class="flex cursor-pointer items-center">
+              <Switch v-model="fieldSelector" class="ml-auto" />
+              <div class="grow"></div>
+              {{ $t("items.field_selector") }}
+            </Label>
+            <Label class="flex cursor-pointer items-center">
+              <Switch v-model="negateLabels" class="ml-auto" />
+              <div class="grow"></div>
+              {{ $t("items.negate_labels") }}
+            </Label>
+            <Label class="flex cursor-pointer items-center">
+              <Switch v-model="onlyWithoutPhoto" class="ml-auto" />
+              <div class="grow"></div>
+              {{ $t("items.only_without_photo") }}
+            </Label>
+            <Label class="flex cursor-pointer items-center">
+              <Switch v-model="onlyWithPhoto" class="ml-auto" />
+              <div class="grow"></div>
+              {{ $t("items.only_with_photo") }}
+            </Label>
+            <Label class="flex cursor-pointer flex-col gap-2">
+              <span class="text-right">
+                {{ $t("items.order_by") }}
+              </span>
+
+              <Select v-model="orderBy">
+                <SelectTrigger>
+                  <SelectValue :placeholder="$t('items.order_by')" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="createdAt"> {{ $t("items.created_at") }} </SelectItem>
+                  <SelectItem value="updatedAt"> {{ $t("items.updated_at") }} </SelectItem>
+                </SelectContent>
+              </Select>
+            </Label>
+            <Separator />
+            <Button @click="reset"> {{ $t("items.reset_search") }} </Button>
+          </PopoverContent>
+        </Popover>
+        <div class="grow"></div>
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button size="sm" variant="outline"> {{ $t("items.tips") }}</Button>
+          </PopoverTrigger>
+          <PopoverContent class="z-40 w-[325px]" align="end">
             <p class="text-base">{{ $t("items.tips_sub") }}</p>
-            <ul class="mt-1 list-disc pl-6">
+            <ul class="mt-1 list-disc pl-6 text-sm">
               <li>
                 {{ $t("items.tip_1") }}
               </li>
@@ -455,48 +455,47 @@
                 {{ $t("items.tip_3") }}
               </li>
             </ul>
-          </div>
-        </div>
+          </PopoverContent>
+        </Popover>
       </div>
-      <div v-if="fieldSelector" class="space-y-2 py-4">
+      <div v-if="fieldSelector" class="flex flex-col gap-2 pb-2">
         <p>{{ $t("items.custom_fields") }}</p>
         <div v-for="(f, idx) in fieldTuples" :key="idx" class="flex flex-wrap gap-2">
-          <div class="form-control w-full max-w-xs">
-            <label class="label">
-              <span class="label-text">Field</span>
-            </label>
-            <select
-              v-model="fieldTuples[idx][0]"
-              class="select select-bordered"
-              :items="allFields ?? []"
-              @change="fetchValues(f[0])"
-            >
-              <option v-for="(fv, _, i) in allFields" :key="i" :value="fv">{{ fv }}</option>
-            </select>
+          <div class="flex w-full flex-col gap-1 md:w-auto md:grow">
+            <Label> Field </Label>
+            <Select v-model="fieldTuples[idx][0]" @update:model-value="fetchValues(f[0])">
+              <SelectTrigger>
+                <SelectValue placeholder="Select a field" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="field in allFields" :key="field" :value="field"> {{ field }} </SelectItem>
+              </SelectContent>
+            </Select>
           </div>
-          <div class="form-control w-full max-w-xs">
-            <label class="label">
-              <span class="label-text">{{ $t("items.field_value") }}</span>
-            </label>
-            <select v-model="fieldTuples[idx][1]" class="select select-bordered" :items="fieldValuesCache[f[0]]">
-              <option v-for="v in fieldValuesCache[f[0]]" :key="v" :value="v">{{ v }}</option>
-            </select>
+          <div class="flex w-full flex-col gap-1 md:w-auto md:grow">
+            <Label> {{ $t("items.field_value") }} </Label>
+            <Select v-model="fieldTuples[idx][1]">
+              <SelectTrigger>
+                <SelectValue placeholder="Select a value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="value in fieldValuesCache[f[0]]" :key="value" :value="value">
+                  {{ value }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
           </div>
-          <button
-            type="button"
-            class="btn btn-square btn-sm mb-2 ml-auto mt-auto md:ml-0"
-            @click="fieldTuples.splice(idx, 1)"
-          >
-            <MdiDelete class="size-5" />
-          </button>
+          <Button variant="destructive" type="button" size="icon" class="my-auto" @click="fieldTuples.splice(idx, 1)">
+            <MdiDelete />
+          </Button>
         </div>
-        <BaseButton type="button" class="btn-sm mt-2" @click="() => fieldTuples.push(['', ''])">
+        <Button type="button" size="sm" class="mt-2" @click="() => fieldTuples.push(['', ''])">
           {{ $t("items.add") }}
-        </BaseButton>
+        </Button>
       </div>
     </div>
 
-    <section class="mt-10">
+    <section>
       <BaseSectionHeader ref="itemsTitle"> {{ $t("global.items") }} </BaseSectionHeader>
       <p v-if="items.length > 0" class="flex items-center text-base font-medium">
         {{ $t("items.results", { total: total }) }}
@@ -514,43 +513,28 @@
       >
         <ItemCard v-for="item in items" :key="item.id" :item="item" :location-flat-tree="locationFlatTree" />
       </div>
-      <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">
-        <div class="flex">
-          <div class="btn-group">
-            <button :disabled="!hasPrev" class="text-no-transform btn" @click="prev">
-              <MdiChevronLeft class="mr-1 size-6" name="mdi-chevron-left" />
-              {{ $t("items.prev_page") }}
-            </button>
-            <button v-if="hasPrev" class="text-no-transform btn" @click="page = 1">{{ $t("items.first") }}</button>
-            <button v-if="hasNext" class="text-no-transform btn" @click="page = totalPages">
-              {{ $t("items.last") }}
-            </button>
-            <button :disabled="!hasNext" class="text-no-transform btn" @click="next">
-              {{ $t("items.next_page") }}
-              <MdiChevronRight class="ml-1 size-6" name="mdi-chevron-right" />
-            </button>
-          </div>
-        </div>
-        <p class="text-sm font-bold">{{ $t("items.pages", { page: page, totalPages: totalPages }) }}</p>
-      </div>
+      <Pagination
+        v-slot="{ page: currentPage }"
+        :items-per-page="pageSize"
+        :total="total"
+        :sibling-count="2"
+        :default-page="1"
+        class="flex justify-center p-2"
+        @update:page="page = $event"
+      >
+        <PaginationList v-slot="{ items: pageItems }" class="flex items-center gap-1">
+          <PaginationFirst />
+          <template v-for="(item, index) in pageItems">
+            <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+              <Button class="size-10 p-0" :variant="item.value === currentPage ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+          <PaginationLast />
+        </PaginationList>
+      </Pagination>
     </section>
   </BaseContainer>
 </template>
-
-<style lang="css">
-  .list-move,
-  .list-enter-active,
-  .list-leave-active {
-    transition: all 0.25s ease;
-  }
-
-  .list-enter-from,
-  .list-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-
-  .list-leave-active {
-    position: absolute;
-  }
-</style>
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 16d99e2c..57ba2e5b 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -3,11 +3,19 @@
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiDelete from "~icons/mdi/delete";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Card } from "@/components/ui/card";
+  import { Button } from "@/components/ui/button";
+  import { Badge } from "@/components/ui/badge";
+  import { Separator } from "@/components/ui/separator";
 
   definePageMeta({
     middleware: ["auth"],
   });
 
+  const { openDialog, closeDialog } = useDialog();
+
   const route = useRoute();
   const api = useUserApi();
 
@@ -44,7 +52,6 @@
     navigateTo("/home");
   }
 
-  const updateModal = ref(false);
   const updating = ref(false);
   const updateData = reactive({
     name: "",
@@ -55,7 +62,8 @@
   function openUpdate() {
     updateData.name = label.value?.name || "";
     updateData.description = label.value?.description || "";
-    updateModal.value = true;
+    updateData.color = "";
+    openDialog("update-label");
   }
 
   async function update() {
@@ -70,7 +78,7 @@
 
     toast.success("Label updated");
     label.value = data;
-    updateModal.value = false;
+    closeDialog("update-label");
     updating.value = false;
   }
 
@@ -99,9 +107,13 @@
 </script>
 
 <template>
-  <BaseContainer>
-    <BaseModal v-model="updateModal">
-      <template #title> {{ $t("labels.update_label") }} </template>
+  <!-- Update Dialog -->
+  <Dialog dialog-id="update-label">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle> {{ $t("labels.update_label") }} </DialogTitle>
+      </DialogHeader>
+
       <form v-if="label" class="flex flex-col gap-2" @submit.prevent="update">
         <FormTextField
           v-model="updateData.name"
@@ -115,62 +127,55 @@
           :label="$t('components.label.create_modal.label_description')"
           :max-length="255"
         />
-        <div class="modal-action">
-          <BaseButton type="submit" :loading="updating"> {{ $t("global.update") }} </BaseButton>
-        </div>
+        <!-- TODO: color  -->
+        <DialogFooter>
+          <Button type="submit" :loading="updating"> {{ $t("global.update") }} </Button>
+        </DialogFooter>
       </form>
-    </BaseModal>
+    </DialogContent>
+  </Dialog>
 
-    <BaseContainer v-if="label">
-      <div class="rounded bg-base-100 p-3">
-        <header class="mb-2">
-          <div class="flex flex-wrap items-end gap-2">
-            <div class="avatar placeholder mb-auto">
-              <div class="w-12 rounded-full bg-neutral-focus text-neutral-content">
-                <MdiPackageVariant class="size-7" />
+  <BaseContainer v-if="label">
+    <Card class="p-3">
+      <header :class="{ 'mb-2': label.description }">
+        <div class="flex flex-wrap items-end gap-2">
+          <div
+            class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+          >
+            <MdiPackageVariant class="size-7" />
+          </div>
+          <div>
+            <h1 class="flex items-center gap-3 pb-1 text-2xl">
+              {{ label ? label.name : "" }}
+              <Badge v-if="items && items.totalPrice" variant="secondary" class="ml-2">
+                <Currency :amount="items.totalPrice" />
+              </Badge>
+            </h1>
+            <div class="flex flex-wrap gap-1 text-xs">
+              <div>
+                {{ $t("global.created") }}
+                <DateTime :date="label?.createdAt" />
               </div>
             </div>
-            <div>
-              <h1 class="flex items-center gap-3 pb-1 text-2xl">
-                {{ label ? label.name : "" }}
-
-                <div
-                  v-if="items && items.totalPrice"
-                  class="rounded-full bg-secondary px-2 py-1 text-xs text-secondary-content"
-                >
-                  <div>
-                    <Currency :amount="items.totalPrice" />
-                  </div>
-                </div>
-              </h1>
-              <div class="flex flex-wrap gap-1 text-xs">
-                <div>
-                  Created
-                  <DateTime :date="label?.createdAt" />
-                </div>
-              </div>
-            </div>
-            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
-              <div class="btn-group">
-                <PageQRCode class="dropdown-left" />
-                <BaseButton size="sm" @click="openUpdate">
-                  <MdiPencil class="mr-1" />
-                  Edit
-                </BaseButton>
-              </div>
-              <BaseButton class="btn btn-sm" @click="confirmDelete()">
-                <MdiDelete class="mr-2" />
-                Delete
-              </BaseButton>
-            </div>
           </div>
-        </header>
-        <div class="divider my-0 mb-1"></div>
-        <Markdown v-if="label && label.description" class="text-base" :source="label.description"> </Markdown>
-      </div>
-      <section v-if="label && items">
-        <ItemViewSelectable :items="items.items" />
-      </section>
-    </BaseContainer>
+          <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
+            <PageQRCode />
+            <Button @click="openUpdate">
+              <MdiPencil />
+              {{ $t("global.edit") }}
+            </Button>
+            <Button variant="destructive" @click="confirmDelete()">
+              <MdiDelete />
+              {{ $t("global.delete") }}
+            </Button>
+          </div>
+        </div>
+      </header>
+      <Separator v-if="label && label.description" />
+      <Markdown v-if="label && label.description" class="mt-3 text-base" :source="label.description" />
+    </Card>
+    <section v-if="label && items">
+      <ItemViewSelectable :items="items.items" />
+    </section>
   </BaseContainer>
 </template>
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index 15380d19..e648501e 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -5,11 +5,26 @@
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiDelete from "~icons/mdi/delete";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Card } from "@/components/ui/card";
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+  } from "@/components/ui/breadcrumb";
+  import { Button } from "@/components/ui/button";
+  import { Badge } from "@/components/ui/badge";
+  import { Separator } from "@/components/ui/separator";
 
   definePageMeta({
     middleware: ["auth"],
   });
 
+  const { openDialog, closeDialog } = useDialog();
+
   const route = useRoute();
   const api = useUserApi();
 
@@ -54,7 +69,6 @@
     navigateTo("/locations");
   }
 
-  const updateModal = ref(false);
   const updating = ref(false);
   const updateData = reactive<LocationUpdate>({
     id: locationId.value,
@@ -66,7 +80,7 @@
   function openUpdate() {
     updateData.name = location.value?.name || "";
     updateData.description = location.value?.description || "";
-    updateModal.value = true;
+    openDialog("update-location");
   }
 
   async function update() {
@@ -82,7 +96,7 @@
 
     toast.success("Location updated");
     location.value = data;
-    updateModal.value = false;
+    closeDialog("update-location");
     updating.value = false;
   }
 
@@ -112,57 +126,62 @@
 <template>
   <div>
     <!-- Update Dialog -->
-    <BaseModal v-model="updateModal">
-      <template #title> {{ $t("locations.update_location") }} </template>
-      <form v-if="location" class="flex flex-col gap-2" @submit.prevent="update">
-        <FormTextField
-          v-model="updateData.name"
-          :autofocus="true"
-          :label="$t('components.location.create_modal.location_name')"
-          :max-length="255"
-          :min-length="1"
-        />
-        <FormTextArea
-          v-model="updateData.description"
-          :label="$t('components.location.create_modal.location_description')"
-          :max-length="1000"
-        />
-        <LocationSelector v-model="parent" />
-        <div class="modal-action">
-          <BaseButton type="submit" :loading="updating"> {{ $t("global.update") }} </BaseButton>
-        </div>
-      </form>
-    </BaseModal>
+    <Dialog dialog-id="update-location">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle> {{ $t("locations.update_location") }} </DialogTitle>
+        </DialogHeader>
+
+        <form v-if="location" class="flex flex-col gap-2" @submit.prevent="update">
+          <FormTextField
+            v-model="updateData.name"
+            :autofocus="true"
+            :label="$t('components.location.create_modal.location_name')"
+            :max-length="255"
+            :min-length="1"
+          />
+          <FormTextArea
+            v-model="updateData.description"
+            :label="$t('components.location.create_modal.location_description')"
+            :max-length="1000"
+          />
+          <LocationSelector v-model="parent" />
+          <DialogFooter>
+            <Button type="submit" :loading="updating"> {{ $t("global.update") }} </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
 
     <BaseContainer v-if="location">
-      <div class="rounded bg-base-100 p-3">
-        <header class="mb-2">
+      <Card class="p-3">
+        <header :class="{ 'mb-2': location?.description }">
           <div class="flex flex-wrap items-end gap-2">
-            <div class="avatar placeholder mb-auto">
-              <div class="w-12 rounded-full bg-neutral-focus text-neutral-content">
-                <MdiPackageVariant name="mdi-package-variant" class="size-7" />
-              </div>
+            <div
+              class="mb-auto flex size-12 items-center justify-center rounded-full bg-neutral-focus text-neutral-content"
+            >
+              <MdiPackageVariant class="size-7" />
             </div>
             <div>
-              <div v-if="location?.parent" class="breadcrumbs py-0 text-sm">
-                <ul class="text-base-content/70">
-                  <li class="text-wrap">
-                    <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
-                  </li>
-                  <li class="text-wrap">{{ location.name }}</li>
-                </ul>
-              </div>
+              <Breadcrumb v-if="location?.parent">
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink as-child class="text-base-content/70 hover:underline">
+                      <NuxtLink :to="`/location/${location.parent.id}`">
+                        {{ location.parent.name }}
+                      </NuxtLink>
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem> {{ location.name }} </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
               <h1 class="flex items-center gap-3 pb-1 text-2xl">
                 {{ location ? location.name : "" }}
 
-                <div
-                  v-if="location && location.totalPrice"
-                  class="rounded-full bg-secondary px-2 py-1 text-xs text-secondary-content"
-                >
-                  <div>
-                    <Currency :amount="location.totalPrice" />
-                  </div>
-                </div>
+                <Badge v-if="location && location.totalPrice" variant="secondary">
+                  <Currency :amount="location.totalPrice" />
+                </Badge>
               </h1>
               <div class="flex flex-wrap gap-1 text-xs">
                 <div>
@@ -172,24 +191,22 @@
               </div>
             </div>
             <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
-              <div class="btn-group">
-                <PageQRCode class="dropdown-left" />
-                <BaseButton size="sm" @click="openUpdate">
-                  <MdiPencil class="mr-1" name="mdi-pencil" />
-                  {{ $t("global.edit") }}
-                </BaseButton>
-              </div>
               <LabelMaker :id="location.id" type="location" />
-              <BaseButton class="btn btn-sm" @click="confirmDelete()">
-                <MdiDelete name="mdi-delete" class="mr-2" />
+              <Button @click="openUpdate">
+                <MdiPencil name="mdi-pencil" />
+                {{ $t("global.edit") }}
+              </Button>
+              <Button variant="destructive" @click="confirmDelete()">
+                <MdiDelete name="mdi-delete" />
                 {{ $t("global.delete") }}
-              </BaseButton>
+              </Button>
             </div>
           </div>
         </header>
-        <div class="divider my-0 mb-1"></div>
-        <Markdown v-if="location && location.description" class="text-base" :source="location.description"> </Markdown>
-      </div>
+        <Separator v-if="location && location.description" />
+        <Markdown v-if="location && location.description" class="mt-3 text-base" :source="location.description">
+        </Markdown>
+      </Card>
       <section v-if="location && items">
         <ItemViewSelectable :items="items" />
       </section>
diff --git a/frontend/pages/locations.vue b/frontend/pages/locations.vue
index 03b10a3b..72ecb2fb 100644
--- a/frontend/pages/locations.vue
+++ b/frontend/pages/locations.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
   import { useTreeState } from "~~/components/Location/Tree/tree-state";
   import MdiCollapseAllOutline from "~icons/mdi/collapse-all-outline";
+  import MdiExpandAllOutline from "~icons/mdi/expand-all-outline";
+
+  import { ButtonGroup, Button } from "@/components/ui/button";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+  import type { TreeItem } from "~/lib/api/types/data-contracts";
+
+  // TODO: eventually move to https://reka-ui.com/docs/components/tree#draggable-sortable-tree
 
   definePageMeta({
     middleware: ["auth"],
@@ -58,6 +65,21 @@
       treeState.value[key] = false;
     }
   }
+
+  function openItemChildren(items: TreeItem[]) {
+    for (const item of items) {
+      if (item.children.length > 0) {
+        treeState.value[item.id.replace(/-/g, "").substring(0, 8)] = true;
+        openItemChildren(item.children);
+      }
+    }
+  }
+
+  function openAll() {
+    if (!tree.value) return;
+
+    openItemChildren(tree.value);
+  }
 </script>
 
 <template>
@@ -66,11 +88,30 @@
     <BaseCard>
       <div class="p-4">
         <div class="mb-2 flex justify-end">
-          <div class="btn-group">
-            <button class="btn tooltip tooltip-top btn-sm" :data-tip="$t('locations.collapse_tree')" @click="closeAll">
-              <MdiCollapseAllOutline />
-            </button>
-          </div>
+          <TooltipProvider :delay-duration="0">
+            <ButtonGroup>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Button size="icon" variant="outline" data-pos="start" @click="openAll">
+                    <MdiExpandAllOutline />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{{ $t("locations.expand_tree") }}</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Button size="icon" variant="outline" data-pos="end" @click="closeAll">
+                    <MdiCollapseAllOutline />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{{ $t("locations.collapse_tree") }}</p>
+                </TooltipContent>
+              </Tooltip>
+            </ButtonGroup>
+          </TooltipProvider>
         </div>
         <LocationTreeRoot v-if="tree" :locs="tree" :tree-id="locationTreeId" />
       </div>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 576a9c23..58dfecae 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -10,6 +10,14 @@
   import MdiPencil from "~icons/mdi/pencil";
   import MdiAccountMultiple from "~icons/mdi/account-multiple";
   import { getLocaleCode } from "~/composables/use-formatters";
+  import { Button } from "@/components/ui/button";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import { Label } from "@/components/ui/label";
+  import { badgeVariants } from "@/components/ui/badge";
+  import LanguageSelector from "~/components/App/LanguageSelector.vue";
+  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 
   definePageMeta({
     middleware: ["auth"],
@@ -21,6 +29,8 @@
   const api = useUserApi();
   const confirm = useConfirm();
 
+  const { openDialog, closeDialog } = useDialog();
+
   const currencies = computedAsync(async () => {
     const resp = await api.group.currencies();
     if (resp.error) {
@@ -35,9 +45,6 @@
   function setDisplayHeader() {
     preferences.value.displayHeaderDecor = !preferences.value.displayHeaderDecor;
   }
-  function setLanguage(lang: string) {
-    preferences.value.language = lang;
-  }
 
   // Currency Selection
   const currency = ref<CurrenciesCurrency>({
@@ -56,10 +63,6 @@
     return fmtCurrency(1000, currency.value?.code ?? "USD", getLocaleCode());
   });
 
-  const dateExample = computed(() => {
-    return fmtDate(new Date(Date.now() - 15 * 60000), "relative");
-  });
-
   const { data: group } = useAsyncData(async () => {
     const { data } = await api.group.get();
     return data;
@@ -159,16 +162,11 @@
 
   const passwordChange = reactive({
     loading: false,
-    dialog: false,
     current: "",
     new: "",
     isValid: false,
   });
 
-  function openPassChange() {
-    passwordChange.dialog = true;
-  }
-
   async function changePassword() {
     passwordChange.loading = true;
     if (!passwordChange.isValid) {
@@ -184,7 +182,7 @@
     }
 
     toast.success("Password changed successfully.");
-    passwordChange.dialog = false;
+    closeDialog("change-password");
     passwordChange.new = "";
     passwordChange.current = "";
     passwordChange.loading = false;
@@ -201,7 +199,6 @@
 
   const targetID = ref("");
   const notifier = ref<NotifierCreate | null>(null);
-  const notifierDialog = ref(false);
 
   function openNotifierDialog(v: NotifierOut | null) {
     if (v) {
@@ -219,7 +216,7 @@
       };
     }
 
-    notifierDialog.value = true;
+    openDialog("create-notifier");
   }
 
   async function createNotifier() {
@@ -243,7 +240,7 @@
     }
 
     notifier.value = null;
-    notifierDialog.value = false;
+    closeDialog("create-notifier");
 
     await notifiers.refresh();
   }
@@ -264,7 +261,7 @@
     }
 
     notifier.value = null;
-    notifierDialog.value = false;
+    closeDialog("create-notifier");
     targetID.value = "";
 
     await notifiers.refresh();
@@ -305,10 +302,12 @@
 
 <template>
   <div>
-    <BaseModal v-model="passwordChange.dialog">
-      <template #title> {{ $t("profile.change_password") }} </template>
+    <Dialog dialog-id="changePassword">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle> {{ $t("profile.change_password") }} </DialogTitle>
+        </DialogHeader>
 
-      <form @submit.prevent="changePassword">
         <FormPassword
           v-model="passwordChange.current"
           :label="$t('profile.current_password')"
@@ -318,38 +317,42 @@
         <FormPassword v-model="passwordChange.new" :label="$t('profile.new_password')" placeholder="" />
         <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
 
-        <div class="flex">
-          <BaseButton
-            class="ml-auto"
-            :loading="passwordChange.loading"
-            :disabled="!passwordChange.isValid"
-            type="submit"
-          >
-            {{ $t("global.submit") }}
-          </BaseButton>
-        </div>
-      </form>
-    </BaseModal>
+        <form @submit.prevent="changePassword">
+          <DialogFooter>
+            <Button :loading="passwordChange.loading" :disabled="!passwordChange.isValid" type="submit">
+              {{ $t("global.submit") }}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
 
-    <BaseModal v-model="notifierDialog">
-      <template #title> {{ $t("profile.notifier_modal", { type: notifier != null }) }} </template>
+    <Dialog dialog-id="create-notifier">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle> {{ $t("profile.notifier_modal", { type: notifier != null }) }} </DialogTitle>
+        </DialogHeader>
 
-      <form @submit.prevent="createNotifier">
-        <template v-if="notifier">
-          <FormTextField v-model="notifier.name" :label="$t('global.name')" class="mb-2" />
-          <FormTextField v-model="notifier.url" :label="$t('profile.url')" />
-          <div class="max-w-[100px]">
-            <FormCheckbox v-model="notifier.isActive" :label="$t('profile.enabled')" />
+        <form @submit.prevent="createNotifier">
+          <template v-if="notifier">
+            <FormTextField v-model="notifier.name" :label="$t('global.name')" class="mb-2" />
+            <FormTextField v-model="notifier.url" :label="$t('profile.url')" class="mb-2" />
+            <div class="max-w-[100px]">
+              <FormCheckbox v-model="notifier.isActive" :label="$t('profile.enabled')" />
+            </div>
+          </template>
+          <div class="mt-4 flex justify-between gap-2">
+            <DialogFooter class="flex w-full">
+              <Button :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier">
+                {{ $t("profile.test") }}
+              </Button>
+              <div class="grow"></div>
+              <Button type="submit"> {{ $t("global.submit") }} </Button>
+            </DialogFooter>
           </div>
-        </template>
-        <div class="mt-4 flex justify-between gap-2">
-          <BaseButton :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier">
-            {{ $t("profile.test") }}
-          </BaseButton>
-          <BaseButton type="submit"> {{ $t("global.submit") }} </BaseButton>
-        </div>
-      </form>
-    </BaseModal>
+        </form>
+      </DialogContent>
+    </Dialog>
 
     <BaseContainer class="mb-6 flex flex-col gap-4">
       <BaseCard>
@@ -365,37 +368,21 @@
 
         <div class="p-4">
           <div class="flex gap-2">
-            <BaseButton size="sm" @click="openPassChange"> {{ $t("profile.change_password") }} </BaseButton>
-            <BaseButton size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </BaseButton>
+            <Button size="sm" @click="openDialog('changePassword')">
+              {{ $t("profile.change_password") }}
+            </Button>
+            <Button size="sm" @click="generateToken"> {{ $t("profile.gen_invite") }} </Button>
           </div>
-          <div v-if="token" class="flex items-center pl-1 pt-4">
-            <CopyText class="btn btn-square btn-outline btn-primary btn-sm mr-2" :text="tokenUrl" />
+          <div v-if="token" class="flex items-center gap-2 pl-1 pt-4">
+            <CopyText :text="tokenUrl" />
             {{ tokenUrl }}
           </div>
-          <div v-if="token" class="flex items-center pl-1 pt-4">
-            <CopyText class="btn btn-square btn-outline btn-primary btn-sm mr-2" :text="token" />
+          <div v-if="token" class="flex items-center gap-2 pl-1 pt-4">
+            <CopyText :text="token" />
             {{ token }}
           </div>
         </div>
-        <div class="form-control w-full p-5 pt-0">
-          <label class="label">
-            <span class="label-text">{{ $t("profile.language") }}</span>
-          </label>
-          <select
-            v-model="$i18n.locale"
-            class="select select-bordered"
-            @change="
-              event => {
-                setLanguage((event.target as HTMLSelectElement).value);
-              }
-            "
-          >
-            <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
-              {{ $t(`languages.${lang}`) }} ({{ $t(`languages.${lang}`, 1, { locale: lang }) }})
-            </option>
-          </select>
-          <p class="m-2 text-sm">{{ $t("profile.example") }}: {{ $t("global.created") }} {{ dateExample }}</p>
-        </div>
+        <LanguageSelector />
       </BaseCard>
 
       <BaseCard>
@@ -414,23 +401,29 @@
           <article v-for="n in notifiers.data.value" v-else :key="n.id" class="p-2">
             <div class="flex flex-wrap items-center gap-2">
               <p class="mr-auto text-lg">{{ n.name }}</p>
-              <div class="flex justify-end gap-2">
-                <div class="tooltip" data-tip="Delete">
-                  <button class="btn btn-square btn-sm" @click="deleteNotifier(n.id)">
-                    <MdiDelete />
-                  </button>
-                </div>
-                <div class="tooltip" data-tip="Edit">
-                  <button class="btn btn-square btn-sm" @click="openNotifierDialog(n)">
-                    <MdiPencil />
-                  </button>
-                </div>
-              </div>
+              <TooltipProvider :delay-duration="0" class="flex justify-end gap-2">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Button variant="destructive" size="icon" @click="deleteNotifier(n.id)">
+                      <MdiDelete />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent> Delete </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Button variant="outline" size="icon" @click="openNotifierDialog(n)">
+                      <MdiPencil />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent> Edit </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
             <div class="flex flex-wrap justify-between py-1 text-sm">
               <p>
-                <span v-if="n.isActive" class="badge badge-success"> {{ $t("profile.active") }} </span>
-                <span v-else class="badge badge-error"> {{ $t("profile.inactive") }} </span>
+                <span v-if="n.isActive" :class="badgeVariants()"> {{ $t("profile.active") }} </span>
+                <span v-else :class="badgeVariants({ variant: 'destructive' })"> {{ $t("profile.inactive") }} </span>
               </p>
               <p>
                 {{ $t("global.created") }}
@@ -441,7 +434,7 @@
         </div>
 
         <div class="p-4">
-          <BaseButton size="sm" @click="openNotifierDialog"> {{ $t("global.create") }} </BaseButton>
+          <Button size="sm" @click="openNotifierDialog"> {{ $t("global.create") }} </Button>
         </div>
       </BaseCard>
 
@@ -457,11 +450,32 @@
         </template>
 
         <div v-if="group && currencies && currencies.length > 0" class="p-5 pt-0">
-          <FormSelect v-model="currency" :label="$t('profile.currency_format')" :items="currencies" />
+          <Label for="currency"> {{ $t("profile.currency_format") }} </Label>
+          <Select
+            id="currency"
+            :model-value="currency.code"
+            @update:model-value="
+              event => {
+                const newCurrency = currencies?.find(c => c.code === event);
+                if (newCurrency) {
+                  currency = newCurrency;
+                }
+              }
+            "
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="c in currencies" :key="c.code" :value="c.code">
+                {{ c.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
           <p class="m-2 text-sm">{{ $t("profile.example") }}: {{ currencyExample }}</p>
 
           <div class="mt-4">
-            <BaseButton size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </BaseButton>
+            <Button size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </Button>
           </div>
         </div>
       </BaseCard>
@@ -479,11 +493,11 @@
 
         <div class="px-4 pb-4">
           <div class="mb-3">
-            <BaseButton size="sm" @click="setDisplayHeader">
+            <Button variant="outline" size="sm" @click="setDisplayHeader">
               {{ $t("profile.display_header", { currentValue: preferences.displayHeaderDecor }) }}
-            </BaseButton>
+            </Button>
           </div>
-          <div class="homebox rounded-box grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          <div class="homebox grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
             <div
               v-for="theme in themes"
               :key="theme.value"
@@ -531,9 +545,9 @@
           </BaseSectionHeader>
         </template>
         <div class="border-t-2 border-gray-300 p-4 px-6">
-          <BaseButton size="sm" class="btn-error" @click="deleteProfile">
+          <Button size="sm" variant="destructive" @click="deleteProfile">
             {{ $t("profile.delete_account") }}
-          </BaseButton>
+          </Button>
         </div>
       </BaseCard>
     </BaseContainer>
diff --git a/frontend/pages/reports/label-generator.vue b/frontend/pages/reports/label-generator.vue
index bfc3d46a..30baa507 100644
--- a/frontend/pages/reports/label-generator.vue
+++ b/frontend/pages/reports/label-generator.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { route } from "../../lib/api/base";
-  import { toast } from "@/components/ui/sonner";
+  import { toast, Toaster } from "@/components/ui/sonner";
+  import { Separator } from "@/components/ui/separator";
+  import { Button } from "@/components/ui/button";
+  import { Label } from "@/components/ui/label";
+  import { Input } from "@/components/ui/input";
+  import { Checkbox } from "@/components/ui/checkbox";
 
   definePageMeta({
     middleware: ["auth"],
@@ -31,7 +36,7 @@
     pageRightPadding: 0.1,
   });
 
-  type Input = {
+  type LabelOptionInput = {
     measure: string;
     page: {
       height: number;
@@ -65,7 +70,7 @@
     };
   };
 
-  function calculateGridData(input: Input): Output {
+  function calculateGridData(input: LabelOptionInput): Output {
     const { page, cardHeight, cardWidth } = input;
 
     const measureRegex = /in|cm|mm/;
@@ -326,7 +331,7 @@
 
 <template>
   <div class="print:hidden">
-    <AppToast />
+    <Toaster />
     <div class="container prose mx-auto max-w-4xl p-4 pt-6">
       <h1>Homebox Label Generator</h1>
       <p>
@@ -368,34 +373,33 @@
         <NuxtLink href="/home">Home</NuxtLink>
       </div>
     </div>
-    <div class="divider mx-auto max-w-4xl"></div>
+    <Separator class="mx-auto max-w-4xl" />
     <div class="container mx-auto max-w-4xl p-4">
       <div class="mx-auto grid grid-cols-2 gap-3">
-        <div v-for="(prop, i) in propertyInputs" :key="i" class="form-control w-full max-w-xs">
-          <label class="label">
-            <span class="label-text">{{ prop.label }}</span>
-          </label>
-          <input
+        <div v-for="(prop, i) in propertyInputs" :key="i" class="flex w-full max-w-xs flex-col">
+          <Label :for="`input-${prop.ref}`">
+            {{ prop.label }}
+          </Label>
+          <Input
+            :id="`input-${prop.ref}`"
             v-model="displayProperties[prop.ref]"
             :type="prop.type ? prop.type : 'number'"
             step="0.01"
             placeholder="Type here"
-            class="input input-bordered w-full max-w-xs"
+            class="w-full max-w-xs"
           />
         </div>
       </div>
       <div class="max-w-xs">
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <input v-model="bordered" type="checkbox" class="checkbox checkbox-secondary" />
-            <span class="label-text">Bordered Labels</span>
-          </label>
+        <div class="flex items-center gap-2 py-4">
+          <Checkbox id="borderedLabels" v-model="bordered" />
+          <Label class="cursor-pointer" for="borderedLabels"> Bordered Labels </Label>
         </div>
       </div>
 
       <div>
         <p>QR Code Example {{ displayProperties.baseURL }}/a/{asset_id}</p>
-        <BaseButton class="btn-block my-4" @click="calcPages"> Generate Page </BaseButton>
+        <Button size="lg" class="my-4 w-full" @click="calcPages"> Generate Page </Button>
       </div>
     </div>
   </div>
diff --git a/frontend/pages/scanner.vue b/frontend/pages/scanner.vue
index 80f8644d..d31f4923 100644
--- a/frontend/pages/scanner.vue
+++ b/frontend/pages/scanner.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
   import { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
   import { useI18n } from "vue-i18n";
+  import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+  import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+  import MdiAlertCircleOutline from "~icons/mdi/alert-circle-outline";
 
   definePageMeta({
     middleware: ["auth"],
@@ -84,44 +87,39 @@
 </script>
 
 <template>
-  <div class="flex flex-col gap-12 pb-16">
-    <section>
-      <div class="mx-auto">
-        <div class="max-w-screen-md">
-          <div v-if="errorMessage" role="alert" class="alert alert-error mb-5 shadow-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="size-6 shrink-0 stroke-current"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <span class="text-sm">{{ errorMessage }}</span>
-          </div>
-          <video ref="video" class="rounded-box shadow-lg" poster="data:image/gif,AAAA"></video>
-          <select v-model="selectedSource" class="select mt-4 w-full shadow-lg">
-            <option disabled selected :value="null">{{ t("scanner.select_video_source") }}</option>
-            <option v-for="source in sources" :key="source.deviceId" :value="source.deviceId">
-              {{ source.label }}
-            </option>
-          </select>
-        </div>
+  <Card class="mx-auto w-full max-w-screen-md">
+    <CardHeader>
+      <CardTitle>{{ t("scanner.title") }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <div
+        v-if="errorMessage"
+        class="mb-5 flex items-center gap-2 rounded-md border border-destructive bg-destructive/10 p-4 text-destructive"
+        role="alert"
+      >
+        <MdiAlertCircleOutline class="text-destructive" />
+        <span class="text-sm font-medium">{{ errorMessage }}</span>
       </div>
-    </section>
-  </div>
+      <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
+      <video ref="video" class="aspect-video w-full rounded-lg bg-muted shadow" poster="data:image/gif,AAAA"></video>
+      <div class="mt-4">
+        <Select v-model="selectedSource">
+          <SelectTrigger class="w-full">
+            <SelectValue :placeholder="t('scanner.select_video_source')" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="source in sources" :key="source.deviceId" :value="source.deviceId">
+              {{ source.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </CardContent>
+  </Card>
 </template>
 
-<style lang="css" scoped>
+<style scoped>
   video {
-    width: 100%;
     object-fit: cover;
-    margin-left: auto;
-    margin-right: auto;
   }
 </style>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 7b3ec38d..484545b6 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppImportDialog v-model="modals.import" />
+    <AppImportDialog />
     <BaseContainer class="mb-6 flex flex-col gap-4">
       <BaseCard>
         <template #title>
@@ -11,7 +11,7 @@
           </BaseSectionHeader>
         </template>
         <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
-          <DetailAction @action="navigateTo('/reports/label-generator')">
+          <DetailAction to="/reports/label-generator">
             <template #title>{{ $t("tools.reports_set.asset_labels") }}</template>
             {{ $t("tools.reports_set.asset_labels_sub") }}
             <template #button>
@@ -37,7 +37,7 @@
           </BaseSectionHeader>
         </template>
         <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
-          <DetailAction @action="modals.import = true">
+          <DetailAction @action="openDialog('import')">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-html="DOMPurify.sanitize($t('tools.import_export_set.import_sub'))"></div>
@@ -97,6 +97,7 @@
   import MdiArrowRight from "~icons/mdi/arrow-right";
   import MdiDatabase from "~icons/mdi/database";
   import MdiAlert from "~icons/mdi/alert";
+  import { useDialog } from "~/components/ui/dialog-provider";
 
   definePageMeta({
     middleware: ["auth"],
@@ -105,12 +106,7 @@
     title: "Homebox | Tools",
   });
 
-  const modals = ref({
-    item: false,
-    location: false,
-    label: false,
-    import: false,
-  });
+  const { openDialog } = useDialog();
 
   const api = useUserApi();
   const confirm = useConfirm();