From 9ff4b32db0cda253487ffc9dc70096cbe4b33528 Mon Sep 17 00:00:00 2001
From: Tonya <tonya@tokia.dev>
Date: Fri, 11 Apr 2025 11:02:49 +0100
Subject: [PATCH] Switch layouts to use shadcn (#507)

* feat: begin switching sonner, currently this breaks all alerts

* feat: switch to using new sonner and fix class names

* feat: add Shortcut component for improved keyboard shortcuts display in default layout

* feat: rewrite quick menu modal in shadcn

* feat: update QuickMenu modal placeholders and localize no results message in default layout

* feat: begin switching modals in layout to use shadcn dialog, needs bug fixing

* feat: implement DialogProvider for consistent dialog management across components

* fix: types

* feat: begin adding shadcn label selector (wip)

* feat: shadcnify textarea

* feat: begin adding location selector

* feat: add hotkey support for opening create modals in dialog provider components

* fix: update click event on NuxtLink and reorder sidebar menu item IDs for consistency

* feat: unify shortcut text across create modals and sort issue with text centring

* feat: prevent dialog from opening when a dialog alert is open

* fix: prevent potential out of bounds error

* feat: enhance button group UI in create modals for better layout and introduce new item photo label in the form

* fix: search on label selector

* chore: lint

* fix: oops

* feat: make selector usable

* feat: add actual data to label selector

* feat: label selector kinda works

* fix: add legacy selector for edit page

* fix: enable camera capture in image upload for CreateModal component

* fix: z levels for sidebar mobile

* fix: gap between inputs

* feat: update radix-vue, custom search function for location selector

* feat: add fuzzysort (can always remove it and go to lunr if we want to)

* feat: limit label name to 50 characters in create modal and selector, helps with issues with ui not working with larger labels, as it is only enforced on the frontend could be easily bypassed but thats a them problem

* feat: add colours to toast

* chore: lint

* feat: abstract the dialog for creation modals

* feat: add drawer component and responsive dialog for create modals

* feat: enhance photo preview in CreateModal

* fix: remember state of sidebar

* feat: add ui functionality for changing primary image

* feat: use button for file upload

* style: lint

* fix: dont clone asset id

* fix: using create and add label breaks selector

* chore: oops remove logging

* chore: lint

* fix: cut length of label dramatically to ensure maximal compatibility, not sure if too much

* fix: more limiting of label length

* feat: update reka-ui (prev radix-vue)

* chore: cleanup dialog provider and siebar provider a bit

* fix: improve accessibility

* fix: docs for shadcn error

* fix: hack to prevent issues with lots of toasts in quick succession

* feat: cleanup toast file and lint

* feat: improvements to dialog scroll and disable the ability to set default photo for now

* feat: add tooltips for photo buttons

* chore: substring to length check

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 docs/.vitepress/menus/en.mts                  |   1 +
 docs/en/contribute/shadcn.md                  |   4 +-
 frontend/app.vue                              |  26 +-
 frontend/components.json                      |   2 -
 frontend/components/App/CreateModal.vue       |  43 ++++
 frontend/components/App/ImportDialog.vue      |   2 +-
 frontend/components/App/OutdatedModal.vue     | 109 ++++++---
 frontend/components/App/QuickMenuModal.vue    |  81 +++++++
 frontend/components/App/Toast.vue             |  58 -----
 frontend/components/Form/Multiselect.vue      |   2 +-
 frontend/components/Form/Password.vue         |   2 +-
 frontend/components/Form/TextArea.vue         |  54 ++---
 frontend/components/Form/TextField.vue        |  30 ++-
 frontend/components/Item/CreateModal.vue      | 224 +++++++++++-------
 frontend/components/Label/Chip.vue            |   2 +-
 frontend/components/Label/CreateModal.vue     |  74 ++----
 frontend/components/Label/Selector.vue        | 149 ++++++++++++
 frontend/components/Location/CreateModal.vue  |  66 ++----
 .../components/Location/LegacySelector.vue    |  63 +++++
 frontend/components/Location/Selector.vue     | 115 +++++----
 frontend/components/Maintenance/EditModal.vue |   6 +-
 frontend/components/ModalConfirm.vue          |  40 +++-
 frontend/components/global/LabelMaker.vue     |   2 +-
 .../components/global/QuickMenu/Input.vue     | 116 ---------
 .../components/global/QuickMenu/Modal.vue     |  53 -----
 .../ui/alert-dialog/AlertDialog.vue           |  14 ++
 .../ui/alert-dialog/AlertDialogAction.vue     |  20 ++
 .../ui/alert-dialog/AlertDialogCancel.vue     |  27 +++
 .../ui/alert-dialog/AlertDialogContent.vue    |  42 ++++
 .../alert-dialog/AlertDialogDescription.vue   |  25 ++
 .../ui/alert-dialog/AlertDialogFooter.vue     |  21 ++
 .../ui/alert-dialog/AlertDialogHeader.vue     |  16 ++
 .../ui/alert-dialog/AlertDialogTitle.vue      |  22 ++
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  11 +
 frontend/components/ui/alert-dialog/index.ts  |   9 +
 frontend/components/ui/badge/Badge.vue        |  16 ++
 frontend/components/ui/badge/index.ts         |  25 ++
 frontend/components/ui/button/Button.vue      |   2 +-
 frontend/components/ui/button/ButtonGroup.vue |  22 ++
 frontend/components/ui/button/index.ts        |   1 +
 frontend/components/ui/command/Command.vue    |  30 +++
 .../components/ui/command/CommandDialog.vue   |  21 ++
 .../components/ui/command/CommandEmpty.vue    |  20 ++
 .../components/ui/command/CommandGroup.vue    |  29 +++
 .../components/ui/command/CommandInput.vue    |  33 +++
 .../components/ui/command/CommandItem.vue     |  26 ++
 .../components/ui/command/CommandList.vue     |  25 ++
 .../ui/command/CommandSeparator.vue           |  23 ++
 .../components/ui/command/CommandShortcut.vue |  14 ++
 frontend/components/ui/command/index.ts       |   9 +
 .../ui/dialog-provider/DialogProvider.vue     |  48 ++++
 .../components/ui/dialog-provider/index.ts    |   2 +
 .../components/ui/dialog-provider/utils.ts    |  56 +++++
 frontend/components/ui/dialog/Dialog.vue      |  22 ++
 frontend/components/ui/dialog/DialogClose.vue |  11 +
 .../components/ui/dialog/DialogContent.vue    |  50 ++++
 .../ui/dialog/DialogDescription.vue           |  24 ++
 .../components/ui/dialog/DialogFooter.vue     |  19 ++
 .../components/ui/dialog/DialogHeader.vue     |  16 ++
 .../ui/dialog/DialogScrollContent.vue         |  59 +++++
 frontend/components/ui/dialog/DialogTitle.vue |  29 +++
 .../components/ui/dialog/DialogTrigger.vue    |  11 +
 frontend/components/ui/dialog/index.ts        |   9 +
 frontend/components/ui/drawer/Drawer.vue      |  27 +++
 .../components/ui/drawer/DrawerContent.vue    |  28 +++
 .../ui/drawer/DrawerDescription.vue           |  20 ++
 .../components/ui/drawer/DrawerFooter.vue     |  14 ++
 .../components/ui/drawer/DrawerHeader.vue     |  14 ++
 .../components/ui/drawer/DrawerOverlay.vue    |  18 ++
 frontend/components/ui/drawer/DrawerTitle.vue |  20 ++
 frontend/components/ui/drawer/index.ts        |   8 +
 .../ui/dropdown-menu/DropdownMenu.vue         |   2 +-
 .../DropdownMenuCheckboxItem.vue              |   2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |   2 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |   2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |   2 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |   2 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   2 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |   2 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |   2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |   2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   2 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |   2 +-
 frontend/components/ui/dropdown-menu/index.ts |   2 +-
 frontend/components/ui/input/Input.vue        |   2 +-
 frontend/components/ui/label/Label.vue        |  27 +++
 frontend/components/ui/label/index.ts         |   1 +
 frontend/components/ui/popover/Popover.vue    |  15 ++
 .../components/ui/popover/PopoverContent.vue  |  48 ++++
 .../components/ui/popover/PopoverTrigger.vue  |  11 +
 frontend/components/ui/popover/index.ts       |   3 +
 .../components/ui/separator/Separator.vue     |   2 +-
 frontend/components/ui/sheet/Sheet.vue        |   2 +-
 frontend/components/ui/sheet/SheetClose.vue   |   2 +-
 frontend/components/ui/sheet/SheetContent.vue |   4 +-
 .../components/ui/sheet/SheetDescription.vue  |   2 +-
 frontend/components/ui/sheet/SheetTitle.vue   |   2 +-
 frontend/components/ui/sheet/SheetTrigger.vue |   2 +-
 frontend/components/ui/shortcut/Shortcut.vue  |  35 +++
 frontend/components/ui/shortcut/index.ts      |   1 +
 frontend/components/ui/sidebar/Sidebar.vue    |   2 +-
 .../ui/sidebar/SidebarGroupAction.vue         |   4 +-
 .../ui/sidebar/SidebarGroupLabel.vue          |   4 +-
 .../ui/sidebar/SidebarMenuAction.vue          |   2 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |   2 +-
 .../components/ui/sidebar/SidebarMenuLink.vue |   2 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |   4 +-
 .../components/ui/sidebar/SidebarProvider.vue |   2 +-
 frontend/components/ui/sidebar/utils.ts       |   2 +-
 frontend/components/ui/sonner/Sonner.vue      |  25 ++
 frontend/components/ui/sonner/index.ts        |   2 +
 frontend/components/ui/sonner/toast.ts        |  20 ++
 .../components/ui/tags-input/TagsInput.vue    |  22 ++
 .../ui/tags-input/TagsInputInput.vue          |  19 ++
 .../ui/tags-input/TagsInputItem.vue           |  22 ++
 .../ui/tags-input/TagsInputItemDelete.vue     |  24 ++
 .../ui/tags-input/TagsInputItemText.vue       |  19 ++
 frontend/components/ui/tags-input/index.ts    |   5 +
 frontend/components/ui/textarea/Textarea.vue  |  30 +++
 frontend/components/ui/textarea/index.ts      |   1 +
 frontend/components/ui/tooltip/Tooltip.vue    |   2 +-
 .../components/ui/tooltip/TooltipContent.vue  |   2 +-
 .../components/ui/tooltip/TooltipProvider.vue |   2 +-
 .../components/ui/tooltip/TooltipTrigger.vue  |   2 +-
 frontend/composables/use-ids.ts               |  29 ---
 frontend/composables/use-notifier.ts          |  55 -----
 frontend/layouts/default.vue                  | 163 ++++---------
 frontend/layouts/empty.vue                    |   2 +-
 frontend/locales/en.json                      |  15 +-
 frontend/package.json                         |   7 +-
 frontend/pages/assets/[id].vue                |   3 +-
 frontend/pages/index.vue                      |   2 +-
 frontend/pages/item/[id]/index.vue            |   2 +-
 frontend/pages/item/[id]/index/edit.vue       |  10 +-
 frontend/pages/items.vue                      |  12 +-
 frontend/pages/label/[id].vue                 |   4 +-
 frontend/pages/location/[id].vue              |   4 +-
 frontend/pages/profile.vue                    |  35 +--
 frontend/pages/reports/label-generator.vue    |   5 +-
 frontend/pages/testing.vue                    |  38 ++-
 frontend/pages/tools.vue                      |  18 +-
 frontend/pnpm-lock.yaml                       | 106 ++++++---
 frontend/tailwind.config.js                   |   8 +-
 144 files changed, 2375 insertions(+), 883 deletions(-)
 create mode 100644 frontend/components/App/CreateModal.vue
 create mode 100644 frontend/components/App/QuickMenuModal.vue
 delete mode 100644 frontend/components/App/Toast.vue
 create mode 100644 frontend/components/Label/Selector.vue
 create mode 100644 frontend/components/Location/LegacySelector.vue
 delete mode 100644 frontend/components/global/QuickMenu/Input.vue
 delete mode 100644 frontend/components/global/QuickMenu/Modal.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 frontend/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 frontend/components/ui/alert-dialog/index.ts
 create mode 100644 frontend/components/ui/badge/Badge.vue
 create mode 100644 frontend/components/ui/badge/index.ts
 create mode 100644 frontend/components/ui/button/ButtonGroup.vue
 create mode 100644 frontend/components/ui/command/Command.vue
 create mode 100644 frontend/components/ui/command/CommandDialog.vue
 create mode 100644 frontend/components/ui/command/CommandEmpty.vue
 create mode 100644 frontend/components/ui/command/CommandGroup.vue
 create mode 100644 frontend/components/ui/command/CommandInput.vue
 create mode 100644 frontend/components/ui/command/CommandItem.vue
 create mode 100644 frontend/components/ui/command/CommandList.vue
 create mode 100644 frontend/components/ui/command/CommandSeparator.vue
 create mode 100644 frontend/components/ui/command/CommandShortcut.vue
 create mode 100644 frontend/components/ui/command/index.ts
 create mode 100644 frontend/components/ui/dialog-provider/DialogProvider.vue
 create mode 100644 frontend/components/ui/dialog-provider/index.ts
 create mode 100644 frontend/components/ui/dialog-provider/utils.ts
 create mode 100644 frontend/components/ui/dialog/Dialog.vue
 create mode 100644 frontend/components/ui/dialog/DialogClose.vue
 create mode 100644 frontend/components/ui/dialog/DialogContent.vue
 create mode 100644 frontend/components/ui/dialog/DialogDescription.vue
 create mode 100644 frontend/components/ui/dialog/DialogFooter.vue
 create mode 100644 frontend/components/ui/dialog/DialogHeader.vue
 create mode 100644 frontend/components/ui/dialog/DialogScrollContent.vue
 create mode 100644 frontend/components/ui/dialog/DialogTitle.vue
 create mode 100644 frontend/components/ui/dialog/DialogTrigger.vue
 create mode 100644 frontend/components/ui/dialog/index.ts
 create mode 100644 frontend/components/ui/drawer/Drawer.vue
 create mode 100644 frontend/components/ui/drawer/DrawerContent.vue
 create mode 100644 frontend/components/ui/drawer/DrawerDescription.vue
 create mode 100644 frontend/components/ui/drawer/DrawerFooter.vue
 create mode 100644 frontend/components/ui/drawer/DrawerHeader.vue
 create mode 100644 frontend/components/ui/drawer/DrawerOverlay.vue
 create mode 100644 frontend/components/ui/drawer/DrawerTitle.vue
 create mode 100644 frontend/components/ui/drawer/index.ts
 create mode 100644 frontend/components/ui/label/Label.vue
 create mode 100644 frontend/components/ui/label/index.ts
 create mode 100644 frontend/components/ui/popover/Popover.vue
 create mode 100644 frontend/components/ui/popover/PopoverContent.vue
 create mode 100644 frontend/components/ui/popover/PopoverTrigger.vue
 create mode 100644 frontend/components/ui/popover/index.ts
 create mode 100644 frontend/components/ui/shortcut/Shortcut.vue
 create mode 100644 frontend/components/ui/shortcut/index.ts
 create mode 100644 frontend/components/ui/sonner/Sonner.vue
 create mode 100644 frontend/components/ui/sonner/index.ts
 create mode 100644 frontend/components/ui/sonner/toast.ts
 create mode 100644 frontend/components/ui/tags-input/TagsInput.vue
 create mode 100644 frontend/components/ui/tags-input/TagsInputInput.vue
 create mode 100644 frontend/components/ui/tags-input/TagsInputItem.vue
 create mode 100644 frontend/components/ui/tags-input/TagsInputItemDelete.vue
 create mode 100644 frontend/components/ui/tags-input/TagsInputItemText.vue
 create mode 100644 frontend/components/ui/tags-input/index.ts
 create mode 100644 frontend/components/ui/textarea/Textarea.vue
 create mode 100644 frontend/components/ui/textarea/index.ts
 delete mode 100755 frontend/composables/use-ids.ts
 delete mode 100644 frontend/composables/use-notifier.ts

diff --git a/docs/.vitepress/menus/en.mts b/docs/.vitepress/menus/en.mts
index 31b511ff..89ced4f3 100644
--- a/docs/.vitepress/menus/en.mts
+++ b/docs/.vitepress/menus/en.mts
@@ -26,6 +26,7 @@ export default [
         text: 'Contributing',
         items: [
             {text: 'Get Started', link: '/en/contribute/get-started'},
+            {text: 'Switching to Shadcn-vue', link: '/en/contribute/shadcn'},
             {text: 'Bounty Program', link: '/en/contribute/bounty'}
         ]
     },
diff --git a/docs/en/contribute/shadcn.md b/docs/en/contribute/shadcn.md
index 5ffc25cd..77154d07 100644
--- a/docs/en/contribute/shadcn.md
+++ b/docs/en/contribute/shadcn.md
@@ -52,9 +52,9 @@ When modifying components, follow these best practices:
 During the migration process, you can test without DaisyUI using these commands:
 
 ```bash
-DISABLE_DAISYUI=true; task ui:dev
+export DISABLE_DAISYUI=true; task ui:dev
 ```
 or
 ```bash
-DISABLE_DAISYUI=true; task ui:fix
+export DISABLE_DAISYUI=true; task ui:fix
 ```
diff --git a/frontend/app.vue b/frontend/app.vue
index f6b0ade6..ba159df7 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,17 +1,25 @@
 <template>
-  <NuxtLayout>
-    <Html :lang="locale" :data-theme="theme || 'homebox'" />
-    <Link rel="icon" type="image/svg" href="/favicon.svg"></Link>
-    <Link rel="apple-touch-icon" href="/apple-touch-icon.png" size="180x180" />
-    <Link rel="mask-icon" href="/mask-icon.svg" color="#5b7f67" />
-    <Meta name="theme-color" content="#5b7f67" />
-    <Link rel="manifest" href="/manifest.webmanifest" />
-    <NuxtPage />
-  </NuxtLayout>
+  <DialogProvider>
+    <ClientOnly>
+      <Toaster class="pointer-events-auto" />
+    </ClientOnly>
+
+    <NuxtLayout>
+      <Html :lang="locale" :data-theme="theme || 'homebox'" />
+      <Link rel="icon" type="image/svg" href="/favicon.svg"></Link>
+      <Link rel="apple-touch-icon" href="/apple-touch-icon.png" size="180x180" />
+      <Link rel="mask-icon" href="/mask-icon.svg" color="#5b7f67" />
+      <Meta name="theme-color" content="#5b7f67" />
+      <Link rel="manifest" href="/manifest.webmanifest" />
+      <NuxtPage />
+    </NuxtLayout>
+  </DialogProvider>
 </template>
 
 <script lang="ts" setup>
   import { useI18n } from "vue-i18n";
+  import { DialogProvider } from "@/components/ui/dialog-provider";
+  import { Toaster } from "@/components/ui/sonner";
 
   const { theme } = useTheme();
 
diff --git a/frontend/components.json b/frontend/components.json
index 51a18af3..b9214a1f 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -2,7 +2,6 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "default",
   "typescript": true,
-  "tsConfigPath": "tsconfig.json",
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "assets/css/main.css",
@@ -10,7 +9,6 @@
     "cssVariables": true,
     "prefix": ""
   },
