diff --git a/app.vue b/app.vue
index 9edadb3..9aeb003 100644
--- a/app.vue
+++ b/app.vue
@@ -18,9 +18,9 @@ import "~/styles/index.css";
 import { convert } from "html-to-text";
 import ConfirmationModal from "./components/modals/confirm.vue";
 import { Toaster } from "./components/ui/sonner";
+import { TooltipProvider } from "./components/ui/tooltip";
 import { overwriteGetLocale } from "./paraglide/runtime";
 import { type EnumSetting, SettingIds } from "./settings";
-import { TooltipProvider } from "./components/ui/tooltip";
 // Sin
 //import "~/styles/mcdonalds.css";
 
@@ -58,7 +58,7 @@ useSeoMeta({
     ogImage: computed(() => instance.value?.banner?.url),
     twitterTitle: computed(() => instance.value?.title ?? ""),
     twitterDescription: computed(() =>
-        convert(description.value?.content ?? "")
+        convert(description.value?.content ?? ""),
     ),
     twitterImage: computed(() => instance.value?.banner?.url),
     description: computed(() => convert(description.value?.content ?? "")),
@@ -76,7 +76,7 @@ useHead({
 
 if (code && origin && appData.value && route.path !== "/oauth/code") {
     const newOrigin = new URL(
-        URL.canParse(origin) ? origin : `https://${origin}`
+        URL.canParse(origin) ? origin : `https://${origin}`,
     );
 
     signInWithCode(code, appData.value, newOrigin);
@@ -84,7 +84,7 @@ if (code && origin && appData.value && route.path !== "/oauth/code") {
 
 if (origin && !code) {
     const newOrigin = new URL(
-        URL.canParse(origin) ? origin : `https://${origin}`
+        URL.canParse(origin) ? origin : `https://${origin}`,
     );
 
     signIn(appData, newOrigin);
@@ -108,4 +108,14 @@ html.theme-changing * {
     transition: background-color 1s ease, border 1s ease, color 1s ease,
         box-shadow 1s ease !important;
 }
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+    transition: transform 0.3s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+    transform: translateY(-100%);
+}
 </style>
diff --git a/bun.lock b/bun.lock
index 2c9cb84..f65aab8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -38,7 +38,7 @@
         "nanoid": "^5.1.5",
         "nuxt": "^3.16.1",
         "nuxt-security": "^2.2.0",
-        "radix-vue": "^1.9.17",
+        "reka-ui": "^2.1.1",
         "shadcn-nuxt": "1.0.3",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
@@ -1768,8 +1768,6 @@
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
-    "radix-vue": ["radix-vue@1.9.17", "", { "dependencies": { "@floating-ui/dom": "^1.6.7", "@floating-ui/vue": "^1.1.0", "@internationalized/date": "^3.5.4", "@internationalized/number": "^3.5.3", "@tanstack/vue-virtual": "^3.8.1", "@vueuse/core": "^10.11.0", "@vueuse/shared": "^10.11.0", "aria-hidden": "^1.2.4", "defu": "^6.1.4", "fast-deep-equal": "^3.1.3", "nanoid": "^5.0.7" }, "peerDependencies": { "vue": ">= 3.2.0" } }, "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ=="],
-
     "radix3": ["radix3@1.1.2", "", {}, "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="],
 
     "randombytes": ["randombytes@2.1.0", "", { "dependencies": { "safe-buffer": "^5.1.0" } }, "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ=="],
@@ -2426,10 +2424,6 @@
 
     "prosemirror-trailing-node/escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
-    "radix-vue/@vueuse/core": ["@vueuse/core@10.11.1", "", { "dependencies": { "@types/web-bluetooth": "^0.0.20", "@vueuse/metadata": "10.11.1", "@vueuse/shared": "10.11.1", "vue-demi": ">=0.14.8" } }, "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww=="],
-
-    "radix-vue/@vueuse/shared": ["@vueuse/shared@10.11.1", "", { "dependencies": { "vue-demi": ">=0.14.8" } }, "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA=="],
-
     "randombytes/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
 
     "readdir-glob/minimatch": ["minimatch@5.1.6", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g=="],
@@ -2590,10 +2584,6 @@
 
     "nypm/pkg-types/confbox": ["confbox@0.2.1", "", {}, "sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg=="],
 
-    "radix-vue/@vueuse/core/@types/web-bluetooth": ["@types/web-bluetooth@0.0.20", "", {}, "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="],
-
-    "radix-vue/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@10.11.1", "", {}, "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="],
-
     "reka-ui/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@12.8.2", "", {}, "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A=="],
 
     "resolve-path/http-errors/depd": ["depd@1.1.2", "", {}, "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="],
diff --git a/components.json b/components.json
index 2fc290f..8e030ff 100644
--- a/components.json
+++ b/components.json
@@ -2,7 +2,6 @@
     "$schema": "https://shadcn-vue.com/schema.json",
     "style": "default",
     "typescript": true,
-    "tsConfigPath": ".nuxt/tsconfig.json",
     "tailwind": {
         "config": "tailwind.config.ts",
         "css": "styles/index.css",
@@ -10,9 +9,11 @@
         "cssVariables": true,
         "prefix": ""
     },
-    "framework": "nuxt",
     "aliases": {
-        "components": "~/components",
-        "utils": "@/lib/utils"
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "composables": "@/composables"
     }
 }
diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 128042f..bcaa043 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -44,8 +44,8 @@
                 <Toggle
                     variant="default"
                     size="sm"
-                    :pressed="state.contentType === 'text/html'"
-                    @update:pressed="
+                    :model-value="state.contentType === 'text/html'"
+                    @update:model-value="
                         (i) =>
                             (state.contentType = i ? 'text/html' : 'text/plain')
                     "
@@ -61,6 +61,8 @@
             <SelectTrigger
                 :as-child="true"
                 :disabled="relation?.type === 'edit'"
+                :disable-default-classes="true"
+                :disable-select-icon="true"
             >
                 <Button variant="ghost" size="icon">
                     <component
@@ -110,11 +112,7 @@
         </Tooltip>
         <Tooltip>
             <TooltipTrigger as="div">
-                <Toggle
-                    variant="default"
-                    size="sm"
-                    v-model:pressed="state.sensitive"
-                >
+                <Toggle variant="default" size="sm" v-model="state.sensitive">
                     <TriangleAlert class="!size-5" />
                 </Toggle>
             </TooltipTrigger>
@@ -153,19 +151,23 @@ import {
     Smile,
     TriangleAlert,
 } from "lucide-vue-next";
-import { SelectTrigger } from "radix-vue";
 import { toast } from "vue-sonner";
 import Note from "~/components/notes/note.vue";
-import { Select, SelectContent, SelectItem } from "~/components/ui/select";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+} from "~/components/ui/select";
 import * as m from "~/paraglide/messages.js";
 import { SettingIds } from "~/settings";
 import EditorContent from "../editor/content.vue";
 import { Button } from "../ui/button";
+import { DialogFooter } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Toggle } from "../ui/toggle";
-import { DialogFooter } from "../ui/dialog";
-import Files from "./files.vue";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import Files from "./files.vue";
 
 const { Control_Enter, Command_Enter } = useMagicKeys();
 const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
@@ -221,7 +223,7 @@ const state = reactive({
     contentType: "text/html" as "text/html" | "text/plain",
     visibility: (relation?.type === "edit"
         ? relation.note.visibility
-        : defaultVisibility.value.value ?? "public") as Status["visibility"],
+        : (defaultVisibility.value.value ?? "public")) as Status["visibility"],
     files: (relation?.type === "edit"
         ? relation.note.media_attachments.map((a) => ({
               apiId: a.id,
diff --git a/components/composer/dialog.vue b/components/composer/dialog.vue
index e38f5fa..f134aba 100644
--- a/components/composer/dialog.vue
+++ b/components/composer/dialog.vue
@@ -60,7 +60,7 @@ const relation = ref(
         type: "reply" | "quote" | "edit";
         note: Status;
         source?: StatusSource;
-    } | null
+    } | null,
 );
 </script>
 
diff --git a/components/composer/file-preview.vue b/components/composer/file-preview.vue
index 501b322..54bbf56 100644
--- a/components/composer/file-preview.vue
+++ b/components/composer/file-preview.vue
@@ -1,13 +1,23 @@
 <template>
     <DropdownMenu>
-        <DropdownMenuTrigger as="button"
+        <DropdownMenuTrigger
+            as="button"
             :disabled="file.uploading || file.updating"
-            class="block bg-card text-card-foreground shadow-sm h-28 overflow-hidden rounded relative min-w-28 *:disabled:opacity-50">
+            class="block bg-card text-card-foreground shadow-sm h-28 overflow-hidden rounded relative min-w-28 *:disabled:opacity-50"
+        >
             <Avatar class="h-28 w-full" shape="square">
-                <AvatarImage class="!object-contain" :src="createObjectURL(file.file)" />
+                <AvatarImage
+                    class="!object-contain"
+                    :src="createObjectURL(file.file)"
+                />
             </Avatar>
-            <Badge v-if="!file.uploading && !file.updating" class="absolute bottom-1 right-1" variant="default">{{ formatBytes(file.file.size) }}</Badge>
-            <Badge v-else class="absolute bottom-1 right-1 rounded px-1 !opacity-100" variant="default"><Loader class="animate-spin size-4" /></Badge>
+            <Badge
+                v-if="file.uploading && !file.updating"
+                class="absolute bottom-1 right-1"
+                variant="default"
+                >{{ formatBytes(file.file.size) }}</Badge
+            >
+            <Spinner v-else class="absolute bottom-1 right-1 size-8 p-1.5" />
         </DropdownMenuTrigger>
         <DropdownMenuContent class="min-w-48">
             <DropdownMenuLabel>{{ file.file.name }}</DropdownMenuLabel>
@@ -32,6 +42,7 @@
 
 <script lang="ts" setup>
 import { Captions, Delete, Loader, TextCursorInput } from "lucide-vue-next";
+import Spinner from "~/components/graphics/spinner.vue";
 import { confirmModalService } from "~/components/modals/composable.ts";
 import { Avatar, AvatarImage } from "~/components/ui/avatar";
 import { Badge } from "~/components/ui/badge";
@@ -121,6 +132,8 @@ const formatBytes = (bytes: number) => {
     const digitsAfterPoint = 2;
     const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${sizes[i]}`;
+    return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${
+        sizes[i]
+    }`;
 };
 </script>
diff --git a/components/errors/AuthRequired.vue b/components/errors/AuthRequired.vue
new file mode 100644
index 0000000..401f9bb
--- /dev/null
+++ b/components/errors/AuthRequired.vue
@@ -0,0 +1,29 @@
+<template>
+    <Alert class="grid grid-cols-[1fr_auto]">
+        <LogIn class="size-4" />
+        <AlertTitle>{{ m.sunny_quick_lionfish_flip() }}</AlertTitle>
+        <AlertDescription class="col-start-1">
+            {{ m.brave_known_pelican_drip() }}
+        </AlertDescription>
+        <!-- Add pl-4 because Alert is adding additional padding, which we don't want -->
+        <Button
+            variant="secondary"
+            class="w-full col-start-2 row-start-1 row-span-2 !pl-4"
+            @click="signInAction"
+        >
+            {{ m.fuzzy_sea_moth_absorb() }}
+        </Button>
+    </Alert>
+</template>
+
+<script lang="ts" setup>
+import { LogIn } from "lucide-vue-next";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+
+const appData = useAppData();
+const signInAction = async () => signIn(appData, await askForInstance());
+</script>
+
+<style></style>
diff --git a/components/errors/NoPosts.vue b/components/errors/NoPosts.vue
new file mode 100644
index 0000000..9c36cd8
--- /dev/null
+++ b/components/errors/NoPosts.vue
@@ -0,0 +1,15 @@
+<template>
+    <Alert>
+        <AlertTitle>{{ m.fine_arable_lemming_fold() }}</AlertTitle>
+        <AlertDescription>
+            {{ m.petty_honest_fish_stir() }}
+        </AlertDescription>
+    </Alert>
+</template>
+
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import * as m from "~/paraglide/messages.js";
+</script>
+
+<style></style>
diff --git a/components/errors/NotFound.vue b/components/errors/NotFound.vue
new file mode 100644
index 0000000..962c8a0
--- /dev/null
+++ b/components/errors/NotFound.vue
@@ -0,0 +1,15 @@
+<template>
+    <Alert>
+        <AlertTitle>{{ m.empty_awful_lark_dart() }}</AlertTitle>
+        <AlertDescription>
+            {{ m.clean_even_mayfly_tap() }}
+        </AlertDescription>
+    </Alert>
+</template>
+
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import * as m from "~/paraglide/messages.js";
+</script>
+
+<style></style>
diff --git a/components/errors/ReachedEnd.vue b/components/errors/ReachedEnd.vue
new file mode 100644
index 0000000..53220b7
--- /dev/null
+++ b/components/errors/ReachedEnd.vue
@@ -0,0 +1,15 @@
+<template>
+    <Alert>
+        <AlertTitle>{{ m.steep_suave_fish_snap() }}</AlertTitle>
+        <AlertDescription>
+            {{ m.muddy_bland_shark_accept() }}
+        </AlertDescription>
+    </Alert>
+</template>
+
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import * as m from "~/paraglide/messages.js";
+</script>
+
+<style></style>
diff --git a/components/graphics/spinner.vue b/components/graphics/spinner.vue
new file mode 100644
index 0000000..98aedf2
--- /dev/null
+++ b/components/graphics/spinner.vue
@@ -0,0 +1,12 @@
+<template>
+    <Card class="size-16">
+        <Loader class="size-full animate-spin" />
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import { Loader } from "lucide-vue-next";
+import { Card } from "~/components/ui/card";
+</script>
+
+<style></style>
diff --git a/components/navigation/mobile-navbar.vue b/components/navigation/mobile-navbar.vue
index fc5768a..47e03fd 100644
--- a/components/navigation/mobile-navbar.vue
+++ b/components/navigation/mobile-navbar.vue
@@ -1,19 +1,27 @@
 <template>
     <div
-        class="fixed md:hidden bottom-0 inset-x-0 border-t h-16 bg-background z-10 flex items-center justify-around *:h-full *:w-full gap-6 px-4 py-2 [&>a>svg]:size-5 [&>button>svg]:size-5">
+        class="fixed md:hidden bottom-0 inset-x-0 border-t h-16 bg-background z-10 flex items-center justify-around *:h-full *:w-full gap-6 px-4 py-2 [&>a>svg]:size-5 [&>button>svg]:size-5"
+    >
         <Button :as="NuxtLink" href="/" variant="ghost" size="icon">
             <Home />
         </Button>
-        <Button :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
+        <Button
+            :as="NuxtLink"
+            href="/notifications"
+            variant="ghost"
+            size="icon"
+        >
             <Bell />
         </Button>
-        <AccountSwitcher>
-            <Button variant="ghost" size="icon">
-                <User />
-            </Button>
-        </AccountSwitcher>
-        <Button variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
-            @click="useEvent('composer:open')">
+        <Button variant="ghost" size="icon">
+            <User />
+        </Button>
+        <Button
+            variant="default"
+            size="icon"
+            :title="m.salty_aloof_turkey_nudge()"
+            @click="useEvent('composer:open')"
+        >
             <Pen />
         </Button>
     </div>
@@ -23,6 +31,5 @@
 import { Bell, Home, Pen, User } from "lucide-vue-next";
 import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
-import AccountSwitcher from "../sidebars/account-switcher.vue";
 import { Button } from "../ui/button";
 </script>
diff --git a/components/notes/note.vue b/components/notes/note.vue
index 407a676..29ab336 100644
--- a/components/notes/note.vue
+++ b/components/notes/note.vue
@@ -1,29 +1,74 @@
 <template>
-    <Card as="article" class="rounded-none border-0 duration-200 shadow- max-w-full relative">
-        <CardHeader class="pb-4" as="header">
-            <ReblogHeader v-if="note.reblog" :avatar="note.account.avatar" :display-name="note.account.display_name"
-                :url="reblogAccountUrl" :emojis="note.account.emojis" />
-            <Header :author="noteToUse.account" :author-url="accountUrl"
-                :corner-avatar="note.reblog ? note.account.avatar : undefined" :note-url="url"
-                :visibility="noteToUse.visibility" :created-at="new Date(noteToUse.created_at)"
-                :small-layout="smallLayout" class="z-[1]" />
-            <div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3rem]')"></div>
-            <div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3rem]')"></div>
+    <Card as="article" class="relative gap-4 items-stretch">
+        <CardHeader as="header">
+            <ReblogHeader
+                v-if="note.reblog"
+                :avatar="note.account.avatar"
+                :display-name="note.account.display_name"
+                :url="reblogAccountUrl"
+                :emojis="note.account.emojis"
+            />
+            <Header
+                :author="noteToUse.account"
+                :author-url="accountUrl"
+                :corner-avatar="note.reblog ? note.account.avatar : undefined"
+                :note-url="url"
+                :visibility="noteToUse.visibility"
+                :created-at="new Date(noteToUse.created_at)"
+                :small-layout="smallLayout"
+                class="z-[1]"
+            />
+            <div
+                v-if="topAvatarBar"
+                :class="
+                    cn(
+                        'shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3rem]'
+                    )
+                "
+            ></div>
+            <div
+                v-if="bottomAvatarBar"
+                :class="
+                    cn(
+                        'shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3rem]'
+                    )
+                "
+            ></div>
         </CardHeader>
         <!-- Simply offset by the size of avatar + 0.75rem (the gap) -->
-        <CardContent :class="contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-[4.25rem]')">
-            <Content :content="noteToUse.content" :quote="note.quote ?? undefined"
-                :attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined"
-                :emojis="noteToUse.emojis" :sensitive="noteToUse.sensitive" :content-warning="noteToUse.spoiler_text" />
+        <CardContent
+            :class="
+                contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-[4.25rem]')
+            "
+        >
+            <Content
+                :content="noteToUse.content"
+                :quote="note.quote ?? undefined"
+                :attachments="noteToUse.media_attachments"
+                :plain-content="noteToUse.plain_content ?? undefined"
+                :emojis="noteToUse.emojis"
+                :sensitive="noteToUse.sensitive"
+                :content-warning="noteToUse.spoiler_text"
+            />
         </CardContent>
-        <CardFooter v-if="!hideActions" class="p-4 pt-0">
-            <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
-                :api-note-string="JSON.stringify(note, null, 4)" :reblog-count="noteToUse.reblogs_count"
-                :remote-url="noteToUse.url" :is-remote="isRemote" :author-id="noteToUse.account.id"
-                @edit="useEvent('composer:edit', note)" @reply="useEvent('composer:reply', note)"
-                @quote="useEvent('composer:quote', note)" @delete="useEvent('note:delete', note)"
-                :note-id="noteToUse.id" :liked="noteToUse.favourited ?? false"
-                :reblogged="noteToUse.reblogged ?? false" />
+        <CardFooter v-if="!hideActions">
+            <Actions
+                :reply-count="noteToUse.replies_count"
+                :like-count="noteToUse.favourites_count"
+                :url="url"
+                :api-note-string="JSON.stringify(note, null, 4)"
+                :reblog-count="noteToUse.reblogs_count"
+                :remote-url="noteToUse.url"
+                :is-remote="isRemote"
+                :author-id="noteToUse.account.id"
+                @edit="useEvent('composer:edit', note)"
+                @reply="useEvent('composer:reply', note)"
+                @quote="useEvent('composer:quote', note)"
+                @delete="useEvent('note:delete', note)"
+                :note-id="noteToUse.id"
+                :liked="noteToUse.favourited ?? false"
+                :reblogged="noteToUse.reblogged ?? false"
+            />
         </CardFooter>
     </Card>
 </template>
diff --git a/components/notes/thread.vue b/components/notes/thread.vue
index b73030d..ca0119e 100644
--- a/components/notes/thread.vue
+++ b/components/notes/thread.vue
@@ -1,7 +1,18 @@
 <template>
     <div>
-        <Note v-if="parent" :note="parent" :hide-actions="true" :content-under-username="true" :bottom-avatar-bar="true" />
-        <Note :note="note" :top-avatar-bar="!!parent" />
+        <Note
+            v-if="parent"
+            :note="parent"
+            :hide-actions="true"
+            :content-under-username="true"
+            :bottom-avatar-bar="true"
+            class="border-b-0 rounded-b-none"
+        />
+        <Note
+            :note="note"
+            :class="parent && 'border-t-0 rounded-t-none'"
+            :top-avatar-bar="!!parent"
+        />
     </div>
 </template>
 
diff --git a/components/notifications/notification.vue b/components/notifications/notification.vue
index 4aca707..d2ea5fa 100644
--- a/components/notifications/notification.vue
+++ b/components/notifications/notification.vue
@@ -1,17 +1,30 @@
 <template>
-    <Card class="rounded-none border-0">
+    <Card class="*:w-full p-2">
         <Collapsible :default-open="true" v-slot="{ open }">
             <Tooltip>
                 <TooltipTrigger :as-child="true">
-                    <CardHeader v-if="notification.account"
-                        class="flex-row items-center gap-2 px-4 py-2 border-b border-border">
+                    <CardHeader
+                        v-if="notification.account"
+                        class="flex-row items-center gap-2 px-2"
+                    >
                         <component :is="icon" class="size-5 shrink-0" />
-                        <Avatar class="size-6 border border-card" :src="notification.account.avatar" :name="notification.account.display_name" />
-                        <span class="font-semibold" v-render-emojis="notification.account.emojis">{{
-                            notification.account.display_name
-                        }}</span>
+                        <Avatar
+                            class="size-5 border border-card"
+                            :src="notification.account.avatar"
+                            :name="notification.account.display_name"
+                        />
+                        <span
+                            class="font-semibold text-sm"
+                            v-render-emojis="notification.account.emojis"
+                            >{{ notification.account.display_name }}</span
+                        >
                         <CollapsibleTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180" :title="open ? 'Collapse' : 'Expand'">
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
+                                :title="open ? 'Collapse' : 'Expand'"
+                            >
                                 <ChevronDown class="duration-200" />
                             </Button>
                         </CollapsibleTrigger>
@@ -23,9 +36,19 @@
             </Tooltip>
             <CollapsibleContent :as-child="true">
                 <CardContent class="p-0">
-                    <Note v-if="notification.status" :note="notification.status" :small-layout="true"
-                        :hide-actions="true" />
-                    <FollowRequest v-else-if="notification.type === 'follow_request' && notification.account" :follower="notification.account" />
+                    <Note
+                        v-if="notification.status"
+                        :note="notification.status"
+                        :small-layout="true"
+                        :hide-actions="true"
+                    />
+                    <FollowRequest
+                        v-else-if="
+                            notification.type === 'follow_request' &&
+                            notification.account
+                        "
+                        :follower="notification.account"
+                    />
                 </CardContent>
             </CollapsibleContent>
         </Collapsible>
diff --git a/components/oauth/login.vue b/components/oauth/login.vue
index bccbb24..d8c5690 100644
--- a/components/oauth/login.vue
+++ b/components/oauth/login.vue
@@ -82,7 +82,11 @@ const issuerRedirectUrl = (issuerId: string) => {
 
 <template>
     <div class="grid gap-6">
-        <form @submit="form.submitForm" method="post" :action="redirectUrl.toString()">
+        <form
+            @submit="form.submitForm"
+            method="post"
+            :action="redirectUrl.toString()"
+        >
             <div class="grid gap-6">
                 <FormField v-slot="{ componentField }" name="identifier">
                     <FormItem>
@@ -90,9 +94,15 @@ const issuerRedirectUrl = (issuerId: string) => {
                             {{ m.fluffy_soft_wolf_cook() }}
                         </FormLabel>
                         <FormControl>
-                            <Input placeholder="petergriffin" type="text" auto-capitalize="none"
-                            auto-complete="idenfifier" auto-correct="off" :disabled="isLoading"
-                            v-bind="componentField" />
+                            <Input
+                                placeholder="petergriffin"
+                                type="text"
+                                auto-capitalize="none"
+                                auto-complete="idenfifier"
+                                auto-correct="off"
+                                :disabled="isLoading"
+                                v-bind="componentField"
+                            />
                         </FormControl>
                         <FormMessage />
                     </FormItem>
@@ -103,9 +113,15 @@ const issuerRedirectUrl = (issuerId: string) => {
                             {{ m.livid_bright_wallaby_quiz() }}
                         </FormLabel>
                         <FormControl>
-                            <Input placeholder="hunter2" type="password" auto-capitalize="none"
-                                auto-complete="password" auto-correct="off" :disabled="isLoading"
-                                v-bind="componentField" />
+                            <Input
+                                placeholder="hunter2"
+                                type="password"
+                                auto-capitalize="none"
+                                auto-complete="password"
+                                auto-correct="off"
+                                :disabled="isLoading"
+                                v-bind="componentField"
+                            />
                         </FormControl>
                         <FormMessage />
                     </FormItem>
@@ -116,7 +132,10 @@ const issuerRedirectUrl = (issuerId: string) => {
                 </Button>
             </div>
         </form>
-        <div v-if="ssoConfig && ssoConfig.providers.length > 0" class="relative">
+        <div
+            v-if="ssoConfig && ssoConfig.providers.length > 0"
+            class="relative"
+        >
             <div class="absolute inset-0 flex items-center">
                 <span class="w-full border-t" />
             </div>
@@ -126,11 +145,25 @@ const issuerRedirectUrl = (issuerId: string) => {
                 </span>
             </div>
         </div>
-        <div v-if="ssoConfig && ssoConfig.providers.length > 0" class="flex flex-col gap-2">
-            <Button as="a" :href="issuerRedirectUrl(provider.id)" variant="outline" type="button" :disabled="isLoading" v-for="provider of ssoConfig.providers">
+        <div
+            v-if="ssoConfig && ssoConfig.providers.length > 0"
+            class="flex flex-col gap-2"
+        >
+            <Button
+                as="a"
+                :href="issuerRedirectUrl(provider.id)"
+                variant="outline"
+                type="button"
+                :disabled="isLoading"
+                v-for="provider of ssoConfig.providers"
+            >
                 <Loader v-if="isLoading" class="mr-2 animate-spin" />
-                <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo`"
-                    class="size-4 mr-2" />
+                <img
+                    crossorigin="anonymous"
+                    :src="provider.icon"
+                    :alt="`${provider.name}'s logo`"
+                    class="size-4 mr-2"
+                />
                 {{ provider.name }}
             </Button>
         </div>
diff --git a/components/preferences/code.vue b/components/preferences/code.vue
index 287b617..f9d33d6 100644
--- a/components/preferences/code.vue
+++ b/components/preferences/code.vue
@@ -1,5 +1,9 @@
 <template>
-    <Collapsible :as="Card" class="grid items-center px-6 py-4 gap-4" v-slot="{ open }">
+    <Collapsible
+        :as="Card"
+        class="grid justify-normal items-center px-6 py-4 gap-4"
+        v-slot="{ open }"
+    >
         <div class="grid grid-cols-[1fr,auto] items-center gap-4">
             <CardHeader class="space-y-0.5 p-0">
                 <CardTitle class="text-base">
@@ -10,16 +14,27 @@
                 </CardDescription>
             </CardHeader>
             <CollapsibleTrigger :as-child="true">
-                <Button variant="outline" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
-                    :title="open ? 'Collapse' : 'Expand'">
+                <Button
+                    variant="outline"
+                    size="icon"
+                    class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
+                    :title="open ? 'Collapse' : 'Expand'"
+                >
                     <ChevronDown class="duration-200" />
                 </Button>
             </CollapsibleTrigger>
         </div>
         <CollapsibleContent :as-child="true">
             <CardFooter class="p-1">
-                <Textarea :rows="10" :model-value="setting.value"
-                    @update:model-value="v => { setting.value = String(v) }" />
+                <Textarea
+                    :rows="10"
+                    :model-value="setting.value"
+                    @update:model-value="
+                        (v) => {
+                            setting.value = String(v);
+                        }
+                    "
+                />
             </CardFooter>
         </CollapsibleContent>
     </Collapsible>
diff --git a/components/preferences/emojis/emoji.vue b/components/preferences/emojis/emoji.vue
index d6b1026..b506249 100644
--- a/components/preferences/emojis/emoji.vue
+++ b/components/preferences/emojis/emoji.vue
@@ -107,7 +107,7 @@ const editName = async () => {
             toast.success(m.gaudy_lime_bison_adore());
 
             identity.value.emojis = identity.value.emojis.map((e) =>
-                e.id === emoji.id ? data : e
+                e.id === emoji.id ? data : e,
             );
         } catch {
             toast.dismiss(id);
@@ -134,7 +134,7 @@ const _delete = async () => {
             toast.success(m.crisp_whole_canary_tear());
 
             identity.value.emojis = identity.value.emojis.filter(
-                (e) => e.id !== emoji.id
+                (e) => e.id !== emoji.id,
             );
         } catch {
             toast.dismiss(id);
diff --git a/components/preferences/emojis/uploader.vue b/components/preferences/emojis/uploader.vue
index 4528e6c..d037755 100644
--- a/components/preferences/emojis/uploader.vue
+++ b/components/preferences/emojis/uploader.vue
@@ -227,7 +227,7 @@ const formSchema = toTypedSchema(
                     count:
                         identity.value?.instance.configuration.emojis
                             .emoji_size_limit ?? Number.POSITIVE_INFINITY,
-                })
+                }),
             ),
         shortcode: z
             .string()
@@ -240,7 +240,7 @@ const formSchema = toTypedSchema(
                         identity.value?.instance.configuration.emojis
                             .max_emoji_shortcode_characters ??
                         Number.POSITIVE_INFINITY,
-                })
+                }),
             )
             .regex(emojiValidator),
         global: z.boolean().default(false),
@@ -250,7 +250,7 @@ const formSchema = toTypedSchema(
                 64,
                 m.home_cool_orangutan_hug({
                     count: 64,
-                })
+                }),
             )
             .optional(),
         alt: z