-  "framework": "nuxt",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils"
diff --git a/frontend/components/App/CreateModal.vue b/frontend/components/App/CreateModal.vue
new file mode 100644
index 00000000..6a53f233
--- /dev/null
+++ b/frontend/components/App/CreateModal.vue
@@ -0,0 +1,43 @@
+<template>
+  <Dialog v-if="isDesktop" :dialog-id="dialogId">
+    <DialogScrollContent>
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+      </DialogHeader>
+
+      <slot />
+
+      <DialogFooter>
+        <span class="flex items-center gap-1 text-sm">
+          Use <Shortcut size="sm" :keys="['Shift']" /> + <Shortcut size="sm" :keys="['Enter']" /> to create and add
+          another.
+        </span>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
+
+  <Drawer v-else :dialog-id="dialogId">
+    <DrawerContent class="max-h-[80%]">
+      <DrawerHeader>
+        <DrawerTitle>{{ title }}</DrawerTitle>
+      </DrawerHeader>
+
+      <div class="m-2 overflow-y-auto">
+        <slot />
+      </div>
+    </DrawerContent>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+  import { useMediaQuery } from "@vueuse/core";
+  import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
+  import { Dialog, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  defineProps<{
+    dialogId: string;
+    title: string;
+  }>();
+</script>
diff --git a/frontend/components/App/ImportDialog.vue b/frontend/components/App/ImportDialog.vue
index 48276f28..e553f77d 100644
--- a/frontend/components/App/ImportDialog.vue
+++ b/frontend/components/App/ImportDialog.vue
@@ -46,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import MdiUpload from "~icons/mdi/upload";
   type Props = {
     modelValue: boolean;
@@ -60,7 +61,6 @@
   const dialog = useVModel(props, "modelValue", emit);
 
   const api = useUserApi();
-  const toast = useNotifier();
 
   const importCsv = ref<File | null>(null);
   const importLoading = ref(false);
diff --git a/frontend/components/App/OutdatedModal.vue b/frontend/components/App/OutdatedModal.vue
index 79697d5d..58eb9457 100644
--- a/frontend/components/App/OutdatedModal.vue
+++ b/frontend/components/App/OutdatedModal.vue
@@ -1,41 +1,86 @@
 <template>
-  <BaseModal v-model="modal">
-    <template #title>🎉 {{ $t("components.app.outdated.new_version_available") }} 🎉</template>
-    <div class="p-4">
-      <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">
-          {{ $t("components.app.outdated.new_version_available_link") }}
-        </a>
-      </p>
-    </div>
-    <button class="btn btn-warning" @click="hide">
-      {{ $t("components.app.outdated.dismiss") }}
-    </button>
-  </BaseModal>
+  <AlertDialog v-model:open="open">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>🎉 {{ $t("components.app.outdated.new_version_available") }} 🎉</AlertDialogTitle>
+        <AlertDialogDescription>
+          <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">
+              {{ $t("components.app.outdated.new_version_available_link") }}
+            </a>
+          </p>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction @click="hide">{{ $t("components.app.outdated.dismiss") }}</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup lang="ts">
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    current: {
-      type: String,
-      required: true,
-    },
-    latest: {
-      type: String,
-      required: true,
-    },
-  });
+  import { lt } from "semver";
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogAction,
+  } from "~/components/ui/alert-dialog";
+  import { useDialog } from "~/components/ui/dialog-provider";
 
-  const modal = useVModel(props, "modelValue");
+  const props = defineProps<{
+    status: {
+      build: {
+        version: string;
+      };
+      latest: {
+        version: string;
+      };
+    };
+  }>();
+
+  const latest = computed(() => props.status.latest.version);
+  const current = computed(() => props.status.build.version);
+
+  const isDev = computed(() => import.meta.dev || !current.value?.includes("."));
+  const isOutdated = computed(() => current.value && latest.value && lt(current.value, latest.value));
+  const hasHiddenLatest = computed(() => localStorage.getItem("latestVersion") === latest.value);
+
+  const displayOutdatedWarning = computed(() => Boolean(!isDev.value && !hasHiddenLatest.value && isOutdated.value));
+
+  const open = ref(false);
+
+  watch(
+    displayOutdatedWarning,
+    displayOutdatedWarning => {
+      if (displayOutdatedWarning) {
+        open.value = true;
+      }
+    },
+    { immediate: true }
+  );
 
   const hide = () => {
-    modal.value = false;
-    localStorage.setItem("latestVersion", props.latest);
+    open.value = false;
+    localStorage.setItem("latestVersion", latest.value);
   };
+
+  const { addAlert, removeAlert } = useDialog();
+
+  watch(
+    open,
+    val => {
+      if (val) {
+        addAlert("new-version-modal");
+      } else {
+        removeAlert("new-version-modal");
+      }
+    },
+    { immediate: true }
+  );
 </script>
diff --git a/frontend/components/App/QuickMenuModal.vue b/frontend/components/App/QuickMenuModal.vue
new file mode 100644
index 00000000..8ecddfa3
--- /dev/null
+++ b/frontend/components/App/QuickMenuModal.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+  import { useI18n } from "vue-i18n";
+  import {
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandSeparator,
+  } from "~/components/ui/command";
+  import { Shortcut } from "~/components/ui/shortcut";
+  import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
+
+  export type QuickMenuAction =
+    | { text: string; href: string; type: "navigate" }
+    | { text: string; dialogId: string; shortcut: string; type: "create" };
+
+  const props = defineProps({
+    actions: {
+      type: Array as PropType<QuickMenuAction[]>,
+      required: false,
+      default: () => [],
+    },
+  });
+
+  const { t } = useI18n();
+  const { closeDialog, openDialog } = useDialog();
+
+  useDialogHotkey("quick-menu", { code: "Backquote", ctrl: true });
+</script>
+
+<template>
+  <CommandDialog dialog-id="quick-menu">
+    <CommandInput
+      :placeholder="t('components.quick_menu.shortcut_hint')"
+      @keydown="
+        (e: KeyboardEvent) => {
+          const item = props.actions.filter(item => 'shortcut' in item).find(item => item.shortcut === e.key);
+          if (item) {
+            openDialog(item.dialogId);
+          }
+        }
+      "
+    />
+    <CommandList>
+      <CommandEmpty>{{ t("components.quick_menu.no_results") }}</CommandEmpty>
+      <CommandGroup :heading="t('global.create')">
+        <CommandItem
+          v-for="(create, i) in props.actions.filter(item => item.type === 'create')"
+          :key="`$global.create_${i + 1}`"
+          :value="create.text"
+          @select="
+            () => {
+              openDialog(create.dialogId);
+            }
+          "
+        >
+          {{ create.text }}
+          <Shortcut v-if="'shortcut' in create" class="ml-auto" size="sm" :keys="[create.shortcut]" />
+        </CommandItem>
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup :heading="t('global.navigate')">
+        <CommandItem
+          v-for="(navigate, i) in props.actions.filter(item => item.type === 'navigate')"
+          :key="navigate.text"
+          :value="`global.navigate_${i + 1}`"
+          @select="
+            () => {
+              closeDialog('quick-menu');
+              navigateTo(navigate.href);
+            }
+          "
+        >
+          {{ navigate.text }}
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </CommandDialog>
+</template>
diff --git a/frontend/components/App/Toast.vue b/frontend/components/App/Toast.vue
deleted file mode 100644
index 014488db..00000000
--- a/frontend/components/App/Toast.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="fixed right-2 top-2 z-[9999] w-[300px]">
-    <TransitionGroup name="notify" tag="div">
-      <div
-        v-for="(notify, index) in notifications.slice(0, 4)"
-        :key="notify.id"
-        class="my-2 w-[300px] rounded-md p-3 text-sm text-white"
-        :class="{
-          'bg-primary': notify.type === 'info',
-          'bg-red-600': notify.type === 'error',
-          'bg-green-600': notify.type === 'success',
-        }"
-        @click="dropNotification(index)"
-      >
-        <div class="flex gap-1">
-          <template v-if="notify.type == 'success'">
-            <MdiCheckboxMarkedCircle class="size-5" />
-          </template>
-          <template v-if="notify.type == 'info'">
-            <MdiInformationSlabCircle class="size-5" />
-          </template>
-
-          <template v-if="notify.type == 'error'">
-            <MdiAlert class="size-5" />
-          </template>
-          {{ notify.message }}
-        </div>
-      </div>
-    </TransitionGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import MdiCheckboxMarkedCircle from "~icons/mdi/checkbox-marked-circle";
-  import MdiInformationSlabCircle from "~icons/mdi/information-slab-circle";
-  import MdiAlert from "~icons/mdi/alert";
-
-  import { useNotifications } from "@/composables/use-notifier";
-
-  const { notifications, dropNotification } = useNotifications();
-</script>
-
-<style scoped>
-  .notify-move,
-  .notify-enter-active,
-  .notify-leave-active {
-    transition: all 0.5s ease;
-  }
-  .notify-enter-from,
-  .notify-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
-  .notify-leave-active {
-    position: absolute;
-    transform: translateY(30px);
-  }
-</style>
diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index c0ed6083..a822b43a 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -47,6 +47,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { toast } from "@/components/ui/sonner";
   import MdiClose from "~icons/mdi/close";
 
   const emit = defineEmits(["update:modelValue"]);
@@ -101,7 +102,6 @@
   }
 
   const api = useUserApi();
-  const toast = useNotifier();
 
   async function createAndAdd(name: string) {
     const { error, data } = await api.labels.create({
diff --git a/frontend/components/Form/Password.vue b/frontend/components/Form/Password.vue
index f16328c0..6a1791a7 100644
--- a/frontend/components/Form/Password.vue
+++ b/frontend/components/Form/Password.vue
@@ -3,7 +3,7 @@
     <FormTextField v-model="value" placeholder="Password" :label="label" :type="inputType"> </FormTextField>
     <button
       type="button"
-      class="tooltip absolute right-3 top-11 mb-3 ml-1 mt-auto inline-flex justify-center p-1"
+      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()"
     >
diff --git a/frontend/components/Form/TextArea.vue b/frontend/components/Form/TextArea.vue
index 87207415..18e7f49c 100644
--- a/frontend/components/Form/TextArea.vue
+++ b/frontend/components/Form/TextArea.vue
@@ -1,7 +1,8 @@
 <template>
-  <div v-if="!inline" class="form-control w-full">
-    <label class="label">
-      <span class="label-text">{{ label }}</span>
+  <div v-if="!inline" class="flex w-full flex-col gap-1.5">
+    <Label :for="id" class="flex w-full px-1">
+      <span>{{ label }}</span>
+      <span class="grow"></span>
       <span
         :class="{
           'text-red-600':
@@ -11,12 +12,13 @@
       >
         {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
-    </label>
-    <textarea ref="el" v-model="value" class="textarea textarea-bordered h-28 w-full" :placeholder="placeholder" />
+    </Label>
+    <Textarea :id="id" v-model="value" :placeholder="placeholder" class="min-h-[112px] w-full resize-none" />
   </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 :for="id" class="flex w-full px-1 py-2">
+      <span>{{ label }}</span>
+      <span class="grow"></span>
       <span
         :class="{
           'text-red-600':
@@ -26,32 +28,23 @@
       >
         {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
-    </label>
-    <textarea
-      ref="el"
-      v-model="value"
-      class="textarea textarea-bordered col-span-3 mt-3 h-28 w-full"
-      auto-grow
-      :placeholder="placeholder"
-      auto-height
-    />
+    </Label>
+    <Textarea :id="id" v-model="value" autosize :placeholder="placeholder" class="col-span-3 mt-2 w-full resize-none" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(["update:modelValue"]);
+  import { Label } from "~/components/ui/label";
+  import { Textarea } from "~/components/ui/textarea";
+
   const props = defineProps({
-    modelValue: {
-      type: [String],
-      required: true,
-    },
     label: {
       type: String,
       required: true,
     },
-    type: {
+    modelValue: {
       type: String,
-      default: "text",
+      required: true,
     },
     placeholder: {
       type: String,
@@ -73,17 +66,6 @@
     },
   });
 
-  const el = ref();
-  function setHeight() {
-    el.value.style.height = "auto";
-    el.value.style.height = el.value.scrollHeight + 5 + "px";
-  }
-
-  onUpdated(() => {
-    if (props.inline) {
-      setHeight();
-    }
-  });
-
-  const value = useVModel(props, "modelValue", emit);
+  const id = useId();
+  const value = useVModel(props, "modelValue");
 </script>
diff --git a/frontend/components/Form/TextField.vue b/frontend/components/Form/TextField.vue
index 7e63a215..fe003195 100644
--- a/frontend/components/Form/TextField.vue
+++ b/frontend/components/Form/TextField.vue
@@ -1,7 +1,8 @@
 <template>
-  <div v-if="!inline" class="form-control w-full">
-    <label class="label">
-      <span class="label-text"> {{ label }} </span>
+  <div v-if="!inline" class="flex w-full flex-col gap-1.5">
+    <Label :for="id" class="flex w-full px-1">
+      <span> {{ label }} </span>
+      <span class="grow"></span>
       <span
         :class="{
           'text-red-600':
@@ -11,19 +12,21 @@
       >
         {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
-    </label>
-    <input
+    </Label>
+    <Input
+      :id="id"
       ref="input"
       v-model="value"
       :placeholder="placeholder"
       :type="type"
       :required="required"
-      class="input input-bordered w-full"
+      class="w-full"
     />
   </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 class="flex w-full px-1 py-2" :for="id">
+      <span> {{ label }} </span>
+      <span class="grow"></span>
       <span
         :class="{
           'text-red-600':
@@ -33,18 +36,21 @@
       >
         {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
-    </label>
-    <input
+    </Label>
+    <Input
+      :id="id"
       v-model="value"
       :placeholder="placeholder"
       :type="type"
       :required="required"
-      class="input input-bordered col-span-3 mt-2 w-full"
+      class="col-span-3 mt-2 w-full"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+  import { Label } from "~/components/ui/label";
+  import { Input } from "~/components/ui/input";
   const props = defineProps({
     label: {
       type: String,
@@ -86,6 +92,8 @@
     },
   });
 
+  const id = useId();
+
   const input = ref<HTMLElement | null>(null);
 
   whenever(
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 262e7eff..36d98bc0 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -1,7 +1,6 @@
 <template>
-  <BaseModal v-model="modal">
-    <template #title> {{ $t("components.item.create_modal.title") }} </template>
-    <form @submit.prevent="create()">
+  <BaseModal dialog-id="create-item" :title="$t('components.item.create_modal.title')">
+    <form class="flex flex-col gap-2" @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
       <FormTextField
         ref="nameInput"
@@ -17,93 +16,125 @@
         :label="$t('components.item.create_modal.item_description')"
         :max-length="1000"
       />
-      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
-
-      <div class="modal-action mb-6">
-        <div>
-          <label for="photo" class="btn">{{ $t("components.item.create_modal.photo_button") }}</label>
-          <input
-            id="photo"
-            class="hidden"
+      <LabelSelector v-model="form.labels" :labels="labels ?? []" />
+      <div class="flex w-full flex-col gap-1.5">
+        <Label for="image-create-photo" class="flex w-full px-1">
+          {{ $t("components.item.create_modal.item_photo") }}
+        </Label>
+        <div class="relative inline-block">
+          <Button type="button" variant="outline" class="w-full" aria-hidden="true" @click.prevent="">
+            {{ $t("components.item.create_modal.upload_photos") }}
+          </Button>
+          <Input
+            id="image-create-photo"
+            ref="fileInput"
+            class="absolute left-0 top-0 size-full cursor-pointer opacity-0"
             type="file"
-            accept="image/png,image/jpeg,image/gif,image/avif,image/webp"
+            accept="image/png,image/jpeg,image/gif,image/avif,image/webp;capture=camera"
             multiple
             @change="previewImage"
           />
         </div>
-        <div class="grow"></div>
-        <div>
-          <BaseButton class="rounded-r-none" :loading="loading" type="submit">
-            <template #icon>
-              <MdiPackageVariant class="swap-off size-5" />
-              <MdiPackageVariantClosed class="swap-on size-5" />
-            </template>
+      </div>
+      <div class="mt-4 flex flex-row-reverse">
+        <ButtonGroup>
+          <Button :disabled="loading" type="submit" class="group">
+            <div class="relative mx-2">
+              <div
+                class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-[360deg]"
+              >
+                <MdiPackageVariant class="size-5 group-hover:hidden" />
+                <MdiPackageVariantClosed class="hidden size-5 group-hover:block" />
+              </div>
+            </div>
             {{ $t("global.create") }}
-          </BaseButton>
-          <div class="dropdown dropdown-top">
-            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
-              <MdiChevronDown class="size-5" name="mdi-chevron-down" />
-            </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
-              <li>
-                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
-              </li>
-            </ul>
-          </div>
-        </div>
+          </Button>
+          <Button variant="outline" :disabled="loading" type="button" @click="create(false)">
+            {{ $t("global.create_and_add") }}
+          </Button>
+        </ButtonGroup>
       </div>
 
       <!-- photo preview area is AFTER the create button, to avoid pushing the button below the screen on small displays -->
-      <div class="border-t border-gray-300 px-4 pb-4">
+      <div v-if="form.photos.length > 0" class="mt-4 border-t border-gray-300 px-4 pb-4">
         <div v-for="(photo, index) in form.photos" :key="index">
-          <div class="indicator mt-8 w-auto">
-            <div class="indicator-item right-2 top-2">
-              <button type="button" class="btn btn-circle btn-primary btn-md" @click="deleteImage(index)">
-                <MdiDelete class="size-5" />
-              </button>
-            </div>
-
+          <div class="mt-8 w-full">
             <img
               :src="photo.fileBase64"
-              class="w-full rounded-t border-gray-300 object-fill shadow-sm"
+              class="w-full rounded border-gray-300 object-fill shadow-sm"
               alt="Uploaded Photo"
             />
           </div>
-          <p class="mt-1 text-sm" style="overflow-wrap: anywhere">File name: {{ photo.photoName }}</p>
+          <div class="mt-2 flex items-center gap-2">
+            <TooltipProvider class="flex gap-2" :delay-duration="0">
+              <Tooltip>
+                <TooltipTrigger>
+                  <Button size="icon" type="button" variant="destructive" @click.prevent="deleteImage(index)">
+                    <MdiDelete />
+                    <div class="sr-only">Delete photo</div>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Delete photo</p>
+                </TooltipContent>
+              </Tooltip>
+              <!-- TODO: re-enable when we have a way to set primary photos -->
+              <!-- <Tooltip>
+                <TooltipTrigger>
+                  <Button
+                    size="icon"
+                    type="button"
+                    :variant="photo.primary ? 'default' : 'outline'"
+                    @click.prevent="setPrimary(index)"
+                  >
+                    <MdiStar v-if="photo.primary" />
+                    <MdiStarOutline v-else />
+                    <div class="sr-only">Set as {{ photo.primary ? "non" : "" }} primary photo</div>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Set as {{ photo.primary ? "non" : "" }} primary photo</p>
+                </TooltipContent>
+              </Tooltip> -->
+            </TooltipProvider>
+            <p class="mt-1 text-sm" style="overflow-wrap: anywhere">{{ photo.photoName }}</p>
+          </div>
         </div>
       </div>
     </form>
-    <p class="mt-4 text-center text-sm">
-      use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
-    </p>
   </BaseModal>
 </template>
 
 <script setup lang="ts">
-  import type { ItemCreate, LabelOut, LocationOut } from "~~/lib/api/types/data-contracts";
+  import { toast } from "@/components/ui/sonner";
+  import { Button, ButtonGroup } from "~/components/ui/button";
+  import BaseModal from "@/components/App/CreateModal.vue";
+  import { Label } from "@/components/ui/label";
+  import { Input } from "@/components/ui/input";
+  import type { ItemCreate, LocationOut } from "~~/lib/api/types/data-contracts";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPackageVariantClosed from "~icons/mdi/package-variant-closed";
-  import MdiChevronDown from "~icons/mdi/chevron-down";
   import MdiDelete from "~icons/mdi/delete";
+  // import MdiStarOutline from "~icons/mdi/star-outline";
+  // import MdiStar from "~icons/mdi/star";
   import { AttachmentTypes } from "~~/lib/api/types/non-generated";
+  import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
+  import LabelSelector from "~/components/Label/Selector.vue";
 
   interface PhotoPreview {
     photoName: string;
     file: File;
     fileBase64: string;
+    primary: boolean;
   }
 
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  });
+  const { activeDialog, closeDialog } = useDialog();
+
+  useDialogHotkey("create-item", { code: "Digit1", shift: true });
 
   const api = useUserApi();
-  const toast = useNotifier();
 
   const locationsStore = useLocationStore();
   const locations = computed(() => locationsStore.allLocations);
@@ -129,15 +160,14 @@
 
   const nameInput = ref<HTMLInputElement | null>(null);
 
-  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
     location: locations.value && locations.value.length > 0 ? locations.value[0] : ({} as LocationOut),
     name: "",
     description: "",
-    color: "", // Future!
-    labels: [] as LabelOut[],
+    color: "",
+    labels: [] as string[],
     photos: [] as PhotoPreview[],
   });
 
@@ -147,48 +177,56 @@
     form.photos.splice(index, 1);
   }
 
+  // TODO: actually set the primary when adding item
+
+  // function setPrimary(index: number) {
+  //   const primary = form.photos.findIndex(p => p.primary);
+
+  //   if (primary !== -1) form.photos[primary].primary = false;
+  //   if (primary !== index) form.photos[index].primary = true;
+
+  //   toast.error("Currently this does not do anything, the first photo will always be primary");
+  // }
+
   function previewImage(event: Event) {
     const input = event.target as HTMLInputElement;
-
-    // We support uploading multiple files at once, so build up the list of files to preview and upload
     if (input.files && input.files.length > 0) {
       for (const file of input.files) {
         const reader = new FileReader();
         reader.onload = e => {
-          form.photos.push({ photoName: file.name, fileBase64: e.target?.result as string, file });
+          form.photos.push({
+            photoName: file.name,
+            fileBase64: e.target?.result as string,
+            file,
+            primary: form.photos.length === 0,
+          });
         };
-
         reader.readAsDataURL(file);
       }
+      input.value = "";
     }
   }
 
   watch(
-    () => modal.value,
-    open => {
-      if (open) {
-        useTimeoutFn(() => {
-          focused.value = true;
-        }, 50);
-
+    () => activeDialog.value,
+    active => {
+      if (active === "create-item") {
         if (locationId.value) {
           const found = locations.value.find(l => l.id === locationId.value);
           if (found) {
             form.location = found;
           }
         }
-
         if (labelId.value) {
-          form.labels = labels.value.filter(l => l.id === labelId.value);
+          form.labels = labels.value.filter(l => l.id === labelId.value).map(l => l.id);
         }
-      } else {
-        focused.value = false;
       }
     }
   );
 
   async function create(close = true) {
-    if (!form.location) {
+    if (!form.location?.id) {
+      toast.error("Please select a location.");
       return;
     }
 
@@ -199,20 +237,18 @@
 
     loading.value = true;
 
-    if (shift.value) {
-      close = false;
-    }
+    if (shift.value) close = false;
 
     const out: ItemCreate = {
       parentId: null,
       name: form.name,
       description: form.description,
       locationId: form.location.id as string,
-      labelIds: form.labels.map(l => l.id) as string[],
+      labelIds: form.labels,
     };
 
     const { error, data } = await api.items.create(out);
-    loading.value = false;
+
     if (error) {
       loading.value = false;
       toast.error("Couldn't create item");
@@ -221,30 +257,40 @@
 
     toast.success("Item created");
 
-    // If the photo was provided, upload it
-    // NOTE: This is not transactional. It's entirely possible for some of the photos to successfully upload and the rest to fail, which will result in missing photos
-    for (const photo of form.photos) {
-      const { error } = await api.items.attachments.add(data.id, photo.file, photo.photoName, AttachmentTypes.Photo);
+    if (form.photos.length > 0) {
+      toast.info(`Uploading ${form.photos.length} photo(s)...`);
+      let uploadError = false;
+      for (const photo of form.photos) {
+        const { error: attachError } = await api.items.attachments.add(
+          data.id,
+          photo.file,
+          photo.photoName,
+          AttachmentTypes.Photo
+        );
 
-      if (error) {
-        loading.value = false;
-        toast.error("Failed to upload Photo " + photo.photoName);
-        return;
+        if (attachError) {
+          uploadError = true;
+          toast.error(`Failed to upload Photo: ${photo.photoName}`);
+          console.error(attachError);
+        }
+      }
+      if (uploadError) {
+        toast.warning("Some photos failed to upload.");
+      } else {
+        toast.success("All photos uploaded successfully.");
       }
-
-      toast.success("Photo uploaded");
     }
 
-    // Reset
     form.name = "";
     form.description = "";
     form.color = "";
     form.photos = [];
+    form.labels = [];
     focused.value = false;
     loading.value = false;
 
     if (close) {
-      modal.value = false;
+      closeDialog("create-item");
       navigateTo(`/item/${data.id}`);
     }
   }
diff --git a/frontend/components/Label/Chip.vue b/frontend/components/Label/Chip.vue
index 86933d3c..ddd32853 100644
--- a/frontend/components/Label/Chip.vue
+++ b/frontend/components/Label/Chip.vue
@@ -37,6 +37,6 @@
       <MdiArrowRight class="swap-on mr-2" />
       <MdiTagOutline class="swap-off mr-2" />
     </label>
-    {{ label.name }}
+    {{ label.name.length > 20 ? `${label.name.substring(0, 20)}...` : label.name }}
   </NuxtLink>
 </template>
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index a16b480d..62112d68 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -1,14 +1,12 @@
 <template>
-  <BaseModal v-model="modal">
-    <template #title>{{ $t("components.label.create_modal.title") }}</template>
-    <form @submit.prevent="create()">
+  <BaseModal dialog-id="create-label" :title="$t('components.label.create_modal.title')">
+    <form class="flex flex-col gap-2" @submit.prevent="create()">
       <FormTextField
-        ref="locationNameRef"
         v-model="form.name"
         :trigger-focus="focused"
         :autofocus="true"
         :label="$t('components.label.create_modal.label_name')"
-        :max-length="255"
+        :max-length="50"
         :min-length="1"
       />
       <FormTextArea
@@ -16,38 +14,27 @@
         :label="$t('components.label.create_modal.label_description')"
         :max-length="255"
       />
-      <div class="modal-action">
-        <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>
-          <div class="dropdown dropdown-top">
-            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
-              <MdiChevronDown class="size-5" />
-            </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
-              <li>
-                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
-              </li>
-            </ul>
-          </div>
-        </div>
+      <div class="mt-4 flex flex-row-reverse">
+        <ButtonGroup>
+          <Button :disabled="loading" type="submit">{{ $t("global.create") }}</Button>
+          <Button variant="outline" :disabled="loading" type="button" @click="create(false)">
+            {{ $t("global.create_and_add") }}
+          </Button>
+        </ButtonGroup>
       </div>
     </form>
-    <p class="mt-4 text-center text-sm">
-      use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
-    </p>
   </BaseModal>
 </template>
 
 <script setup lang="ts">
-  import MdiChevronDown from "~icons/mdi/chevron-down";
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  });
+  import { toast } from "@/components/ui/sonner";
+  import BaseModal from "@/components/App/CreateModal.vue";
+  import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
+
+  const { closeDialog } = useDialog();
+
+  useDialogHotkey("create-label", { code: "Digit2", shift: true });
 
-  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
@@ -64,20 +51,7 @@
     loading.value = false;
   }
 
-  watch(
-    () => modal.value,
-    open => {
-      if (open)
-        useTimeoutFn(() => {
-          focused.value = true;
-        }, 50);
-      else focused.value = false;
-    }
-  );
-
   const api = useUserApi();
-  const toast = useNotifier();
-
   const { shift } = useMagicKeys();
 
   async function create(close = true) {
@@ -85,13 +59,17 @@
       toast.error("Already creating a label");
       return;
     }
-    loading.value = true;
-
-    if (shift.value) {
-      close = false;
+    if (form.name.length > 50) {
+      toast.error("Label name must not be longer than 50 characters");
+      return;
     }
 
+    loading.value = true;
+
+    if (shift.value) close = false;
+
     const { error, data } = await api.labels.create(form);
+
     if (error) {
       toast.error("Couldn't create label");
       loading.value = false;
@@ -102,7 +80,7 @@
     reset();
 
     if (close) {
-      modal.value = false;
+      closeDialog("create-label");
       navigateTo(`/label/${data.id}`);
     }
   }
diff --git a/frontend/components/Label/Selector.vue b/frontend/components/Label/Selector.vue
new file mode 100644
index 00000000..21c167df
--- /dev/null
+++ b/frontend/components/Label/Selector.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Label :for="id" class="px-1">
+      {{ $t("global.labels") }}
+    </Label>
+
+    <TagsInput
+      v-model="modelValue"
+      class="w-full gap-0 px-0"
+      :display-value="v => shortenedLabels.find(l => l.id === v)?.name ?? 'Loading...'"
+    >
+      <div class="flex flex-wrap items-center gap-2 px-3">
+        <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+          <TagsInputItemText />
+          <TagsInputItemDelete />
+        </TagsInputItem>
+      </div>
+
+      <ComboboxRoot v-model="modelValue" v-model:open="open" class="w-full" :ignore-filter="true">
+        <ComboboxAnchor as-child>
+          <ComboboxInput v-model="searchTerm" :placeholder="$t('components.label.selector.select_labels')" as-child>
+            <TagsInputInput
+              :id="id"
+              class="w-full px-3"
+              :class="modelValue.length > 0 ? 'mt-2' : ''"
+              @focus="open = true"
+            />
+          </ComboboxInput>
+        </ComboboxAnchor>
+
+        <ComboboxPortal>
+          <ComboboxContent :side-offset="4" position="popper" class="z-50">
+            <CommandList
+              position="popper"
+              class="mt-2 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover-foreground shadow-md outline-none 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"
+            >
+              <CommandEmpty />
+              <CommandGroup>
+                <CommandItem
+                  v-for="label in filteredLabels"
+                  :key="label.value"
+                  :value="label.value"
+                  @select.prevent="
+                    ev => {
+                      if (typeof ev.detail.value === 'string') {
+                        if (ev.detail.value === 'create-item') {
+                          void createAndAdd(searchTerm);
+                        } else {
+                          if (!modelValue.includes(ev.detail.value)) {
+                            modelValue = [...modelValue, ev.detail.value];
+                          }
+                        }
+                        searchTerm = '';
+                      }
+                    }
+                  "
+                >
+                  {{ label.label }}
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </ComboboxRoot>
+    </TagsInput>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from "reka-ui";
+  import { computed, ref } from "vue";
+  import fuzzysort from "fuzzysort";
+  import { toast } from "@/components/ui/sonner";
+  import { CommandEmpty, CommandGroup, CommandItem, CommandList } from "~/components/ui/command";
+  import {
+    TagsInput,
+    TagsInputInput,
+    TagsInputItem,
+    TagsInputItemDelete,
+    TagsInputItemText,
+  } from "@/components/ui/tags-input";
+  import type { LabelOut } from "~/lib/api/types/data-contracts";
+
+  const id = useId();
+
+  const api = useUserApi();
+
+  const emit = defineEmits(["update:modelValue"]);
+  const props = defineProps({
+    modelValue: {
+      type: Array as () => string[],
+      default: null,
+    },
+    labels: {
+      type: Array as () => LabelOut[],
+      required: true,
+    },
+  });
+
+  const modelValue = useVModel(props, "modelValue", emit);
+
+  const open = ref(false);
+  const searchTerm = ref("");
+
+  const shortenedLabels = computed(() => {
+    return props.labels.map(l => ({
+      ...l,
+      name: l.name.length > 20 ? `${l.name.substring(0, 20)}...` : l.name,
+    }));
+  });
+
+  const filteredLabels = computed(() => {
+    const filtered = fuzzysort
+      .go(searchTerm.value, shortenedLabels.value, { key: "name", all: true })
+      .map(l => ({
+        value: l.obj.id,
+        label: l.obj.name,
+      }))
+      .filter(i => !modelValue.value.includes(i.value));
+
+    if (searchTerm.value.trim() !== "") {
+      filtered.push({ value: "create-item", label: `Create ${searchTerm.value}` });
+    }
+
+    return filtered;
+  });
+
+  const createAndAdd = async (name: string) => {
+    if (name.length > 50) {
+      toast.error("Label name must not be longer than 50 characters");
+      return;
+    }
+    const { error, data } = await api.labels.create({
+      name,
+      color: "", // Future!
+      description: "",
+    });
+
+    if (error) {
+      toast.error("Couldn't create label");
+      return;
+    }
+
+    toast.success("Label created");
+
+    modelValue.value = [...modelValue.value, data.id];
+  };
+
+  // TODO: when reka-ui 2 is release use hook to set cursor to end when label is added with click
+</script>
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 3363c50f..0d075907 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -1,7 +1,6 @@
 <template>
-  <BaseModal v-model="modal">
-    <template #title>{{ $t("components.location.create_modal.title") }}</template>
-    <form @submit.prevent="create()">
+  <BaseModal dialog-id="create-location" :title="$t('components.location.create_modal.title')">
+    <form class="flex flex-col gap-2" @submit.prevent="create()">
       <LocationSelector v-model="form.parent" />
       <FormTextField
         ref="locationNameRef"
@@ -18,39 +17,29 @@
         :label="$t('components.location.create_modal.location_description')"
         :max-length="1000"
       />
-      <div class="modal-action">
-        <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" type="submit" :loading="loading">{{ $t("global.create") }}</BaseButton>
-          <div class="dropdown dropdown-top">
-            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
-              <MdiChevronDown class="size-5" />
-            </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
-              <li>
-                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
-              </li>
-            </ul>
-          </div>
-        </div>
+      <div class="mt-4 flex flex-row-reverse">
+        <ButtonGroup>
+          <Button :disabled="loading" type="submit">{{ $t("global.create") }}</Button>
+          <Button variant="outline" :disabled="loading" type="button" @click="create(false)">{{
+            $t("global.create_and_add")
+          }}</Button>
+        </ButtonGroup>
       </div>
     </form>
-    <p class="mt-4 text-center text-sm">
-      use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
-    </p>
   </BaseModal>
 </template>
 
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
+  import { Button, ButtonGroup } from "~/components/ui/button";
+  import BaseModal from "@/components/App/CreateModal.vue";
   import type { LocationSummary } from "~~/lib/api/types/data-contracts";
-  import MdiChevronDown from "~icons/mdi/chevron-down";
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  });
+  import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
+
+  const { activeDialog, closeDialog } = useDialog();
+
+  useDialogHotkey("create-location", { code: "Digit3", shift: true });
 
-  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
@@ -60,12 +49,12 @@
   });
 
   watch(
-    () => modal.value,
-    open => {
-      if (open) {
-        useTimeoutFn(() => {
-          focused.value = true;
-        }, 50);
+    () => activeDialog.value,
+    active => {
+      if (active === "create-location") {
+        // useTimeoutFn(() => {
+        //   focused.value = true;
+        // }, 50);
 
         if (locationId.value) {
           const found = locations.value.find(l => l.id === locationId.value);
@@ -74,7 +63,7 @@
           }
         }
       } else {
-        focused.value = false;
+        // focused.value = false;
       }
     }
   );
@@ -88,7 +77,6 @@
   }
 
   const api = useUserApi();
-  const toast = useNotifier();
 
   const locationsStore = useLocationStore();
   const locations = computed(() => locationsStore.allLocations);
@@ -111,9 +99,7 @@
     }
     loading.value = true;
 
-    if (shift.value) {
-      close = false;
-    }
+    if (shift.value) close = false;
 
     const { data, error } = await api.locations.create({
       name: form.name,
@@ -132,7 +118,7 @@
     reset();
 
     if (close) {
-      modal.value = false;
+      closeDialog("create-location");
       navigateTo(`/location/${data.id}`);
     }
   }
diff --git a/frontend/components/Location/LegacySelector.vue b/frontend/components/Location/LegacySelector.vue
new file mode 100644
index 00000000..bbb4997d
--- /dev/null
+++ b/frontend/components/Location/LegacySelector.vue
@@ -0,0 +1,63 @@
+<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/Selector.vue b/frontend/components/Location/Selector.vue
index bbb4997d..bd22ebf4 100644
--- a/frontend/components/Location/Selector.vue
+++ b/frontend/components/Location/Selector.vue
@@ -1,62 +1,95 @@
 <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>
+  <div class="flex flex-col gap-1">
+    <Label :for="id" class="px-1">
+      {{ $t("components.location.selector.parent_location") }}
+    </Label>
+
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button :id="id" variant="outline" role="combobox" :aria-expanded="open" class="w-full justify-between">
+          {{ value && value.name ? value.name : $t("components.location.selector.select_location") }}
+          <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="$t('components.location.selector.search_location')"
+            :display-value="_ => ''"
+          />
+          <CommandEmpty>{{ $t("components.location.selector.no_location_found") }}</CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              <CommandItem
+                v-for="location in filteredLocations"
+                :key="location.id"
+                :value="location.id"
+                @select="selectLocation(location as unknown as LocationSummary)"
+              >
+                <Check :class="cn('mr-2 h-4 w-4', value?.id === location.id ? 'opacity-100' : 'opacity-0')" />
+                <div>
+                  <div class="flex w-full">
+                    {{ location.name }}
+                  </div>
+                  <div v-if="location.name !== location.treeString" class="mt-1 text-xs text-muted-foreground">
+                    {{ location.treeString }}
+                  </div>
+                </div>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
 </template>
 
-<script lang="ts" setup>
-  import type { FlatTreeItem } from "~~/composables/use-location-helpers";
-  import { useFlatLocations } from "~~/composables/use-location-helpers";
+<script setup lang="ts">
+  import { Check, ChevronsUpDown } from "lucide-vue-next";
+  import fuzzysort from "fuzzysort";
+  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 type { LocationSummary } from "~~/lib/api/types/data-contracts";
-  import MdiCheck from "~icons/mdi/check";
+  import { useFlatLocations } from "~~/composables/use-location-helpers";
 
   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 emit = defineEmits(["update:modelValue"]);
+
+  const open = ref(false);
+  const search = ref("");
+  const id = useId();
+  const locations = useFlatLocations();
+  const value = useVModel(props, "modelValue", emit);
+
+  function selectLocation(location: LocationSummary) {
+    if (value.value?.id !== location.id) {
+      value.value = location;
+    } else {
+      value.value = null;
+    }
+    open.value = false;
   }
 
-  const props = defineProps<Props>();
-  const value = useVModel(props, "modelValue");
+  const filteredLocations = computed(() => {
+    const filtered = fuzzysort.go(search.value, locations.value, { key: "name", all: true }).map(i => i.obj);
 
-  const locations = useFlatLocations();
-  const form = ref({
-    parent: null as LocationSummary | null,
-    search: "",
+    return filtered;
   });
 
-  // Whenever parent goes from value to null reset search
+  // Reset search when value is cleared
   watch(
     () => value.value,
     () => {
       if (!value.value) {
-        form.value.search = "";
+        search.value = "";
       }
     }
   );
diff --git a/frontend/components/Maintenance/EditModal.vue b/frontend/components/Maintenance/EditModal.vue
index 37309eca..07c14848 100644
--- a/frontend/components/Maintenance/EditModal.vue
+++ b/frontend/components/Maintenance/EditModal.vue
@@ -7,8 +7,8 @@
       <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')" />
+      <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>
@@ -23,13 +23,13 @@
 
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
+  import { toast } from "@/components/ui/sonner";
   import type { MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
   import MdiPost from "~icons/mdi/post";
   import DatePicker from "~~/components/Form/DatePicker.vue";
 
   const { t } = useI18n();
   const api = useUserApi();
-  const toast = useNotifier();
 
   const emit = defineEmits(["changed"]);
 
diff --git a/frontend/components/ModalConfirm.vue b/frontend/components/ModalConfirm.vue
index 046336a2..67f2a8d1 100644
--- a/frontend/components/ModalConfirm.vue
+++ b/frontend/components/ModalConfirm.vue
@@ -1,15 +1,37 @@
 <template>
-  <BaseModal v-model="isRevealed" readonly @cancel="cancel(false)">
-    <template #title> {{ $t("global.confirm") }} </template>
-    <div>
-      <p>{{ text }}</p>
-    </div>
-    <div class="modal-action">
-      <BaseButton type="submit" @click="confirm(true)"> {{ $t("global.confirm") }} </BaseButton>
-    </div>
-  </BaseModal>
+  <AlertDialog :open="isRevealed">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ $t("global.confirm") }}</AlertDialogTitle>
+        <AlertDialogDescription> {{ text }} </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel @click="cancel(false)">
+          {{ $t("global.cancel") }}
+        </AlertDialogCancel>
+        <AlertDialogAction @click="confirm(true)">
+          {{ $t("global.confirm") }}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </template>
 
 <script setup lang="ts">
+  import { useDialog } from "./ui/dialog-provider";
+
   const { text, isRevealed, confirm, cancel } = useConfirm();
+  const { addAlert, removeAlert } = useDialog();
+
+  watch(
+    isRevealed,
+    val => {
+      if (val) {
+        addAlert("confirm-modal");
+      } else {
+        removeAlert("confirm-modal");
+      }
+    },
+    { immediate: true }
+  );
 </script>
diff --git a/frontend/components/global/LabelMaker.vue b/frontend/components/global/LabelMaker.vue
index 8e29b6dc..bc40c3dd 100644
--- a/frontend/components/global/LabelMaker.vue
+++ b/frontend/components/global/LabelMaker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { route } from "../../lib/api/base";
+  import { toast } from "@/components/ui/sonner";
   import MdiPrinterPos from "~icons/mdi/printer-pos";
   import MdiFileDownload from "~icons/mdi/file-download";
 
@@ -9,7 +10,6 @@
   }>();
 
   const pubApi = usePublicApi();
-  const toast = useNotifier();
 
   const { data: status } = useAsyncData(async () => {
     const { data, error } = await pubApi.status();
diff --git a/frontend/components/global/QuickMenu/Input.vue b/frontend/components/global/QuickMenu/Input.vue
deleted file mode 100644
index 52ff0e93..00000000
--- a/frontend/components/global/QuickMenu/Input.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <Combobox v-model="selectedAction" :nullable="true">
-    <ComboboxInput
-      ref="inputBox"
-      class="input input-bordered mt-2 w-full"
-      @input="inputValue = $event.target.value"
-    ></ComboboxInput>
-    <ComboboxOptions
-      class="card dropdown-content absolute max-h-48 w-full overflow-y-scroll rounded-lg border border-base-300 bg-base-100"
-      :unmount="false"
-    >
-      <ComboboxOption
-        v-for="(action, idx) in filteredActions"
-        :key="idx"
-        v-slot="{ active }"
-        :value="action"
-        as="template"
-      >
-        <button
-          class="flex w-full rounded-lg px-3 py-1.5 text-left transition-colors"
-          :class="{ 'bg-primary text-primary-content': active }"
-        >
-          {{ action.text }}
-
-          <kbd
-            v-if="action.shortcut"
-            class="kbd kbd-sm ml-auto"
-            :class="{ 'border-primary-content bg-primary': active }"
-          >
-            {{ action.shortcut }}
-          </kbd>
-        </button>
-      </ComboboxOption>
-      <div
-        v-if="filteredActions.length == 0"
-        class="w-full rounded-lg p-3 text-left transition-colors hover:bg-base-300"
-      >
-        No actions found.
-      </div>
-    </ComboboxOptions>
-    <ComboboxButton ref="inputBoxButton"></ComboboxButton>
-  </Combobox>
-</template>
-
-<script setup lang="ts">
-  import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption, ComboboxButton } from "@headlessui/vue";
-
-  type ExposedProps = {
-    focused: boolean;
-    revealActions: () => void;
-  };
-
-  type QuickMenuAction = {
-    text: string;
-    action: () => void;
-    // A character that invokes this action instantly if pressed
-    shortcut?: string;
-  };
-
-  const props = defineProps({
-    modelValue: {
-      type: Object as PropType<QuickMenuAction>,
-      required: false,
-      default: undefined,
-    },
-    actions: {
-      type: Array as PropType<QuickMenuAction[]>,
-      required: true,
-    },
-  });
-
-  const emit = defineEmits(["update:modelValue", "actionSelected"]);
-  const selectedAction = ref(null);
-
-  const inputValue = ref("");
-  const inputBox = ref();
-  const inputBoxButton = ref();
-  const { focused: inputBoxFocused } = useFocus(inputBox);
-
-  const revealActions = () => {
-    unrefElement(inputBoxButton).click();
-  };
-
-  watch(inputBoxFocused, val => {
-    if (val) revealActions();
-    else inputValue.value = "";
-  });
-
-  watch(inputValue, (val, oldVal) => {
-    if (!oldVal) {
-      const action = props.actions?.find(v => v.shortcut === val);
-      if (action) {
-        emit("actionSelected", action);
-        inputBoxFocused.value = false;
-      }
-    }
-  });
-
-  watch(selectedAction, val => {
-    if (val) {
-      emit("actionSelected", val);
-      selectedAction.value = null;
-    }
-  });
-
-  const filteredActions = computed(() => {
-    const searchTerm = inputValue.value.toLowerCase();
-    return (props.actions || []).filter(action => {
-      return action.text.toLowerCase().includes(searchTerm) || action.shortcut?.includes(searchTerm);
-    });
-  });
-
-  defineExpose({ focused: inputBoxFocused, revealActions });
-
-  export type { QuickMenuAction, ExposedProps };
-</script>
diff --git a/frontend/components/global/QuickMenu/Modal.vue b/frontend/components/global/QuickMenu/Modal.vue
deleted file mode 100644
index 84eb8838..00000000
--- a/frontend/components/global/QuickMenu/Modal.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <BaseModal
-    v-model="modal"
-    :show-close-button="false"
-    :click-outside-to-close="true"
-    :modal-top="true"
-    :class="{ 'self-start': true }"
-  >
-    <div class="relative">
-      <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
-      <QuickMenuInput ref="inputBox" :actions="props.actions || []" @action-selected="invokeAction"></QuickMenuInput>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup lang="ts">
-  import type { ExposedProps as QuickMenuInputData, QuickMenuAction } from "./Input.vue";
-
-  const props = defineProps({
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    actions: {
-      type: Array as PropType<QuickMenuAction[]>,
-      required: false,
-      default: () => [],
-    },
-  });
-
-  const modal = useVModel(props, "modelValue");
-
-  const inputBox = ref<QuickMenuInputData>({ focused: false, revealActions: () => {} });
-
-  const onModalOpen = useTimeoutFn(() => {
-    inputBox.value.focused = true;
-  }, 50).start;
-
-  const onModalClose = () => {
-    inputBox.value.focused = false;
-  };
-
-  watch(modal, () => (modal.value ? onModalOpen : onModalClose)());
-
-  onStartTyping(() => {
-    inputBox.value.focused = true;
-  });
-
-  function invokeAction(action: QuickMenuAction) {
-    modal.value = false;
-    useTimeoutFn(action.action, 100).start();
-  }
-</script>
diff --git a/frontend/components/ui/alert-dialog/AlertDialog.vue b/frontend/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..035b4881
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogAction.vue b/frontend/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..722c4fcf
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogCancel.vue b/frontend/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..7ec5b6b2
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogContent.vue b/frontend/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..30ff8f45
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      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"
+    />
+    <AlertDialogContent
+      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 />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogDescription.vue b/frontend/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..4577a4d0
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogFooter.vue b/frontend/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..55d0a0eb
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogFooter.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(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogHeader.vue b/frontend/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..c61c4495
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogHeader.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="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogTitle.vue b/frontend/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..fd17cd52
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/frontend/components/ui/alert-dialog/AlertDialogTrigger.vue b/frontend/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..aabd777e
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/frontend/components/ui/alert-dialog/index.ts b/frontend/components/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..448d5198
--- /dev/null
+++ b/frontend/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/frontend/components/ui/badge/Badge.vue b/frontend/components/ui/badge/Badge.vue
new file mode 100644
index 00000000..9ed80393
--- /dev/null
+++ b/frontend/components/ui/badge/Badge.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/badge/index.ts b/frontend/components/ui/badge/index.ts
new file mode 100644
index 00000000..35e7a1a0
--- /dev/null
+++ b/frontend/components/ui/badge/index.ts
@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/frontend/components/ui/button/Button.vue b/frontend/components/ui/button/Button.vue
index 19c44c15..b330368b 100644
--- a/frontend/components/ui/button/Button.vue
+++ b/frontend/components/ui/button/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from "vue";
-  import { Primitive, type PrimitiveProps } from "radix-vue";
+  import { Primitive, type PrimitiveProps } from "reka-ui";
   import { type ButtonVariants, buttonVariants } from ".";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/button/ButtonGroup.vue b/frontend/components/ui/button/ButtonGroup.vue
new file mode 100644
index 00000000..1f41545f
--- /dev/null
+++ b/frontend/components/ui/button/ButtonGroup.vue
@@ -0,0 +1,22 @@
+<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(
+        'inline-flex rounded-lg',
+        '[&>*]:rounded-none',
+        '[&>*:first-child]:rounded-l-lg',
+        '[&>*:last-child]:rounded-r-lg',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/button/index.ts b/frontend/components/ui/button/index.ts
index 417aeb03..14ee433e 100644
--- a/frontend/components/ui/button/index.ts
+++ b/frontend/components/ui/button/index.ts
@@ -1,6 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 export { default as Button } from "./Button.vue";
+export { default as ButtonGroup } from "./ButtonGroup.vue";
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
diff --git a/frontend/components/ui/command/Command.vue b/frontend/components/ui/command/Command.vue
new file mode 100644
index 00000000..467ae019
--- /dev/null
+++ b/frontend/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/frontend/components/ui/command/CommandDialog.vue b/frontend/components/ui/command/CommandDialog.vue
new file mode 100644
index 00000000..825774ec
--- /dev/null
+++ b/frontend/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps & { dialogId: string }>();
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <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>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/frontend/components/ui/command/CommandEmpty.vue b/frontend/components/ui/command/CommandEmpty.vue
new file mode 100644
index 00000000..1908f93c
--- /dev/null
+++ b/frontend/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/frontend/components/ui/command/CommandGroup.vue b/frontend/components/ui/command/CommandGroup.vue
new file mode 100644
index 00000000..683bf592
--- /dev/null
+++ b/frontend/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/frontend/components/ui/command/CommandInput.vue b/frontend/components/ui/command/CommandInput.vue
new file mode 100644
index 00000000..2713203f
--- /dev/null
+++ b/frontend/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/frontend/components/ui/command/CommandItem.vue b/frontend/components/ui/command/CommandItem.vue
new file mode 100644
index 00000000..dd5a872d
--- /dev/null
+++ b/frontend/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/frontend/components/ui/command/CommandList.vue b/frontend/components/ui/command/CommandList.vue
new file mode 100644
index 00000000..9106b444
--- /dev/null
+++ b/frontend/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/frontend/components/ui/command/CommandSeparator.vue b/frontend/components/ui/command/CommandSeparator.vue
new file mode 100644
index 00000000..cc5f0550
--- /dev/null
+++ b/frontend/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/frontend/components/ui/command/CommandShortcut.vue b/frontend/components/ui/command/CommandShortcut.vue
new file mode 100644
index 00000000..0d4da921
--- /dev/null
+++ b/frontend/components/ui/command/CommandShortcut.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>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/frontend/components/ui/command/index.ts b/frontend/components/ui/command/index.ts
new file mode 100644
index 00000000..0e35f4b9
--- /dev/null
+++ b/frontend/components/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/frontend/components/ui/dialog-provider/DialogProvider.vue b/frontend/components/ui/dialog-provider/DialogProvider.vue
new file mode 100644
index 00000000..c7513012
--- /dev/null
+++ b/frontend/components/ui/dialog-provider/DialogProvider.vue
@@ -0,0 +1,48 @@
+<!-- DialogProvider.vue -->
+<script setup lang="ts">
+  import { ref, reactive, computed } from "vue";
+  import { provideDialogContext } from "./utils";
+
+  const activeDialog = ref<string | null>(null);
+  const activeAlerts = reactive<string[]>([]);
+
+  const openDialog = (dialogId: string) => {
+    if (activeAlerts.length > 0) return;
+    activeDialog.value = dialogId;
+  };
+
+  const closeDialog = (dialogId?: string) => {
+    if (dialogId) {
+      if (activeDialog.value === dialogId) {
+        activeDialog.value = null;
+      }
+    } else {
+      activeDialog.value = null;
+    }
+  };
+
+  const addAlert = (alertId: string) => {
+    activeAlerts.push(alertId);
+  };
+
+  const removeAlert = (alertId: string) => {
+    const index = activeAlerts.indexOf(alertId);
+    if (index !== -1) {
+      activeAlerts.splice(index, 1);
+    }
+  };
+
+  // Provide context to child components
+  provideDialogContext({
+    activeDialog: computed(() => activeDialog.value),
+    openDialog,
+    closeDialog,
+    activeAlerts: computed(() => activeAlerts),
+    addAlert,
+    removeAlert,
+  });
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/frontend/components/ui/dialog-provider/index.ts b/frontend/components/ui/dialog-provider/index.ts
new file mode 100644
index 00000000..cc9f4adb
--- /dev/null
+++ b/frontend/components/ui/dialog-provider/index.ts
@@ -0,0 +1,2 @@
+export { useDialog, useDialogHotkey } from "./utils";
+export { default as DialogProvider } from "./DialogProvider.vue";
diff --git a/frontend/components/ui/dialog-provider/utils.ts b/frontend/components/ui/dialog-provider/utils.ts
new file mode 100644
index 00000000..3309ddb2
--- /dev/null
+++ b/frontend/components/ui/dialog-provider/utils.ts
@@ -0,0 +1,56 @@
+import type { ComputedRef } from "vue";
+import { createContext } from "reka-ui";
+import { useMagicKeys, useActiveElement } from "@vueuse/core";
+
+export const [useDialog, provideDialogContext] = createContext<{
+  activeDialog: ComputedRef<string | null>;
+  activeAlerts: ComputedRef<string[]>;
+  openDialog: (dialogId: string) => void;
+  closeDialog: (dialogId?: string) => void;
+  addAlert: (alertId: string) => void;
+  removeAlert: (alertId: string) => void;
+}>("DialogProvider");
+
+export const useDialogHotkey = (
+  dialogId: string,
+  key: {
+    shift?: boolean;
+    ctrl?: boolean;
+    code: string;
+  }
+) => {
+  const { openDialog } = useDialog();
+
+  const activeElement = useActiveElement();
+
+  const notUsingInput = computed(
+    () => activeElement.value?.tagName !== "INPUT" && activeElement.value?.tagName !== "TEXTAREA"
+  );
+
+  useMagicKeys({
+    passive: false,
+    onEventFired: event => {
+      // console.log({
+      //   event,
+      //   notUsingInput: notUsingInput.value,
+      //   eventType: event.type,
+      //   keyCode: event.code,
+      //   matchingKeyCode: key.code === event.code,
+      //   shift: event.shiftKey,
+      //   matchingShift: key.shift === undefined || event.shiftKey === key.shift,
+      //   ctrl: event.ctrlKey,
+      //   matchingCtrl: key.ctrl === undefined || event.ctrlKey === key.ctrl,
+      // });
+      if (
+        notUsingInput.value &&
+        event.type === "keydown" &&
+        event.code === key.code &&
+        (key.shift === undefined || event.shiftKey === key.shift) &&
+        (key.ctrl === undefined || event.ctrlKey === key.ctrl)
+      ) {
+        openDialog(dialogId);
+        event.preventDefault();
+      }
+    },
+  });
+};
diff --git a/frontend/components/ui/dialog/Dialog.vue b/frontend/components/ui/dialog/Dialog.vue
new file mode 100644
index 00000000..a174bd05
--- /dev/null
+++ b/frontend/components/ui/dialog/Dialog.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "reka-ui";
+  import { useDialog } from "../dialog-provider/utils";
+
+  const props = defineProps<DialogRootProps & { dialogId: string }>();
+  const emits = defineEmits<DialogRootEmits>();
+
+  const { closeDialog, activeDialog } = useDialog();
+
+  const isOpen = computed(() => activeDialog.value === props.dialogId);
+  const onOpenChange = (open: boolean) => {
+    if (!open) closeDialog(props.dialogId);
+  };
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded" :open="isOpen" @update:open="onOpenChange">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/frontend/components/ui/dialog/DialogClose.vue b/frontend/components/ui/dialog/DialogClose.vue
new file mode 100644
index 00000000..ba036b51
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/frontend/components/ui/dialog/DialogContent.vue b/frontend/components/ui/dialog/DialogContent.vue
new file mode 100644
index 00000000..be00c5e6
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,50 @@
+<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'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <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"
+    />
+    <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
+        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"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/frontend/components/ui/dialog/DialogDescription.vue b/frontend/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 00000000..5afbab04
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/frontend/components/ui/dialog/DialogFooter.vue b/frontend/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 00000000..ac2d0c18
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<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-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/dialog/DialogHeader.vue b/frontend/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 00000000..b2c9085d
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogHeader.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="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/dialog/DialogScrollContent.vue b/frontend/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 00000000..c1caf2be
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<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'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto 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"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event: CustomEvent<{ originalEvent: PointerEvent }>) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/frontend/components/ui/dialog/DialogTitle.vue b/frontend/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 00000000..30cbb368
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/frontend/components/ui/dialog/DialogTrigger.vue b/frontend/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..2984f371
--- /dev/null
+++ b/frontend/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/frontend/components/ui/dialog/index.ts b/frontend/components/ui/dialog/index.ts
new file mode 100644
index 00000000..ca8cfeae
--- /dev/null
+++ b/frontend/components/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/frontend/components/ui/drawer/Drawer.vue b/frontend/components/ui/drawer/Drawer.vue
new file mode 100644
index 00000000..a30a01e6
--- /dev/null
+++ b/frontend/components/ui/drawer/Drawer.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+  import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+  import { useForwardPropsEmits } from "reka-ui";
+  import { DrawerRoot } from "vaul-vue";
+  import { useDialog } from "../dialog-provider/utils";
+
+  const props = withDefaults(defineProps<DrawerRootProps & { dialogId: string }>(), {
+    shouldScaleBackground: true,
+  }) as DrawerRootProps & { dialogId: string };
+
+  const emits = defineEmits<DrawerRootEmits>();
+
+  const { closeDialog, activeDialog } = useDialog();
+
+  const isOpen = computed(() => activeDialog.value === props.dialogId);
+  const onOpenChange = (open: boolean) => {
+    if (!open) closeDialog(props.dialogId);
+  };
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded" :open="isOpen" @update:open="onOpenChange">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/frontend/components/ui/drawer/DrawerContent.vue b/frontend/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 00000000..618df111
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useForwardPropsEmits } from 'reka-ui'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/frontend/components/ui/drawer/DrawerDescription.vue b/frontend/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 00000000..092dc503
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue'
+import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/frontend/components/ui/drawer/DrawerFooter.vue b/frontend/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 00000000..1eb35278
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/drawer/DrawerHeader.vue b/frontend/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 00000000..ecef7a67
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/components/ui/drawer/DrawerOverlay.vue b/frontend/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 00000000..f9307b71
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/frontend/components/ui/drawer/DrawerTitle.vue b/frontend/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 00000000..475c3ab4
--- /dev/null
+++ b/frontend/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue'
+import { cn } from '@/lib/utils'
+import { DrawerTitle } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
+
+const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/frontend/components/ui/drawer/index.ts b/frontend/components/ui/drawer/index.ts
new file mode 100644
index 00000000..d41b7928
--- /dev/null
+++ b/frontend/components/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerContent } from './DrawerContent.vue'
+export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenu.vue b/frontend/components/ui/dropdown-menu/DropdownMenu.vue
index 3e142aaf..f9adc74b 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenu.vue
@@ -4,7 +4,7 @@
     type DropdownMenuRootEmits,
     type DropdownMenuRootProps,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
 
   const props = defineProps<DropdownMenuRootProps>();
   const emits = defineEmits<DropdownMenuRootEmits>();
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/frontend/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index d992ec1f..dad68f98 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -6,7 +6,7 @@
     type DropdownMenuCheckboxItemProps,
     DropdownMenuItemIndicator,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuContent.vue b/frontend/components/ui/dropdown-menu/DropdownMenuContent.vue
index d7006d0e..c99785c9 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -5,7 +5,7 @@
     type DropdownMenuContentProps,
     DropdownMenuPortal,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuGroup.vue b/frontend/components/ui/dropdown-menu/DropdownMenuGroup.vue
index 84f14944..7c1f0df3 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue";
+  import { DropdownMenuGroup, type DropdownMenuGroupProps } from "reka-ui";
 
   const props = defineProps<DropdownMenuGroupProps>();
 </script>
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuItem.vue b/frontend/components/ui/dropdown-menu/DropdownMenuItem.vue
index 20d29de9..28c60bc4 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "radix-vue";
+  import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuLabel.vue b/frontend/components/ui/dropdown-menu/DropdownMenuLabel.vue
index 36395dbe..df723eb1 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "radix-vue";
+  import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/frontend/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 53431664..eebb469e 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@
     type DropdownMenuRadioGroupEmits,
     type DropdownMenuRadioGroupProps,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
 
   const props = defineProps<DropdownMenuRadioGroupProps>();
   const emits = defineEmits<DropdownMenuRadioGroupEmits>();
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/frontend/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 6773afa6..66243135 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -6,7 +6,7 @@
     type DropdownMenuRadioItemEmits,
     type DropdownMenuRadioItemProps,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 9af4283d..195987bb 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "radix-vue";
+  import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuSub.vue b/frontend/components/ui/dropdown-menu/DropdownMenuSub.vue
index 12f101ad..2efa61a4 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@
     type DropdownMenuSubEmits,
     type DropdownMenuSubProps,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
 
   const props = defineProps<DropdownMenuSubProps>();
   const emits = defineEmits<DropdownMenuSubEmits>();
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/frontend/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index ec102f90..95ce993f 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -4,7 +4,7 @@
     type DropdownMenuSubContentEmits,
     type DropdownMenuSubContentProps,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/frontend/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index a060311a..0aef2f6b 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { ChevronRight } from "lucide-vue-next";
-  import { DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, useForwardProps } from "radix-vue";
+  import { DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, useForwardProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index bb0df557..022b74cd 100644
--- a/frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from "radix-vue";
+  import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from "reka-ui";
 
   const props = defineProps<DropdownMenuTriggerProps>();
 
diff --git a/frontend/components/ui/dropdown-menu/index.ts b/frontend/components/ui/dropdown-menu/index.ts
index 40938d73..9e57848a 100644
--- a/frontend/components/ui/dropdown-menu/index.ts
+++ b/frontend/components/ui/dropdown-menu/index.ts
@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
 export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
 export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
 export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { DropdownMenuPortal } from "radix-vue";
+export { DropdownMenuPortal } from "reka-ui";
diff --git a/frontend/components/ui/input/Input.vue b/frontend/components/ui/input/Input.vue
index f4569c65..ea452931 100644
--- a/frontend/components/ui/input/Input.vue
+++ b/frontend/components/ui/input/Input.vue
@@ -24,7 +24,7 @@
     v-model="modelValue"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-muted-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "
diff --git a/frontend/components/ui/label/Label.vue b/frontend/components/ui/label/Label.vue
new file mode 100644
index 00000000..b4991db9
--- /dev/null
+++ b/frontend/components/ui/label/Label.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/components/ui/label/index.ts b/frontend/components/ui/label/index.ts
new file mode 100644
index 00000000..572c2f01
--- /dev/null
+++ b/frontend/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/frontend/components/ui/popover/Popover.vue b/frontend/components/ui/popover/Popover.vue
new file mode 100644
index 00000000..72e0b5fa
--- /dev/null
+++ b/frontend/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/frontend/components/ui/popover/PopoverContent.vue b/frontend/components/ui/popover/PopoverContent.vue
new file mode 100644
index 00000000..9e6c2882
--- /dev/null
+++ b/frontend/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/frontend/components/ui/popover/PopoverTrigger.vue b/frontend/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 00000000..ac265950
--- /dev/null
+++ b/frontend/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/frontend/components/ui/popover/index.ts b/frontend/components/ui/popover/index.ts
new file mode 100644
index 00000000..c621f9b1
--- /dev/null
+++ b/frontend/components/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/frontend/components/ui/separator/Separator.vue b/frontend/components/ui/separator/Separator.vue
index 62fd094e..0fc01413 100644
--- a/frontend/components/ui/separator/Separator.vue
+++ b/frontend/components/ui/separator/Separator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Separator, type SeparatorProps } from "radix-vue";
+  import { Separator, type SeparatorProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/sheet/Sheet.vue b/frontend/components/ui/sheet/Sheet.vue
index 94597889..4be847b3 100644
--- a/frontend/components/ui/sheet/Sheet.vue
+++ b/frontend/components/ui/sheet/Sheet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "radix-vue";
+  import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "reka-ui";
 
   const props = defineProps<DialogRootProps>();
   const emits = defineEmits<DialogRootEmits>();
diff --git a/frontend/components/ui/sheet/SheetClose.vue b/frontend/components/ui/sheet/SheetClose.vue
index a553a6b4..3e51e73f 100644
--- a/frontend/components/ui/sheet/SheetClose.vue
+++ b/frontend/components/ui/sheet/SheetClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogClose, type DialogCloseProps } from "radix-vue";
+  import { DialogClose, type DialogCloseProps } from "reka-ui";
 
   const props = defineProps<DialogCloseProps>();
 </script>
diff --git a/frontend/components/ui/sheet/SheetContent.vue b/frontend/components/ui/sheet/SheetContent.vue
index 74314684..5ee4992b 100644
--- a/frontend/components/ui/sheet/SheetContent.vue
+++ b/frontend/components/ui/sheet/SheetContent.vue
@@ -8,7 +8,7 @@
     DialogOverlay,
     DialogPortal,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { type SheetVariants, sheetVariants } from ".";
   import { cn } from "@/lib/utils";
@@ -38,7 +38,7 @@
 <template>
   <DialogPortal>
     <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="fixed inset-0 z-40 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"
     />
     <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
       <slot />
diff --git a/frontend/components/ui/sheet/SheetDescription.vue b/frontend/components/ui/sheet/SheetDescription.vue
index f60bc6a4..9e86a3e5 100644
--- a/frontend/components/ui/sheet/SheetDescription.vue
+++ b/frontend/components/ui/sheet/SheetDescription.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogDescription, type DialogDescriptionProps } from "radix-vue";
+  import { DialogDescription, type DialogDescriptionProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/sheet/SheetTitle.vue b/frontend/components/ui/sheet/SheetTitle.vue
index 77154db7..922e968a 100644
--- a/frontend/components/ui/sheet/SheetTitle.vue
+++ b/frontend/components/ui/sheet/SheetTitle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogTitle, type DialogTitleProps } from "radix-vue";
+  import { DialogTitle, type DialogTitleProps } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/sheet/SheetTrigger.vue b/frontend/components/ui/sheet/SheetTrigger.vue
index c1812bdb..11433fdd 100644
--- a/frontend/components/ui/sheet/SheetTrigger.vue
+++ b/frontend/components/ui/sheet/SheetTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+  import { DialogTrigger, type DialogTriggerProps } from "reka-ui";
 
   const props = defineProps<DialogTriggerProps>();
 </script>
diff --git a/frontend/components/ui/shortcut/Shortcut.vue b/frontend/components/ui/shortcut/Shortcut.vue
new file mode 100644
index 00000000..3087da13
--- /dev/null
+++ b/frontend/components/ui/shortcut/Shortcut.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  keys: string[];
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}>();
+
+const sizeClasses = computed(() => {
+  return {
+    sm: 'px-1 py-0.5 text-xs',
+    md: 'px-1.5 py-0.5 text-sm',
+    lg: 'px-2 py-1 text-base',
+  }[props.size ?? 'md'];
+});
+</script>
+
+<template>
+  <kbd
+    :class="[
+      'inline-flex items-center gap-0.5 rounded-md bg-background shadow-sm ring-1 ring-gray-200',
+      sizeClasses,
+      className,
+    ]"
+  >
+    <span
+      v-for="(key, index) in keys"
+      :key="index"
+      class="font-medium text-muted-foreground font-sans"
+    >
+      {{ key }}
+    </span>
+  </kbd>
+</template>
diff --git a/frontend/components/ui/shortcut/index.ts b/frontend/components/ui/shortcut/index.ts
new file mode 100644
index 00000000..f2557e1e
--- /dev/null
+++ b/frontend/components/ui/shortcut/index.ts
@@ -0,0 +1 @@
+export { default as Shortcut } from './Shortcut.vue'
diff --git a/frontend/components/ui/sidebar/Sidebar.vue b/frontend/components/ui/sidebar/Sidebar.vue
index 91a237d1..a35d170e 100644
--- a/frontend/components/ui/sidebar/Sidebar.vue
+++ b/frontend/components/ui/sidebar/Sidebar.vue
@@ -31,7 +31,7 @@
       data-sidebar="sidebar"
       data-mobile="true"
       :side="side"
-      class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+      class="bg-sidebar text-sidebar-foreground z-40 w-[--sidebar-width] p-0 [&>button]:hidden"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"
diff --git a/frontend/components/ui/sidebar/SidebarGroupAction.vue b/frontend/components/ui/sidebar/SidebarGroupAction.vue
index 419ee1ad..29ce1a7f 100644
--- a/frontend/components/ui/sidebar/SidebarGroupAction.vue
+++ b/frontend/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import type { PrimitiveProps } from "radix-vue";
+  import type { PrimitiveProps } from "reka-ui";
   import type { HTMLAttributes } from "vue";
-  import { Primitive } from "radix-vue";
+  import { Primitive } from "reka-ui";
   import { cn } from "@/lib/utils";
 
   const props = defineProps<
diff --git a/frontend/components/ui/sidebar/SidebarGroupLabel.vue b/frontend/components/ui/sidebar/SidebarGroupLabel.vue
index d4df27a2..08f37869 100644
--- a/frontend/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/frontend/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import type { PrimitiveProps } from "radix-vue";
+  import type { PrimitiveProps } from "reka-ui";
   import type { HTMLAttributes } from "vue";
-  import { Primitive } from "radix-vue";
+  import { Primitive } from "reka-ui";
   import { cn } from "@/lib/utils";
 
   const props = defineProps<
diff --git a/frontend/components/ui/sidebar/SidebarMenuAction.vue b/frontend/components/ui/sidebar/SidebarMenuAction.vue
index 464ded1d..6bc17b5c 100644
--- a/frontend/components/ui/sidebar/SidebarMenuAction.vue
+++ b/frontend/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from "vue";
-  import { Primitive, type PrimitiveProps } from "radix-vue";
+  import { Primitive, type PrimitiveProps } from "reka-ui";
   import { cn } from "@/lib/utils";
 
   const props = withDefaults(
diff --git a/frontend/components/ui/sidebar/SidebarMenuButtonChild.vue b/frontend/components/ui/sidebar/SidebarMenuButtonChild.vue
index 41a2418e..a1dd2079 100644
--- a/frontend/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/frontend/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from "vue";
-  import { Primitive, type PrimitiveProps } from "radix-vue";
+  import { Primitive, type PrimitiveProps } from "reka-ui";
   import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from ".";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/sidebar/SidebarMenuLink.vue b/frontend/components/ui/sidebar/SidebarMenuLink.vue
index e34c55b4..c4fbbf6f 100644
--- a/frontend/components/ui/sidebar/SidebarMenuLink.vue
+++ b/frontend/components/ui/sidebar/SidebarMenuLink.vue
@@ -11,7 +11,7 @@
 
 <template>
   <SidebarMenuButton as-child>
-    <NuxtLink :to="props.href" @click.prevent="setOpenMobile(false)">
+    <NuxtLink :to="props.href" @click="setOpenMobile(false)">
       <slot />
     </NuxtLink>
   </SidebarMenuButton>
diff --git a/frontend/components/ui/sidebar/SidebarMenuSubButton.vue b/frontend/components/ui/sidebar/SidebarMenuSubButton.vue
index 8910c686..3dc9c664 100644
--- a/frontend/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/frontend/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import type { PrimitiveProps } from "radix-vue";
+  import type { PrimitiveProps } from "reka-ui";
   import type { HTMLAttributes } from "vue";
-  import { Primitive } from "radix-vue";
+  import { Primitive } from "reka-ui";
   import { cn } from "@/lib/utils";
 
   const props = withDefaults(
diff --git a/frontend/components/ui/sidebar/SidebarProvider.vue b/frontend/components/ui/sidebar/SidebarProvider.vue
index 0840fd0f..14b57af9 100644
--- a/frontend/components/ui/sidebar/SidebarProvider.vue
+++ b/frontend/components/ui/sidebar/SidebarProvider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
-  import { TooltipProvider } from "radix-vue";
+  import { TooltipProvider } from "reka-ui";
   import { computed, type HTMLAttributes, type Ref, ref } from "vue";
   import {
     provideSidebarContext,
diff --git a/frontend/components/ui/sidebar/utils.ts b/frontend/components/ui/sidebar/utils.ts
index 81020260..10ce564d 100644
--- a/frontend/components/ui/sidebar/utils.ts
+++ b/frontend/components/ui/sidebar/utils.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from "vue";
-import { createContext } from "radix-vue";
+import { createContext } from "reka-ui";
 
 export const SIDEBAR_COOKIE_NAME = "sidebar:state";
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
diff --git a/frontend/components/ui/sonner/Sonner.vue b/frontend/components/ui/sonner/Sonner.vue
new file mode 100644
index 00000000..4394db34
--- /dev/null
+++ b/frontend/components/ui/sonner/Sonner.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <!-- TODO: once daisyui is removed, remove shadcn- prefix -->
+  <Sonner
+    class="shadcn-toaster group"
+    v-bind="props"
+    rich-colors
+    visible-toasts="10"
+    :toast-options="{
+      classes: {
+        toast: 'group shadcn-toast group-[.shadcn-toaster]:bg-background group-[.shadcn-toaster]:text-foreground group-[.shadcn-toaster]:border-border group-[.shadcn-toaster]:shadow-lg',
+        description: 'group-[.shadcn-toast]:text-muted-foreground',
+        actionButton:
+          'group-[.shadcn-toast]:bg-primary group-[.shadcn-toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.shadcn-toast]:bg-muted group-[.shadcn-toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>
diff --git a/frontend/components/ui/sonner/index.ts b/frontend/components/ui/sonner/index.ts
new file mode 100644
index 00000000..98dd0bbe
--- /dev/null
+++ b/frontend/components/ui/sonner/index.ts
@@ -0,0 +1,2 @@
+export { default as Toaster } from './Sonner.vue'
+export { toast } from './toast'
\ No newline at end of file
diff --git a/frontend/components/ui/sonner/toast.ts b/frontend/components/ui/sonner/toast.ts
new file mode 100644
index 00000000..7a965dcf
--- /dev/null
+++ b/frontend/components/ui/sonner/toast.ts
@@ -0,0 +1,20 @@
+import { toast as internalToast } from "vue-sonner";
+
+// triggering too many toasts at once can cause the toaster to not render properly https://github.com/xiaoluoboding/vue-sonner/issues/98
+
+const wrapToast = <T extends (...args: any[]) => any>(fn: T): ((...args: Parameters<T>) => Promise<ReturnType<T>>) => {
+  return (...args: Parameters<T>) =>
+    new Promise(resolve => {
+      setTimeout(() => resolve(fn(...args)), 0);
+    });
+};
+
+const toast = (...args: Parameters<typeof internalToast>) => internalToast(...args);
+
+toast.success = wrapToast(internalToast.success);
+toast.info = wrapToast(internalToast.info);
+toast.warning = wrapToast(internalToast.warning);
+toast.error = wrapToast(internalToast.error);
+toast.message = wrapToast(internalToast.message);
+
+export { toast };
diff --git a/frontend/components/ui/tags-input/TagsInput.vue b/frontend/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..879e6a1d
--- /dev/null
+++ b/frontend/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/frontend/components/ui/tags-input/TagsInputInput.vue b/frontend/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..66841ffc
--- /dev/null
+++ b/frontend/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/frontend/components/ui/tags-input/TagsInputItem.vue b/frontend/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..06656575
--- /dev/null
+++ b/frontend/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/frontend/components/ui/tags-input/TagsInputItemDelete.vue b/frontend/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..be8aa4d3
--- /dev/null
+++ b/frontend/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/frontend/components/ui/tags-input/TagsInputItemText.vue b/frontend/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..7814df88
--- /dev/null
+++ b/frontend/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/frontend/components/ui/tags-input/index.ts b/frontend/components/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/frontend/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/frontend/components/ui/textarea/Textarea.vue b/frontend/components/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..e4a7c139
--- /dev/null
+++ b/frontend/components/ui/textarea/Textarea.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const {textarea} = useTextareaAutosize()
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+  autosize?: boolean
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-if="!props.autosize" v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+   <div v-else :class="cn('flex w-full rounded-md border border-input', props.class)">
+    <textarea ref="textarea" v-model="modelValue" class="w-full min-h-20 resize-none w-full rounded-md border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" />
+   </div>
+</template>
diff --git a/frontend/components/ui/textarea/index.ts b/frontend/components/ui/textarea/index.ts
new file mode 100644
index 00000000..6a7ab2a7
--- /dev/null
+++ b/frontend/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/frontend/components/ui/tooltip/Tooltip.vue b/frontend/components/ui/tooltip/Tooltip.vue
index 319c04a7..6c219b78 100644
--- a/frontend/components/ui/tooltip/Tooltip.vue
+++ b/frontend/components/ui/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from "radix-vue";
+  import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from "reka-ui";
 
   const props = defineProps<TooltipRootProps>();
   const emits = defineEmits<TooltipRootEmits>();
diff --git a/frontend/components/ui/tooltip/TooltipContent.vue b/frontend/components/ui/tooltip/TooltipContent.vue
index 07b274d9..1e7327cd 100644
--- a/frontend/components/ui/tooltip/TooltipContent.vue
+++ b/frontend/components/ui/tooltip/TooltipContent.vue
@@ -5,7 +5,7 @@
     type TooltipContentProps,
     TooltipPortal,
     useForwardPropsEmits,
-  } from "radix-vue";
+  } from "reka-ui";
   import { computed, type HTMLAttributes } from "vue";
   import { cn } from "@/lib/utils";
 
diff --git a/frontend/components/ui/tooltip/TooltipProvider.vue b/frontend/components/ui/tooltip/TooltipProvider.vue
index 9b66f43d..a99b5ca5 100644
--- a/frontend/components/ui/tooltip/TooltipProvider.vue
+++ b/frontend/components/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipProvider, type TooltipProviderProps } from "radix-vue";
+  import { TooltipProvider, type TooltipProviderProps } from "reka-ui";
 
   const props = defineProps<TooltipProviderProps>();
 </script>
diff --git a/frontend/components/ui/tooltip/TooltipTrigger.vue b/frontend/components/ui/tooltip/TooltipTrigger.vue
index 21ba4ed9..8b7edcba 100644
--- a/frontend/components/ui/tooltip/TooltipTrigger.vue
+++ b/frontend/components/ui/tooltip/TooltipTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue";
+  import { TooltipTrigger, type TooltipTriggerProps } from "reka-ui";
 
   const props = defineProps<TooltipTriggerProps>();
 </script>
diff --git a/frontend/composables/use-ids.ts b/frontend/composables/use-ids.ts
deleted file mode 100755
index 98b896a8..00000000
--- a/frontend/composables/use-ids.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-function slugify(text: string) {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w-]+/g, "") // Remove all non-word chars
-    .replace(/--+/g, "-") // Replace multiple - with single -
-    .replace(/^-+/, "") // Trim - from start of text
-    .replace(/-+$/, ""); // Trim - from end of text
-}
-
-function idGenerator(): string {
-  const id = Math.random().toString(32).substring(2, 6) + Math.random().toString(36).substring(2, 6);
-  return slugify(id);
-}
-
-/**
- * useFormIds uses the provided label to generate a unique id for the
- * form element. If no label is provided the id is generated using a
- * random string.
- */
-export function useFormIds(label: string): string {
-  const slug = label ? slugify(label) : idGenerator();
-  return `${slug}-${idGenerator()}`;
-}
-
-export function useId(): string {
-  return idGenerator();
-}
diff --git a/frontend/composables/use-notifier.ts b/frontend/composables/use-notifier.ts
deleted file mode 100644
index 37243dac..00000000
--- a/frontend/composables/use-notifier.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useId } from "./use-ids";
-
-interface Notification {
-  id: string;
-  message: string;
-  type: "success" | "error" | "info";
-}
-
-const notifications = ref<Notification[]>([]);
-
-function addNotification(notification: Notification) {
-  notifications.value.unshift(notification);
-
-  if (notifications.value.length > 4) {
-    notifications.value.pop();
-  } else {
-    setTimeout(() => {
-      // Remove notification with ID
-      notifications.value = notifications.value.filter(n => n.id !== notification.id);
-    }, 5000);
-  }
-}
-
-export function useNotifications() {
-  return {
-    notifications,
-    dropNotification: (idx: number) => notifications.value.splice(idx, 1),
-  };
-}
-
-export function useNotifier() {
-  return {
-    success: (message: string) => {
-      addNotification({
-        id: useId(),
-        message,
-        type: "success",
-      });
-    },
-    error: (message: string) => {
-      addNotification({
-        id: useId(),
-        message,
-        type: "error",
-      });
-    },
-    info: (message: string) => {
-      addNotification({
-        id: useId(),
-        message,
-        type: "info",
-      });
-    },
-  };
-}
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 8f452d37..5fcf4899 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -4,15 +4,14 @@
     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 />