@@ -264,10 +264,10 @@ const formSchema = toTypedSchema(
                         identity.value?.instance.configuration.emojis
                             .max_emoji_description_characters ??
                         Number.POSITIVE_INFINITY,
-                })
+                }),
             )
             .optional(),
-    })
+    }),
 );
 const { isSubmitting, handleSubmit, values, setFieldValue } = useForm({
     validationSchema: formSchema,
@@ -288,7 +288,7 @@ const submit = handleSubmit(async (values) => {
                 alt: values.alt,
                 category: values.category,
                 global: values.global,
-            }
+            },
         );
 
         toast.dismiss(id);
diff --git a/components/preferences/profile/editor.vue b/components/preferences/profile/editor.vue
index 0b166e7..0f3cd77 100644
--- a/components/preferences/profile/editor.vue
+++ b/components/preferences/profile/editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card v-if="identity" class="w-full max-h-full overflow-auto">
+    <Card v-if="identity" class="w-full max-h-full block overflow-y-auto">
         <form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
             <FormField v-slot="{ handleChange, handleBlur }" name="banner">
                 <FormItem>
@@ -156,6 +156,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="bot"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -183,6 +184,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="locked"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -210,6 +212,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="discoverable"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -234,10 +237,6 @@
             </FormField>
         </form>
     </Card>
-    <Profile
-        :account="account"
-        class="max-w-lg overflow-auto hidden xl:block"
-    />
 </template>
 
 <script lang="ts" setup>
@@ -247,7 +246,6 @@ import { Trash } from "lucide-vue-next";
 import { useForm } from "vee-validate";
 import { toast } from "vue-sonner";
 import { z } from "zod";
-import Profile from "~/components/profiles/profile.vue";
 import { Button } from "~/components/ui/button";
 import {
     Card,
@@ -287,7 +285,7 @@ const formSchema = toTypedSchema(
                 m.civil_icy_ant_mend({
                     size: identity.value?.instance.configuration.accounts
                         .header_size_limit,
-                })
+                }),
             )
             .optional(),
         avatar: z
@@ -300,7 +298,7 @@ const formSchema = toTypedSchema(
                 m.zippy_caring_raven_edit({
                     size: identity.value?.instance.configuration.accounts
                         .avatar_size_limit,
-                })
+                }),
             )
             .or(z.string().url())
             .optional(),
@@ -308,26 +306,26 @@ const formSchema = toTypedSchema(
             .string()
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_displayname_characters
+                    .max_displayname_characters,
             ),
         username: z
             .string()
             .regex(/^[a-z0-9_-]+$/, m.still_upper_otter_dine())
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_username_characters
+                    .max_username_characters,
             ),
         bio: z
             .string()
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_note_characters
+                    .max_note_characters,
             ),
         bot: z.boolean(),
         locked: z.boolean(),
         discoverable: z.boolean(),
         fields: z.array(z.object({ name: z.string(), value: z.string() })),