-    <AppOutdatedModal v-model="modals.outdated" :current="current ?? ''" :latest="latest ?? ''" />
-    <ItemCreateModal v-model="modals.item" />
-    <LabelCreateModal v-model="modals.label" />
-    <LocationCreateModal v-model="modals.location" />
-    <QuickMenuModal v-model="modals.quickMenu" :actions="quickMenuActions" />
-    <AppToast />
-    <SidebarProvider>
+    <AppOutdatedModal v-if="status" :status="status" />
+    <ItemCreateModal />
+    <LabelCreateModal />
+    <LocationCreateModal />
+    <AppQuickMenuModal :actions="quickMenuActions" />
+    <SidebarProvider :default-open="sidebarState">
       <Sidebar collapsible="icon">
         <SidebarHeader class="items-center bg-base-200">
           <SidebarGroupLabel class="text-base">{{ $t("global.welcome", { username: username }) }}</SidebarGroupLabel>
@@ -34,17 +33,19 @@
                 </span>
               </SidebarMenuButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent class="min-w-[var(--radix-dropdown-menu-trigger-width)]">
+            <DropdownMenuContent class="min-w-[var(--reka-dropdown-menu-trigger-width)]">
               <DropdownMenuItem
                 v-for="btn in dropdown"
                 :key="btn.id"
                 class="group cursor-pointer text-lg"
-                @click="btn.action"
+                @click="openDialog(btn.dialogId)"
               >
                 {{ btn.name.value }}
-                <kbd v-if="btn.shortcut" class="kbd kbd-sm ml-auto hidden text-primary group-hover:inline">{{
-                  btn.shortcut.replaceAll("Shift+", "⇧")
-                }}</kbd>
+                <Shortcut
+                  v-if="btn.shortcut"
+                  class="ml-auto hidden group-hover:inline"
+                  :keys="btn.shortcut.replace('Shift', '⇧').split('+')"
+                />
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -67,8 +68,8 @@
                   <span>{{ n.name.value }}</span>
                 </SidebarMenuLink>
               </SidebarMenuItem>
-            </SidebarMenu></SidebarGroup
-          >
+            </SidebarMenu>
+          </SidebarGroup>
         </SidebarContent>
 
         <SidebarFooter class="bg-base-200">
@@ -123,7 +124,6 @@
 
 <script lang="ts" setup>
   import { useI18n } from "vue-i18n";
-  import { lt } from "semver";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
 
@@ -158,12 +158,22 @@
     DropdownMenuItem,
     DropdownMenuTrigger,
   } from "@/components/ui/dropdown-menu";
+  import { Shortcut } from "~/components/ui/shortcut";
+  import { useDialog } from "~/components/ui/dialog-provider";
 
   const { t, locale } = useI18n();
   const username = computed(() => authCtx.user?.name || "User");
 