-    })
+    }),
 );
 
 const form = useForm({
@@ -367,8 +365,8 @@ const handleSubmit = form.handleSubmit(async (values) => {
         // Can't compare two arrays directly in JS, so we need to check if all fields are the same
         fields_attributes: values.fields.every((field) =>
             account.value.source?.fields?.some(
-                (f) => f.name === field.name && f.value === field.value
-            )
+                (f) => f.name === field.name && f.value === field.value,
+            ),
         )
             ? undefined
             : values.fields,
@@ -387,8 +385,8 @@ const handleSubmit = form.handleSubmit(async (values) => {
     try {
         const { data } = await client.value.updateCredentials(
             Object.fromEntries(
-                Object.entries(changedData).filter(([, v]) => v !== undefined)
-            )
+                Object.entries(changedData).filter(([, v]) => v !== undefined),
+            ),
         );
 
         toast.dismiss(id);
@@ -399,6 +397,12 @@ const handleSubmit = form.handleSubmit(async (values) => {
         }
 
         account.value = data;
+        form.resetForm({
+            values: {
+                ...form.values,
+                ...values,
+            },
+        });
     } catch (e) {
         const error = e as ResponseError<{ error: string }>;
 
diff --git a/components/preferences/profile/image-uploader.vue b/components/preferences/profile/image-uploader.vue
index fc5a785..227b6ba 100644
--- a/components/preferences/profile/image-uploader.vue
+++ b/components/preferences/profile/image-uploader.vue
@@ -193,25 +193,25 @@ const schema = toTypedSchema(
                     (v) => v.size <= (maxSize ?? Number.MAX_SAFE_INTEGER),
                     m.zippy_caring_raven_edit({
                         size: maxSize ?? Number.MAX_SAFE_INTEGER,
-                    })
+                    }),
                 ),
         })
         .or(
             z.object({
                 url: z.string().url(),
-            })
+            }),
         )
         .or(
             z.object({
                 email: z.string().email(),
-            })
-        )
+            }),
+        ),
 );
 
 const emailToGravatar = async (email: string) => {
     const sha256 = await crypto.subtle.digest(
         "SHA-256",
-        new TextEncoder().encode(email)
+        new TextEncoder().encode(email),
     );
 
     return `https://www.gravatar.com/avatar/${Array.from(new Uint8Array(sha256))
@@ -234,7 +234,7 @@ const submit = handleSubmit(async (values) => {
     } else if ((values as { email: string }).email) {
         emit(
             "submitUrl",
-            await emailToGravatar((values as { email: string }).email)
+            await emailToGravatar((values as { email: string }).email),
         );
     }
 
diff --git a/components/profiles/avatar.vue b/components/profiles/avatar.vue
index 9c4cecc..6abd495 100644
--- a/components/profiles/avatar.vue
+++ b/components/profiles/avatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <Avatar :shape="(shape.value as 'circle' | 'square')">
+    <Avatar :shape="(shape.value as 'circle' | 'square')" :size="size">
         <AvatarFallback v-if="name">
             {{ getInitials(name) }}
         </AvatarFallback>
@@ -11,9 +11,10 @@
 import { SettingIds } from "~/settings";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 
-const { name } = defineProps<{
+const { name, size = "base" } = defineProps<{
     src?: string;
     name?: string;
+    size?: "base" | "sm" | "lg";
 }>();
 
 /**
diff --git a/components/profiles/profile-badges.vue b/components/profiles/profile-badges.vue
new file mode 100644
index 0000000..3731458
--- /dev/null
+++ b/components/profiles/profile-badges.vue
@@ -0,0 +1,47 @@
+<template>
+    <div
+        class="flex flex-row flex-wrap gap-2 -mx-2"
+        v-if="isDeveloper || account.bot || roles.length > 0"
+    >
+        <ProfileBadge
+            v-if="isDeveloper"
+            :name="m.nice_bad_grizzly_coax()"
+            :description="m.honest_jolly_shell_blend()"
+            :verified="true"
+        />
+        <ProfileBadge
+            v-if="account.bot"
+            :name="m.merry_red_shrimp_bump()"
+            :description="m.sweet_mad_jannes_create()"
+        />
+        <ProfileBadge
+            v-for="role in roles"
+            :key="role.id"
+            :name="role.name"
+            :description="role.description"
+            :icon="role.icon"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "@versia/client/types";
+import * as m from "~/paraglide/messages.js";
+import ProfileBadge from "./profile-badge.vue";
+
+const { account } = defineProps<{
+    account: Account;
+}>();
+
+const config = useConfig();
+const roles = account.roles.filter((r) => r.visible);
+// Get user handle in username@instance format
+const handle = account.acct.includes("@")
+    ? account.acct
+    : `${account.acct}@${
+          identity.value?.instance.domain ?? window.location.host
+      }`;
+const isDeveloper = config.DEVELOPER_HANDLES.includes(handle);
+</script>
+
+<style></style>
diff --git a/components/profiles/profile-header.vue b/components/profiles/profile-header.vue
index 4a3b793..4f24d4e 100644
--- a/components/profiles/profile-header.vue
+++ b/components/profiles/profile-header.vue
@@ -1,12 +1,26 @@
 <template>
-    <CardHeader class="p-0 relative">
+    <CardHeader class="relative w-full">
         <div class="bg-muted rounded overflow-hidden h-48 md:h-72 w-full">
-            <img :src="header" alt="" class="object-cover w-full h-full" />
+            <img
+                v-if="header"
+                :src="header"
+                alt=""
+                class="object-cover w-full h-full"
+            />
             <!-- Shadow overlay at the bottom -->
-            <div class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"></div>
+            <div
+                class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"
+            ></div>
         </div>
-        <div class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2">
-            <Avatar size="lg" class="border" :src="avatar" :name="displayName" />
+        <div
+            class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2"
+        >
+            <Avatar
+                size="lg"
+                class="border"
+                :src="avatar"
+                :name="displayName"
+            />
         </div>
     </CardHeader>
 </template>
@@ -20,4 +34,4 @@ defineProps<{
     avatar: string;
     displayName: string;
 }>();
-</script>
\ No newline at end of file
+</script>
diff --git a/components/profiles/profile.vue b/components/profiles/profile.vue
index 3e9bfe8..dd31da5 100644
--- a/components/profiles/profile.vue
+++ b/components/profiles/profile.vue
@@ -1,13 +1,27 @@
 <template>
-    <Card>
-        <ProfileHeader :header="account.header" :avatar="account.avatar" :display-name="account.display_name" />
-        <CardContent class="pt-3 gap-4 flex flex-col">
+    <Card class="*:w-full">
+        <ProfileHeader
+            :header="account.header"
+            :avatar="account.avatar"
+            :display-name="account.display_name"
+        />
+        <CardContent>
             <div class="flex flex-row justify-end gap-2">
-                <Button variant="secondary" :disabled="isLoading || relationship?.requested" v-if="!isMe && identity"
-                    @click="relationship?.following ? unfollow() : follow()">
+                <Button
+                    variant="secondary"
+                    :disabled="isLoading || relationship?.requested"
+                    v-if="!isMe && identity"
+                    @click="relationship?.following ? unfollow() : follow()"
+                >
                     <Loader v-if="isLoading" class="animate-spin" />
                     <span v-else>
-                        {{ relationship?.following ? m.brief_upper_otter_cuddle() : relationship?.requested ? m.weak_bright_larva_grasp() : m.lazy_major_loris_grasp() }}
+                        {{
+                            relationship?.following
+                                ? m.brief_upper_otter_cuddle()
+                                : relationship?.requested
+                                ? m.weak_bright_larva_grasp()
+                                : m.lazy_major_loris_grasp()
+                        }}
                     </span>
                 </Button>
                 <ProfileActions :account="account">
@@ -22,27 +36,31 @@
                 </CardTitle>
                 <CopyableText :text="account.acct">
                     <span
-                        class="font-semibold bg-gradient-to-tr from-pink-700 dark:from-indigo-400 via-purple-700 dark:via-purple-400 to-indigo-700 dark:to-indigo-400 text-transparent bg-clip-text">
+                        class="font-semibold bg-gradient-to-tr from-pink-700 dark:from-indigo-400 via-purple-700 dark:via-purple-400 to-indigo-700 dark:to-indigo-400 text-transparent bg-clip-text"
+                    >
                         @{{ username }}
                     </span>
-                    <span class="text-muted-foreground">{{ instance && "@" }}{{ instance }}</span>
+                    <span class="text-muted-foreground"
+                        >{{ instance && "@" }}{{ instance }}</span
+                    >
                 </CopyableText>
             </div>
-            <div class="flex flex-row flex-wrap gap-2 -mx-2" v-if="isDeveloper || account.bot || roles.length > 0">
-                <ProfileBadge v-if="isDeveloper" :name="m.nice_bad_grizzly_coax()" :description="m.honest_jolly_shell_blend()"
-                    :verified="true" />
-                <ProfileBadge v-if="account.bot" :name="m.merry_red_shrimp_bump()"
-                    :description="m.sweet_mad_jannes_create()" />
-                <ProfileBadge v-for="role in roles" :key="role.id" :name="role.name" :description="role.description"
-                    :icon="role.icon" />
-            </div>
+            <ProfileBadges :account="account" />
             <ProfileContent :content="account.note" :emojis="account.emojis" />
         </CardContent>
-        <CardFooter class="flex-col items-start gap-4">
-            <ProfileStats :creation-date="new Date(account.created_at || 0)" :follower-count="account.followers_count"
-                :following-count="account.following_count" :note-count="account.statuses_count" />
+        <CardFooter>
+            <ProfileStats
+                :creation-date="new Date(account.created_at || 0)"
+                :follower-count="account.followers_count"
+                :following-count="account.following_count"
+                :note-count="account.statuses_count"
+            />
             <Separator v-if="account.fields.length > 0" />
-            <ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" />
+            <ProfileFields
+                v-if="account.fields.length > 0"
+                :fields="account.fields"
+                :emojis="account.emojis"
+            />
         </CardFooter>
     </Card>
 </template>
@@ -59,7 +77,7 @@ import * as m from "~/paraglide/messages.js";
 import { SettingIds } from "~/settings";
 import { confirmModalService } from "../modals/composable";
 import ProfileActions from "./profile-actions.vue";
-import ProfileBadge from "./profile-badge.vue";
+import ProfileBadges from "./profile-badges.vue";
 import ProfileContent from "./profile-content.vue";
 import ProfileFields from "./profile-fields.vue";
 import ProfileHeader from "./profile-header.vue";
@@ -69,16 +87,9 @@ const { account } = defineProps<{
     account: Account;
 }>();
 
-const config = useConfig();
 const { relationship, isLoading } = useRelationship(client, account.id);
 const isMe = identity.value?.account.id === account.id;
 const [username, instance] = account.acct.split("@");
-const roles = account.roles.filter((r) => r.visible);
-// Get user handle in username@instance format
-const handle = account.acct.includes("@")
-    ? account.acct
-    : `${account.acct}@${identity.value?.instance.domain ?? window.location.host}`;
-const isDeveloper = config.DEVELOPER_HANDLES.includes(handle);
 
 const confirmFollows = useSetting(SettingIds.ConfirmFollow);
 
@@ -129,4 +140,4 @@ const unfollow = async () => {
     relationship.value = data;
     toast.success(m.misty_level_stingray_expand());
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/components/profiles/small-card.vue b/components/profiles/small-card.vue
index 71b0083..ed5f398 100644
--- a/components/profiles/small-card.vue
+++ b/components/profiles/small-card.vue
@@ -1,12 +1,25 @@
 <template>
     <div class="relative">
         <div class="bg-muted rounded overflow-hidden h-32 w-full">
-            <img :src="account.header" alt="" class="object-cover w-full h-full" />
+            <img
+                :src="account.header"
+                alt=""
+                class="object-cover w-full h-full"
+            />
             <!-- Shadow overlay at the bottom -->
-            <div class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"></div>
+            <div
+                class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"
+            ></div>
         </div>
-        <div class="absolute bottom-0 left-1/2 translate-y-1/3 -translate-x-1/2 flex flex-row items-start gap-2">
-            <Avatar size="base" class="border" :src="account.avatar" :name="account.display_name" />
+        <div
+            class="absolute bottom-0 left-1/2 translate-y-1/3 -translate-x-1/2 flex flex-row items-start gap-2"
+        >
+            <Avatar
+                size="base"
+                class="border"
+                :src="account.avatar"
+                :name="account.display_name"
+            />
         </div>
     </div>
     <div class="flex flex-col justify-center items-center mt-8">
@@ -15,19 +28,32 @@
         </span>
         <CopyableText :text="account.acct" class="text-sm">
             <span
-                class="font-semibold bg-gradient-to-tr from-pink-700 dark:from-indigo-400 via-purple-700 dark:via-purple-400 to-indigo-700 dark:to-indigo-400 text-transparent bg-clip-text">
+                class="font-semibold bg-gradient-to-tr from-pink-700 dark:from-indigo-400 via-purple-700 dark:via-purple-400 to-indigo-700 dark:to-indigo-400 text-transparent bg-clip-text"
+            >
                 @{{ username }}
             </span>
-            <span class="text-muted-foreground">{{ instance && "@" }}{{ instance }}</span>
+            <span class="text-muted-foreground"
+                >{{ instance && "@" }}{{ instance }}</span
+            >
         </CopyableText>
     </div>
-    <ProfileContent :content="account.note" :emojis="account.emojis" class="mt-4 max-h-72 overflow-y-auto" />
+    <ProfileContent
+        :content="account.note"
+        :emojis="account.emojis"
+        class="mt-4 max-h-72 overflow-y-auto"
+    />
     <Separator v-if="account.fields.length > 0" class="mt-4" />
-    <ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" class="mt-4 max-h-48 overflow-y-auto" />
+    <ProfileFields
+        v-if="account.fields.length > 0"
+        :fields="account.fields"
+        :emojis="account.emojis"
+        class="mt-4 max-h-48 overflow-y-auto"
+    />
 </template>
 
 <script lang="ts" setup>
 import type { Account } from "@versia/client/types";
+import { Separator } from "~/components/ui/separator";
 import CopyableText from "../notes/copyable-text.vue";
 import Avatar from "./avatar.vue";
 import ProfileContent from "./profile-content.vue";
@@ -38,4 +64,4 @@ const { account } = defineProps<{
 }>();
 
 const [username, instance] = account.acct.split("@");
-</script>
\ No newline at end of file
+</script>
diff --git a/components/profiles/tiny-card.vue b/components/profiles/tiny-card.vue
new file mode 100644
index 0000000..f8c3d1a
--- /dev/null
+++ b/components/profiles/tiny-card.vue
@@ -0,0 +1,32 @@
+<template>
+    <Card
+        class="flex-row gap-4 p-2"
+        :class="naked ? 'p-0 bg-transparent ring-0 border-none' : ''"
+    >
+        <Avatar :src="account.avatar" :name="account.display_name" size="sm" />
+        <CardContent class="gap-1">
+            <span
+                class="truncate font-semibold"
+                v-render-emojis="account.emojis"
+                >{{ account.display_name }}</span
+            >
+            <span class="truncate text-xs">
+                @{{ account.username }}@{{ domain }}
+            </span>
+        </CardContent>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "@versia/client/types";
+import { Card, CardContent } from "~/components/ui/card";
+import Avatar from "./avatar.vue";
+
+const { account, domain, naked } = defineProps<{
+    account: Account;
+    domain: string;
+    naked?: boolean;
+}>();
+</script>
+
+<style></style>
diff --git a/components/sidebars/account-switcher.vue b/components/sidebars/account-switcher.vue
deleted file mode 100644
index 6c6f8a8..0000000
--- a/components/sidebars/account-switcher.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-    <Drawer v-if="isMobile">
-        <DrawerTrigger :as-child="true">
-            <slot />
-        </DrawerTrigger>
-        <DrawerContent>
-            <Button @click="switchAccount(identity.account.id)" variant="outline" size="lg"
-                :href="`/@${identity.account.username}`" v-for="identity of identities"
-                class="flex w-full items-center gap-2 px-4 text-left h-20">
-                <Avatar class="size-12" :src="identity.account.avatar" :name="identity.account.display_name" />
-                <div class="grid flex-1 text-left leading-tight">
-                    <span class="truncate font-semibold" v-render-emojis="identity.account.emojis">{{
-                        identity.account.display_name
-                    }}</span>
-                    <span class="truncate text-sm">@{{
-                        identity.account.acct
-                    }}</span>
-                </div>
-            </Button>
-            <Button variant="secondary" size="lg" class="w-full" @click="signInAction">
-                <UserPlus />
-                {{ m.sunny_pink_hyena_walk() }}
-            </Button>
-            <Button variant="secondary" size="lg" @click="signOut(appData, identity)" v-if="identity">
-                <LogOut />
-                {{ m.sharp_big_mallard_reap() }}
-            </Button>
-            <Button variant="secondary" size="lg" :as="NuxtLink" href="/register" v-else>
-                <LogIn />
-                {{ m.honest_few_baboon_pop() }}
-            </Button>
-        </DrawerContent>
-    </Drawer>
-    <DropdownMenu v-else>
-        <DropdownMenuTrigger :as-child="true">
-            <slot />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded" side="bottom"
-            align="end" :side-offset="4">
-            <DropdownMenuLabel class="p-0 font-normal">
-                <Button @click="switchAccount(identity.account.id)" variant="ghost" size="lg"
-                    :href="`/@${identity.account.username}`" v-for="identity of identities"
-                    class="flex w-full items-center gap-2 px-1 text-left text-sm">
-                    <Avatar class="size-8" :src="identity.account.avatar" :name="identity.account.display_name" />
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                        <span class="truncate font-semibold" v-render-emojis="identity.account.emojis">{{
-                            identity.account.display_name
-                            }}</span>
-                        <span class="truncate text-xs">@{{
-                            identity.account.username
-                            }}@{{
-                                identity.instance.domain
-                            }}</span>
-                    </div>
-                </Button>
-                <DropdownMenuItem @click="signInAction">
-                    <UserPlus />
-                    {{ m.sunny_pink_hyena_walk() }}
-                </DropdownMenuItem>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator v-if="identity" />
-            <DropdownMenuGroup v-if="identity">
-                <DropdownMenuItem :as="NuxtLink" :href="`/@${identity.account.username}`">
-                    <BadgeCheck />
-                    {{ m.factual_arable_jurgen_endure() }}
-                </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem @click="signOut(appData, identity)" v-if="identity">
-                <LogOut />
-                {{ m.sharp_big_mallard_reap() }}
-            </DropdownMenuItem>
-            <DropdownMenuItem :as="NuxtLink" href="/register" v-else>
-                <LogIn />
-                {{ m.honest_few_baboon_pop() }}
-            </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>
-
-<script lang="ts" setup>
-import { BadgeCheck, LogIn, LogOut, UserPlus } from "lucide-vue-next";
-import { toast } from "vue-sonner";
-import * as m from "~/paraglide/messages.js";
-import { NuxtLink } from "#components";
-import DrawerContent from "../modals/drawer-content.vue";
-import Avatar from "../profiles/avatar.vue";
-import { Button } from "../ui/button";
-import { Drawer, DrawerTrigger } from "../ui/drawer";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuGroup,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-
-const appData = useAppData();
-const isMobile = useMediaQuery("(max-width: 768px)");
-
-const signInAction = async () => signIn(appData, await askForInstance());
-
-const switchAccount = async (userId: string) => {
-    if (userId === identity.value?.account.id) {
-        return await navigateTo(`/@${identity.value.account.username}`);
-    }
-
-    const id = toast.loading("Switching account...");
-
-    const identityToSwitch = identities.value.find(
-        (i) => i.account.id === userId,
-    );
-
-    if (!identityToSwitch) {
-        toast.dismiss(id);
-        toast.error("No identity to switch to");
-        return;
-    }
-
-    identity.value = identityToSwitch;
-    toast.dismiss(id);
-    toast.success("Switched account");
-
-    window.location.href = "/";
-};
-</script>
diff --git a/components/sidebars/account/account-switcher.vue b/components/sidebars/account/account-switcher.vue
new file mode 100644
index 0000000..09e2625
--- /dev/null
+++ b/components/sidebars/account/account-switcher.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { BadgeCheck, LogIn, LogOut, UserPlus } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import TinyCard from "~/components/profiles/tiny-card.vue";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+const appData = useAppData();
+
+const signInAction = async () => signIn(appData, await askForInstance());
+
+const switchAccount = async (userId: string) => {
+    if (userId === identity.value?.account.id) {
+        return await navigateTo(`/@${identity.value.account.username}`);
+    }
+
+    const id = toast.loading("Switching account...");
+
+    const identityToSwitch = identities.value.find(
+        (i) => i.account.id === userId,
+    );
+
+    if (!identityToSwitch) {
+        toast.dismiss(id);
+        toast.error("No identity to switch to");
+        return;
+    }
+
+    identity.value = identityToSwitch;
+    toast.dismiss(id);
+    toast.success("Switched account");
+
+    window.location.href = "/";
+};
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger :as-child="true">
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+            <DropdownMenuLabel> Your accounts </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem
+                    v-for="identity of identities"
+                    :key="identity.account.id"
+                    @click="switchAccount(identity.account.id)"
+                    :href="`/@${identity.account.username}`"
+                >
+                    <TinyCard
+                        :account="identity.account"
+                        :domain="identity.instance.domain"
+                        naked
+                    />
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="signInAction">
+                    <UserPlus />
+                    {{ m.sunny_pink_hyena_walk() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="identity" />
+            <DropdownMenuGroup v-if="identity">
+                <DropdownMenuItem
+                    :as="NuxtLink"
+                    :href="`/@${identity.account.username}`"
+                >
+                    <BadgeCheck />
+                    {{ m.factual_arable_jurgen_endure() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="signOut(appData, identity)">
+                    <LogOut />
+                    {{ m.sharp_big_mallard_reap() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuItem v-else :as="NuxtLink" href="/register">
+                <LogIn />
+                {{ m.honest_few_baboon_pop() }}
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
diff --git a/components/sidebars/footer/footer-actions.vue b/components/sidebars/footer/footer-actions.vue
new file mode 100644
index 0000000..83f1547
--- /dev/null
+++ b/components/sidebars/footer/footer-actions.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ChevronsUpDown, DownloadCloud, Pen } from "lucide-vue-next";
+import TinyCard from "~/components/profiles/tiny-card.vue";
+import { Button } from "~/components/ui/button";
+import {
+    SidebarFooter,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "~/components/ui/sidebar";
+import * as m from "~/paraglide/messages.js";
+import AccountSwitcher from "../account/account-switcher.vue";
+const { $pwa } = useNuxtApp();
+</script>
+
+<template>
+    <SidebarFooter>
+        <SidebarMenu class="gap-3">
+            <SidebarMenuItem>
+                <AccountSwitcher>
+                    <SidebarMenuButton size="lg">
+                        <TinyCard
+                            v-if="identity"
+                            :account="identity.account"
+                            :domain="identity.instance.domain"
+                            naked
+                        />
+                        <ChevronsUpDown class="ml-auto size-4" />
+                    </SidebarMenuButton>
+                </AccountSwitcher>
+            </SidebarMenuItem>
+            <SidebarMenuItem class="flex flex-col gap-2">
+                <Button
+                    v-if="identity"
+                    variant="default"
+                    size="lg"
+                    class="w-full group-data-[collapsible=icon]:px-4"
+                    @click="useEvent('composer:open')"
+                >
+                    <Pen />
+                    <span class="group-data-[collapsible=icon]:hidden">
+                        {{ m.salty_aloof_turkey_nudge() }}
+                    </span>
+                </Button>
+                <Button
+                    v-if="$pwa?.needRefresh"
+                    variant="destructive"
+                    size="lg"
+                    class="w-full group-data-[collapsible=icon]:px-4"
+                    @click="$pwa?.updateServiceWorker(true)"
+                >
+                    <DownloadCloud />
+                    <span class="group-data-[collapsible=icon]:hidden">
+                        {{ m.quaint_low_felix_pave() }}
+                    </span>
+                </Button>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarFooter>
+</template>
diff --git a/components/sidebars/instance/instance-header.vue b/components/sidebars/instance/instance-header.vue
new file mode 100644
index 0000000..50e23f8
--- /dev/null
+++ b/components/sidebars/instance/instance-header.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Avatar from "~/components/profiles/avatar.vue";
+import {
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "~/components/ui/sidebar";
+import * as m from "~/paraglide/messages.js";
+
+const instance = useInstance();
+</script>
+
+<template>
+    <SidebarHeader>
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <NuxtLink href="/">
+                    <SidebarMenuButton size="lg">
+                        <Avatar
+                            class="size-8"
+                            :src="
+                                instance?.thumbnail?.url ??
+                                'https://cdn.versia.pub/branding/icon.svg'
+                            "
+                            :name="instance?.title"
+                        />
+                        <div
+                            class="grid flex-1 text-left text-sm leading-tight"
+                        >
+                            <span class="truncate font-semibold">
+                                {{
+                                    instance?.title ??
+                                    m.short_zippy_felix_kick()
+                                }}
+                            </span>
+                            <span class="truncate text-xs">
+                                {{
+                                    instance?.description ??
+                                    m.top_active_ocelot_cure()
+                                }}
+                            </span>
+                        </div>
+                    </SidebarMenuButton>
+                </NuxtLink>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarHeader>
+</template>
diff --git a/components/sidebars/left-sidebar.vue b/components/sidebars/left-sidebar.vue
index 5b0a30a..a3cb522 100644
--- a/components/sidebars/left-sidebar.vue
+++ b/components/sidebars/left-sidebar.vue
@@ -1,209 +1,43 @@
 <template>
-    <Sidebar collapsible="none" class="hidden md:flex">
-        <SidebarHeader>
-            <SidebarMenu>
-                <SidebarMenuItem>
-                    <NuxtLink href="/">
-                        <SidebarMenuButton size="lg"
-                            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                            <Avatar class="size-8" :src="instance?.thumbnail.url ??
-                                'https://cdn.versia.pub/branding/icon.svg'
-                                " :name="instance?.title" />
-                            <div class="grid flex-1 text-left text-sm leading-tight">
-                                <span class="truncate font-semibold">{{ instance?.title ?? m.short_zippy_felix_kick()
-                                    }}</span>
-                                <span class="truncate text-xs">{{ instance?.description ?? m.top_active_ocelot_cure() }}</span>
-                            </div>
-                            <!-- <ChevronsUpDown class="ml-auto" /> -->
-                        </SidebarMenuButton>
-                    </NuxtLink>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarHeader>
+    <Sidebar collapsible="offcanvas">
+        <InstanceHeader />
         <SidebarContent>
             <SidebarGroup>
-                <SidebarGroupLabel>{{ m.trite_real_sawfish_drum() }}</SidebarGroupLabel>
-                <SidebarMenu>
-                    <SidebarMenuItem v-for="item in data.other.filter(
-                        i => i.requiresLogin ? !!identity : true,
-                    )" :key="item.name">
-                        <SidebarMenuButton as-child>
-                            <NuxtLink :href="item.url">
-                                <component :is="item.icon" />
-                                <span>{{ item.name }}</span>
-                            </NuxtLink>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-                </SidebarMenu>
+                <SidebarGroupLabel>{{
+                    m.trite_real_sawfish_drum()
+                }}</SidebarGroupLabel>
+                <NavItems
+                    :items="
+                        sidebarConfig.other.filter((i) =>
+                            i.requiresLogin ? !!identity : true
+                        )
+                    "
+                />
             </SidebarGroup>
             <SidebarGroup v-if="identity" class="mt-auto">
-                <SidebarGroupLabel>{{ m.close_short_kitten_coax() }}</SidebarGroupLabel>
-                <SidebarMenu>
-                    <Collapsible v-for="item in data.navMain" :key="item.title" as-child class="group/collapsible">
-                        <SidebarMenuItem>
-                            <CollapsibleTrigger as-child>
-                                <SidebarMenuButton :tooltip="item.title">
-                                    <component :is="item.icon" />
-                                    <span>{{ item.title }}</span>
-                                    <ChevronRight
-                                        class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                                </SidebarMenuButton>
-                            </CollapsibleTrigger>
-                            <CollapsibleContent>
-                                <SidebarMenuSub>
-                                    <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
-                                        <SidebarMenuSubButton as-child>
-                                            <NuxtLink :href="subItem.url">
-                                                <span>{{ subItem.title }}</span>
-                                            </NuxtLink>
-                                        </SidebarMenuSubButton>
-                                    </SidebarMenuSubItem>
-                                </SidebarMenuSub>
-                            </CollapsibleContent>
-                        </SidebarMenuItem>
-                    </Collapsible>
-                </SidebarMenu>
+                <SidebarGroupLabel>{{
+                    m.close_short_kitten_coax()
+                }}</SidebarGroupLabel>
+                <NavGroup :items="sidebarConfig.navMain" />
             </SidebarGroup>
         </SidebarContent>
-        <SidebarFooter>
-            <SidebarMenu class="gap-3">
-                <SidebarMenuItem>
-                    <AccountSwitcher>
-                        <SidebarMenuButton size="lg"
-                            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                            <Avatar v-if="identity" class="size-8" :src="identity.account.avatar"
-                                :name="identity.account.display_name" />
-                            <Avatar v-else class="size-8" name="AB" />
-                            <div class="grid flex-1 text-left text-sm leading-tight">
-                                <span class="truncate font-semibold" v-render-emojis="identity?.account.emojis">{{
-                                    identity?.account.display_name ?? "Not signed in"
-                                    }}</span>
-                                <span class="truncate text-xs" v-if="identity">@{{ identity?.account.acct }}</span>
-                            </div>
-                            <ChevronsUpDown class="ml-auto size-4" />
-                        </SidebarMenuButton>
-                    </AccountSwitcher>
-                </SidebarMenuItem>
-                <SidebarMenuItem class="flex flex-col gap-2">
-                    <Button variant="default" size="lg" class="w-full group-data-[collapsible=icon]:px-4"
-                        v-if="identity" @click="useEvent('composer:open')">
-                        <Pen />
-                        <span class="group-data-[collapsible=icon]:hidden">{{ m.salty_aloof_turkey_nudge() }}</span>
-                    </Button>
-                    <Button variant="destructive" size="lg" class="w-full group-data-[collapsible=icon]:px-4"
-                        v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker(true)">
-                        <DownloadCloud />
-                        <span class="group-data-[collapsible=icon]:hidden">{{ m.quaint_low_felix_pave() }}</span>
-                    </Button>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarFooter>
+        <FooterActions />
         <SidebarRail />
     </Sidebar>
 </template>
 
 <script lang="ts" setup>
-import {
-    BedSingle,
-    Bell,
-    ChevronRight,
-    ChevronsUpDown,
-    DownloadCloud,
-    Globe,
-    House,
-    MapIcon,
-    Pen,
-    Settings2,
-} from "lucide-vue-next";
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "~/components/ui/collapsible";
+import { sidebarConfig } from "~/components/sidebars/sidebar";
 import {
     Sidebar,
     SidebarContent,
-    SidebarFooter,
     SidebarGroup,
     SidebarGroupLabel,
-    SidebarHeader,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem,
     SidebarRail,
 } from "~/components/ui/sidebar";
 import * as m from "~/paraglide/messages.js";
-import Avatar from "../profiles/avatar.vue";
-import { Button } from "../ui/button";
-import AccountSwitcher from "./account-switcher.vue";
-
-const data = {
-    navMain: [
-        {
-            title: m.patchy_seemly_hound_grace(),
-            url: "/preferences",
-            icon: Settings2,
-            items: [
-                {
-                    title: m.factual_arable_jurgen_endure(),
-                    url: "/preferences/account",
-                },
-                {
-                    title: m.tough_clean_wolf_gleam(),
-                    url: "/preferences/appearance",
-                },
-                {
-                    title: m.legal_best_tadpole_rise(),
-                    url: "/preferences/behaviour",
-                },
-                {
-                    title: m.novel_trite_sloth_adapt(),
-                    url: "/preferences/emojis",
-                },
-                {
-                    title: m.safe_green_mink_cook(),
-                    url: "/preferences/roles",
-                },
-            ],
-        },
-    ],
-    other: [
-        {
-            name: m.bland_chunky_sparrow_propel(),
-            url: "/home",
-            icon: House,
-            requiresLogin: true,
-        },
-        {
-            name: m.lost_trick_dog_grace(),
-            url: "/public",
-            icon: MapIcon,
-            requiresLogin: false,
-        },
-        {
-            name: m.crazy_game_parrot_pave(),
-            url: "/local",
-            icon: BedSingle,
-            requiresLogin: false,
-        },
-        {
-            name: m.real_tame_moose_greet(),
-            url: "/global",
-            icon: Globe,
-            requiresLogin: false,
-        },
-        {
-            name: m.that_patchy_mare_snip(),
-            url: "/notifications",
-            icon: Bell,
-            requiresLogin: true,
-        },
-    ],
-};
-
-const instance = useInstance();
-const { $pwa } = useNuxtApp();
+import FooterActions from "./footer/footer-actions.vue";
+import InstanceHeader from "./instance/instance-header.vue";
+import NavGroup from "./navigation/nav-group.vue";
+import NavItems from "./navigation/nav-items.vue";
 </script>
diff --git a/components/sidebars/navigation/nav-group.vue b/components/sidebars/navigation/nav-group.vue
new file mode 100644
index 0000000..0f588f2
--- /dev/null
+++ b/components/sidebars/navigation/nav-group.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ChevronRight } from "lucide-vue-next";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from "~/components/ui/sidebar";
+import type { SidebarNavMainItem } from "~/types/sidebar";
+
+defineProps<{
+    items: SidebarNavMainItem[];
+}>();
+</script>
+
+<template>
+    <SidebarMenu>
+        <Collapsible
+            v-for="item in items"
+            :key="item.title"
+            as-child
+            default-open
+            class="group/collapsible"
+        >
+            <SidebarMenuItem>
+                <CollapsibleTrigger as-child>
+                    <SidebarMenuButton :tooltip="item.title">
+                        <component :is="item.icon" />
+                        {{ item.title }}
+                        <ChevronRight
+                            class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180"
+                        />
+                    </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                    <SidebarMenuSub>
+                        <SidebarMenuSubItem
+                            v-for="subItem in item.items"
+                            :key="subItem.title"
+                        >
+                            <SidebarMenuSubButton as-child>
+                                <NuxtLink :href="subItem.url">
+                                    <span>{{ subItem.title }}</span>
+                                </NuxtLink>
+                            </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                </CollapsibleContent>
+            </SidebarMenuItem>
+        </Collapsible>
+    </SidebarMenu>
+</template>
diff --git a/components/sidebars/navigation/nav-items.vue b/components/sidebars/navigation/nav-items.vue
new file mode 100644
index 0000000..6eb93f1
--- /dev/null
+++ b/components/sidebars/navigation/nav-items.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "~/components/ui/sidebar";
+import type { SidebarNavItem } from "~/types/sidebar";
+
+defineProps<{
+    items: SidebarNavItem[];
+}>();
+</script>
+
+<template>
+    <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+            <SidebarMenuButton as-child>
+                <NuxtLink :href="item.url">
+                    <component :is="item.icon" />
+                    <span>{{ item.title }}</span>
+                </NuxtLink>
+            </SidebarMenuButton>
+        </SidebarMenuItem>
+    </SidebarMenu>
+</template>
diff --git a/components/sidebars/right-sidebar.vue b/components/sidebars/right-sidebar.vue
index 63466f2..ed05c94 100644
--- a/components/sidebars/right-sidebar.vue
+++ b/components/sidebars/right-sidebar.vue
@@ -1,13 +1,17 @@
 <template>
-    <Sidebar side="right" collapsible="none" class="w-96 hidden lg:flex">
-        <SidebarContent class="p-2 overflow-y-auto">
+    <Sidebar
+        side="right"
+        collapsible="none"
+        class="hidden md:flex"
+        style="--sidebar-width: 24rem; --sidebar-width-mobile: 18rem"
+    >
+        <SidebarContent class="overflow-y-auto *:p-2 *:gap-2">
             <NotificationsTimeline />
         </SidebarContent>
-        <SidebarRail />
     </Sidebar>
 </template>
 
-<script lang="ts" setup>
-import NotificationsTimeline from "../timelines/notifications.vue";
-import { Sidebar, SidebarContent, SidebarRail } from "../ui/sidebar";
+<script setup lang="ts">
+import NotificationsTimeline from "~/components/timelines/notifications.vue";
+import { Sidebar, SidebarContent } from "~/components/ui/sidebar";
 </script>
diff --git a/components/sidebars/sidebar.ts b/components/sidebars/sidebar.ts
new file mode 100644
index 0000000..a3dda96
--- /dev/null
+++ b/components/sidebars/sidebar.ts
@@ -0,0 +1,74 @@
+import {
+    BedSingle,
+    Bell,
+    Globe,
+    House,
+    MapIcon,
+    Settings2,
+} from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+import type { SidebarConfig } from "~/types/sidebar";
+
+export const sidebarConfig: SidebarConfig = {
+    navMain: [
+        {
+            title: m.patchy_seemly_hound_grace(),
+            url: "/preferences",
+            icon: Settings2,
+            items: [
+                {
+                    title: m.factual_arable_jurgen_endure(),
+                    url: "/preferences/account",
+                },
+                {
+                    title: m.tough_clean_wolf_gleam(),
+                    url: "/preferences/appearance",
+                },
+                {
+                    title: m.legal_best_tadpole_rise(),
+                    url: "/preferences/behaviour",
+                },
+                {
+                    title: m.novel_trite_sloth_adapt(),
+                    url: "/preferences/emojis",
+                },
+                {
+                    title: m.safe_green_mink_cook(),
+                    url: "/preferences/roles",
+                },
+            ],
+        },
+    ],
+    other: [
+        {
+            title: m.bland_chunky_sparrow_propel(),
+            url: "/home",
+            icon: House,
+            requiresLogin: true,
+        },
+        {
+            title: m.lost_trick_dog_grace(),
+            url: "/public",
+            icon: MapIcon,
+            requiresLogin: false,
+        },
+        {
+            title: m.crazy_game_parrot_pave(),
+            url: "/local",
+            icon: BedSingle,
+            requiresLogin: false,
+        },
+        {
+            title: m.real_tame_moose_greet(),
+            url: "/global",
+            icon: Globe,
+            requiresLogin: false,
+        },
+        {
+            title: m.that_patchy_mare_snip(),
+            url: "/notifications",
+            icon: Bell,
+            requiresLogin: true,
+        },
+    ],
+};
diff --git a/components/sidebars/sidebar.vue b/components/sidebars/sidebar.vue
index 401e9a6..2eeeb00 100644
--- a/components/sidebars/sidebar.vue
+++ b/components/sidebars/sidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import Timelines from "~/components/navigation/timelines.vue";
+import { SidebarInset } from "~/components/ui/sidebar";
 import { SettingIds } from "~/settings";
-import Timelines from "../navigation/timelines.vue";
 import LeftSidebar from "./left-sidebar.vue";
 import RightSidebar from "./right-sidebar.vue";
 
@@ -18,14 +18,15 @@ const showTimelines = computed(
 </script>
 
 <template>
-    <SidebarProvider>
-        <LeftSidebar />
-        <SidebarInset :class="cn('relative overflow-y-auto overflow-x-hidden', !isMd && 'pt-4')">
-            <header v-if="showTimelines" class="flex h-16 items-center bg-background/80 backdrop-blur-2xl sticky top-0 inset-x-0 z-10 p-4">
-                <Timelines />
-            </header>
-            <slot />
-        </SidebarInset>
-        <RightSidebar v-if="identity" v-show="showRightSidebar.value" />
-    </SidebarProvider>
+    <LeftSidebar />
+    <main class="grow h-dvh overflow-y-auto">
+        <header
+            v-if="showTimelines"
+            class="flex h-16 items-center bg-background/80 backdrop-blur-2xl sticky top-0 inset-x-0 z-10 p-4"
+        >
+            <Timelines />
+        </header>
+        <slot />
+    </main>
+    <RightSidebar v-if="identity" v-show="showRightSidebar.value" />
 </template>
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 7db1fc2..6f488db 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -1,59 +1,52 @@
-<!-- Timeline.vue -->
 <template>
-    <TransitionGroup name="timeline-item" tag="div" class="timeline-items first:*:rounded-t divide-y divide-border *:border-x first:*:border-t *:overflow-hidden last:*:rounded-b last:*:!border-b *:shadow-none">
-        <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
-            @delete="removeItem" />
-    </TransitionGroup>
+    <div
+        role="status"
+        class="flex flex-col gap-4 items-center *:max-w-2xl *:w-full p-4"
+    >
+        <TimelineItem
+            :type="type"
+            v-for="item in items"
+            :key="item.id"
+            :item="item"
+            @update="updateItem"
+            @delete="removeItem"
+        />
 
-    <div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
-        <Loader class="size-8 animate-spin" />
+        <Spinner v-if="isLoading" />
+
+        <div v-if="error" class="timeline-error">
+            {{ error.message }}
+        </div>
+
+        <!-- If there are some posts, but the user scrolled to the end -->
+        <ReachedEnd v-if="hasReachedEnd && items.length > 0" />
+
+        <!-- If there are no posts at all -->
+        <NoPosts v-else-if="hasReachedEnd && items.length === 0" />
+
+        <div v-else-if="!infiniteScroll.value" class="py-10 px-4">
+            <Button
+                variant="secondary"
+                @click="loadNext"
+                :disabled="isLoading"
+                class="w-full"
+            >
+                {{ m.gaudy_bland_gorilla_talk() }}
+            </Button>
+        </div>
+
+        <div v-else ref="loadMoreTrigger" class="h-20"></div>
     </div>
-
-    <div v-if="error" class="timeline-error">
-        {{ error.message }}
-    </div>
-
-    <!-- If there are some posts, but the user scrolled to the end -->
-    <Card v-if="hasReachedEnd && items.length > 0" class="shadow-none bg-transparent border-none p-4">
-        <CardHeader class="text-center gap-y-4">
-            <CardTitle>{{ m.steep_suave_fish_snap() }}</CardTitle>
-            <CardDescription>
-                {{ m.muddy_bland_shark_accept() }}
-            </CardDescription>
-        </CardHeader>
-    </Card>
-
-    <!-- If there are no posts at all -->
-    <Card v-else-if="hasReachedEnd && items.length === 0" class="shadow-none bg-transparent border-none p-4">
-        <CardHeader class="text-center gap-y-4">
-            <CardTitle>{{ m.fine_arable_lemming_fold() }}</CardTitle>
-            <CardDescription>
-                {{ m.petty_honest_fish_stir() }}
-            </CardDescription>
-        </CardHeader>
-    </Card>
-
-    <div v-else-if="!infiniteScroll.value" class="py-10 px-4">
-        <Button variant="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
-            {{ m.gaudy_bland_gorilla_talk() }}
-        </Button>
-    </div>
-
-    <div v-else ref="loadMoreTrigger" class="h-20"></div>
 </template>
 
 <script lang="ts" setup>
 import type { Notification, Status } from "@versia/client/types";
 import { useIntersectionObserver } from "@vueuse/core";
-import { Loader } from "lucide-vue-next";
-import {
-    Card,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
 import * as m from "~/paraglide/messages.js";
 import { SettingIds } from "~/settings";
+import NoPosts from "../errors/NoPosts.vue";
+import ReachedEnd from "../errors/ReachedEnd.vue";
+import Spinner from "../graphics/spinner.vue";
 import { Button } from "../ui/button";
 import TimelineItem from "./timeline-item.vue";
 
@@ -92,16 +85,3 @@ onMounted(() => {
     props.loadNext();
 });
 </script>
-
-<style scoped>
-.timeline-item-enter-active,
-.timeline-item-leave-active {
-    transition: all 0.5s ease;
-}
-
-.timeline-item-enter-from,
-.timeline-item-leave-to {
-    opacity: 0;
-    scale: 0.99;
-}
-</style>
diff --git a/components/ui/alert-dialog/AlertDialog.vue b/components/ui/alert-dialog/AlertDialog.vue
index 2c04d8d..c26e44a 100644
--- a/components/ui/alert-dialog/AlertDialog.vue
+++ b/components/ui/alert-dialog/AlertDialog.vue
@@ -4,7 +4,7 @@ import {
     type AlertDialogProps,
     AlertDialogRoot,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<AlertDialogProps>();
 const emits = defineEmits<AlertDialogEmits>();
diff --git a/components/ui/alert-dialog/AlertDialogAction.vue b/components/ui/alert-dialog/AlertDialogAction.vue
index 718fae6..fe5bbd4 100644
--- a/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue";
+import { AlertDialogAction, type AlertDialogActionProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
-import { buttonVariants } from "~/components/ui/button";
 
 const props = defineProps<
     AlertDialogActionProps & { class?: HTMLAttributes["class"] }
diff --git a/components/ui/alert-dialog/AlertDialogCancel.vue b/components/ui/alert-dialog/AlertDialogCancel.vue
index d3be9c0..018a813 100644
--- a/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue";
+import { AlertDialogCancel, type AlertDialogCancelProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
-import { buttonVariants } from "~/components/ui/button";
 
 const props = defineProps<
     AlertDialogCancelProps & { class?: HTMLAttributes["class"] }
diff --git a/components/ui/alert-dialog/AlertDialogContent.vue b/components/ui/alert-dialog/AlertDialogContent.vue
index c14a1d0..3abc0e8 100644
--- a/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -7,7 +7,7 @@ import {
     AlertDialogOverlay,
     AlertDialogPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -27,13 +27,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <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"
+      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',
+          '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,
         )
       "
diff --git a/components/ui/alert-dialog/AlertDialogDescription.vue b/components/ui/alert-dialog/AlertDialogDescription.vue
index a438c27..c3b976c 100644
--- a/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import {
     AlertDialogDescription,
     type AlertDialogDescriptionProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/alert-dialog/AlertDialogTitle.vue b/components/ui/alert-dialog/AlertDialogTitle.vue
index 2b60008..958a870 100644
--- a/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue";
+import { AlertDialogTitle, type AlertDialogTitleProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/alert-dialog/AlertDialogTrigger.vue b/components/ui/alert-dialog/AlertDialogTrigger.vue
index 93287ee..ee308d3 100644
--- a/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from "radix-vue";
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from "reka-ui";
 
 const props = defineProps<AlertDialogTriggerProps>();
 </script>
diff --git a/components/ui/alert/index.ts b/components/ui/alert/index.ts
index 0dd57b6..b2e9ee6 100644
--- a/components/ui/alert/index.ts
+++ b/components/ui/alert/index.ts
@@ -5,7 +5,7 @@ export { default as AlertDescription } from "./AlertDescription.vue";
 export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
-    "relative w-full rounded border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+    "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg]:size-4",
     {
         variants: {
             variant: {
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
index d4af2fd..2d8afca 100644
--- a/components/ui/avatar/Avatar.vue
+++ b/components/ui/avatar/Avatar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { AvatarRoot } from "radix-vue";
+import { AvatarRoot } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { type AvatarVariants, avatarVariant } from ".";
 
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
index a520940..4a79420 100644
--- a/components/ui/avatar/AvatarFallback.vue
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from "radix-vue";
+import { AvatarFallback, type AvatarFallbackProps } from "reka-ui";
 
 const props = defineProps<AvatarFallbackProps>();
 </script>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
index 183321f..ce43765 100644
--- a/components/ui/avatar/AvatarImage.vue
+++ b/components/ui/avatar/AvatarImage.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from "radix-vue";
+import type { AvatarImageProps } from "reka-ui";
+import { AvatarImage } from "reka-ui";
 
 const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
index 3dec052..a36e05a 100644
--- a/components/ui/avatar/index.ts
+++ b/components/ui/avatar/index.ts
@@ -15,7 +15,7 @@ export const avatarVariant = cva(
             },
             shape: {
                 circle: "rounded-full",
-                square: "rounded",
+                square: "rounded-md",
             },
         },
     },
diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
index 3c027e3..5ed8bf7 100644
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "radix-vue";
+import { Primitive, type PrimitiveProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { type ButtonVariants, buttonVariants } from ".";
 
@@ -20,7 +20,6 @@ const props = withDefaults(defineProps<Props>(), {
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
-    data-component="button"
   >
     <slot />
   </Primitive>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index db25f19..f313bf0 100644
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -1,4 +1,6 @@
-import { type VariantProps, cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
 export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
@@ -7,21 +9,21 @@ export const buttonVariants = cva(
         variants: {
             variant: {
                 default:
-                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
                 destructive:
-                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
                 secondary:
-                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {
-                default: "h-9 px-4 py-2",
-                sm: "h-8 px-3 text-xs",
-                lg: "h-10 px-8",
-                icon: "size-9",
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-md px-8",
+                icon: "h-10 w-10",
             },
         },
         defaultVariants: {
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
index 02882f0..bead7a4 100644
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "radix-vue";
 import type { HTMLAttributes } from "vue";
 
-const props = withDefaults(
-    defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
-    {
-        as: "div",
-    },
-);
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-    <Primitive :as="props.as" :as-child="props.asChild" :class="cn(
-        'rounded-lg border bg-card/90 backdrop-blur-xl text-card-foreground shadow-sm',
-        props.class,
-    )
-        " data-component="card">
+    <div
+        :class="
+            cn(
+                'rounded-lg border bg-card text-card-foreground shadow-sm flex flex-col gap-6 p-4 items-center justify-center',
+                props.class
+            )
+        "
+    >
         <slot />
-    </Primitive>
+    </div>
 </template>
diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
index b42eeac..50e819e 100644
--- a/components/ui/card/CardContent.vue
+++ b/components/ui/card/CardContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
-    <slot />
-  </div>
+    <div :class="cn('flex flex-col gap-2', props.class)">
+        <slot />
+    </div>
 </template>
diff --git a/components/ui/card/CardFooter.vue b/components/ui/card/CardFooter.vue
index eb7b6cb..545bafe 100644
--- a/components/ui/card/CardFooter.vue
+++ b/components/ui/card/CardFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
-    <slot />
-  </div>
+    <div :class="cn('flex items-center', props.class)">
+        <slot />
+    </div>
 </template>
diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
index 8779237..c353882 100644
--- a/components/ui/card/CardHeader.vue
+++ b/components/ui/card/CardHeader.vue
@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "radix-vue";
 import type { HTMLAttributes } from "vue";
 
-const props = withDefaults(
-    defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
-    {
-        as: "div",
-    },
-);
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-    <Primitive :as="props.as" :as-child="props.asChild" :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <div :class="cn('flex flex-col gap-y-1.5', props.class)">
         <slot />
-    </Primitive>
+    </div>
 </template>
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
index dcd2bb0..90d4906 100644
--- a/components/ui/checkbox/Checkbox.vue
+++ b/components/ui/checkbox/Checkbox.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
 import { Check } from "lucide-vue-next";
-import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue";
-import {
-    CheckboxIndicator,
-    CheckboxRoot,
-    useForwardPropsEmits,
-} from "radix-vue";
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,12 +20,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <CheckboxRoot v-bind="forwarded" :class="cn('peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        props.class)">
-        <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-            <slot>
-                <Check class="size-4" />
-            </slot>
-        </CheckboxIndicator>
-    </CheckboxRoot>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
 </template>
diff --git a/components/ui/collapsible/Collapsible.vue b/components/ui/collapsible/Collapsible.vue
index c39dae0..a214de0 100644
--- a/components/ui/collapsible/Collapsible.vue
+++ b/components/ui/collapsible/Collapsible.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";
-import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui";
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
 
 const props = defineProps<CollapsibleRootProps>();
 const emits = defineEmits<CollapsibleRootEmits>();
diff --git a/components/ui/collapsible/CollapsibleContent.vue b/components/ui/collapsible/CollapsibleContent.vue
index 42d722d..438cb61 100644
--- a/components/ui/collapsible/CollapsibleContent.vue
+++ b/components/ui/collapsible/CollapsibleContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from "radix-vue";
+import { CollapsibleContent, type CollapsibleContentProps } from "reka-ui";
 
 const props = defineProps<CollapsibleContentProps>();
 </script>
diff --git a/components/ui/collapsible/CollapsibleTrigger.vue b/components/ui/collapsible/CollapsibleTrigger.vue
index baf5fe9..75bebbb 100644
--- a/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/components/ui/collapsible/CollapsibleTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from "radix-vue";
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from "reka-ui";
 
 const props = defineProps<CollapsibleTriggerProps>();
 </script>
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
index 3237fda..53a1729 100644
--- a/components/ui/command/Command.vue
+++ b/components/ui/command/Command.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
-import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { type HTMLAttributes, computed, reactive, ref, watch } from "vue";
+import { provideCommandContext } from ".";
 
 const props = withDefaults(
-    defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(),
+    defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(),
     {
-        open: true,
         modelValue: "",
     },
 );
 
-const emits = defineEmits<ComboboxRootEmits>();
+const emits = defineEmits<ListboxRootEmits>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -21,11 +21,84 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
+
+const { contains } = useFilter({ sensitivity: "base" });
+const filterState = reactive({
+    search: "",
+    filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: new Map() as Map<string, number>,
+        /** Set of groups with at least one visible item. */
+        groups: new Set() as Set<string>,
+    },
+});
+
+function filterItems() {
+    if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size;
+        // Do nothing, each item will know to show itself because search is empty
+        return;
+    }
+
+    // Reset the groups
+    filterState.filtered.groups = new Set();
+    let itemCount = 0;
+
+    // Check which items should be included
+    for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search);
+        filterState.filtered.items.set(id, score ? 1 : 0);
+        if (score) {
+            itemCount++;
+        }
+    }
+
+    // Check which groups have at least 1 item shown
+    for (const [groupId, group] of allGroups.value) {
+        for (const itemId of group) {
+            if (filterState.filtered.items.get(itemId)) {
+                filterState.filtered.groups.add(groupId);
+                break;
+            }
+        }
+    }
+
+    filterState.filtered.count = itemCount;
+}
+
+function handleSelect() {
+    filterState.search = "";
+}
+
+watch(
+    () => filterState.search,
+    () => {
+        filterItems();
+    },
+);
+
+provideCommandContext({
+    allItems,
+    allGroups,
+    filterState,
+});
 </script>
 
 <template>
-    <ComboboxRoot v-bind="forwarded"
-        :class="cn('flex h-full w-full flex-col overflow-hidden rounded bg-popover text-popover-foreground', props.class)">
+    <ListboxRoot
+        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>
+    </ListboxRoot>
 </template>
diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
index 5e30633..d7ba41f 100644
--- a/components/ui/command/CommandDialog.vue
+++ b/components/ui/command/CommandDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "radix-vue";
-import { useForwardPropsEmits } from "radix-vue";
-import { Dialog, DialogContent } from "~/components/ui/dialog";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
 import Command from "./Command.vue";
 
 const props = defineProps<DialogRootProps>();
diff --git a/components/ui/command/CommandEmpty.vue b/components/ui/command/CommandEmpty.vue
index 15a265a..e687216 100644
--- a/components/ui/command/CommandEmpty.vue
+++ b/components/ui/command/CommandEmpty.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxEmptyProps } from "radix-vue";
-import { ComboboxEmpty } from "radix-vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
+import { useCommand } from ".";
 
 const props = defineProps<
-    ComboboxEmptyProps & { class?: HTMLAttributes["class"] }
+    PrimitiveProps & { class?: HTMLAttributes["class"] }
 >();
 
 const delegatedProps = computed(() => {
@@ -13,10 +14,15 @@ const delegatedProps = computed(() => {
 
     return delegated;
 });
+
+const { filterState } = useCommand();
+const isRender = computed(
+    () => !!filterState.search && filterState.filtered.count === 0,
+);
 </script>
 
 <template>
-  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
-  </ComboboxEmpty>
+  </Primitive>
 </template>
diff --git a/components/ui/command/CommandGroup.vue b/components/ui/command/CommandGroup.vue
index 1863ea1..79bf7a3 100644
--- a/components/ui/command/CommandGroup.vue
+++ b/components/ui/command/CommandGroup.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxGroupProps } from "radix-vue";
-import { ComboboxGroup, ComboboxLabel } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import type { ListboxGroupProps } from "reka-ui";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { type HTMLAttributes, computed, onMounted, onUnmounted } from "vue";
+import { provideCommandGroupContext, useCommand } from ".";
 
 const props = defineProps<
-    ComboboxGroupProps & {
+    ListboxGroupProps & {
         class?: HTMLAttributes["class"];
         heading?: string;
     }
@@ -16,16 +17,43 @@ const delegatedProps = computed(() => {
 
     return delegated;
 });
+
+const { allGroups, filterState } = useCommand();
+const id = useId();
+
+const isRender = computed(() =>
+    filterState.search ? filterState.filtered.groups.has(id) : true,
+);
+
+provideCommandGroupContext({ id });
+onMounted(() => {
+    if (!allGroups.value.has(id)) {
+        allGroups.value.set(id, new Set());
+    }
+});
+onUnmounted(() => {
+    allGroups.value.delete(id);
+});
 </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>
+    <ListboxGroup
+        v-bind="delegatedProps"
+        :id="id"
+        :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
+            )
+        "
+        :hidden="isRender ? undefined : true"
+    >
+        <ListboxGroupLabel
+            v-if="heading"
+            class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+        >
+            {{ heading }}
+        </ListboxGroupLabel>
+        <slot />
+    </ListboxGroup>
 </template>
diff --git a/components/ui/command/CommandInput.vue b/components/ui/command/CommandInput.vue
index df7a563..ae587e5 100644
--- a/components/ui/command/CommandInput.vue
+++ b/components/ui/command/CommandInput.vue
@@ -2,18 +2,19 @@
 import { cn } from "@/lib/utils";
 import { Search } from "lucide-vue-next";
 import {
-    ComboboxInput,
-    type ComboboxInputProps,
+    ListboxFilter,
+    type ListboxFilterProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
+import { useCommand } from ".";
 
 defineOptions({
     inheritAttrs: false,
 });
 
 const props = defineProps<
-    ComboboxInputProps & {
+    ListboxFilterProps & {
         class?: HTMLAttributes["class"];
     }
 >();
@@ -25,12 +26,18 @@ const delegatedProps = computed(() => {
 });
 
 const forwardedProps = useForwardProps(delegatedProps);
+
+const { filterState } = useCommand();
 </script>
 
 <template>
-    <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-        <Search class="mr-2 size-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>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="cn('flex h-10 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/components/ui/command/CommandItem.vue b/components/ui/command/CommandItem.vue
index d7bce6c..6888cd9 100644
--- a/components/ui/command/CommandItem.vue
+++ b/components/ui/command/CommandItem.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";
-import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
-import { type HTMLAttributes, computed } from "vue";
+import { useCurrentElement } from "@vueuse/core";
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import {
+    type HTMLAttributes,
+    computed,
+    onMounted,
+    onUnmounted,
+    ref,
+} from "vue";
+import { useCommand, useCommandGroup } from ".";
 
 const props = defineProps<
-    ComboboxItemProps & { class?: HTMLAttributes["class"] }
+    ListboxItemProps & { class?: HTMLAttributes["class"] }
 >();
-const emits = defineEmits<ComboboxItemEmits>();
+const emits = defineEmits<ListboxItemEmits>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -16,13 +24,72 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+
+const isRender = computed(() => {
+    if (filterState.search) {
+        const filteredCurrentItem = filterState.filtered.items.get(id);
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true;
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0;
+    }
+
+    return true;
+});
+
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement)) {
+        return;
+    }
+
+    // textValue to perform filter
+    allItems.value.set(
+        id,
+        currentElement.value.textContent ?? props.value?.toString() ?? "",
+    );
+
+    const groupId = groupContext?.id;
+    if (groupId) {
+        if (allGroups.value.has(groupId)) {
+            allGroups.value.get(groupId)?.add(id);
+        } else {
+            allGroups.value.set(groupId, new Set([id]));
+        }
+    }
+});
+onUnmounted(() => {
+    allItems.value.delete(id);
+});
 </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>
+    <ListboxItem
+        v-if="isRender"
+        v-bind="forwarded"
+        :id="id"
+        ref="itemRef"
+        :class="
+            cn(
+                'relative flex cursor-default gap-2 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 [&_svg]:size-4 [&_svg]:shrink-0',
+                props.class
+            )
+        "
+        @select="
+            () => {
+                filterState.search = '';
+            }
+        "
+    >
+        <slot />
+    </ListboxItem>
 </template>
diff --git a/components/ui/command/CommandList.vue b/components/ui/command/CommandList.vue
index 648d5a2..f498b2b 100644
--- a/components/ui/command/CommandList.vue
+++ b/components/ui/command/CommandList.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";
-import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
+import type { ListboxContentProps } from "reka-ui";
+import { ListboxContent, useForwardProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
-const props = withDefaults(
-    defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
-    {
-        dismissable: false,
-    },
-);
-const emits = defineEmits<ComboboxContentEmits>();
+const props = defineProps<
+    ListboxContentProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -18,13 +14,13 @@ const delegatedProps = computed(() => {
     return delegated;
 });
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
     <div role="presentation">
       <slot />
     </div>
-  </ComboboxContent>
+  </ListboxContent>
 </template>
diff --git a/components/ui/command/CommandSeparator.vue b/components/ui/command/CommandSeparator.vue
index ff50e9a..be1db49 100644
--- a/components/ui/command/CommandSeparator.vue
+++ b/components/ui/command/CommandSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { ComboboxSeparatorProps } from "radix-vue";
-import { ComboboxSeparator } from "radix-vue";
+import type { SeparatorProps } from "reka-ui";
+import { Separator } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
-    ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }
+    SeparatorProps & { class?: HTMLAttributes["class"] }
 >();
 
 const delegatedProps = computed(() => {
@@ -16,10 +16,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
+  <Separator
     v-bind="delegatedProps"
     :class="cn('-mx-1 h-px bg-border', props.class)"
   >
     <slot />
-  </ComboboxSeparator>
+  </Separator>
 </template>
diff --git a/components/ui/command/index.ts b/components/ui/command/index.ts
index 2f33b76..219bea3 100644
--- a/components/ui/command/index.ts
+++ b/components/ui/command/index.ts
@@ -1,3 +1,6 @@
+import { createContext } from "reka-ui";
+import type { Ref } from "vue";
+
 export { default as Command } from "./Command.vue";
 export { default as CommandDialog } from "./CommandDialog.vue";
 export { default as CommandEmpty } from "./CommandEmpty.vue";
@@ -7,3 +10,20 @@ 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";
+
+export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>;
+    allGroups: Ref<Map<string, Set<string>>>;
+    filterState: {
+        search: string;
+        filtered: {
+            count: number;
+            items: Map<string, number>;
+            groups: Set<string>;
+        };
+    };
+}>("Command");
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string;
+}>("CommandGroup");
diff --git a/components/ui/dialog/Dialog.vue b/components/ui/dialog/Dialog.vue
index ce65a77..e4462e61 100644
--- a/components/ui/dialog/Dialog.vue
+++ b/components/ui/dialog/Dialog.vue
@@ -4,7 +4,7 @@ import {
     type DialogRootEmits,
     type DialogRootProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/components/ui/dialog/DialogClose.vue b/components/ui/dialog/DialogClose.vue
index bc3b70a..d05a7a9 100644
--- a/components/ui/dialog/DialogClose.vue
+++ b/components/ui/dialog/DialogClose.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/components/ui/dialog/DialogContent.vue b/components/ui/dialog/DialogContent.vue
index 45ae95f..8340cfd 100644
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@ import {
     DialogOverlay,
     DialogPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -32,16 +32,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <DialogPortal>
         <DialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 backdrop-blur 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,
-        )">
+            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 v-if="!props.hideClose"
-                class="absolute right-4 top-4 rounded 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="size-4" />
+            <DialogClose
+                v-if="!hideClose"
+                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>
diff --git a/components/ui/dialog/DialogDescription.vue b/components/ui/dialog/DialogDescription.vue
index f9c6516..cdc0e34 100644
--- a/components/ui/dialog/DialogDescription.vue
+++ b/components/ui/dialog/DialogDescription.vue
@@ -4,7 +4,7 @@ import {
     DialogDescription,
     type DialogDescriptionProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/dialog/DialogFooter.vue b/components/ui/dialog/DialogFooter.vue
index eba856f..a3af5f8 100644
--- a/components/ui/dialog/DialogFooter.vue
+++ b/components/ui/dialog/DialogFooter.vue
@@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>();
   <div
     :class="
       cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 gap-y-2',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "
diff --git a/components/ui/dialog/DialogScrollContent.vue b/components/ui/dialog/DialogScrollContent.vue
index 24699f8..b71b0b3 100644
--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -9,7 +9,7 @@ import {
     DialogOverlay,
     DialogPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <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"
+      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="
@@ -52,7 +52,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <DialogClose
           class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class="size-4" />
+          <X class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/components/ui/dialog/DialogTitle.vue b/components/ui/dialog/DialogTitle.vue
index 7c8d52e..80cb385 100644
--- a/components/ui/dialog/DialogTitle.vue
+++ b/components/ui/dialog/DialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue";
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/dialog/DialogTrigger.vue b/components/ui/dialog/DialogTrigger.vue
index 7872f1c..9bb3900 100644
--- a/components/ui/dialog/DialogTrigger.vue
+++ b/components/ui/dialog/DialogTrigger.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/components/ui/drawer/Drawer.vue b/components/ui/drawer/Drawer.vue
index 4a85187..ccd630d 100644
--- a/components/ui/drawer/Drawer.vue
+++ b/components/ui/drawer/Drawer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useForwardPropsEmits } from "radix-vue";
+import { useForwardPropsEmits } from "reka-ui";
 import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
 import { DrawerRoot } from "vaul-vue";
 
diff --git a/components/ui/drawer/DrawerContent.vue b/components/ui/drawer/DrawerContent.vue
index bea29b9..02060ec 100644
--- a/components/ui/drawer/DrawerContent.vue
+++ b/components/ui/drawer/DrawerContent.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
-import type { DialogContentEmits, DialogContentProps } from "radix-vue";
-import { useForwardPropsEmits } from "radix-vue";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
 import { DrawerContent, DrawerPortal } from "vaul-vue";
 import type { HtmlHTMLAttributes } from "vue";
 import DrawerOverlay from "./DrawerOverlay.vue";
diff --git a/components/ui/drawer/DrawerOverlay.vue b/components/ui/drawer/DrawerOverlay.vue
index 3ff11d1..d3260c8 100644
--- a/components/ui/drawer/DrawerOverlay.vue
+++ b/components/ui/drawer/DrawerOverlay.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
-import type { DialogOverlayProps } from "radix-vue";
+import type { DialogOverlayProps } from "reka-ui";
 import { DrawerOverlay } from "vaul-vue";
 import { type HtmlHTMLAttributes, computed } from "vue";
 
diff --git a/components/ui/dropdown-menu/DropdownMenu.vue b/components/ui/dropdown-menu/DropdownMenu.vue
index 031ea14..043f0ed 100644
--- a/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@@ -4,7 +4,7 @@ import {
     type DropdownMenuRootEmits,
     type DropdownMenuRootProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DropdownMenuRootProps>();
 const emits = defineEmits<DropdownMenuRootEmits>();
diff --git a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index ddd63ac..d96189b 100644
--- a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -7,7 +7,7 @@ import {
     type DropdownMenuCheckboxItemProps,
     DropdownMenuItemIndicator,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -25,15 +25,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DropdownMenuCheckboxItem v-bind="forwarded" :class="cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-    )">
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Check class="!mr-0" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuCheckboxItem>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuContent.vue b/components/ui/dropdown-menu/DropdownMenuContent.vue
index b5a0f8b..2dfe34a 100644
--- a/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -6,7 +6,7 @@ import {
     type DropdownMenuContentProps,
     DropdownMenuPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = withDefaults(
diff --git a/components/ui/dropdown-menu/DropdownMenuGroup.vue b/components/ui/dropdown-menu/DropdownMenuGroup.vue
index b1af9b7..6b418e5 100644
--- a/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/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/components/ui/dropdown-menu/DropdownMenuItem.vue b/components/ui/dropdown-menu/DropdownMenuItem.vue
index a2554b4..0ed9ff6 100644
--- a/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -4,7 +4,7 @@ import {
     DropdownMenuItem,
     type DropdownMenuItemProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -21,11 +21,16 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <DropdownMenuItem v-bind="forwardedProps" :class="cn(
-        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:mr-0.5 w-full',
-        inset && 'pl-8',
-        props.class,
-    )">
+    <DropdownMenuItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+                inset && 'pl-8',
+                props.class
+            )
+        "
+    >
         <slot />
     </DropdownMenuItem>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuLabel.vue b/components/ui/dropdown-menu/DropdownMenuLabel.vue
index bcc2f6a..712932d 100644
--- a/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -4,7 +4,7 @@ import {
     DropdownMenuLabel,
     type DropdownMenuLabelProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,8 +24,10 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <DropdownMenuLabel v-bind="forwardedProps"
-        :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
-        <slot />
-    </DropdownMenuLabel>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index bf765f4..8e12b61 100644
--- a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
     type DropdownMenuRadioGroupEmits,
     type DropdownMenuRadioGroupProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 24fbd5f..8552f54 100644
--- a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -7,7 +7,7 @@ import {
     type DropdownMenuRadioItemEmits,
     type DropdownMenuRadioItemProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -26,15 +26,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <DropdownMenuRadioItem v-bind="forwarded" :class="cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-    )">
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Circle class="size-2 fill-current" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index d34e0cd..30fe3f1 100644
--- a/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import {
     DropdownMenuSeparator,
     type DropdownMenuSeparatorProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/dropdown-menu/DropdownMenuSub.vue b/components/ui/dropdown-menu/DropdownMenuSub.vue
index ab75de7..5583629 100644
--- a/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@ import {
     type DropdownMenuSubEmits,
     type DropdownMenuSubProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();
diff --git a/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 005133c..f59ced9 100644
--- a/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -5,7 +5,7 @@ import {
     type DropdownMenuSubContentEmits,
     type DropdownMenuSubContentProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index d975a19..35eb333 100644
--- a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -5,7 +5,7 @@ import {
     DropdownMenuSubTrigger,
     type DropdownMenuSubTriggerProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -30,6 +30,6 @@ const forwardedProps = useForwardProps(delegatedProps);
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto size-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 4eb062c..633a1cd 100644
--- a/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -3,7 +3,7 @@ import {
     DropdownMenuTrigger,
     type DropdownMenuTriggerProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DropdownMenuTriggerProps>();
 
diff --git a/components/ui/dropdown-menu/index.ts b/components/ui/dropdown-menu/index.ts
index 40938d7..9e57848 100644
--- a/components/ui/dropdown-menu/index.ts
+++ b/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/components/ui/form/FormControl.vue b/components/ui/form/FormControl.vue
index 39ceec8..70fb3dd 100644
--- a/components/ui/form/FormControl.vue
+++ b/components/ui/form/FormControl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from "radix-vue";
+import { Slot } from "reka-ui";
 import { useFormField } from "./useFormField";
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
diff --git a/components/ui/form/FormItem.vue b/components/ui/form/FormItem.vue
index 75f7dd5..8021bb0 100644
--- a/components/ui/form/FormItem.vue
+++ b/components/ui/form/FormItem.vue
@@ -1,26 +1,19 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps, useId } from "radix-vue";
+import { useId } from "reka-ui";
 import { type HTMLAttributes, provide } from "vue";
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
 
-const props = withDefaults(
-    defineProps<
-        PrimitiveProps & {
-            class?: HTMLAttributes["class"];
-        }
-    >(),
-    {
-        as: "div",
-    },
-);
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
 
 const id = useId();
 provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
-    <Primitive :as="props.as" :as-child="props.asChild" :class="cn('space-y-2', props.class)">
-        <slot />
-    </Primitive>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
 </template>
diff --git a/components/ui/form/FormLabel.vue b/components/ui/form/FormLabel.vue
index 4da9c2c..dd1f1de 100644
--- a/components/ui/form/FormLabel.vue
+++ b/components/ui/form/FormLabel.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
-import type { LabelProps } from "radix-vue";
+import type { LabelProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
-import { Label } from "~/components/ui/label";
 import { useFormField } from "./useFormField";
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
diff --git a/components/ui/form/index.ts b/components/ui/form/index.ts
index ff08c0b..c4dd42a 100644
--- a/components/ui/form/index.ts
+++ b/components/ui/form/index.ts
@@ -4,4 +4,4 @@ export { default as FormItem } from "./FormItem.vue";
 export { default as FormLabel } from "./FormLabel.vue";
 export { default as FormMessage } from "./FormMessage.vue";
 export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
-export { Field as FormField, Form } from "vee-validate";
+export { Form, Field as FormField } from "vee-validate";
diff --git a/components/ui/hover-card/HoverCard.vue b/components/ui/hover-card/HoverCard.vue
index cebfe02..6174088 100644
--- a/components/ui/hover-card/HoverCard.vue
+++ b/components/ui/hover-card/HoverCard.vue
@@ -4,7 +4,7 @@ import {
     type HoverCardRootEmits,
     type HoverCardRootProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();
diff --git a/components/ui/hover-card/HoverCardContent.vue b/components/ui/hover-card/HoverCardContent.vue
index 141cf82..b1a7846 100644
--- a/components/ui/hover-card/HoverCardContent.vue
+++ b/components/ui/hover-card/HoverCardContent.vue
@@ -5,7 +5,7 @@ import {
     type HoverCardContentProps,
     HoverCardPortal,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = withDefaults(
diff --git a/components/ui/hover-card/HoverCardTrigger.vue b/components/ui/hover-card/HoverCardTrigger.vue
index e7248ae..3f3b187 100644
--- a/components/ui/hover-card/HoverCardTrigger.vue
+++ b/components/ui/hover-card/HoverCardTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from "radix-vue";
+import { HoverCardTrigger, type HoverCardTriggerProps } from "reka-ui";
 
 const props = defineProps<HoverCardTriggerProps>();
 </script>
diff --git a/components/ui/input/Input.vue b/components/ui/input/Input.vue
index 749c180..770afee 100644
--- a/components/ui/input/Input.vue
+++ b/components/ui/input/Input.vue
@@ -19,6 +19,5 @@ const modelValue = useVModel(props, "modelValue", emits, {
 </script>
 
 <template>
-    <input v-model="modelValue"
-        :class="cn('flex h-10 w-full rounded 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:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+  <input 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', props.class)">
 </template>
diff --git a/components/ui/label/Label.vue b/components/ui/label/Label.vue
index 14d5840..7052aee 100644
--- a/components/ui/label/Label.vue
+++ b/components/ui/label/Label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Label, type LabelProps } from "radix-vue";
+import { Label, type LabelProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
diff --git a/components/ui/popover/Popover.vue b/components/ui/popover/Popover.vue
index 5a3f344..967f415 100644
--- a/components/ui/popover/Popover.vue
+++ b/components/ui/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";
-import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui";
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui";
 
 const props = defineProps<PopoverRootProps>();
 const emits = defineEmits<PopoverRootEmits>();
diff --git a/components/ui/popover/PopoverContent.vue b/components/ui/popover/PopoverContent.vue
index 165f002..72ff713 100644
--- a/components/ui/popover/PopoverContent.vue
+++ b/components/ui/popover/PopoverContent.vue
@@ -6,7 +6,7 @@ import {
     type PopoverContentProps,
     PopoverPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 defineOptions({
diff --git a/components/ui/popover/PopoverTrigger.vue b/components/ui/popover/PopoverTrigger.vue
index a824de9..32e1a9b 100644
--- a/components/ui/popover/PopoverTrigger.vue
+++ b/components/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue";
+import { PopoverTrigger, type PopoverTriggerProps } from "reka-ui";
 
 const props = defineProps<PopoverTriggerProps>();
 </script>
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
index dd1fc56..608ff09 100644
--- a/components/ui/select/Select.vue
+++ b/components/ui/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "radix-vue";
-import { SelectRoot, useForwardPropsEmits } from "radix-vue";
+import type { SelectRootEmits, SelectRootProps } from "reka-ui";
+import { SelectRoot, useForwardPropsEmits } from "reka-ui";
 
 const props = defineProps<SelectRootProps>();
 const emits = defineEmits<SelectRootEmits>();
@@ -9,7 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot v-bind="forwarded">
-    <slot />
-  </SelectRoot>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
 </template>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
index 8c299dc..a17faca 100644
--- a/components/ui/select/SelectContent.vue
+++ b/components/ui/select/SelectContent.vue
@@ -7,7 +7,7 @@ import {
     SelectPortal,
     SelectViewport,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 import { SelectScrollDownButton, SelectScrollUpButton } from ".";
 
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
index 2ffe8f4..61eade6 100644
--- a/components/ui/select/SelectGroup.vue
+++ b/components/ui/select/SelectGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectGroup, type SelectGroupProps } from "radix-vue";
+import { SelectGroup, type SelectGroupProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
index e94456b..6637270 100644
--- a/components/ui/select/SelectItem.vue
+++ b/components/ui/select/SelectItem.vue
@@ -7,7 +7,7 @@ import {
     type SelectItemProps,
     SelectItemText,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,23 +24,25 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-10 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <span class="absolute left-3 flex size-3.5 items-center justify-center">
-      <SelectItemIndicator>
-        <Check class="size-4" />
-      </SelectItemIndicator>
-    </span>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class
+            )
+        "
+    >
+        <span
+            class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+        >
+            <SelectItemIndicator>
+                <Check class="h-4 w-4" />
+            </SelectItemIndicator>
+        </span>
 
-    <SelectItemText class="w-full">
-      <slot />
-    </SelectItemText>
-  </SelectItem>
+        <SelectItemText class="w-full">
+            <slot />
+        </SelectItemText>
+    </SelectItem>
 </template>
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
index e2719b8..2438f28 100644
--- a/components/ui/select/SelectItemText.vue
+++ b/components/ui/select/SelectItemText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from "radix-vue";
+import { SelectItemText, type SelectItemTextProps } from "reka-ui";
 
 const props = defineProps<SelectItemTextProps>();
 </script>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
index ab4df03..4cf07eb 100644
--- a/components/ui/select/SelectLabel.vue
+++ b/components/ui/select/SelectLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import { SelectLabel, type SelectLabelProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
index 3e018dc..cf31d5c 100644
--- a/components/ui/select/SelectScrollDownButton.vue
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -5,7 +5,7 @@ import {
     SelectScrollDownButton,
     type SelectScrollDownButtonProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronDown class="size-4" />
+      <ChevronDown class="h-4 w-4" />
     </slot>
   </SelectScrollDownButton>
 </template>
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
index 8065671..c4e39f3 100644
--- a/components/ui/select/SelectScrollUpButton.vue
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -5,7 +5,7 @@ import {
     SelectScrollUpButton,
     type SelectScrollUpButtonProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
     <slot>
-      <ChevronUp class="size-4" />
+      <ChevronUp class="h-4 w-4" />
     </slot>
   </SelectScrollUpButton>
 </template>
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
index 81d657d..b550cec 100644
--- a/components/ui/select/SelectSeparator.vue
+++ b/components/ui/select/SelectSeparator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { SelectSeparator, type SelectSeparatorProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
index bb1f615..3b34880 100644
--- a/components/ui/select/SelectTrigger.vue
+++ b/components/ui/select/SelectTrigger.vue
@@ -6,11 +6,15 @@ import {
     SelectTrigger,
     type SelectTriggerProps,
     useForwardProps,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
-    SelectTriggerProps & { class?: HTMLAttributes["class"] }
+    SelectTriggerProps & {
+        class?: HTMLAttributes["class"];
+        disableDefaultClasses?: boolean;
+        disableSelectIcon?: boolean;
+    }
 >();
 
 const delegatedProps = computed(() => {
@@ -23,16 +27,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
-      props.class,
-    )"
-  >
-    <slot />
-    <SelectIcon as-child>
-      <ChevronDown class="size-4 opacity-50 shrink-0" />
-    </SelectIcon>
-  </SelectTrigger>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                !$props.disableDefaultClasses &&
+                    'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+                props.class
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child v-if="!$props.disableSelectIcon">
+            <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+        </SelectIcon>
+    </SelectTrigger>
 </template>
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
index 61bd93e..30fcb9b 100644
--- a/components/ui/select/SelectValue.vue
+++ b/components/ui/select/SelectValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from "radix-vue";
+import { SelectValue, type SelectValueProps } from "reka-ui";
 
 const props = defineProps<SelectValueProps>();
 </script>
diff --git a/components/ui/separator/Separator.vue b/components/ui/separator/Separator.vue
index 1c818b8..0374082 100644
--- a/components/ui/separator/Separator.vue
+++ b/components/ui/separator/Separator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Separator, type SeparatorProps } from "radix-vue";
+import { Separator, type SeparatorProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/sheet/Sheet.vue b/components/ui/sheet/Sheet.vue
index ce65a77..e4462e61 100644
--- a/components/ui/sheet/Sheet.vue
+++ b/components/ui/sheet/Sheet.vue
@@ -4,7 +4,7 @@ import {
     type DialogRootEmits,
     type DialogRootProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/components/ui/sheet/SheetClose.vue b/components/ui/sheet/SheetClose.vue
index bc3b70a..d05a7a9 100644
--- a/components/ui/sheet/SheetClose.vue
+++ b/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/components/ui/sheet/SheetContent.vue b/components/ui/sheet/SheetContent.vue
index 32791bb..f128b87 100644
--- a/components/ui/sheet/SheetContent.vue
+++ b/components/ui/sheet/SheetContent.vue
@@ -9,7 +9,7 @@ import {
     DialogOverlay,
     DialogPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 import { type SheetVariants, sheetVariants } from ".";
 
@@ -38,7 +38,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <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-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
       :class="cn(sheetVariants({ side }), props.class)"
@@ -49,7 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <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-secondary"
       >
-        <X class="size-4 text-muted-foreground" />
+        <X class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/components/ui/sheet/SheetDescription.vue b/components/ui/sheet/SheetDescription.vue
index c77cdf3..8acfb3a 100644
--- a/components/ui/sheet/SheetDescription.vue
+++ b/components/ui/sheet/SheetDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { DialogDescription, type DialogDescriptionProps } from "radix-vue";
+import { DialogDescription, type DialogDescriptionProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/sheet/SheetTitle.vue b/components/ui/sheet/SheetTitle.vue
index dc7c865..ab33665 100644
--- a/components/ui/sheet/SheetTitle.vue
+++ b/components/ui/sheet/SheetTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { DialogTitle, type DialogTitleProps } from "radix-vue";
+import { DialogTitle, type DialogTitleProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/sheet/SheetTrigger.vue b/components/ui/sheet/SheetTrigger.vue
index 7872f1c..9bb3900 100644
--- a/components/ui/sheet/SheetTrigger.vue
+++ b/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/components/ui/sidebar/Sidebar.vue b/components/ui/sidebar/Sidebar.vue
index db44897..1f3b459 100644
--- a/components/ui/sidebar/Sidebar.vue
+++ b/components/ui/sidebar/Sidebar.vue
@@ -1,30 +1,100 @@
 <script setup lang="ts">
+import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
-import type { HTMLAttributes } from "vue";
+import type { SidebarProps } from ".";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
 
 defineOptions({
     inheritAttrs: false,
 });
 
-const props = withDefaults(
-    defineProps<{
-        side?: "left" | "right";
-        variant?: "sidebar" | "floating" | "inset";
-        collapsible?: "offcanvas" | "icon" | "none";
-        class?: HTMLAttributes["class"];
-    }>(),
-    {
-        side: "left",
-        variant: "sidebar",
-        collapsible: "offcanvas",
-    },
-);
+const props = withDefaults(defineProps<SidebarProps>(), {
+    side: "left",
+    variant: "sidebar",
+    collapsible: "offcanvas",
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
 <template>
-    <aside
-        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground p-1', props.class)"
-        v-bind="$attrs" data-component="sidebar">
+    <div
+        v-if="collapsible === 'none'"
+        :class="
+            cn(
+                'flex h-dvh w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
+                props.class
+            )
+        "
+        v-bind="$attrs"
+    >
         <slot />
-    </aside>
+    </div>
+
+    <Sheet
+        v-else-if="isMobile"
+        :open="openMobile"
+        v-bind="$attrs"
+        @update:open="setOpenMobile"
+    >
+        <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            :side="side"
+            class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            }"
+        >
+            <div class="flex h-full w-full flex-col">
+                <slot />
+            </div>
+        </SheetContent>
+    </Sheet>
+
+    <div
+        v-else
+        class="group peer hidden md:block"
+        :data-state="state"
+        :data-collapsible="state === 'collapsed' ? collapsible : ''"
+        :data-variant="variant"
+        :data-side="side"
+    >
+        <!-- This is what handles the sidebar gap on desktop  -->
+        <div
+            :class="
+                cn(
+                    'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
+                    'group-data-[collapsible=offcanvas]:w-0',
+                    'group-data-[side=right]:rotate-180',
+                    variant === 'floating' || variant === 'inset'
+                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+                )
+            "
+        />
+        <div
+            :class="
+                cn(
+                    'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+                    side === 'left'
+                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                    // Adjust the padding for floating and inset variants.
+                    variant === 'floating' || variant === 'inset'
+                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                    props.class
+                )
+            "
+            v-bind="$attrs"
+        >
+            <div
+                data-sidebar="sidebar"
+                class="flex h-full w-full flex-col text-sidebar-foreground bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            >
+                <slot />
+            </div>
+        </div>
+    </div>
 </template>
diff --git a/components/ui/sidebar/SidebarGroupAction.vue b/components/ui/sidebar/SidebarGroupAction.vue
index 01a816f..63c83db 100644
--- a/components/ui/sidebar/SidebarGroupAction.vue
+++ b/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { PrimitiveProps } from "radix-vue";
-import { Primitive } from "radix-vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = defineProps<
@@ -18,7 +18,6 @@ const props = defineProps<
     :as-child="asChild"
     :class="cn(
       'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      // Increases the hit area of the button on mobile.
       'after:absolute after:-inset-2 after:md:hidden',
       'group-data-[collapsible=icon]:hidden',
       props.class,
diff --git a/components/ui/sidebar/SidebarGroupLabel.vue b/components/ui/sidebar/SidebarGroupLabel.vue
index 18663f9..6141073 100644
--- a/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { PrimitiveProps } from "radix-vue";
-import { Primitive } from "radix-vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/sidebar/SidebarInput.vue b/components/ui/sidebar/SidebarInput.vue
index a87c75a..475221c 100644
--- a/components/ui/sidebar/SidebarInput.vue
+++ b/components/ui/sidebar/SidebarInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
-import Input from "~/components/ui/input/Input.vue";
 
 const props = defineProps<{
     class?: HTMLAttributes["class"];
diff --git a/components/ui/sidebar/SidebarInset.vue b/components/ui/sidebar/SidebarInset.vue
index ec95cfa..0241eed 100644
--- a/components/ui/sidebar/SidebarInset.vue
+++ b/components/ui/sidebar/SidebarInset.vue
@@ -1,30 +1,22 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
-import { SettingIds } from "~/settings";
 
 const props = defineProps<{
     class?: HTMLAttributes["class"];
 }>();
-
-const bgSetting = useSetting(SettingIds.BackgroundURL);
-const bgImage = computed(() =>
-    bgSetting.value.value && URL.canParse(bgSetting.value.value as string)
-        ? bgSetting.value.value
-        : "/images/banner.webp",
-);
 </script>
 
 <template>
-    <main :class="cn(
-        'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
-        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow bg-cover bg-center bg-no-repeat',
-        props.class,
-    )" :style="{
-        backgroundImage: `url('${bgImage}')`,
-    }">
-        <!-- Overlay for the background image -->
-        <div class="absolute -z-10 inset-0 bg-black/20" />
+    <main
+        :class="
+            cn(
+                'relative flex min-h-svh flex-1 flex-col bg-background',
+                'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+                props.class
+            )
+        "
+    >
         <slot />
     </main>
 </template>
diff --git a/components/ui/sidebar/SidebarMenuAction.vue b/components/ui/sidebar/SidebarMenuAction.vue
index cd32f75..4cdac27 100644
--- a/components/ui/sidebar/SidebarMenuAction.vue
+++ b/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "radix-vue";
+import { Primitive, type PrimitiveProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = withDefaults(
@@ -21,7 +21,6 @@ const props = withDefaults(
     data-sidebar="menu-action"
     :class="cn(
       'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-      // Increases the hit area of the button on mobile.
       'after:absolute after:-inset-2 after:md:hidden',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
diff --git a/components/ui/sidebar/SidebarMenuButton.vue b/components/ui/sidebar/SidebarMenuButton.vue
index e2fedcb..70381f5 100644
--- a/components/ui/sidebar/SidebarMenuButton.vue
+++ b/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { type Component, computed } from "vue";
-import Tooltip from "~/components/ui/tooltip/Tooltip.vue";
-import TooltipContent from "~/components/ui/tooltip/TooltipContent.vue";
-import TooltipTrigger from "~/components/ui/tooltip/TooltipTrigger.vue";
 import SidebarMenuButtonChild, {
     type SidebarMenuButtonProps,
 } from "./SidebarMenuButtonChild.vue";
diff --git a/components/ui/sidebar/SidebarMenuButtonChild.vue b/components/ui/sidebar/SidebarMenuButtonChild.vue
index 10413d0..c2851e2 100644
--- a/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { Primitive, type PrimitiveProps } from "radix-vue";
+import { Primitive, type PrimitiveProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from ".";
 
diff --git a/components/ui/sidebar/SidebarMenuSkeleton.vue b/components/ui/sidebar/SidebarMenuSkeleton.vue
index 37f8cf0..cb309e8 100644
--- a/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { type HTMLAttributes, computed } from "vue";
-import Skeleton from "~/components/ui/skeleton/Skeleton.vue";
 
 const props = defineProps<{
     showIcon?: boolean;
diff --git a/components/ui/sidebar/SidebarMenuSubButton.vue b/components/ui/sidebar/SidebarMenuSubButton.vue
index 635cbbc..7ff4568 100644
--- a/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import type { PrimitiveProps } from "radix-vue";
-import { Primitive } from "radix-vue";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 
 const props = withDefaults(
diff --git a/components/ui/sidebar/SidebarProvider.vue b/components/ui/sidebar/SidebarProvider.vue
index 67bec37..5fc3884 100644
--- a/components/ui/sidebar/SidebarProvider.vue
+++ b/components/ui/sidebar/SidebarProvider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
 import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
-import { TooltipProvider } from "radix-vue";
+import { TooltipProvider } from "reka-ui";
 import { type HTMLAttributes, type Ref, computed, ref } from "vue";
 import {
     SIDEBAR_COOKIE_MAX_AGE,
@@ -86,7 +86,8 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper flex h-svh overflow-hidden w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      v-bind="$attrs"
     >
       <slot />
     </div>
diff --git a/components/ui/sidebar/SidebarSeparator.vue b/components/ui/sidebar/SidebarSeparator.vue
index c32edc2..d380af1 100644
--- a/components/ui/sidebar/SidebarSeparator.vue
+++ b/components/ui/sidebar/SidebarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
-import Separator from "~/components/ui/separator/Separator.vue";
 
 const props = defineProps<{
     class?: HTMLAttributes["class"];
diff --git a/components/ui/sidebar/SidebarTrigger.vue b/components/ui/sidebar/SidebarTrigger.vue
index 37493c2..ad22910 100644
--- a/components/ui/sidebar/SidebarTrigger.vue
+++ b/components/ui/sidebar/SidebarTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { PanelLeft } from "lucide-vue-next";
 import type { HTMLAttributes } from "vue";
-import Button from "~/components/ui/button/Button.vue";
 import { useSidebar } from "./utils";
 
 const props = defineProps<{
@@ -17,7 +17,7 @@ const { toggleSidebar } = useSidebar();
     data-sidebar="trigger"
     variant="ghost"
     size="icon"
-    :class="cn('size-7', props.class)"
+    :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
     <PanelLeft />
diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
index 30fa19a..a30148a 100644
--- a/components/ui/sidebar/index.ts
+++ b/components/ui/sidebar/index.ts
@@ -1,4 +1,12 @@
 import { type VariantProps, cva } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+
+export interface SidebarProps {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+    class?: HTMLAttributes["class"];
+}
 
 export { default as Sidebar } from "./Sidebar.vue";
 export { default as SidebarContent } from "./SidebarContent.vue";
@@ -37,9 +45,9 @@ export const sidebarMenuButtonVariants = cva(
                     "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
             },
             size: {
-                default: "h-8 text-sm",
-                sm: "h-7 text-xs",
-                lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+                default: "text-sm",
+                sm: "text-xs",
+                lg: "text-sm group-data-[collapsible=icon]:!p-0",
             },
         },
         defaultVariants: {
diff --git a/components/ui/sidebar/utils.ts b/components/ui/sidebar/utils.ts
index 7ca0669..43e065a 100644
--- a/components/ui/sidebar/utils.ts
+++ b/components/ui/sidebar/utils.ts
@@ -1,4 +1,4 @@
-import { createContext } from "radix-vue";
+import { createContext } from "reka-ui";
 import type { ComputedRef, Ref } from "vue";
 
 export const SIDEBAR_COOKIE_NAME = "sidebar:state";
diff --git a/components/ui/sonner/Sonner.vue b/components/ui/sonner/Sonner.vue
index d961d9d..feedbdf 100644
--- a/components/ui/sonner/Sonner.vue
+++ b/components/ui/sonner/Sonner.vue
@@ -5,14 +5,18 @@ const props = defineProps<ToasterProps>();
 </script>
 
 <template>
-    <Sonner class="toaster group" v-bind="props" :toast-options="{
-        classes: {
-            toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-            description: 'group-[.toast]:text-muted-foreground',
-            actionButton:
-                'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-            cancelButton:
-                'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-        },
-    }" :position="'top-right'" />
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
 </template>
diff --git a/components/ui/switch/Switch.vue b/components/ui/switch/Switch.vue
index cdb9cb0..485c556 100644
--- a/components/ui/switch/Switch.vue
+++ b/components/ui/switch/Switch.vue
@@ -6,7 +6,7 @@ import {
     type SwitchRootProps,
     SwitchThumb,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     )"
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
     >
       <slot name="thumb" />
     </SwitchThumb>
diff --git a/components/ui/tabs/Tabs.vue b/components/ui/tabs/Tabs.vue
index 35b0903..3092855 100644
--- a/components/ui/tabs/Tabs.vue
+++ b/components/ui/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from "radix-vue";
-import { TabsRoot, useForwardPropsEmits } from "radix-vue";
+import type { TabsRootEmits, TabsRootProps } from "reka-ui";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
 
 const props = defineProps<TabsRootProps>();
 const emits = defineEmits<TabsRootEmits>();
diff --git a/components/ui/tabs/TabsContent.vue b/components/ui/tabs/TabsContent.vue
index 2eefa5b..dc8b49f 100644
--- a/components/ui/tabs/TabsContent.vue
+++ b/components/ui/tabs/TabsContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { TabsContent, type TabsContentProps } from "radix-vue";
+import { TabsContent, type TabsContentProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
@@ -17,7 +17,6 @@ const delegatedProps = computed(() => {
 <template>
   <TabsContent
     :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
-    data-component="tabpanel"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
index 264a26a..8be015e 100644
--- a/components/ui/tabs/TabsList.vue
+++ b/components/ui/tabs/TabsList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { TabsList, type TabsListProps } from "radix-vue";
+import { TabsList, type TabsListProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
index 08677fc..34be91a 100644
--- a/components/ui/tabs/TabsTrigger.vue
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from "radix-vue";
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 const props = defineProps<
diff --git a/components/ui/toggle/Toggle.vue b/components/ui/toggle/Toggle.vue
index b7e1602..3c0d1ce 100644
--- a/components/ui/toggle/Toggle.vue
+++ b/components/ui/toggle/Toggle.vue
@@ -5,7 +5,7 @@ import {
     type ToggleEmits,
     type ToggleProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 import { type ToggleVariants, toggleVariants } from ".";
 
@@ -36,10 +36,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Toggle>
+    <Toggle
+        v-bind="forwarded"
+        :class="cn(toggleVariants({ variant, size }), props.class)"
+    >
+        <slot />
+    </Toggle>
 </template>
diff --git a/components/ui/toggle/index.ts b/components/ui/toggle/index.ts
index bfff238..689296f 100644
--- a/components/ui/toggle/index.ts
+++ b/components/ui/toggle/index.ts
@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 export { default as Toggle } from "./Toggle.vue";
 
 export const toggleVariants = cva(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
     {
         variants: {
             variant: {
@@ -12,9 +12,9 @@ export const toggleVariants = cva(
                     "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
             },
             size: {
-                default: "h-10 px-3",
-                sm: "h-9 px-2.5",
-                lg: "h-11 px-5",
+                default: "h-10 px-3 min-w-10",
+                sm: "h-9 px-2.5 min-w-9",
+                lg: "h-11 px-5 min-w-11",
             },
         },
         defaultVariants: {
diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
index b6bdadf..a57df7b 100644
--- a/components/ui/tooltip/Tooltip.vue
+++ b/components/ui/tooltip/Tooltip.vue
@@ -4,7 +4,7 @@ import {
     type TooltipRootEmits,
     type TooltipRootProps,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
index d39c48b..6991183 100644
--- a/components/ui/tooltip/TooltipContent.vue
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -6,7 +6,7 @@ import {
     type TooltipContentProps,
     TooltipPortal,
     useForwardPropsEmits,
-} from "radix-vue";
+} from "reka-ui";
 import { type HTMLAttributes, computed } from "vue";
 
 defineOptions({
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
index 0293593..291b323 100644
--- a/components/ui/tooltip/TooltipProvider.vue
+++ b/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/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
index c6e1c6f..7abe9ec 100644
--- a/components/ui/tooltip/TooltipTrigger.vue
+++ b/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/layouts/app.vue b/layouts/app.vue
index c27a2c4..c72339d 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -1,41 +1,22 @@
 <template>
-    <Sidebar>
-        <slot v-if="!route.meta.requiresAuth || identity" />
-        <Card v-else class="shadow-none border-none p-4 max-w-md mx-auto">
-            <CardHeader class="text-center gap-y-4">
-                <CardTitle>{{ m.sunny_quick_lionfish_flip() }}</CardTitle>
-                <CardDescription>
-                    {{ m.brave_known_pelican_drip() }}
-                </CardDescription>
-            </CardHeader>
-            <CardFooter>
-                <Button variant="secondary" class="w-full" @click="signInAction">
-                    {{ m.fuzzy_sea_moth_absorb() }}
-                </Button>
-            </CardFooter>
-        </Card>
-    </Sidebar>
+    <SidebarProvider>
+        <AppSidebar>
+            <slot v-if="!route.meta.requiresAuth || identity" />
+            <AuthRequired v-else />
+        </AppSidebar>
+    </SidebarProvider>
     <MobileNavbar v-if="identity" />
     <ComposerDialog />
 </template>
 
 <script setup lang="ts">
 import ComposerDialog from "~/components/composer/dialog.vue";
+import AuthRequired from "~/components/errors/AuthRequired.vue";
 import MobileNavbar from "~/components/navigation/mobile-navbar.vue";
-import Sidebar from "~/components/sidebars/sidebar.vue";
-import { Button } from "~/components/ui/button";
-import {
-    Card,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "~/components/ui/card";
-import * as m from "~/paraglide/messages.js";
+import AppSidebar from "~/components/sidebars/sidebar.vue";
+import { SidebarProvider } from "~/components/ui/sidebar";
 import { SettingIds } from "~/settings";
 
-const appData = useAppData();
-const signInAction = async () => signIn(appData, await askForInstance());
 const colorMode = useColorMode();
 const themeSetting = useSetting(SettingIds.Theme);
 const { n, d } = useMagicKeys();
diff --git a/package.json b/package.json
index c63db4d..659d7f9 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
         "nanoid": "^5.1.5",
         "nuxt": "^3.16.1",
         "nuxt-security": "^2.2.0",
-        "radix-vue": "^1.9.17",
+        "reka-ui": "^2.1.1",
         "shadcn-nuxt": "1.0.3",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index 24db443..1c76a2a 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -1,20 +1,30 @@
 <template>
-    <div v-if="loaded" class="mx-auto max-w-2xl w-full rounded overflow-hidden border divide-border divide-y">
+    <div
+        v-if="loaded"
+        class="mx-auto max-w-2xl w-full rounded overflow-hidden border divide-border divide-y"
+    >
         <div>
-            <Note v-for="note, index of context?.ancestors" :note="note" :hide-actions="true"
-                :top-avatar-bar="index !== 0" :bottom-avatar-bar="true" :content-under-username="true" />
+            <Note
+                v-for="(note, index) of context?.ancestors"
+                :note="note"
+                :hide-actions="true"
+                :top-avatar-bar="index !== 0"
+                :bottom-avatar-bar="true"
+                :content-under-username="true"
+            />
             <Note v-if="note" :note="note" :top-avatar-bar="true" />
         </div>
         <Note v-for="note of context?.descendants" :note="note" />
     </div>
 
     <div v-else class="p-4 flex items-center justify-center h-48">
-        <Loader class="size-8 animate-spin" />
+        <Spinner />
     </div>
 </template>
 
 <script setup lang="ts">
 import { Loader } from "lucide-vue-next";
+import Spinner from "~/components/graphics/spinner.vue";
 import Note from "~/components/notes/note.vue";
 import * as m from "~/paraglide/messages.js";
 
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index 6baee0a..c0d6766 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -4,22 +4,22 @@
             <Loader class="size-8 animate-spin" />
         </div>
         <TimelineScroller v-else-if="account">
-            <AccountProfile :account="account" />
-            <AccountTimeline v-if="accountId" :id="accountId" :key="accountId" />
+            <div class="p-4 pb-0">
+                <AccountProfile :account="account" />
+            </div>
+            <AccountTimeline
+                v-if="accountId"
+                :id="accountId"
+                :key="accountId"
+            />
         </TimelineScroller>
-        <Card v-else class="shadow-none bg-transparent border-none p-4">
-            <CardHeader class="text-center gap-y-4">
-                <CardTitle>{{ m.empty_awful_lark_dart() }}</CardTitle>
-                <CardDescription>
-                    {{ m.clean_even_mayfly_tap() }}
-                </CardDescription>
-            </CardHeader>
-        </Card>
+        <NotFound v-else />
     </div>
 </template>
 
 <script setup lang="ts">
 import { Loader } from "lucide-vue-next";
+import NotFound from "~/components/errors/NotFound.vue";
 import AccountProfile from "~/components/profiles/profile.vue";
 import AccountTimeline from "~/components/timelines/account.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
@@ -64,4 +64,4 @@ useSeoMeta({
         noimageindex: !!account.value?.noindex,
     })),
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/global.vue b/pages/global.vue
index 6cfce06..6fcd066 100644
--- a/pages/global.vue
+++ b/pages/global.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Global />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Global />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">
diff --git a/pages/home.vue b/pages/home.vue
index e200d6b..b9680f3 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Home />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Home />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">
diff --git a/pages/index.vue b/pages/index.vue
index 115b819..b60dc49 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,10 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Home v-if="identity" />
-            <Public v-else />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Home v-if="identity" />
+        <Public v-else />
+    </TimelineScroller>
 </template>
 
-
 <script setup lang="tsx">
 import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
diff --git a/pages/local.vue b/pages/local.vue
index bf66cf1..e9cb61b 100644
--- a/pages/local.vue
+++ b/pages/local.vue
@@ -1,12 +1,9 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Local />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Local />
+    </TimelineScroller>
 </template>
 
-
 <script lang="tsx" setup>
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
diff --git a/pages/notifications.vue b/pages/notifications.vue
index fad6ad4..0aadf6d 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <div class="rounded overflow-hidden">
-                <Notifications />
-            </div>
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <div class="rounded overflow-hidden">
+            <Notifications />
+        </div>
+    </TimelineScroller>
 </template>
 
 <script lang="ts" setup>
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index 284675c..94b09c6 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -27,19 +27,36 @@ const hasValidUrlSearchParams =
 </script>
 
 <template>
-    <div class="container relative flex h-svh flex-col items-center justify-center md:flex-row lg:max-w-none lg:px-0">
-        <Button :as="NuxtLink" href="/register" variant="link" class="absolute right-4 top-4 md:right-8 md:top-8">
+    <div
+        class="container relative flex h-svh flex-col items-center justify-center md:flex-row lg:max-w-none lg:px-0"
+    >
+        <Button
+            :as="NuxtLink"
+            href="/register"
+            variant="link"
+            class="absolute right-4 top-4 md:right-8 md:top-8"
+        >
             {{ m.noble_cute_ocelot_aim() }}
         </Button>
-        <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow bg-center bg-no-repeat bg-cover"
+        <div
+            class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow bg-center bg-no-repeat bg-cover"
             :style="{
-                backgroundImage: 'url(/images/banner.webp)'
-            }">
-            <div class="absolute top-0 left-0 w-full h-72 bg-gradient-to-t from-transparent to-black/70" />
+                backgroundImage: 'url(/images/banner.webp)',
+            }"
+        >
+            <div
+                class="absolute top-0 left-0 w-full h-72 bg-gradient-to-t from-transparent to-black/70"
+            />
             <div class="relative z-20 flex items-center text-lg font-medium">
-                <img crossorigin="anonymous"
-                    :src="instance?.thumbnail.url || 'https://cdn.versia.pub/branding/icon.svg'" alt="Versia logo"
-                    class="size-10 mr-4" />
+                <img
+                    crossorigin="anonymous"
+                    :src="
+                        instance?.thumbnail?.url ||
+                        'https://cdn.versia.pub/branding/icon.svg'
+                    "
+                    alt="Versia logo"
+                    class="size-10 mr-4"
+                />
                 {{ instance?.title }}
             </div>
             <!-- <div class="relative z-20 mt-auto">
@@ -56,7 +73,9 @@ const hasValidUrlSearchParams =
             </div> -->
         </div>
         <div class="lg:p-8 w-full max-w-xl">
-            <div class="mx-auto flex w-full flex-col justify-center space-y-10 sm:w-[350px]">
+            <div
+                class="mx-auto flex w-full flex-col justify-center space-y-10 sm:w-[350px]"
+            >
                 <Alert v-if="error" variant="destructive" class="mb-4">
                     <AlertCircle class="size-4" />
                     <AlertTitle>{{ error }}</AlertTitle>
@@ -68,20 +87,29 @@ const hasValidUrlSearchParams =
                     <h1 class="text-2xl font-semibold tracking-tight">
                         {{ m.novel_fine_stork_snap() }}
                     </h1>
-                    <p class="text-sm text-muted-foreground" v-html="m.smug_main_whale_snip({
-                        host: baseUrl.host,
-                    })">
-                    </p>
+                    <p
+                        class="text-sm text-muted-foreground"
+                        v-html="
+                            m.smug_main_whale_snip({
+                                host: baseUrl.host,
+                            })
+                        "
+                    ></p>
                 </div>
                 <template v-if="instance && hasValidUrlSearchParams">
                     <UserAuthForm :instance="instance" />
                 </template>
-                <div v-else-if="hasValidUrlSearchParams" class="p-4 flex items-center justify-center h-48">
+                <div
+                    v-else-if="hasValidUrlSearchParams"
+                    class="p-4 flex items-center justify-center h-48"
+                >
                     <Loader class="size-8 animate-spin" />
                 </div>
                 <Alert v-else variant="destructive" class="mb-4">
                     <AlertCircle class="size-4" />
-                    <AlertTitle>{{ m.grand_spry_goldfish_embrace() }}</AlertTitle>
+                    <AlertTitle>{{
+                        m.grand_spry_goldfish_embrace()
+                    }}</AlertTitle>
                     <AlertDescription>
                         <p>{{ m.gray_clean_shark_comfort() }}</p>
                         <ul class="list-disc list-inside mt-2 font-mono">
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index 76cebea..35e5e3c 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -5,7 +5,7 @@
             backgroundImage: 'url(/images/banner.webp)',
         }"
     >
-        <Card class="w-full max-w-md">
+        <Card class="w-full max-w-md *:w-full p-6">
             <CardHeader>
                 <CardTitle>{{ m.aware_awful_crow_spur() }}</CardTitle>
                 <CardDescription
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 4719ad7..122e495 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -6,7 +6,7 @@
         }"
     >
         <Card
-            class="w-full max-w-md"
+            class="w-full max-w-md *:w-full p-6"
             as="form"
             method="POST"
             :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')"
@@ -26,8 +26,8 @@
                 }}</CardTitle>
             </CardHeader>
             <CardContent>
-                <Card>
-                    <CardContent class="flex flex-col px-4 py-2">
+                <Card class="p-2 gap-1">
+                    <CardContent class="flex flex-col px-4 py-2 w-full">
                         <CardTitle as="h2" class="text-lg">{{
                             application
                         }}</CardTitle>
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index 9ee99e8..0e2b8c6 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -5,7 +5,7 @@
             backgroundImage: 'url(/images/banner.webp)',
         }"
     >
-        <Card v-if="params.success" class="w-full max-w-md">
+        <Card v-if="params.success" class="w-full max-w-md *:w-full">
             <CardHeader>
                 <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
                 <CardDescription>
@@ -57,13 +57,7 @@
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="grid gap-6">
-                    <FormField v-slot="{ componentField }" name="token">
-                        <FormItem>
-                            <FormControl>
-                                <input type="hidden" v-bind="componentField" />
-                            </FormControl>
-                        </FormItem>
-                    </FormField>
+                    <input type="hidden" name="token" :value="params.token" />
                     <FormField v-slot="{ componentField }" name="password">
                         <FormItem>
                             <FormLabel>
@@ -102,7 +96,7 @@
                         </FormItem>
                     </FormField>
                 </CardContent>
-                <CardFooter class="grid gap-2">
+                <CardFooter class="grid gap-2 mt-4">
                     <Button variant="default" type="submit">{{
                         m.noisy_round_skate_yell()
                     }}</Button>
@@ -182,7 +176,7 @@ const formSchema = toTypedSchema(
                 });
             }
             return {};
-        })
+        }),
 );
 
 const params = useUrlSearchParams();
diff --git a/pages/preferences/account.vue b/pages/preferences/account.vue
index dda7b5f..07f8ef1 100644
--- a/pages/preferences/account.vue
+++ b/pages/preferences/account.vue
@@ -1,21 +1,34 @@
 <template>
-    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full space-y-6">
-        <div :class="cn('grid gap-2', profileEditor?.dirty && 'grid-cols-[1fr,auto]')">
-            <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
-                {{ m.tasty_late_termite_sew() }}
-            </h1>
-            <Button v-if="profileEditor?.dirty" @click="profileEditor.submitForm">Save</Button>
-        </div>
-        <div class="grid xl:grid-cols-[1fr,auto] gap-4 *:max-h-[80vh]">
-            <ProfileEditor ref="profileEditor" />
-        </div>
+    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto relative">
+        <ProfileEditor ref="profileEditor" />
+
+        <Transition name="slide-down">
+            <Alert
+                v-if="profileEditor?.dirty"
+                class="grid grid-cols-[1fr_auto] mb-4 absolute top-4 inset-x-4 w-[calc(100%-2rem)]"
+            >
+                <Check class="size-4" />
+                <AlertTitle>Unsaved changes</AlertTitle>
+                <AlertDescription class="col-start-1">
+                    Click "apply" to save your changes.
+                </AlertDescription>
+                <!-- Add pl-4 because Alert is adding additional padding, which we don't want -->
+                <Button
+                    variant="secondary"
+                    @click="profileEditor?.submitForm"
+                    class="w-full col-start-2 row-start-1 row-span-2 !pl-4"
+                    >Apply</Button
+                >
+            </Alert>
+        </Transition>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
 // biome-ignore lint/style/useImportType: <explanation>
 import ProfileEditor from "~/components/preferences/profile/editor.vue";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import * as m from "~/paraglide/messages.js";
 
@@ -34,4 +47,4 @@ definePageMeta({
 });
 
 const profileEditor = ref<InstanceType<typeof ProfileEditor> | null>(null);
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/preferences/emojis.vue b/pages/preferences/emojis.vue
index d6a6561..48accd7 100644
--- a/pages/preferences/emojis.vue
+++ b/pages/preferences/emojis.vue
@@ -68,14 +68,14 @@ const permissions = usePermissions();
 const canUpload = computed(
     () =>
         permissions.value.includes(RolePermission.ManageOwnEmojis) ||
-        permissions.value.includes(RolePermission.ManageEmojis)
+        permissions.value.includes(RolePermission.ManageEmojis),
 );
 
 const emojis = computed(
     () =>
         identity.value?.emojis?.filter((emoji) =>
-            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase())
-        ) ?? []
+            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
+        ) ?? [],
 );
 
 const search = ref("");
diff --git a/pages/public.vue b/pages/public.vue
index ffa6304..9ce2869 100644
--- a/pages/public.vue
+++ b/pages/public.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Public />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Public />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7a12aa5..f64ec2a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -93,20 +93,36 @@ export default (<Config>{
                     },
                 },
                 "accordion-down": {
-                    from: { height: "0" },
-                    to: { height: "var(--radix-accordion-content-height)" },
+                    from: {
+                        height: "0",
+                    },
+                    to: {
+                        height: "var(--reka-accordion-content-height)",
+                    },
                 },
                 "accordion-up": {
-                    from: { height: "var(--radix-accordion-content-height)" },
-                    to: { height: "0" },
+                    from: {
+                        height: "var(--reka-accordion-content-height)",
+                    },
+                    to: {
+                        height: "0",
+                    },
                 },
                 "collapsible-down": {
-                    from: { height: "0" },
-                    to: { height: "var(--radix-collapsible-content-height)" },
+                    from: {
+                        height: "0",
+                    },
+                    to: {
+                        height: "var(--reka-collapsible-content-height)",
+                    },
                 },
                 "collapsible-up": {
-                    from: { height: "var(--radix-collapsible-content-height)" },
-                    to: { height: "0" },
+                    from: {
+                        height: "var(--reka-collapsible-content-height)",
+                    },
+                    to: {
+                        height: "0",
+                    },
                 },
             },
         },
diff --git a/types/sidebar.ts b/types/sidebar.ts
new file mode 100644
index 0000000..3a440c3
--- /dev/null
+++ b/types/sidebar.ts
@@ -0,0 +1,31 @@
+import type { LucideIcon } from "lucide-vue-next";
+import type { Component } from "vue";
+
+export interface SidebarNavItem {
+    title: string;
+    url: string;
+    icon: LucideIcon;
+    requiresLogin?: boolean;
+}
+
+export interface SidebarNavGroup {
+    title: string;
+    items: SidebarNavItem[];
+}
+
+export interface SidebarNavSubItem {
+    title: string;
+    url: string;
+}
+
+export interface SidebarNavMainItem {
+    title: string;
+    url: string;
+    icon: LucideIcon;
+    items: SidebarNavSubItem[];
+}
+
+export interface SidebarConfig {
+    navMain: SidebarNavMainItem[];
+    other: SidebarNavItem[];
+}