+  const { openDialog } = useDialog();
+
   const preferences = useViewPreferences();
 
+  // get sidebar state from cookies
+  const sidebarState = useCookie("sidebar:state", {
+    readonly: true,
+    decode: value => value !== "false",
+  });
+
   const pubApi = usePublicApi();
   const { data: status } = useAsyncData(async () => {
     const { data } = await pubApi.status();
@@ -171,82 +181,30 @@
     return data;
   });
 
-  const latest = computed(() => status.value?.latest.version);
-  const current = computed(() => status.value?.build.version);
-
-  const isDev = computed(() => import.meta.dev || !current.value?.includes("."));
-  const isOutdated = computed(() => current.value && latest.value && lt(current.value, latest.value));
-  const hasHiddenLatest = computed(() => localStorage.getItem("latestVersion") === latest.value);
-
-  const displayOutdatedWarning = computed(() => Boolean(!isDev.value && !hasHiddenLatest.value && isOutdated.value));
-
-  const activeElement = useActiveElement();
-  const keys = useMagicKeys({
-    aliasMap: {
-      "⌃": "control_",
-      "Shift+": "ShiftLeft_",
-      "1": "digit1",
-      "2": "digit2",
-      "3": "digit3",
-    },
-  });
-
   // Preload currency format
   useFormatCurrency();
-  const modals = reactive({
-    item: false,
-    location: false,
-    label: false,
-    import: false,
-    outdated: displayOutdatedWarning.value,
-    quickMenu: false,
-  });
-
-  watch(displayOutdatedWarning, () => {
-    console.log("displayOutdatedWarning", displayOutdatedWarning.value);
-    if (displayOutdatedWarning.value) {
-      modals.outdated = true;
-    }
-  });
 
   const dropdown = [
     {
       id: 0,
       name: computed(() => t("menu.create_item")),
       shortcut: "Shift+1",
-      action: () => {
-        modals.item = true;
-      },
+      dialogId: "create-item",
     },
     {
       id: 1,
       name: computed(() => t("menu.create_location")),
       shortcut: "Shift+2",
-      action: () => {
-        modals.location = true;
-      },
+      dialogId: "create-location",
     },
     {
       id: 2,
       name: computed(() => t("menu.create_label")),
       shortcut: "Shift+3",
-      action: () => {
-        modals.label = true;
-      },
+      dialogId: "create-label",
     },
   ];
 
-  dropdown.forEach(option => {
-    if (option?.shortcut) {
-      const shortcutKeycode = option.shortcut.replace(/([0-9])/, "digit$&");
-      whenever(keys[shortcutKeycode], () => {
-        if (activeElement.value?.tagName !== "INPUT") {
-          option.action();
-        }
-      });
-    }
-  });
-
   const route = useRoute();
 
   const nav = [
@@ -280,71 +238,40 @@
     },
     {
       icon: MdiWrench,
-      id: 3,
+      id: 4,
       active: computed(() => route.path === "/maintenance"),
       name: computed(() => t("menu.maintenance")),
       to: "/maintenance",
     },
     {
       icon: MdiAccount,
-      id: 4,
+      id: 5,
       active: computed(() => route.path === "/profile"),
       name: computed(() => t("menu.profile")),
       to: "/profile",
     },
     {
       icon: MdiCog,
-      id: 5,
+      id: 6,
       active: computed(() => route.path === "/tools"),
       name: computed(() => t("menu.tools")),
       to: "/tools",
     },
   ];
 
-  const quickMenuShortcut = keys.control_Backquote;
-  whenever(quickMenuShortcut, () => {
-    modals.quickMenu = true;
-    modals.item = false;
-    modals.location = false;
-    modals.label = false;
-    modals.import = false;
-  });
-
-  const quickMenuActions = reactive(
-    [
-      {
-        text: computed(() => `${t("global.create")}: ${t("menu.create_item")}`),
-        action: () => {
-          modals.item = true;
-        },
-        shortcut: "1",
-      },
-      {
-        text: computed(() => `${t("global.create")}: ${t("menu.create_location")}`),
-        action: () => {
-          modals.location = true;
-        },
-        shortcut: "2",
-      },
-      {
-        text: computed(() => `${t("global.create")}: ${t("menu.create_label")}`),
-        action: () => {
-          modals.label = true;
-        },
-        shortcut: "3",
-      },
-    ].concat(
-      nav.map(v => {
-        return {
-          text: computed(() => `${t("global.navigate")}: ${v.name.value}`),
-          action: () => {
-            navigateTo(v.to);
-          },
-          shortcut: "",
-        };
-      })
-    )
-  );
+  const quickMenuActions = reactive([
+    ...dropdown.map(v => ({
+      text: computed(() => v.name.value),
+      dialogId: v.dialogId,
+      shortcut: v.shortcut.split("+")[1],
+      type: "create" as const,
+    })),
+    ...nav.map(v => ({
+      text: computed(() => v.name.value),
+      href: v.to,
+      type: "navigate" as const,
+    })),
+  ]);
 
   const labelStore = useLabelStore();
 
diff --git a/frontend/layouts/empty.vue b/frontend/layouts/empty.vue
index a263ec66..dbf13790 100644
--- a/frontend/layouts/empty.vue
+++ b/frontend/layouts/empty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 <template>
   <div>
-    <AppToast />
+    <Toaster />
     <slot />
   </div>
 </template>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 48209315..f6d362a2 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -65,7 +65,8 @@
             "create_modal": {
                 "item_description": "Item Description",
                 "item_name": "Item Name",
-                "photo_button": "Photo 📷",
+                "item_photo": "Item Photo 📷",
+                "upload_photos": "Upload Photos",
                 "title": "Create Item"
             },
             "view": {
@@ -86,6 +87,9 @@
                 "label_description": "Label Description",
                 "label_name": "Label Name",
                 "title": "Create Label"
+            },
+            "selector": {
+                "select_labels": "Select Labels"
             }
         },
         "location": {
@@ -95,19 +99,24 @@
                 "title": "Create Location"
             },
             "selector": {
-                "parent_location": "Parent Location"
+                "parent_location": "Parent Location",
+                "no_location_found": "No location found",
+                "search_location": "Search Locations",
+                "select_location": "Select a Location"
             },
             "tree": {
                 "no_locations": "No locations available. Add new locations through the\n `<`span class=\"link-primary\"`>`Create`<`/span`>` button on the navigation bar."
             }
         },
         "quick_menu": {
-            "shortcut_hint": "Use the number keys to quickly select an action."
+            "shortcut_hint": "Use the number keys to quickly select an action.",
+            "no_results": "No results found."
         }
     },
     "global": {
         "add": "Add",
         "build": "Build: { build }",
+        "cancel": "Cancel",
         "confirm": "Confirm",
         "create": "Create",
         "create_and_add": "Create and Add Another",
diff --git a/frontend/package.json b/frontend/package.json
index 72b564d1..b7acd483 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -61,6 +61,7 @@
     "daisyui": "^2.52.0",
     "date-fns": "^3.6.0",
     "dompurify": "^3.2.4",
+    "fuzzysort": "^3.1.0",
     "h3": "^1.15.1",
     "http-proxy": "^1.18.1",
     "lucide-vue-next": "^0.474.0",
@@ -68,12 +69,14 @@
     "markdown-it": "^14.1.0",
     "pinia": "^2.3.1",
     "postcss": "^8.5.3",
-    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.2.0",
     "semver": "^7.7.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
+    "vaul-vue": "^0.4.1",
     "vue": "3.4.8",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^1.3.0"
   }
 }
diff --git a/frontend/pages/assets/[id].vue b/frontend/pages/assets/[id].vue
index 355f886e..633e351b 100644
--- a/frontend/pages/assets/[id].vue
+++ b/frontend/pages/assets/[id].vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
+
   definePageMeta({
     middleware: ["auth"],
   });
 
   const route = useRoute();
   const api = useUserApi();
-  const toast = useNotifier();
 
   const assetId = computed<string>(() => route.params.id as string);
 
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index df9155dd..dc15e54f 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import MdiGithub from "~icons/mdi/github";
   import MdiDiscord from "~icons/mdi/discord";
   import MdiFolder from "~icons/mdi/folder";
@@ -28,7 +29,6 @@
   const ctx = useAuthContext();
 
   const api = usePublicApi();
-  const toast = useNotifier();
 
   const { data: status } = useAsyncData(async () => {
     const { data } = await api.status();
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 248140b1..cb8f592e 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import type { AnyDetail, Detail, Details } from "~~/components/global/DetailsSection/types";
   import { filterZeroValues } from "~~/components/global/DetailsSection/types";
   import type { ItemAttachment } from "~~/lib/api/types/data-contracts";
@@ -14,7 +15,6 @@
 
   const route = useRoute();
   const api = useUserApi();
-  const toast = useNotifier();
 
   const itemId = computed<string>(() => route.params.id as string);
   const preferences = useViewPreferences();
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index 52642667..7eb7e6e9 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import type { ItemAttachment, ItemField, ItemOut, ItemUpdate } from "~~/lib/api/types/data-contracts";
   import { AttachmentTypes } from "~~/lib/api/types/non-generated";
   import { useLabelStore } from "~~/stores/labels";
@@ -15,7 +16,6 @@
 
   const route = useRoute();
   const api = useUserApi();
-  const toast = useNotifier();
   const preferences = useViewPreferences();
 
   const itemId = computed<string>(() => route.params.id as string);
@@ -80,6 +80,7 @@
       labelIds: data.labels.map(l => l.id),
       locationId: data.location!.id,
       name: data.name,
+      assetId: data.assetId,
     });
 
     if (updateError) {
@@ -587,7 +588,10 @@
             <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">
-            <LocationSelector v-model="item.location" @update:model-value="informAboutDesyncingLocationFromParent()" />
+            <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"
@@ -657,7 +661,7 @@
             <div
               v-for="(field, idx) in item.fields"
               :key="`field-${idx}`"
-              class="grid grid-cols-2 gap-2 md:grid-cols-4"
+              class="grid grid-cols-2 gap-2 pt-4 md:grid-cols-4"
             >
               <!-- <FormSelect v-model:value="field.type" label="Field Type" :items="fieldTypes" value-key="value" /> -->
               <FormTextField v-model="field.name" :label="$t('global.name')" />
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index 934d56f1..848545e7 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
+  import { Input } from "~/components/ui/input";
   import type { ItemSummary, LabelSummary, LocationOutCount } from "~~/lib/api/types/data-contracts";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
@@ -258,8 +260,6 @@
       }
     }
 
-    const toast = useNotifier();
-
     const { data, error } = await api.items.getAll({
       q: query.value || "",
       locations: locIDs.value,
@@ -371,7 +371,7 @@
     <div v-if="locations && labels">
       <div class="flex flex-wrap items-end gap-4 md:flex-nowrap">
         <div class="w-full">
-          <FormTextField v-model="query" :placeholder="$t('global.search')" />
+          <Input v-model="query" :placeholder="$t('global.search')" class="h-12" />
           <div v-if="byAssetId" class="pl-2 pt-2 text-sm">
             <p>{{ $t("items.query_id", { id: parsedAssetId }) }}</p>
           </div>
@@ -507,7 +507,11 @@
         <MdiSelectSearch class="size-10" />
         <p>{{ $t("items.no_results") }}</p>
       </div>
-      <div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
+      <div
+        v-else
+        ref="cardgrid"
+        class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
+      >
         <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">
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 36a1fb3b..16d99e2c 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiDelete from "~icons/mdi/delete";
@@ -9,7 +10,6 @@
 
   const route = useRoute();
   const api = useUserApi();
-  const toast = useNotifier();
 
   const labelId = computed<string>(() => route.params.id as string);
 
@@ -102,7 +102,7 @@
   <BaseContainer>
     <BaseModal v-model="updateModal">
       <template #title> {{ $t("labels.update_label") }} </template>
-      <form v-if="label" @submit.prevent="update">
+      <form v-if="label" class="flex flex-col gap-2" @submit.prevent="update">
         <FormTextField
           v-model="updateData.name"
           :autofocus="true"
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index 435b45a5..15380d19 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import type { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
   import { useLocationStore } from "~~/stores/locations";
   import MdiPackageVariant from "~icons/mdi/package-variant";
@@ -11,7 +12,6 @@
 
   const route = useRoute();
   const api = useUserApi();
-  const toast = useNotifier();
 
   const locationId = computed<string>(() => route.params.id as string);
 
@@ -114,7 +114,7 @@
     <!-- Update Dialog -->
     <BaseModal v-model="updateModal">
       <template #title> {{ $t("locations.update_location") }} </template>
-      <form v-if="location" @submit.prevent="update">
+      <form v-if="location" class="flex flex-col gap-2" @submit.prevent="update">
         <FormTextField
           v-model="updateData.name"
           :autofocus="true"
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 34727761..576a9c23 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
   import type { Detail } from "~~/components/global/DetailsSection/types";
   import { themes } from "~~/lib/data/themes";
   import type { CurrenciesCurrency, NotifierCreate, NotifierOut } from "~~/lib/api/types/data-contracts";
@@ -19,12 +20,11 @@
 
   const api = useUserApi();
   const confirm = useConfirm();
-  const notify = useNotifier();
 
   const currencies = computedAsync(async () => {
     const resp = await api.group.currencies();
     if (resp.error) {
-      notify.error("Failed to get currencies");
+      toast.error("Failed to get currencies");
       return [];
     }
 
@@ -89,12 +89,12 @@
     });
 
     if (error) {
-      notify.error("Failed to update group");
+      toast.error("Failed to update group");
       return;
     }
 
     group.value = data;
-    notify.success("Group updated");
+    toast.success("Group updated");
   }
 
   const { setTheme } = useTheme();
@@ -127,12 +127,12 @@
     const { response } = await api.user.delete();
 
     if (response?.status === 204) {
-      notify.success("Your account has been deleted.");
+      toast.success("Your account has been deleted.");
       auth.logout(api);
       navigateTo("/");
     }
 
-    notify.error("Failed to delete your account.");
+    toast.error("Failed to delete your account.");
   }
 
   const token = ref("");
@@ -178,12 +178,12 @@
     const { error } = await api.user.changePassword(passwordChange.current, passwordChange.new);
 
     if (error) {
-      notify.error("Failed to change password.");
+      toast.error("Failed to change password.");
       passwordChange.loading = false;
       return;
     }
 
-    notify.success("Password changed successfully.");
+    toast.success("Password changed successfully.");
     passwordChange.dialog = false;
     passwordChange.new = "";
     passwordChange.current = "";
@@ -239,7 +239,7 @@
     });
 
     if (result.error) {
-      notify.error("Failed to create notifier.");
+      toast.error("Failed to create notifier.");
     }
 
     notifier.value = null;
@@ -260,7 +260,7 @@
     });
 
     if (result.error) {
-      notify.error("Failed to update notifier.");
+      toast.error("Failed to update notifier.");
     }
 
     notifier.value = null;
@@ -280,7 +280,7 @@
     const { error } = await api.notifiers.delete(id);
 
     if (error) {
-      notify.error("Failed to delete notifier.");
+      toast.error("Failed to delete notifier.");
       return;
     }
 
@@ -295,11 +295,11 @@
     const { error } = await api.notifiers.test(notifier.value.url);
 
     if (error) {
-      notify.error("Failed to test notifier.");
+      toast.error("Failed to test notifier.");
       return;
     }
 
-    notify.success("Notifier test successful.");
+    toast.success("Notifier test successful.");
   }
 </script>
 
@@ -309,7 +309,12 @@
       <template #title> {{ $t("profile.change_password") }} </template>
 
       <form @submit.prevent="changePassword">
-        <FormPassword v-model="passwordChange.current" :label="$t('profile.current_password')" placeholder="" />
+        <FormPassword
+          v-model="passwordChange.current"
+          :label="$t('profile.current_password')"
+          placeholder=""
+          class="mb-2"
+        />
         <FormPassword v-model="passwordChange.new" :label="$t('profile.new_password')" placeholder="" />
         <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
 
@@ -331,7 +336,7 @@
 
       <form @submit.prevent="createNotifier">
         <template v-if="notifier">
-          <FormTextField v-model="notifier.name" :label="$t('global.name')" />
+          <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')" />
diff --git a/frontend/pages/reports/label-generator.vue b/frontend/pages/reports/label-generator.vue
index ad377dc6..bfc3d46a 100644
--- a/frontend/pages/reports/label-generator.vue
+++ b/frontend/pages/reports/label-generator.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { route } from "../../lib/api/base";
+  import { toast } from "@/components/ui/sonner";
 
   definePageMeta({
     middleware: ["auth"],
@@ -64,8 +65,6 @@
     };
   };
 
-  const notifier = useNotifier();
-
   function calculateGridData(input: Input): Output {
     const { page, cardHeight, cardWidth } = input;
 
@@ -76,7 +75,7 @@
     const availablePageHeight = page.height - page.pageTopPadding - page.pageBottomPadding;
 
     if (availablePageWidth < cardWidth || availablePageHeight < cardHeight) {
-      notifier.error("Page size is too small for the card size");
+      toast.error("Page size is too small for the card size");
       return out.value;
     }
 
diff --git a/frontend/pages/testing.vue b/frontend/pages/testing.vue
index d722ff99..3954e59e 100644
--- a/frontend/pages/testing.vue
+++ b/frontend/pages/testing.vue
@@ -1,5 +1,39 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { toast } from "@/components/ui/sonner";
+  import { Button, ButtonGroup } from "~/components/ui/button";
+  import { Shortcut } from "~/components/ui/shortcut";
+  import MdiPackageVariant from "~icons/mdi/package-variant";
+  import MdiPackageVariantClosed from "~icons/mdi/package-variant-closed";
+</script>
 
 <template>
-  <div>testing</div>
+  <h1 class="text-3xl">Testing</h1>
+  <p>This is a page for testing during the transition to shadcn.</p>
+  <Button
+    @click="
+      toast.success('This is a test', {
+        duration: 100000,
+      })
+    "
+    >Create Toast</Button
+  >
+  <ButtonGroup>
+    <Button @click="toast.success('Success')">Success</Button>
+    <Button variant="outline" @click="toast.info('Info')">Info</Button>
+    <Button variant="destructive" @click="toast.warning('Warning')">Warning</Button>
+    <Button variant="destructive" @click="toast.error('Error')">Error</Button>
+    <Button>Button 3</Button>
+  </ButtonGroup>
+  <span class="flex items-center gap-1 text-sm">
+    Use
+    <Shortcut size="sm" :keys="['Shift']" /> + <Shortcut size="sm" :keys="['Enter']" /> to create and add another.
+  </span>
+  <div class="group relative size-12">
+    <div
+      class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-180"
+    >
+      <MdiPackageVariant class="size-5 group-hover:hidden" />
+      <MdiPackageVariantClosed class="hidden size-5 group-hover:block" />
+    </div>
+  </div>
 </template>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 6f28cca6..7b3ec38d 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -92,6 +92,7 @@
 
 <script setup lang="ts">
   import DOMPurify from "dompurify";
+  import { toast } from "@/components/ui/sonner";
   import MdiFileChart from "~icons/mdi/file-chart";
   import MdiArrowRight from "~icons/mdi/arrow-right";
   import MdiDatabase from "~icons/mdi/database";
@@ -113,7 +114,6 @@
 
   const api = useUserApi();
   const confirm = useConfirm();
-  const notify = useNotifier();
 
   function getBillOfMaterials() {
     const url = api.reports.billOfMaterialsURL();
@@ -137,11 +137,11 @@
     const result = await api.actions.ensureAssetIDs();
 
     if (result.error) {
-      notify.error("Failed to ensure asset IDs.");
+      toast.error("Failed to ensure asset IDs.");
       return;
     }
 
-    notify.success(`${result.data.completed} assets have been updated.`);
+    toast.success(`${result.data.completed} assets have been updated.`);
   }
 
   async function ensureImportRefs() {
@@ -156,11 +156,11 @@
     const result = await api.actions.ensureImportRefs();
 
     if (result.error) {
-      notify.error("Failed to ensure import refs.");
+      toast.error("Failed to ensure import refs.");
       return;
     }
 
-    notify.success(`${result.data.completed} assets have been updated.`);
+    toast.success(`${result.data.completed} assets have been updated.`);
   }
 
   async function resetItemDateTimes() {
@@ -175,11 +175,11 @@
     const result = await api.actions.resetItemDateTimes();
 
     if (result.error) {
-      notify.error("Failed to reset date and time values.");
+      toast.error("Failed to reset date and time values.");
       return;
     }
 
-    notify.success(`${result.data.completed} assets have been updated.`);
+    toast.success(`${result.data.completed} assets have been updated.`);
   }
 
   async function setPrimaryPhotos() {
@@ -194,11 +194,11 @@
     const result = await api.actions.setPrimaryPhotos();
 
     if (result.error) {
-      notify.error("Failed to set primary photos.");
+      toast.error("Failed to set primary photos.");
       return;
     }
 
-    notify.success(`${result.data.completed} assets have been updated.`);
+    toast.success(`${result.data.completed} assets have been updated.`);
   }
 </script>
 
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index cc5eb466..e8385c5f 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -65,6 +65,9 @@ importers:
       dompurify:
         specifier: ^3.2.4
         version: 3.2.4
+      fuzzysort:
+        specifier: ^3.1.0
+        version: 3.1.0
       h3:
         specifier: ^1.15.1
         version: 1.15.1
@@ -86,9 +89,9 @@ importers:
       postcss:
         specifier: ^8.5.3
         version: 8.5.3
-      radix-vue:
-        specifier: ^1.9.17
-        version: 1.9.17(vue@3.4.8(typescript@5.6.2))
+      reka-ui:
+        specifier: ^2.2.0
+        version: 2.2.0(typescript@5.6.2)(vue@3.4.8(typescript@5.6.2))
       semver:
         specifier: ^7.7.1
         version: 7.7.1
@@ -101,12 +104,18 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.17)
+      vaul-vue:
+        specifier: ^0.4.1
+        version: 0.4.1(reka-ui@2.2.0(typescript@5.6.2)(vue@3.4.8(typescript@5.6.2)))(vue@3.4.8(typescript@5.6.2))
       vue:
         specifier: 3.4.8
         version: 3.4.8(typescript@5.6.2)
       vue-router:
         specifier: ^4.5.0
         version: 4.5.0(vue@3.4.8(typescript@5.6.2))
+      vue-sonner:
+        specifier: ^1.3.0
+        version: 1.3.0
     devDependencies:
       '@faker-js/faker':
         specifier: ^8.4.1
@@ -3370,6 +3379,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -4358,6 +4370,9 @@ packages:
   ohash@2.0.10:
     resolution: {integrity: sha512-jf9szh2McTXpXGqejbfHxy4wcs6CXc6MShfzLIdHuCrl2W3qG49qutlOMq1Bdmvpv3s/XJffTu4ElRBPtIOncQ==}
 
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -4823,11 +4838,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  radix-vue@1.9.17:
-    resolution: {integrity: sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==}
-    peerDependencies:
-      vue: '>= 3.2.0'
-
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -4921,6 +4931,11 @@ packages:
     resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
+  reka-ui@2.2.0:
+    resolution: {integrity: sha512-eeRrLI4LwJ6dkdwks6KFNKGs0+beqZlHO3JMHen7THDTh+yJ5Z0KNwONmOhhV/0hZC2uJCEExgG60QPzGstkQg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   replace-in-file@6.3.5:
     resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
     engines: {node: '>=10'}
@@ -5708,6 +5723,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul-vue@0.4.1:
+    resolution: {integrity: sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==}
+    peerDependencies:
+      reka-ui: ^2.0.0
+      vue: ^3.3.0
+
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
@@ -5904,6 +5925,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@1.3.0:
+    resolution: {integrity: sha512-jAodBy4Mri8rQjVZGQAPs4ZYymc1ywPiwfa81qU0fFl+Suk7U8NaOxIDdI1oBGLeQJqRZi/oxNIuhCLqsBmOwg==}
+
   vue-tsc@2.1.6:
     resolution: {integrity: sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==}
     hasBin: true
@@ -7587,7 +7611,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@8.57.1)(typescript@5.6.2)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint@8.57.1)(typescript@5.6.2)
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2)
       eslint: 8.57.1
@@ -7600,10 +7624,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)':
     dependencies:
       eslint: 8.57.1
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1))(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1)
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
       eslint-plugin-n: 15.7.0(eslint@8.57.1)
       eslint-plugin-node: 11.1.0(eslint@8.57.1)
@@ -9475,7 +9499,7 @@ snapshots:
     dependencies:
       eslint: 8.57.1
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1))(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@15.7.0(eslint@8.57.1))(eslint-plugin-promise@6.6.0(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
@@ -9505,7 +9529,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -9539,7 +9563,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -9877,6 +9901,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuzzysort@3.1.0: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -10924,7 +10950,7 @@ snapshots:
       unenv: 1.10.0
       unimport: 3.14.6(rollup@4.34.9)
       unplugin: 1.16.1
-      unplugin-vue-router: 0.10.9(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2))
+      unplugin-vue-router: 0.10.9(rollup@4.34.9)(vue-router@4.5.0(vue@3.4.8(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2))
       unstorage: 1.15.0(db0@0.2.4)(ioredis@5.5.0)
       untyped: 1.5.2
       vue: 3.5.13(typescript@5.6.2)
@@ -11059,6 +11085,8 @@ snapshots:
 
   ohash@2.0.10: {}
 
+  ohash@2.0.11: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -11494,23 +11522,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  radix-vue@1.9.17(vue@3.4.8(typescript@5.6.2)):
-    dependencies:
-      '@floating-ui/dom': 1.6.13
-      '@floating-ui/vue': 1.1.6(vue@3.4.8(typescript@5.6.2))
-      '@internationalized/date': 3.7.0
-      '@internationalized/number': 3.6.0
-      '@tanstack/vue-virtual': 3.13.2(vue@3.4.8(typescript@5.6.2))
-      '@vueuse/core': 10.11.1(vue@3.4.8(typescript@5.6.2))
-      '@vueuse/shared': 10.11.1(vue@3.4.8(typescript@5.6.2))
-      aria-hidden: 1.2.4
-      defu: 6.1.4
-      fast-deep-equal: 3.1.3
-      nanoid: 5.1.2
-      vue: 3.4.8(typescript@5.6.2)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
   radix3@1.1.2: {}
 
   randombytes@2.1.0:
@@ -11628,6 +11639,23 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
+  reka-ui@2.2.0(typescript@5.6.2)(vue@3.4.8(typescript@5.6.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/vue': 1.1.6(vue@3.4.8(typescript@5.6.2))
+      '@internationalized/date': 3.7.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.13.2(vue@3.4.8(typescript@5.6.2))
+      '@vueuse/core': 12.7.0(typescript@5.6.2)
+      '@vueuse/shared': 12.7.0(typescript@5.6.2)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.4.8(typescript@5.6.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   replace-in-file@6.3.5:
     dependencies:
       chalk: 4.1.2
@@ -12404,7 +12432,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-router@0.10.9(rollup@4.34.9)(vue-router@4.5.0(vue@3.5.13(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2)):
+  unplugin-vue-router@0.10.9(rollup@4.34.9)(vue-router@4.5.0(vue@3.4.8(typescript@5.6.2)))(vue@3.5.13(typescript@5.6.2)):
     dependencies:
       '@babel/types': 7.26.9
       '@rollup/pluginutils': 5.1.4(rollup@4.34.9)
@@ -12421,7 +12449,7 @@ snapshots:
       unplugin: 2.0.0-beta.1
       yaml: 2.7.0
     optionalDependencies:
-      vue-router: 4.5.0(vue@3.5.13(typescript@5.6.2))
+      vue-router: 4.5.0(vue@3.4.8(typescript@5.6.2))
     transitivePeerDependencies:
       - rollup
       - vue
@@ -12510,6 +12538,14 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul-vue@0.4.1(reka-ui@2.2.0(typescript@5.6.2)(vue@3.4.8(typescript@5.6.2)))(vue@3.4.8(typescript@5.6.2)):
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.8(typescript@5.6.2))
+      reka-ui: 2.2.0(typescript@5.6.2)(vue@3.4.8(typescript@5.6.2))
+      vue: 3.4.8(typescript@5.6.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   vite-hot-client@0.2.4(vite@5.4.14(@types/node@22.13.9)(terser@5.39.0)):
     dependencies:
       vite: 5.4.14(@types/node@22.13.9)(terser@5.39.0)
@@ -12732,6 +12768,8 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.6.2)
 
+  vue-sonner@1.3.0: {}
+
   vue-tsc@2.1.6(typescript@5.6.2):
     dependencies:
       '@volar/typescript': 2.4.11
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5dfc12a7..507c93b0 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -101,18 +101,18 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-collapsible-content-height)" },
+          to: { height: "var(--reka-collapsible-content-height)" },
         },
         "collapsible-up": {
-          from: { height: "var(--radix-collapsible-content-height)" },
+          from: { height: "var(--reka-collapsible-content-height)" },
           to: { height: 0 },
         },
       },