diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..b000854
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+tab_width = 4
+trim_trailing_whitespace = true
\ No newline at end of file
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index daa3ff6..7581c4a 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -6,74 +6,80 @@ name: Docker
 # documentation.
 
 on:
-  push:
-    branches: ["main"]
-    # Publish semver tags as releases.
-    tags: ["v*.*.*"]
-  pull_request:
-    branches: ["main"]
+    push:
+        branches: ["main", "refactor/shadcn"]
+        # Publish semver tags as releases.
+        tags: ["v*.*.*"]
+    pull_request:
+        branches: ["main"]
 
 env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
+    # Use docker.io for Docker Hub if empty
+    REGISTRY: ghcr.io
+    # github.repository as <account>/<repo>
+    IMAGE_NAME: ${{ github.repository }}
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      id-token: write
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+            # This is used to complete the identity challenge
+            # with sigstore/fulcio when running outside of PRs.
+            id-token: write
 
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
 
-      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3
-        with:
-          platforms: all
+            - name: Setup QEMU
+              uses: docker/setup-qemu-action@v3
+              with:
+                  platforms: all
 
-      # Set up BuildKit Docker container builder to be able to build
-      # multi-platform images and export cache
-      # https://github.com/docker/setup-buildx-action
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3 # v3.0.0
+            # Set up BuildKit Docker container builder to be able to build
+            # multi-platform images and export cache
+            # https://github.com/docker/setup-buildx-action
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3 # v3.0.0
 
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3 # v3.0.0
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+            # Login against a Docker registry except on PR
+            # https://github.com/docker/login-action
+            - name: Log into registry ${{ env.REGISTRY }}
+              if: github.event_name != 'pull_request'
+              uses: docker/login-action@v3 # v3.0.0
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
 
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5 # v5.0.0
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+            # Extract metadata (tags, labels) for Docker
+            # https://github.com/docker/metadata-action
+            - name: Extract Docker metadata
+              id: meta
+              uses: docker/metadata-action@v5 # v5.0.0
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+                  tags: |
+                      type=schedule
+                      type=ref,event=branch
+                      type=ref,event=tag
+                      type=ref,event=pr
+                      type=sha
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        id: build-and-push
-        uses: docker/build-push-action@v5 # v5.0.0
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          provenance: mode=max
-          sbom: true
+            # Build and push Docker image with Buildx (don't push on PR)
+            # https://github.com/docker/build-push-action
+            - name: Build and push Docker image
+              id: build-and-push
+              uses: docker/build-push-action@v5 # v5.0.0
+              with:
+                  context: .
+                  push: ${{ github.event_name != 'pull_request' }}
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+                  platforms: linux/amd64,linux/arm64
+                  cache-from: type=gha
+                  cache-to: type=gha,mode=max
+                  provenance: mode=max
+                  sbom: true
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..b797c17
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+    "recommendations": ["inlang.vs-code-extension"]
+}
diff --git a/Dockerfile b/Dockerfile
index a0666e5..d108d96 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,3 +1,4 @@
+# Paraglide doesn't properly work with Bun, so it needs Node
 FROM imbios/bun-node:22-alpine AS base
 
 # Install dependencies into temp directory
@@ -6,6 +7,7 @@ FROM base AS install
 
 RUN mkdir -p /temp/dev
 COPY package.json bun.lockb /temp/dev/
+COPY project.inlang /temp/dev/project.inlang
 RUN cd /temp/dev && bun install --frozen-lockfile
 
 FROM base AS builder
@@ -13,11 +15,13 @@ FROM base AS builder
 COPY . /app
 COPY --from=install /temp/dev/node_modules /app/node_modules
 RUN cd /app && bun run emojis:generate
-RUN cd /app && bun run build --preset node-server
+RUN cd /app && bun run build
 
-FROM oven/bun:1.1.34-alpine AS final
+# Run final web server
+FROM ghcr.io/static-web-server/static-web-server:2-alpine AS final
 
-COPY --from=builder /app/.output/ /app
+COPY --from=builder /app/.output/public /app/public
+COPY sws.toml /etc/config.toml
 
 LABEL org.opencontainers.image.authors="Gaspard Wierzbinski (https://cpluspatch.com)"
 LABEL org.opencontainers.image.source="https://github.com/versia-pub/frontend"
@@ -27,4 +31,5 @@ LABEL org.opencontainers.image.title="Versia-FE"
 LABEL org.opencontainers.image.description="Frontend for the Versia Server Project"
 
 WORKDIR /app
-CMD ["bun", "run", "server/index.mjs"]
\ No newline at end of file
+EXPOSE 3000
+CMD ["static-web-server", "--config-file", "/etc/config.toml"]
\ No newline at end of file
diff --git a/README.md b/README.md
index f800c96..96f57ce 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,42 @@
-<p align="center">
-  <a href="https://versia.pub"><img src="https://cdn.versia.pub/branding/logo-dark.svg" alt="Versia Logo" height="110"></a>
-</p>
+<div align="center">
+    <a href="https://versia.pub">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://cdn.versia.pub/branding/logo-dark.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://cdn.versia.pub/branding/logo-light.svg">
+            <img src="https://cdn.versia.pub/branding/logo-dark.svg" alt="Versia Logo" height="110" />
+        </picture>
+    </a>
+</div>
 
-<center><h1><code>versia-fe</code></h1></center>
 
-**Versia-FE** is a beautiful, fast and responsive front-end for the Versia Server project.
+<h2 align="center">
+  <strong><code>Versia Frontend</code></strong>
+</h2>
 
-## Features
+<div align="center">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" height="42" width="52" alt="TypeScript logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" height="42" width="52" alt="Vue logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nuxtjs/nuxtjs-original.svg" height="42" width="52" alt="Nuxt logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" height="42" width="52" alt="Docker logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bun/bun-original.svg" height="42" width="52" alt="Bun logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" height="42" width="52" alt="CSS3 logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" height="42" width="52" alt="HTML5 logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" height="42" width="52" alt="Linux logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" height="42" width="52" alt="TailwindCSS logo">
+</div>
+
+
+<br/>
+
+<div align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/ipad-dark.webp">
+        <source media="(prefers-color-scheme: light)" srcset="assets/ipad-light.webp">
+        <img alt="Versia-FE screenshot on an iPad Pro" src="assets/ipad-dark.webp" height="400" />
+    </picture>
+</div>
+
+# Features
 
 - [x] Timelines: public, home, local
 - [x] Login
@@ -22,12 +52,11 @@
 - [x] Note editing
 - [x] Alt text support everywhere
 - [x] Media uploads
-- [x] WCAG 2.2 AAA compliance
-  - Testing is automated and may not catch all issues, please report any accessibility issues you find.
+- [x] WCAG 2.2 AAA testing
 - [x] Settings
 - [x] Profile editing
 
-### Browser Support
+## Browser Support
 
 The following browsers are **supported** (issues will be prioritized):
 - **Chromium**: `110+`
@@ -43,27 +72,27 @@ The following browsers will very likely work, but are not officially supported:
 
 Other browsers may work, but are not guaranteed to.
 
-## Performance
+# Performance
 
-### JavaScript Bloat
+## JavaScript
 
-The **total** JavaScript bundle size is less than `900 kB`, but this is made even smaller by the fact that the bundle is split into multiple files, and only the necessary files are loaded on each page.
+The **total** JavaScript bundle size is less than `1000 kB`, but this is made even smaller by the fact that the bundle is split into multiple files, and only the necessary files are loaded on each page.
 
-### Benchmarks
+## Benchmarks
 
-Benchmarks are due to be conducted soon™.
+Soon™.
 
-## Installation
+# Installation
 
 Versia-FE is included in the provided `docker-compose` file during [Versia Server installation](https://github.com/versia-pub/server/blob/main/docs/installation.md).
 
 To have Versia-FE and Versia Server running on the same domain, edit the Versia Server configuration to point to the Versia-FE container's address (`frontend` category inside config).
 
-### Manual Installation
+## Manual Installation
 
 Here are the steps to install Versia-FE manually:
 
-#### Docker/Podman
+### Docker/Podman
 
 ```yaml
 services:
@@ -73,29 +102,52 @@ services:
         restart: unless-stopped
         networks:
             - versia-net
-        environment:
-            NUXT_PUBLIC_API_HOST: https://yourserver.com
-            # For Tor users, set the following environment variable in addition to the above
-            # NUXT_PUBLIC_ONION_API_HOST: http://youronionserver.onion
 ```
 
-Then, the frontend will be available at `http://localhost:3000` inside the container. To link it to a Versia Server, set the `NUXT_PUBLIC_API_HOST` environment variable to the server's URL.
+Then, the frontend will be available at `http://localhost:3000` inside the container.
 
-## Development
+> [!TIP]
+>
+> By default, Versia-FE will connect to any Versia Server instance running on the same domain.
+>
+> You can set the `NUXT_PUBLIC_API_HOST` environment variable to point to a different Versia Server instance.
 
-Make sure to run `bun run emojis:generate` to generate the emoji list before building or running the project.
+### Manual
 
-## License
+1. Clone the repository.
+```bash
+git clone https://github.com/versia-pub/frontend.git
+```
+2. Install dependencies.
+```bash
+bun install
+```
+3. Build the project.
+```bash
+bun run build
+```
+4. Serve the static files in the `.output/public` directory.
+> [!WARNING]
+>
+> `.output/public/200.html` should be configured as a fallback for all 404 errors.
+
+# Development
+
+Run `bun run emojis:generate` to generate the emoji list before building or running the project.
+
+# License
 
 This project is licensed under the AGPL 3.0 - see the [LICENSE](LICENSE) file for details.
 
-## Acknowledgments
+All Versia assets (icon, logo, banners, etc) are licensed under [CC-BY-NC-SA-4.0](https://creativecommons.org/licenses/by-nc-sa/4.0).
 
-### Projects
+# Acknowledgments
+
+## Projects
 
 - [**Bun**](https://bun.sh): Thanks to the Bun team for creating an amazing JavaScript runtime.
 - [**Nuxt**](https://nuxt.com): Thanks to the Nuxt team for creating an amazing Vue framework.
 
-### People
+## People
 
-- [**April John**](https://github.com/cutestnekoaqua): Creator and maintainer of the Versia Server ActivityPub bridge.
\ No newline at end of file
+- [**April John**](https://github.com/cutestnekoaqua): Creator and maintainer of the Versia Server ActivityPub bridge.
diff --git a/app.vue b/app.vue
index 36e1647..0a9972f 100644
--- a/app.vue
+++ b/app.vue
@@ -1,34 +1,46 @@
 <template>
-    <ClientOnly>
+    <TooltipProvider>
         <Component is="style">
             {{ customCss.value }}
         </Component>
-    </ClientOnly>
-    <NuxtPwaAssets />
-    <ClientOnly>
+        <NuxtPwaAssets />
         <NuxtLayout>
             <NuxtPage />
         </NuxtLayout>
-        <NotificationsRenderer />
         <ConfirmationModal />
-    </ClientOnly>
+        <!-- pointer-events-auto fixes https://github.com/unovue/shadcn-vue/issues/462 -->
+        <Toaster class="pointer-events-auto" />
+    </TooltipProvider>
 </template>
 
 <script setup lang="ts">
 import "~/styles/theme.css";
+import "~/styles/index.css";
 import { convert } from "html-to-text";
-import "iconify-icon";
-import NotificationsRenderer from "./components/notifications/notifications-renderer.vue";
-import { SettingIds } from "./settings";
-import ConfirmationModal from "./components/modals/confirmation.vue";
-// Use SSR-safe IDs for Headless UI
-provideHeadlessUseId(() => useId());
+import ConfirmationModal from "./components/modals/confirm.vue";
+import { Toaster } from "./components/ui/sonner";
+import { setLanguageTag } from "./paraglide/runtime";
+import { type EnumSetting, SettingIds } from "./settings";
+// Sin
+//import "~/styles/mcdonalds.css";
+
+const lang = useLanguage();
+setLanguageTag(lang.value);
 
 const code = useRequestURL().searchParams.get("code");
 const appData = useAppData();
 const instance = useInstance();
 const description = useExtendedDescription(client);
 const customCss = useSetting(SettingIds.CustomCSS);
+const route = useRoute();
+
+// Theme switcher
+const theme = useSetting(SettingIds.Theme) as Ref<EnumSetting>;
+const colorMode = useColorMode();
+
+watch(theme.value, () => {
+    colorMode.preference = theme.value.value;
+});
 
 useSeoMeta({
     titleTemplate: (titleChunk) => {
@@ -59,7 +71,7 @@ useHead({
     ],
 });
 
-if (code && appData.value) {
+if (code && appData.value && route.path !== "/oauth/code") {
     signInWithCode(code, appData.value);
 }
 
@@ -72,17 +84,7 @@ useCacheRefresh(client);
 </script>
 
 <style>
-@import url("overlayscrollbars/overlayscrollbars.css");
-
 body {
     font-family: Inter, sans-serif;
 }
-
-.os-scrollbar .os-scrollbar-handle {
-    background: #9999;
-}
-
-.os-scrollbar .os-scrollbar-handle:hover {
-    background: #6666;
-}
 </style>
\ No newline at end of file
diff --git a/app/spa-loading-template.html b/app/spa-loading-template.html
new file mode 100644
index 0000000..d2fbff5
--- /dev/null
+++ b/app/spa-loading-template.html
@@ -0,0 +1,47 @@
+<div class="loader-container">
+    <div class="loader-spinner-container">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round" class="lucide lucide-loader-icon loader-spinner">
+            <path d="M12 2v4"></path>
+            <path d="m16.2 7.8 2.9-2.9"></path>
+            <path d="M18 12h4"></path>
+            <path d="m16.2 16.2 2.9 2.9"></path>
+            <path d="M12 18v4"></path>
+            <path d="m4.9 19.1 2.9-2.9"></path>
+            <path d="M2 12h4"></path>
+            <path d="m4.9 4.9 2.9 2.9"></path>
+        </svg>
+    </div>
+</div>
+
+<style>
+    .loader-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100dvh;
+        width: 100dvw;
+        padding: 1.5rem;
+    }
+
+    .loader-spinner-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loader-spinner {
+        animation: spin 1s linear infinite;
+        width: 2rem;
+        height: 2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/assets/ipad-dark.webp b/assets/ipad-dark.webp
new file mode 100644
index 0000000..57a451f
Binary files /dev/null and b/assets/ipad-dark.webp differ
diff --git a/assets/ipad-light.webp b/assets/ipad-light.webp
new file mode 100644
index 0000000..b6fb5ba
Binary files /dev/null and b/assets/ipad-light.webp differ
diff --git a/biome.json b/biome.json
index 2674238..b5b3cec 100644
--- a/biome.json
+++ b/biome.json
@@ -1,8 +1,7 @@
 {
     "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
     "organizeImports": {
-        "enabled": true,
-        "ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
+        "enabled": true
     },
     "linter": {
         "enabled": true,
@@ -11,6 +10,9 @@
             "suspicious": {
                 "noConsole": "off"
             },
+            "performance": {
+                "noBarrelFile": "off"
+            },
             "correctness": {
                 "noNodejsModules": "off",
                 "noUndeclaredVariables": "off",
@@ -65,13 +67,20 @@
                 "noDuplicateElseIf": "error",
                 "noCommonJs": "error"
             }
-        },
-        "ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
+        }
     },
     "formatter": {
         "enabled": true,
         "indentStyle": "space",
-        "indentWidth": 4,
-        "ignore": ["node_modules/**/*", "dist/**/*", ".output", ".nuxt"]
+        "indentWidth": 4
+    },
+    "files": {
+        "ignore": [
+            "node_modules/**/*",
+            "dist/**/*",
+            ".output",
+            ".nuxt",
+            "paraglide"
+        ]
     }
 }
diff --git a/bun.lockb b/bun.lockb
index 1a7a99b..d4152ae 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..2fc290f
--- /dev/null
+++ b/components.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tsConfigPath": ".nuxt/tsconfig.json",
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "styles/index.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "framework": "nuxt",
+    "aliases": {
+        "components": "~/components",
+        "utils": "@/lib/utils"
+    }
+}
diff --git a/components/avatars/avatar.vue b/components/avatars/avatar.vue
deleted file mode 100644
index e76ef78..0000000
--- a/components/avatars/avatar.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
-        <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
-            <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
-        </Skeleton>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import Skeleton from "../skeleton/Skeleton.vue";
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = defineProps<{
-    src?: string;
-    alt?: string;
-}>();
-const imageLoaded = ref(false);
-
-watch(
-    () => props.src,
-    (src) => {
-        if (!src) {
-            return;
-        }
-
-        // Load in background
-        const img = new Image();
-        img.src = src;
-
-        img.onload = () => {
-            imageLoaded.value = true;
-        };
-    },
-    { immediate: true },
-);
-</script>
\ No newline at end of file
diff --git a/components/buttons/button-dropdown.vue b/components/buttons/button-dropdown.vue
deleted file mode 100644
index 2463143..0000000
--- a/components/buttons/button-dropdown.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <ButtonBase class="enabled:hover:bg-white/20 text-sm !rounded-sm !ring-0 !py-3 sm:!py-1.5 sm:!px-2 !justify-start">
-        <Icon :icon="icon" />
-        <slot />
-    </ButtonBase>
-</template>
-
-<script lang="ts" setup>
-import type { ButtonHTMLAttributes } from "vue";
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
-
-defineProps<
-    Props & {
-        icon: string;
-    }
->();
-</script>
-
-<style></style>
\ No newline at end of file
diff --git a/components/buttons/button-mobile-navbar.vue b/components/buttons/button-mobile-navbar.vue
deleted file mode 100644
index 93effdd..0000000
--- a/components/buttons/button-mobile-navbar.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <ButtonBase class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
-        <Icon :icon="icon" class="!size-6" />
-    </ButtonBase>
-</template>
-
-<script lang="ts" setup>
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-
-defineProps<{
-    icon: string;
-    text: string;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/action-buttons.vue b/components/composer/action-buttons.vue
deleted file mode 100644
index d02b603..0000000
--- a/components/composer/action-buttons.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <div class="flex flex-row gap-1 border-white/20">
-        <Button title="Mention someone" @click="content = content + '@'">
-            <iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
-        </Button>
-        <Button title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
-            <iconify-icon width="1.25rem" height="1.25rem"
-                :icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
-        </Button>
-        <Button title="Use a custom emoji">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
-        </Button>
-        <Button title="Add media" @click="emit('filePickerOpen')">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
-        </Button>
-        <Button title="Add a file" @click="emit('filePickerOpen')">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
-        </Button>
-        <Button title="Add content warning" @click="cw = !cw" :toggled="cw">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
-        </Button>
-        <ButtonBase theme="primary" :loading="loading" @click="emit('send')" class="ml-auto rounded-full"
-            :disabled="!canSubmit || loading">
-            {{
-                respondingType === "edit" ? "Edit!" : "Send!"
-            }}
-        </ButtonBase>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import Button from "./button.vue";
-
-defineProps<{
-    loading: boolean;
-    canSubmit: boolean;
-    respondingType: string | null;
-}>();
-
-const emit = defineEmits<{
-    send: [];
-    filePickerOpen: [];
-}>();
-
-const cw = defineModel<boolean>("cw", {
-    required: true,
-});
-const content = defineModel<string>("content", {
-    required: true,
-});
-const markdown = defineModel<boolean>("markdown", {
-    required: true,
-});
-</script>
\ No newline at end of file
diff --git a/components/composer/autocomplete-suggestbox.vue b/components/composer/autocomplete-suggestbox.vue
deleted file mode 100644
index af58f8d..0000000
--- a/components/composer/autocomplete-suggestbox.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
-        left: `${x}px`,
-        top: `${y}px`,
-        width: `${width}px`,
-    }" v-show="topSuggestions && topSuggestions.length > 0">
-        <OverlayScrollbarsComponent class="w-full [&>div]:flex">
-            <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
-                @click="emit('autocomplete', suggestion.key)"
-                :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
-                :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
-                <slot :suggestion="suggestion"></slot>
-            </div>
-        </OverlayScrollbarsComponent>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-
-const props = defineProps<{
-    currentlyTyping: string | null;
-    textarea: HTMLTextAreaElement | undefined;
-    suggestions: Array<{ key: string; value: unknown }>;
-    distanceFunction: (a: string, b: string) => number;
-}>();
-
-const suggestionRefs = ref<Element[]>([]);
-// Allow the user to navigate the suggestions with the arrow keys
-// and select a suggestion with the Tab or Enter key
-const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
-    target: props.textarea,
-    passive: false,
-    onEventFired(e) {
-        if (
-            ["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
-            topSuggestions.value !== null
-        ) {
-            e.preventDefault();
-        }
-    },
-});
-const topSuggestions = ref<Array<{ key: string; value: unknown }> | null>(null);
-const selectedSuggestionIndex = ref<number | null>(null);
-
-const x = ref(0);
-const y = ref(0);
-const width = ref(0);
-const TOP_PADDING = 10;
-
-useEventListener(props.textarea, "keyup", () => {
-    recalculatePosition();
-});
-
-const recalculatePosition = () => {
-    if (props.textarea) {
-        const target = props.textarea;
-        const position = target.selectionEnd;
-        // Get x, y position of the cursor in the textarea
-        const { top, left } = target.getBoundingClientRect();
-        const lineHeight = Number.parseInt(
-            getComputedStyle(target).lineHeight ?? "0",
-            10,
-        );
-        const lines = target.value.slice(0, position).split("\n");
-        const line = lines.length - 1;
-        x.value = left;
-        // Spawn one line below the cursor, so add +1
-        y.value = top + (line + 1) * lineHeight + TOP_PADDING;
-        width.value = target.clientWidth;
-    }
-};
-
-watchEffect(() => {
-    if (props.currentlyTyping !== null) {
-        topSuggestions.value = props.suggestions
-            .map((suggestion) => ({
-                ...suggestion,
-                distance: props.distanceFunction(
-                    props.currentlyTyping as string,
-                    suggestion.key,
-                ),
-            }))
-            .sort((a, b) => a.distance - b.distance)
-            .slice(0, 20);
-    } else {
-        topSuggestions.value = null;
-    }
-
-    if (ArrowRight?.value && topSuggestions.value !== null) {
-        selectedSuggestionIndex.value =
-            (selectedSuggestionIndex.value ?? -1) + 1;
-        if (selectedSuggestionIndex.value >= topSuggestions.value.length) {
-            selectedSuggestionIndex.value = 0;
-        }
-        suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-        });
-    }
-
-    if (ArrowLeft?.value && topSuggestions.value !== null) {
-        selectedSuggestionIndex.value =
-            (selectedSuggestionIndex.value ?? topSuggestions.value.length) - 1;
-        if (selectedSuggestionIndex.value < 0) {
-            selectedSuggestionIndex.value = topSuggestions.value.length - 1;
-        }
-        suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-        });
-    }
-
-    if ((Tab?.value || Enter?.value) && topSuggestions.value !== null) {
-        const suggestion =
-            topSuggestions.value[selectedSuggestionIndex.value ?? 0];
-        if (suggestion) {
-            emit("autocomplete", suggestion.key);
-        }
-    }
-});
-
-const emit = defineEmits<{
-    autocomplete: [suggestion: string];
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/button.vue b/components/composer/button.vue
deleted file mode 100644
index 5b18a5d..0000000
--- a/components/composer/button.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <button v-bind="$props"
-        :class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
-        <slot />
-    </button>
-</template>
-
-<script lang="ts" setup>
-import type { ButtonHTMLAttributes } from "vue";
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
-
-defineProps<
-    Props & {
-        toggled?: boolean;
-    }
->();
-</script>
\ No newline at end of file
diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 5090665..7a4a69a 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -1,222 +1,299 @@
 <template>
-    <RespondingTo v-if="respondingTo" :respondingTo="respondingTo" />
-    <div class="px-6 pb-4 pt-5">
-        <RichTextbox v-model:content="content" :loading="loading" :chosenSplash="chosenSplash" :characterLimit="characterLimit"
-            :handle-paste="handlePaste" />
-        <ContentWarning v-model:cw="cw" v-model:cwContent="cwContent" />
-        <FileUploader :files="files" ref="uploader" @add-file="(newFile) => {
-            files.push(newFile);
-        }" @change-file="(changedFile) => {
-            const index = files.findIndex((file) => file.id === changedFile.id);
-            if (index !== -1) {
-                files[index] = changedFile;
-            }
-        }" @remove-file="(id) => {
-            files.splice(files.findIndex((file) => file.id === id), 1);
-        }" />
-        <ActionButtons v-model:content="content" v-model:markdown="markdown" v-model:cw="cw" :loading="loading" :canSubmit="canSubmit"
-            :respondingType="respondingType" @send="send" @file-picker-open="openFilePicker" />
+    <div v-if="relation" class="rounded border overflow-auto max-h-72">
+        <Note :note="relation.note" :hide-actions="true" :small-layout="true" />
     </div>
+
+    <Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
+        placeholder="Put your content warning here" />
+
+    <Textarea :placeholder="chosenSplash" v-model:model-value="state.content"
+        class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0"
+        :disabled="sending" />
+
+    <div class="w-full flex flex-row gap-2 overflow-x-auto *:shrink-0 pb-2">
+        <input type="file" ref="fileInput" @change="uploadFileFromEvent" class="hidden" multiple />
+        <Files v-model:files="state.files" />
+    </div>
+
+    <DialogFooter class="items-center flex-row">
+        <Tooltip>
+            <TooltipTrigger as="div">
+                <Button variant="ghost" size="icon">
+                    <AtSign class="!size-5" />
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>{{ m.game_tough_seal_adore() }}</p>
+            </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+            <TooltipTrigger as="div">
+                <Toggle variant="default" size="sm" :pressed="state.contentType === 'text/markdown'"
+                    @update:pressed="i => state.contentType = i ? 'text/plain' : 'text/markdown'">
+                    <LetterText class="!size-5" />
+                </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>{{ m.plane_born_koala_hope() }}</p>
+            </TooltipContent>
+        </Tooltip>
+        <Select v-model:model-value="state.visibility">
+            <SelectTrigger :as-child="true" :disabled="relation?.type === 'edit'">
+                <Button variant="ghost" size="icon">
+                    <component :is="visibilities[state.visibility].icon" class="!size-5" />
+                </Button>
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem v-for="(v, k) in visibilities" :key="k" @click="state.visibility = k" :value="k">
+                    <div class="flex flex-row gap-4 items-center w-full justify-between">
+                        <div class="flex flex-col gap-1">
+                            <span class="font-semibold">{{ v.name }}</span>
+                            <span>{{ v.text }}</span>
+                        </div>
+                        <component :is="v.icon" class="!size-5" />
+                    </div>
+                </SelectItem>
+            </SelectContent>
+        </Select>
+        <Tooltip>
+            <TooltipTrigger as="div">
+                <Button variant="ghost" size="icon">
+                    <Smile class="!size-5" />
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>{{ m.blue_ornate_coyote_tickle() }}</p>
+            </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+            <TooltipTrigger as="div">
+                <Button variant="ghost" size="icon" @click="fileInput?.click()">
+                    <FilePlus2 class="!size-5" />
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>{{ m.top_patchy_earthworm_vent() }}</p>
+            </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+            <TooltipTrigger as="div">
+                <Toggle variant="default" size="sm" v-model:pressed="state.sensitive">
+                    <TriangleAlert class="!size-5" />
+                </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>{{ m.frail_broad_mallard_dart() }}</p>
+            </TooltipContent>
+        </Tooltip>
+        <Button type="submit" size="lg" class="ml-auto" :disabled="sending" @click="submit">
+            <Loader v-if="sending" class="!size-5 animate-spin" />
+            {{ relation?.type === "edit" ? m.gaudy_strong_puma_slide() : m.free_teal_bulldog_learn() }}
+        </Button>
+    </DialogFooter>
 </template>
 
 <script lang="ts" setup>
-import type { Instance, Status } from "@versia/client/types";
-import { nanoid } from "nanoid";
-import { computed, onMounted, ref, watch, watchEffect } from "vue";
-import { useConfig, useEvent, useListen, useMagicKeys } from "#imports";
-import ActionButtons from "./action-buttons.vue";
-import ContentWarning from "./content-warning.vue";
-import RespondingTo from "./responding-to.vue";
-import RichTextbox from "./rich-text-box.vue";
-// biome-ignore lint/style/useImportType: <explanation>
-import FileUploader from "./uploader/uploader.vue";
-import type { FileData } from "./uploader/uploader.vue";
+import type { ResponseError } from "@versia/client";
+import type { Status, StatusSource } from "@versia/client/types";
+import {
+    AtSign,
+    FilePlus2,
+    Globe,
+    LetterText,
+    Loader,
+    Lock,
+    LockOpen,
+    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 * as m from "~/paraglide/messages.js";
+import { SettingIds } from "~/settings";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Toggle } from "../ui/toggle";
+import Files from "./files.vue";
 
-const uploader = ref<InstanceType<typeof FileUploader> | undefined>(undefined);
-const { Control_Enter, Command_Enter, Control_Alt } = useMagicKeys();
-const content = ref("");
-const respondingTo = ref<Status | null>(null);
-const respondingType = ref<"reply" | "quote" | "edit" | null>(null);
-const cw = ref(false);
-const cwContent = ref("");
-const markdown = ref(true);
+const { Control_Enter, Command_Enter } = useMagicKeys();
+const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
+const fileInput = ref<HTMLInputElement | null>(null);
 
-const splashes = useConfig().COMPOSER_SPLASHES;
-const chosenSplash = ref(
-    splashes[Math.floor(Math.random() * splashes.length)] as string,
-);
-
-const openFilePicker = () => {
-    uploader.value?.openFilePicker();
-};
-
-const files = ref<FileData[]>([]);
-
-const handlePaste = (event: ClipboardEvent) => {
-    if (event.clipboardData) {
-        const items = Array.from(event.clipboardData.items);
-        const newFiles = items
-            .filter((item) => item.kind === "file")
-            .map((item) => item.getAsFile())
-            .filter((file): file is File => file !== null);
-        if (newFiles.length > 0) {
-            event.preventDefault();
-            files.value.push(
-                ...newFiles.map((file) => ({
-                    id: nanoid(),
-                    file,
-                    progress: 0,
-                    uploading: true,
-                })),
-            );
-        }
+watch([Control_Enter, Command_Enter], () => {
+    if (sending.value || !ctrlEnterSend.value.value) {
+        return;
     }
-};
 
-watch(Control_Alt as ComputedRef<boolean>, () => {
-    chosenSplash.value = splashes[
-        Math.floor(Math.random() * splashes.length)
-    ] as string;
+    submit();
 });
 
-watch(
-    files,
-    (newFiles) => {
-        loading.value = newFiles.some((file) => file.uploading);
-    },
-    {
-        deep: true,
-    },
-);
-
-onMounted(() => {
-    useListen("composer:reply", (note: Status) => {
-        respondingTo.value = note;
-        respondingType.value = "reply";
-        if (note.account.id !== identity.value?.account.id) {
-            content.value = `@${note.account.acct} `;
-        }
-    });
-
-    useListen("composer:quote", (note: Status) => {
-        respondingTo.value = note;
-        respondingType.value = "quote";
-        if (note.account.id !== identity.value?.account.id) {
-            content.value = `@${note.account.acct} `;
-        }
-    });
-
-    useListen("composer:edit", async (note: Status) => {
-        loading.value = true;
-        files.value = note.media_attachments.map((file) => ({
-            id: nanoid(),
-            file: new File([], file.url),
-            progress: 1,
-            uploading: false,
-            api_id: file.id,
-            alt_text: file.description ?? undefined,
-        }));
-
-        const source = await client.value.getStatusSource(note.id);
-
-        if (source?.data) {
-            respondingTo.value = note;
-            respondingType.value = "edit";
-            content.value = source.data.text;
-            cwContent.value = source.data.spoiler_text;
-        }
-
-        loading.value = false;
-    });
-});
-
-watchEffect(() => {
-    if (Control_Enter?.value || Command_Enter?.value) {
-        send();
-    }
-});
-
-const props = defineProps<{
-    instance: Instance;
+const { relation } = defineProps<{
+    relation?: {
+        type: "reply" | "quote" | "edit";
+        note: Status;
+        source?: StatusSource;
+    };
 }>();
 
-const loading = ref(false);
-const canSubmit = computed(
-    () =>
-        (content.value?.trim().length > 0 || files.value.length > 0) &&
-        content.value?.trim().length <= characterLimit.value,
-);
-
-const send = async () => {
-    if (!(identity.value && client.value)) {
-        throw new Error("Not authenticated");
+const getMentions = () => {
+    if (!relation || relation.type !== "reply") {
+        return "";
     }
 
+    const peopleToMention = relation.note.mentions
+        .concat(relation.note.account)
+        // Deduplicate mentions
+        .filter((men, i, a) => a.indexOf(men) === i)
+        // Remove self
+        .filter((men) => men.id !== identity.value?.account.id);
+
+    const mentions = peopleToMention.map((me) => `@${me.acct}`).join(" ");
+
+    return `${mentions} `;
+};
+
+const state = reactive({
+    // If editing, use the original content
+    // If sending a reply, prefill with mentions
+    content: relation?.source?.text || getMentions(),
+    sensitive: relation?.type === "edit" ? relation.note.sensitive : false,
+    contentWarning: relation?.type === "edit" ? relation.note.spoiler_text : "",
+    contentType: "text/markdown" as "text/markdown" | "text/plain",
+    visibility: (relation?.type === "edit"
+        ? relation.note.visibility
+        : "public") as Status["visibility"],
+    files: (relation?.type === "edit"
+        ? relation.note.media_attachments.map((a) => ({
+              apiId: a.id,
+              file: new File([], a.url),
+              alt: a.description,
+              uploading: false,
+              updating: false,
+          }))
+        : []) as {
+        apiId?: string;
+        file: File;
+        alt?: string;
+        uploading: boolean;
+        updating: boolean;
+    }[],
+});
+const sending = ref(false);
+
+const splashes = useConfig().COMPOSER_SPLASHES;
+const chosenSplash = splashes[Math.floor(Math.random() * splashes.length)];
+
+const submit = async () => {
+    sending.value = true;
+
     try {
-        loading.value = true;
+        if (relation?.type === "edit") {
+            const { data } = await client.value.editStatus(relation.note.id, {
+                status: state.content,
+                content_type: state.contentType,
+                sensitive: state.sensitive,
+                spoiler_text: state.sensitive
+                    ? state.contentWarning
+                    : undefined,
+                media_ids: state.files
+                    .map((f) => f.apiId)
+                    .filter((f) => f !== undefined),
+            });
 
-        if (respondingType.value === "edit" && respondingTo.value) {
-            const response = await client.value.editStatus(
-                respondingTo.value.id,
-                {
-                    status: content.value?.trim() ?? "",
-                    content_type: markdown.value
-                        ? "text/markdown"
-                        : "text/plain",
-                    spoiler_text: cw.value ? cwContent.value.trim() : undefined,
-                    sensitive: cw.value,
-                    media_ids: files.value
-                        .filter((file) => !!file.api_id)
-                        .map((file) => file.api_id) as string[],
-                },
-            );
-
-            if (!response.data) {
-                throw new Error("Failed to edit status");
-            }
-
-            content.value = "";
-            loading.value = false;
-            useEvent("composer:send-edit", response.data);
+            useEvent("composer:send-edit", data);
             useEvent("composer:close");
-            return;
-        }
-
-        const response = await client.value.postStatus(
-            content.value?.trim() ?? "",
-            {
-                content_type: markdown.value ? "text/markdown" : "text/plain",
-                in_reply_to_id:
-                    respondingType.value === "reply"
-                        ? respondingTo.value?.id
-                        : undefined,
+        } else {
+            const { data } = await client.value.postStatus(state.content, {
+                content_type: state.contentType,
+                sensitive: state.sensitive,
+                spoiler_text: state.sensitive
+                    ? state.contentWarning
+                    : undefined,
+                media_ids: state.files
+                    .map((f) => f.apiId)
+                    .filter((f) => f !== undefined),
                 quote_id:
-                    respondingType.value === "quote"
-                        ? respondingTo.value?.id
-                        : undefined,
-                spoiler_text: cw.value ? cwContent.value.trim() : undefined,
-                sensitive: cw.value,
-                media_ids: files.value
-                    .filter((file) => !!file.api_id)
-                    .map((file) => file.api_id) as string[],
-            },
-        );
+                    relation?.type === "quote" ? relation.note.id : undefined,
+                in_reply_to_id:
+                    relation?.type === "reply" ? relation.note.id : undefined,
+                visibility: state.visibility,
+            });
 
-        if (!response.data) {
-            throw new Error("Failed to send status");
+            useEvent("composer:send", data as Status);
+            useEvent("composer:close");
         }
-
-        content.value = "";
-        loading.value = false;
-        useEvent("composer:send", response.data as Status);
-        useEvent("composer:close");
-    } catch (error) {
-        console.error(error);
-        loading.value = false;
+    } catch (_e) {
+        const e = _e as ResponseError;
+        toast.error(e.message);
+    } finally {
+        sending.value = false;
     }
 };
 
-const characterLimit = computed(
-    () => props.instance?.configuration.statuses.max_characters ?? 0,
-);
+const uploadFileFromEvent = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const files = Array.from(target.files ?? []);
+
+    uploadFiles(files);
+
+    target.value = "";
+};
+
+const uploadFiles = (files: File[]) => {
+    for (const file of files) {
+        state.files.push({
+            file,
+            uploading: true,
+            updating: false,
+        });
+
+        client.value
+            .uploadMedia(file)
+            .then((media) => {
+                const index = state.files.findIndex((f) => f.file === file);
+
+                if (!state.files[index]) {
+                    return;
+                }
+
+                state.files[index].apiId = media.data.id;
+                state.files[index].uploading = false;
+            })
+            .catch(() => {
+                const index = state.files.findIndex((f) => f.file === file);
+
+                if (!state.files[index]) {
+                    return;
+                }
+
+                state.files.splice(index, 1);
+            });
+    }
+};
+
+const visibilities = {
+    public: {
+        icon: Globe,
+        name: m.lost_trick_dog_grace(),
+        text: m.last_mean_peacock_zip(),
+    },
+    unlisted: {
+        icon: LockOpen,
+        name: m.funny_slow_jannes_walk(),
+        text: m.grand_strong_gibbon_race(),
+    },
+    private: {
+        icon: Lock,
+        name: m.grassy_empty_raven_startle(),
+        text: m.white_teal_ostrich_yell(),
+    },
+    direct: {
+        icon: AtSign,
+        name: m.pretty_bold_baboon_wave(),
+        text: m.lucky_mean_robin_link(),
+    },
+};
 </script>
\ No newline at end of file
diff --git a/components/composer/content-warning.vue b/components/composer/content-warning.vue
deleted file mode 100644
index 621eaf4..0000000
--- a/components/composer/content-warning.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div v-if="cw" class="mb-4">
-        <input type="text" v-model="cwContent" placeholder="Add a content warning"
-            class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
-            aria-label="Content warning" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const cw = defineModel<boolean>("cw", {
-    required: true,
-});
-const cwContent = defineModel<string>("cwContent", {
-    required: true,
-});
-</script>
\ No newline at end of file
diff --git a/components/composer/dialog.vue b/components/composer/dialog.vue
new file mode 100644
index 0000000..86213ff
--- /dev/null
+++ b/components/composer/dialog.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import type { Status, StatusSource } from "@versia/client/types";
+import { toast } from "vue-sonner";
+import * as m from "~/paraglide/messages.js";
+import Composer from "./composer.vue";
+
+useListen("composer:open", () => {
+    if (identity.value) {
+        open.value = true;
+    }
+});
+
+useListen("composer:edit", async (note) => {
+    const id = toast.loading(m.wise_late_fireant_walk(), {
+        duration: 0,
+    });
+    const { data: source } = await client.value.getStatusSource(note.id);
+    relation.value = {
+        type: "edit",
+        note,
+        source,
+    };
+    open.value = true;
+    toast.dismiss(id);
+});
+
+useListen("composer:reply", (note) => {
+    relation.value = {
+        type: "reply",
+        note,
+    };
+    open.value = true;
+});
+
+useListen("composer:quote", (note) => {
+    relation.value = {
+        type: "quote",
+        note,
+    };
+    open.value = true;
+});
+
+useListen("composer:close", () => {
+    open.value = false;
+    relation.value = null;
+});
+
+const open = ref(false);
+const relation = ref(
+    null as {
+        type: "reply" | "quote" | "edit";
+        note: Status;
+        source?: StatusSource;
+    } | null,
+);
+</script>
+
+<template>
+    <Dialog v-model:open="open" @update:open="o => { if (!o) { relation = null } }">
+        <DialogContent :hide-close="true"
+            class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2">
+            <DialogTitle class="sr-only">
+                {{ relation?.type === "reply" ? m.loved_busy_mantis_slide() : relation?.type === "quote" ? "Quote" :
+                    m.chunky_dull_marlin_trip() }}
+            </DialogTitle>
+            <DialogDescription class="sr-only">
+                {{ relation?.type === "reply" ? m.tired_grassy_vulture_forgive() : relation?.type === "quote" ?
+                    m.livid_livid_nils_snip() : m.brief_cool_capybara_fear() }}
+            </DialogDescription>
+            <Composer :relation="relation ?? undefined" />
+        </DialogContent>
+    </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/composer/emoji-suggestbox.vue b/components/composer/emoji-suggestbox.vue
deleted file mode 100644
index 301e1c2..0000000
--- a/components/composer/emoji-suggestbox.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
-        :distance-function="distance">
-        <template #default="{ suggestion }">
-            <Avatar :src="(suggestion.value as Emoji).url"
-                class="w-full h-full [&>img]:object-contain !bg-transparent rounded"
-                :alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
-        </template>
-    </AutocompleteSuggestbox>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import { distance } from "fastest-levenshtein";
-import Avatar from "../avatars/avatar.vue";
-import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
-defineProps<{
-    currentlyTypingEmoji: string | null;
-    textarea: HTMLTextAreaElement | undefined;
-}>();
-
-const emojis = computed(
-    () =>
-        identity.value?.emojis.map((emoji) => ({
-            key: emoji.shortcode,
-            value: emoji,
-        })) ?? [],
-);
-</script>
\ No newline at end of file
diff --git a/components/composer/file-preview.vue b/components/composer/file-preview.vue
new file mode 100644
index 0000000..a62e9c3
--- /dev/null
+++ b/components/composer/file-preview.vue
@@ -0,0 +1,126 @@
+<template>
+    <DropdownMenu>
+        <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">
+            <Avatar class="h-28 w-full" shape="square">
+                <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>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="min-w-48">
+            <DropdownMenuLabel>{{ file.file.name }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem @click="editName">
+                <TextCursorInput class="mr-2 h-4 w-4" />
+                <span>Rename</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="editCaption"> 
+                <Captions class="mr-2 h-4 w-4" />
+                <span>Add caption</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem @click="emit('remove')">
+                <Delete class="mr-2 h-4 w-4" />
+                <span>Remove</span>
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+
+<script lang="ts" setup>
+import { Captions, Delete, Loader, TextCursorInput } from "lucide-vue-next";
+import { confirmModalService } from "~/components/modals/composable.ts";
+import { Avatar, AvatarImage } from "~/components/ui/avatar";
+import { Badge } from "~/components/ui/badge";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+const file = defineModel<{
+    apiId?: string;
+    file: File;
+    alt?: string;
+    uploading: boolean;
+    updating: boolean;
+}>("file", {
+    required: true,
+});
+
+const emit = defineEmits<{
+    remove: [];
+}>();
+
+const editName = async () => {
+    const result = await confirmModalService.confirm({
+        title: "Enter a new name",
+        defaultValue: file.value.file.name,
+        confirmText: "Edit",
+        inputType: "text",
+    });
+
+    if (result.confirmed) {
+        file.value.updating = true;
+        file.value.file = new File(
+            [file.value.file],
+            result.value ?? file.value.file.name,
+            {
+                type: file.value.file.type,
+                lastModified: file.value.file.lastModified,
+            },
+        );
+
+        try {
+            await client.value.updateMedia(file.value.apiId ?? "", {
+                file: file.value.file,
+            });
+        } finally {
+            file.value.updating = false;
+        }
+    }
+};
+
+const editCaption = async () => {
+    const result = await confirmModalService.confirm({
+        title: "Enter a caption",
+        message:
+            "Captions are useful for people with visual impairments, or when the image can't be displayed.",
+        defaultValue: file.value.alt,
+        confirmText: "Add",
+        inputType: "textarea",
+    });
+
+    if (result.confirmed) {
+        file.value.updating = true;
+        file.value.alt = result.value;
+
+        try {
+            await client.value.updateMedia(file.value.apiId ?? "", {
+                description: file.value.alt,
+            });
+        } finally {
+            file.value.updating = false;
+        }
+    }
+};
+
+const createObjectURL = URL.createObjectURL;
+
+const formatBytes = (bytes: number) => {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    const k = 1000;
+    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]}`;
+};
+</script>
\ No newline at end of file
diff --git a/components/composer/files.vue b/components/composer/files.vue
new file mode 100644
index 0000000..9aeafb1
--- /dev/null
+++ b/components/composer/files.vue
@@ -0,0 +1,19 @@
+<template>
+    <FilePreview v-for="(file, index) in files" :key="file.apiId" :file="file" @update:file="files[index] = $event" @remove="files.splice(index, 1)" />
+</template>
+
+<script lang="ts" setup>
+import FilePreview from "./file-preview.vue";
+
+defineModel<
+    {
+        apiId?: string;
+        file: File;
+        alt?: string;
+        uploading: boolean;
+        updating: boolean;
+    }[]
+>("files", {
+    required: true,
+});
+</script>
\ No newline at end of file
diff --git a/components/composer/mention-suggestbox.vue b/components/composer/mention-suggestbox.vue
deleted file mode 100644
index a914c0c..0000000
--- a/components/composer/mention-suggestbox.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <AutocompleteSuggestbox :currently-typing="currentlyTypingMention" :textarea="textarea" :suggestions="mentions"
-        :distance-function="distance">
-        <template #default="{ suggestion }">
-            <Avatar :src="(suggestion.value as Account).avatar" class="w-full h-full rounded"
-                :alt="`User ${(suggestion.value as Account).acct}`" />
-        </template>
-    </AutocompleteSuggestbox>
-</template>
-
-<script lang="ts" setup>
-import type { Account } from "@versia/client/types";
-import { distance } from "fastest-levenshtein";
-import Avatar from "../avatars/avatar.vue";
-import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
-const props = defineProps<{
-    currentlyTypingMention: string | null;
-    textarea: HTMLTextAreaElement | undefined;
-}>();
-
-const mentions = ref<{ key: string; value: Account }[]>([]);
-
-watch(
-    () => props.currentlyTypingMention,
-    async (value) => {
-        if (!value) {
-            return;
-        }
-
-        const users = await client.value.searchAccount(value, { limit: 20 });
-        mentions.value = users.data
-            .map((user) => ({
-                key: user.username,
-                value: user,
-                distance: distance(value, user.username),
-            }))
-            .sort((a, b) => a.distance - b.distance)
-            .slice(0, 20);
-    },
-);
-</script>
\ No newline at end of file
diff --git a/components/composer/modal.client.vue b/components/composer/modal.client.vue
deleted file mode 100644
index e0c528b..0000000
--- a/components/composer/modal.client.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <HeadlessTransitionRoot as="template" :show="open">
-        <Dialog.Root v-model:open="open" :close-on-escape="true" :close-on-interact-outside="true"
-            @update:open="o => open = o">
-
-            <Teleport to="body">
-                <Dialog.Positioner
-                    class="flex items-start z-50 justify-center p-4 text-center sm:items-center sm:p-0 fixed inset-0 w-screen h-screen overflow-y-hidden">
-                    <HeadlessTransitionChild as="template" enter="ease-out duration-200" enter-from="opacity-0"
-                        enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
-                        leave-to="opacity-0">
-                        <Dialog.Backdrop class="fixed inset-0 bg-black/70" @click="open = false" />
-                    </HeadlessTransitionChild>
-                    <HeadlessTransitionChild as="template" enter="ease-out duration-200"
-                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-                        leave-from="opacity-100 translate-y-0 sm:scale-100"
-                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                        <Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
-                            <div
-                                class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
-                                <Composer v-if="instance" :instance="instance as any" />
-                            </div>
-                        </Dialog.Content>
-                    </HeadlessTransitionChild>
-                </Dialog.Positioner>
-            </Teleport>
-        </Dialog.Root>
-    </HeadlessTransitionRoot>
-</template>
-
-<script lang="ts" setup>
-import { Dialog } from "@ark-ui/vue";
-import Composer from "./composer.vue";
-const open = ref(false);
-
-useListen("note:reply", async (note) => {
-    open.value = true;
-    await nextTick();
-    useEvent("composer:reply", note);
-});
-useListen("note:quote", async (note) => {
-    open.value = true;
-    await nextTick();
-    useEvent("composer:quote", note);
-});
-useListen("note:edit", async (note) => {
-    open.value = true;
-    await nextTick();
-    useEvent("composer:edit", note);
-});
-useListen("composer:open", () => {
-    if (identity.value) {
-        open.value = true;
-    }
-});
-useListen("composer:close", () => {
-    open.value = false;
-});
-const instance = useInstance();
-</script>
\ No newline at end of file
diff --git a/components/composer/responding-to.vue b/components/composer/responding-to.vue
deleted file mode 100644
index 06c4284..0000000
--- a/components/composer/responding-to.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div v-if="respondingTo" class="mb-4" role="region" aria-label="Responding to">
-        <OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
-            <Note :element="respondingTo" :small="true" :disabled="true" class="!rounded-none !bg-primary-500/10" />
-        </OverlayScrollbarsComponent>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Status } from "@versia/client/types";
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-import Note from "../social-elements/notes/note.vue";
-
-const props = defineProps<{
-    respondingTo: Status;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/rich-text-box.vue b/components/composer/rich-text-box.vue
deleted file mode 100644
index 401990d..0000000
--- a/components/composer/rich-text-box.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <RichTextboxInput v-model:model-content="content" @paste="handlePaste" :disabled="loading"
-        :placeholder="chosenSplash" :max-characters="characterLimit" class="focus:!ring-0 max-h-[70dvh]" />
-</template>
-
-<script lang="ts" setup>
-import RichTextboxInput from "../inputs/rich-textbox-input.vue";
-
-defineProps<{
-    loading: boolean;
-    chosenSplash: string;
-    characterLimit: number;
-    handlePaste: (event: ClipboardEvent) => void;
-}>();
-
-const content = defineModel<string>("content", {
-    required: true,
-});
-</script>
\ No newline at end of file
diff --git a/components/composer/suggestbox.vue b/components/composer/suggestbox.vue
deleted file mode 100644
index 2bd7b4b..0000000
--- a/components/composer/suggestbox.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
-        <slot />
-    </div>
-</template>
-
-<script lang="ts" setup>
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/alt-text-editor.vue b/components/composer/uploader/alt-text-editor.vue
deleted file mode 100644
index c77cce8..0000000
--- a/components/composer/uploader/alt-text-editor.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <Popover.Root :positioning="{
-        strategy: 'fixed',
-    }" @update:open="o => !o" :close-on-interact-outside="false">
-        <Popover.Trigger aria-hidden="true"
-            class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
-            <iconify-icon icon="tabler:alt" width="none" class="size-4" />
-        </Popover.Trigger>
-        <Popover.Positioner class="!z-[100]">
-            <Popover.Content
-                class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 w-72 space-y-2">
-                <div class="flex items-center justify-between px-1 pt-1 gap-x-1">
-                    <Popover.CloseTrigger :as-child="true">
-                    <Button theme="outline" aria-label="Close" class="text-xs !p-1">
-                        <iconify-icon icon="tabler:x" width="1rem" height="1rem" />
-                    </Button>
-                    </Popover.CloseTrigger>
-                    <h3 class="text-xs font-semibold">Alt Text</h3>
-                    <a :href="`https://www.w3.org/WAI/tutorials/images/decision-tree/`" target="_blank"
-                        class="text-xs text-gray-300 ml-auto mr-1" title="Learn more about alt text">
-                        <iconify-icon icon="tabler:info-circle" width="1rem" height="1rem" />
-                    </a>
-                </div>
-                <PreviewContent :file="fileData.file" class="rounded" />
-                <textarea :disabled="fileData.uploading" @keydown.enter.stop v-model="fileData.alt_text"
-                    placeholder="Describe this image for screen readers"
-                    rows="5"
-                    class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
-                    <Popover.CloseTrigger :as-child="true">
-                <Button theme="secondary" @click="$emit('update-alt-text', fileData.alt_text)" class="w-full"
-                    :loading="fileData.uploading">
-                    <span>Edit</span>
-                </Button>
-                </Popover.CloseTrigger>
-            </Popover.Content>
-        </Popover.Positioner>
-    </Popover.Root>
-</template>
-
-<script lang="ts" setup>
-import { Popover } from "@ark-ui/vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import PreviewContent from "./preview-content.vue";
-import type { FileData } from "./uploader.vue";
-
-const props = defineProps<{
-    fileData: FileData;
-}>();
-
-defineEmits<{
-    "update-alt-text": [text?: string];
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/file-preview.vue b/components/composer/uploader/file-preview.vue
deleted file mode 100644
index 62cbf13..0000000
--- a/components/composer/uploader/file-preview.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <div role="button" tabindex="0" :class="[
-        'size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden',
-    ]" @keydown.enter="$emit('remove', fileData.id)">
-        <PreviewContent :file="fileData.file" />
-        <FileShadowOverlay />
-        <FileSize :size="fileData.file.size" :uploading="fileData.uploading" />
-        <RemoveButton @remove="$emit('remove', fileData.id)" />
-        <AltTextEditor v-if="fileData.api_id" :file-data="fileData"
-            @update-alt-text="(text) => $emit('update-alt-text', fileData.id, text)" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import AltTextEditor from "./alt-text-editor.vue";
-import FileShadowOverlay from "./file-shadow-overlay.vue";
-import FileSize from "./file-size.vue";
-import PreviewContent from "./preview-content.vue";
-import RemoveButton from "./remove-button.vue";
-import type { FileData } from "./uploader.vue";
-
-defineProps<{
-    fileData: FileData;
-}>();
-
-defineEmits<{
-    remove: [id: string];
-    "update-alt-text": [id: string, text?: string];
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/file-shadow-overlay.vue b/components/composer/uploader/file-shadow-overlay.vue
deleted file mode 100644
index b860fed..0000000
--- a/components/composer/uploader/file-shadow-overlay.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <div class="absolute inset-0 bg-black/70"></div>
-</template>
\ No newline at end of file
diff --git a/components/composer/uploader/file-size.vue b/components/composer/uploader/file-size.vue
deleted file mode 100644
index f4366fa..0000000
--- a/components/composer/uploader/file-size.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="absolute bottom-1 right-1 p-1 bg-dark-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
-        aria-label="File size">
-        {{ formatBytes(size) }}
-        <iconify-icon v-if="uploading" icon="tabler:loader-2" width="none"
-            class="size-4 animate-spin text-primary-500" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-    size: number;
-    uploading: boolean;
-}>();
-
-const formatBytes = (bytes: number) => {
-    if (bytes === 0) {
-        return "0 Bytes";
-    }
-    const k = 1000;
-    const dm = 2;
-    const sizes = ["Bytes", "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(dm))} ${sizes[i]}`;
-};
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/preview-content.vue b/components/composer/uploader/preview-content.vue
deleted file mode 100644
index 88cd6c3..0000000
--- a/components/composer/uploader/preview-content.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <template v-if="file.type.startsWith('image/')">
-        <img :src="createObjectURL(file)" class="w-full h-full object-cover cursor-default" alt="Preview of file" />
-    </template>
-    <template v-else-if="file.type.startsWith('video/')">
-        <video :src="createObjectURL(file)" class="w-full h-full object-cover cursor-default" />
-    </template>
-    <template v-else>
-        <iconify-icon :icon="getIcon(file.type)" width="none" class="size-6" />
-    </template>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-    file: File;
-}>();
-
-const createObjectURL = URL.createObjectURL;
-
-const getIcon = (mimeType: string) => {
-    if (mimeType.startsWith("image/")) {
-        return "tabler:photo";
-    }
-    if (mimeType.startsWith("video/")) {
-        return "tabler:video";
-    }
-    if (mimeType.startsWith("audio/")) {
-        return "tabler:music";
-    }
-    return "tabler:file";
-};
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/remove-button.vue b/components/composer/uploader/remove-button.vue
deleted file mode 100644
index 3cf175c..0000000
--- a/components/composer/uploader/remove-button.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button" tabindex="0"
-        @pointerup="$emit('remove')" @keydown.enter="$emit('remove')">
-        <iconify-icon icon="tabler:x" width="none" class="size-4" />
-    </button>
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-    remove: [];
-}>();
-</script>
\ No newline at end of file
diff --git a/components/composer/uploader/uploader.vue b/components/composer/uploader/uploader.vue
deleted file mode 100644
index c2cfc70..0000000
--- a/components/composer/uploader/uploader.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-    <div>
-        <input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
-        <div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
-            <FilePreview v-for="data in files" :key="data.id" :file-data="data" @remove="(id: string) => emit('removeFile', id)"
-                @update-alt-text="updateAltText" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { nanoid } from "nanoid";
-import FilePreview from "./file-preview.vue";
-
-const files = defineModel<FileData[]>("files", {
-    required: true,
-});
-
-export interface FileData {
-    id: string;
-    file: File;
-    uploading: boolean;
-    progress: number;
-    api_id?: string;
-    alt_text?: string;
-}
-
-const fileInput = ref<HTMLInputElement | null>(null);
-
-const openFilePicker = () => {
-    fileInput.value?.click();
-};
-
-defineExpose({
-    openFilePicker,
-});
-
-const emit = defineEmits<{
-    changeFile: [changedFile: FileData];
-    addFile: [newFile: FileData];
-    removeFile: [id: string];
-}>();
-
-const handleFileInput = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    if (target.files) {
-        files.value.push(
-            ...Array.from(target.files).map((file) => ({
-                id: nanoid(),
-                file,
-                progress: 0,
-                uploading: true,
-            })),
-        );
-    }
-};
-
-// Upload new files (not existing, currently being uploaded files)
-watch(
-    files,
-    (newFiles) => {
-        for (const data of newFiles) {
-            if (data.progress === 0) {
-                uploadFile(data.file);
-            }
-        }
-    },
-    {
-        deep: true,
-    },
-);
-
-const updateAltText = (id: string, altText?: string) => {
-    const foundFile = files.value.find((data) => data.id === id);
-
-    if (!foundFile) {
-        throw new Error("File with ID doesn't exist");
-    }
-
-    emit("changeFile", {
-        ...foundFile,
-        uploading: true,
-    });
-
-    client.value
-        ?.updateMedia(foundFile.api_id as string, { description: altText })
-        .then(() => {
-            emit("changeFile", {
-                ...foundFile,
-                uploading: false,
-            });
-        });
-};
-
-const uploadFile = async (file: File) => {
-    const foundFile = files.value.find((data) => data.file === file);
-
-    if (!foundFile) {
-        throw new Error("File doesn't exist");
-    }
-
-    emit("changeFile", {
-        ...foundFile,
-        uploading: true,
-        progress: 0.1,
-    });
-
-    client.value.uploadMedia(file).then((response) => {
-        const attachment = response.data;
-
-        emit("changeFile", {
-            ...foundFile,
-            uploading: false,
-            progress: 1.0,
-            api_id: attachment.id,
-        });
-    });
-};
-</script>
\ No newline at end of file
diff --git a/components/dropdowns/AdaptiveDropdown.vue b/components/dropdowns/AdaptiveDropdown.vue
deleted file mode 100644
index 7428596..0000000
--- a/components/dropdowns/AdaptiveDropdown.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <Menu.Root :positioning="{
-        strategy: 'fixed',
-    }" @update:open="(o) => open = o" :open="open">
-        <Menu.Trigger :as-child="true">
-            <slot name="button"></slot>
-        </Menu.Trigger>
-
-        <Teleport to="body">
-            <div @mousedown="open = false" @touchstart="open = false" v-if="open"
-                class="fixed inset-0 z-10 bg-black/50">
-            </div>
-            <Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
-                <transition enter-active-class="transition ease-in duration-100"
-                    enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
-                    enter-to-class="transform translate-y-0 opacity-100 scale-100"
-                    leave-active-class="transition ease-out duration-75"
-                    leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
-                    <Menu.Content v-if="open"
-                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
-                        <div v-if="isSmallScreen" class="w-full py-2">
-                            <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
-                        </div>
-                        <slot name="items"></slot>
-                    </Menu.Content>
-                </transition>
-            </Menu.Positioner>
-        </Teleport>
-    </Menu.Root>
-</template>
-
-<script setup lang="ts">
-import { Menu } from "@ark-ui/vue";
-const { width } = useWindowSize();
-const isSmallScreen = computed(() => width.value < 768);
-
-const open = ref(false);
-const id = useId();
-
-// HACK: Fix the menu children not reacting to touch events as click for some reason
-const registerClickHandlers = () => {
-    const targetElements = document.querySelectorAll(`.${id} [data-part=item]`);
-    for (const el of targetElements) {
-        el.addEventListener("touchstart", (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            // Click all element children
-            for (const elChild of Array.from(el.children)) {
-                if (elChild instanceof HTMLElement) {
-                    elChild.click();
-                }
-            }
-        });
-    }
-};
-
-// When opening, register click handlers
-watch(open, async (o) => {
-    if (o) {
-        await nextTick();
-        registerClickHandlers();
-    }
-});
-</script>
\ No newline at end of file
diff --git a/components/errors/ErrorBoundary.vue b/components/errors/ErrorBoundary.vue
deleted file mode 100644
index dd5d512..0000000
--- a/components/errors/ErrorBoundary.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <slot name="error" v-if="error" v-bind="{ error }">
-        <div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
-            <div class="text-center prose prose-invert max-w-md w-full">
-                <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
-                </h1>
-                <p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
-                <div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
-                    <Button theme="primary" class="w-full" @click="back">Go back</Button>
-                    <a href="https://github.com/versia-pub/frontend/issues" target="_blank">
-                        <Button theme="secondary" class="w-full">Report an issue</Button>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </slot>
-    <slot v-else />
-</template>
-
-<script lang="ts" setup>
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-const error = ref<{
-    title: string;
-    message: string;
-    code: string;
-} | null>(null);
-
-useListen("error", (err) => {
-    error.value = err;
-
-    useHead({
-        title: err?.title,
-    });
-});
-
-const back = () => {
-    useRouter().back();
-};
-</script>
-
-<style>
-#error code:not(pre code)::after,
-#error code:not(pre code)::before {
-    content: ""
-}
-
-#error code:not(pre code) {
-    border-radius: .25rem;
-    padding: .25rem .5rem;
-    word-wrap: break-word;
-    background: transparent;
-    background-color: #ffffff0d;
-    -webkit-hyphens: none;
-    hyphens: none;
-    margin-top: 1rem;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsla(0, 0%, 100%, .1)
-}
-</style>
\ No newline at end of file
diff --git a/components/graphics/square-pattern.vue b/components/graphics/square-pattern.vue
index 83a1b96..26476d0 100644
--- a/components/graphics/square-pattern.vue
+++ b/components/graphics/square-pattern.vue
@@ -1,12 +1,12 @@
 <template>
-    <svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+    <svg class="absolute inset-0 h-full w-full stroke-primary/[0.07] [mask-image:radial-gradient(100%_100%_at_top_right,hsl(var(--primary-foreground)),transparent)] pointer-events-none"
         aria-hidden="true">
         <defs>
             <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
                 patternUnits="userSpaceOnUse">
                 <path d="M.5 200V.5H200" fill="none"></path>
             </pattern>
-        </defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
+        </defs><svg x="50%" y="-1" class="overflow-visible fill-primary/[0.03]">
             <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
                 stroke-width="0"></path>
         </svg>
diff --git a/components/headers/greeting.vue b/components/headers/greeting.vue
deleted file mode 100644
index f8c159a..0000000
--- a/components/headers/greeting.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
-        <div class="sm:flex sm:items-center sm:justify-between gap-3">
-            <div class="sm:flex sm:space-x-5 grow">
-                <Avatar :src="identity.account.avatar"
-                    class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
-                    :alt="'Your avatar'" />
-                <div
-                    class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
-                    <p class="text-sm font-medium text-gray-300">Welcome back,</p>
-                    <p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import Avatar from "../avatars/avatar.vue";
-
-const { display_name } = useParsedAccount(
-    computed(() => identity.value?.account),
-    settings,
-);
-</script>
\ No newline at end of file
diff --git a/components/inputs/checkbox-input.vue b/components/inputs/checkbox-input.vue
deleted file mode 100644
index bb0241d..0000000
--- a/components/inputs/checkbox-input.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <TextInput type="checkbox" v-bind="$attrs, $props"
-        class="rounded disabled:hover:cursor-wait text-primary-700 !size-5" />
-</template>
-
-<script lang="ts" setup>
-import type { InputHTMLAttributes } from "vue";
-import TextInput from "./text-input.vue";
-
-interface Props extends /* @vue-ignore */ InputHTMLAttributes {}
-
-defineProps<Props>();
-</script>
\ No newline at end of file
diff --git a/components/inputs/field-error.vue b/components/inputs/field-error.vue
deleted file mode 100644
index 846c6c5..0000000
--- a/components/inputs/field-error.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <p class="text-base/6 disabled:opacity-50 sm:text-sm/6 text-red-500">
-        <slot />
-    </p>
-</template>
-
-<script lang="ts" setup>
-
-</script>
\ No newline at end of file
diff --git a/components/inputs/field.vue b/components/inputs/field.vue
deleted file mode 100644
index 3267c7b..0000000
--- a/components/inputs/field.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="mt-3 flex flex-col gap-2">
-        <slot />
-    </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
\ No newline at end of file
diff --git a/components/inputs/label-and-error.vue b/components/inputs/label-and-error.vue
deleted file mode 100644
index c87c7c6..0000000
--- a/components/inputs/label-and-error.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="flex flex-col gap-1">
-        <slot />
-    </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
\ No newline at end of file
diff --git a/components/inputs/label.vue b/components/inputs/label.vue
deleted file mode 100644
index 0a5d257..0000000
--- a/components/inputs/label.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <div class="flex flex-row justify-between">
-        <label v-bind="$attrs"
-            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
-            <slot />
-        </label>
-        <div :id="`${$attrs.for}-label-slot`"></div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { LabelHTMLAttributes } from "vue";
-
-interface Props extends /* @vue-ignore */ LabelHTMLAttributes {}
-
-defineOptions({
-    inheritAttrs: false,
-});
-const props = defineProps<Props>();
-</script>
\ No newline at end of file
diff --git a/components/inputs/password-input.vue b/components/inputs/password-input.vue
deleted file mode 100644
index 02ef63c..0000000
--- a/components/inputs/password-input.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
-        :type="showPassword ? 'text' : 'password'" :spellcheck="false" />
-    <Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
-        <Progress.Label class="text-xs text-gray-300 font-semibold w-12">
-            {{ text }}
-        </Progress.Label>
-        <Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
-            backgroundColor: color,
-        }">
-            <Progress.Range />
-        </Progress.Track>
-    </Progress.Root>
-    <Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
-        <button type="button" @click="showPassword = !showPassword"
-            class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
-            <iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
-            {{ showPassword ? "Hide password" : "Show password" }}
-        </button>
-    </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { Progress } from "@ark-ui/vue";
-import { passwordStrength } from "~/utils/passwords";
-const showPassword = ref(false);
-const content = ref("");
-
-import type { InputHTMLAttributes } from "vue";
-import TextInput from "./text-input.vue";
-
-interface Props extends /* @vue-ignore */ InputHTMLAttributes {
-    isInvalid?: boolean;
-    showStrength?: boolean;
-}
-
-defineOptions({
-    inheritAttrs: false,
-});
-defineProps<Props>();
-
-const teleport = ref(false);
-const strength = computed(() => passwordStrength(content.value ?? ""));
-const text = computed(() => {
-    if (strength.value < 6) {
-        return "Weak";
-    }
-    if (strength.value < 7) {
-        return "Fair";
-    }
-    if (strength.value < 11) {
-        return "Good";
-    }
-    return "Strong";
-});
-const color = computed(() => {
-    if (strength.value < 6) {
-        return "red";
-    }
-    if (strength.value < 7) {
-        return "pink";
-    }
-    if (strength.value < 11) {
-        return "yellow";
-    }
-    return "green";
-});
-
-onMounted(() => {
-    // Workaround to make sure the teleport is rendered after the parent component
-    teleport.value = true;
-});
-</script>
\ No newline at end of file
diff --git a/components/inputs/rich-textbox-input.vue b/components/inputs/rich-textbox-input.vue
deleted file mode 100644
index d0fd58c..0000000
--- a/components/inputs/rich-textbox-input.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <div class="relative">
-        <textarea v-bind="$attrs" ref="textarea" v-model="content"
-            class="resize-none min-h-48 prose prose-invert w-full p-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"
-            aria-label="Compose your message" :autofocus="true"></textarea>
-        <div v-if="maxCharacters"
-            :class="['absolute bottom-0 right-0 p-2 text-gray-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
-            aria-live="polite">
-            {{ remainingCharacters }}
-        </div>
-        <EmojiSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedEmoji"
-            :currently-typing-emoji="currentlyBeingTypedEmoji" @autocomplete="autocompleteEmoji" />
-        <MentionSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedMention"
-            :currently-typing-mention="currentlyBeingTypedMention" @autocomplete="autocompleteMention" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { char, createRegExp, exactly } from "magic-regexp";
-import EmojiSuggestbox from "../composer/emoji-suggestbox.vue";
-import MentionSuggestbox from "../composer/mention-suggestbox.vue";
-
-defineOptions({
-    inheritAttrs: false,
-});
-const props = defineProps<{
-    maxCharacters?: number;
-}>();
-
-const modelContent = defineModel<string>("modelContent", {
-    required: true,
-});
-
-const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
-const { input: content } = useTextareaAutosize({
-    element: textarea,
-    input: modelContent,
-});
-
-const remainingCharacters = computed(
-    () =>
-        (props.maxCharacters ?? Number.POSITIVE_INFINITY) -
-        (content.value?.length ?? 0),
-);
-const currentlyBeingTypedEmoji = computed(() => {
-    const match = content.value?.match(partiallyTypedEmojiValidator);
-    return match ? (match.at(-1)?.replace(":", "") ?? "") : null;
-});
-const currentlyBeingTypedMention = computed(() => {
-    const match = content.value?.match(partiallyTypedMentionValidator);
-    return match ? (match.at(-1)?.replace("@", "") ?? "") : null;
-});
-
-const autocompleteEmoji = (emoji: string) => {
-    // Replace the end of the string with the emoji
-    content.value = content.value?.replace(
-        createRegExp(
-            exactly(":"),
-            exactly(currentlyBeingTypedEmoji.value ?? "").notBefore(char),
-        ),
-        `:${emoji}:`,
-    );
-};
-
-const autocompleteMention = (mention: string) => {
-    // Replace the end of the string with the mention
-    content.value = content.value?.replace(
-        createRegExp(
-            exactly("@"),
-            exactly(currentlyBeingTypedMention.value ?? "").notBefore(char),
-        ),
-        `@${mention} `,
-    );
-};
-</script>
\ No newline at end of file
diff --git a/components/inputs/text-input.vue b/components/inputs/text-input.vue
deleted file mode 100644
index 4e6ddd7..0000000
--- a/components/inputs/text-input.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-        isInvalid && '!ring-red-600 ring-2']" v-model="value">
-</template>
-
-<script setup lang="ts">
-import type { InputHTMLAttributes } from "vue";
-
-interface Props extends /* @vue-ignore */ InputHTMLAttributes {
-    isInvalid?: boolean;
-}
-
-const value = defineModel<string>("value");
-
-defineProps<Props>();
-</script>
\ No newline at end of file
diff --git a/components/modals/composable.ts b/components/modals/composable.ts
index d5682fe..ab64f5e 100644
--- a/components/modals/composable.ts
+++ b/components/modals/composable.ts
@@ -1,25 +1,34 @@
-import {
-    confirmModalService,
-    confirmModalWithInputService,
-} from "./service.ts";
-import type { ConfirmModalOptions, ConfirmModalResult } from "./types.ts";
+export type ConfirmModalOptions = {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    inputType?: "none" | "text" | "textarea";
+    defaultValue?: string;
+};
 
-export function useConfirmModal() {
-    const confirm = (
-        options: ConfirmModalOptions,
-    ): Promise<ConfirmModalResult> => {
-        return confirmModalService.confirm(options);
-    };
+export type ConfirmModalResult = {
+    confirmed: boolean;
+    value?: string;
+};
 
-    const confirmWithInput = (
-        options: ConfirmModalOptions,
-        placeholder?: string,
-    ): Promise<ConfirmModalResult> => {
-        return confirmModalWithInputService.confirm(options, placeholder);
-    };
+class ConfirmModalService {
+    private modalRef = ref<{
+        open: (options: ConfirmModalOptions) => Promise<ConfirmModalResult>;
+    } | null>(null);
 
-    return {
-        confirm,
-        confirmWithInput,
-    };
+    register(modal: {
+        open: (options: ConfirmModalOptions) => Promise<ConfirmModalResult>;
+    }) {
+        this.modalRef.value = modal;
+    }
+
+    confirm(options: ConfirmModalOptions): Promise<ConfirmModalResult> {
+        if (!this.modalRef.value) {
+            throw new Error("Confirmation modal not initialized");
+        }
+        return this.modalRef.value.open(options);
+    }
 }
+
+export const confirmModalService = new ConfirmModalService();
diff --git a/components/modals/confirm-inline.vue b/components/modals/confirm-inline.vue
new file mode 100644
index 0000000..cab014a
--- /dev/null
+++ b/components/modals/confirm-inline.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import * as m from "~/paraglide/messages.js";
+import type { ConfirmModalOptions, ConfirmModalResult } from "./composable.ts";
+
+defineProps<{
+    modalOptions: ConfirmModalOptions;
+}>();
+
+defineEmits<{
+    confirm: (result: ConfirmModalResult) => void;
+    cancel: () => void;
+}>();
+
+const inputValue = ref<string>("");
+</script>
+
+<template>
+    <Dialog>
+        <DialogTrigger :as-child="true">
+            <slot />
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px]">
+            <DialogHeader>
+                <DialogTitle>{{ modalOptions.title }}</DialogTitle>
+                <DialogDescription>
+                    {{ modalOptions.message }}
+                </DialogDescription>
+            </DialogHeader>
+
+            <div v-if="modalOptions.inputType === 'text'" class="grid gap-4 py-4">
+                <div class="grid grid-cols-4 items-center gap-4">
+                    <Label for="confirmInput" class="text-right">{{ m.mean_mean_badger_inspire() }}</Label>
+                    <Input id="confirmInput" v-model="inputValue" class="col-span-3" />
+                </div>
+            </div>
+
+            <div v-else-if="modalOptions.inputType === 'textarea'" class="grid gap-4 py-4">
+                <div class="grid grid-cols-4 items-center gap-4">
+                    <Label for="confirmTextarea" class="text-right">{{ m.mean_mean_badger_inspire() }}</Label>
+                    <Textarea id="confirmTextarea" v-model="inputValue" class="col-span-3" />
+                </div>
+            </div>
+
+            <DialogFooter>
+                <Button variant="outline" @click="() => $emit('cancel')">
+                    {{ modalOptions.cancelText }}
+                </Button>
+                <Button @click="() => $emit('confirm', {
+                    confirmed: true,
+                    value: inputValue,
+                })">
+                    {{ modalOptions.confirmText }}
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/modals/confirm.vue b/components/modals/confirm.vue
new file mode 100644
index 0000000..5d0019e
--- /dev/null
+++ b/components/modals/confirm.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import * as m from "~/paraglide/messages.js";
+import {
+    type ConfirmModalOptions,
+    type ConfirmModalResult,
+    confirmModalService,
+} from "./composable.ts";
+
+const isOpen = ref(false);
+const modalOptions = ref<ConfirmModalOptions>({
+    title: m.antsy_whole_alligator_blink(),
+    message: "",
+    inputType: "none",
+    confirmText: m.antsy_whole_alligator_blink(),
+    cancelText: m.soft_bold_ant_attend(),
+});
+const inputValue = ref("");
+const resolvePromise = ref<((result: ConfirmModalResult) => void) | null>(null);
+
+function open(options: ConfirmModalOptions): Promise<ConfirmModalResult> {
+    isOpen.value = true;
+    modalOptions.value = {
+        title: options.title || m.antsy_whole_alligator_blink(),
+        message: options.message,
+        inputType: options.inputType || "none",
+        confirmText: options.confirmText || m.antsy_whole_alligator_blink(),
+        cancelText: options.cancelText || m.soft_bold_ant_attend(),
+    };
+    inputValue.value = options.defaultValue || "";
+
+    return new Promise((resolve) => {
+        resolvePromise.value = resolve;
+    });
+}
+
+function handleConfirm() {
+    if (resolvePromise.value) {
+        resolvePromise.value({
+            confirmed: true,
+            value: inputValue.value,
+        });
+    }
+    isOpen.value = false;
+}
+
+function handleCancel() {
+    if (resolvePromise.value) {
+        resolvePromise.value({
+            confirmed: false,
+        });
+    }
+    isOpen.value = false;
+}
+
+confirmModalService.register({
+    open,
+});
+</script>
+
+<template>
+    <AlertDialog :key="String(isOpen)" :open="isOpen" @update:open="isOpen = false">
+        <AlertDialogContent class="sm:max-w-[425px] flex flex-col">
+            <AlertDialogHeader>
+                <AlertDialogTitle>{{ modalOptions.title }}</AlertDialogTitle>
+                <AlertDialogDescription v-if="modalOptions.message">
+                    {{ modalOptions.message }}
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <Input v-if="modalOptions.inputType === 'text'" v-model="inputValue" />
+
+            <Textarea v-else-if="modalOptions.inputType === 'textarea'" v-model="inputValue" rows="6" />
+
+            <AlertDialogFooter class="w-full">
+                <AlertDialogCancel :as-child="true">
+                    <Button variant="outline" @click="handleCancel">
+                        {{ modalOptions.cancelText }}
+                    </Button>
+                </AlertDialogCancel>
+                <AlertDialogAction :as-child="true">
+                    <Button @click="handleConfirm">
+                        {{ modalOptions.confirmText }}
+                    </Button>
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>
\ No newline at end of file
diff --git a/components/modals/confirmation.vue b/components/modals/confirmation.vue
deleted file mode 100644
index 63bb461..0000000
--- a/components/modals/confirmation.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <HeadlessTransitionRoot as="template" :show="isOpen">
-        <Dialog.Root :open="isOpen" @update:open="handleOpenChange" :close-on-escape="true"
-            :close-on-interact-outside="true">
-            <Teleport to="body">
-                <Dialog.Positioner class="fixed inset-0 z-50 flex items-end md:items-center justify-center md:p-4">
-                    <HeadlessTransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
-                        enter-to="opacity-100" leave="ease-in duration-300" leave-from="opacity-100"
-                        leave-to="opacity-0">
-                        <Dialog.Backdrop class="fixed inset-0 bg-black/70 backdrop-blur-sm" />
-                    </HeadlessTransitionChild>
-
-                    <HeadlessTransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
-                        enter-to="opacity-100 scale-100" leave="ease-in duration-300" leave-from="opacity-100 scale-100"
-                        leave-to="opacity-0 scale-95">
-                        <Dialog.Content class="relative w-full md:max-w-md p-6 rounded bg-dark-800 ring-1 ring-white/10 shadow-xl">
-                            <Dialog.Title class="mb-4 text-lg font-bold tracking-tight text-gray-100 sm:text-xl">
-                                {{ modalOptions.title || 'Confirm Action' }}
-                            </Dialog.Title>
-
-                            <div class="mb-6 text-gray-300">
-                                {{ modalOptions.message }}
-                            </div>
-
-                            <div v-if="withInput" class="mb-4">
-                                <input v-model="inputValue" type="text"
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                    :placeholder="inputPlaceholder" />
-                            </div>
-
-                            <div class="mt-10 grid grid-cols-1 md:grid-cols-2 gap-3 *:!py-2">
-                                <Button @click="handleCancel"
-                                   theme="outline">
-                                    {{ modalOptions.cancelText || 'Cancel' }}
-                                </button>
-                                <Button @click="handleConfirm"
-                                    theme="primary">
-                                    {{ modalOptions.confirmText || 'Confirm' }}
-                                </button>
-                            </div>
-                        </Dialog.Content>
-                    </HeadlessTransitionChild>
-                </Dialog.Positioner>
-            </Teleport>
-        </Dialog.Root>
-    </HeadlessTransitionRoot>
-</template>
-
-<script setup lang="ts">
-import { Dialog } from "@ark-ui/vue";
-import {
-    confirmModalService,
-    confirmModalWithInputService,
-} from "./service.ts";
-import type { ConfirmModalOptions, ConfirmModalResult } from "./types.ts";
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-const isOpen = ref(false);
-const modalOptions = ref<ConfirmModalOptions>({ message: "" });
-const resolvePromise = ref<((result: ConfirmModalResult) => void) | null>(null);
-const inputValue = ref("");
-const withInput = ref(false);
-const inputPlaceholder = ref("");
-
-const open = async (
-    options: ConfirmModalOptions,
-): Promise<ConfirmModalResult> => {
-    modalOptions.value = options;
-    isOpen.value = true;
-    withInput.value = false;
-    inputValue.value = "";
-
-    return new Promise((resolve) => {
-        resolvePromise.value = resolve;
-    });
-};
-
-const openWithInput = async (
-    options: ConfirmModalOptions,
-    placeholder = "Enter value",
-): Promise<ConfirmModalResult> => {
-    modalOptions.value = options;
-    isOpen.value = true;
-    withInput.value = true;
-    inputValue.value = "";
-    inputPlaceholder.value = placeholder;
-
-    return new Promise((resolve) => {
-        resolvePromise.value = resolve;
-    });
-};
-
-const handleConfirm = () => {
-    if (resolvePromise.value) {
-        resolvePromise.value({
-            confirmed: true,
-            value: withInput.value ? inputValue.value : undefined,
-        });
-        isOpen.value = false;
-    }
-};
-
-const handleCancel = () => {
-    if (resolvePromise.value) {
-        resolvePromise.value({ confirmed: false });
-        isOpen.value = false;
-    }
-};
-
-const handleOpenChange = (open: boolean) => {
-    if (!open && resolvePromise.value) {
-        resolvePromise.value({ confirmed: false });
-        isOpen.value = false;
-    }
-};
-
-// Register the component with the service
-confirmModalService.register({
-    open,
-});
-confirmModalWithInputService.register({
-    open: openWithInput,
-});
-</script>
\ No newline at end of file
diff --git a/components/modals/drawer-content.vue b/components/modals/drawer-content.vue
new file mode 100644
index 0000000..155b268
--- /dev/null
+++ b/components/modals/drawer-content.vue
@@ -0,0 +1,9 @@
+<template>
+    <DrawerContent class="flex flex-col gap-2 px-4 mb-4 [&>:nth-child(2)]:mt-4">
+        <slot />
+    </DrawerContent>
+</template>
+
+<script lang="ts" setup>
+import { DrawerContent } from "../ui/drawer";
+</script>
\ No newline at end of file
diff --git a/components/modals/service.ts b/components/modals/service.ts
deleted file mode 100644
index 06025f7..0000000
--- a/components/modals/service.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ref } from "vue";
-import type { ConfirmModalOptions, ConfirmModalResult } from "./types.ts";
-
-class ConfirmModalService {
-    private modalRef = ref<{
-        open: (options: ConfirmModalOptions) => Promise<ConfirmModalResult>;
-    } | null>(null);
-
-    register(modal: {
-        open: (options: ConfirmModalOptions) => Promise<ConfirmModalResult>;
-    }) {
-        this.modalRef.value = modal;
-    }
-
-    confirm(options: ConfirmModalOptions): Promise<ConfirmModalResult> {
-        if (!this.modalRef.value) {
-            throw new Error("Confirmation modal not initialized");
-        }
-        return this.modalRef.value.open(options);
-    }
-}
-
-class ConfirmModalWithInputService {
-    private modalRef = ref<{
-        open: (
-            options: ConfirmModalOptions,
-            placeholder?: string,
-        ) => Promise<ConfirmModalResult>;
-    } | null>(null);
-
-    register(modal: {
-        open: (
-            options: ConfirmModalOptions,
-            placeholder?: string,
-        ) => Promise<ConfirmModalResult>;
-    }) {
-        this.modalRef.value = modal;
-    }
-
-    confirm(
-        options: ConfirmModalOptions,
-        placeholder?: string,
-    ): Promise<ConfirmModalResult> {
-        if (!this.modalRef.value) {
-            throw new Error("Confirmation modal not initialized");
-        }
-        return this.modalRef.value.open(options, placeholder);
-    }
-}
-
-export const confirmModalService = new ConfirmModalService();
-export const confirmModalWithInputService = new ConfirmModalWithInputService();
diff --git a/components/modals/types.ts b/components/modals/types.ts
deleted file mode 100644
index 34f40e6..0000000
--- a/components/modals/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface ConfirmModalOptions {
-    title?: string;
-    message: string;
-    confirmText?: string;
-    cancelText?: string;
-}
-
-export interface ConfirmModalResult {
-    confirmed: boolean;
-    value?: string;
-}
diff --git a/components/navigation/mobile-navbar.vue b/components/navigation/mobile-navbar.vue
new file mode 100644
index 0000000..adf1c22
--- /dev/null
+++ b/components/navigation/mobile-navbar.vue
@@ -0,0 +1,31 @@
+<template>
+    <div
+        class="fixed md:hidden bottom-0 inset-x-0 border-t h-20 bg-background z-10 flex items-center justify-around *:p-7 *:w-full gap-6 p-6">
+        <Timelines>
+            <Button variant="ghost" size="icon">
+                <Home class="!size-6" />
+            </Button>
+        </Timelines>
+        <Button v-if="identity" :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
+            <Bell class="!size-6" />
+        </Button>
+        <AccountSwitcher>
+            <Button variant="ghost" size="icon">
+                <User class="!size-6" />
+            </Button>
+        </AccountSwitcher>
+        <Button v-if="identity" variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
+            @click="useEvent('composer:open')">
+            <Pen class="!size-6" />
+        </Button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+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";
+import Timelines from "./timelines.vue";
+</script>
\ No newline at end of file
diff --git a/components/navigation/timelines.vue b/components/navigation/timelines.vue
new file mode 100644
index 0000000..d8dd585
--- /dev/null
+++ b/components/navigation/timelines.vue
@@ -0,0 +1,55 @@
+<template>
+    <Drawer>
+        <DrawerTrigger :as-child="true">
+            <slot />
+        </DrawerTrigger>
+        <DrawerContent>
+            <DrawerClose v-for="item in timelines.filter(
+                i => i.requiresLogin ? !!identity : true,
+            )" :key="item.name" :as-child="true">
+                <Button :as="NuxtLink" :href="item.url" variant="outline" size="lg" class="w-full">
+                    <component :is="item.icon" />
+                    {{ item.name }}
+                </Button>
+            </DrawerClose>
+            <DialogTitle class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogTitle>
+            <DialogDescription class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogDescription>
+        </DrawerContent>
+    </Drawer>
+</template>
+
+<script lang="ts" setup>
+import { BedSingle, Globe, House, MapIcon } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+import DrawerContent from "../modals/drawer-content.vue";
+import { Button } from "../ui/button";
+import { Drawer, DrawerTrigger } from "../ui/drawer";
+
+const timelines = [
+    {
+        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,
+    },
+];
+</script>
\ No newline at end of file
diff --git a/components/notes/actions.vue b/components/notes/actions.vue
new file mode 100644
index 0000000..e499e75
--- /dev/null
+++ b/components/notes/actions.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="flex flex-row w-full items-stretch justify-around text-sm *:max-w-28 *:w-full *:text-muted-foreground">
+        <Button variant="ghost" @click="emit('reply')" :title="m.drab_tense_turtle_comfort()" :disabled="!identity">
+            <Reply class="size-5 text-primary" />
+            {{ numberFormat(replyCount) }}
+        </Button>
+        <Button variant="ghost" @click="liked ? unlike() : like()" :title="liked ? m.vexed_fluffy_clownfish_dance() : m.royal_close_samuel_scold()" :disabled="!identity">
+            <Heart class="size-5 text-primary" />
+            {{ numberFormat(likeCount) }}
+        </Button>
+        <Button variant="ghost" @click="reblogged ? unreblog() : reblog()" :title="reblogged ? m.lime_neat_ox_stab() : m.aware_helpful_marlin_drop()" :disabled="!identity">
+            <Repeat class="size-5 text-primary" />
+            {{ numberFormat(reblogCount) }}
+        </Button>
+        <Button variant="ghost" @click="emit('quote')" :title="m.true_shy_jackal_drip()" :disabled="!identity">
+            <Quote class="size-5 text-primary" />
+        </Button>
+        <Menu :api-note-string="apiNoteString" :url="url" :remote-url="remoteUrl" :is-remote="isRemote" :author-id="authorId" @edit="emit('edit')" :note-id="noteId" @delete="emit('delete')">
+            <Button variant="ghost" :title="m.busy_merry_cowfish_absorb()">
+                <Ellipsis class="size-5 text-primary" />
+            </Button>
+        </Menu>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Ellipsis, Heart, Quote, Repeat, Reply } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+import { SettingIds } from "~/settings";
+import { confirmModalService } from "../modals/composable";
+import Menu from "./menu.vue";
+
+const { noteId } = defineProps<{
+    replyCount: number;
+    likeCount: number;
+    reblogCount: number;
+    apiNoteString: string;
+    noteId: string;
+    isRemote: boolean;
+    url: string;
+    remoteUrl: string;
+    authorId: string;
+    liked: boolean;
+    reblogged: boolean;
+}>();
+
+const emit = defineEmits<{
+    edit: [];
+    reply: [];
+    quote: [];
+    delete: [];
+}>();
+
+const confirmLikes = useSetting(SettingIds.ConfirmLike);
+const confirmReblogs = useSetting(SettingIds.ConfirmReblog);
+
+const like = async () => {
+    if (confirmLikes.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.slimy_least_ray_aid(),
+            message: m.stale_new_ray_jolt(),
+            confirmText: m.royal_close_samuel_scold(),
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.slimy_candid_tiger_read());
+    const { data } = await client.value.favouriteStatus(noteId);
+    toast.dismiss(id);
+    toast.success(m.mealy_slow_buzzard_commend());
+    useEvent("note:edit", data);
+};
+
+const unlike = async () => {
+    if (confirmLikes.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.odd_strong_halibut_prosper(),
+            message: m.slow_blue_parrot_savor(),
+            confirmText: m.vexed_fluffy_clownfish_dance(),
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.busy_active_leopard_strive());
+    const { data } = await client.value.unfavouriteStatus(noteId);
+    toast.dismiss(id);
+    toast.success(m.fresh_direct_bear_affirm());
+    useEvent("note:edit", data);
+};
+
+const reblog = async () => {
+    if (confirmReblogs.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.best_mellow_llama_surge(),
+            message: m.salty_plain_mallard_gaze(),
+            confirmText: m.aware_helpful_marlin_drop(),
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.late_sunny_cobra_scold());
+    const { data } = await client.value.reblogStatus(noteId);
+    toast.dismiss(id);
+    toast.success(m.weird_moving_hawk_lift());
+    useEvent("note:edit", data.reblog || data);
+};
+
+const unreblog = async () => {
+    if (confirmReblogs.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.main_fancy_octopus_loop(),
+            message: m.odd_alive_swan_express(),
+            confirmText: m.lime_neat_ox_stab(),
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.white_sharp_gorilla_embrace());
+    const { data } = await client.value.unreblogStatus(noteId);
+    toast.dismiss(id);
+    toast.success(m.royal_polite_moose_catch());
+    useEvent("note:edit", data);
+};
+
+const numberFormat = (number = 0) =>
+    number !== 0
+        ? new Intl.NumberFormat(getLanguageTag(), {
+              notation: "compact",
+              compactDisplay: "short",
+              maximumFractionDigits: 1,
+          }).format(number)
+        : undefined;
+</script>
\ No newline at end of file
diff --git a/components/notes/attachment.vue b/components/notes/attachment.vue
new file mode 100644
index 0000000..3d33d3c
--- /dev/null
+++ b/components/notes/attachment.vue
@@ -0,0 +1,85 @@
+<template>
+    <Dialog>
+        <Card class="w-full h-full overflow-hidden relative">
+            <DialogTrigger v-if="attachment.type === 'image'" :as-child="true">
+                <img :src="attachment.url" :alt="attachment.description ?? undefined"
+                    class="w-full h-full object-contain bg-muted/20" />
+            </DialogTrigger>
+            <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
+                :alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
+            <audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
+                :alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
+            <DialogTrigger v-else :as-child="true">
+                <div class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
+                    <File class="size-12" />
+                    <span class="text-sm"></span>
+                </div>
+            </DialogTrigger>
+            <!-- Alt text viewer -->
+            <Popover v-if="attachment.description">
+                <div class="absolute top-0 right-0 p-2">
+                    <PopoverTrigger :as-child="true">
+                        <Button variant="outline" size="icon" class="[&_svg]:size-6" title="View alt text">
+                            <Captions />
+                        </Button>
+                    </PopoverTrigger>
+                </div>
+                <PopoverContent>
+                    <p class="text-sm">{{ attachment.description }}</p>
+                </PopoverContent>
+            </Popover>
+        </Card>
+        <DialogContent :hide-close="true"
+            class="fixed inset-0 z-50 w-screen h-screen p-6 duration-200 bg-transparent border-none grid grid-rows-[auto,1fr,auto] overflow-hidden translate-x-0 translate-y-0 max-w-full !animate-none gap-6">
+            <div class="flex flex-row gap-2 w-full">
+                <DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
+                <Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon"
+                    class="[&_svg]:size-6  ml-auto">
+                    <Download />
+                </Button>
+                <DialogClose :as-child="true">
+                    <Button variant="ghost" size="icon" class="[&_svg]:size-6">
+                        <X />
+                    </Button>
+                </DialogClose>
+            </div>
+            <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vh]">
+                <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
+                    class="object-contain" />
+                <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
+                    :alt="attachment.description ?? ''" class="object-cover" controls />
+                <audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
+                    class="object-cover" controls />
+                <div v-else class="flex flex-col items-center justify-center">
+                    <File class="size-12" />
+                    <span class="text-sm"></span>
+                </div>
+            </div>
+            <DialogDescription class="flex items-center justify-center">
+                <Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
+                    <p class="text-sm">{{ attachment.description }}</p>
+                </Card>
+            </DialogDescription>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import { Captions, Download, File, X } from "lucide-vue-next";
+import { Card } from "~/components/ui/card";
+import { Button } from "../ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogTitle,
+    DialogTrigger,
+} from "../ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+defineProps<{
+    attachment: Attachment;
+}>();
+</script>
\ No newline at end of file
diff --git a/components/notes/attachments.vue b/components/notes/attachments.vue
new file mode 100644
index 0000000..60ee7d6
--- /dev/null
+++ b/components/notes/attachments.vue
@@ -0,0 +1,15 @@
+<template>
+    <!-- [&:has(>:last-child:nth-child(1))] means "when this element has 1 child" -->
+    <div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 sm:[&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
+        <Attachment v-for="attachment in attachments" :key="attachment.id" :attachment="attachment" />    
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment as AttachmentType } from "@versia/client/types";
+import Attachment from "./attachment.vue";
+
+defineProps<{
+    attachments: AttachmentType[];
+}>();
+</script>
\ No newline at end of file
diff --git a/components/notes/content.vue b/components/notes/content.vue
new file mode 100644
index 0000000..4e7ead5
--- /dev/null
+++ b/components/notes/content.vue
@@ -0,0 +1,143 @@
+<template>
+    <Alert variant="warning" v-if="(sensitive || contentWarning) && showCw.value"
+        class="mb-4 py-2 px-4 grid grid-cols-[auto,1fr,auto] gap-2 items-center [&>svg~*]:pl-0 [&>svg+div]:translate-y-0 [&>svg]:static">
+        <AlertTitle class="sr-only">{{ m.livid_tangy_lionfish_clasp() }}</AlertTitle>
+        <div>
+            <TriangleAlert class="size-4" />
+        </div>
+        <AlertDescription>
+            {{ contentWarning || m.sour_seemly_bird_hike() }}
+        </AlertDescription>
+        <Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? m.bald_direct_turtle_win() : m.known_flaky_cockroach_dash() }}</Button>
+    </Alert>
+
+    <div ref="container" :class="cn('overflow-y-hidden relative duration-200', (blurred && showCw.value) && 'blur-md')" :style="{
+        maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`,
+    }">
+        <div :class="[
+            'prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline',
+            $style.content,
+        ]" v-html="content" v-render-emojis="emojis"></div>
+        <div v-if="isOverflowing && collapsed"
+            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b"></div>
+        <Button v-if="isOverflowing" @click="collapsed = !collapsed"
+            class="absolute bottom-2 right-1/2 translate-x-1/2">{{
+                collapsed
+                    ? `${m.lazy_honest_mammoth_bump()}${plainContent ? ` • ${m.dark_spare_goldfish_charm({
+                        count: formattedCharacterCount ?? '0',
+                    })}` : ""                    }`
+                    : m.that_misty_mule_arrive()
+            }}</Button>
+    </div>
+
+    <Attachments v-if="attachments.length > 0" :attachments="attachments" :class="(blurred && showCw.value) && 'blur-xl'" />
+
+    <div v-if="quote" class="mt-4 rounded border overflow-hidden">
+        <Note :note="quote" :hide-actions="true" :small-layout="true" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { Attachment, Emoji, Status } from "@versia/client/types";
+import { TriangleAlert } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+import { type BooleanSetting, SettingIds } from "~/settings";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import Attachments from "./attachments.vue";
+import Note from "./note.vue";
+
+const { content, plainContent, sensitive, contentWarning } = defineProps<{
+    plainContent?: string;
+    content: string;
+    quote?: NonNullable<Status["quote"]>;
+    emojis: Emoji[];
+    attachments: Attachment[];
+    sensitive: boolean;
+    contentWarning?: string;
+}>();
+const container = ref<HTMLDivElement | null>(null);
+const collapsed = ref(true);
+const blurred = ref(sensitive || !!contentWarning);
+const showCw = useSetting(SettingIds.ShowContentWarning) as Ref<BooleanSetting>;
+
+// max-h-72 is 18rem
+const remToPx = (rem: number) =>
+    rem *
+    Number.parseFloat(
+        getComputedStyle(document.documentElement).fontSize || "16px",
+    );
+const isOverflowing = computed(() => {
+    if (!container.value) {
+        return false;
+    }
+    return container.value.scrollHeight > remToPx(18);
+});
+
+const characterCount = plainContent?.length;
+const formattedCharacterCount = characterCount
+    ? new Intl.NumberFormat(getLanguageTag()).format(characterCount)
+    : undefined;
+</script>
+
+<style module>
+.content pre:has(code) {
+    word-wrap: normal;
+    background: transparent;
+    background-color: #ffffff0d;
+    border-radius: 0.25rem;
+    hyphens: none;
+    margin-top: 1rem;
+    overflow-x: auto;
+    padding: 0.75rem 1rem;
+    tab-size: 4;
+    white-space: pre;
+    word-break: normal;
+    word-spacing: normal;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.content pre code {
+    display: block;
+    padding: 0;
+}
+
+.content code:not(pre code)::after,
+.content code:not(pre code)::before {
+    content: "";
+}
+
+.content ol li input[type="checkbox"],
+.content ul li input[type="checkbox"] {
+    border-radius: 0.25rem;
+    margin-bottom: 0.2rem;
+    margin-right: 0.5rem;
+    margin-top: 0;
+    vertical-align: middle;
+    --tw-text-opacity: 1;
+    color: var(--theme-primary-400);
+}
+
+.content code:not(pre code) {
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    word-wrap: break-word;
+    background: transparent;
+    background-color: #ffffff0d;
+    hyphens: none;
+    margin-top: 1rem;
+    tab-size: 4;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, 0.1);
+}
+</style>
diff --git a/components/notes/copyable-text.vue b/components/notes/copyable-text.vue
new file mode 100644
index 0000000..8aae778
--- /dev/null
+++ b/components/notes/copyable-text.vue
@@ -0,0 +1,33 @@
+<template>
+    <span :class="cn('text-primary group', $props.class)">
+        <span class="group-hover:hidden">
+            <slot />
+        </span>
+        <span class="hidden group-hover:inline">
+            <span @click="copyText"
+                class="select-none cursor-pointer space-x-1">
+                <Clipboard class="size-4 -translate-y-0.5 inline" />
+                {{ m.clean_yummy_owl_reside() }}
+            </span>
+        </span>
+    </span>
+</template>
+
+<script lang="tsx" setup>
+import { cn } from "@/lib/utils";
+import { Check, Clipboard } from "lucide-vue-next";
+import type { HTMLAttributes } from "vue";
+import { toast } from "vue-sonner";
+import * as m from "~/paraglide/messages.js";
+
+const { text } = defineProps<{
+    text: string;
+    class?: HTMLAttributes["class"];
+}>();
+
+const { copy } = useClipboard();
+const copyText = () => {
+    copy(text);
+    toast.success("Copied to clipboard");
+};
+</script>
\ No newline at end of file
diff --git a/components/notes/header.vue b/components/notes/header.vue
new file mode 100644
index 0000000..8b92a52
--- /dev/null
+++ b/components/notes/header.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="rounded flex flex-row items-center gap-3">
+        <HoverCard v-model:open="popupOpen" @update:open="() => {
+            if (!enableHoverCard.value) {
+                popupOpen = false;
+            }
+        }" :open-delay="2000">
+            <HoverCardTrigger :as-child="true">
+                <NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
+                    <Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="author.avatar"
+                        :name="author.display_name" />
+                    <Avatar v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1" :src="cornerAvatar" />
+                </NuxtLink>
+            </HoverCardTrigger>
+            <HoverCardContent class="w-96">
+                <SmallCard :account="author" />
+            </HoverCardContent>
+        </HoverCard>
+        <div
+            :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'text-sm')">
+            <span class="truncate font-semibold" v-render-emojis="author.emojis">{{
+                author.display_name
+            }}</span>
+            <span class="truncate text-sm tracking-tight">
+                <CopyableText :text="author.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">
+                        @{{ username }}
+                    </span>
+                    <span class="text-muted-foreground">{{ instance && "@" }}{{ instance }}</span>
+                </CopyableText>
+                &middot;
+                <span class="text-muted-foreground ml-auto tracking-normal" :title="fullTime">{{ timeAgo }}</span>
+            </span>
+        </div>
+        <div class="flex flex-col gap-1 justify-center items-end" v-if="!smallLayout">
+            <NuxtLink :href="noteUrlAsPath" class="text-xs text-muted-foreground"
+                :title="visibilities[visibility].text">
+                <component :is="visibilities[visibility].icon" class="size-5" />
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { Account, StatusVisibility } from "@versia/client/types";
+import type {
+    UseTimeAgoMessages,
+    UseTimeAgoUnitNamesDefault,
+} from "@vueuse/core";
+import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
+import { SettingIds } from "~/settings";
+import Avatar from "../profiles/avatar.vue";
+import SmallCard from "../profiles/small-card.vue";
+import {
+    HoverCard,
+    HoverCardContent,
+    HoverCardTrigger,
+} from "../ui/hover-card";
+import CopyableText from "./copyable-text.vue";
+
+const { createdAt, noteUrl, author, authorUrl } = defineProps<{
+    cornerAvatar?: string;
+    visibility: StatusVisibility;
+    noteUrl: string;
+    createdAt: Date;
+    smallLayout?: boolean;
+    author: Account;
+    authorUrl: string;
+}>();
+
+const [username, instance] = author.acct.split("@");
+const digitRegex = /\d/;
+const urlAsPath = new URL(authorUrl).pathname;
+const noteUrlAsPath = new URL(noteUrl).pathname;
+const timeAgo = useTimeAgo(createdAt, {
+    messages: {
+        justNow: "now",
+        past: (n) => (n.match(digitRegex) ? `${n}` : n),
+        future: (n) => (n.match(digitRegex) ? `in ${n}` : n),
+        month: (n) => `${n}mo`,
+        year: (n) => `${n}y`,
+        day: (n) => `${n}d`,
+        week: (n) => `${n}w`,
+        hour: (n) => `${n}h`,
+        minute: (n) => `${n}m`,
+        second: (n) => `${n}s`,
+        invalid: "",
+    } as UseTimeAgoMessages<UseTimeAgoUnitNamesDefault>,
+});
+const fullTime = new Intl.DateTimeFormat(getLanguageTag(), {
+    dateStyle: "medium",
+    timeStyle: "short",
+}).format(createdAt);
+const enableHoverCard = useSetting(SettingIds.PopupAvatarHover);
+const popupOpen = ref(false);
+
+const visibilities = {
+    public: {
+        icon: Globe,
+        text: "This note is public: it can be seen by anyone.",
+    },
+    unlisted: {
+        icon: LockOpen,
+        text: "This note is unlisted: it can be seen by anyone with the link.",
+    },
+    private: {
+        icon: Lock,
+        text: "This note is private: it can only be seen by followers.",
+    },
+    direct: {
+        icon: AtSign,
+        text: "This note is direct: it can only be seen by mentioned users.",
+    },
+};
+</script>
\ No newline at end of file
diff --git a/components/notes/menu.vue b/components/notes/menu.vue
new file mode 100644
index 0000000..2ffb8a9
--- /dev/null
+++ b/components/notes/menu.vue
@@ -0,0 +1,144 @@
+<script setup lang="tsx">
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+    Ban,
+    Code,
+    Delete,
+    ExternalLink,
+    Flag,
+    Hash,
+    Link,
+    Pencil,
+    Trash,
+} from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import { confirmModalService } from "~/components/modals/composable.ts";
+import * as m from "~/paraglide/messages.js";
+import { SettingIds } from "~/settings";
+
+const { authorId, noteId } = defineProps<{
+    apiNoteString: string;
+    isRemote: boolean;
+    url: string;
+    remoteUrl: string;
+    authorId: string;
+    noteId: string;
+}>();
+
+const emit = defineEmits<{
+    edit: [];
+    delete: [];
+}>();
+
+const { copy } = useClipboard();
+const loggedIn = !!identity.value;
+const authorIsMe = loggedIn && authorId === identity.value?.account.id;
+
+const confirmDeletes = useSetting(SettingIds.ConfirmDelete);
+
+const copyText = (text: string) => {
+    copy(text);
+    toast.success(m.flat_nice_worm_dream());
+};
+
+const blockUser = async (userId: string) => {
+    const id = toast.loading(m.top_cute_bison_nudge());
+    await client.value.blockAccount(userId);
+    toast.dismiss(id);
+
+    toast.success(m.main_weary_racoon_peek());
+};
+
+const _delete = async () => {
+    if (confirmDeletes.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.calm_icy_weasel_twirl(),
+            message: m.gray_fun_toucan_slide(),
+            confirmText: m.royal_best_tern_transform(),
+            inputType: "none",
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.new_funny_fox_boil());
+    await client.value.deleteStatus(noteId);
+    toast.dismiss(id);
+
+    toast.success(m.green_tasty_bumblebee_beam());
+    emit("delete");
+};
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="min-w-56">
+            <DropdownMenuLabel>{{ m.many_misty_parakeet_fall() }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem v-if="authorIsMe" as="button" @click="emit('edit')">
+                    <Pencil class="mr-2 size-4" />
+                    {{ m.front_lime_grizzly_persist() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="copyText(apiNoteString)">
+                    <Code class="mr-2 size-4" />
+                    {{ m.yummy_moving_scallop_sail() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="copyText(noteId)">
+                    <Hash class="mr-2 size-4" />
+                    {{ m.sunny_zany_jellyfish_pop() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem as="button" @click="copyText(url)">
+                    <Link class="mr-2 size-4" />
+                    {{ m.ago_new_pelican_drip() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" v-if="isRemote" @click="copyText(remoteUrl)">
+                    <Link class="mr-2 size-4" />
+                    {{ m.solid_witty_zebra_walk() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="remoteUrl">
+                    <ExternalLink class="mr-2 size-4" />
+                    {{ m.active_trite_lark_inspire() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="authorIsMe" />
+            <DropdownMenuGroup v-if="authorIsMe">
+                <DropdownMenuItem as="button" :disabled="true">
+                    <Delete class="mr-2 size-4" />
+                    {{ m.real_green_clownfish_pet() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="_delete">
+                    <Trash class="mr-2 size-4" />
+                    {{ m.tense_quick_cod_favor() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="loggedIn && !authorIsMe" />
+            <DropdownMenuGroup v-if="loggedIn && !authorIsMe">
+                <DropdownMenuItem as="button" :disabled="true">
+                    <Flag class="mr-2 size-4" />
+                    {{ m.great_few_jaguar_rise() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="blockUser(authorId)">
+                    <Ban class="mr-2 size-4" />
+                    {{ m.misty_soft_sparrow_vent() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
\ No newline at end of file
diff --git a/components/notes/note.vue b/components/notes/note.vue
new file mode 100644
index 0000000..3f818f4
--- /dev/null
+++ b/components/notes/note.vue
@@ -0,0 +1,49 @@
+<template>
+    <Card as="article" class="rounded-none border-0 duration-200 shadow- max-w-full">
+        <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" />
+        </CardHeader>
+        <CardContent>
+            <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>
+    </Card>
+</template>
+
+<script setup lang="ts">
+import type { Status } from "@versia/client/types";
+import { Card, CardFooter, CardHeader } from "../ui/card";
+import Actions from "./actions.vue";
+import Content from "./content.vue";
+import Header from "./header.vue";
+import ReblogHeader from "./reblog-header.vue";
+
+const { note } = defineProps<{
+    note: Status;
+    hideActions?: boolean;
+    smallLayout?: boolean;
+}>();
+
+// Notes can be reblogs, in which case the actual thing to render is inside the reblog property
+const noteToUse = computed(() => (note.reblog ? note.reblog : note));
+
+const url = wrapUrl(`/@${noteToUse.value.account.acct}/${noteToUse.value.id}`);
+const accountUrl = wrapUrl(`/@${noteToUse.value.account.acct}`);
+const reblogAccountUrl = wrapUrl(`/@${note.account.acct}`);
+const isRemote = noteToUse.value.account.acct.includes("@");
+</script>
diff --git a/components/notes/reblog-header.vue b/components/notes/reblog-header.vue
new file mode 100644
index 0000000..60013fe
--- /dev/null
+++ b/components/notes/reblog-header.vue
@@ -0,0 +1,24 @@
+<template>
+    <NuxtLink :href="urlAsPath" class="rounded border hover:bg-muted duration-100 text-sm flex flex-row items-center gap-2 px-2 py-1 mb-4">
+        <Repeat class="size-4 text-primary" />
+        <Avatar class="size-6 border" :src="avatar" :name="displayName" />
+        <span class="font-semibold" v-render-emojis="emojis">{{ displayName }}</span>
+        {{ m.large_vivid_horse_catch() }}
+    </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji } from "@versia/client/types";
+import { Repeat } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+import Avatar from "../profiles/avatar.vue";
+
+const { url } = defineProps<{
+    avatar: string;
+    displayName: string;
+    emojis: Emoji[];
+    url: string;
+}>();
+
+const urlAsPath = new URL(url).pathname;
+</script>
\ No newline at end of file
diff --git a/components/notifications/follow-request.vue b/components/notifications/follow-request.vue
new file mode 100644
index 0000000..a822529
--- /dev/null
+++ b/components/notifications/follow-request.vue
@@ -0,0 +1,87 @@
+<template>
+    <div v-if="relationship?.requested_by !== false" class="flex flex-row items-center gap-3 p-4">
+        <NuxtLink :href="followerUrl" class="relative size-10">
+            <Avatar class="size-10 border border-border" :src="follower.avatar" :name="follower.display_name" />
+        </NuxtLink>
+        <div class="flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight text-sm">
+            <span class="truncate font-semibold" v-render-emojis="follower.emojis">{{
+                follower.display_name
+                }}</span>
+            <span class="truncate tracking-tight">
+                <CopyableText :text="follower.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">
+                        @{{ username }}
+                    </span>
+                    <span class="text-muted-foreground">{{ instance && "@" }}{{ instance }}</span>
+                </CopyableText>
+            </span>
+        </div>
+    </div>
+    <div v-if="loading" class="flex p-2 items-center justify-center h-12">
+        <Loader class="size-4 animate-spin" />
+    </div>
+    <div v-else-if="relationship?.requested_by === false" class="flex p-2 items-center justify-center h-12">
+        <Check class="size-4" />
+    </div>
+    <div v-else class="grid grid-cols-2 p-2 gap-2">
+        <Button variant="outline" size="sm" @click="accept">
+            <Check />
+            {{ m.slow_these_kestrel_sail() }}
+        </Button>
+        <Button variant="ghost" size="sm" @click="reject">
+            <X />
+            {{ m.weary_steep_yak_embrace() }}
+        </Button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "@versia/client/types";
+import { Check, Loader, X } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import CopyableText from "~/components/notes/copyable-text.vue";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+import Avatar from "../profiles/avatar.vue";
+
+const { follower } = defineProps<{
+    follower: Account;
+}>();
+
+const loading = ref(true);
+const followerUrl = `/@${follower.acct}`;
+const [username, instance] = follower.acct.split("@");
+const { relationship } = useRelationship(client, follower.id);
+
+// TODO: Add "followed" notification
+watch(relationship, () => {
+    if (relationship.value) {
+        loading.value = false;
+    }
+});
+
+const accept = async () => {
+    const id = toast.loading(m.cool_slimy_coyote_affirm());
+    loading.value = true;
+
+    const { data } = await client.value.acceptFollowRequest(follower.id);
+
+    toast.dismiss(id);
+    toast.success(m.busy_awful_mouse_jump());
+    relationship.value = data;
+    loading.value = false;
+};
+
+const reject = async () => {
+    const id = toast.loading(m.front_sunny_penguin_flip());
+    loading.value = true;
+
+    const { data } = await client.value.rejectFollowRequest(follower.id);
+
+    toast.dismiss(id);
+    toast.success(m.green_flat_mayfly_trust());
+    relationship.value = data;
+    loading.value = false;
+};
+</script>
\ No newline at end of file
diff --git a/components/notifications/notification.vue b/components/notifications/notification.vue
new file mode 100644
index 0000000..4035d89
--- /dev/null
+++ b/components/notifications/notification.vue
@@ -0,0 +1,104 @@
+<template>
+    <Card>
+        <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">
+                        <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>
+                        <CollapsibleTrigger :as-child="true">
+                            <Button variant="ghost" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180" :title="open ? 'Collapse' : 'Expand'">
+                                <ChevronDown class="duration-200" />
+                            </Button>
+                        </CollapsibleTrigger>
+                    </CardHeader>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{{ text }}</p>
+                </TooltipContent>
+            </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" />
+                </CardContent>
+            </CollapsibleContent>
+        </Collapsible>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Notification } from "@versia/client/types";
+import {
+    AtSign,
+    ChevronDown,
+    Heart,
+    Repeat,
+    User,
+    UserCheck,
+    UserPlus,
+} from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+import * as m from "~/paraglide/messages.js";
+import Note from "../notes/note.vue";
+import Avatar from "../profiles/avatar.vue";
+import FollowRequest from "./follow-request.vue";
+
+const { notification } = defineProps<{
+    notification: Notification;
+}>();
+
+const icon = computed(() => {
+    switch (notification.type) {
+        case "mention":
+            return AtSign;
+        case "reblog":
+            return Repeat;
+        case "follow":
+            return UserPlus;
+        case "favourite":
+            return Heart;
+        case "follow_request":
+            return User;
+        case "follow_accept":
+            return UserCheck;
+        default:
+            return null;
+    }
+});
+
+const text = computed(() => {
+    switch (notification.type) {
+        case "mention":
+            return m.fuzzy_orange_tuna_succeed();
+        case "reblog":
+            return m.grand_proof_quail_read();
+        case "follow":
+            return m.top_steep_scallop_care();
+        case "favourite":
+            return m.swift_just_beetle_devour();
+        case "follow_request":
+            return m.seemly_short_thrush_bloom();
+        case "follow_accept":
+            return m.weird_seemly_termite_scold();
+        default:
+            return "";
+    }
+});
+</script>
diff --git a/components/notifications/notifications-renderer.vue b/components/notifications/notifications-renderer.vue
deleted file mode 100644
index 64dd0e6..0000000
--- a/components/notifications/notifications-renderer.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <Teleport to="body">
-        <Toaster :toaster="toaster" v-slot="toast">
-            <Toast.Root
-                class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
-                <div class="grid grid-cols-[auto_1fr_auto]">
-                    <div class="shrink-0 h-6 w-6">
-                        <iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
-                            class="h-6 w-6 text-green-400" aria-hidden="true" />
-                        <iconify-icon v-else-if="toast.type === 'error'" icon="tabler:alert-triangle" height="none"
-                            class="h-6 w-6 text-red-400" aria-hidden="true" />
-                        <iconify-icon v-else-if="toast.type === 'loading'" icon="tabler:loader" height="none"
-                            class="h-6 w-6 text-primary-500 animate-spin" aria-hidden="true" />
-                        <iconify-icon v-else-if="toast.type === 'info'" icon="tabler:info-circle" height="none"
-                            class="h-6 w-6 text-blue-500" aria-hidden="true" />
-                    </div>
-                    <div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
-                        <Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
-                        <Toast.Description class="mt-1 text-sm text-gray-400">{{
-                            toast.description }}</Toast.Description>
-                    </div>
-                    <div class="ml-4 flex shrink-0">
-                        <Toast.CloseTrigger type="button" title="Close this notification"
-                            class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
-                            <iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
-                        </Toast.CloseTrigger>
-                    </div>
-                </div>
-            </Toast.Root>
-        </Toaster>
-    </Teleport>
-</template>
-
-<script setup lang="tsx">
-import { Toast, Toaster, createToaster } from "@ark-ui/vue";
-
-const toaster = createToaster({ placement: "top-end", overlap: true, gap: 24 });
-
-useListen("notification:new", (notification) => {
-    toaster.create(notification);
-});
-</script>
\ No newline at end of file
diff --git a/components/oauth/login.vue b/components/oauth/login.vue
new file mode 100644
index 0000000..86e1fe0
--- /dev/null
+++ b/components/oauth/login.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { toTypedSchema } from "@vee-validate/zod";
+import type { Instance } from "@versia/client";
+import { Loader } from "lucide-vue-next";
+import { useForm } from "vee-validate";
+import * as z from "zod";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
+
+const { instance } = defineProps<{
+    instance: Instance;
+}>();
+
+const isLoading = ref(false);
+const ssoConfig = computed(() => instance.sso);
+
+const formSchema = toTypedSchema(
+    z.object({
+        identifier: z
+            .string()
+            .min(3, {
+                message: m.aware_house_dolphin_win(),
+            })
+            .or(
+                z.string().email({
+                    message: m.weary_fresh_dragonfly_bless(),
+                }),
+            ),
+        password: z.string().min(3, {
+            message: m.aware_house_dolphin_win(),
+        }),
+    }),
+);
+
+const form = useForm({
+    validationSchema: formSchema,
+});
+
+const redirectUrl = new URL("/api/auth/login", `https://${instance.domain}`);
+
+const params = useUrlSearchParams();
+
+for (const name of [
+    "redirect_uri",
+    "response_type",
+    "client_id",
+    "scope",
+    "state",
+]) {
+    if (params[name]) {
+        redirectUrl.searchParams.set(name, params[name] as string);
+    }
+}
+
+const issuerRedirectUrl = (issuerId: string) => {
+    const url = new URL("/oauth/sso", useBaseUrl().value);
+
+    for (const name of [
+        "redirect_uri",
+        "response_type",
+        "client_id",
+        "scope",
+        "state",
+    ]) {
+        if (params[name]) {
+            url.searchParams.set(name, params[name] as string);
+        }
+    }
+
+    url.searchParams.set("issuer", issuerId);
+    return url.toString();
+};
+</script>
+
+<template>
+    <div class="grid gap-6">
+        <form @submit="form.submitForm" method="post" :action="redirectUrl.toString()">
+            <div class="grid gap-6">
+                <FormField v-slot="{ componentField }" name="identifier">
+                    <FormItem>
+                        <FormLabel>
+                            {{ 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" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>
+                            {{ 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" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <Button :disabled="isLoading" type="submit">
+                    <Loader v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+                    {{ m.fuzzy_sea_moth_absorb() }}
+                </Button>
+            </div>
+        </form>
+        <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>
+            <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground">
+                    {{ m.tidy_tidy_cow_cut() }}
+                </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">
+                <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" />
+                {{ provider.name }}
+            </Button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/preferences/code.vue b/components/preferences/code.vue
new file mode 100644
index 0000000..e10c67e
--- /dev/null
+++ b/components/preferences/code.vue
@@ -0,0 +1,49 @@
+<template>
+    <Collapsible :as="Card" class="grid items-center p-6 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">
+                    {{ setting.title() }}
+                </CardTitle>
+                <CardDescription>
+                    {{ setting.description() }}
+                </CardDescription>
+            </CardHeader>
+            <CollapsibleTrigger :as-child="true">
+                <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) }" />
+            </CardFooter>
+        </CollapsibleContent>
+    </Collapsible>
+</template>
+
+<script lang="ts" setup>
+import { ChevronDown } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import { Textarea } from "~/components/ui/textarea";
+import type { CodeSetting } from "~/settings.ts";
+
+defineModel<CodeSetting>("setting", {
+    required: true,
+});
+</script>
\ No newline at end of file
diff --git a/components/preferences/emojis/category.vue b/components/preferences/emojis/category.vue
new file mode 100644
index 0000000..fb27089
--- /dev/null
+++ b/components/preferences/emojis/category.vue
@@ -0,0 +1,34 @@
+<template>
+    <Collapsible :default-open="true">
+        <div class="grid grid-cols-[1fr,auto] gap-4 items-baseline">
+            <h2 class="text-2xl font-semibold tracking-tight">
+                {{ name }}
+            </h2>
+            <CollapsibleTrigger :as-child="true">
+                <Button size="icon" variant="outline" class="[&_svg]:data-[state=open]:-rotate-180">
+                    <ChevronDown class="duration-200" />
+                </Button>
+            </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-3 mt-4">
+            <Emoji v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
+        </CollapsibleContent>
+    </Collapsible>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji as EmojiType } from "@versia/client/types";
+import { ChevronDown } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import Emoji from "./emoji.vue";
+
+defineProps<{
+    emojis: EmojiType[];
+    name: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/components/preferences/emojis/emoji.vue b/components/preferences/emojis/emoji.vue
new file mode 100644
index 0000000..59d9788
--- /dev/null
+++ b/components/preferences/emojis/emoji.vue
@@ -0,0 +1,136 @@
+<template>
+    <DropdownMenu>
+        <Card
+            :class="cn('grid hover:cursor-pointer gap-4 items-center p-4', canEdit ? 'grid-cols-[auto,1fr,auto]' : 'grid-cols-[auto,1fr]')">
+            <Avatar shape="square">
+                <AvatarImage :src="emoji.url" />
+            </Avatar>
+            <CardHeader class="p-0 gap-0 overflow-hidden">
+                <CardTitle as="span" class="text-sm font-mono truncate">
+                    {{ emoji.shortcode }}
+                </CardTitle>
+                <CardDescription>
+                    {{ emoji.global ? m.real_tame_moose_greet() : m.witty_heroic_trout_cry() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="p-0" v-if="canEdit">
+                <DropdownMenuTrigger :as-child="true">
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis />
+                    </Button>
+                </DropdownMenuTrigger>
+            </CardFooter>
+        </Card>
+        <DropdownMenuContent class="min-w-48">
+            <DropdownMenuLabel class="font-mono">{{ emoji.shortcode }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem @click="editName">
+                <TextCursorInput class="mr-2 h-4 w-4" />
+                {{ m.cuddly_such_swallow_hush() }}
+            </DropdownMenuItem>
+            <!-- <DropdownMenuItem @click="editCaption">
+                <Captions class="mr-2 h-4 w-4" />
+                <span>Add caption</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator /> -->
+            <DropdownMenuItem @click="_delete">
+                <Delete class="mr-2 h-4 w-4" />
+                {{ m.tense_quick_cod_favor() }}
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { type Emoji, RolePermission } from "@versia/client/types";
+import { Delete, Ellipsis, TextCursorInput } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import { confirmModalService } from "~/components/modals/composable";
+import { Avatar } from "~/components/ui/avatar";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import * as m from "~/paraglide/messages.js";
+
+const { emoji } = defineProps<{
+    emoji: Emoji;
+}>();
+
+const permissions = usePermissions();
+const canEdit =
+    (!emoji.global &&
+        permissions.value.includes(RolePermission.ManageOwnEmojis)) ||
+    permissions.value.includes(RolePermission.ManageEmojis);
+
+const editName = async () => {
+    if (!identity.value) {
+        return;
+    }
+
+    const result = await confirmModalService.confirm({
+        title: m.slimy_awful_florian_sail(),
+        defaultValue: emoji.shortcode,
+        confirmText: m.teary_antsy_panda_aid(),
+        inputType: "text",
+    });
+
+    if (result.confirmed) {
+        const id = toast.loading(m.teary_tame_gull_bless());
+        try {
+            const { data } = await client.value.updateEmoji(emoji.id, {
+                shortcode: result.value,
+            });
+
+            toast.dismiss(id);
+            toast.success(m.gaudy_lime_bison_adore());
+
+            identity.value.emojis = identity.value.emojis.map((e) =>
+                e.id === emoji.id ? data : e,
+            );
+        } catch {
+            toast.dismiss(id);
+        }
+    }
+};
+
+const _delete = async () => {
+    if (!identity.value) {
+        return;
+    }
+
+    const { confirmed } = await confirmModalService.confirm({
+        title: m.tense_quick_cod_favor(),
+        message: m.honest_factual_carp_aspire(),
+        confirmText: m.tense_quick_cod_favor(),
+    });
+
+    if (confirmed) {
+        const id = toast.loading(m.weary_away_liger_zip());
+        try {
+            await client.value.deleteEmoji(emoji.id);
+            toast.dismiss(id);
+            toast.success(m.crisp_whole_canary_tear());
+
+            identity.value.emojis = identity.value.emojis.filter(
+                (e) => e.id !== emoji.id,
+            );
+        } catch {
+            toast.dismiss(id);
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/components/preferences/emojis/uploader.vue b/components/preferences/emojis/uploader.vue
new file mode 100644
index 0000000..319a7dc
--- /dev/null
+++ b/components/preferences/emojis/uploader.vue
@@ -0,0 +1,245 @@
+<template>
+    <Dialog v-model:open="open">
+        <DialogTrigger>
+            <slot />
+        </DialogTrigger>
+        <DialogContent>
+            <DialogTitle>
+                {{ m.whole_icy_puffin_smile() }}
+            </DialogTitle>
+            <DialogDescription class="sr-only">
+                {{ m.frail_great_marten_pet() }}
+            </DialogDescription>
+            <form class="p-4 grid gap-6" @submit="submit">
+                <div v-if="values.image" class="flex items-center justify-around *:size-20 *:p-2 *:rounded *:border *:shadow">
+                    <div class="bg-background">
+                        <img class="h-full object-cover" :src="createObjectURL(values.image as File)" :alt="values.alt" />
+                    </div>
+                    <div class="bg-zinc-700">
+                        <img class="h-full object-cover" :src="createObjectURL(values.image as File)" :alt="values.alt" />
+                    </div>
+                    <div class="bg-zinc-400">
+                        <img class="h-full object-cover" :src="createObjectURL(values.image as File)" :alt="values.alt" />
+                    </div>
+                    <div class="bg-foreground">
+                        <img class="h-full object-cover" :src="createObjectURL(values.image as File)" :alt="values.alt" />
+                    </div>
+                </div>
+
+                <FormField v-slot="{ handleChange, handleBlur }" name="image">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.active_direct_bear_compose() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input type="file" accept="image/*" @change="(e: any) => {
+                                handleChange(e);
+
+                                if (!values.shortcode) {
+                                    setFieldValue('shortcode', e.target.files[0].name.replace(/\.[^/.]+$/, ''));
+                                }
+                            }" @blur="handleBlur" :disabled="isSubmitting" />
+                        </FormControl>
+                        <FormDescription>
+                            {{ m.lime_late_millipede_urge() }}
+                        </FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="shortcode">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.happy_mild_fox_gleam() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input v-bind="componentField" :disabled="isSubmitting" />
+                        </FormControl>
+                        <FormDescription>
+                            {{ m.glad_day_kestrel_amaze() }}
+                        </FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="category">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.short_cute_jackdaw_comfort() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input v-bind="componentField" :disabled="isSubmitting" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="alt">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.watery_left_shrimp_bless() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Textarea rows="2" v-bind="componentField" :disabled="isSubmitting" />
+                        </FormControl>
+                        <FormDescription>
+                            {{ m.weird_fun_jurgen_arise() }}
+                        </FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField, value, handleChange }" v-if="hasEmojiAdmin" name="global"
+                    :as="Card">
+                    <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                        <CardHeader class="space-y-0.5 p-0">
+                            <FormLabel :as="CardTitle">
+                                {{ m.pink_sharp_carp_work() }}
+                            </FormLabel>
+                            <CardDescription>
+                                {{ m.dark_pretty_hyena_link() }}
+                            </CardDescription>
+                        </CardHeader>
+                        <FormControl>
+                            <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" :disabled="isSubmitting" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <DialogFooter>
+                    <DialogClose :as-child="true">
+                        <Button variant="outline" :disabled="isSubmitting">
+                            {{ m.soft_bold_ant_attend() }}
+                        </Button>
+                    </DialogClose>
+                    <Button type="submit" variant="default" :disabled="isSubmitting">
+                        {{ m.flat_safe_haddock_gaze() }}
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { toTypedSchema } from "@vee-validate/zod";
+import { RolePermission } from "@versia/client/types";
+import { useForm } from "vee-validate";
+import { toast } from "vue-sonner";
+import { z } from "zod";
+import { Button } from "~/components/ui/button";
+import { Card, CardTitle } from "~/components/ui/card";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogTitle,
+    DialogTrigger,
+} from "~/components/ui/dialog";
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import * as m from "~/paraglide/messages.js";
+
+const open = ref(false);
+const permissions = usePermissions();
+const hasEmojiAdmin = permissions.value.includes(RolePermission.ManageEmojis);
+const createObjectURL = URL.createObjectURL;
+
+const formSchema = toTypedSchema(
+    z.object({
+        image: z
+            .instanceof(File, {
+                message: m.sound_topical_gopher_offer(),
+            })
+            .refine(
+                (v) =>
+                    v.size <=
+                    // @ts-expect-error Types aren't updated with this new value yet
+                    (identity.value?.instance.configuration.emojis
+                        .emoji_size_limit ?? 0),
+                m.orange_weird_parakeet_hug({
+                    // @ts-expect-error Types aren't updated with this new value yet
+                    count: identity.value?.instance.configuration.emojis
+                        .emoji_size_limit,
+                }),
+            ),
+        shortcode: z
+            .string()
+            .min(1)
+            .max(
+                // @ts-expect-error Types aren't updated with this new value yet
+                identity.value?.instance.configuration.emojis
+                    .max_emoji_shortcode_characters,
+                m.solid_inclusive_owl_hug({
+                    // @ts-expect-error Types aren't updated with this new value yet
+                    count: identity.value?.instance.configuration.emojis
+                        .max_emoji_shortcode_characters,
+                }),
+            )
+            .regex(emojiValidator),
+        global: z.boolean().default(false),
+        category: z
+            .string()
+            .max(
+                64,
+                m.home_cool_orangutan_hug({
+                    count: 64,
+                }),
+            )
+            .optional(),
+        alt: z
+            .string()
+            .max(
+                // @ts-expect-error Types aren't updated with this new value yet
+                identity.value?.instance.configuration.emojis
+                    .max_emoji_description_characters,
+                m.key_ago_hound_emerge({
+                    // @ts-expect-error Types aren't updated with this new value yet
+                    count: identity.value?.instance.configuration.emojis
+                        .max_emoji_description_characters,
+                }),
+            )
+            .optional(),
+    }),
+);
+const { isSubmitting, handleSubmit, values, setFieldValue } = useForm({
+    validationSchema: formSchema,
+});
+
+const submit = handleSubmit(async (values) => {
+    if (!identity.value) {
+        return;
+    }
+
+    const id = toast.loading(m.factual_gray_mouse_believe());
+
+    try {
+        const { data } = await client.value.uploadEmoji(
+            values.shortcode,
+            values.image,
+            {
+                alt: values.alt,
+                category: values.category,
+                global: values.global,
+            },
+        );
+
+        toast.dismiss(id);
+        toast.success(m.cool_trite_gull_quiz());
+
+        identity.value.emojis = [...identity.value.emojis, data];
+        open.value = false;
+    } catch {
+        toast.dismiss(id);
+    }
+});
+</script>
\ No newline at end of file
diff --git a/components/preferences/profile/editor.vue b/components/preferences/profile/editor.vue
new file mode 100644
index 0000000..0403f04
--- /dev/null
+++ b/components/preferences/profile/editor.vue
@@ -0,0 +1,329 @@
+<template>
+    <Card v-if="identity" class="w-full max-h-full overflow-auto">
+        <form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
+            <FormField v-slot="{ handleChange, handleBlur }" name="banner">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.bright_late_osprey_renew() }}
+                    </FormLabel>
+                    <FormControl>
+                        <Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
+                    </FormControl>
+                    <FormDescription>
+                        {{ m.great_level_lamb_sway() }}
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ handleChange, handleBlur }" name="avatar">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.safe_icy_bulldog_quell() }}
+                    </FormLabel>
+                    <FormControl>
+                        <Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
+                    </FormControl>
+                    <FormDescription>
+                        {{ m.aware_quiet_opossum_catch() }}
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.mild_known_mallard_jolt() }}
+                    </FormLabel>
+                    <FormControl>
+                        <Input v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        {{ m.lime_dry_skunk_loop() }}
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="username">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.neat_silly_dog_prosper() }}
+                    </FormLabel>
+                    <FormControl>
+                        <Input v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        {{ m.petty_plane_tadpole_earn() }}
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="bio">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.next_caring_ladybug_hack() }}
+                    </FormLabel>
+                    <FormControl>
+                        <Textarea rows="10" v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        {{ m.stale_just_anaconda_earn() }}
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ value, handleChange }" name="fields">
+                <FormItem>
+                    <FormLabel>
+                        {{ m.aqua_mealy_toucan_pride() }}
+                    </FormLabel>
+                    <FormControl>
+                        <div class="grid gap-4">
+                            <div v-for="(field, index) in value" :key="index"
+                                class="grid items-center grid-cols-[auto,repeat(3,minmax(0,1fr))] gap-2">
+                                <Button variant="destructive" size="icon"
+                                    @click="handleChange([...value.slice(0, index), ...value.slice(index + 1)])">
+                                    <Trash />
+                                </Button>
+                                <Input v-model="field.name" placeholder="Name" @update:model-value="e => {
+                                    handleChange([...value.slice(0, index), { name: e, value: field.value }, ...value.slice(index + 1)]);
+                                }" />
+                                <Input v-model="field.value" placeholder="Value" class="col-span-2" @update:model-value="e => {
+                                    handleChange([...value.slice(0, index), { name: field.name, value: e }, ...value.slice(index + 1)]);
+                                }" />
+                            </div>
+                            <Button type="button" variant="secondary"
+                                @click="handleChange([...value, { name: '', value: '' }])">
+                                {{ m.front_north_eel_gulp() }}
+                            </Button>
+                        </div>
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="bot" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            {{ m.gaudy_each_opossum_play() }}
+                        </FormLabel>
+                        <CardDescription>
+                            {{ m.grassy_acidic_gadfly_cure() }}
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="locked" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            {{ m.dirty_moving_shark_emerge() }}
+                        </FormLabel>
+                        <CardDescription>
+                            {{ m.bright_fun_mouse_boil() }}
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="discoverable" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            {{ m.red_vivid_cuckoo_spark() }}
+                        </FormLabel>
+                        <CardDescription>
+                            {{ m.plain_zany_donkey_dart() }}
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+        </form>
+    </Card>
+    <Profile :account="account" class="max-w-lg overflow-auto hidden xl:block" />
+</template>
+
+<script lang="ts" setup>
+import { toTypedSchema } from "@vee-validate/zod";
+import type { ResponseError } from "@versia/client";
+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, CardTitle } from "~/components/ui/card";
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import { Switch } from "~/components/ui/switch";
+import { Textarea } from "~/components/ui/textarea";
+import * as m from "~/paraglide/messages.js";
+
+if (!identity.value) {
+    throw new Error("Identity not found.");
+}
+
+const account = ref(identity.value.account);
+
+const formSchema = toTypedSchema(
+    z.object({
+        banner: z
+            .instanceof(File)
+            .refine(
+                (v) =>
+                    v.size <=
+                    (identity.value?.instance.configuration.accounts
+                        .header_size_limit ?? 0),
+                m.civil_icy_ant_mend({
+                    size: identity.value?.instance.configuration.accounts
+                        .header_size_limit,
+                }),
+            )
+            .optional(),
+        avatar: z
+            .instanceof(File)
+            .refine(
+                (v) =>
+                    v.size <=
+                    (identity.value?.instance.configuration.accounts
+                        .avatar_size_limit ?? 0),
+                m.zippy_caring_raven_edit({
+                    size: identity.value?.instance.configuration.accounts
+                        .avatar_size_limit,
+                }),
+            )
+            .optional(),
+        name: z
+            .string()
+            .max(
+                identity.value.instance.configuration.accounts
+                    .max_displayname_characters,
+            ),
+        username: z
+            .string()
+            .regex(/^[a-z0-9_-]+$/, m.still_upper_otter_dine())
+            .max(
+                identity.value.instance.configuration.accounts
+                    .max_username_characters,
+            ),
+        bio: z
+            .string()
+            .max(
+                identity.value.instance.configuration.accounts
+                    .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({
+    validationSchema: formSchema,
+    initialValues: {
+        bio: account.value.source?.note ?? "",
+        bot: account.value.bot ?? false,
+        locked: account.value.locked ?? false,
+        discoverable: account.value.discoverable ?? true,
+        username: account.value.username,
+        name: account.value.display_name,
+        fields: account.value.source?.fields ?? [],
+    },
+});
+
+const handleSubmit = form.handleSubmit(async (values) => {
+    const id = toast.loading(m.jolly_noble_sloth_breathe());
+
+    const changedData = {
+        display_name:
+            values.name === account.value.display_name
+                ? undefined
+                : values.name,
+        username:
+            values.username === account.value.username
+                ? undefined
+                : values.username,
+        note:
+            values.bio === account.value.source?.note ? undefined : values.bio,
+        bot: values.bot === account.value.bot ? undefined : values.bot,
+        locked:
+            values.locked === account.value.locked ? undefined : values.locked,
+        discoverable:
+            values.discoverable === account.value.discoverable
+                ? undefined
+                : values.discoverable,
+        // 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,
+            ),
+        )
+            ? undefined
+            : values.fields,
+        header: values.banner ? values.banner : undefined,
+        avatar: values.avatar ? values.avatar : undefined,
+    };
+
+    if (
+        Object.values(changedData).filter((v) => v !== undefined).length === 0
+    ) {
+        toast.dismiss(id);
+        toast.error(m.tough_alive_niklas_promise());
+        return;
+    }
+
+    try {
+        const { data } = await client.value.updateCredentials(
+            Object.fromEntries(
+                Object.entries(changedData).filter(([, v]) => v !== undefined),
+            ),
+        );
+
+        toast.dismiss(id);
+        toast.success(m.spry_honest_kestrel_arrive());
+
+        if (identity.value) {
+            identity.value.account = data;
+        }
+
+        account.value = data;
+    } catch (e) {
+        const error = e as ResponseError<{ error: string }>;
+
+        toast.dismiss(id);
+    }
+});
+
+const formRef = ref<HTMLFormElement | null>(null);
+
+defineExpose({
+    submitForm: () => handleSubmit(),
+    dirty: computed(() => form.meta.value.dirty),
+});
+</script>
\ No newline at end of file
diff --git a/components/preferences/select.vue b/components/preferences/select.vue
new file mode 100644
index 0000000..f327bd0
--- /dev/null
+++ b/components/preferences/select.vue
@@ -0,0 +1,46 @@
+<template>
+    <Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+        <CardHeader class="space-y-0.5 p-0">
+            <CardTitle class="text-base">
+                {{ setting.title() }}
+            </CardTitle>
+            <CardDescription>
+                {{ setting.description() }}
+            </CardDescription>
+        </CardHeader>
+        <CardFooter class="p-0">
+            <Select :model-value="setting.value" @update:model-value="v => { setting.value = v }">
+                <SelectTrigger>
+                    <SelectValue placeholder="Select an option" />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectItem v-for="option of setting.options" :value="option.value">
+                        {{ option.label() }}
+                    </SelectItem>
+                </SelectContent>
+            </Select>
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import type { EnumSetting } from "~/settings.ts";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "../ui/select";
+
+defineModel<EnumSetting>("setting", {
+    required: true,
+});
+</script>
\ No newline at end of file
diff --git a/components/preferences/string.vue b/components/preferences/string.vue
new file mode 100644
index 0000000..8ed5528
--- /dev/null
+++ b/components/preferences/string.vue
@@ -0,0 +1,31 @@
+<template>
+    <Card class="grid grid-rows-[1fr,auto] xl:grid-rows-none xl:grid-cols-[1fr,auto] items-center p-6 gap-4">
+        <CardHeader class="space-y-0.5 p-0">
+            <CardTitle class="text-base">
+                {{ setting.title() }}
+            </CardTitle>
+            <CardDescription>
+                {{ setting.description() }}
+            </CardDescription>
+        </CardHeader>
+        <CardFooter class="p-0">
+            <Input :model-value="setting.value" @update:model-value="v => { setting.value = String(v) }" />
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import type { StringSetting } from "~/settings.ts";
+
+defineModel<StringSetting>("setting", {
+    required: true,
+});
+</script>
\ No newline at end of file
diff --git a/components/preferences/switch.vue b/components/preferences/switch.vue
new file mode 100644
index 0000000..42aa73b
--- /dev/null
+++ b/components/preferences/switch.vue
@@ -0,0 +1,31 @@
+<template>
+    <Card class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+        <CardHeader class="space-y-0.5 p-0">
+            <CardTitle class="text-base">
+                {{ setting.title() }}
+            </CardTitle>
+            <CardDescription>
+                {{ setting.description() }}
+            </CardDescription>
+        </CardHeader>
+        <CardFooter class="p-0">
+            <Switch :disabled="setting.notImplemented" :checked="setting.value" @update:checked="v => { setting.value = v }" />
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import { Switch } from "~/components/ui/switch";
+import type { BooleanSetting } from "~/settings.ts";
+
+defineModel<BooleanSetting>("setting", {
+    required: true,
+});
+</script>
\ No newline at end of file
diff --git a/components/profiles/avatar.vue b/components/profiles/avatar.vue
new file mode 100644
index 0000000..682726e
--- /dev/null
+++ b/components/profiles/avatar.vue
@@ -0,0 +1,34 @@
+<template>
+    <Avatar :shape="(shape.value as 'circle' | 'square')">
+        <AvatarFallback v-if="name">
+            {{ getInitials(name) }}
+        </AvatarFallback>
+        <AvatarImage v-if="src" :src="src" :alt="`${name}'s avatar`" />
+    </Avatar>
+</template>
+
+<script lang="ts" setup>
+import { SettingIds } from "~/settings";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+
+const { name } = defineProps<{
+    src?: string;
+    name?: string;
+}>();
+
+/**
+ * Gets the initials of any string, even if it's not a name.
+ * If not a name, it will return the first two characters.
+ * @param name
+ */
+const getInitials = (name: string): string => {
+    const initials = name.match(/\b\w/g) || [];
+
+    const firstLetter = initials.shift() || name[0] || "";
+    const secondLetter = initials.pop() || name[1] || "";
+
+    return `${firstLetter}${secondLetter}`.toUpperCase();
+};
+
+const shape = useSetting(SettingIds.AvatarShape);
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile-actions.vue b/components/profiles/profile-actions.vue
new file mode 100644
index 0000000..b57e838
--- /dev/null
+++ b/components/profiles/profile-actions.vue
@@ -0,0 +1,131 @@
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="min-w-56">
+            <DropdownMenuLabel>{{ m.spicy_loved_giraffe_empower() }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem as="button" @click="copyText(account.username)">
+                    <AtSign class="mr-2 size-4" />
+                    {{ m.cool_dark_tapir_belong() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="copyText(JSON.stringify(account, null, 4))">
+                    <Code class="mr-2 size-4" />
+                    {{ m.yummy_moving_scallop_sail() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="copyText(account.id)">
+                    <Hash class="mr-2 size-4" />
+                    {{ m.sunny_zany_jellyfish_pop() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem as="button" @click="copyText(url)">
+                    <Link class="mr-2 size-4" />
+                    {{ m.ago_new_pelican_drip() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="copyText(account.url)">
+                    <Link class="mr-2 size-4" />
+                    {{ m.solid_witty_zebra_walk() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="account.url">
+                    <ExternalLink class="mr-2 size-4" />
+                    {{ m.active_trite_lark_inspire() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
+            <DropdownMenuGroup v-if="isLoggedIn && !isMe">
+                <DropdownMenuItem as="button" @click="muteUser(account.id)">
+                    <VolumeX class="mr-2 size-4" />
+                    {{ m.spare_wild_mole_intend() }}
+                </DropdownMenuItem>
+                <DropdownMenuItem as="button" @click="blockUser(account.id)">
+                    <Ban class="mr-2 size-4" />
+                    {{ m.misty_soft_sparrow_vent() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="isRemote" />
+            <DropdownMenuGroup v-if="isRemote">
+                <DropdownMenuItem as="button" @click="refresh">
+                    <RefreshCw class="mr-2 size-4" />
+                    {{ m.slow_chunky_chipmunk_hush() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator v-if="isLoggedIn && !isMe" />
+            <DropdownMenuGroup v-if="isLoggedIn && !isMe">
+                <DropdownMenuItem as="button" :disabled="true">
+                    <Flag class="mr-2 size-4" />
+                    {{ m.great_few_jaguar_rise() }}
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+
+<script lang="ts" setup>
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Account } from "@versia/client/types";
+import {
+    AtSign,
+    Ban,
+    Code,
+    ExternalLink,
+    Flag,
+    Hash,
+    Link,
+    RefreshCw,
+    VolumeX,
+} from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import * as m from "~/paraglide/messages.js";
+
+const { account } = defineProps<{
+    account: Account;
+}>();
+
+const isMe = identity.value?.account.id === account.id;
+const isLoggedIn = !!identity.value;
+
+const { copy } = useClipboard();
+const copyText = (text: string) => {
+    copy(text);
+    toast.success(m.flat_nice_worm_dream());
+};
+
+const url = wrapUrl(`/@${account.acct}`);
+const isRemote = account.acct.includes("@");
+
+const muteUser = async (userId: string) => {
+    const id = toast.loading(m.ornate_tidy_coyote_grow());
+    await client.value.muteAccount(userId);
+    toast.dismiss(id);
+
+    toast.success("User muted");
+};
+
+const blockUser = async (userId: string) => {
+    const id = toast.loading(m.empty_smug_raven_bloom());
+    await client.value.blockAccount(userId);
+    toast.dismiss(id);
+
+    toast.success("User blocked");
+};
+
+const refresh = async () => {
+    const id = toast.loading(m.real_every_macaw_wish());
+    await client.value.refetchAccount(account.id);
+    toast.dismiss(id);
+
+    toast.success(m.many_cool_fox_love());
+};
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile-badge.vue b/components/profiles/profile-badge.vue
new file mode 100644
index 0000000..53e3212
--- /dev/null
+++ b/components/profiles/profile-badge.vue
@@ -0,0 +1,36 @@
+<template>
+    <Tooltip>
+        <TooltipTrigger :as-child="true">
+            <Badge variant="outline" class="gap-1">
+                <svg viewBox="0 0 22 22" v-if="verified" aria-hidden="true" class="size-4 fill-secondary-foreground">
+                    <g>
+                        <path
+                            d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
+                        </path>
+                    </g>
+                </svg>
+                <img v-else-if="icon" :src="icon" alt="" class="size-4 rounded-sm" />
+                {{ name }}
+            </Badge>
+        </TooltipTrigger>
+        <TooltipContent v-if="description">
+            <p>{{ description }}</p>
+        </TooltipContent>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { Badge } from "~/components/ui/badge";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+defineProps<{
+    name: string;
+    description?: string;
+    icon?: string;
+    verified?: boolean;
+}>();
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile-content.vue b/components/profiles/profile-content.vue
new file mode 100644
index 0000000..a0d42ba
--- /dev/null
+++ b/components/profiles/profile-content.vue
@@ -0,0 +1,72 @@
+<template>
+    <div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content" v-render-emojis="emojis">
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji } from "@versia/client/types";
+
+const { content } = defineProps<{
+    content: string;
+    emojis: Emoji[];
+}>();
+</script>
+
+<style module>
+.content pre:has(code) {
+    word-wrap: normal;
+    background: transparent;
+    background-color: #ffffff0d;
+    border-radius: .25rem;
+    hyphens: none;
+    margin-top: 1rem;
+    overflow-x: auto;
+    padding: .75rem 1rem;
+    tab-size: 4;
+    white-space: pre;
+    word-break: normal;
+    word-spacing: normal;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, .1)
+}
+
+.content pre code {
+    display: block;
+    padding: 0
+}
+
+.content code:not(pre code)::after,
+.content code:not(pre code)::before {
+    content: ""
+}
+
+.content ol li input[type=checkbox],
+.content ul li input[type=checkbox] {
+  border-radius:.25rem;
+  margin-bottom:0.2rem;
+  margin-right:.5rem;
+  margin-top:0;
+  vertical-align: middle;
+  --tw-text-opacity:1;
+  color: var(--theme-primary-400);
+}
+
+.content code:not(pre code) {
+    border-radius: .25rem;
+    padding: .25rem .5rem;
+    word-wrap: break-word;
+    background: transparent;
+    background-color: #ffffff0d;
+    hyphens: none;
+    margin-top: 1rem;
+    tab-size: 4;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsla(0, 0%, 100%, .1)
+}
+</style>
\ No newline at end of file
diff --git a/components/profiles/profile-fields.vue b/components/profiles/profile-fields.vue
new file mode 100644
index 0000000..890a9ed
--- /dev/null
+++ b/components/profiles/profile-fields.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-col gap-y-4">
+        <div v-for="field in fields" :key="field.name" class="flex flex-col gap-1 break-words">
+            <h3 class="font-semibold text-sm" v-render-emojis="emojis">{{ field.name }}</h3>
+            <div v-html="field.value" class="prose prose-sm prose-zinc dark:prose-invert" v-render-emojis="emojis"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Emoji, Field } from "@versia/client/types";
+
+defineProps<{
+    fields: Field[];
+    emojis: Emoji[];
+}>();
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile-header.vue b/components/profiles/profile-header.vue
new file mode 100644
index 0000000..4a3b793
--- /dev/null
+++ b/components/profiles/profile-header.vue
@@ -0,0 +1,23 @@
+<template>
+    <CardHeader class="p-0 relative">
+        <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" />
+            <!-- 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>
+        <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>
+
+<script lang="ts" setup>
+import { CardHeader } from "~/components/ui/card";
+import Avatar from "./avatar.vue";
+
+defineProps<{
+    header: string;
+    avatar: string;
+    displayName: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile-stats.vue b/components/profiles/profile-stats.vue
new file mode 100644
index 0000000..c79c299
--- /dev/null
+++ b/components/profiles/profile-stats.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="flex flex-col gap-2">
+        <div class="flex flex-row flex-wrap gap-2 *:flex *:items-center *:gap-1 *:text-muted-foreground">
+            <div>
+                <CalendarDays class="size-4" />
+                {{ m.gross_fancy_platypus_seek() }} <span class="text-primary font-semibold">{{ formattedCreationDate }}</span>
+            </div>
+        </div>
+        <div class="flex flex-row flex-wrap gap-2 *:flex *:items-center *:gap-1 *:text-muted-foreground">
+            <div>
+                <span class="text-primary font-semibold">{{ noteCount }}</span> {{ m.real_gray_stork_seek() }}
+            </div>
+            &middot;
+            <div>
+                <span class="text-primary font-semibold">{{ followerCount }}</span> {{ m.teal_helpful_parakeet_hike() }}
+            </div>
+            &middot;
+            <div>
+                <span class="text-primary font-semibold">{{ followingCount }}</span> {{ m.aloof_royal_samuel_startle() }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { CalendarDays } from "lucide-vue-next";
+import * as m from "~/paraglide/messages.js";
+
+const { creationDate } = defineProps<{
+    creationDate: Date;
+    noteCount: number;
+    followerCount: number;
+    followingCount: number;
+}>();
+
+const formattedCreationDate = new Intl.DateTimeFormat(getLanguageTag(), {
+    month: "long",
+    year: "numeric",
+}).format(creationDate);
+</script>
\ No newline at end of file
diff --git a/components/profiles/profile.vue b/components/profiles/profile.vue
new file mode 100644
index 0000000..3e9bfe8
--- /dev/null
+++ b/components/profiles/profile.vue
@@ -0,0 +1,132 @@
+<template>
+    <Card>
+        <ProfileHeader :header="account.header" :avatar="account.avatar" :display-name="account.display_name" />
+        <CardContent class="pt-3 gap-4 flex flex-col">
+            <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()">
+                    <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() }}
+                    </span>
+                </Button>
+                <ProfileActions :account="account">
+                    <Button variant="secondary" size="icon">
+                        <Ellipsis />
+                    </Button>
+                </ProfileActions>
+            </div>
+            <div class="flex flex-col -mt-1 gap-2 justify-center">
+                <CardTitle class="" v-render-emojis="account.emojis">
+                    {{ account.display_name }}
+                </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">
+                        @{{ username }}
+                    </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>
+            <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" />
+            <Separator v-if="account.fields.length > 0" />
+            <ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" />
+        </CardFooter>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "@versia/client/types";
+import { Ellipsis, Loader } from "lucide-vue-next";
+import { toast } from "vue-sonner";
+import CopyableText from "~/components/notes/copyable-text.vue";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
+import { Separator } from "~/components/ui/separator";
+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 ProfileContent from "./profile-content.vue";
+import ProfileFields from "./profile-fields.vue";
+import ProfileHeader from "./profile-header.vue";
+import ProfileStats from "./profile-stats.vue";
+
+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);
+
+const follow = async () => {
+    if (confirmFollows.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.many_fair_capybara_imagine(),
+            message: m.mellow_yummy_jannes_cuddle({
+                acct: `@${account.acct}`,
+            }),
+            confirmText: m.cuddly_even_tern_loop(),
+            cancelText: m.soft_bold_ant_attend(),
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.quick_basic_peacock_bubble());
+    const { data } = await client.value.followAccount(account.id);
+    toast.dismiss(id);
+
+    relationship.value = data;
+    toast.success(m.awake_quick_cuckoo_smile());
+};
+
+const unfollow = async () => {
+    if (confirmFollows.value.value) {
+        const confirmation = await confirmModalService.confirm({
+            title: m.funny_aloof_swan_loop(),
+            message: m.white_best_dolphin_catch({
+                acct: `@${account.acct}`,
+            }),
+            confirmText: m.cute_polite_oryx_blend(),
+            cancelText: m.soft_bold_ant_attend(),
+        });
+
+        if (!confirmation.confirmed) {
+            return;
+        }
+    }
+
+    const id = toast.loading(m.big_safe_guppy_mix());
+    const { data } = await client.value.unfollowAccount(account.id);
+    toast.dismiss(id);
+
+    relationship.value = data;
+    toast.success(m.misty_level_stingray_expand());
+};
+</script>
\ No newline at end of file
diff --git a/components/profiles/small-card.vue b/components/profiles/small-card.vue
new file mode 100644
index 0000000..71b0083
--- /dev/null
+++ b/components/profiles/small-card.vue
@@ -0,0 +1,41 @@
+<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" />
+            <!-- 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>
+        <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">
+        <span class="font-semibold" v-render-emojis="account.emojis">
+            {{ account.display_name }}
+        </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">
+                @{{ username }}
+            </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" />
+    <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" />
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "@versia/client/types";
+import CopyableText from "../notes/copyable-text.vue";
+import Avatar from "./avatar.vue";
+import ProfileContent from "./profile-content.vue";
+import ProfileFields from "./profile-fields.vue";
+
+const { account } = defineProps<{
+    account: Account;
+}>();
+
+const [username, instance] = account.acct.split("@");
+</script>
\ No newline at end of file
diff --git a/components/settings/emojis/category.vue b/components/settings/emojis/category.vue
deleted file mode 100644
index aacc9bd..0000000
--- a/components/settings/emojis/category.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <div class="flex flex-col gap-4">
-        <div class="grid grid-cols-[1fr,auto,auto] gap-4 items-baseline">
-            <h2 class="text-xl font-bold">{{ name }}</h2>
-            <!-- <Button theme="primary">
-                <Icon icon="tabler:upload" />
-                <span class="hidden md:block">New</span>
-            </Button> -->
-            <Button theme="outline">
-                <Icon icon="tabler:chevron-up" class="duration-100" :style="{
-                    transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',
-                }" @click="collapsed = !collapsed" />
-            </Button>
-        </div>
-        <div ref="container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 overflow-hidden duration-200">
-            <GridItem v-for="emoji in emojis" :key="emoji.id" :emoji="emoji" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-import GridItem from "./grid-item.vue";
-
-defineProps<{
-    emojis: Emoji[];
-    name: string;
-}>();
-
-const collapsed = ref(false);
-const container = ref<HTMLDivElement | null>(null);
-
-watch(collapsed, (value) => {
-    // Use requestAnimationFrame to prevent layout thrashing
-    requestAnimationFrame(() => {
-        if (!container.value) {
-            return;
-        }
-        container.value.style.maxHeight = value
-            ? "0px"
-            : `${container.value.scrollHeight}px`;
-    });
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/emojis/emojis.vue b/components/settings/emojis/emojis.vue
deleted file mode 100644
index b692116..0000000
--- a/components/settings/emojis/emojis.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-    <div class="max-w-7xl mx-auto py-12 px-4">
-        <div class="md:max-w-sm w-full relative mb-4">
-            <TextInput v-model="search" placeholder="Search" class="pl-8" />
-            <iconify-icon icon="tabler:search"
-                class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2 text-gray-200" aria-hidden="true"
-                width="unset" />
-        </div>
-        <Category v-if="emojis.length > 0" v-for="([name, emojis]) in categories" :key="name" :emojis="emojis"
-            :name="name" />
-        <div v-else class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
-            <span class="text-lg font-semibold">No emojis found.</span>
-            <span class="text-sm">
-                You can ask your administrator to add some emojis.
-            </span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import TextInput from "~/components/inputs/text-input.vue";
-import Category from "./category.vue";
-
-const emojis = computed(() =>
-    ((identity.value?.emojis as Emoji[] | undefined) ?? []).filter((emoji) =>
-        emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
-    ),
-);
-const search = ref("");
-
-const categories = computed(() => {
-    const categories = new Map<string, Emoji[]>();
-    for (const emoji of emojis.value) {
-        if (!emoji.category) {
-            if (!categories.has("Uncategorized")) {
-                categories.set("Uncategorized", []);
-            }
-
-            categories.get("Uncategorized")?.push(emoji);
-            continue;
-        }
-
-        if (!categories.has(emoji.category)) {
-            categories.set(emoji.category, []);
-        }
-
-        categories.get(emoji.category)?.push(emoji);
-    }
-    return categories;
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/emojis/grid-item-menu.vue b/components/settings/emojis/grid-item-menu.vue
deleted file mode 100644
index f1a9859..0000000
--- a/components/settings/emojis/grid-item-menu.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <AdaptiveDropdown>
-        <template #button>
-            <Button theme="outline">
-                <iconify-icon width="none" icon="tabler:dots" class="size-5 text-gray-200"
-                    aria-hidden="true" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        </template>
-
-        <template #items>
-            <Menu.ItemGroup>
-                <Menu.Item value="">
-                    <ButtonDropdown icon="tabler:trash" class="w-full">
-                        Delete
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-        </template>
-    </AdaptiveDropdown>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import type { Emoji } from "@versia/client/types";
-import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
-import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-defineProps<{
-    emoji: Emoji;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/settings/emojis/grid-item.vue b/components/settings/emojis/grid-item.vue
deleted file mode 100644
index 73267dd..0000000
--- a/components/settings/emojis/grid-item.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div class="rounded ring-1 m-1 ring-white/10 grid grid-cols-[auto,1fr] gap-x-4 p-3 bg-dark-400 hover:ring-2 hover:ring-primary-600 duration-100 items-center">
-        <Avatar :src="emoji.url" class="size-12 rounded bg-transparent" />
-        <div class="text-ellipsis font-mono text-wrap w-full overflow-hidden">{{ emoji.shortcode }}</div>
-        <!-- <GridItemMenu :emoji="emoji" /> -->
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Emoji } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import GridItemMenu from "./grid-item-menu.vue";
-
-defineProps<{
-    emoji: Emoji;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/settings/page.vue b/components/settings/page.vue
deleted file mode 100644
index e098869..0000000
--- a/components/settings/page.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <Renderer :id="id" v-for="id of settingsIds" :key="id" />
-</template>
-
-<script lang="ts" setup>
-import {
-    type SettingIds,
-    type SettingPages,
-    getSettingsForPage,
-} from "~/settings";
-import Renderer from "./renderer.vue";
-
-const props = defineProps<{
-    page: SettingPages;
-}>();
-
-const settingsIds = Object.keys(getSettingsForPage(props.page)) as SettingIds[];
-</script>
\ No newline at end of file
diff --git a/components/settings/profile-editor.vue b/components/settings/profile-editor.vue
deleted file mode 100644
index 5ea2ae0..0000000
--- a/components/settings/profile-editor.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-    <div
-        class="w-full md:px-8 px-4 py-4 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
-        <form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden"
-            @submit.prevent="save">
-            <Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
-                class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
-
-            <div class="flex items-start justify-between px-4 py-3">
-                <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                    class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
-            </div>
-
-            <div class="mt-2 px-4">
-                <TextInput @input="displayName = ($event.target as HTMLInputElement).value" :value="displayName"
-                    aria-label="Display name" :disabled="loading" />
-                <div class="mt-2 grid grid-cols-[auto_1fr] items-center gap-x-2">
-                    <iconify-icon icon="tabler:at" width="none" class="size-6" aria-hidden="true" />
-                    <TextInput @input="acct = ($event.target as HTMLInputElement).value" :value="acct"
-                        aria-label="Username" :disabled="loading" />
-                </div>
-                <p class="text-gray-300 text-xs mt-2">
-                    Changing your username will break all links to your profile.
-                </p>
-            </div>
-
-            <div class="mt-3 px-4">
-                <RichTextboxInput v-model:model-content="note" :max-characters="bio" :disabled="loading"
-                    class="rounded ring-white/10 ring-2 focus:ring-primary-600 px-4 py-2 max-h-[40dvh] max-w-full" />
-            </div>
-
-            <div class="px-4 mt-4 grid grid-cols-2 gap-2">
-                <Button theme="primary" class="w-full" type="submit" :loading="loading">
-                    <span>Save</span>
-                </Button>
-                <Button theme="secondary" class="w-full" @click="revert" type="button" :loading="loading">
-                    <span>Revert</span>
-                </Button>
-            </div>
-        </form>
-        <div>
-            <Oidc />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { ResponseError } from "@versia/client";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import Avatar from "../avatars/avatar.vue";
-import RichTextboxInput from "../inputs/rich-textbox-input.vue";
-import TextInput from "../inputs/text-input.vue";
-import Oidc from "./oidc.vue";
-
-const account = computed(() => identity.value?.account);
-const note = ref(account.value?.source?.note ?? "");
-const displayName = ref(account.value?.display_name ?? "");
-const acct = ref(account.value?.acct ?? "");
-const bio = computed(
-    () => identity.value?.instance.configuration.statuses.max_characters ?? 0,
-);
-
-const loading = ref(false);
-
-const revert = () => {
-    useEvent("notification:new", {
-        title: "Reverted to current bio",
-        type: "success",
-    });
-
-    note.value = account.value?.source?.note ?? "";
-};
-
-const save = async () => {
-    const changedData = {
-        display_name:
-            displayName.value === account.value?.display_name
-                ? undefined
-                : displayName.value,
-        username: acct.value === account.value?.acct ? undefined : acct.value,
-        note:
-            note.value === account.value?.source?.note ? undefined : note.value,
-    };
-
-    if (
-        Object.values(changedData).filter((v) => v !== undefined).length === 0
-    ) {
-        useEvent("notification:new", {
-            title: "No changes",
-            type: "error",
-        });
-
-        return;
-    }
-
-    loading.value = true;
-
-    try {
-        const { data } = await client.value.updateCredentials(
-            Object.fromEntries(
-                Object.entries(changedData).filter(([, v]) => v !== undefined),
-            ),
-        );
-
-        useEvent("notification:new", {
-            title: "Profile updated",
-            type: "success",
-        });
-
-        if (identity.value) {
-            identity.value.account = data;
-        }
-    } catch (e) {
-        const error = e as ResponseError<{ error: string }>;
-
-        useEvent("notification:new", {
-            title: "Failed to update profile",
-            description: error.response.data.error,
-            type: "error",
-        });
-    }
-
-    loading.value = false;
-};
-</script>
diff --git a/components/settings/renderer.vue b/components/settings/renderer.vue
deleted file mode 100644
index 98373a1..0000000
--- a/components/settings/renderer.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
-        <div class="max-w-7xl mx-auto h-full">
-            <SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />
-
-            <SettingCode v-else-if="setting.type === SettingType.Code" :id="id" />
-            <SettingEnum v-else-if="setting.type === SettingType.Enum" :id="id" />
-            <SettingString v-else-if="setting.type === SettingType.String" :id="id" />
-            <SettingOther v-else :id="id" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { type SettingIds, SettingType } from "~/settings";
-import SettingBoolean from "./types/Boolean.vue";
-import SettingCode from "./types/Code.vue";
-import SettingEnum from "./types/Enum.vue";
-import SettingOther from "./types/Other.vue";
-import SettingString from "./types/String.vue";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id);
-</script>
\ No newline at end of file
diff --git a/components/settings/types/Boolean.vue b/components/settings/types/Boolean.vue
deleted file mode 100644
index 707c7a4..0000000
--- a/components/settings/types/Boolean.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4"
-        @click="setting.notImplemented ? $event.preventDefault() : undefined"
-        v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
-        <Switch.Label :data-disabled="setting.notImplemented ? '' : undefined"
-            class="row-start-1 select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">
-            {{
-                setting.title
-            }}</Switch.Label>
-        <p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
-            implemented
-        </p>
-        <p v-else :data-disabled="setting.notImplemented ? '' : undefined"
-            class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
-                setting.description }}
-        </p>
-        <Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
-            :data-checked="checked ? '' : undefined"
-            class="group col-start-2 relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-[changing]:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ring-1 ring-inset bg-white/5 ring-white/15 data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 hover:data-[checked]:ring-[--switch-bg-ring] hover:ring-white/25 data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:bg-white/15 data-[disabled]:data-[checked]:bg-white/15 data-[disabled]:data-[checked]:ring-white/15 [--switch-bg-ring:transparent] [--switch-bg:theme(colors.primary.600/25%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.white/10%)]">
-            <Switch.Thumb
-                class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white shadow ring-1 ring-black/5 group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring] group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3 group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5" />
-        </Switch.Control>
-        <Switch.HiddenInput />
-    </Switch.Root>
-</template>
-
-<script lang="ts" setup>
-import { Switch } from "@ark-ui/vue";
-import { type SettingIds, SettingType } from "~/settings";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id);
-const checked = ref(setting.value.value as boolean);
-
-watch(checked, (c) => {
-    setting.value.value = c;
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/types/Code.vue b/components/settings/types/Code.vue
deleted file mode 100644
index f3868f3..0000000
--- a/components/settings/types/Code.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="flex flex-col gap-y-1">
-        <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
-            }}
-        </h4>
-        <textarea v-model="content"
-            class="resize-none min-h-48 mt-1 prose prose-invert max-w-full ring-1 ring-white/20 font-mono placeholder:text-zinc-500 bg-transparent rounded appearance-none disabled:cursor-not-allowed"
-            aria-label="Start typing here..."></textarea>
-        <p v-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { SettingIds } from "~/settings";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id);
-const content = ref(setting.value.value as string);
-
-watch(content, (c) => {
-    setting.value.value = c;
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/types/Enum.vue b/components/settings/types/Enum.vue
deleted file mode 100644
index 7126ff4..0000000
--- a/components/settings/types/Enum.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <Select.Root :collection="collection" v-model:model-value="selectedValues">
-        <Select.Label class="select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">{{ setting.title }}</Select.Label>
-        <Select.Control class="mt-1">
-            <Select.Trigger :disabled="setting.notImplemented" class="disabled:opacity-70 disabled:hover:cursor-not-allowed bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 sm:text-sm sm:leading-6 w-full md:w-auto min-w-72 text-left px-4 flex flew-row justify-between items-center">
-                <Select.ValueText placeholder="Select an option" />
-                <Select.Indicator class="size-4">
-                    <iconify-icon icon="tabler:chevron-down" class="size-4" width="unset" aria-hidden="true" />
-                </Select.Indicator>
-            </Select.Trigger>
-        </Select.Control>
-        <p v-if="setting.notImplemented" class="text-xs mt-2 row-start-3 text-red-300 font-semibold">Not
-            implemented
-        </p>
-        <p v-else-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
-        <Teleport to="body">
-            <Select.Positioner>
-                <Select.Content
-                    class="z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-dark-700 py-1 text-base shadow-lg ring-1 ring-white/10 focus:outline-none sm:text-sm min-w-72">
-                    <Select.ItemGroup>
-                        <Select.Item v-for="item in collection.items" :key="item.value" :item="item"
-                            :class="['text-gray-100 hover:bg-dark-900 flex flex-row gap-4 justify-between items-center duration-100 relative cursor-default select-none py-2 px-4 group']">
-                            <Select.ItemText
-                                :class="['group-data-[state=checked]:font-semibold font-normal block truncate']">{{
-                                item.label }}</Select.ItemText>
-                            <Select.ItemIndicator
-                                :class="['text-primary-600 hidden group-data-[state=checked]:flex items-center justify-center']">
-                                <iconify-icon icon="tabler:check" class="size-4" width="unset" aria-hidden="true" />
-                            </Select.ItemIndicator>
-                        </Select.Item>
-                    </Select.ItemGroup>
-                </Select.Content>
-            </Select.Positioner>
-        </Teleport>
-        <Select.HiddenSelect />
-    </Select.Root>
-</template>
-
-<script lang="ts" setup>
-import { Select, createListCollection } from "@ark-ui/vue/select";
-import type { EnumSetting, SettingIds } from "~/settings";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id) as Ref<EnumSetting>;
-const selectedValues = ref([setting.value.value]);
-
-const collection = createListCollection({
-    items: setting.value.options.map((option) => ({
-        value: option.value,
-        label: option.label,
-    })),
-});
-
-watch(selectedValues, (value) => {
-    if (!value[0]) {
-        return;
-    }
-
-    setting.value.value = value[0];
-});
-</script>
\ No newline at end of file
diff --git a/components/settings/types/Other.vue b/components/settings/types/Other.vue
deleted file mode 100644
index db1d560..0000000
--- a/components/settings/types/Other.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <div class="grid grid-cols-[1fr_auto] gap-x-4">
-        <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
-            }}
-        </h4>
-        <p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { SettingIds } from "~/settings";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id);
-</script>
\ No newline at end of file
diff --git a/components/settings/types/String.vue b/components/settings/types/String.vue
deleted file mode 100644
index 8903653..0000000
--- a/components/settings/types/String.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div class="flex flex-col gap-y-1">
-        <h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
-            }}
-        </h4>
-        <TextInput v-model:value="content" class="w-full md:w-auto min-w-72" />
-        <p v-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import TextInput from "~/components/inputs/text-input.vue";
-import type { SettingIds } from "~/settings";
-
-const props = defineProps<{
-    id: SettingIds;
-}>();
-
-const setting = useSetting(props.id);
-const content = ref(setting.value.value as string);
-
-watch(content, (c) => {
-    setting.value.value = c;
-});
-</script>
\ No newline at end of file
diff --git a/components/sidebars/account-picker.vue b/components/sidebars/account-picker.vue
deleted file mode 100644
index 2401b09..0000000
--- a/components/sidebars/account-picker.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <AdaptiveDropdown>
-        <template #button>
-            <slot>
-                <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100"
-                    v-if="identity">
-                    <div class="shrink-0">
-                        <Avatar class="size-12 rounded ring-1 ring-white/5" :src="identity.account.avatar"
-                            :alt="`${identity.account.acct}'s avatar'`" />
-                    </div>
-                    <div class="flex flex-col items-start p-1 justify-around grow overflow-hidden">
-                        <div class="flex flex-row items-center justify-between w-full">
-                            <div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
-                                {{
-                                    identity.account.display_name }}
-                            </div>
-                        </div>
-                        <span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
-                            Change account
-                        </span>
-                    </div>
-                </div>
-                <ButtonBase theme="secondary" v-else class="w-full !justify-start overflow-hidden">
-                    <Icon icon="tabler:login" class="!size-6" />
-                    <span class="shrink-0 line-clamp-1">Sign In</span>
-                </ButtonBase>
-            </slot>
-        </template>
-        <template #items>
-            <div class="p-2">
-                <h3 class="text-gray-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
-                </h3>
-            </div>
-            <div class="px-2 py-4 md:py-2 flex flex-col gap-3 max-w-[100vw]">
-                <Menu.Item value="" v-for="identity of identities" class="hover:scale-[95%] duration-100">
-                    <div class="flex flex-row gap-x-4">
-                        <div class="shrink-0" data-part="item" @click="useEvent('identity:change', identity)">
-                            <Avatar class="h-12 w-12 rounded ring-1 ring-white/5" :src="identity.account.avatar"
-                                :alt="`${identity.account.acct}'s avatar'`" />
-                        </div>
-                        <div data-part="item" class="flex flex-col items-start justify-around grow overflow-hidden"
-                            @click="useEvent('identity:change', identity)">
-                            <div class="flex flex-row items-center justify-between w-full">
-                                <div class="font-semibold text-gray-200 line-clamp-1 break-all">
-                                    {{
-                                        identity.account.display_name }}
-                                </div>
-                            </div>
-                            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
-                                @{{
-                                    identity.account.acct
-                                }}
-                            </span>
-                        </div>
-                        <button data-part="item"
-                            class="shrink-0 ml-6 size-12 ring-white/5 ring-1 flex items-center justify-center rounded"
-                            @click="$emit('signOut', identity.id)">
-                            <iconify-icon icon="tabler:logout" class="size-6 text-gray-200" width="none" />
-                        </button>
-                    </div>
-                </Menu.Item>
-                <Menu.Item value="" v-if="identity">
-                    <NuxtLink href="/settings" class="w-full">
-                        <ButtonBase theme="ghost" class="w-full !justify-start">
-                            <Icon icon="tabler:adjustments" class="!size-6" />
-                            <span class="shrink-0 line-clamp-1">Settings</span>
-                        </ButtonBase>
-                    </NuxtLink>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonBase @click="$emit('signIn')" theme="ghost" class="w-full !justify-start">
-                        <Icon icon="tabler:user-plus" class="!size-6" />
-                        <span class="shrink-0 line-clamp-1">Add new account</span>
-                    </ButtonBase>
-                </Menu.Item>
-                <Menu.Item value="" v-if="!identity">
-                    <NuxtLink href="/register" class="w-full">
-                        <ButtonBase theme="outline" class="w-full !justify-start">
-                            <Icon icon="tabler:certificate" class="!size-6" />
-                            <span class="shrink-0 line-clamp-1">Create new account</span>
-                        </ButtonBase>
-                    </NuxtLink>
-                </Menu.Item>
-            </div>
-        </template>
-    </AdaptiveDropdown>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-import Avatar from "../avatars/avatar.vue";
-import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
-
-defineEmits<{
-    signIn: [];
-    signOut: [identityId: string];
-}>();
-</script>
\ No newline at end of file
diff --git a/components/sidebars/account-switcher.vue b/components/sidebars/account-switcher.vue
new file mode 100644
index 0000000..71760af
--- /dev/null
+++ b/components/sidebars/account-switcher.vue
@@ -0,0 +1,167 @@
+<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()" 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-lg" 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.acct
+                            }}</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()" 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 = () => signIn(appData);
+
+const signOut = async (userId?: string) => {
+    const id = toast.loading("Signing out...");
+
+    if (!(appData.value && identity.value)) {
+        toast.dismiss(id);
+        toast.error("No app or identity data to sign out");
+        return;
+    }
+
+    const identityToRevoke = userId
+        ? identities.value.find((i) => i.account.id === userId)
+        : identity.value;
+
+    if (!identityToRevoke) {
+        toast.dismiss(id);
+        toast.error("No identity to revoke");
+        return;
+    }
+
+    // Don't do anything on error, as Versia Server doesn't implement the revoke endpoint yet
+    await client.value
+        ?.revokeToken(
+            appData.value.client_id,
+            identityToRevoke.tokens.access_token,
+            identityToRevoke.tokens.access_token,
+        )
+        .catch(() => {
+            // Do nothing
+        });
+
+    if (!userId) {
+        identity.value = null;
+        await navigateTo("/");
+        return;
+    }
+
+    identities.value = identities.value.filter((i) => i.id !== userId);
+    toast.dismiss(id);
+    toast.success("Signed out");
+};
+
+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>
\ No newline at end of file
diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
deleted file mode 100644
index 3e2624f..0000000
--- a/components/sidebars/collapsible-aside.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
-        :class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
-        <OverlayScrollbarsComponent :defer="true"
-            class="bg-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
-            <slot />
-        </OverlayScrollbarsComponent>
-        <button @click="open = !open" aria-label="Toggle sidebar"
-            class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
-            <iconify-icon icon="tabler:chevron-right"
-                :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
-                aria-hidden="true" />
-        </button>
-    </aside>
-</template>
-
-<script lang="ts" setup>
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-// slides in and out from the left or right
-import type { HTMLAttributes } from "vue";
-
-interface Props extends /* @vue-ignore */ HTMLAttributes {
-    direction?: "left" | "right";
-    initial?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    direction: "left",
-    initial: false,
-});
-
-const leaveClass = computed(() =>
-    props.direction === "left"
-        ? "-left-[calc(28rem-6rem)]"
-        : "-right-[calc(28rem-1rem)]",
-);
-const enterClass = computed(() =>
-    props.direction === "left" ? "left-0" : "right-0",
-);
-const open = ref(props.initial);
-</script>
\ No newline at end of file
diff --git a/components/sidebars/left-sidebar.vue b/components/sidebars/left-sidebar.vue
new file mode 100644
index 0000000..433a0cc
--- /dev/null
+++ b/components/sidebars/left-sidebar.vue
@@ -0,0 +1,212 @@
+<template>
+    <Sidebar :variant="(sidebarStyle.value as 'sidebar' | 'floating' | 'inset')" collapsible="icon">
+        <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">{{ m.top_active_ocelot_cure() }}</span>
+                            </div>
+                            <!-- <ChevronsUpDown class="ml-auto" /> -->
+                        </SidebarMenuButton>
+                    </NuxtLink>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarHeader>
+        <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>
+            </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>
+            </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>
+        <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 {
+    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 { type EnumSetting, SettingIds } from "~/settings";
+import Avatar from "../profiles/avatar.vue";
+import { Button } from "../ui/button";
+import AccountSwitcher from "./account-switcher.vue";
+
+const sidebarStyle = useSetting(SettingIds.SidebarStyle) as Ref<EnumSetting>;
+
+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();
+</script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
deleted file mode 100644
index b4abf30..0000000
--- a/components/sidebars/navigation.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-    <aside
-        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
-        aria-label="Navigation" role="complementary">
-        <NuxtLink href="/">
-            <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
-                :src="instance?.thumbnail.url ?? 'https://cdn.versia.pub/branding/icon.svg'"
-                alt="Logo of your instance" />
-        </NuxtLink>
-
-        <div class="flex flex-col gap-3">
-            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
-                Timelines</h3>
-
-            <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
-                <ButtonBase theme="ghost" class="w-full !justify-start overflow-hidden rounded-sm">
-                    <Icon :icon="timeline.icon" class="!size-6" />
-                    <span class="shrink-0 line-clamp-1">{{ timeline.name }}</span>
-                </ButtonBase>
-            </NuxtLink>
-
-        </div>
-
-        <div class="flex flex-col gap-3 mt-auto">
-            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
-                Account</h3>
-
-            <AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
-                @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
-            <NuxtLink href="/register" v-if="!identity">
-                <ButtonBase theme="ghost" class="w-full !justify-start overflow-hidden rounded-sm">
-                    <Icon icon="tabler:certificate" class="!size-6" />
-                    <span class="shrink-0 line-clamp-1">Register</span>
-                </ButtonBase>
-            </NuxtLink>
-            <NuxtLink href="/settings" v-if="identity">
-                <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start overflow-hidden">
-                    <Icon icon="tabler:adjustments" class="!size-6" />
-                    <span class="shrink-0 line-clamp-1">Settings</span>
-                </ButtonBase>
-            </NuxtLink>
-            <h3 v-if="identity"
-                class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
-                Posts</h3>
-            <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient"
-                class="!justify-start overflow-hidden">
-                <Icon icon="tabler:writing" class="!size-6" />
-                <span class="shrink-0 line-clamp-1">Compose</span>
-                <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
-                    <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
-                    <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
-                        aria-hidden="true" />
-                </kbd>
-            </ButtonBase>
-            <ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
-                theme="primary" class="w-full !justify-start overflow-hidden">
-                <Icon icon="tabler:refresh" class="!size-6" />
-                <span class="shrink-0 line-clamp-1">Update</span>
-            </ButtonBase>
-
-        </div>
-    </aside>
-    <!-- Mobile bottom navbar -->
-    <nav
-        :class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
-
-        <AdaptiveDropdown>
-            <template #button>
-                <ButtonMobileNavbar icon="tabler:home" text="Timelines" />
-            </template>
-
-            <template #items>
-                <Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
-                    <NuxtLink :href="timeline.href">
-                        <ButtonDropdown :icon="timeline.icon" class="w-full">
-                            {{ timeline.name }}
-                        </ButtonDropdown>
-                    </NuxtLink>
-                </Menu.Item>
-            </template>
-        </AdaptiveDropdown>
-        <NuxtLink href="/notifications" class="w-full">
-            <ButtonMobileNavbar icon="tabler:bell" text="Notifications" />
-        </NuxtLink>
-        <ButtonMobileNavbar v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker(true)" icon="tabler:refresh"
-            text="Update" />
-        <AccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
-            @sign-out="id => signOut(id).finally(() => loadingAuth = false)">
-            <ButtonMobileNavbar icon="tabler:user" text="Account" />
-        </AccountPicker>
-        <button @click="compose" v-if="identity"
-            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-[theme(colors.primary.300/70%)] via-purple-300/70 to-indigo-400/70">
-            <iconify-icon icon="tabler:writing" class="text-2xl" />
-            <span class="text-xs hidden md:inline">Compose</span>
-        </button>
-    </nav>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import Icon from "~/packages/ui/components/icons/icon.vue";
-import ButtonDropdown from "../buttons/button-dropdown.vue";
-import ButtonMobileNavbar from "../buttons/button-mobile-navbar.vue";
-import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
-import AccountPicker from "./account-picker.vue";
-const { $pwa } = useNuxtApp();
-
-const timelines = ref([
-    {
-        href: "/home",
-        name: "Home",
-        icon: "tabler:home",
-        requiresAuth: true,
-    },
-    {
-        href: "/public",
-        name: "Public",
-        icon: "tabler:world",
-    },
-    {
-        href: "/local",
-        name: "Local",
-        icon: "tabler:home",
-    },
-    {
-        href: "/notifications",
-        name: "Notifications",
-        icon: "tabler:bell",
-        requiresAuth: true,
-    },
-]);
-
-const visibleTimelines = computed(() =>
-    timelines.value.filter(
-        (timeline) => !timeline.requiresAuth || identity.value,
-    ),
-);
-
-const loadingAuth = ref(false);
-
-const appData = useAppData();
-const instance = useInstance();
-
-const compose = () => {
-    useEvent("composer:open");
-};
-
-const signIn = async () => {
-    loadingAuth.value = true;
-
-    const output = await client.value.createApp("Versia", {
-        scopes: ["read", "write", "follow", "push"],
-        redirect_uris: new URL("/", useRequestURL().origin).toString(),
-        website: useBaseUrl().value,
-    });
-
-    if (!output?.data) {
-        alert("Failed to create app");
-        return;
-    }
-
-    appData.value = output.data;
-
-    const url = await client.value.generateAuthUrl(
-        output.data.client_id,
-        output.data.client_secret,
-        {
-            scopes: ["read", "write", "follow", "push"],
-            redirect_uri: new URL("/", useRequestURL().origin).toString(),
-        },
-    );
-
-    if (!url) {
-        alert("Failed to generate auth URL");
-        return;
-    }
-
-    window.location.href = url;
-};
-
-const signOut = async (id?: string) => {
-    loadingAuth.value = true;
-
-    if (!(appData.value && identity.value)) {
-        console.error("No app or identity data to sign out");
-        return;
-    }
-
-    const identityToRevoke = id
-        ? identities.value.find((i) => i.id === id)
-        : identity.value;
-
-    if (!identityToRevoke) {
-        console.error("No identity to revoke");
-        return;
-    }
-
-    // Don't do anything on error, as Versia Server doesn't implement the revoke endpoint yet
-    await client.value
-        ?.revokeToken(
-            appData.value.client_id,
-            identityToRevoke.tokens.access_token,
-            identityToRevoke.tokens.access_token,
-        )
-        .catch(() => {
-            // Do nothing
-        });
-
-    if (id === identity.value.id) {
-        identity.value = null;
-        await navigateTo("/");
-        return;
-    }
-
-    identities.value = identities.value.filter((i) => i.id !== id);
-    await useEvent("notification:new", {
-        type: "success",
-        title: "Signed out",
-        description: "Account signed out successfully",
-    });
-};
-</script>
\ No newline at end of file
diff --git a/components/sidebars/right-sidebar.vue b/components/sidebars/right-sidebar.vue
new file mode 100644
index 0000000..d349998
--- /dev/null
+++ b/components/sidebars/right-sidebar.vue
@@ -0,0 +1,13 @@
+<template>
+    <Sidebar variant="inset" collapsible="none" side="right" class="[--sidebar-width:24rem] hidden lg:flex">
+        <SidebarContent class="p-2 overflow-y-auto">
+            <NotificationsTimeline />
+        </SidebarContent>
+        <SidebarRail />
+    </Sidebar>
+</template>
+
+<script lang="ts" setup>
+import NotificationsTimeline from "../timelines/notifications.vue";
+import { Sidebar, SidebarContent, SidebarRail } from "../ui/sidebar";
+</script>
\ No newline at end of file
diff --git a/components/sidebars/settings-sidebar.vue b/components/sidebars/settings-sidebar.vue
deleted file mode 100644
index 477690c..0000000
--- a/components/sidebars/settings-sidebar.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <Tabs.Root v-model="tab" class="bg-dark-700 h-full overflow-auto pb-20">
-        <Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
-            <Tabs.Trigger :value="page"
-                v-for="page of SettingPages"
-                :as-child="true">
-                <ButtonBase class="capitalize hover:bg-white/5">
-                    {{ page }}
-                </ButtonBase>
-            </Tabs.Trigger>
-            <Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
-        </Tabs.List>
-        <Tabs.Content :value="page" v-for="page of SettingPages">
-            <slot :name="page" />
-        </Tabs.Content>
-    </Tabs.Root>
-</template>
-
-<script lang="ts" setup>
-import { Tabs } from "@ark-ui/vue";
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-import { SettingPages } from "~/settings";
-
-const tab = ref<SettingPages>(
-    (window.location.hash.slice(1) as SettingPages) || SettingPages.Account,
-);
-
-// Update page hash when tab changes
-watch(
-    tab,
-    (value) => {
-        window.location.hash = value;
-    },
-    { immediate: true },
-);
-</script>
\ No newline at end of file
diff --git a/components/sidebars/sidebar.vue b/components/sidebars/sidebar.vue
new file mode 100644
index 0000000..8dda9fe
--- /dev/null
+++ b/components/sidebars/sidebar.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { Separator } from "~/components/ui/separator";
+import {
+    SidebarInset,
+    SidebarProvider,
+    SidebarTrigger,
+} from "~/components/ui/sidebar";
+import { SettingIds } from "~/settings";
+import LeftSidebar from "./left-sidebar.vue";
+import RightSidebar from "./right-sidebar.vue";
+
+const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
+
+const route = useRoute();
+</script>
+
+<template>
+    <SidebarProvider>
+        <LeftSidebar />
+        <SidebarInset>
+            <header
+                class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 overflow-hidden bg-background">
+                <div class="flex items-center gap-2 px-4">
+                    <SidebarTrigger class="-ml-1" />
+                    <Separator orientation="vertical" class="mr-2 h-4" />
+                    <Breadcrumb v-if="route.meta.breadcrumbs">
+                        <BreadcrumbList>
+                            <template v-for="(breadcrumb, index) of route.meta.breadcrumbs()">
+                                <BreadcrumbItem class="hidden md:block">
+                                    <component :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
+                                        {{ breadcrumb.text }}
+                                    </component>
+                                </BreadcrumbItem>
+                                <BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs().length - 1)"
+                                    class="hidden md:block" />
+                            </template>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </div>
+            </header>
+            <div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto *:z-10">
+                <slot />
+            </div>
+        </SidebarInset>
+        <RightSidebar v-if="identity" v-show="showRightSidebar.value" />
+    </SidebarProvider>
+</template>
diff --git a/components/sidebars/theme-switcher.vue b/components/sidebars/theme-switcher.vue
new file mode 100644
index 0000000..3840cd4
--- /dev/null
+++ b/components/sidebars/theme-switcher.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Moon, Sun, Wrench } from "lucide-vue-next";
+import { Button } from "../ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+
+const colorMode = useColorMode();
+
+const themeNames = {
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+} as Record<string, string>;
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline" class="w-full justify-start">
+                <Sun class="size-[1.2rem] scale-100 transition-all dark:scale-0 dark:hidden inline" />
+                <Moon class="size-[1.2rem] scale-0 transition-all dark:scale-100 hidden dark:inline" />
+                {{ themeNames[colorMode.preference] }}
+            </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" >
+            <DropdownMenuItem @click="colorMode.preference = 'light'">
+                <Sun class="size-4 mr-2" />
+                Light
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="colorMode.preference = 'dark'">
+                <Moon class="size-4 mr-2" />
+                Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="colorMode.preference = 'system'">
+                <Wrench class="size-4 mr-2" />
+                System
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
\ No newline at end of file
diff --git a/components/skeleton/Skeleton.vue b/components/skeleton/Skeleton.vue
deleted file mode 100644
index 026380e..0000000
--- a/components/skeleton/Skeleton.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <div v-for="index of lines" :class="[
-            'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
-            shape === 'circle' ? 'rounded-full' : 'rounded',
-            ['text', 'content'].includes(type) && 'h-[1em]',
-            props.class
-        ]" v-if="enabled" :style="{
-            width: getWidth(index, lines),
-        }">
-    </div>
-    <slot v-else />
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(
-    defineProps<{
-        enabled: boolean;
-        shape?: "circle" | "rect";
-        type?: "text" | "content";
-        minWidth?: number;
-        maxWidth?: number;
-        widthUnit?: "px" | "%";
-        class?: string;
-        lines?: number;
-    }>(),
-    {
-        shape: "rect",
-        type: "text",
-        widthUnit: "px",
-    },
-);
-
-const isContent = computed(() => props.type === "content");
-const isText = computed(() => props.type === "text");
-const isWidthSpecified = computed(() => props.minWidth && props.maxWidth);
-const calculatedWidth = computed(
-    () =>
-        Math.random() * ((props.maxWidth ?? 0) - (props.minWidth ?? 0)) +
-        (props.minWidth ?? 0),
-);
-
-const getWidth = (index: number, lines: number) => {
-    if (isWidthSpecified.value) {
-        if (isContent.value) {
-            return index === lines
-                ? `${calculatedWidth.value}${props.widthUnit}`
-                : "100%";
-        }
-        return `${calculatedWidth.value}${props.widthUnit}`;
-    }
-    return undefined;
-};
-
-const lines = isContent.value
-    ? (props.lines ?? Math.ceil(Math.random() * 5))
-    : 1;
-</script>
\ No newline at end of file
diff --git a/components/social-elements/instance/Presentation.vue b/components/social-elements/instance/Presentation.vue
deleted file mode 100644
index 26d951a..0000000
--- a/components/social-elements/instance/Presentation.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="flex flex-col p-10 gap-4 h-full">
-        <div
-            class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-            <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
-                v-if="instance?.banner.url" alt="Instance banner" :src="instance.banner.url" />
-        </div>
-
-        <div class="prose prose-invert prose-sm">
-            <h1 class="text-center mb-10 mt-5">{{ instance?.title }}</h1>
-            <div v-html="description?.content"></div>
-        </div>
-
-        <div v-if="instance?.contact.account" class="flex flex-col gap-2 mt-auto">
-            <h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
-            <SmallCard :account="instance.contact.account" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import SmallCard from "../users/SmallCard.vue";
-
-const instance = useInstance();
-const description = useExtendedDescription(client);
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/attachment-dialog.vue b/components/social-elements/notes/attachment-dialog.vue
deleted file mode 100644
index 9424608..0000000
--- a/components/social-elements/notes/attachment-dialog.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <HeadlessTransitionRoot as="template" :show="lightbox">
-        <Dialog.Root v-model:open="lightbox" :close-on-escape="true" :close-on-interact-outside="true"
-            @update:open="o => lightbox = o">
-
-            <Teleport to="body">
-                <Dialog.Positioner class="z-50">
-                    <HeadlessTransitionChild as="template" enter="ease-out duration-200" enter-from="opacity-0"
-                        enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
-                        leave-to="opacity-0">
-                        <Dialog.Backdrop class="fixed inset-0 bg-black/70 !z-40" @click="lightbox = false" />
-                    </HeadlessTransitionChild>
-
-                    <Dialog.Content
-                        class="w-screen h-screen flex !z-50 justify-center items-center flex-col overflow-hidden p-10 fixed inset-0">
-                        <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
-                            <a @click.stop :href="attachment?.url" target="_blank" download class="ml-auto">
-                                <iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
-                                <span class="sr-only">Close</span>
-                            </a>
-                            <button @click.stop="lightbox = false">
-                                <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
-                                <span class="sr-only">Close</span>
-                            </button>
-                        </div>
-                        <HeadlessTransitionChild as="template" enter="ease-out duration-200"
-                            enter-from="opacity-0 sm:scale-95" enter-to="opacity-100 sm:scale-100"
-                            leave="ease-in duration-200" leave-from="opacity-100 sm:scale-100"
-                            leave-to="opacity-0 sm:scale-95">
-                            <img @click.stop v-if="attachment?.type === 'image'" class="rounded max-w-[70%] max-h-[70%]"
-                                :src="attachment.url" :alt="attachment.description ?? ''"
-                                :title="attachment.description ?? ''" />
-                        </HeadlessTransitionChild>
-                        <span @click.stop v-if="attachment?.description"
-                            class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
-                            {{ attachment.description }}
-                        </span>
-                    </Dialog.Content>
-                </Dialog.Positioner>
-            </Teleport>
-        </Dialog.Root>
-    </HeadlessTransitionRoot>
-</template>t
-
-<script lang="ts" setup>
-import { Dialog } from "@ark-ui/vue";
-import type { Attachment } from "@versia/client/types";
-
-const lightbox = ref(false);
-const attachment = ref<Attachment | null>(null);
-
-useListen("attachment:view", async (a) => {
-    attachment.value = a;
-    await nextTick();
-    lightbox.value = true;
-});
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/attachment.vue b/components/social-elements/notes/attachment.vue
deleted file mode 100644
index 31fa60a..0000000
--- a/components/social-elements/notes/attachment.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <div class="aspect-video relative">
-        <div tabindex="0" aria-label="Open attachment in lightbox" role="button"
-            class="w-full h-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100 relative">
-            <img v-if="attachment.type === 'image'"
-                class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out"
-                :src="attachment.url" :alt="attachment.description ?? undefined" @click="openLightbox"
-                @keydown="openLightbox" />
-            <video v-else-if="attachment.type === 'video'" class="object-contain w-full h-full rounded aspect-video"
-                controls :alt="attachment.description ?? undefined" :src="attachment.url">
-                Your browser does not support the video tag.
-            </video>
-            <a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
-                target="_blank" download>
-                <div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
-                    <iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
-                    <p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
-                    <p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
-                        formatBytes(Number(attachment.meta?.length)) }}</p>
-                </div>
-            </a>
-        </div>
-        <!-- Alt text viewer -->
-        <Popover.Root :positioning="{
-            strategy: 'fixed',
-        }" v-if="attachment.description">
-            <Popover.Trigger aria-hidden="true"
-                class="absolute top-2 right-2 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
-                <iconify-icon icon="tabler:alt" width="none" class="size-6" />
-            </Popover.Trigger>
-            <Popover.Positioner class="!z-10">
-                <Popover.Content class="p-4 bg-dark-400 rounded text-sm ring-1 ring-dark-100 shadow-lg text-gray-300">
-                    <Popover.Description>{{ attachment.description }}</Popover.Description>
-                </Popover.Content>
-            </Popover.Positioner>
-        </Popover.Root>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { Popover } from "@ark-ui/vue";
-import type { Attachment } from "@versia/client/types";
-
-const props = defineProps<{
-    attachment: Attachment;
-}>();
-
-const openLightbox = () => {
-    useEvent("attachment:view", props.attachment);
-};
-
-const formatBytes = (bytes: number) => {
-    if (bytes === 0) {
-        return "0 Bytes";
-    }
-    const k = 1000;
-    const dm = 2;
-    const sizes = ["Bytes", "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(dm))} ${sizes[i]}`;
-};
-
-const getFilename = (url: string) => {
-    // Handle proxy case
-    if (url.includes("/media/proxy")) {
-        // Decode last part of URL as base64url, which is the real URL
-        const realUrl = atob(url.split("/").pop() ?? "");
-        return decodeURIComponent(
-            realUrl.substring(realUrl.lastIndexOf("/") + 1),
-        );
-    }
-    const path = new URL(url).pathname;
-    return path.substring(path.lastIndexOf("/") + 1);
-};
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
deleted file mode 100644
index 83f3ba1..0000000
--- a/components/social-elements/notes/header.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <div v-if="small" class="flex flex-row">
-        <NuxtLink :href="accountUrl" class="shrink-0">
-            <Avatar :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
-                class="size-6 rounded ring-1 ring-white/5" />
-            <span class="sr-only">Account profile</span>
-        </NuxtLink>
-        <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
-            <div class="flex flex-row text-sm items-center justify-between w-full">
-                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
-                    <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        <span v-html="display_name"></span>
-                    </Skeleton>
-                </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
-                    <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
-                        {{ timeAgo }}
-                    </Skeleton>
-                </NuxtLink>
-            </div>
-        </div>
-    </div>
-    <div v-else class="flex flex-row gap-x-4">
-        <UserCard :account="note?.account">
-            <NuxtLink :href="accountUrl" class="shrink-0">
-                <Avatar :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
-                    class="h-12 w-12 rounded ring-1 ring-white/5" />
-                <span class="sr-only">Account profile</span>
-            </NuxtLink>
-        </UserCard>
-        <div class="flex flex-col items-start justify-around grow overflow-hidden">
-            <div class="flex flex-row items-center justify-between w-full">
-                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
-                    <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        <span v-html="display_name"></span>
-                    </Skeleton>
-                </NuxtLink>
-                <NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
-                    :title="visibilities[note.visibility].text">
-                    <iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
-                        class="text-gray-400" aria-hidden="true" />
-                    <span class="sr-only">{{ visibilities[note.visibility].text }}</span>
-                </NuxtLink>
-            </div>
-            <div class="flex flex-row items-center justify-between w-full group">
-                <span class="text-gray-300 text-sm line-clamp-1 break-all w-full">
-                    <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
-                        <div class="group-hover:hidden">
-                            <span class="font-bold bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">@{{ username }}</span><span class="text-gray-500">{{ instance && "@" }}{{ instance }}</span>
-                            &middot; <span
-                                class="text-gray-400 cursor-help ml-auto" :alt="fullTime"
-                                :title="fullTime">
-                                <Skeleton :enabled="!note" :min-width="10" :max-width="50" shape="rect">
-                                    {{ timeAgo }}
-                                </Skeleton>
-                            </span >
-                        </div>
-                        <span @click="copyAccount" v-if="!hasCopied"
-                            class="hidden select-none w-full group-hover:flex cursor-pointer items-center gap-x-1">
-                            <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
-                                aria-hidden="true" />
-                            Click to copy
-                        </span>
-                        <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
-                            <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
-                                aria-hidden="true" />
-                            Copied!
-                        </span>
-                    </Skeleton>
-                </span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Status } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import UserCard from "~/components/social-elements/users/UserCard.vue";
-
-const props = defineProps<{
-    note?: Status;
-    small?: boolean;
-}>();
-
-const username = props.note?.account.acct.split("@")[0];
-const instance = props.note?.account.acct.split("@")[1];
-const { display_name } = useParsedAccount(props.note?.account, settings);
-
-const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
-const accountUrl = props.note && `/@${props.note.account.acct}`;
-const timeAgo = useTimeAgo(props.note?.created_at ?? 0, {});
-const fullTime = Intl.DateTimeFormat("default", {
-    dateStyle: "medium",
-    timeStyle: "short",
-}).format(new Date(props.note?.created_at ?? 0));
-const hasCopied = ref(false);
-
-const { copy } = useClipboard();
-const copyAccount = () => {
-    if (props.note) {
-        copy(`@${props.note.account.acct}`);
-        hasCopied.value = true;
-        setTimeout(() => {
-            hasCopied.value = false;
-        }, 2000);
-    }
-};
-
-const visibilities = {
-    public: {
-        icon: "tabler:world",
-        text: "This note is public: it can be seen by anyone.",
-    },
-    unlisted: {
-        icon: "tabler:lock-open",
-        text: "This note is unlisted: it can be seen by anyone with the link.",
-    },
-    private: {
-        icon: "tabler:lock",
-        text: "This note is private: it can only be seen by followers.",
-    },
-    direct: {
-        icon: "tabler:mail",
-        text: "This note is direct: it can only be seen by mentioned users.",
-    },
-};
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/interactions/button.vue b/components/social-elements/notes/interactions/button.vue
deleted file mode 100644
index 63a6620..0000000
--- a/components/social-elements/notes/interactions/button.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <button class="group disabled:opacity-70 max-w-28 disabled:cursor-not-allowed hover:enabled:bg-dark-800 duration-200 rounded flex flex-1 flex-row items-center justify-center">
-        <slot />
-    </button>
-</template>
-
-<script lang="ts" setup>
-
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/interactions/row.vue b/components/social-elements/notes/interactions/row.vue
deleted file mode 100644
index 94f1603..0000000
--- a/components/social-elements/notes/interactions/row.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <div
-        class="mt-6 flex flex-row items-stretch relative justify-around text-sm h-10">
-        <InteractionButton @click="useEvent('note:reply', note)"
-            :disabled="!identity">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
-                class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.replies_count">{{ numberFormat(note.replies_count) }}</span>
-        </InteractionButton>
-        <InteractionButton @click="likeFn" :disabled="!identity">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited"
-                class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
-                class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.favourites_count">{{ numberFormat(note.favourites_count) }}</span>
-        </InteractionButton>
-        <InteractionButton @click="reblogFn" :disabled="!identity">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged"
-                class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
-                class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.reblogs_count">{{ numberFormat(note.reblogs_count) }}</span>
-        </InteractionButton>
-        <InteractionButton @click="useEvent('note:quote', note)"
-            :disabled="!identity">
-            <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
-                class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-        </InteractionButton>
-        <NoteMenu v-model:note="note" :url="url" :remove="remove" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Status } from "@versia/client/types";
-import NoteMenu from "../note-menu.vue";
-import InteractionButton from "./button.vue";
-
-defineProps<{
-    url: string;
-    remove: () => Promise<void>;
-}>();
-
-const note = defineModel<Status>("note", {
-    required: true,
-});
-
-const numberFormat = (number = 0) =>
-    new Intl.NumberFormat(undefined, {
-        notation: "compact",
-        compactDisplay: "short",
-        maximumFractionDigits: 1,
-    }).format(number);
-
-const likeFn = async () => {
-    if (note.value.favourited) {
-        const output = await client.value.unfavouriteStatus(note.value.id);
-
-        if (output?.data) {
-            note.value = output.data;
-        }
-    } else {
-        const output = await client.value.favouriteStatus(note.value.id);
-
-        if (output?.data) {
-            note.value = output.data;
-        }
-    }
-};
-
-const reblogFn = async () => {
-    if (note.value?.reblogged) {
-        const output = await client.value.unreblogStatus(note.value.id);
-
-        if (output?.data) {
-            note.value = output.data;
-        }
-    } else {
-        const output = await client.value.reblogStatus(note.value.id);
-
-        if (output?.data.reblog) {
-            note.value = output.data.reblog;
-        }
-    }
-};
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/mention.vue b/components/social-elements/notes/mention.vue
deleted file mode 100644
index 514bd9f..0000000
--- a/components/social-elements/notes/mention.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <a :href="`/@${account.acct}`" target="_blank"
-        class="shrink break-all rounded bg-dark-200 ring-1 ring-white/5 ring-inset text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
-        <img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
-            :alt="`${account.acct}'s avatar'`" />
-        {{ account.display_name || account.acct }}
-    </a>
-</template>
-
-<script lang="ts" setup>
-import type { Account } from "@versia/client/types";
-
-defineProps<{
-    account: Account;
-}>();
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
deleted file mode 100644
index f64ef6a..0000000
--- a/components/social-elements/notes/note-content.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <div v-if="!collapsed" class="mt-6">
-        <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
-            type="content">
-            <div v-if="content"
-                :class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
-                v-html="content">
-            </div>
-        </Skeleton>
-        <div v-if="note && note.media_attachments.length > 0"
-            class="[&:not(:first-child)]:mt-6 grid grid-cols-2 gap-4 [&>*]:aspect-square [&:has(>:last-child:nth-child(1))>*]:aspect-video [&:has(>:last-child:nth-child(1))]:block">
-            <Attachment v-for="attachment of note.media_attachments" :key="attachment.id" :attachment="attachment" />
-        </div>
-        <Note v-if="isQuote && note?.quote" :element="note?.quote" :small="true" class="mt-4 !rounded" />
-    </div>
-    <div v-else
-        class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
-        <strong v-if="note?.sensitive" class="max-w-64">This note was tagged as containing sensitive
-            content</strong>
-        <!-- Spoiler text is it's specified -->
-        <span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
-            }}</span>
-        <Button theme="secondary" @click="collapsed = false" class="mt-4">Show content</Button>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Status } from "@versia/client/types";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import Attachment from "./attachment.vue";
-import Note from "./note.vue";
-
-const props = defineProps<{
-    content: string | null;
-    note?: Status;
-    loaded?: boolean;
-    url: string;
-    shouldHide?: boolean;
-    isQuote?: boolean;
-}>();
-
-const collapsed = ref(props.shouldHide);
-</script>
-
-<style module>
-.content pre:has(code) {
-    word-wrap: normal;
-    background: transparent;
-    background-color: #ffffff0d;
-    border-radius: .25rem;
-    -webkit-hyphens: none;
-    hyphens: none;
-    margin-top: 1rem;
-    overflow-x: auto;
-    padding: .75rem 1rem;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    white-space: pre;
-    word-break: normal;
-    word-spacing: normal;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsla(0, 0%, 100%, .1)
-}
-
-.content pre code {
-    display: block;
-    padding: 0
-}
-
-.content code:not(pre code)::after,
-.content code:not(pre code)::before {
-    content: ""
-}
-
-.content ol li input[type=checkbox],
-.content ul li input[type=checkbox] {
-  border-radius:.25rem;
-  margin-bottom:0.2rem;
-  margin-right:.5rem;
-  margin-top:0;
-  vertical-align: middle;
-  --tw-text-opacity:1;
-  color: var(--theme-primary-400);
-}
-
-.content code:not(pre code) {
-    border-radius: .25rem;
-    padding: .25rem .5rem;
-    word-wrap: break-word;
-    background: transparent;
-    background-color: #ffffff0d;
-    -webkit-hyphens: none;
-    hyphens: none;
-    margin-top: 1rem;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    --tw-ring-color: hsla(0, 0%, 100%, .1)
-}
-</style>
\ No newline at end of file
diff --git a/components/social-elements/notes/note-menu.vue b/components/social-elements/notes/note-menu.vue
deleted file mode 100644
index 8bd9c92..0000000
--- a/components/social-elements/notes/note-menu.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-    <AdaptiveDropdown>
-        <template #button>
-            <InteractionButton>
-                <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
-                    aria-hidden="true" />
-                <span class="sr-only">Open menu</span>
-            </InteractionButton>
-        </template>
-
-        <template #items>
-            <Menu.ItemGroup>
-                <Menu.Item value="" v-if="isMyAccount">
-                    <ButtonDropdown @click="note && useEvent('note:edit', note)" icon="tabler:pencil" class="w-full">
-                        Edit
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
-                        class="w-full">
-                        Copy API
-                        response
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copy(url)" icon="tabler:link" class="w-full">
-                        Copy link
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="" v-if="note?.url && isRemote">
-                    <ButtonDropdown @click="copy(note.url)" icon="tabler:link" class="w-full">
-                        Copy link (origin)
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="" v-if="note?.url && isRemote">
-                    <ButtonDropdown @click="openBlank(note.url)" icon="tabler:external-link" class="w-full">
-                        View on remote
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="" v-if="isMyAccount">
-                    <ButtonDropdown @click="remove" icon="tabler:backspace" :disabled="!identity"
-                        class="w-full border-r-2 border-red-500">
-                        Delete
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" v-if="identity" />
-            <Menu.ItemGroup v-if="identity">
-                <Menu.Item value="">
-                    <ButtonDropdown @click="note && useEvent('note:reply', note)" icon="tabler:arrow-back-up"
-                        class="w-full">
-                        Reply
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="likeFn" icon="tabler:heart" class="w-full" v-if="!note?.favourited">
-                        Like
-                    </ButtonDropdown>
-                    <ButtonDropdown @click="likeFn" icon="tabler:heart-filled" class="w-full" v-else>
-                        Unlike
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-if="!note?.reblogged">
-                        Reblog
-                    </ButtonDropdown>
-                    <ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-else>
-                        Unreblog
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="note && useEvent('note:quote', note)" icon="tabler:quote" class="w-full">
-                        Quote
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" v-if="identity" />
-            <Menu.ItemGroup v-if="identity">
-                <Menu.Item value="">
-                    <ButtonDropdown @click="note && useEvent('note:report', note)" icon="tabler:flag" class="w-full"
-                        :disabled="!permissions.includes(RolePermission.ManageOwnReports)">
-                        Report
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
-                    <ButtonDropdown icon="tabler:shield-bolt" class="w-full">
-                        Open moderation panel
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-        </template>
-    </AdaptiveDropdown>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import { RolePermission, type Status } from "@versia/client/types";
-import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
-import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
-import InteractionButton from "./interactions/button.vue";
-
-defineProps<{
-    url: string;
-    remove: () => Promise<void>;
-}>();
-
-const note = defineModel<Status>("note", {
-    required: true,
-});
-
-const openBlank = (url: string) => window.open(url, "_blank");
-const { copy } = useClipboard();
-const isMyAccount = computed(
-    () => identity.value?.account.id === note.value?.account.id,
-);
-const isRemote = computed(() => note.value?.account.acct.includes("@"));
-const permissions = usePermissions();
-
-const likeFn = async () => {
-    if (!note.value) {
-        return;
-    }
-    if (note.value.favourited) {
-        const output = await client.value.unfavouriteStatus(note.value.id);
-
-        if (output.data) {
-            note.value = output.data;
-        }
-    } else {
-        const output = await client.value.favouriteStatus(note.value.id);
-
-        if (output.data) {
-            note.value = output.data;
-        }
-    }
-};
-
-const reblogFn = async () => {
-    if (!note.value) {
-        return;
-    }
-    if (note.value.reblogged) {
-        const output = await client.value.unreblogStatus(note.value.id);
-
-        if (output.data) {
-            note.value = output.data;
-        }
-    } else {
-        const output = await client.value.reblogStatus(note.value.id);
-
-        if (output.data.reblog) {
-            note.value = output.data.reblog;
-        }
-    }
-};
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
deleted file mode 100644
index 99a6314..0000000
--- a/components/social-elements/notes/note.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <article
-        :class="['relative flex flex-col', borders && 'first:rounded-t last:rounded-b ring-1 ring-white/5', background && 'bg-dark-800 hover:bg-dark-700 duration-200']">
-        <note v-if="renderReplies && isReply && reply && !threadView" :thread-view="true" :element="reply"
-            :borders="false" :render-replies="false" :thread-view-top="false" />
-        <div class="relative">
-            <div v-if="threadView && outputtedNote"
-                class="h-[calc(100%-2rem)] w-[0.1rem] rounded bg-gray-600 absolute top-[4.5rem] left-12">
-            </div>
-            <div v-if="threadViewTop && reply && outputtedNote"
-                class="h-[1.5rem] w-[0.1rem] rounded bg-gray-600 absolute top-0 left-12">
-            </div>
-
-            <div :class="[padding && 'p-6', 'z-10']">
-                <!-- Overlay that blocks clicks for disabled notes -->
-                <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
-                </div>
-                <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
-                    <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100"
-                        width-unit="%">
-                        <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6"
-                            aria-hidden="true" />
-                        <Avatar v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
-                            class="size-6 rounded shrink-0 ring-1 ring-white/10" />
-                        <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
-                    </Skeleton>
-                </div>
-                <!-- <ReplyHeader v-if="isReply && !threadView" :account_id="outputtedNote?.in_reply_to_account_id ?? null" /> -->
-                <Header :note="outputtedNote" :small="small" />
-                <NoteContent :class="threadView && 'ml-16'" :note="outputtedNote" :loaded="loaded" :url="url"
-                    :content="content" :is-quote="isQuote" :should-hide="shouldHide" />
-                <Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded"
-                    v-if="!small || !showInteractions">
-                    <InteractionRow v-if="showInteractions && outputtedNote && !threadView" :note="outputtedNote"
-                        :url="url" :remove="remove" />
-                </Skeleton>
-            </div>
-        </div>
-    </article>
-</template>
-
-<script lang="ts" setup>
-import type { Status } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import Header from "./header.vue";
-import InteractionRow from "./interactions/row.vue";
-import NoteContent from "./note-content.vue";
-
-const props = withDefaults(
-    defineProps<{
-        element?: MaybeRef<Status>;
-        small?: boolean;
-        disabled?: boolean;
-        showInteractions?: boolean;
-        threadView?: boolean;
-        threadViewTop?: boolean;
-        renderReplies?: boolean;
-        padding?: boolean;
-        borders?: boolean;
-        background?: boolean;
-    }>(),
-    {
-        showInteractions: true,
-        padding: true,
-        borders: true,
-        renderReplies: true,
-        background: true,
-        threadViewTop: true,
-    },
-);
-
-const noteRef = ref(props.element);
-
-useListen("composer:send-edit", (note) => {
-    if (note.id === noteRef.value?.id) {
-        noteRef.value = note;
-    }
-});
-
-const {
-    loaded,
-    note: outputtedNote,
-    remove,
-    content,
-    shouldHide,
-    url,
-    isQuote,
-    reblog,
-    isReply,
-    reblogDisplayName,
-} = useNoteData(noteRef, client, settings);
-
-const inReplyToId = computed(
-    () => outputtedNote?.value?.in_reply_to_id ?? null,
-);
-const reply = useNote(client, inReplyToId);
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notes/reply-header.vue b/components/social-elements/notes/reply-header.vue
deleted file mode 100644
index 8a3b0ce..0000000
--- a/components/social-elements/notes/reply-header.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
-        <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-            <iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
-            <span class="shrink-0">Replying to</span>
-            <Avatar v-if="account?.avatar" :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                class="size-5 shrink-0 rounded ring-1 ring-white/10" />
-            <strong class="line-clamp-1">{{ account?.display_name || account?.acct }}</strong>
-        </Skeleton>
-    </NuxtLink>
-</template>
-
-<script lang="ts" setup>
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-
-const props = defineProps<{
-    account_id: string | null;
-}>();
-
-const account = useAccount(client, props.account_id);
-</script>
\ No newline at end of file
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
deleted file mode 100644
index f48a37a..0000000
--- a/components/social-elements/notifications/notif.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-    <div class="flex flex-col p-1 bg-dark-400">
-        <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
-            <Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-                <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
-                <Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
-                    :alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
-                <span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
-                    }}</span>
-            </Skeleton>
-        </div>
-        <div>
-            <Note v-if="element?.status || !element" :element="element?.status" :small="true" />
-            <div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
-                <SmallCard :account="element.account" />
-            </div>
-            <div v-if="element?.type === 'follow_request' && relationship?.requested_by"
-                class="w-full grid grid-cols-2 gap-4 p-2 ">
-                <Button theme="primary" :loading="isWorkingOnFollowRequest"
-                    @click="acceptFollowRequest"><span>Accept</span>
-                </Button>
-                <Button theme="secondary" :loading="isWorkingOnFollowRequest"
-                    @click="rejectFollowRequest"><span>Reject</span>
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Notification } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import Note from "../notes/note.vue";
-import SmallCard from "../users/SmallCard.vue";
-
-const props = defineProps<{
-    element?: Notification;
-}>();
-
-const isWorkingOnFollowRequest = ref(false);
-const { relationship } = useRelationship(
-    client,
-    props.element?.account?.id ?? null,
-);
-
-const acceptFollowRequest = async () => {
-    if (!props.element?.account) {
-        return;
-    }
-    isWorkingOnFollowRequest.value = true;
-    const { data } = await client.value.acceptFollowRequest(
-        props.element.account.id,
-    );
-    relationship.value = data;
-    isWorkingOnFollowRequest.value = false;
-};
-
-const rejectFollowRequest = async () => {
-    if (!props.element?.account) {
-        return;
-    }
-    isWorkingOnFollowRequest.value = true;
-    const { data } = await client.value.rejectFollowRequest(
-        props.element.account.id,
-    );
-    relationship.value = data;
-    isWorkingOnFollowRequest.value = false;
-};
-
-const { display_name } = useParsedAccount(props.element?.account, settings);
-
-const text = computed(() => {
-    if (!props.element) {
-        return "";
-    }
-
-    switch (props.element.type) {
-        case "mention":
-            return "mentioned you";
-        case "reblog":
-            return "reblogged your note";
-        case "favourite":
-            return "liked your note";
-        case "follow":
-            return "followed you";
-        case "follow_request":
-            return "requested to follow you";
-        default: {
-            console.error("Unknown notification type", props.element.type);
-            return "";
-        }
-    }
-});
-const icon = computed(() => {
-    if (!props.element) {
-        return "";
-    }
-
-    switch (props.element.type) {
-        case "mention":
-            return "tabler:at";
-        case "reblog":
-            return "tabler:repeat";
-        case "favourite":
-            return "tabler:heart";
-        case "follow":
-            return "tabler:plus";
-        case "follow_request":
-            return "tabler:plus";
-        default:
-            return "";
-    }
-});
-</script>
\ No newline at end of file
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
deleted file mode 100644
index a0452ca..0000000
--- a/components/social-elements/users/Account.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-    <div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
-        <Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
-            class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
-
-        <div class="flex items-start justify-between px-4 py-3">
-            <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
-
-            <div class="flex gap-x-2">
-                <Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
-                </Button>
-                <Button theme="secondary" :loading="isLoading" @click="follow()"
-                    v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
-                    <span>Follow</span>
-                </Button>
-                <Button theme="secondary" :loading="isLoading" @click="unfollow()"
-                    v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
-                    <span>Unfollow</span>
-                </Button>
-                <Button theme="secondary" :loading="isLoading" :disabled="true"
-                    v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
-                    <span>Requested</span>
-                </Button>
-
-                <AccountActionsDropdown v-if="account && relationship" :account="account"
-                    :relationship="relationship" />
-            </div>
-        </div>
-
-        <div class="mt-2 px-4">
-            <h2
-                class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
-                <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
-                    <span v-html="display_name"></span>
-                    <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
-                        class="text-gray-400 cursor-pointer align-text-top ml-1"
-                        title="This account manually approves its followers" />
-                </Skeleton>
-            </h2>
-            <span class="text-gray-300 block mt-2">
-                <Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
-            </span>
-            <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
-                <Badge v-for="role of visibleRoles" :key="role.id" :name="role.name" :description="role.description"
-                    :img="role.icon" />
-                <Badge v-if="isDeveloper" name="Versia Developer" description="This user is a Versia developer."
-                    :verified="true" />
-            </div>
-        </div>
-
-        <div class="mt-4 px-4">
-            <Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
-                shape="rect" type="content">
-            </Skeleton>
-            <div class="prose prose-invert" v-html="note" v-else></div>
-        </div>
-
-        <div class="mt-3 flex items-center space-x-4 px-4">
-            <div class="flex items-center space-x-1">
-                <Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
-                    <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
-                    <span class="text-gray-400">Created {{ formattedJoin }}</span>
-                </Skeleton>
-            </div>
-            <div v-if="account?.bot" class="flex items-center space-x-1">
-                <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
-                <span class="text-gray-400">Bot</span>
-            </div>
-        </div>
-
-        <div class="mt-3 flex items-center space-x-4 px-4">
-            <div class="cursor-pointer hover:underline space-x-1">
-                <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
-                    <span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
-                    <span class="text-gray-400">Posts</span>
-                </Skeleton>
-            </div>
-            <div class="cursor-pointer hover:underline space-x-1">
-                <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
-                    <span class="font-bold text-gray-200">{{ account?.following_count }}</span>
-                    <span class="text-gray-400">Following</span>
-                </Skeleton>
-            </div>
-        </div>
-
-        <div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
-            <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
-                <span class="text-primary-500 font-semibold" v-html="field.name"></span>
-                <span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
-            </div>
-        </div>
-
-        <div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
-            <div v-for="_ of 3" class="flex flex-col gap-1">
-                <Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
-                </Skeleton>
-                <Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
-                </Skeleton>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import type { Account } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-import AccountActionsDropdown from "./AccountActionsDropdown.vue";
-import Badge from "./Badge.vue";
-
-const props = defineProps<{
-    account?: Account;
-}>();
-
-const account = ref(props.account);
-
-watch(props, () => {
-    account.value = props.account;
-});
-
-const skeleton = computed(() => !account.value);
-const config = useConfig();
-const accountId = computed(() => account.value?.id ?? null);
-const { relationship, isLoading } = useRelationship(client, accountId);
-
-const follow = () => {
-    if (!(identity.value && account.value && relationship.value)) {
-        return;
-    }
-    relationship.value = {
-        ...relationship.value,
-        following: true,
-    };
-};
-
-const unfollow = () => {
-    if (!(identity.value && account.value && relationship.value)) {
-        return;
-    }
-    relationship.value = {
-        ...relationship.value,
-        following: false,
-    };
-};
-
-const formattedJoin = computed(() =>
-    Intl.DateTimeFormat("en-US", {
-        month: "long",
-        year: "numeric",
-    }).format(new Date(account.value?.created_at ?? 0)),
-);
-
-const handle = computed(() => {
-    if (!account.value?.acct.includes("@")) {
-        return `${account.value?.acct}@${new URL(useBaseUrl().value).host}`;
-    }
-    return account.value?.acct;
-});
-const isDeveloper = computed(() =>
-    config.DEVELOPER_HANDLES.includes(handle.value),
-);
-const visibleRoles = computed(
-    () => account.value?.roles.filter((r) => r.visible) ?? [],
-);
-
-const { display_name, fields, note } = useParsedAccount(
-    computed(() => account.value),
-    settings,
-);
-</script>
\ No newline at end of file
diff --git a/components/social-elements/users/AccountActionsDropdown.vue b/components/social-elements/users/AccountActionsDropdown.vue
deleted file mode 100644
index acc486f..0000000
--- a/components/social-elements/users/AccountActionsDropdown.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-    <AdaptiveDropdown>
-        <template #button>
-            <Button theme="secondary" class="h-full">
-                <iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-200" aria-hidden="true" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        </template>
-
-        <template #items>
-            <Menu.ItemGroup>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copyUsername" icon="tabler:at" class="w-full">
-                        Copy username
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copyId" icon="tabler:hash" class="w-full">
-                        Copy ID
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copy(JSON.stringify(account, null, 4))" icon="tabler:code" class="w-full">
-                        Copy API
-                        response
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" />
-            <Menu.ItemGroup>
-                <Menu.Item value="" v-if="isRemoteUser">
-                    <ButtonDropdown @click="viewOnRemote" icon="tabler:external-link" class="w-full">
-                        Open remote profile
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="copyUrl" icon="tabler:link" class="w-full">
-                        Copy URL
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" v-if="identity && !isMyAccount" />
-            <Menu.ItemGroup v-if="identity && !isMyAccount">
-                <Menu.Item value="">
-                    <ButtonDropdown @click="mute" icon="tabler:volume-off" class="w-full" v-if="!relationship.muting">
-                        Mute
-                    </ButtonDropdown>
-                    <ButtonDropdown @click="unmute" icon="tabler:volume-2" class="w-full" v-else>
-                        Unmute
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="">
-                    <ButtonDropdown @click="block" icon="tabler:shield-x" class="w-full" v-if="!relationship.blocking">
-                        Block
-                    </ButtonDropdown>
-                    <ButtonDropdown @click="unblock" icon="tabler:shield-check" class="w-full" v-else>
-                        Unblock
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" v-if="identity && isRemoteUser" />
-            <Menu.ItemGroup v-if="identity && isRemoteUser">
-                <Menu.Item value="">
-                    <ButtonDropdown @click="refetch" icon="tabler:refresh" class="w-full">
-                        Update remote user information
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-            <hr class="border-white/10 rounded" v-if="identity" />
-            <Menu.ItemGroup v-if="identity">
-                <Menu.Item value="">
-                    <ButtonDropdown @click="useEvent('account:report', account)" icon="tabler:flag" class="w-full"
-                        :disabled="!permissions.includes(RolePermission.ManageOwnReports)">
-                        Report
-                    </ButtonDropdown>
-                </Menu.Item>
-                <Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
-                    <ButtonDropdown icon="tabler:shield-bolt" class="w-full">
-                        Open moderation panel
-                    </ButtonDropdown>
-                </Menu.Item>
-            </Menu.ItemGroup>
-        </template>
-    </AdaptiveDropdown>
-</template>
-
-<script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
-import {
-    type Account,
-    type Relationship,
-    RolePermission,
-} from "@versia/client/types";
-import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
-import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-const props = defineProps<{
-    account: Account;
-    relationship: Relationship;
-}>();
-
-const relationship = ref(props.relationship);
-
-const permissions = usePermissions();
-const isMyAccount = computed(
-    () => identity.value?.account.id === props.account.id,
-);
-const isRemoteUser = computed(() => props.account.acct.includes("@"));
-const { copy } = useClipboard();
-
-const copyUsername = () => copy(props.account.acct);
-const copyId = () => copy(props.account.id);
-const viewOnRemote = () => window.open(props.account.url, "_blank");
-const copyUrl = () => copy(props.account.url);
-
-const mute = async () => {
-    const { data } = await client.value.muteAccount(props.account.id);
-    relationship.value = data;
-    useEvent("notification:new", {
-        type: "success",
-        title: "Account muted",
-        description: `You will no longer see notifications from ${props.account.acct}`,
-    });
-};
-const unmute = async () => {
-    const { data } = await client.value.unmuteAccount(props.account.id);
-    relationship.value = data;
-    useEvent("notification:new", {
-        type: "success",
-        title: "Account unmuted",
-        description: `You will now see notifications from ${props.account.acct}`,
-    });
-};
-
-const block = async () => {
-    const { data } = await client.value.blockAccount(props.account.id);
-    relationship.value = data;
-    useEvent("notification:new", {
-        type: "success",
-        title: "Account blocked",
-        description: `You will no longer see content from ${props.account.acct}`,
-    });
-};
-
-const unblock = async () => {
-    const { data } = await client.value.unblockAccount(props.account.id);
-    relationship.value = data;
-    useEvent("notification:new", {
-        type: "success",
-        title: "Account unblocked",
-        description: `You will now see content from ${props.account.acct}`,
-    });
-};
-
-const refetch = async () => {
-    const { data } = await client.value.refetchAccount(props.account.id);
-    useEvent("account:update", data);
-    useEvent("notification:new", {
-        type: "success",
-        title: "Remote user information updated",
-    });
-};
-</script>
\ No newline at end of file
diff --git a/components/social-elements/users/Badge.vue b/components/social-elements/users/Badge.vue
deleted file mode 100644
index b0584f3..0000000
--- a/components/social-elements/users/Badge.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <Tooltip.Root @update:open="(o) => open = o" :open="open" :open-delay="0">
-        <Tooltip.Trigger><span
-                class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-primary-200 ring-white/5 ring-1">
-                <svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
-                    class="size-4 fill-primary-500">
-                    <g>
-                        <path
-                            d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
-                        </path>
-                    </g>
-                </svg>
-                <img v-else-if="img" :src="img" alt="" class="size-4 rounded-sm" />
-                <iconify-icon v-else-if="icon" :icon="icon" width="none" class="text-primary-200 size-4"
-                    aria-hidden="true" />
-                <span>{{ name }}</span>
-            </span></Tooltip.Trigger>
-        <Tooltip.Positioner>
-            <transition enter-active-class="transition ease-in duration-100"
-                enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
-                enter-to-class="transform translate-y-0 opacity-100 scale-100"
-                leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
-                leave-to-class="transform opacity-0 scale-95">
-                <Tooltip.Content v-if="open"
-                    class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-200 ring-1 ring-white/10 shadow-xl">
-                    <svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
-                        class="size-4 fill-primary-500 inline mb-0.5">
-                        <g>
-                            <path
-                                d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
-                            </path>
-                        </g>
-                    </svg>
-                    {{ description }}
-                </Tooltip.Content>
-            </transition>
-        </Tooltip.Positioner>
-    </Tooltip.Root>
-
-</template>
-
-<script lang="ts" setup>
-import { Tooltip } from "@ark-ui/vue";
-
-const props = defineProps<{
-    name: string;
-    description?: string | null;
-    icon?: string | null;
-    img?: string | null;
-    verified?: boolean;
-}>();
-
-const open = ref(false);
-</script>
\ No newline at end of file
diff --git a/components/social-elements/users/SmallCard.vue b/components/social-elements/users/SmallCard.vue
deleted file mode 100644
index 5ee65f6..0000000
--- a/components/social-elements/users/SmallCard.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <component :is="disableLink ? 'div' : NuxtLink" :href="accountUrl" class="flex flex-row">
-        <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
-            <div class="shrink-0">
-                <Avatar class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
-                    :alt="`${account?.acct}'s avatar'`" />
-            </div>
-        </Skeleton>
-        <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
-            <div class="flex flex-row items-center justify-between w-full">
-                <div class="font-semibold text-gray-200 line-clamp-1 break-all">
-                    <Skeleton :enabled="!account" :min-width="90" :max-width="170" shape="rect">
-                        {{
-                            account?.display_name }}
-                    </Skeleton>
-                </div>
-            </div>
-            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
-                <Skeleton :enabled="!account" :min-width="130" :max-width="250" shape="rect">
-                    @{{
-                        account?.acct
-                    }}
-                </Skeleton>
-            </span>
-        </div>
-    </component>
-</template>
-
-<script lang="ts" setup>
-import type { Account } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import Skeleton from "~/components/skeleton/Skeleton.vue";
-import { NuxtLink } from "#components";
-
-const props = defineProps<{
-    account?: Account;
-    disableLink?: boolean;
-}>();
-
-const accountUrl = props.account && `/@${props.account.acct}`;
-</script>
\ No newline at end of file
diff --git a/components/social-elements/users/UserCard.vue b/components/social-elements/users/UserCard.vue
deleted file mode 100644
index 5024ea8..0000000
--- a/components/social-elements/users/UserCard.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-    <HoverCard.Root :positioning="{
-        placement: 'bottom',
-        strategy: 'fixed',
-    }" v-if="isEnabled.value" v-model:open="open" :open-delay="1000">
-        <HoverCard.Trigger :as-child="true">
-            <slot />
-        </HoverCard.Trigger>
-        <Teleport to="body" v-if="account">
-            <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0"
-                enter-to-class="opacity-100" leave-active-class="duration-200 ease-in-out"
-                leave-from-class="opacity-100" leave-to-class="opacity-0">
-                <div class="fixed bg-black/70 inset-0 z-10 pointer-events-none" v-if="open"></div>
-            </Transition>
-            <HoverCard.Positioner>
-                <HoverCard.Content
-                    class="bg-dark-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
-                    <Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
-                        class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
-
-                    <div class="flex items-start justify-between px-4 py-3">
-                        <Avatar :src="account.avatar" :alt="`${account.acct}'s avatar'`"
-                            class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-200" />
-                    </div>
-
-                    <div class="mt-2 px-4">
-                        <h2
-                            class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
-                            <span v-html="display_name"></span>
-                            <iconify-icon v-if="account.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
-                                class="text-gray-400 cursor-pointer align-text-top ml-1"
-                                title="This account manually approves its followers" />
-                        </h2>
-                        <span class="text-gray-300 block mt-2">
-                            @{{ account.acct }}
-                        </span>
-                        <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
-                            <Badge v-for="role of visibleRoles" :key="role.id" :name="role.name"
-                                :description="role.description" :img="role.icon" />
-                            <Badge v-if="isDeveloper" name="Versia Developer"
-                                description="This user is a Versia developer." :verified="true" />
-                        </div>
-                    </div>
-
-                    <div class="mt-4 px-4">
-                        <div class="prose prose-invert prose-sm" v-html="note"></div>
-                    </div>
-
-                    <div class="mt-3 flex items-center space-x-4 px-4">
-                        <div class="flex items-center space-x-1">
-                            <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem"
-                                class="text-gray-400" />
-                            <span class="text-gray-400">Created {{ formattedJoin }}</span>
-                        </div>
-                        <div v-if="account.bot" class="flex items-center space-x-1">
-                            <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
-                            <span class="text-gray-400">Bot</span>
-                        </div>
-                    </div>
-
-                    <div class="mt-3 flex items-center space-x-4 px-4">
-                        <div class="cursor-pointer hover:underline space-x-1">
-                            <span class="font-bold text-gray-200">{{ account.statuses_count }}</span>
-                            <span class="text-gray-400">Posts</span>
-                        </div>
-                        <div class="cursor-pointer hover:underline space-x-1">
-                            <span class="font-bold text-gray-200">{{ account.following_count }}</span>
-                            <span class="text-gray-400">Following</span>
-                        </div>
-                    </div>
-
-                    <div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
-                        <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
-                            <span class="text-primary-500 font-semibold" v-html="field.name"></span>
-                            <span class="text-gray-200 prose prose-invert prose-sm break-all"
-                                v-html="field.value"></span>
-                        </div>
-                    </div>
-                </HoverCard.Content>
-            </HoverCard.Positioner>
-        </Teleport>
-    </HoverCard.Root>
-    <slot v-else />
-</template>
-
-<script setup lang="ts">
-import { HoverCard } from "@ark-ui/vue";
-import type { Account } from "@versia/client/types";
-import Avatar from "~/components/avatars/avatar.vue";
-import { SettingIds } from "~/settings";
-import Badge from "./Badge.vue";
-
-const props = defineProps<{
-    account?: Account;
-}>();
-
-const config = useConfig();
-const isEnabled = ref({ value: false }); // useSetting(SettingIds.PopupAvatarHover);
-const open = ref(false);
-
-const formattedJoin = computed(() =>
-    Intl.DateTimeFormat("en-US", {
-        month: "long",
-        year: "numeric",
-    }).format(new Date(props.account?.created_at ?? 0)),
-);
-
-const handle = computed(() => {
-    if (!props.account?.acct.includes("@")) {
-        return `${props.account?.acct}@${new URL(useBaseUrl().value).host}`;
-    }
-    return props.account?.acct;
-});
-const isDeveloper = computed(() =>
-    config.DEVELOPER_HANDLES.includes(handle.value),
-);
-const visibleRoles = computed(
-    () => props.account?.roles.filter((r) => r.visible) ?? [],
-);
-
-const { display_name, fields, note } = useParsedAccount(
-    computed(() => props.account),
-    settings,
-);
-</script>
\ No newline at end of file
diff --git a/components/timelines/global.vue b/components/timelines/global.vue
new file mode 100644
index 0000000..da3f531
--- /dev/null
+++ b/components/timelines/global.vue
@@ -0,0 +1,34 @@
+<template>
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
+</template>
+
+<script lang="ts" setup>
+import type { Status } from "@versia/client/types";
+import { useGlobalTimeline } from "~/composables/GlobalTimeline";
+import Timeline from "./timeline.vue";
+
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useGlobalTimeline(client.value);
+
+useListen("note:delete", ({ id }) => {
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
+});
+
+useListen("composer:send", () => {
+    loadPrev();
+});
+</script>
\ No newline at end of file
diff --git a/components/timelines/timeline-item.vue b/components/timelines/timeline-item.vue
index 8eb0544..9373171 100644
--- a/components/timelines/timeline-item.vue
+++ b/components/timelines/timeline-item.vue
@@ -1,13 +1,12 @@
 <template>
-    <component :is="itemComponent" :element="item" @update="$emit('update', $event)"
+    <component :is="itemComponent" :note="type === 'status' ? item : undefined" :notification="type === 'notification' ? item : undefined" @update="$emit('update', $event)"
         @delete="$emit('delete', item?.id)" />
 </template>
 
 <script lang="ts" setup>
 import type { Notification, Status } from "@versia/client/types";
-import { computed } from "vue";
-import NoteItem from "../social-elements/notes/note.vue";
-import NotificationItem from "../social-elements/notifications/notif.vue";
+import Note from "../notes/note.vue";
+import NotificationItem from "../notifications/notification.vue";
 
 const props = defineProps<{
     item?: Status | Notification;
@@ -16,7 +15,7 @@ const props = defineProps<{
 
 const itemComponent = computed(() => {
     if (props.type === "status") {
-        return NoteItem;
+        return Note;
     }
     if (props.type === "notification") {
         return NotificationItem;
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 60a9d44..8b9528f 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -1,45 +1,60 @@
 <!-- Timeline.vue -->
 <template>
-    <div class="timeline rounded overflow-hidden">
-        <TransitionGroup name="timeline-item" tag="div" class="timeline-items">
-            <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
-                @delete="removeItem" />
-        </TransitionGroup>
+    <TransitionGroup name="timeline-item" tag="div" class="timeline-items *:rounded space-y-4 *:border">
+        <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
+            @delete="removeItem" />
+    </TransitionGroup>
 
-        <TimelineItem v-if="isLoading" :type="type" v-for="_ in 5" />
-
-        <div v-if="error" class="timeline-error">
-            {{ error.message }}
-        </div>
-
-        <div v-if="hasReachedEnd && items.length > 0"
-            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
-            <span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
-            <span class="text-sm">You can always go back and see what you missed.</span>
-        </div>
-
-        <div v-else-if="hasReachedEnd && items.length === 0"
-            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
-            <span class="text-lg font-semibold">There's nothing to show here.</span>
-            <span class="text-sm">Either you're all caught up or there's nothing to show.</span>
-        </div>
-
-        <div v-else-if="!infiniteScroll.value" class="py-10 px-4">
-            <Button theme="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
-                Load More
-            </Button>
-        </div>
-
-        <div v-else ref="loadMoreTrigger" class="h-20"></div>
+    <div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
+        <Loader class="size-8 animate-spin" />
     </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 { onMounted, watch } from "vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
+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 { Button } from "../ui/button";
 import TimelineItem from "./timeline-item.vue";
 
 const props = defineProps<{
diff --git a/components/ui/alert-dialog/AlertDialog.vue b/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..2c04d8d
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    type AlertDialogEmits,
+    type AlertDialogProps,
+    AlertDialogRoot,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogAction.vue b/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..718fae6
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { buttonVariants } from "~/components/ui/button";
+
+const props = defineProps<
+    AlertDialogActionProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogCancel.vue b/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..d3be9c0
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { buttonVariants } from "~/components/ui/button";
+
+const props = defineProps<
+    AlertDialogCancelProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogContent.vue b/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..05d5ce3
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    AlertDialogContent,
+    type AlertDialogContentEmits,
+    type AlertDialogContentProps,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    AlertDialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<AlertDialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogDescription.vue b/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..a438c27
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    AlertDialogDescription,
+    type AlertDialogDescriptionProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogFooter.vue b/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..f8d59df
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogHeader.vue b/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..61d4026
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogTitle.vue b/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..2b60008
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    AlertDialogTitleProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/components/ui/alert-dialog/AlertDialogTrigger.vue b/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..93287ee
--- /dev/null
+++ b/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from "radix-vue";
+
+const props = defineProps<AlertDialogTriggerProps>();
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/components/ui/alert-dialog/index.ts b/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..c48e47b
--- /dev/null
+++ b/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue";
+export { default as AlertDialogAction } from "./AlertDialogAction.vue";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
+export { default as AlertDialogContent } from "./AlertDialogContent.vue";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
diff --git a/components/ui/alert/Alert.vue b/components/ui/alert/Alert.vue
new file mode 100644
index 0000000..2c9ee5a
--- /dev/null
+++ b/components/ui/alert/Alert.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { type AlertVariants, alertVariants } from ".";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    variant?: AlertVariants["variant"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert/AlertDescription.vue b/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000..963fce1
--- /dev/null
+++ b/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/alert/AlertTitle.vue b/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000..27ee82a
--- /dev/null
+++ b/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/components/ui/alert/index.ts b/components/ui/alert/index.ts
new file mode 100644
index 0000000..e8b55f0
--- /dev/null
+++ b/components/ui/alert/index.ts
@@ -0,0 +1,25 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+
+export const alertVariants = cva(
+    "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",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+                warning:
+                    "border-warning/50 text-warning dark:border-warning [&>svg]:text-warning",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
diff --git a/components/ui/aspect-ratio/AspectRatio.vue b/components/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 0000000..f5bc40d
--- /dev/null
+++ b/components/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from "radix-vue";
+
+const props = defineProps<AspectRatioProps>();
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>
diff --git a/components/ui/aspect-ratio/index.ts b/components/ui/aspect-ratio/index.ts
new file mode 100644
index 0000000..a4976a3
--- /dev/null
+++ b/components/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.vue";
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
new file mode 100644
index 0000000..d4af2fd
--- /dev/null
+++ b/components/ui/avatar/Avatar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { AvatarRoot } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { type AvatarVariants, avatarVariant } from ".";
+
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes["class"];
+        size?: AvatarVariants["size"];
+        shape?: AvatarVariants["shape"];
+    }>(),
+    {
+        size: "sm",
+        shape: "circle",
+    },
+);
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..a520940
--- /dev/null
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from "radix-vue";
+
+const props = defineProps<AvatarFallbackProps>();
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 0000000..183321f
--- /dev/null
+++ b/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from "radix-vue";
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
new file mode 100644
index 0000000..a36e05a
--- /dev/null
+++ b/components/ui/avatar/index.ts
@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
+
+export const avatarVariant = cva(
+    "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
+    {
+        variants: {
+            size: {
+                sm: "h-10 w-10 text-xs",
+                base: "h-16 w-16 text-2xl",
+                lg: "h-32 w-32 text-5xl",
+            },
+            shape: {
+                circle: "rounded-full",
+                square: "rounded-md",
+            },
+        },
+    },
+);
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>;
diff --git a/components/ui/badge/Badge.vue b/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..7ebb774
--- /dev/null
+++ b/components/ui/badge/Badge.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { type BadgeVariants, badgeVariants } from ".";
+
+const props = defineProps<{
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/badge/index.ts b/components/ui/badge/index.ts
new file mode 100644
index 0000000..9360340
--- /dev/null
+++ b/components/ui/badge/index.ts
@@ -0,0 +1,25 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Badge } from "./Badge.vue";
+
+export const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive:
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
diff --git a/components/ui/breadcrumb/Breadcrumb.vue b/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..9271e7a
--- /dev/null
+++ b/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..eb57c2b
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { MoreHorizontal } from "lucide-vue-next";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbItem.vue b/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..a5e702a
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbLink.vue b/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..a244330
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { NuxtLink } from "#components";
+
+const props = withDefaults(
+    defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        as: NuxtLink,
+    },
+);
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbList.vue b/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..3a312c2
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbPage.vue b/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..5e42989
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbSeparator.vue b/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..0e3f7fa
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { ChevronRight } from "lucide-vue-next";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/index.ts b/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..e51a7ed
--- /dev/null
+++ b/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
+export { default as BreadcrumbList } from "./BreadcrumbList.vue";
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";
diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
new file mode 100644
index 0000000..3c027e3
--- /dev/null
+++ b/components/ui/button/Button.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { type ButtonVariants, buttonVariants } from ".";
+
+interface Props extends PrimitiveProps {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "button",
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    data-component="button"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
new file mode 100644
index 0000000..5cc151e
--- /dev/null
+++ b/components/ui/button/index.ts
@@ -0,0 +1,34 @@
+import { type VariantProps, cva } from "class-variance-authority";
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground shadow-sm 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 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
new file mode 100644
index 0000000..0f2a235
--- /dev/null
+++ b/components/ui/card/Card.vue
@@ -0,0 +1,28 @@
+<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",
+    },
+);
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+    data-component="card"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..b42eeac
--- /dev/null
+++ b/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/card/CardDescription.vue b/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..c4a4257
--- /dev/null
+++ b/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/components/ui/card/CardFooter.vue b/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..eb7b6cb
--- /dev/null
+++ b/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..8779237
--- /dev/null
+++ b/components/ui/card/CardHeader.vue
@@ -0,0 +1,18 @@
+<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",
+    },
+);
+</script>
+
+<template>
+    <Primitive :as="props.as" :as-child="props.asChild" :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+        <slot />
+    </Primitive>
+</template>
diff --git a/components/ui/card/CardTitle.vue b/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..662f046
--- /dev/null
+++ b/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/components/ui/card/index.ts b/components/ui/card/index.ts
new file mode 100644
index 0000000..313887b
--- /dev/null
+++ b/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
diff --git a/components/ui/carousel/Carousel.vue b/components/ui/carousel/Carousel.vue
new file mode 100644
index 0000000..db9348b
--- /dev/null
+++ b/components/ui/carousel/Carousel.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type {
+    CarouselEmits,
+    CarouselProps,
+    WithClassAsProps,
+} from "./interface";
+import { useProvideCarousel } from "./useCarousel";
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+    orientation: "horizontal",
+});
+
+const emits = defineEmits<CarouselEmits>();
+
+const {
+    canScrollNext,
+    canScrollPrev,
+    carouselApi,
+    carouselRef,
+    orientation,
+    scrollNext,
+    scrollPrev,
+} = useProvideCarousel(props, emits);
+
+defineExpose({
+    canScrollNext,
+    canScrollPrev,
+    carouselApi,
+    carouselRef,
+    orientation,
+    scrollNext,
+    scrollPrev,
+});
+
+function onKeyDown(event: KeyboardEvent) {
+    const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+    const nextKey =
+        props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+
+    if (event.key === prevKey) {
+        event.preventDefault();
+        scrollPrev();
+
+        return;
+    }
+
+    if (event.key === nextKey) {
+        event.preventDefault();
+        scrollNext();
+    }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>
diff --git a/components/ui/carousel/CarouselContent.vue b/components/ui/carousel/CarouselContent.vue
new file mode 100644
index 0000000..d7391ac
--- /dev/null
+++ b/components/ui/carousel/CarouselContent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { WithClassAsProps } from "./interface";
+import { useCarousel } from "./useCarousel";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<WithClassAsProps>();
+
+const { carouselRef, orientation } = useCarousel();
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/components/ui/carousel/CarouselItem.vue b/components/ui/carousel/CarouselItem.vue
new file mode 100644
index 0000000..426b71e
--- /dev/null
+++ b/components/ui/carousel/CarouselItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { WithClassAsProps } from "./interface";
+import { useCarousel } from "./useCarousel";
+
+const props = defineProps<WithClassAsProps>();
+
+const { orientation } = useCarousel();
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/carousel/CarouselNext.vue b/components/ui/carousel/CarouselNext.vue
new file mode 100644
index 0000000..9abbeee
--- /dev/null
+++ b/components/ui/carousel/CarouselNext.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ArrowRight } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import type { WithClassAsProps } from "./interface";
+import { useCarousel } from "./useCarousel";
+
+const props = defineProps<WithClassAsProps>();
+
+const { orientation, canScrollNext, scrollNext } = useCarousel();
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight class="h-4 w-4 text-current" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/components/ui/carousel/CarouselPrevious.vue b/components/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 0000000..53f0b66
--- /dev/null
+++ b/components/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ArrowLeft } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import type { WithClassAsProps } from "./interface";
+import { useCarousel } from "./useCarousel";
+
+const props = defineProps<WithClassAsProps>();
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft class="h-4 w-4 text-current" />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/components/ui/carousel/index.ts b/components/ui/carousel/index.ts
new file mode 100644
index 0000000..3c306c2
--- /dev/null
+++ b/components/ui/carousel/index.ts
@@ -0,0 +1,8 @@
+export { default as Carousel } from "./Carousel.vue";
+export { default as CarouselContent } from "./CarouselContent.vue";
+export { default as CarouselItem } from "./CarouselItem.vue";
+export { default as CarouselNext } from "./CarouselNext.vue";
+export { default as CarouselPrevious } from "./CarouselPrevious.vue";
+export type { UnwrapRefCarouselApi as CarouselApi } from "./interface";
+
+export { useCarousel } from "./useCarousel";
diff --git a/components/ui/carousel/interface.ts b/components/ui/carousel/interface.ts
new file mode 100644
index 0000000..6510f6c
--- /dev/null
+++ b/components/ui/carousel/interface.ts
@@ -0,0 +1,25 @@
+import type useEmblaCarousel from "embla-carousel-vue";
+import type { EmblaCarouselVueType } from "embla-carousel-vue";
+import type { HTMLAttributes, UnwrapRef } from "vue";
+
+type CarouselApi = EmblaCarouselVueType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
+
+export interface CarouselProps {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+}
+
+export type CarouselEmits = (
+    e: "init-api",
+    payload: UnwrapRefCarouselApi,
+) => void;
+
+export interface WithClassAsProps {
+    class?: HTMLAttributes["class"];
+}
diff --git a/components/ui/carousel/useCarousel.ts b/components/ui/carousel/useCarousel.ts
new file mode 100644
index 0000000..cd325e5
--- /dev/null
+++ b/components/ui/carousel/useCarousel.ts
@@ -0,0 +1,69 @@
+import { createInjectionState } from "@vueuse/core";
+import emblaCarouselVue from "embla-carousel-vue";
+import { onMounted, ref } from "vue";
+import type {
+    UnwrapRefCarouselApi as CarouselApi,
+    CarouselEmits,
+    CarouselProps,
+} from "./interface";
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+    ({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+        const [emblaNode, emblaApi] = emblaCarouselVue(
+            {
+                ...opts,
+                axis: orientation === "horizontal" ? "x" : "y",
+            },
+            plugins,
+        );
+
+        function scrollPrev() {
+            emblaApi.value?.scrollPrev();
+        }
+        function scrollNext() {
+            emblaApi.value?.scrollNext();
+        }
+
+        const canScrollNext = ref(false);
+        const canScrollPrev = ref(false);
+
+        function onSelect(api: CarouselApi) {
+            canScrollNext.value = !!api?.canScrollNext();
+            canScrollPrev.value = !!api?.canScrollPrev();
+        }
+
+        onMounted(() => {
+            if (!emblaApi.value) {
+                return;
+            }
+
+            emblaApi.value?.on("init", onSelect);
+            emblaApi.value?.on("reInit", onSelect);
+            emblaApi.value?.on("select", onSelect);
+
+            emits("init-api", emblaApi.value);
+        });
+
+        return {
+            carouselRef: emblaNode,
+            carouselApi: emblaApi,
+            canScrollPrev,
+            canScrollNext,
+            scrollPrev,
+            scrollNext,
+            orientation,
+        };
+    },
+);
+
+function useCarousel() {
+    const carouselState = useInjectCarousel();
+
+    if (!carouselState) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+
+    return carouselState;
+}
+
+export { useCarousel, useProvideCarousel };
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
new file mode 100644
index 0000000..0b9ba46
--- /dev/null
+++ b/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,39 @@
+<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 HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    CheckboxRootProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/components/ui/checkbox/index.ts b/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..75be342
--- /dev/null
+++ b/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue";
diff --git a/components/ui/collapsible/Collapsible.vue b/components/ui/collapsible/Collapsible.vue
new file mode 100644
index 0000000..c39dae0
--- /dev/null
+++ b/components/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";
+import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/components/ui/collapsible/CollapsibleContent.vue b/components/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..42d722d
--- /dev/null
+++ b/components/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from "radix-vue";
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/components/ui/collapsible/CollapsibleTrigger.vue b/components/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..baf5fe9
--- /dev/null
+++ b/components/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from "radix-vue";
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/components/ui/collapsible/index.ts b/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..289bdbb
--- /dev/null
+++ b/components/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
diff --git a/components/ui/dialog/Dialog.vue b/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..ce65a77
--- /dev/null
+++ b/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    DialogRoot,
+    type DialogRootEmits,
+    type DialogRootProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/components/ui/dialog/DialogClose.vue b/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..bc3b70a
--- /dev/null
+++ b/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "radix-vue";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/components/ui/dialog/DialogContent.vue b/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..1286073
--- /dev/null
+++ b/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { X } from "lucide-vue-next";
+import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogContentProps & {
+        class?: HTMLAttributes["class"];
+        hideClose?: boolean;
+    }
+>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="!props.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="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/components/ui/dialog/DialogDescription.vue b/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..f9c6516
--- /dev/null
+++ b/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DialogDescription,
+    type DialogDescriptionProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogDescriptionProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/components/ui/dialog/DialogFooter.vue b/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..eba856f
--- /dev/null
+++ b/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 gap-y-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/dialog/DialogHeader.vue b/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..5a6e6f0
--- /dev/null
+++ b/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/dialog/DialogScrollContent.vue b/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..24699f8
--- /dev/null
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { X } from "lucide-vue-next";
+import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="size-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/components/ui/dialog/DialogTitle.vue b/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..7c8d52e
--- /dev/null
+++ b/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogTitleProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/components/ui/dialog/DialogTrigger.vue b/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..7872f1c
--- /dev/null
+++ b/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/components/ui/dialog/index.ts b/components/ui/dialog/index.ts
new file mode 100644
index 0000000..e2b3a15
--- /dev/null
+++ b/components/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogScrollContent } from "./DialogScrollContent.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";
diff --git a/components/ui/drawer/Drawer.vue b/components/ui/drawer/Drawer.vue
new file mode 100644
index 0000000..4a85187
--- /dev/null
+++ b/components/ui/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useForwardPropsEmits } from "radix-vue";
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+import { DrawerRoot } from "vaul-vue";
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+    shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/components/ui/drawer/DrawerContent.vue b/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 0000000..bea29b9
--- /dev/null
+++ b/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { DialogContentEmits, DialogContentProps } from "radix-vue";
+import { useForwardPropsEmits } from "radix-vue";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import type { HtmlHTMLAttributes } from "vue";
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+const props = defineProps<
+    DialogContentProps & { class?: HtmlHTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/components/ui/drawer/DrawerDescription.vue b/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 0000000..191dedd
--- /dev/null
+++ b/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { DrawerDescriptionProps } from "vaul-vue";
+import { DrawerDescription } from "vaul-vue";
+import { type HtmlHTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DrawerDescriptionProps & { class?: HtmlHTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/components/ui/drawer/DrawerFooter.vue b/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 0000000..c744209
--- /dev/null
+++ b/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HtmlHTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/drawer/DrawerHeader.vue b/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 0000000..c260400
--- /dev/null
+++ b/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HtmlHTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/drawer/DrawerOverlay.vue b/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 0000000..3ff11d1
--- /dev/null
+++ b/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { DialogOverlayProps } from "radix-vue";
+import { DrawerOverlay } from "vaul-vue";
+import { type HtmlHTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogOverlayProps & { class?: HtmlHTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/components/ui/drawer/DrawerTitle.vue b/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 0000000..823d158
--- /dev/null
+++ b/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { DrawerTitleProps } from "vaul-vue";
+import { DrawerTitle } from "vaul-vue";
+import { type HtmlHTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DrawerTitleProps & { class?: HtmlHTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/components/ui/drawer/index.ts b/components/ui/drawer/index.ts
new file mode 100644
index 0000000..0677d32
--- /dev/null
+++ b/components/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue";
diff --git a/components/ui/dropdown-menu/DropdownMenu.vue b/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..031ea14
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    DropdownMenuRoot,
+    type DropdownMenuRootEmits,
+    type DropdownMenuRootProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..58a7df0
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
+import {
+    DropdownMenuCheckboxItem,
+    type DropdownMenuCheckboxItemEmits,
+    type DropdownMenuCheckboxItemProps,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuContent.vue b/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..b5a0f8b
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DropdownMenuContent,
+    type DropdownMenuContentEmits,
+    type DropdownMenuContentProps,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = withDefaults(
+    defineProps<
+        DropdownMenuContentProps & { class?: HTMLAttributes["class"] }
+    >(),
+    {
+        sideOffset: 4,
+    },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuGroup.vue b/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..b1af9b7
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue";
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuItem.vue b/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..294ff09
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DropdownMenuItem,
+    type DropdownMenuItemProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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 w-full',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuLabel.vue b/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..4aae19f
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DropdownMenuLabel,
+    type DropdownMenuLabelProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuLabelProps & {
+        class?: HTMLAttributes["class"];
+        inset?: boolean;
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..bf765f4
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    DropdownMenuRadioGroup,
+    type DropdownMenuRadioGroupEmits,
+    type DropdownMenuRadioGroupProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..38f2106
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Circle } from "lucide-vue-next";
+import {
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    type DropdownMenuRadioItemEmits,
+    type DropdownMenuRadioItemProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }
+>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+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="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
new file mode 100644
index 0000000..d34e0cd
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DropdownMenuSeparator,
+    type DropdownMenuSeparatorProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuSeparatorProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..774d4de
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSub.vue b/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..ab75de7
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    DropdownMenuSub,
+    type DropdownMenuSubEmits,
+    type DropdownMenuSubProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..005133c
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    DropdownMenuSubContent,
+    type DropdownMenuSubContentEmits,
+    type DropdownMenuSubContentProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..f84be2b
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronRight } from "lucide-vue-next";
+import {
+    DropdownMenuSubTrigger,
+    type DropdownMenuSubTriggerProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <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
new file mode 100644
index 0000000..4eb062c
--- /dev/null
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {
+    DropdownMenuTrigger,
+    type DropdownMenuTriggerProps,
+    useForwardProps,
+} from "radix-vue";
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/components/ui/dropdown-menu/index.ts b/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..40938d7
--- /dev/null
+++ b/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+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";
diff --git a/components/ui/form/FormControl.vue b/components/ui/form/FormControl.vue
new file mode 100644
index 0000000..39ceec8
--- /dev/null
+++ b/components/ui/form/FormControl.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from "radix-vue";
+import { useFormField } from "./useFormField";
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/components/ui/form/FormDescription.vue b/components/ui/form/FormDescription.vue
new file mode 100644
index 0000000..5bf2b09
--- /dev/null
+++ b/components/ui/form/FormDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { useFormField } from "./useFormField";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+
+const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/components/ui/form/FormItem.vue b/components/ui/form/FormItem.vue
new file mode 100644
index 0000000..75f7dd5
--- /dev/null
+++ b/components/ui/form/FormItem.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps, useId } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            class?: HTMLAttributes["class"];
+        }
+    >(),
+    {
+        as: "div",
+    },
+);
+
+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>
+</template>
diff --git a/components/ui/form/FormLabel.vue b/components/ui/form/FormLabel.vue
new file mode 100644
index 0000000..4da9c2c
--- /dev/null
+++ b/components/ui/form/FormLabel.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import type { LabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { Label } from "~/components/ui/label";
+import { useFormField } from "./useFormField";
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
+
+const { error, formItemId } = useFormField();
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/components/ui/form/FormMessage.vue b/components/ui/form/FormMessage.vue
new file mode 100644
index 0000000..2377e43
--- /dev/null
+++ b/components/ui/form/FormMessage.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from "vee-validate";
+import { toValue } from "vue";
+import { useFormField } from "./useFormField";
+
+const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm font-medium text-destructive"
+  />
+</template>
diff --git a/components/ui/form/index.ts b/components/ui/form/index.ts
new file mode 100644
index 0000000..ff08c0b
--- /dev/null
+++ b/components/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from "./FormControl.vue";
+export { default as FormDescription } from "./FormDescription.vue";
+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";
diff --git a/components/ui/form/injectionKeys.ts b/components/ui/form/injectionKeys.ts
new file mode 100644
index 0000000..bb97756
--- /dev/null
+++ b/components/ui/form/injectionKeys.ts
@@ -0,0 +1,3 @@
+import type { InjectionKey } from "vue";
+
+export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
diff --git a/components/ui/form/useFormField.ts b/components/ui/form/useFormField.ts
new file mode 100644
index 0000000..fe33234
--- /dev/null
+++ b/components/ui/form/useFormField.ts
@@ -0,0 +1,37 @@
+import {
+    FieldContextKey,
+    useFieldError,
+    useIsFieldDirty,
+    useIsFieldTouched,
+    useIsFieldValid,
+} from "vee-validate";
+import { inject } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+
+export function useFormField() {
+    const fieldContext = inject(FieldContextKey);
+    const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+
+    const { name } = fieldContext;
+    const id = fieldItemContext;
+
+    const fieldState = {
+        valid: useIsFieldValid(name),
+        isDirty: useIsFieldDirty(name),
+        isTouched: useIsFieldTouched(name),
+        error: useFieldError(name),
+    };
+
+    return {
+        id,
+        name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+}
diff --git a/components/ui/hover-card/HoverCard.vue b/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 0000000..cebfe02
--- /dev/null
+++ b/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    HoverCardRoot,
+    type HoverCardRootEmits,
+    type HoverCardRootProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/components/ui/hover-card/HoverCardContent.vue b/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000..141cf82
--- /dev/null
+++ b/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    HoverCardContent,
+    type HoverCardContentProps,
+    HoverCardPortal,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = withDefaults(
+    defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        sideOffset: 4,
+    },
+);
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/components/ui/hover-card/HoverCardTrigger.vue b/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000..e7248ae
--- /dev/null
+++ b/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from "radix-vue";
+
+const props = defineProps<HoverCardTriggerProps>();
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/components/ui/hover-card/index.ts b/components/ui/hover-card/index.ts
new file mode 100644
index 0000000..b16bbcf
--- /dev/null
+++ b/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue";
+export { default as HoverCardContent } from "./HoverCardContent.vue";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue";
diff --git a/components/ui/input/Input.vue b/components/ui/input/Input.vue
new file mode 100644
index 0000000..f60a214
--- /dev/null
+++ b/components/ui/input/Input.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { useVModel } from "@vueuse/core";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes["class"];
+}>();
+
+const emits =
+    defineEmits<(e: "update:modelValue", payload: string | number) => void>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <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: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)">
+</template>
diff --git a/components/ui/input/index.ts b/components/ui/input/index.ts
new file mode 100644
index 0000000..110f046
--- /dev/null
+++ b/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";
diff --git a/components/ui/label/Label.vue b/components/ui/label/Label.vue
new file mode 100644
index 0000000..14d5840
--- /dev/null
+++ b/components/ui/label/Label.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Label, type LabelProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/components/ui/label/index.ts b/components/ui/label/index.ts
new file mode 100644
index 0000000..38eaa35
--- /dev/null
+++ b/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue";
diff --git a/components/ui/popover/Popover.vue b/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..5a3f344
--- /dev/null
+++ b/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";
+import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/components/ui/popover/PopoverContent.vue b/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..165f002
--- /dev/null
+++ b/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    PopoverContent,
+    type PopoverContentEmits,
+    type PopoverContentProps,
+    PopoverPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        align: "center",
+        sideOffset: 4,
+    },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/components/ui/popover/PopoverTrigger.vue b/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..a824de9
--- /dev/null
+++ b/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue";
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/components/ui/popover/index.ts b/components/ui/popover/index.ts
new file mode 100644
index 0000000..b3e258f
--- /dev/null
+++ b/components/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 0000000..dd1fc56
--- /dev/null
+++ b/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "radix-vue";
+import { SelectRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..8c299dc
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        position: "popper",
+    },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..2ffe8f4
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectGroup, type SelectGroupProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectGroupProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..e94456b
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
+import {
+    SelectItem,
+    SelectItemIndicator,
+    type SelectItemProps,
+    SelectItemText,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectItemProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-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>
+
+    <SelectItemText class="w-full">
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..e2719b8
--- /dev/null
+++ b/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from "radix-vue";
+
+const props = defineProps<SelectItemTextProps>();
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..ab4df03
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<
+    SelectLabelProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..79a0903
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectScrollDownButton,
+    type SelectScrollDownButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..6e10c7d
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronUp } from "lucide-vue-next";
+import {
+    SelectScrollUpButton,
+    type SelectScrollUpButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..81d657d
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectSeparatorProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..bb1f615
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectIcon,
+    SelectTrigger,
+    type SelectTriggerProps,
+    useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SelectTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..61bd93e
--- /dev/null
+++ b/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from "radix-vue";
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/components/ui/select/index.ts b/components/ui/select/index.ts
new file mode 100644
index 0000000..d911c4e
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectItemText } from "./SelectItemText.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";
diff --git a/components/ui/separator/Separator.vue b/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..1c818b8
--- /dev/null
+++ b/components/ui/separator/Separator.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Separator, type SeparatorProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SeparatorProps & { class?: HTMLAttributes["class"]; label?: string }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/components/ui/separator/index.ts b/components/ui/separator/index.ts
new file mode 100644
index 0000000..aae7f1a
--- /dev/null
+++ b/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";
diff --git a/components/ui/sheet/Sheet.vue b/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..ce65a77
--- /dev/null
+++ b/components/ui/sheet/Sheet.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    DialogRoot,
+    type DialogRootEmits,
+    type DialogRootProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/components/ui/sheet/SheetClose.vue b/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..bc3b70a
--- /dev/null
+++ b/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "radix-vue";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/components/ui/sheet/SheetContent.vue b/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..32791bb
--- /dev/null
+++ b/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { X } from "lucide-vue-next";
+import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { type SheetVariants, sheetVariants } from ".";
+
+interface SheetContentProps extends DialogContentProps {
+    class?: HTMLAttributes["class"];
+    side?: SheetVariants["side"];
+}
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<SheetContentProps>();
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, side, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="size-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/components/ui/sheet/SheetDescription.vue b/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..c77cdf3
--- /dev/null
+++ b/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { DialogDescription, type DialogDescriptionProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogDescriptionProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/components/ui/sheet/SheetFooter.vue b/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..a3af5f8
--- /dev/null
+++ b/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetHeader.vue b/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..1e6ef1f
--- /dev/null
+++ b/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetTitle.vue b/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..dc7c865
--- /dev/null
+++ b/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { DialogTitle, type DialogTitleProps } from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    DialogTitleProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/components/ui/sheet/SheetTrigger.vue b/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..7872f1c
--- /dev/null
+++ b/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/components/ui/sheet/index.ts b/components/ui/sheet/index.ts
new file mode 100644
index 0000000..dec8c1f
--- /dev/null
+++ b/components/ui/sheet/index.ts
@@ -0,0 +1,29 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
+
+export const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/components/ui/sidebar/Sidebar.vue b/components/ui/sidebar/Sidebar.vue
new file mode 100644
index 0000000..d5ecc9d
--- /dev/null
+++ b/components/ui/sidebar/Sidebar.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import Sheet from "~/components/ui/sheet/Sheet.vue";
+import SheetContent from "~/components/ui/sheet/SheetContent.vue";
+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 { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+  <aside
+    v-if="collapsible === 'none'"
+    :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
+    v-bind="$attrs"
+    data-component="sidebar"
+  >
+    <slot />
+  </aside>
+
+  <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,
+      }"
+      as="aside"
+    >
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <aside
+    v-else class="group peer hidden md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+    data-component="sidebar"
+  >
+    <!-- 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 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>
+  </aside>
+</template>
diff --git a/components/ui/sidebar/SidebarContent.vue b/components/ui/sidebar/SidebarContent.vue
new file mode 100644
index 0000000..5295678
--- /dev/null
+++ b/components/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarFooter.vue b/components/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..232eb58
--- /dev/null
+++ b/components/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarGroup.vue b/components/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..2e72119
--- /dev/null
+++ b/components/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarGroupAction.vue b/components/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..01a816f
--- /dev/null
+++ b/components/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { PrimitiveProps } from "radix-vue";
+import { Primitive } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<
+    PrimitiveProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :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,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/sidebar/SidebarGroupContent.vue b/components/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..07a56a2
--- /dev/null
+++ b/components/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarGroupLabel.vue b/components/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..18663f9
--- /dev/null
+++ b/components/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { PrimitiveProps } from "radix-vue";
+import { Primitive } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<
+    PrimitiveProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/sidebar/SidebarHeader.vue b/components/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..7f1e0ba
--- /dev/null
+++ b/components/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarInput.vue b/components/ui/sidebar/SidebarInput.vue
new file mode 100644
index 0000000..a87c75a
--- /dev/null
+++ b/components/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import Input from "~/components/ui/input/Input.vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Input
+    data-sidebar="input"
+    :class="cn(
+      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/components/ui/sidebar/SidebarInset.vue b/components/ui/sidebar/SidebarInset.vue
new file mode 100644
index 0000000..11da692
--- /dev/null
+++ b/components/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,30 @@
+<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 backgroundImage = useSetting(SettingIds.BackgroundURL);
+
+const canParseUrl = URL.canParse;
+</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',
+        props.class,
+    )" :style="{
+        backgroundImage: canParseUrl(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
+        backgroundSize: canParseUrl(backgroundImage.value as string) ? 'cover' : undefined,
+        backgroundPosition: canParseUrl(backgroundImage.value as string) ? 'center' : undefined,
+        backgroundRepeat: canParseUrl(backgroundImage.value as string) ? 'no-repeat' : undefined,
+    }">
+        <!-- Overlay for the background image -->
+        <div v-if="canParseUrl(backgroundImage.value as string)" class="absolute -z-10 inset-0 bg-black/20" />
+        <slot />
+    </main>
+</template>
diff --git a/components/ui/sidebar/SidebarMenu.vue b/components/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..f097a80
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuAction.vue b/components/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..cd32f75
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,39 @@
+<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 & {
+            showOnHover?: boolean;
+            class?: HTMLAttributes["class"];
+        }
+    >(),
+    {
+        as: "button",
+    },
+);
+</script>
+
+<template>
+  <Primitive
+    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',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuBadge.vue b/components/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..10235f6
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuButton.vue b/components/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..e2fedcb
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+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";
+import { useSidebar } from "./utils";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<
+        SidebarMenuButtonProps & {
+            tooltip?: string | Component;
+        }
+    >(),
+    {
+        as: "button",
+        variant: "default",
+        size: "default",
+    },
+);
+
+const { isMobile, state } = useSidebar();
+
+const delegatedProps = computed(() => {
+    const { tooltip, ...delegated } = props;
+    return delegated;
+});
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuButtonChild.vue b/components/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..10413d0
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from ".";
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants["variant"];
+    size?: SidebarMenuButtonVariants["size"];
+    isActive?: boolean;
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+    as: "button",
+    variant: "default",
+    size: "default",
+});
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuItem.vue b/components/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..fc2d2d0
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuSkeleton.vue b/components/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..37f8cf0
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { type HTMLAttributes, computed } from "vue";
+import Skeleton from "~/components/ui/skeleton/Skeleton.vue";
+
+const props = defineProps<{
+    showIcon?: boolean;
+    class?: HTMLAttributes["class"];
+}>();
+
+const width = computed(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-skeleton"
+    :class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 flex-1 max-w-[--skeleton-width]"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuSub.vue b/components/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..013e6ec
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuSubButton.vue b/components/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..635cbbc
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { PrimitiveProps } from "radix-vue";
+import { Primitive } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            size?: "sm" | "md";
+            isActive?: boolean;
+            class?: HTMLAttributes["class"];
+        }
+    >(),
+    {
+        as: "a",
+        size: "md",
+    },
+);
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/sidebar/SidebarMenuSubItem.vue b/components/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..b04030b
--- /dev/null
+++ b/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/sidebar/SidebarProvider.vue b/components/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..67bec37
--- /dev/null
+++ b/components/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { TooltipProvider } from "radix-vue";
+import { type HTMLAttributes, type Ref, computed, ref } from "vue";
+import {
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_KEYBOARD_SHORTCUT,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON,
+    provideSidebarContext,
+} from "./utils";
+
+const props = withDefaults(
+    defineProps<{
+        defaultOpen?: boolean;
+        open?: boolean;
+        class?: HTMLAttributes["class"];
+    }>(),
+    {
+        defaultOpen: true,
+        open: undefined,
+    },
+);
+
+const emits = defineEmits<{
+    "update:open": [open: boolean];
+}>();
+
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
+
+const open = useVModel(props, "open", emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+    open.value = value; // emits('update:open', value)
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+    openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+    return isMobile.value
+        ? setOpenMobile(!openMobile.value)
+        : setOpen(!open.value);
+}
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+    if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+    ) {
+        event.preventDefault();
+        toggleSidebar();
+    }
+});
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? "expanded" : "collapsed"));
+
+provideSidebarContext({
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+});
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--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)"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/components/ui/sidebar/SidebarRail.vue b/components/ui/sidebar/SidebarRail.vue
new file mode 100644
index 0000000..617bfc5
--- /dev/null
+++ b/components/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/components/ui/sidebar/SidebarSeparator.vue b/components/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..c32edc2
--- /dev/null
+++ b/components/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import Separator from "~/components/ui/separator/Separator.vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Separator
+    data-sidebar="separator"
+    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/components/ui/sidebar/SidebarTrigger.vue b/components/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..cf93cdf
--- /dev/null
+++ b/components/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+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<{
+    class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..30fa19a
--- /dev/null
+++ b/components/ui/sidebar/index.ts
@@ -0,0 +1,54 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarRail } from "./SidebarRail.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
+
+export { useSidebar } from "./utils";
+
+export const sidebarMenuButtonVariants = cva(
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default:
+                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                outline:
+                    "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",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export type SidebarMenuButtonVariants = VariantProps<
+    typeof sidebarMenuButtonVariants
+>;
diff --git a/components/ui/sidebar/utils.ts b/components/ui/sidebar/utils.ts
new file mode 100644
index 0000000..7ca0669
--- /dev/null
+++ b/components/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import { createContext } from "radix-vue";
+import type { ComputedRef, Ref } from "vue";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+    state: ComputedRef<"expanded" | "collapsed">;
+    open: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+    isMobile: Ref<boolean>;
+    openMobile: Ref<boolean>;
+    setOpenMobile: (value: boolean) => void;
+    toggleSidebar: () => void;
+}>("Sidebar");
diff --git a/components/ui/skeleton/Skeleton.vue b/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 0000000..a439d32
--- /dev/null
+++ b/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+interface SkeletonProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>
diff --git a/components/ui/skeleton/index.ts b/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..72cb1d9
--- /dev/null
+++ b/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";
diff --git a/components/ui/sonner/Sonner.vue b/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..d961d9d
--- /dev/null
+++ b/components/ui/sonner/Sonner.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from "vue-sonner";
+
+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'" />
+</template>
diff --git a/components/ui/sonner/index.ts b/components/ui/sonner/index.ts
new file mode 100644
index 0000000..39a59dd
--- /dev/null
+++ b/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue";
diff --git a/components/ui/switch/Switch.vue b/components/ui/switch/Switch.vue
new file mode 100644
index 0000000..ce5b9af
--- /dev/null
+++ b/components/ui/switch/Switch.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    SwitchRoot,
+    type SwitchRootEmits,
+    type SwitchRootProps,
+    SwitchThumb,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+const props = defineProps<
+    SwitchRootProps & { class?: HTMLAttributes["class"] }
+>();
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/components/ui/switch/index.ts b/components/ui/switch/index.ts
new file mode 100644
index 0000000..c986f8a
--- /dev/null
+++ b/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue";
diff --git a/components/ui/textarea/Textarea.vue b/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..13a21af
--- /dev/null
+++ b/components/ui/textarea/Textarea.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { useVModel } from "@vueuse/core";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    defaultValue?: string | number;
+    modelValue?: string | number;
+}>();
+
+const emits =
+    defineEmits<(e: "update:modelValue", payload: string | number) => void>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/components/ui/textarea/index.ts b/components/ui/textarea/index.ts
new file mode 100644
index 0000000..178d08c
--- /dev/null
+++ b/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue";
diff --git a/components/ui/toggle/Toggle.vue b/components/ui/toggle/Toggle.vue
new file mode 100644
index 0000000..b7e1602
--- /dev/null
+++ b/components/ui/toggle/Toggle.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    Toggle,
+    type ToggleEmits,
+    type ToggleProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { type ToggleVariants, toggleVariants } from ".";
+
+const props = withDefaults(
+    defineProps<
+        ToggleProps & {
+            class?: HTMLAttributes["class"];
+            variant?: ToggleVariants["variant"];
+            size?: ToggleVariants["size"];
+        }
+    >(),
+    {
+        variant: "default",
+        size: "default",
+        disabled: false,
+    },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, size, variant, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <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
new file mode 100644
index 0000000..bfff238
--- /dev/null
+++ b/components/ui/toggle/index.ts
@@ -0,0 +1,27 @@
+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",
+    {
+        variants: {
+            variant: {
+                default: "bg-transparent",
+                outline:
+                    "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",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..b6bdadf
--- /dev/null
+++ b/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    TooltipRoot,
+    type TooltipRootEmits,
+    type TooltipRootProps,
+    useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..d39c48b
--- /dev/null
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    TooltipContent,
+    type TooltipContentEmits,
+    type TooltipContentProps,
+    TooltipPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        sideOffset: 4,
+    },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..0293593
--- /dev/null
+++ b/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from "radix-vue";
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..c6e1c6f
--- /dev/null
+++ b/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue";
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/components/ui/tooltip/index.ts b/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..0a8a878
--- /dev/null
+++ b/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
diff --git a/composables/AccountAcct.ts b/composables/AccountAcct.ts
new file mode 100644
index 0000000..4863c21
--- /dev/null
+++ b/composables/AccountAcct.ts
@@ -0,0 +1,19 @@
+import type { Client } from "@versia/client";
+import type { Account } from "@versia/client/types";
+
+export const useAccountFromAcct = (
+    client: MaybeRef<Client | null>,
+    acct: string,
+): { account: Ref<Account | null>; isLoading: Ref<boolean> } => {
+    const output = ref(null as Account | null);
+    const isLoading = ref(true);
+
+    ref(client)
+        .value?.lookupAccount(acct)
+        .then((res) => {
+            isLoading.value = false;
+            output.value = res.data;
+        });
+
+    return { account: output, isLoading };
+};
diff --git a/composables/CacheRefresh.ts b/composables/CacheRefresh.ts
index 94d0188..eae9056 100644
--- a/composables/CacheRefresh.ts
+++ b/composables/CacheRefresh.ts
@@ -1,11 +1,9 @@
 import type { Client } from "@versia/client";
 import type { RolePermission } from "@versia/client/types";
+import { toast } from "vue-sonner";
+import * as m from "~/paraglide/messages.js";
 
 export const useCacheRefresh = (client: MaybeRef<Client | null>) => {
-    if (import.meta.server) {
-        return;
-    }
-
     // Refresh custom emojis and instance data and me on every reload
     watch(
         [identity, client],
@@ -25,11 +23,8 @@ export const useCacheRefresh = (client: MaybeRef<Client | null>) => {
                         if (code === 401) {
                             // Reset tokenData
                             identity.value = null;
-                            useEvent("notification:new", {
-                                type: "error",
-                                title: "Your session has expired",
-                                description:
-                                    "You have been logged out. Please log in again.",
+                            toast.error(m.fancy_this_wasp_renew(), {
+                                description: m.real_weird_deer_stop(),
                             });
                         }
                     });
@@ -67,6 +62,6 @@ export const useCacheRefresh = (client: MaybeRef<Client | null>) => {
                     }
                 });
         },
-        { flush: "sync" },
+        { flush: "sync", immediate: true },
     );
 };
diff --git a/composables/Client.ts b/composables/Client.ts
index f0d3aae..2bb8761 100644
--- a/composables/Client.ts
+++ b/composables/Client.ts
@@ -1,4 +1,5 @@
 import { Client, type Token } from "@versia/client";
+import { toast } from "vue-sonner";
 
 export const useClient = (
     customToken: MaybeRef<Token | null> = null,
@@ -11,13 +12,10 @@ export const useClient = (
                     identity.value?.tokens.access_token ??
                     undefined,
                 (error) => {
-                    useEvent("notification:new", {
-                        title: "An error occured",
-                        type: "error",
-                        description:
-                            error.response.data.error ??
+                    toast.error(
+                        error.response.data.error ??
                             "No error message provided",
-                    });
+                    );
                 },
             ),
     );
diff --git a/composables/EventBus.ts b/composables/EventBus.ts
index c329039..5b3030f 100644
--- a/composables/EventBus.ts
+++ b/composables/EventBus.ts
@@ -1,12 +1,7 @@
-import type { createToaster } from "@ark-ui/vue";
 import type { Account, Attachment, Status } from "@versia/client/types";
 import mitt from "mitt";
 import type { Identity } from "./Identities";
 
-export type NotificationEvent = Parameters<
-    ReturnType<typeof createToaster>["create"]
->[0];
-
 type ApplicationEvents = {
     "note:reply": Status;
     "note:delete": Status;
@@ -26,7 +21,6 @@ type ApplicationEvents = {
     "composer:close": undefined;
     "account:report": Account;
     "account:update": Account;
-    "notification:new": NotificationEvent;
     "attachment:view": Attachment;
     "identity:change": Identity;
     error: {
diff --git a/composables/GlobalTimeline.ts b/composables/GlobalTimeline.ts
new file mode 100644
index 0000000..67f1f50
--- /dev/null
+++ b/composables/GlobalTimeline.ts
@@ -0,0 +1,14 @@
+import type { Client } from "@versia/client";
+import type { Status } from "@versia/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
+
+export function useGlobalTimeline(
+    client: Client,
+    options: Partial<TimelineOptions<Status>> = {},
+) {
+    return useTimeline(client, {
+        // TODO: Implement global timeline in client sdk
+        fetchFunction: (client, opts) => client.getPublicTimeline(opts),
+        ...options,
+    });
+}
diff --git a/composables/Language.ts b/composables/Language.ts
new file mode 100644
index 0000000..7375210
--- /dev/null
+++ b/composables/Language.ts
@@ -0,0 +1,7 @@
+import { SettingIds } from "~/settings";
+
+export const useLanguage = () => {
+    const lang = useSetting(SettingIds.Language);
+
+    return computed(() => lang.value.value as "en" | "fr" | "en-rot" | "en-pt");
+};
diff --git a/composables/NoteData.ts b/composables/NoteData.ts
deleted file mode 100644
index 49295b6..0000000
--- a/composables/NoteData.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { Client } from "@versia/client";
-import type { Status } from "@versia/client/types";
-import { SettingIds, type Settings } from "~/settings";
-
-export const useNoteData = (
-    noteProp: MaybeRef<Status | undefined>,
-    client: Ref<Client>,
-    settings: MaybeRef<Settings>,
-) => {
-    const isReply = computed(() => !!toValue(noteProp)?.in_reply_to_id);
-    const isQuote = computed(() => !!toValue(noteProp)?.quote);
-    const isReblog = computed(
-        () => !isQuote.value && !!toValue(noteProp)?.reblog,
-    );
-    const renderedNote = computed(() =>
-        isReblog.value
-            ? (toValue(noteProp)?.reblog ?? toValue(noteProp))
-            : toValue(noteProp),
-    );
-    const showContentWarning = useSetting(SettingIds.ShowContentWarning);
-    const shouldHide = computed(
-        () =>
-            (renderedNote.value?.sensitive ||
-                !!renderedNote.value?.spoiler_text) &&
-            (showContentWarning.value.value as boolean),
-    );
-    const mentions = useResolveMentions(
-        computed(() => renderedNote.value?.mentions ?? []),
-        client.value,
-    );
-    const content = useParsedContent(
-        computed(() => renderedNote.value?.content ?? ""),
-        computed(() => renderedNote.value?.emojis ?? []),
-        mentions,
-        settings,
-    );
-    const loaded = computed(() => content.value !== null);
-
-    const reblogDisplayName = useParsedContent(
-        toValue(noteProp)?.account.display_name ?? "",
-        toValue(noteProp)?.account.emojis ?? [],
-        undefined,
-        settings,
-    );
-    const reblog = computed(() =>
-        isReblog.value && toValue(noteProp) && !isQuote.value
-            ? {
-                  avatar: toValue(noteProp)?.account.avatar,
-                  acct: toValue(noteProp)?.account.acct,
-              }
-            : null,
-    );
-
-    const url = computed(() =>
-        new URL(
-            `/@${renderedNote.value?.account.acct}/${renderedNote.value?.id}`,
-            window.location.origin,
-        ).toString(),
-    );
-
-    const remove = async () => {
-        const result = await client.value.deleteStatus(
-            renderedNote.value?.id ?? "",
-        );
-
-        if (result?.data) {
-            useEvent("note:delete", result.data);
-        }
-    };
-
-    return {
-        loaded,
-        note: renderedNote,
-        content,
-        isQuote,
-        reblog,
-        reblogDisplayName,
-        shouldHide,
-        isReply,
-        url,
-        remove,
-    };
-};
diff --git a/composables/ParsedContent.ts b/composables/ParsedContent.ts
deleted file mode 100644
index 22025cf..0000000
--- a/composables/ParsedContent.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import type { Account, Emoji } from "@versia/client/types";
-import { renderToString } from "vue/server-renderer";
-import { SettingIds, type Settings } from "~/settings";
-import MentionComponent from "../components/social-elements/notes/mention.vue";
-
-const emojisRegex =
-    /\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u200D(\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?))*/gu;
-const incorrectEmojisRegex = /^[#*0-9©®]$/;
-
-/**
- * Takes in an HTML string, parses emojis and returns a reactive object with the parsed content.
- * @param content String of HTML content to parse
- * @param emojis Array of emojis to parse
- * @returns Reactive object with the parsed content
- */
-export const useParsedContent = (
-    content: MaybeRef<string>,
-    emojis: MaybeRef<Emoji[]>,
-    mentions: MaybeRef<Account[]> = ref([]),
-    settings: MaybeRef<Settings | null> = ref(null),
-): Ref<string | null> => {
-    const result = ref(null as string | null);
-
-    watch(
-        isRef(content)
-            ? isRef(emojis)
-                ? [content, mentions, emojis]
-                : [content, mentions]
-            : mentions,
-        async () => {
-            const contentHtml = document.createElement("div");
-            contentHtml.innerHTML = toValue(content);
-
-            const shouldRenderEmoji =
-                toValue(settings)?.[SettingIds.CustomEmojis].value;
-            const emojiFont = toValue(settings)?.[SettingIds.EmojiTheme].value;
-
-            // Replace emoji shortcodes with images
-            if (shouldRenderEmoji) {
-                contentHtml.innerHTML = contentHtml.innerHTML.replace(
-                    /:([a-zA-Z0-9_-]+):/g,
-                    (match, emoji) => {
-                        const emojiData = toValue(emojis).find(
-                            (e) => e.shortcode === emoji,
-                        );
-                        if (!emojiData) {
-                            return match;
-                        }
-                        const image = document.createElement("img");
-                        image.src = emojiData.url;
-                        image.alt = `:${emoji}:`;
-                        image.title = emojiData.shortcode;
-                        image.className =
-                            "h-[1.6em] mt-[-0.2ex] mx-1 mb-[0.2ex] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
-                        return image.outerHTML;
-                    },
-                );
-            }
-
-            if (emojiFont !== "native") {
-                contentHtml.innerHTML = contentHtml.innerHTML.replace(
-                    emojisRegex,
-                    (match) => {
-                        if (incorrectEmojisRegex.test(match)) {
-                            return match;
-                        }
-
-                        return `<img src="/emojis/${emojiFont}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transi''tion-transform duration-75 ease-in-out">`;
-                    },
-                );
-            }
-
-            // Replace links containing mentions with interactive mentions
-            const links = contentHtml.querySelectorAll("a");
-
-            for (const link of links) {
-                const mention = toValue(mentions).find(
-                    (m) => link.textContent === `@${m.acct}`,
-                );
-                if (!mention) {
-                    continue;
-                }
-
-                const renderedMention = h(MentionComponent);
-                renderedMention.props = {
-                    account: mention,
-                };
-
-                link.outerHTML = await renderToString(renderedMention);
-            }
-
-            result.value = contentHtml.innerHTML;
-        },
-        { immediate: true },
-    );
-
-    return result;
-};
-
-export const useParsedAccount = (
-    account: MaybeRef<Account | undefined | null>,
-    settings: MaybeRef<Settings>,
-) => {
-    const displayName = computed(
-        () =>
-            toValue(account)?.display_name ?? toValue(account)?.username ?? "",
-    );
-    const note = computed(() => toValue(account)?.note ?? "");
-    const fields = computed(() => toValue(account)?.fields ?? []);
-    const emojis = computed(() => toValue(account)?.emojis ?? []);
-
-    const parsedDisplayName = useParsedContent(
-        displayName,
-        emojis,
-        undefined,
-        settings,
-    );
-
-    const parsedNote = useParsedContent(note, emojis, undefined, settings);
-
-    const parsedFields = computed(() =>
-        fields.value.map((field) => ({
-            ...field,
-            name: useParsedContent(field.name, emojis, undefined, settings)
-                .value,
-            value: useParsedContent(field.value, emojis, undefined, settings)
-                .value,
-        })),
-    );
-
-    return {
-        display_name: parsedDisplayName,
-        note: parsedNote,
-        fields: parsedFields,
-    };
-};
diff --git a/composables/Settings.ts b/composables/Settings.ts
index 668b092..24b230a 100644
--- a/composables/Settings.ts
+++ b/composables/Settings.ts
@@ -7,7 +7,7 @@ import {
 } from "~/settings";
 
 const useSettings = () => {
-    return useLocalStorage<Settings>("versia:settings", settingsJson, {
+    return useLocalStorage<Settings>("versia:settings", settingsJson(), {
         serializer: {
             read(raw) {
                 const json = StorageSerializers.object.read(raw);
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..783a39d
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,12 @@
+declare module "#app" {
+    interface PageMeta {
+        breadcrumbs?: () => {
+            text: string;
+            href?: string;
+        }[];
+        requiresAuth?: boolean;
+    }
+}
+
+// It is always important to import/export something when augmenting a type
+export {};
diff --git a/layouts/app.vue b/layouts/app.vue
index 3251da9..e01b7dd 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -1,41 +1,43 @@
 <template>
-    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh" :style="{
-        backgroundImage: canParseURL(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-    }">
-        <SquarePattern v-if="!canParseURL(backgroundImage.value as string)" />
-        <Navigation />
-
-        <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
-            <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto" :element="'main'">
-                <slot />
-            </OverlayScrollbarsComponent>
-            <CollapsibleAside v-if="width > 1280 && identity" direction="right"
-                class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
-                <TimelineScroller>
-                    <Notifications />
-                </TimelineScroller>
-            </CollapsibleAside>
-        </div>
-    </div>
-    <ComposerModal />
-    <AttachmentDialog />
+    <Sidebar>
+        <SquarePattern v-if="!canParseUrl(backgroundImage.value as string)" />
+        <slot v-if="!route.meta.requiresAuth || identity" />
+        <Card v-else class="shadow-none bg-transparent 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>
+    <MobileNavbar />
+    <ComposerDialog />
 </template>
 
 <script setup lang="ts">
-import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-import ComposerModal from "~/components/composer/modal.client.vue";
+import ComposerDialog from "~/components/composer/dialog.vue";
 import SquarePattern from "~/components/graphics/square-pattern.vue";
-import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
-import Navigation from "~/components/sidebars/navigation.vue";
-import AttachmentDialog from "~/components/social-elements/notes/attachment-dialog.vue";
-import Notifications from "~/components/timelines/notifications.vue";
-import TimelineScroller from "~/components/timelines/timeline-scroller.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 { SettingIds } from "~/settings";
-const { width } = useWindowSize();
 
+const appData = useAppData();
+const signInAction = () => signIn(appData);
 const { n } = useMagicKeys();
 const activeElement = useActiveElement();
 const notUsingInput = computed(
@@ -43,15 +45,11 @@ const notUsingInput = computed(
         activeElement.value?.tagName !== "INPUT" &&
         activeElement.value?.tagName !== "TEXTAREA",
 );
+
 const backgroundImage = useSetting(SettingIds.BackgroundURL);
-const canParseURL: (url: string) => boolean = (url) => {
-    try {
-        new URL(url);
-        return true;
-    } catch {
-        return false;
-    }
-};
+const canParseUrl = URL.canParse;
+
+const route = useRoute();
 
 watchEffect(async () => {
     if (n?.value && notUsingInput.value) {
diff --git a/layouts/default.vue b/layouts/default.vue
index 351ed97..6bce066 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,8 @@
 <template>
-    <main class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
-        <Navigation />
-        <slot />
-    </main>
+    <slot />
+    <ComposerDialog />
 </template>
 
 <script lang="ts" setup>
-import Navigation from "~/components/sidebars/navigation.vue";
+import ComposerDialog from "~/components/composer/dialog.vue";
 </script>
\ No newline at end of file
diff --git a/messages/en-pt.json b/messages/en-pt.json
new file mode 100644
index 0000000..a1512fa
--- /dev/null
+++ b/messages/en-pt.json
@@ -0,0 +1,341 @@
+{
+    "$schema": "https://inlang.com/schema/inlang-message-format",
+    "bland_chunky_sparrow_propel": "Helm",
+    "lost_trick_dog_grace": "Public Seas",
+    "crazy_game_parrot_pave": "Local Port",
+    "real_tame_moose_greet": "Global Waters",
+    "that_patchy_mare_snip": "Signal Flags",
+    "patchy_seemly_hound_grace": "Ship's Preferences",
+    "factual_arable_jurgen_endure": "Captain's Ledger",
+    "tough_clean_wolf_gleam": "Ship's Look",
+    "legal_best_tadpole_rise": "Crew Conduct",
+    "novel_trite_sloth_adapt": "Deck Decorations",
+    "safe_green_mink_cook": "Crew Ranks",
+    "short_zippy_felix_kick": "Pirate Server",
+    "top_active_ocelot_cure": "A Pirate Server's Stronghold",
+    "trite_real_sawfish_drum": "Navigation Chart",
+    "close_short_kitten_coax": "More Booty",
+    "salty_aloof_turkey_nudge": "Scribe a message",
+    "quaint_low_felix_pave": "Update Scroll",
+    "sunny_pink_hyena_walk": "Add crew member",
+    "sharp_big_mallard_reap": "Walk the plank",
+    "honest_few_baboon_pop": "Join the crew",
+    "spicy_loved_giraffe_empower": "Crew actions",
+    "cool_dark_tapir_belong": "Copy sailor's name",
+    "yummy_moving_scallop_sail": "Copy treasure map",
+    "sunny_zany_jellyfish_pop": "Copy logbook entry",
+    "ago_new_pelican_drip": "Copy message link",
+    "solid_witty_zebra_walk": "Copy message link (original)",
+    "active_trite_lark_inspire": "Spy from sfar",
+    "spare_wild_mole_intend": "Silence sailor",
+    "misty_soft_sparrow_vent": "Maroon sailor",
+    "slow_chunky_chipmunk_hush": "Hoist the sails",
+    "great_few_jaguar_rise": "File complaint",
+    "flat_nice_worm_dream": "Captured in Ship's Log",
+    "ornate_tidy_coyote_grow": "Silencin' the scallywag...",
+    "empty_smug_raven_bloom": "Marchin' the Sailor to the brig...",
+    "real_every_macaw_wish": "Requestin' a fresh breeze...",
+    "many_cool_fox_love": "Ship refitted",
+    "gross_fancy_platypus_seek": "Set sail",
+    "real_gray_stork_seek": "Captain's log",
+    "teal_helpful_parakeet_hike": "Ship's mates",
+    "aloof_royal_samuel_startle": "Fellow buccaneers",
+    "brief_upper_otter_cuddle": "Abandon course",
+    "weak_bright_larva_grasp": "Waitin' to board",
+    "lazy_major_loris_grasp": "Give chase",
+    "honest_jolly_shell_blend": "This sailor be a Pirate Server master!",
+    "nice_bad_grizzly_coax": "Pirate Server Master",
+    "merry_red_shrimp_bump": "Automated vessel",
+    "sweet_mad_jannes_create": "This ship sails without a living soul.",
+    "many_fair_capybara_imagine": "Track down sailor",
+    "cuddly_even_tern_loop": "Give chase",
+    "soft_bold_ant_attend": "Belay that",
+    "quick_basic_peacock_bubble": "Trackin' down sailor...",
+    "awake_quick_cuckoo_smile": "Sailor tracked",
+    "funny_aloof_swan_loop": "Abandon sailor's course",
+    "cute_polite_oryx_blend": "Abandon course",
+    "big_safe_guppy_mix": "Droppin' Sailor's anchor...",
+    "misty_level_stingray_expand": "Sailor abandoned",
+    "witty_heroic_trout_cry": "Hoisted by yer own hands",
+    "cuddly_such_swallow_hush": "Rename flag",
+    "tense_quick_cod_favor": "Scuttle",
+    "slimy_awful_florian_sail": "Enter new secret code",
+    "teary_antsy_panda_aid": "Adjust",
+    "teary_tame_gull_bless": "Updatin' secret code...",
+    "gaudy_lime_bison_adore": "Secret code updated.",
+    "weary_away_liger_zip": "Removin' deck decoration...",
+    "crisp_whole_canary_tear": "Deck decoration removed.",
+    "mellow_yummy_jannes_cuddle": "Arr ye sure ye want to chase {acct}?",
+    "white_best_dolphin_catch": "Arr ye sure ye want to abandon {acct}?",
+    "bright_late_osprey_renew": "Ship's flag",
+    "great_level_lamb_sway": "Recommended size: Over 1500x500 sea units",
+    "safe_icy_bulldog_quell": "Captain's portrait",
+    "aware_quiet_opossum_catch": "Recommended size: 400x400 sea units",
+    "mild_known_mallard_jolt": "Captain's proclamation",
+    "lime_dry_skunk_loop": "Deck decorations can be used here.",
+    "neat_silly_dog_prosper": "Sailor's name",
+    "petty_plane_tadpole_earn": "Changin' this'll sink all yer map markers.",
+    "next_caring_ladybug_hack": "Ship's tale",
+    "stale_just_anaconda_earn": "Sea shanties and deck decorations be supported.",
+    "aqua_mealy_toucan_pride": "Custom cargo",
+    "front_north_eel_gulp": "Add booty",
+    "gaudy_each_opossum_play": "Mark Vessel as automated",
+    "grassy_acidic_gadfly_cure": "Be this ship sendin' ghost messages?",
+    "dirty_moving_shark_emerge": "Allow Boarding Requests",
+    "bright_fun_mouse_boil": "Ye'll need approval to board.",
+    "red_vivid_cuckoo_spark": "Allow ship discovery",
+    "plain_zany_donkey_dart": "Allow yer ship to be found in the sea charts.",
+    "jolly_noble_sloth_breathe": "Updatein' captain's scroll...",
+    "tough_alive_niklas_promise": "Nochanges, matey",
+    "spry_honest_kestrel_arrive": "Captain's scroll updated",
+    "civil_icy_ant_mend": "Ship's flag must be less than {size} doubloons",
+    "zippy_caring_raven_edit": "Captain's portrait must be less than {size} doubloons",
+    "still_upper_otter_dine": "Sailor's name can only have lowercase letters, numbers, underscores and ship's hooks",
+    "aware_house_dolphin_win": "Must be at least 3 letters long",
+    "weary_fresh_dragonfly_bless": "Must be a proper message in a bottle",
+    "sunny_novel_otter_glow": "Must be at least 3 letters long",
+    "fluffy_soft_wolf_cook": "Message bottle (or sailor's name)",
+    "livid_bright_wallaby_quiz": "Secret passage code",
+    "fuzzy_sea_moth_absorb": "Hoist the colors",
+    "tidy_tidy_cow_cut": "Or continue with yer other flag",
+    "slow_these_kestrel_sail": "Aye",
+    "weary_steep_yak_embrace": "Nay",
+    "cool_slimy_coyote_affirm": "Acceptin' boardin' request...",
+    "busy_awful_mouse_jump": "Boardin' request accepted.",
+    "front_sunny_penguin_flip": "Rejectin' boardin' request...",
+    "green_flat_mayfly_trust": "Boardin' request rejected.",
+    "large_vivid_horse_catch": "Rebroadcast",
+    "top_cute_bison_nudge": "Marchin' sailor to brig...",
+    "main_weary_racoon_peek": "Sailor marooned",
+    "calm_icy_weasel_twirl": "Scuttle log entry",
+    "gray_fun_toucan_slide": "Arr ye sure ye want to scuttle this log entry?",
+    "royal_best_tern_transform": "Scuttle",
+    "new_funny_fox_boil": "Scuttlin' log entry...",
+    "green_tasty_bumblebee_beam": "Log entry scuttled",
+    "many_misty_parakeet_fall": "Log entry actions",
+    "front_lime_grizzly_persist": "Adjust",
+    "wise_crazy_eel_honor": "Copy treasure map",
+    "dizzy_alive_wombat_bump": "Copy logbook entry",
+    "slimy_livid_rabbit_belong": "Copy message link",
+    "inner_pink_mare_renew": "Copy original message link",
+    "calm_fuzzy_thrush_soar": "Spy from afar",
+    "real_green_clownfish_pet": "Scuttle and redraft",
+    "zippy_key_antelope_drop": "Scuttle",
+    "chunky_dry_gull_sing": "File complaint",
+    "bald_vexed_firefox_startle": "Maroon sailor",
+    "clean_yummy_owl_reside": "Tap to capture",
+    "livid_tangy_lionfish_clasp": "Sensitive cargo",
+    "sour_seemly_bird_hike": "This cargo be of sensitive nature",
+    "bald_direct_turtle_win": "Reveal",
+    "known_flaky_cockroach_dash": "Hide",
+    "that_misty_mule_arrive": "Show less booty",
+    "lazy_honest_mammoth_bump": "Show more booty",
+    "dark_spare_goldfish_charm": "{count} marks on the scroll",
+    "drab_tense_turtle_comfort": "Reply with a broadside",
+    "vexed_fluffy_clownfish_dance": "Rescind appreciation",
+    "royal_close_samuel_scold": "Show appreciation",
+    "lime_neat_ox_stab": "Unbroadcast",
+    "aware_helpful_marlin_drop": "Broadcast",
+    "true_shy_jackal_drip": "Quote the scroll",
+    "busy_merry_cowfish_absorb": "Actions",
+    "slimy_least_ray_aid": "Appreciate log entry",
+    "stale_new_ray_jolt": "Arr ye sure ye want to appreciate this log entry?",
+    "slimy_candid_tiger_read": "Appreciatin' log entry...",
+    "mealy_slow_buzzard_commend": "Log entry appreciated",
+    "odd_strong_halibut_prosper": "Rescind log entry appreciation",
+    "slow_blue_parrot_savor": "Arr ye sure ye want to rescind appreciation?",
+    "busy_active_leopard_strive": "Rescinding appreciation...",
+    "fresh_direct_bear_affirm": "Log entry appreciation rescinded",
+    "best_mellow_llama_surge": "Broadcast log entry",
+    "salty_plain_mallard_gaze": "Arr ye sure ye want to broadcast this log entry?",
+    "late_sunny_cobra_scold": "Broadcastin' log entry...",
+    "weird_moving_hawk_lift": "Log entry broadcasted",
+    "main_fancy_octopus_loop": "Unbroadcast log entry",
+    "odd_alive_swan_express": "Arr ye sure ye want to unbroadcast?",
+    "white_sharp_gorilla_embrace": "Unbroadcastin' log entry...",
+    "royal_polite_moose_catch": "Log entry unbroadcasted",
+    "mean_mean_badger_inspire": "Value",
+    "antsy_whole_alligator_blink": "Confirm on me honor",
+    "game_tough_seal_adore": "Call out a matey",
+    "plane_born_koala_hope": "Unleash sea shanty markup",
+    "blue_ornate_coyote_tickle": "Insert deck decoration",
+    "top_patchy_earthworm_vent": "Attach cargo",
+    "frail_broad_mallard_dart": "Mark as sensitive booty",
+    "gaudy_strong_puma_slide": "Secure",
+    "free_teal_bulldog_learn": "Send to the winds",
+    "last_mean_peacock_zip": "Visible to any scallywag.",
+    "funny_slow_jannes_walk": "Hidden from most",
+    "grassy_empty_raven_startle": "Private quarters",
+    "pretty_bold_baboon_wave": "Direct message in a bottle",
+    "grand_strong_gibbon_race": "Visible only with special map.",
+    "white_teal_ostrich_yell": "Only yer crew can spy",
+    "lucky_mean_robin_link": "Only mentioned sailors can peek",
+    "wise_late_fireant_walk": "Unfurlin' log entry...",
+    "loved_busy_mantis_slide": "Return fire",
+    "tired_grassy_vulture_forgive": "Return fire to this log entry",
+    "solid_slow_angelfish_pave": "Scribe",
+    "livid_livid_nils_snip": "Quote this scroll",
+    "brief_cool_capybara_fear": "Scribe a fresh log entry",
+    "chunky_dull_marlin_trip": "Scribe",
+    "steep_suave_fish_snap": "No more tales to tell.",
+    "muddy_bland_shark_accept": "Ye've sailed so far, there be nothin' left to chart.",
+    "petty_honest_fish_stir": "Ye're caught up or the seas be empty.",
+    "fine_arable_lemming_fold": "Nothin' to spy here.",
+    "gaudy_bland_gorilla_talk": "Unfurl more",
+    "fancy_this_wasp_renew": "Yer voyage has ended",
+    "real_weird_deer_stop": "Ye've been cast adrift. Hoist yer colors again.",
+    "sunny_quick_lionfish_flip": "No colors hoisted",
+    "brave_known_pelican_drip": "This map requires ye to prove yerself. Hoist yer colors to continue.",
+    "chunky_awake_mallard_grow": "Log entry",
+    "steep_sour_warthog_aim": "Unfurlin'",
+    "tough_nice_ox_drum": "Captain's scroll",
+    "noble_cute_ocelot_aim": "Join the crew",
+    "novel_fine_stork_snap": "Hoist yer colors to the ship",
+    "smug_main_whale_snip": "Enter yer secret code for <code>{host}</code>.",
+    "aware_awful_crow_spur": "Here be yer secret code",
+    "mushy_soft_lizard_propel": "Ye've successfully boarded!",
+    "short_arable_leopard_zap": "Paste the followin' code into yer ship's log:",
+    "spare_aqua_warthog_mend": "Authorization scroll",
+    "fresh_broad_cockroach_radiate": "Authorize \"{application}\"?",
+    "gross_antsy_kangaroo_succeed": "Ye be signin' into <b>{application}</b> with yer ship's colors.",
+    "hour_close_giraffe_mop": "This allows <b>{application}</b> to perform these maritime actions.",
+    "last_spare_polecat_reside": "Authorize",
+    "lower_factual_frog_evoke": "Authorization",
+    "awake_ago_capybara_kick": "$VERB yer ship's manifest",
+    "teary_zesty_racoon_transform": "$VERB yer brig list",
+    "whole_flaky_nuthatch_rush": "$VERB yer treasure bookmarks",
+    "still_spicy_lionfish_quell": "$VERB yer favorite plunder",
+    "away_mean_dolphin_empower": "$VERB yer navigation filters",
+    "sleek_empty_penguin_radiate": "$VERB yer sailed routes",
+    "every_silly_racoon_lift": "$VERB yer crew lists",
+    "top_careful_scallop_clip": "$VERB yer silenced sailors",
+    "this_short_bulldog_walk": "$VERB yer signal flags",
+    "fresh_odd_rook_forgive": "Scout the high seas",
+    "witty_whole_capybara_pull": "$VERB yer log entries",
+    "agent_warm_javelina_blink": "Adjust yer ship's tales",
+    "dirty_red_jellyfish_ascend": "Hoist cargo",
+    "crisp_vivid_seahorse_tend": "Report mutinous sailors",
+    "teary_such_jay_fade": "Read and scribe",
+    "smug_safe_warthog_dare": "Read",
+    "loose_large_blackbird_peek": "Scribe",
+    "late_mean_capybara_fade": "Success, matey!",
+    "brave_acidic_lobster_fetch": "Yer secret passage be reset. Ye can now board with yer new code.",
+    "every_tangy_koala_persist": "Back to ship's main deck",
+    "good_plane_gazelle_glow": "Yer secret passage be reset by the captain. Change it here.",
+    "east_loud_lobster_explore": "Ship's log",
+    "solid_slow_platypus_talk": "Enter yer new secret passage below. Secure it in a treasure chest.",
+    "tired_green_sloth_evoke": "Reset yer secret passage",
+    "true_male_gadfly_stab": "New secret passage",
+    "awful_cozy_jannes_rise": "Confirm secret passage",
+    "noisy_round_skate_yell": "Reset",
+    "smart_bold_macaw_aid": "Must be at least {count} sea marks long",
+    "dry_smug_goldfish_promise": "Must be at most {count} sea marks long",
+    "candid_fancy_leopard_prosper": "Secret passages don't match",
+    "arable_arable_herring_lead": "Reset secret passage",
+    "broad_whole_herring_reside": "Ship's preferences",
+    "tasty_late_termite_sew": "Captain's ledger",
+    "actual_mean_cow_dare": "Captain's ledger preferences",
+    "suave_smart_mantis_climb": "Deck decorations",
+    "lucky_suave_myna_adore": "Ask the captain to add some deck decorations.",
+    "actual_steep_llama_rest": "No decorations in the hold.",
+    "mild_many_dolphin_mend": "Deck decoration preferences",
+    "lucky_ago_rat_pinch": "Uncategorized",
+    "empty_awful_lark_dart": "Sailor not found in the ship's log.",
+    "clean_even_mayfly_tap": "Check for sea monster tracks or try again later.",
+    "vexed_each_falcon_enjoy": "Blimey!",
+    "wide_topical_vole_walk": "Recruit to the crew",
+    "keen_clean_nils_slurp": "Sailor's name",
+    "top_inclusive_wallaby_hack": "Message bottle address",
+    "happy_house_dragonfly_clap": "Secret passages be never stored where sea dogs can spy.",
+    "early_last_ocelot_praise": "Join the crew",
+    "safe_candid_horse_jump": "New recruitments be blocked at this port.",
+    "wide_away_cat_taste": "Arr, sorry matey :c",
+    "sea_maroon_peacock_yell": "Must be lowercase letters, numbers, underscores or ship's hooks",
+    "civil_loose_coyote_jump": "Ye must agree to the Pirate's code",
+    "plane_quick_chipmunk_rush": "I agree to the",
+    "glad_last_crow_dine": "Pirate's code",
+    "left_maroon_myna_drip": "Ye've successfully joined the crew. Ye can now hoist yer colors.",
+    "steep_aqua_fox_harbor": "Sea charts",
+    "silly_sour_fireant_fear": "Failed to launch the ship's boat",
+    "level_due_ox_greet": "Hoisting colors...",
+    "candid_frail_lion_value": "Failed to chart the course",
+    "wide_least_samuel_conquer": "Style of the ship's side chart.",
+    "fluffy_north_crow_blink": "Tucked away",
+    "day_polite_newt_loop": "Side chart",
+    "jolly_mad_jackdaw_assure": "Floatin'",
+    "agent_misty_firefox_arise": "Shape of all crew portraits.",
+    "polite_awful_ladybug_greet": "Round as a cannonball",
+    "sad_each_cowfish_lock": "Square as a plank",
+    "fit_cool_bulldog_dine": "Crew portrait shape",
+    "deft_seemly_donkey_slide": "Side chart style",
+    "quaint_clear_boar_attend": "Render sea shanties",
+    "aloof_helpful_larva_spur": "Render sailor's markdown.",
+    "smart_awake_dachshund_view": "Custom ship's paint",
+    "loved_topical_rat_coax": "Custom paint for the ship's deck.",
+    "wise_neat_ox_buzz": "Dark as the depths",
+    "each_strong_snail_aid": "Bright as sail canvas",
+    "helpful_raw_seal_nurture": "As the sea decides",
+    "male_stout_florian_feast": "Ship's appearance.",
+    "hour_elegant_mink_grip": "Ship's look",
+    "loud_raw_sheep_imagine": "Render deck decorations",
+    "inclusive_pink_tuna_enjoy": "Render deck decorations. Requires resetting yer sails to apply.",
+    "fair_swift_elephant_hunt": "Blur sensitive cargo",
+    "gray_minor_bee_endure": "Blur log entries marked sensitive/spoiler.",
+    "stock_large_marten_comfort": "Background map",
+    "mean_weird_donkey_stab": "Change the background map of the ship.",
+    "tired_jumpy_rook_slurp": "Signal flags sidebar",
+    "wide_new_robin_empower": "Display a sidebar with signal flags on the main deck.",
+    "less_early_lionfish_honor": "Fluent deck markers (flat version)",
+    "many_tasty_midge_zoom": "Fluent deck markers",
+    "shy_clear_spider_cook": "Sailor's standard markers",
+    "new_brave_maggot_relish": "Merchant's markers",
+    "slimy_sound_termite_hug": "Ship's standard",
+    "warm_round_dove_skip": "Markers used for decoration. Requires resetting yer sails to apply.",
+    "weak_bad_martin_glow": "Deck marker theme",
+    "equal_blue_zebra_launch": "Ctrl+Enter to send to the winds",
+    "heavy_pink_meerkat_affirm": "Send a log entry by pressin' ⌘+Enter or Ctrl+Enter.",
+    "north_nimble_turkey_transform": "Crew portrait peek",
+    "bold_moving_fly_savor": "Show crew details when hoverin' over a sailor's portrait.",
+    "plane_dark_salmon_pout": "Automatically unfurl more logs when reachin' the bottom of the chart.",
+    "helpful_early_worm_laugh": "Confirm before scuttlin' a log entry.",
+    "trite_salty_eel_race": "Confirm scuttle",
+    "sleek_this_earthworm_hug": "Endless sea scroll",
+    "jolly_empty_bullock_mend": "Confirm chase",
+    "calm_male_wombat_relish": "Confirm before chasin'/abandonin' a sailor.",
+    "wacky_inner_osprey_intend": "Confirm before broadcastin' a log entry.",
+    "honest_great_rooster_taste": "Confirm broadcast",
+    "patchy_basic_alligator_inspire": "Confirm appreciation",
+    "antsy_weak_raven_treat": "Confirm before showin' appreciation for a log entry.",
+    "fuzzy_orange_tuna_succeed": "Mentioned ye",
+    "grand_proof_quail_read": "Rebroadcasted yer log entry",
+    "top_steep_scallop_care": "Followed yer ship",
+    "swift_just_beetle_devour": "Appreciated yer log entry",
+    "seemly_short_thrush_bloom": "Requested to board yer ship",
+    "weird_seemly_termite_scold": "Accepted yer boarding request",
+    "pretty_born_jackal_dial": "Sailor's tongue",
+    "tired_happy_lobster_pet": "Change the ship's language. Requires resetting yer sails to apply.",
+    "keen_aware_goldfish_thrive": "King's English",
+    "vivid_mellow_sawfish_approve": "Fancy French",
+    "gray_clean_shark_comfort": "The following URI parameters be required:",
+    "grand_spry_goldfish_embrace": "Yer URI parameters be invalid",
+    "honest_factual_carp_aspire": "Be yer certain yer want to send this deck decoration to Davy Jones' locker?",
+    "flat_safe_haddock_gaze": "Return",
+    "orange_weird_parakeet_hug": "Decoration must be inferior to {count} bytes",
+    "solid_inclusive_owl_hug": "Code must have less than {count} markings",
+    "key_ago_hound_emerge": "Map must have less than {count} markings",
+    "pink_sharp_carp_work": "Global deck decoration",
+    "dark_pretty_hyena_link": "Can be employed by every sailor, not just yer",
+    "home_cool_orangutan_hug": "Category must be not greater than {count} markings",
+    "sound_topical_gopher_offer": "Required",
+    "watery_left_shrimp_bless": "Description",
+    "weird_fun_jurgen_arise": "Useful for people with screen readers, or poor network conditions.",
+    "short_cute_jackdaw_comfort": "Category",
+    "happy_mild_fox_gleam": "Shortcode",
+    "active_direct_bear_compose": "Image",
+    "lime_late_millipede_urge": "Recommended size: 128x128px. Every image type is allowed.",
+    "factual_gray_mouse_believe": "Uploading emoji...",
+    "cool_trite_gull_quiz": "Emoji uploaded!",
+    "kind_deft_myna_hint": "Failed to upload emoji.",
+    "frail_great_marten_pet": "Upload a new emoji to the server.",
+    "whole_icy_puffin_smile": "Upload Emoji"
+}
diff --git a/messages/en-rot.json b/messages/en-rot.json
new file mode 100644
index 0000000..eb9ce40
--- /dev/null
+++ b/messages/en-rot.json
@@ -0,0 +1,342 @@
+{
+    "$schema": "https://inlang.com/schema/inlang-message-format",
+    "bland_chunky_sparrow_propel": "Castle",
+    "lost_trick_dog_grace": "Exposed",
+    "crazy_game_parrot_pave": "Sigma",
+    "real_tame_moose_greet": "Beta",
+    "that_patchy_mare_snip": "Death Threats",
+    "patchy_seemly_hound_grace": "Decisions",
+    "factual_arable_jurgen_endure": "Persona",
+    "tough_clean_wolf_gleam": "Canthal Tilt",
+    "legal_best_tadpole_rise": "Behaviour",
+    "novel_trite_sloth_adapt": "Pepe Emojos",
+    "safe_green_mink_cook": "Roles",
+    "short_zippy_felix_kick": "Sigma Server",
+    "top_active_ocelot_cure": "A Sigma Server instance",
+    "trite_real_sawfish_drum": "Navigation",
+    "close_short_kitten_coax": "More",
+    "salty_aloof_turkey_nudge": "Tip it out",
+    "quaint_low_felix_pave": "Update",
+    "sunny_pink_hyena_walk": "Add persona",
+    "sharp_big_mallard_reap": "Go to therapy",
+    "honest_few_baboon_pop": "Register",
+    "spicy_loved_giraffe_empower": "Skibidi Actions",
+    "cool_dark_tapir_belong": "Copy NPC name",
+    "yummy_moving_scallop_sail": "Copy API data",
+    "sunny_zany_jellyfish_pop": "Copy ID",
+    "ago_new_pelican_drip": "Copy link",
+    "solid_witty_zebra_walk": "Copy link (in ohio)",
+    "active_trite_lark_inspire": "Open in ohio",
+    "spare_wild_mole_intend": "Mute",
+    "misty_soft_sparrow_vent": "Block",
+    "slow_chunky_chipmunk_hush": "Refresh",
+    "great_few_jaguar_rise": "Report",
+    "flat_nice_worm_dream": "Copied to clipboard",
+    "ornate_tidy_coyote_grow": "Muting NPC...",
+    "empty_smug_raven_bloom": "Blocking NPC...",
+    "real_every_macaw_wish": "Requesting refresh...",
+    "many_cool_fox_love": "Persona refreshed",
+    "gross_fancy_platypus_seek": "Joined",
+    "real_gray_stork_seek": "Rizzes",
+    "teal_helpful_parakeet_hike": "Fanum taxing",
+    "aloof_royal_samuel_startle": "Fanum taxed",
+    "brief_upper_otter_cuddle": "Fanum rebate",
+    "weak_bright_larva_grasp": "Requested",
+    "lazy_major_loris_grasp": "Fanum tax",
+    "honest_jolly_shell_blend": "This NPC is a Sigma developer.",
+    "nice_bad_grizzly_coax": "Sigma Developer",
+    "merry_red_shrimp_bump": "Automated",
+    "sweet_mad_jannes_create": "This persona is not operated as living entity.",
+    "many_fair_capybara_imagine": "Fanum tax NPC",
+    "cuddly_even_tern_loop": "Fanum tax",
+    "soft_bold_ant_attend": "Cancel",
+    "quick_basic_peacock_bubble": "Fanum taxing NPC...",
+    "awake_quick_cuckoo_smile": "NPC Fanum taxed",
+    "funny_aloof_swan_loop": "Fanum rebate NPC",
+    "cute_polite_oryx_blend": "Fanum rebate",
+    "big_safe_guppy_mix": "Fanum rebating NPC...",
+    "misty_level_stingray_expand": "NPC fanum rebated",
+    "witty_heroic_trout_cry": "Uploaded by you",
+    "cuddly_such_swallow_hush": "Rename",
+    "tense_quick_cod_favor": "Cook",
+    "slimy_awful_florian_sail": "Enter a new shortcode",
+    "teary_antsy_panda_aid": "Edit",
+    "teary_tame_gull_bless": "Updating shortcode...",
+    "gaudy_lime_bison_adore": "Shortcode updated.",
+    "weary_away_liger_zip": "Cooking pepe...",
+    "crisp_whole_canary_tear": "Pepe cooked.",
+    "mellow_yummy_jannes_cuddle": "Are you sure you want to fanum tax {acct}?",
+    "white_best_dolphin_catch": "Are you sure you want to fanum rebate {acct}?",
+    "bright_late_osprey_renew": "Banner",
+    "great_level_lamb_sway": "Recommended size: over 1500x500px",
+    "safe_icy_bulldog_quell": "Avatar",
+    "aware_quiet_opossum_catch": "Recommended size: 400x400px",
+    "mild_known_mallard_jolt": "Display Name",
+    "lime_dry_skunk_loop": "Custom Pepes can be used here.",
+    "neat_silly_dog_prosper": "NPC name",
+    "petty_plane_tadpole_earn": "Changing this will break all links to your skibidi.",
+    "next_caring_ladybug_hack": "Bio",
+    "stale_just_anaconda_earn": "Markdown and custom Pepes are supported.",
+    "aqua_mealy_toucan_pride": "Custom Fields",
+    "front_north_eel_gulp": "Add field",
+    "gaudy_each_opossum_play": "Mark persona as bot",
+    "grassy_acidic_gadfly_cure": "Is this persona sending automated messages?",
+    "dirty_moving_shark_emerge": "Enable fanum tax requests",
+    "bright_fun_mouse_boil": "Will require approval for new fanum taxers.",
+    "red_vivid_cuckoo_spark": "Allow persona discovery",
+    "plain_zany_donkey_dart": "Allow your persona to be found in search results.",
+    "jolly_noble_sloth_breathe": "Updating skibidi...",
+    "tough_alive_niklas_promise": "No changes",
+    "spry_honest_kestrel_arrive": "Skibidi updated",
+    "civil_icy_ant_mend": "Banner must be less than {size} bytes",
+    "zippy_caring_raven_edit": "Avatar must be less than {size} bytes",
+    "still_upper_otter_dine": "NPC name can only contain lowercase letters, numbers, underscores and hyphens",
+    "aware_house_dolphin_win": "Must be at least 3 characters long",
+    "weary_fresh_dragonfly_bless": "Must be a valid email address",
+    "sunny_novel_otter_glow": "Must be at least 3 characters long",
+    "fluffy_soft_wolf_cook": "Email (or NPC name)",
+    "livid_bright_wallaby_quiz": "Weener",
+    "fuzzy_sea_moth_absorb": "Sign in",
+    "tidy_tidy_cow_cut": "Or continue with",
+    "slow_these_kestrel_sail": "Accept",
+    "weary_steep_yak_embrace": "Reject",
+    "cool_slimy_coyote_affirm": "Accepting fanum tax request...",
+    "busy_awful_mouse_jump": "Fanum tax request accepted.",
+    "front_sunny_penguin_flip": "Rejecting fanum tax request...",
+    "green_flat_mayfly_trust": "Fanum tax request rejected.",
+    "large_vivid_horse_catch": "mogged",
+    "top_cute_bison_nudge": "Blocking NPC...",
+    "main_weary_racoon_peek": "NPC blocked",
+    "calm_icy_weasel_twirl": "Cook rizz",
+    "gray_fun_toucan_slide": "Are you sure you want to cook this rizz?",
+    "royal_best_tern_transform": "Cook",
+    "new_funny_fox_boil": "Cooking rizz...",
+    "green_tasty_bumblebee_beam": "Rizz cooked",
+    "many_misty_parakeet_fall": "Rizz Actions",
+    "front_lime_grizzly_persist": "Edit",
+    "wise_crazy_eel_honor": "Copy API data",
+    "dizzy_alive_wombat_bump": "Copy ID",
+    "slimy_livid_rabbit_belong": "Copy link",
+    "inner_pink_mare_renew": "Copy link (in ohio)",
+    "calm_fuzzy_thrush_soar": "Open in ohio",
+    "real_green_clownfish_pet": "Cook and redraft",
+    "zippy_key_antelope_drop": "Cook",
+    "chunky_dry_gull_sing": "Report",
+    "bald_vexed_firefox_startle": "Block NPC",
+    "clean_yummy_owl_reside": "Click to copy",
+    "livid_tangy_lionfish_clasp": "Sensitive content",
+    "sour_seemly_bird_hike": "This content is sensitive",
+    "bald_direct_turtle_win": "Show",
+    "known_flaky_cockroach_dash": "Hide",
+    "that_misty_mule_arrive": "Show less",
+    "lazy_honest_mammoth_bump": "Show more",
+    "dark_spare_goldfish_charm": "{count} characters",
+    "drab_tense_turtle_comfort": "Reply",
+    "vexed_fluffy_clownfish_dance": "Unmew",
+    "royal_close_samuel_scold": "Mew",
+    "lime_neat_ox_stab": "Unmog",
+    "aware_helpful_marlin_drop": "Mog",
+    "true_shy_jackal_drip": "Quote",
+    "busy_merry_cowfish_absorb": "Actions",
+    "slimy_least_ray_aid": "Mew rizz",
+    "stale_new_ray_jolt": "Are you sure you want to mew this rizz?",
+    "slimy_candid_tiger_read": "Mewing rizz...",
+    "mealy_slow_buzzard_commend": "Rizz mewed",
+    "odd_strong_halibut_prosper": "Unmewed rizz",
+    "slow_blue_parrot_savor": "Are you sure you want to unmewed this rizz?",
+    "busy_active_leopard_strive": "Unmewing rizz...",
+    "fresh_direct_bear_affirm": "Rizz unmewed",
+    "best_mellow_llama_surge": "Mog rizz",
+    "salty_plain_mallard_gaze": "Are you sure you want to mog this rizz?",
+    "late_sunny_cobra_scold": "Mogging rizz...",
+    "weird_moving_hawk_lift": "Rizz mogged",
+    "main_fancy_octopus_loop": "Unmog rizz",
+    "odd_alive_swan_express": "Are you sure you want to unmog this rizz?",
+    "white_sharp_gorilla_embrace": "Unmogging rizz...",
+    "royal_polite_moose_catch": "Rizz unmogged",
+    "mean_mean_badger_inspire": "Value",
+    "antsy_whole_alligator_blink": "Confirm",
+    "game_tough_seal_adore": "Mention someone",
+    "plane_born_koala_hope": "Enable Markdown",
+    "blue_ornate_coyote_tickle": "Insert pepe",
+    "top_patchy_earthworm_vent": "Attach a file",
+    "frail_broad_mallard_dart": "Mark as sensitive",
+    "gaudy_strong_puma_slide": "Save",
+    "free_teal_bulldog_learn": "Send",
+    "last_mean_peacock_zip": "Can be seen by anyone.",
+    "funny_slow_jannes_walk": "Unlisted",
+    "grassy_empty_raven_startle": "Private",
+    "pretty_bold_baboon_wave": "Direct",
+    "grand_strong_gibbon_race": "Can be seen by anyone with the link.",
+    "white_teal_ostrich_yell": "Can only be seen by your fanum taxers.",
+    "lucky_mean_robin_link": "Can only be seen by mentioned NPCs.",
+    "wise_late_fireant_walk": "Loading rizz data...",
+    "loved_busy_mantis_slide": "Reply",
+    "tired_grassy_vulture_forgive": "Reply to this rizz",
+    "solid_slow_angelfish_pave": "Compose",
+    "livid_livid_nils_snip": "Quote this rizz",
+    "brief_cool_capybara_fear": "Compose a new rizz",
+    "chunky_dull_marlin_trip": "Compose",
+    "steep_suave_fish_snap": "No more data.",
+    "muddy_bland_shark_accept": "You've scrolled so far, there's nothing left to show.",
+    "petty_honest_fish_stir": "Either you're all caught up or there's nothing to show.",
+    "fine_arable_lemming_fold": "There's nothing to show here.",
+    "gaudy_bland_gorilla_talk": "Load More",
+    "fancy_this_wasp_renew": "Your session has expired",
+    "real_weird_deer_stop": "You have been logged out. Please log in again.",
+    "sunny_quick_lionfish_flip": "Not signed in",
+    "brave_known_pelican_drip": "This duke dennis requires you to be a real one. Please quit therapy to continue.",
+    "chunky_awake_mallard_grow": "Rizz",
+    "steep_sour_warthog_aim": "Loading",
+    "tough_nice_ox_drum": "Skibidi",
+    "noble_cute_ocelot_aim": "Register",
+    "novel_fine_stork_snap": "Log in to your persona.",
+    "smug_main_whale_snip": "Enter your credentials for <code>{host}</code>.",
+    "aware_awful_crow_spur": "Here's your code",
+    "mushy_soft_lizard_propel": "You have signed in successfully.",
+    "short_arable_leopard_zap": "Paste the following code into your app:",
+    "spare_aqua_warthog_mend": "Authorization Code",
+    "fresh_broad_cockroach_radiate": "Authorize “{application}”?",
+    "gross_antsy_kangaroo_succeed": "You are signing in to <b>{application}</b> with your persona.",
+    "hour_close_giraffe_mop": "This allows <b>{application}</b> to perform the above actions.",
+    "last_spare_polecat_reside": "Authorize",
+    "lower_factual_frog_evoke": "Authorization",
+    "awake_ago_capybara_kick": "$VERB your persona information",
+    "teary_zesty_racoon_transform": "$VERB your block list",
+    "whole_flaky_nuthatch_rush": "$VERB your bookmarks",
+    "still_spicy_lionfish_quell": "$VERB your favourites",
+    "away_mean_dolphin_empower": "$VERB your filters",
+    "sleek_empty_penguin_radiate": "$VERB your fanum taxed",
+    "every_silly_racoon_lift": "$VERB your lists",
+    "top_careful_scallop_clip": "$VERB your mutes",
+    "this_short_bulldog_walk": "$VERB your death threats",
+    "fresh_odd_rook_forgive": "Perform searches",
+    "witty_whole_capybara_pull": "$VERB your rizzes",
+    "agent_warm_javelina_blink": "Edit your conversations",
+    "dirty_red_jellyfish_ascend": "Upload media",
+    "crisp_vivid_seahorse_tend": "Report NPCs",
+    "teary_such_jay_fade": "Read and write",
+    "smug_safe_warthog_dare": "Read",
+    "loose_large_blackbird_peek": "Write",
+    "late_mean_capybara_fade": "Success",
+    "brave_acidic_lobster_fetch": "Your weener has been reset. You can now log in with your new weener.",
+    "every_tangy_koala_persist": "Back to duke dennis",
+    "good_plane_gazelle_glow": "Your weener has been reset by an administrator. Please change it here.",
+    "east_loud_lobster_explore": "Info",
+    "solid_slow_platypus_talk": "Enter your new weener below. Make sure to put it in a weener manager.",
+    "tired_green_sloth_evoke": "Reset your weener",
+    "true_male_gadfly_stab": "New weener",
+    "awful_cozy_jannes_rise": "Confirm weener",
+    "noisy_round_skate_yell": "Reset",
+    "smart_bold_macaw_aid": "Must be at least {count} characters long",
+    "dry_smug_goldfish_promise": "Must be at most {count} characters long",
+    "candid_fancy_leopard_prosper": "Weeners do not match",
+    "arable_arable_herring_lead": "Reset Weener",
+    "broad_whole_herring_reside": "Decisions",
+    "tasty_late_termite_sew": "Persona",
+    "actual_mean_cow_dare": "Persona Decisions",
+    "suave_smart_mantis_climb": "Pepes",
+    "lucky_suave_myna_adore": "Ask your administrator to add some Pepes.",
+    "actual_steep_llama_rest": "No Pepes found.",
+    "mild_many_dolphin_mend": "Pepe Decisions",
+    "lucky_ago_rat_pinch": "Uncategorized",
+    "empty_awful_lark_dart": "NPC not found.",
+    "clean_even_mayfly_tap": "Check for typos or try again later.",
+    "vexed_each_falcon_enjoy": "Error",
+    "wide_topical_vole_walk": "Create a persona",
+    "keen_clean_nils_slurp": "NPC name",
+    "top_inclusive_wallaby_hack": "Email address",
+    "happy_house_dragonfly_clap": "Weeners are never stored in plain text.",
+    "early_last_ocelot_praise": "Register",
+    "safe_candid_horse_jump": "Registrations are disabled on this instance.",
+    "wide_away_cat_taste": "Sorry :c",
+    "sea_maroon_peacock_yell": "Must be lowercase letters, numbers, underscores or hyphens",
+    "civil_loose_coyote_jump": "You must agree to the Terms of Service",
+    "plane_quick_chipmunk_rush": "I agree to the",
+    "glad_last_crow_dine": "Terms of Service",
+    "left_maroon_myna_drip": "You've successfully registered. You can now log in with your new persona.",
+    "steep_aqua_fox_harbor": "Sigma Tips",
+    "silly_sour_fireant_fear": "Failed to create app",
+    "level_due_ox_greet": "Signing in...",
+    "candid_frail_lion_value": "Failed to generate auth URL",
+    "wide_least_samuel_conquer": "Style of the left sidebar.",
+    "fluffy_north_crow_blink": "Inset",
+    "day_polite_newt_loop": "Sidebar",
+    "jolly_mad_jackdaw_assure": "Floating",
+    "agent_misty_firefox_arise": "Shape of all NPC avatars.",
+    "polite_awful_ladybug_greet": "Round",
+    "sad_each_cowfish_lock": "Square",
+    "fit_cool_bulldog_dine": "Avatar Shape",
+    "deft_seemly_donkey_slide": "Sidebar Style",
+    "quaint_clear_boar_attend": "Render MFM",
+    "aloof_helpful_larva_spur": "Render Misskey-Flavoured Markdown.",
+    "smart_awake_dachshund_view": "Custom CSS",
+    "loved_topical_rat_coax": "Custom CSS for the UI.",
+    "wise_neat_ox_buzz": "Dark",
+    "each_strong_snail_aid": "Light",
+    "helpful_raw_seal_nurture": "System",
+    "male_stout_florian_feast": "UI theme.",
+    "hour_elegant_mink_grip": "Theme",
+    "loud_raw_sheep_imagine": "Render Pepe",
+    "inclusive_pink_tuna_enjoy": "Render Pepe. Requires a duke dennis reload to apply.",
+    "fair_swift_elephant_hunt": "Blur Sensitive Content",
+    "gray_minor_bee_endure": "Blur rizzes marked sensitive/spoiler.",
+    "stock_large_marten_comfort": "Background URL",
+    "mean_weird_donkey_stab": "Change the background image of the site.",
+    "tired_jumpy_rook_slurp": "Notifications Sidebar",
+    "wide_new_robin_empower": "Display a sidebar with notifications on desktop.",
+    "less_early_lionfish_honor": "Fluent Pepe (flat version)",
+    "many_tasty_midge_zoom": "Fluent Pepe",
+    "shy_clear_spider_cook": "Noto Pepe",
+    "new_brave_maggot_relish": "Twitter Pepe",
+    "slimy_sound_termite_hug": "Operating System",
+    "warm_round_dove_skip": "Theme used for rendering Pepe. Requires a duke dennis reload to apply.",
+    "weak_bad_martin_glow": "Pepe Theme",
+    "equal_blue_zebra_launch": "Ctrl+Enter to Send",
+    "heavy_pink_meerkat_affirm": "Send a rizz by pressing ⌘+Enter or Ctrl+Enter.",
+    "north_nimble_turkey_transform": "Popup Skibidi Hover",
+    "bold_moving_fly_savor": "Show skibidi popup when hovering over an NPC's avatar.",
+    "plane_dark_salmon_pout": "Automatically load more rizzes when reaching the bottom of the duke.",
+    "helpful_early_worm_laugh": "Confirm before cooking a rizz.",
+    "trite_salty_eel_race": "Confirm Cook",
+    "sleek_this_earthworm_hug": "Infinite Scroll",
+    "jolly_empty_bullock_mend": "Confirm Fanum Tax",
+    "calm_male_wombat_relish": "Confirm before fanum taxing/fanum rebating an NPC.",
+    "wacky_inner_osprey_intend": "Confirm before mogging a rizz.",
+    "honest_great_rooster_taste": "Confirm Mog",
+    "patchy_basic_alligator_inspire": "Confirm Mew",
+    "antsy_weak_raven_treat": "Confirm before mewing a rizz.",
+    "fuzzy_orange_tuna_succeed": "Mentioned you",
+    "grand_proof_quail_read": "Mogged your rizz",
+    "top_steep_scallop_care": "Fanum taxed you",
+    "swift_just_beetle_devour": "Mewed your rizz",
+    "seemly_short_thrush_bloom": "Requested to fanum tax you",
+    "weird_seemly_termite_scold": "Accepted your fanum tax request",
+    "pretty_born_jackal_dial": "Language",
+    "tired_happy_lobster_pet": "Change the language of the interface. Requires a reload to apply.",
+    "keen_aware_goldfish_thrive": "English",
+    "vivid_mellow_sawfish_approve": "French",
+    "these_awful_ape_reside": "Pirate",
+    "gray_clean_shark_comfort": "The following rizzy parameters are required:",
+    "grand_spry_goldfish_embrace": "Invalid URI parameters",
+    "honest_factual_carp_aspire": "Are you sure you want to ax this pepe?",
+    "flat_safe_haddock_gaze": "Upload",
+    "orange_weird_parakeet_hug": "Image must be less than {count} bytes",
+    "solid_inclusive_owl_hug": "Shortcode must be less than {count} characters",
+    "key_ago_hound_emerge": "Description must be less than {count} characters",
+    "pink_sharp_carp_work": "Global emoji",
+    "dark_pretty_hyena_link": "Can be used by every NPC, not just you",
+    "home_cool_orangutan_hug": "Category must be less than {count} characters",
+    "sound_topical_gopher_offer": "Required",
+    "watery_left_shrimp_bless": "Description",
+    "weird_fun_jurgen_arise": "Useful for people with screen readers, or poor network conditions.",
+    "short_cute_jackdaw_comfort": "Category",
+    "happy_mild_fox_gleam": "Shortcode",
+    "active_direct_bear_compose": "Image",
+    "lime_late_millipede_urge": "Recommended size: 128x128px. Every image type is allowed.",
+    "factual_gray_mouse_believe": "Uploading emoji...",
+    "cool_trite_gull_quiz": "Emoji uploaded!",
+    "kind_deft_myna_hint": "Failed to upload emoji.",
+    "frail_great_marten_pet": "Upload a new emoji to the server.",
+    "whole_icy_puffin_smile": "Upload Emoji"
+}
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..71db713
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,343 @@
+{
+    "$schema": "https://inlang.com/schema/inlang-message-format",
+    "bland_chunky_sparrow_propel": "Home",
+    "lost_trick_dog_grace": "Public",
+    "crazy_game_parrot_pave": "Local",
+    "real_tame_moose_greet": "Global",
+    "that_patchy_mare_snip": "Notifications",
+    "patchy_seemly_hound_grace": "Preferences",
+    "factual_arable_jurgen_endure": "Account",
+    "tough_clean_wolf_gleam": "Appearance",
+    "legal_best_tadpole_rise": "Behaviour",
+    "novel_trite_sloth_adapt": "Emojis",
+    "safe_green_mink_cook": "Roles",
+    "short_zippy_felix_kick": "Versia Server",
+    "top_active_ocelot_cure": "A Versia Server instance",
+    "trite_real_sawfish_drum": "Navigation",
+    "close_short_kitten_coax": "More",
+    "salty_aloof_turkey_nudge": "Compose",
+    "quaint_low_felix_pave": "Update",
+    "sunny_pink_hyena_walk": "Add account",
+    "sharp_big_mallard_reap": "Log out",
+    "honest_few_baboon_pop": "Register",
+    "spicy_loved_giraffe_empower": "Profile Actions",
+    "cool_dark_tapir_belong": "Copy username",
+    "yummy_moving_scallop_sail": "Copy API data",
+    "sunny_zany_jellyfish_pop": "Copy ID",
+    "ago_new_pelican_drip": "Copy link",
+    "solid_witty_zebra_walk": "Copy link (origin)",
+    "active_trite_lark_inspire": "Open on remote",
+    "spare_wild_mole_intend": "Mute",
+    "misty_soft_sparrow_vent": "Block",
+    "slow_chunky_chipmunk_hush": "Refresh",
+    "great_few_jaguar_rise": "Report",
+    "flat_nice_worm_dream": "Copied to clipboard",
+    "ornate_tidy_coyote_grow": "Muting user...",
+    "empty_smug_raven_bloom": "Blocking user...",
+    "real_every_macaw_wish": "Requesting refresh...",
+    "many_cool_fox_love": "Account refreshed",
+    "gross_fancy_platypus_seek": "Joined",
+    "real_gray_stork_seek": "Notes",
+    "teal_helpful_parakeet_hike": "Followers",
+    "aloof_royal_samuel_startle": "Following",
+    "brief_upper_otter_cuddle": "Unfollow",
+    "weak_bright_larva_grasp": "Requested",
+    "lazy_major_loris_grasp": "Follow",
+    "honest_jolly_shell_blend": "This user is a Versia developer.",
+    "nice_bad_grizzly_coax": "Versia Developer",
+    "merry_red_shrimp_bump": "Automated",
+    "sweet_mad_jannes_create": "This account is not operated as living entity.",
+    "many_fair_capybara_imagine": "Follow user",
+    "cuddly_even_tern_loop": "Follow",
+    "soft_bold_ant_attend": "Cancel",
+    "quick_basic_peacock_bubble": "Following user...",
+    "awake_quick_cuckoo_smile": "User followed",
+    "funny_aloof_swan_loop": "Unfollow user",
+    "cute_polite_oryx_blend": "Unfollow",
+    "big_safe_guppy_mix": "Unfollowing user...",
+    "misty_level_stingray_expand": "User unfollowed",
+    "witty_heroic_trout_cry": "Uploaded by you",
+    "cuddly_such_swallow_hush": "Rename",
+    "tense_quick_cod_favor": "Delete",
+    "slimy_awful_florian_sail": "Enter a new shortcode",
+    "teary_antsy_panda_aid": "Edit",
+    "teary_tame_gull_bless": "Updating shortcode...",
+    "gaudy_lime_bison_adore": "Shortcode updated.",
+    "weary_away_liger_zip": "Deleting emoji...",
+    "crisp_whole_canary_tear": "Emoji deleted.",
+    "mellow_yummy_jannes_cuddle": "Are you sure you want to follow {acct}?",
+    "white_best_dolphin_catch": "Are you sure you want to unfollow {acct}?",
+    "bright_late_osprey_renew": "Banner",
+    "great_level_lamb_sway": "Recommended size: over 1500x500px",
+    "safe_icy_bulldog_quell": "Avatar",
+    "aware_quiet_opossum_catch": "Recommended size: 400x400px",
+    "mild_known_mallard_jolt": "Display Name",
+    "lime_dry_skunk_loop": "Custom emojis can be used here.",
+    "neat_silly_dog_prosper": "Username",
+    "petty_plane_tadpole_earn": "Changing this will break all links to your profile.",
+    "next_caring_ladybug_hack": "Bio",
+    "stale_just_anaconda_earn": "Markdown and custom emojis are supported.",
+    "aqua_mealy_toucan_pride": "Custom Fields",
+    "front_north_eel_gulp": "Add field",
+    "gaudy_each_opossum_play": "Mark account as bot",
+    "grassy_acidic_gadfly_cure": "Is this account sending automated messages?",
+    "dirty_moving_shark_emerge": "Enable follow requests",
+    "bright_fun_mouse_boil": "Will require approval for new followers.",
+    "red_vivid_cuckoo_spark": "Allow account discovery",
+    "plain_zany_donkey_dart": "Allow your account to be found in search results.",
+    "jolly_noble_sloth_breathe": "Updating profile...",
+    "tough_alive_niklas_promise": "No changes",
+    "spry_honest_kestrel_arrive": "Profile updated",
+    "civil_icy_ant_mend": "Banner must be less than {size} bytes",
+    "zippy_caring_raven_edit": "Avatar must be less than {size} bytes",
+    "still_upper_otter_dine": "Username can only contain lowercase letters, numbers, underscores and hyphens",
+    "aware_house_dolphin_win": "Must be at least 3 characters long",
+    "weary_fresh_dragonfly_bless": "Must be a valid email address",
+    "sunny_novel_otter_glow": "Must be at least 3 characters long",
+    "fluffy_soft_wolf_cook": "Email (or username)",
+    "livid_bright_wallaby_quiz": "Password",
+    "fuzzy_sea_moth_absorb": "Sign in",
+    "tidy_tidy_cow_cut": "Or continue with",
+    "slow_these_kestrel_sail": "Accept",
+    "weary_steep_yak_embrace": "Reject",
+    "cool_slimy_coyote_affirm": "Accepting follow request...",
+    "busy_awful_mouse_jump": "Follow request accepted.",
+    "front_sunny_penguin_flip": "Rejecting follow request...",
+    "green_flat_mayfly_trust": "Follow request rejected.",
+    "large_vivid_horse_catch": "reblogged",
+    "top_cute_bison_nudge": "Blocking user...",
+    "main_weary_racoon_peek": "User blocked",
+    "calm_icy_weasel_twirl": "Delete note",
+    "gray_fun_toucan_slide": "Are you sure you want to delete this note?",
+    "royal_best_tern_transform": "Delete",
+    "new_funny_fox_boil": "Deleting note...",
+    "green_tasty_bumblebee_beam": "Note deleted",
+    "many_misty_parakeet_fall": "Note Actions",
+    "front_lime_grizzly_persist": "Edit",
+    "wise_crazy_eel_honor": "Copy API data",
+    "dizzy_alive_wombat_bump": "Copy ID",
+    "slimy_livid_rabbit_belong": "Copy link",
+    "inner_pink_mare_renew": "Copy link (origin)",
+    "calm_fuzzy_thrush_soar": "Open on remote",
+    "real_green_clownfish_pet": "Delete and redraft",
+    "zippy_key_antelope_drop": "Delete",
+    "chunky_dry_gull_sing": "Report",
+    "bald_vexed_firefox_startle": "Block user",
+    "clean_yummy_owl_reside": "Click to copy",
+    "livid_tangy_lionfish_clasp": "Sensitive content",
+    "sour_seemly_bird_hike": "This content is sensitive",
+    "bald_direct_turtle_win": "Show",
+    "known_flaky_cockroach_dash": "Hide",
+    "that_misty_mule_arrive": "Show less",
+    "lazy_honest_mammoth_bump": "Show more",
+    "dark_spare_goldfish_charm": "{count} characters",
+    "drab_tense_turtle_comfort": "Reply",
+    "vexed_fluffy_clownfish_dance": "Unlike",
+    "royal_close_samuel_scold": "Like",
+    "lime_neat_ox_stab": "Unreblog",
+    "aware_helpful_marlin_drop": "Reblog",
+    "true_shy_jackal_drip": "Quote",
+    "busy_merry_cowfish_absorb": "Actions",
+    "slimy_least_ray_aid": "Like note",
+    "stale_new_ray_jolt": "Are you sure you want to like this note?",
+    "slimy_candid_tiger_read": "Liking note...",
+    "mealy_slow_buzzard_commend": "Note liked",
+    "odd_strong_halibut_prosper": "Unlike note",
+    "slow_blue_parrot_savor": "Are you sure you want to unlike this note?",
+    "busy_active_leopard_strive": "Unliking note...",
+    "fresh_direct_bear_affirm": "Note unliked",
+    "best_mellow_llama_surge": "Reblog note",
+    "salty_plain_mallard_gaze": "Are you sure you want to reblog this note?",
+    "late_sunny_cobra_scold": "Reblogging note...",
+    "weird_moving_hawk_lift": "Note reblogged",
+    "main_fancy_octopus_loop": "Unreblog note",
+    "odd_alive_swan_express": "Are you sure you want to unreblog this note?",
+    "white_sharp_gorilla_embrace": "Unreblogging note...",
+    "royal_polite_moose_catch": "Note unreblogged",
+    "mean_mean_badger_inspire": "Value",
+    "antsy_whole_alligator_blink": "Confirm",
+    "game_tough_seal_adore": "Mention someone",
+    "plane_born_koala_hope": "Enable Markdown",
+    "blue_ornate_coyote_tickle": "Insert emoji",
+    "top_patchy_earthworm_vent": "Attach a file",
+    "frail_broad_mallard_dart": "Mark as sensitive",
+    "gaudy_strong_puma_slide": "Save",
+    "free_teal_bulldog_learn": "Send",
+    "last_mean_peacock_zip": "Can be seen by anyone.",
+    "funny_slow_jannes_walk": "Unlisted",
+    "grassy_empty_raven_startle": "Private",
+    "pretty_bold_baboon_wave": "Direct",
+    "grand_strong_gibbon_race": "Can be seen by anyone with the link.",
+    "white_teal_ostrich_yell": "Can only be seen by your followers.",
+    "lucky_mean_robin_link": "Can only be seen by mentioned users.",
+    "wise_late_fireant_walk": "Loading note data...",
+    "loved_busy_mantis_slide": "Reply",
+    "tired_grassy_vulture_forgive": "Reply to this note",
+    "solid_slow_angelfish_pave": "Compose",
+    "livid_livid_nils_snip": "Quote this note",
+    "brief_cool_capybara_fear": "Compose a new note",
+    "chunky_dull_marlin_trip": "Compose",
+    "steep_suave_fish_snap": "No more data.",
+    "muddy_bland_shark_accept": "You've scrolled so far, there's nothing left to show.",
+    "petty_honest_fish_stir": "Either you're all caught up or there's nothing to show.",
+    "fine_arable_lemming_fold": "There's nothing to show here.",
+    "gaudy_bland_gorilla_talk": "Load More",
+    "fancy_this_wasp_renew": "Your session has expired",
+    "real_weird_deer_stop": "You have been logged out. Please log in again.",
+    "sunny_quick_lionfish_flip": "Not signed in",
+    "brave_known_pelican_drip": "This page requires you to be authenticated. Please sign in to continue.",
+    "chunky_awake_mallard_grow": "Note",
+    "steep_sour_warthog_aim": "Loading",
+    "tough_nice_ox_drum": "Profile",
+    "noble_cute_ocelot_aim": "Register",
+    "novel_fine_stork_snap": "Log in to your account.",
+    "smug_main_whale_snip": "Enter your credentials for <code>{host}</code>.",
+    "aware_awful_crow_spur": "Here's your code",
+    "mushy_soft_lizard_propel": "You have signed in successfully.",
+    "short_arable_leopard_zap": "Paste the following code into your app:",
+    "spare_aqua_warthog_mend": "Authorization Code",
+    "fresh_broad_cockroach_radiate": "Authorize “{application}”?",
+    "gross_antsy_kangaroo_succeed": "You are signing in to <b>{application}</b> with your account.",
+    "hour_close_giraffe_mop": "This allows <b>{application}</b> to perform the above actions.",
+    "last_spare_polecat_reside": "Authorize",
+    "lower_factual_frog_evoke": "Authorization",
+    "awake_ago_capybara_kick": "$VERB your account information",
+    "teary_zesty_racoon_transform": "$VERB your block list",
+    "whole_flaky_nuthatch_rush": "$VERB your bookmarks",
+    "still_spicy_lionfish_quell": "$VERB your favourites",
+    "away_mean_dolphin_empower": "$VERB your filters",
+    "sleek_empty_penguin_radiate": "$VERB your follows",
+    "every_silly_racoon_lift": "$VERB your lists",
+    "top_careful_scallop_clip": "$VERB your mutes",
+    "this_short_bulldog_walk": "$VERB your notifications",
+    "fresh_odd_rook_forgive": "Perform searches",
+    "witty_whole_capybara_pull": "$VERB your notes",
+    "agent_warm_javelina_blink": "Edit your conversations",
+    "dirty_red_jellyfish_ascend": "Upload media",
+    "crisp_vivid_seahorse_tend": "Report users",
+    "teary_such_jay_fade": "Read and write",
+    "smug_safe_warthog_dare": "Read",
+    "loose_large_blackbird_peek": "Write",
+    "late_mean_capybara_fade": "Success",
+    "brave_acidic_lobster_fetch": "Your password has been reset. You can now log in with your new password.",
+    "every_tangy_koala_persist": "Back to front page",
+    "good_plane_gazelle_glow": "Your password has been reset by an administrator. Please change it here.",
+    "east_loud_lobster_explore": "Info",
+    "solid_slow_platypus_talk": "Enter your new password below. Make sure to put it in a password manager.",
+    "tired_green_sloth_evoke": "Reset your password",
+    "true_male_gadfly_stab": "New password",
+    "awful_cozy_jannes_rise": "Confirm password",
+    "noisy_round_skate_yell": "Reset",
+    "smart_bold_macaw_aid": "Must be at least {count} characters long",
+    "dry_smug_goldfish_promise": "Must be at most {count} characters long",
+    "candid_fancy_leopard_prosper": "Passwords do not match",
+    "arable_arable_herring_lead": "Reset Password",
+    "broad_whole_herring_reside": "Preferences",
+    "tasty_late_termite_sew": "Account",
+    "actual_mean_cow_dare": "Account Preferences",
+    "suave_smart_mantis_climb": "Emojis",
+    "lucky_suave_myna_adore": "Ask your administrator to add some emojis.",
+    "actual_steep_llama_rest": "No emojis found.",
+    "mild_many_dolphin_mend": "Emoji Preferences",
+    "lucky_ago_rat_pinch": "Uncategorized",
+    "empty_awful_lark_dart": "Account not found.",
+    "clean_even_mayfly_tap": "Check for typos or try again later.",
+    "vexed_each_falcon_enjoy": "Error",
+    "wide_topical_vole_walk": "Create an account",
+    "keen_clean_nils_slurp": "Username",
+    "top_inclusive_wallaby_hack": "Email address",
+    "happy_house_dragonfly_clap": "Passwords are never stored in plain text.",
+    "early_last_ocelot_praise": "Register",
+    "safe_candid_horse_jump": "Registrations are disabled on this instance.",
+    "wide_away_cat_taste": "Sorry :c",
+    "sea_maroon_peacock_yell": "Must be lowercase letters, numbers, underscores or hyphens",
+    "civil_loose_coyote_jump": "You must agree to the Terms of Service",
+    "plane_quick_chipmunk_rush": "I agree to the",
+    "glad_last_crow_dine": "Terms of Service",
+    "left_maroon_myna_drip": "You've successfully registered. You can now log in with your new account.",
+    "steep_aqua_fox_harbor": "Timelines",
+    "silly_sour_fireant_fear": "Failed to create app",
+    "level_due_ox_greet": "Signing in...",
+    "candid_frail_lion_value": "Failed to generate auth URL",
+    "wide_least_samuel_conquer": "Style of the left sidebar.",
+    "fluffy_north_crow_blink": "Inset",
+    "day_polite_newt_loop": "Sidebar",
+    "jolly_mad_jackdaw_assure": "Floating",
+    "agent_misty_firefox_arise": "Shape of all user avatars.",
+    "polite_awful_ladybug_greet": "Round",
+    "sad_each_cowfish_lock": "Square",
+    "fit_cool_bulldog_dine": "Avatar Shape",
+    "deft_seemly_donkey_slide": "Sidebar Style",
+    "quaint_clear_boar_attend": "Render MFM",
+    "aloof_helpful_larva_spur": "Render Misskey-Flavoured Markdown.",
+    "smart_awake_dachshund_view": "Custom CSS",
+    "loved_topical_rat_coax": "Custom CSS for the UI.",
+    "wise_neat_ox_buzz": "Dark",
+    "each_strong_snail_aid": "Light",
+    "helpful_raw_seal_nurture": "System",
+    "male_stout_florian_feast": "UI theme.",
+    "hour_elegant_mink_grip": "Theme",
+    "loud_raw_sheep_imagine": "Render Custom Emojis",
+    "inclusive_pink_tuna_enjoy": "Render custom emojis. Requires a page reload to apply.",
+    "fair_swift_elephant_hunt": "Blur Sensitive Content",
+    "gray_minor_bee_endure": "Blur notes marked sensitive/spoiler.",
+    "stock_large_marten_comfort": "Background URL",
+    "mean_weird_donkey_stab": "Change the background image of the site.",
+    "tired_jumpy_rook_slurp": "Notifications Sidebar",
+    "wide_new_robin_empower": "Display a sidebar with notifications on desktop.",
+    "less_early_lionfish_honor": "Fluent Emojis (flat version)",
+    "many_tasty_midge_zoom": "Fluent Emojis",
+    "shy_clear_spider_cook": "Noto Emoji",
+    "new_brave_maggot_relish": "Twitter Emojis",
+    "slimy_sound_termite_hug": "Operating System",
+    "warm_round_dove_skip": "Theme used for rendering emojis. Requires a page reload to apply.",
+    "weak_bad_martin_glow": "Emoji Theme",
+    "equal_blue_zebra_launch": "Ctrl+Enter to Send",
+    "heavy_pink_meerkat_affirm": "Send a note by pressing ⌘+Enter or Ctrl+Enter.",
+    "north_nimble_turkey_transform": "Popup Profile Hover",
+    "bold_moving_fly_savor": "Show profile popup when hovering over a user's avatar.",
+    "plane_dark_salmon_pout": "Automatically load more notes when reaching the bottom of the page.",
+    "helpful_early_worm_laugh": "Confirm before deleting a note.",
+    "trite_salty_eel_race": "Confirm Delete",
+    "sleek_this_earthworm_hug": "Infinite Scroll",
+    "jolly_empty_bullock_mend": "Confirm Follow",
+    "calm_male_wombat_relish": "Confirm before following/unfollowing a user.",
+    "wacky_inner_osprey_intend": "Confirm before reblogging a note.",
+    "honest_great_rooster_taste": "Confirm Reblog",
+    "patchy_basic_alligator_inspire": "Confirm Like",
+    "antsy_weak_raven_treat": "Confirm before liking a note.",
+    "fuzzy_orange_tuna_succeed": "Mentioned you",
+    "grand_proof_quail_read": "Reblogged your note",
+    "top_steep_scallop_care": "Followed you",
+    "swift_just_beetle_devour": "Liked your note",
+    "seemly_short_thrush_bloom": "Requested to follow you",
+    "weird_seemly_termite_scold": "Accepted your follow request",
+    "pretty_born_jackal_dial": "Language",
+    "tired_happy_lobster_pet": "Change the language of the interface. Requires a reload to apply.",
+    "keen_aware_goldfish_thrive": "English",
+    "vivid_mellow_sawfish_approve": "French",
+    "these_awful_ape_reside": "Pirate",
+    "gray_clean_shark_comfort": "The following URI parameters are required:",
+    "grand_spry_goldfish_embrace": "Invalid URI parameters",
+    "honest_factual_carp_aspire": "Are you sure you want to delete this emoji?",
+    "flat_safe_haddock_gaze": "Upload",
+    "orange_weird_parakeet_hug": "Image must be less than {count} bytes",
+    "solid_inclusive_owl_hug": "Shortcode must be less than {count} characters",
+    "key_ago_hound_emerge": "Description must be less than {count} characters",
+    "pink_sharp_carp_work": "Global emoji",
+    "dark_pretty_hyena_link": "Can be used by every user, not just you",
+    "home_cool_orangutan_hug": "Category must be less than {count} characters",
+    "sound_topical_gopher_offer": "Required",
+    "watery_left_shrimp_bless": "Description",
+    "weird_fun_jurgen_arise": "Useful for people with screen readers, or poor network conditions.",
+    "short_cute_jackdaw_comfort": "Category",
+    "happy_mild_fox_gleam": "Shortcode",
+    "glad_day_kestrel_amaze": "Should be short.",
+    "active_direct_bear_compose": "Image",
+    "lime_late_millipede_urge": "Recommended size: 128x128px. Every image type is allowed.",
+    "factual_gray_mouse_believe": "Uploading emoji...",
+    "cool_trite_gull_quiz": "Emoji uploaded!",
+    "kind_deft_myna_hint": "Failed to upload emoji.",
+    "frail_great_marten_pet": "Upload a new emoji to the server.",
+    "whole_icy_puffin_smile": "Upload Emoji"
+}
diff --git a/messages/fr.json b/messages/fr.json
new file mode 100644
index 0000000..50de5e2
--- /dev/null
+++ b/messages/fr.json
@@ -0,0 +1,325 @@
+{
+    "$schema": "https://inlang.com/schema/inlang-message-format",
+    "bland_chunky_sparrow_propel": "Acceuil",
+    "lost_trick_dog_grace": "Public",
+    "crazy_game_parrot_pave": "Local",
+    "real_tame_moose_greet": "Global",
+    "that_patchy_mare_snip": "Notifications",
+    "patchy_seemly_hound_grace": "Préférences",
+    "factual_arable_jurgen_endure": "Compte",
+    "tough_clean_wolf_gleam": "Apparence",
+    "legal_best_tadpole_rise": "Comportement",
+    "novel_trite_sloth_adapt": "Émojis",
+    "safe_green_mink_cook": "Rôles",
+    "short_zippy_felix_kick": "Versia Server",
+    "top_active_ocelot_cure": "Une instance de Versia Server",
+    "trite_real_sawfish_drum": "Navigation",
+    "close_short_kitten_coax": "Plus",
+    "salty_aloof_turkey_nudge": "Composer",
+    "quaint_low_felix_pave": "Mettre à jour",
+    "sunny_pink_hyena_walk": "Ajouter un compte",
+    "sharp_big_mallard_reap": "Se déconnecter",
+    "honest_few_baboon_pop": "Créer un compte",
+    "spicy_loved_giraffe_empower": "Actions du profil",
+    "cool_dark_tapir_belong": "Copier le nom d'utilisateur",
+    "yummy_moving_scallop_sail": "Copier les données de l'API",
+    "sunny_zany_jellyfish_pop": "Copier l'ID",
+    "ago_new_pelican_drip": "Copier le lien",
+    "solid_witty_zebra_walk": "Copier le lien (origine)",
+    "active_trite_lark_inspire": "Ouvrir l'origine",
+    "spare_wild_mole_intend": "Muter",
+    "misty_soft_sparrow_vent": "Bloquer",
+    "slow_chunky_chipmunk_hush": "Rafraîchir",
+    "great_few_jaguar_rise": "Signaler",
+    "flat_nice_worm_dream": "Copié dans le presse-papiers",
+    "ornate_tidy_coyote_grow": "Mutage de l'utilisateur...",
+    "empty_smug_raven_bloom": "Blocage de l'utilisateur...",
+    "real_every_macaw_wish": "Demande d'actualisation...",
+    "many_cool_fox_love": "Compte actualisé",
+    "gross_fancy_platypus_seek": "Inscrit en",
+    "real_gray_stork_seek": "Notes",
+    "teal_helpful_parakeet_hike": "Abonné•e•s",
+    "aloof_royal_samuel_startle": "Abonnements",
+    "brief_upper_otter_cuddle": "Se désabonner",
+    "weak_bright_larva_grasp": "Demandé",
+    "lazy_major_loris_grasp": "Suivre",
+    "honest_jolly_shell_blend": "Cet utilisateur est un développeur Versia.",
+    "nice_bad_grizzly_coax": "Développeur Versia",
+    "merry_red_shrimp_bump": "Automatisé",
+    "sweet_mad_jannes_create": "Ce compte n'est pas utilisé par une entité vivante.",
+    "many_fair_capybara_imagine": "Suivre",
+    "cuddly_even_tern_loop": "Suivre",
+    "soft_bold_ant_attend": "Annuler",
+    "quick_basic_peacock_bubble": "Abonnement en cours...",
+    "awake_quick_cuckoo_smile": "Utilisateur suivi",
+    "funny_aloof_swan_loop": "Se désabonner",
+    "cute_polite_oryx_blend": "Se désabonner",
+    "big_safe_guppy_mix": "Désabonnement...",
+    "misty_level_stingray_expand": "Utilisateur désabonné",
+    "witty_heroic_trout_cry": "Ajouté par vous",
+    "cuddly_such_swallow_hush": "Renommer",
+    "tense_quick_cod_favor": "Supprimer",
+    "slimy_awful_florian_sail": "Entrez un nouveau nom",
+    "teary_antsy_panda_aid": "Modifier",
+    "teary_tame_gull_bless": "Mise à jour du nom...",
+    "gaudy_lime_bison_adore": "Nom mis à jour.",
+    "weary_away_liger_zip": "Suppression de l'emoji...",
+    "crisp_whole_canary_tear": "Emoji supprimé.",
+    "mellow_yummy_jannes_cuddle": "Êtes-vous sûr de vouloir suivre {acct} ?",
+    "white_best_dolphin_catch": "Etes-vous sûr de vouloir vous désabonner de {acct} ?",
+    "bright_late_osprey_renew": "Bannière",
+    "great_level_lamb_sway": "Taille recommandée : plus de 1500x500px",
+    "safe_icy_bulldog_quell": "Avatar",
+    "aware_quiet_opossum_catch": "Taille recommandée : 400x400px",
+    "mild_known_mallard_jolt": "Nom d'affichage",
+    "lime_dry_skunk_loop": "Des émojis personnalisés peuvent être utilisés ici.",
+    "neat_silly_dog_prosper": "Nom d'utilisateur",
+    "petty_plane_tadpole_earn": "Changer ce nom brisera tous les liens vers votre profil.",
+    "next_caring_ladybug_hack": "Bio",
+    "stale_just_anaconda_earn": "Le Markdown et les émojis personnalisés sont utilisables.",
+    "aqua_mealy_toucan_pride": "Champs personnalisés",
+    "front_north_eel_gulp": "Ajouter un champ",
+    "dirty_moving_shark_emerge": "Activer les demandes de suivi",
+    "bright_fun_mouse_boil": "Une approbation sera nécessaire pour les nouveaux abonnés.",
+    "red_vivid_cuckoo_spark": "Autoriser la découverte de compte",
+    "plain_zany_donkey_dart": "Permettez à votre compte d'être trouvé dans les résultats de recherche.",
+    "jolly_noble_sloth_breathe": "Mise à jour du profil...",
+    "tough_alive_niklas_promise": "Aucun changement",
+    "spry_honest_kestrel_arrive": "Profil mis à jour",
+    "civil_icy_ant_mend": "La bannière doit être inférieure à {size} octets",
+    "zippy_caring_raven_edit": "L'avatar doit être inférieur à {size} octets",
+    "still_upper_otter_dine": "Le nom d'utilisateur ne peut contenir que des lettres minuscules, des chiffres, des traits de soulignement et des tirets",
+    "aware_house_dolphin_win": "Doit comporter au moins 3 caractères",
+    "weary_fresh_dragonfly_bless": "Doit être une adresse e-mail valide",
+    "sunny_novel_otter_glow": "Doit comporter au moins 3 caractères",
+    "fluffy_soft_wolf_cook": "Email (ou nom d'utilisateur)",
+    "livid_bright_wallaby_quiz": "Mot de passe",
+    "fuzzy_sea_moth_absorb": "Se connecter",
+    "tidy_tidy_cow_cut": "Ou continuer avec",
+    "slow_these_kestrel_sail": "Accepter",
+    "weary_steep_yak_embrace": "Rejeter",
+    "cool_slimy_coyote_affirm": "Acceptation de la demande de suivi...",
+    "busy_awful_mouse_jump": "Demande de suivi acceptée.",
+    "front_sunny_penguin_flip": "Rejet de la demande de suivi...",
+    "green_flat_mayfly_trust": "Demande de suivi rejetée.",
+    "large_vivid_horse_catch": "a reblogué•e",
+    "top_cute_bison_nudge": "Blocage de l'utilisateur...",
+    "main_weary_racoon_peek": "Utilisateur bloqué",
+    "calm_icy_weasel_twirl": "Supprimer la note",
+    "gray_fun_toucan_slide": "Etes-vous sûr de vouloir supprimer cette note ?",
+    "royal_best_tern_transform": "Supprimer",
+    "new_funny_fox_boil": "Suppression de la note...",
+    "green_tasty_bumblebee_beam": "Note supprimée",
+    "many_misty_parakeet_fall": "Actions sur la note",
+    "front_lime_grizzly_persist": "Modifier",
+    "real_green_clownfish_pet": "Supprimer et reformuler",
+    "clean_yummy_owl_reside": "Cliquez pour copier",
+    "livid_tangy_lionfish_clasp": "Contenu sensible",
+    "sour_seemly_bird_hike": "Ce contenu est sensible",
+    "bald_direct_turtle_win": "Montrer",
+    "known_flaky_cockroach_dash": "Cacher",
+    "that_misty_mule_arrive": "Afficher moins",
+    "lazy_honest_mammoth_bump": "Afficher plus",
+    "dark_spare_goldfish_charm": "{count} caractères",
+    "drab_tense_turtle_comfort": "Répondre",
+    "vexed_fluffy_clownfish_dance": "Dé-aimer",
+    "royal_close_samuel_scold": "Aimer",
+    "lime_neat_ox_stab": "Dé-rebloguer",
+    "aware_helpful_marlin_drop": "Rebloguer",
+    "true_shy_jackal_drip": "Citer",
+    "busy_merry_cowfish_absorb": "Actions",
+    "slimy_least_ray_aid": "Aimer note",
+    "stale_new_ray_jolt": "Etes-vous sûr de vouloir aimer cette note ?",
+    "slimy_candid_tiger_read": "En cours...",
+    "mealy_slow_buzzard_commend": "Note aimé",
+    "odd_strong_halibut_prosper": "Dé-aimer note",
+    "slow_blue_parrot_savor": "Etes-vous sûr de vouloir dé-aimer cette note ?",
+    "busy_active_leopard_strive": "En cours...",
+    "fresh_direct_bear_affirm": "Note dé-aimée",
+    "best_mellow_llama_surge": "Rebloguer note",
+    "salty_plain_mallard_gaze": "Etes-vous sûr de vouloir rebloguer cette note ?",
+    "late_sunny_cobra_scold": "Rebloguage de la note...",
+    "weird_moving_hawk_lift": "Note rebloguée",
+    "main_fancy_octopus_loop": "Dé-rebloguer la note",
+    "odd_alive_swan_express": "Etes-vous sûr de vouloir dé-rebloguer cette note ?",
+    "white_sharp_gorilla_embrace": "Dé-rebloguage de la note...",
+    "royal_polite_moose_catch": "Note dé-rebloguée",
+    "mean_mean_badger_inspire": "Valeur",
+    "antsy_whole_alligator_blink": "Confirmer",
+    "game_tough_seal_adore": "Mentionner quelqu'un",
+    "plane_born_koala_hope": "Activer le Markdown",
+    "blue_ornate_coyote_tickle": "Insérer un emoji",
+    "top_patchy_earthworm_vent": "Joindre un fichier",
+    "frail_broad_mallard_dart": "Marquer comme sensible",
+    "gaudy_strong_puma_slide": "Sauvegarder",
+    "free_teal_bulldog_learn": "Envoyer",
+    "last_mean_peacock_zip": "Peut être vu par tout le monde.",
+    "funny_slow_jannes_walk": "Non répertorié",
+    "grassy_empty_raven_startle": "Privé",
+    "pretty_bold_baboon_wave": "Direct",
+    "grand_strong_gibbon_race": "Peut être vu par toute personne avec le lien.",
+    "white_teal_ostrich_yell": "Ne peut être vu que par vos abonnés.",
+    "lucky_mean_robin_link": "Ne peut être vu que par les utilisateurs mentionnés.",
+    "wise_late_fireant_walk": "Chargement des données de la note...",
+    "loved_busy_mantis_slide": "Répondre",
+    "tired_grassy_vulture_forgive": "Répondre à cette note",
+    "livid_livid_nils_snip": "Citer cette note",
+    "brief_cool_capybara_fear": "Composer une nouvelle note",
+    "chunky_dull_marlin_trip": "Composer",
+    "steep_suave_fish_snap": "Plus de données.",
+    "muddy_bland_shark_accept": "Vous avez tellement défilé•e, qu'il il n'y a plus rien à afficher.",
+    "petty_honest_fish_stir": "Soit vous avez tout rattrapé, soit il n'y a rien à montrer.",
+    "fine_arable_lemming_fold": "Il n'y a rien ici.",
+    "gaudy_bland_gorilla_talk": "Charger plus",
+    "fancy_this_wasp_renew": "Votre session a expirée",
+    "real_weird_deer_stop": "Vous avez été déconnecté•e. Veuillez vous reconnecter.",
+    "sunny_quick_lionfish_flip": "Non connecté•e",
+    "brave_known_pelican_drip": "Cette page nécessite une authentification. Veuillez vous connecter pour continuer.",
+    "chunky_awake_mallard_grow": "Note",
+    "steep_sour_warthog_aim": "Chargement",
+    "tough_nice_ox_drum": "Profil",
+    "noble_cute_ocelot_aim": "Créer un compte",
+    "novel_fine_stork_snap": "Connectez-vous à votre compte.",
+    "smug_main_whale_snip": "Saisissez vos informations d'identification pour <code>{host}</code> .",
+    "aware_awful_crow_spur": "Voici votre code",
+    "mushy_soft_lizard_propel": "Vous vous êtes connecté avec succès.",
+    "short_arable_leopard_zap": "Collez le code suivant dans votre application :",
+    "spare_aqua_warthog_mend": "Code d'autorisation",
+    "fresh_broad_cockroach_radiate": "Autoriser « {application} » ?",
+    "gross_antsy_kangaroo_succeed": "Vous vous connectez à <b>{application}</b> avec votre compte.",
+    "hour_close_giraffe_mop": "Cela permet à <b>{application}</b> d'effectuer les actions listées.",
+    "last_spare_polecat_reside": "Autoriser",
+    "lower_factual_frog_evoke": "Autorisation",
+    "awake_ago_capybara_kick": "$VERB vos informations de compte",
+    "teary_zesty_racoon_transform": "$VERB votre liste de blocage",
+    "whole_flaky_nuthatch_rush": "$VERB vos signets",
+    "still_spicy_lionfish_quell": "$VERB vos favoris",
+    "away_mean_dolphin_empower": "$VERB vos filtres",
+    "sleek_empty_penguin_radiate": "$VERB vos suivis",
+    "every_silly_racoon_lift": "$VERB vos listes",
+    "top_careful_scallop_clip": "$VERB votre liste de mutage",
+    "this_short_bulldog_walk": "$VERB vos notifications",
+    "fresh_odd_rook_forgive": "Effectuer des recherches",
+    "witty_whole_capybara_pull": "$VERB vos notes",
+    "agent_warm_javelina_blink": "Modifier vos conversations",
+    "dirty_red_jellyfish_ascend": "Ajouter des médias",
+    "crisp_vivid_seahorse_tend": "Signaler des utilisateurs",
+    "teary_such_jay_fade": "Lire et modifier",
+    "smug_safe_warthog_dare": "Lire",
+    "loose_large_blackbird_peek": "Modifier",
+    "late_mean_capybara_fade": "Succès",
+    "brave_acidic_lobster_fetch": "Votre mot de passe a été réinitialisé. Vous pouvez désormais vous connecter avec votre nouveau mot de passe.",
+    "every_tangy_koala_persist": "Retour à la page d'accueil",
+    "good_plane_gazelle_glow": "Votre mot de passe a été réinitialisé par un administrateur. Veuillez le modifier ici.",
+    "east_loud_lobster_explore": "Info",
+    "solid_slow_platypus_talk": "Saisissez votre nouveau mot de passe ci-dessous. Assurez-vous de l'enregistrer dans un gestionnaire de mots de passe.",
+    "tired_green_sloth_evoke": "Réinitialisez votre mot de passe",
+    "true_male_gadfly_stab": "Nouveau mot de passe",
+    "awful_cozy_jannes_rise": "Confirmez le mot de passe",
+    "noisy_round_skate_yell": "Réinitialiser",
+    "smart_bold_macaw_aid": "Doit comporter au moins {count} caractères",
+    "dry_smug_goldfish_promise": "Doit comporter au maximum {count} caractères",
+    "candid_fancy_leopard_prosper": "Les mots de passe ne correspondent pas",
+    "arable_arable_herring_lead": "Réinitialiser le mot de passe",
+    "broad_whole_herring_reside": "Préférences",
+    "tasty_late_termite_sew": "Compte",
+    "actual_mean_cow_dare": "Préférences du compte",
+    "suave_smart_mantis_climb": "Émojis",
+    "lucky_suave_myna_adore": "Demandez à votre administrateur d’ajouter des émojis.",
+    "actual_steep_llama_rest": "Aucun emoji trouvé.",
+    "mild_many_dolphin_mend": "Préférences d'emoji",
+    "lucky_ago_rat_pinch": "Non classé",
+    "empty_awful_lark_dart": "Compte non trouvé.",
+    "clean_even_mayfly_tap": "Changez d'utilisateur ou réessayez plus tard.",
+    "early_last_ocelot_praise": "Créer un compte",
+    "sea_maroon_peacock_yell": "Ne peut contenir que des lettres minuscules, des chiffres, des tirets ou des traits de soulignement",
+    "civil_loose_coyote_jump": "Vous devez accepter les conditions d'utilisation",
+    "plane_quick_chipmunk_rush": "J'accepte les",
+    "glad_last_crow_dine": "Conditions d'Utilisation",
+    "left_maroon_myna_drip": "Vous vous êtes inscrit. Vous pouvez désormais vous connecter avec votre nouveau compte.",
+    "steep_aqua_fox_harbor": "Fils",
+    "silly_sour_fireant_fear": "Échec de la création de l'application",
+    "level_due_ox_greet": "Connexion...",
+    "candid_frail_lion_value": "Échec de la génération de l'URL d'authentification",
+    "wide_least_samuel_conquer": "Style de la barre latérale gauche.",
+    "fluffy_north_crow_blink": "Encart",
+    "day_polite_newt_loop": "Barre latérale",
+    "jolly_mad_jackdaw_assure": "Flottant",
+    "agent_misty_firefox_arise": "Forme de tous les avatars utilisateurs.",
+    "polite_awful_ladybug_greet": "Rond",
+    "sad_each_cowfish_lock": "Carré",
+    "fit_cool_bulldog_dine": "Forme d'avatar",
+    "deft_seemly_donkey_slide": "Style de la barre latérale",
+    "quaint_clear_boar_attend": "Rendu MFM",
+    "aloof_helpful_larva_spur": "Afficher le Misskey-Flavoured Markdown",
+    "smart_awake_dachshund_view": "CSS personnalisé",
+    "loved_topical_rat_coax": "CSS personnalisé, appliqué à l'interface utilisateur.",
+    "wise_neat_ox_buzz": "Sombre",
+    "each_strong_snail_aid": "Clair",
+    "helpful_raw_seal_nurture": "Système",
+    "male_stout_florian_feast": "Thème de l'interface.",
+    "hour_elegant_mink_grip": "Thème",
+    "loud_raw_sheep_imagine": "Afficher les émojis personnalisés",
+    "inclusive_pink_tuna_enjoy": "Afficher les émojis personnalisés. Nécessite un rechargement de la page.",
+    "fair_swift_elephant_hunt": "Flouter les contenus sensibles",
+    "gray_minor_bee_endure": "Floute les notes marquées comme sensibles/spoiler.",
+    "stock_large_marten_comfort": "URL d'arrière-plan",
+    "mean_weird_donkey_stab": "Change l'image d'arrière-plan du site.",
+    "tired_jumpy_rook_slurp": "Barre de notifications",
+    "wide_new_robin_empower": "Affiche une barre latérale avec des notifications.",
+    "less_early_lionfish_honor": "Emojis Fluents (version plate)",
+    "many_tasty_midge_zoom": "Émojis Fluent",
+    "shy_clear_spider_cook": "Émojis Noto",
+    "new_brave_maggot_relish": "Émojis Twitter",
+    "slimy_sound_termite_hug": "Système",
+    "warm_round_dove_skip": "Thème utilisé pour le rendu des émojis. Nécessite un rechargement de la page.",
+    "weak_bad_martin_glow": "Thème Emoji",
+    "equal_blue_zebra_launch": "Ctrl+Entrée pour envoyer",
+    "heavy_pink_meerkat_affirm": "Envoyez une note en appuyant sur ⌘+Entrée ou Ctrl+Entrée.",
+    "north_nimble_turkey_transform": "Popup sur les profils",
+    "bold_moving_fly_savor": "Afficher un popup d'iinformations lorsque vous survolez l'avatar d'un utilisateur.",
+    "plane_dark_salmon_pout": "Charger automatiquement plus de notes lorsque vous atteignez le bas de la page.",
+    "helpful_early_worm_laugh": "Confirmer avant de supprimer une note.",
+    "trite_salty_eel_race": "Confirmer les suppressions",
+    "sleek_this_earthworm_hug": "Défilement infini",
+    "jolly_empty_bullock_mend": "Confirmer suivre",
+    "calm_male_wombat_relish": "Confirmez avant de suivre/ne plus suivre un utilisateur.",
+    "wacky_inner_osprey_intend": "Confirmer avant de rebloguer une note.",
+    "honest_great_rooster_taste": "Confirmer les reblogs",
+    "patchy_basic_alligator_inspire": "Confirmer J'aime",
+    "antsy_weak_raven_treat": "Confirmer avant d'aimer une note.",
+    "fuzzy_orange_tuna_succeed": "Vous a mentionné•e",
+    "grand_proof_quail_read": "A reblogué•e votre note",
+    "top_steep_scallop_care": "Vous a suivi•e",
+    "swift_just_beetle_devour": "A aimé•e votre note",
+    "seemly_short_thrush_bloom": "Fait une demande de suivi",
+    "weird_seemly_termite_scold": "A accepté•e votre demande de suivi",
+    "pretty_born_jackal_dial": "Langue",
+    "tired_happy_lobster_pet": "Changer la langue de l'interface. Nécessite un rechargement.",
+    "keen_aware_goldfish_thrive": "Anglais",
+    "vivid_mellow_sawfish_approve": "Français",
+    "these_awful_ape_reside": "Pirate",
+    "gray_clean_shark_comfort": "Les paramètres de l'URI suivants sont obligatoires:",
+    "grand_spry_goldfish_embrace": "Paramètres URI non valides",
+    "honest_factual_carp_aspire": "Etes-vous sûr de vouloir supprimer cet emoji ?",
+    "flat_safe_haddock_gaze": "Ajouter",
+    "orange_weird_parakeet_hug": "L'image doit être inférieure à {count} octets",
+    "solid_inclusive_owl_hug": "Le nom doit contenir moins de {count} caractères",
+    "key_ago_hound_emerge": "La description doit comporter moins de {count} caractères",
+    "pink_sharp_carp_work": "Émoji global",
+    "dark_pretty_hyena_link": "Peut être utilisé par tous les utilisateurs, pas juste vous",
+    "home_cool_orangutan_hug": "La catégorie doit comporter moins de {count} caractères",
+    "sound_topical_gopher_offer": "Requis",
+    "watery_left_shrimp_bless": "Description",
+    "weird_fun_jurgen_arise": "Utile pour les personnes disposant de lecteurs d'écran ou de mauvaises conditions de réseau.",
+    "short_cute_jackdaw_comfort": "Catégorie",
+    "happy_mild_fox_gleam": "Nom",
+    "active_direct_bear_compose": "Image",
+    "lime_late_millipede_urge": "Taille recommandée : 128x128px. Tous les types d'images sont autorisés.",
+    "dirty_inclusive_meerkat_nudge": "Annuler",
+    "factual_gray_mouse_believe": "Ajout de l'emoji...",
+    "cool_trite_gull_quiz": "Emoji ajouté!",
+    "kind_deft_myna_hint": "Échec de l'ajout de l'emoji.",
+    "frail_great_marten_pet": "Ajoutez un nouvel emoji sur le serveur.",
+    "whole_icy_puffin_smile": "Ajouter un Emoji"
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5580686..3e0de10 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,12 +3,13 @@ export default defineNuxtConfig({
     modules: [
         "@nuxtjs/tailwindcss",
         "@vueuse/nuxt",
-        "nuxt-headlessui",
         "@nuxt/fonts",
-        "@vee-validate/nuxt",
         "nuxt-security",
         "@vite-pwa/nuxt",
+        "shadcn-nuxt",
+        "@nuxtjs/color-mode",
     ],
+    ssr: false,
     vue: {
         compilerOptions: {
             isCustomElement: (tag) => tag === "iconify-icon",
@@ -17,9 +18,20 @@ export default defineNuxtConfig({
     components: {
         dirs: [],
     },
+    tailwindcss: {
+        // Don't inject the default @tailwind utilities CSS
+        // To avoid conflicts with our own styles
+        cssPath: false,
+    },
     future: {
         compatibilityVersion: 4,
     },
+    shadcn: {
+        componentDir: "./components/ui",
+    },
+    colorMode: {
+        classSuffix: "",
+    },
     compatibilityDate: "2024-11-05",
     pwa: {
         manifest: {
@@ -226,10 +238,13 @@ export default defineNuxtConfig({
             ],
             htmlAttrs: { lang: "en-us" },
         },
+        rootAttrs: {
+            "vaul-drawer-wrapper": true,
+        },
         keepalive: true,
     },
     nitro: {
-        preset: "bun",
+        preset: "static",
         minify: true,
         prerender: {
             failOnError: true,
@@ -246,15 +261,6 @@ export default defineNuxtConfig({
             },
         ],
     },
-    veeValidate: {
-        autoImports: true,
-        componentNames: {
-            Form: "VeeForm",
-            Field: "VeeField",
-            FieldArray: "VeeFieldArray",
-            ErrorMessage: "VeeErrorMessage",
-        },
-    },
     runtimeConfig: {
         public: {
             apiHost: "https://social.lysand.org",
diff --git a/package.json b/package.json
index 6d226ec..7326447 100644
--- a/package.json
+++ b/package.json
@@ -20,41 +20,45 @@
         "url": "git+https://github.com/versia-pub/frontend.git"
     },
     "scripts": {
-        "build": "nuxt build",
+        "build": "paraglide-js compile --project ./project.inlang --outdir ./paraglide && nuxt build",
         "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bun --bun nuxt dev --https --https.cert config/versia-fe.localhost.pem --https.key config/versia-fe.localhost-key.pem --host versia-fe.localhost",
         "generate": "nuxt generate",
         "emojis:generate": "bun run utils/emojis.ts",
-        "postinstall": "nuxt prepare",
+        "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./paraglide && nuxt prepare",
+        "rebuild-i18n": "paraglide-js compile --project ./project.inlang --outdir ./paraglide",
         "lint": "bunx @biomejs/biome check .",
         "check": "bunx tsc -p ."
     },
     "dependencies": {
-        "@ark-ui/vue": "^4.4.2",
-        "@nuxt/fonts": "^0.10.2",
+        "@nuxt/fonts": "^0.10.3",
+        "@nuxtjs/color-mode": "3.5.2",
         "@tailwindcss/typography": "^0.5.15",
-        "@vee-validate/nuxt": "^4.14.7",
         "@vee-validate/zod": "^4.14.7",
-        "@versia/client": "^0.1.2",
+        "@versia/client": "0.1.4",
         "@vite-pwa/nuxt": "^0.10.6",
         "@vueuse/core": "^12.0.0",
         "@vueuse/nuxt": "^12.0.0",
-        "c12": "^2.0.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "embla-carousel-vue": "^8.5.1",
         "fastest-levenshtein": "^1.0.16",
         "html-to-text": "^9.0.5",
-        "iconify-icon": "^2.1.0",
+        "lucide-vue-next": "^0.468.0",
         "magic-regexp": "^0.8.0",
         "mitt": "^3.0.1",
         "nanoid": "^5.0.9",
         "nuxt": "^3.14.1592",
-        "nuxt-headlessui": "^1.2.0",
-        "nuxt-security": "^2.1.4",
-        "nuxt-shiki": "^0.3.0",
-        "overlayscrollbars": "^2.10.1",
-        "overlayscrollbars-vue": "^0.5.9",
-        "shiki": "^1.24.0",
+        "nuxt-security": "^2.1.5",
+        "radix-vue": "^1.9.11",
+        "shadcn-nuxt": "0.11.3",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
+        "vaul-vue": "^0.2.0",
+        "vee-validate": "^4.14.7",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
-        "zod": "^3.23.8"
+        "vue-sonner": "^1.3.0",
+        "zod": "^3.24.1"
     },
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",
@@ -62,12 +66,13 @@
         "@iconify-json/fluent-emoji-flat": "^1.2.1",
         "@iconify-json/noto": "^1.2.1",
         "@iconify-json/twemoji": "^1.2.1",
-        "@iconify/utils": "^2.1.33",
+        "@iconify/utils": "^2.2.0",
         "@nuxtjs/tailwindcss": "^6.12.2",
         "@tailwindcss/forms": "^0.5.9",
         "@types/html-to-text": "^9.0.4",
         "typescript": "^5.7.2",
-        "vue-tsc": "^2.1.10"
+        "vue-tsc": "^2.1.10",
+        "@inlang/paraglide-js": "1.11.3"
     },
     "trustedDependencies": [
         "@biomejs/biome",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5a7aa6e..4ac7f9e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,7 +35,7 @@
     "categories": ["Other"],
     "type": "module",
     "engines": {
-        "bun": ">=1.1.34"
+        "bun": ">=1.1.38"
     },
     "exports": {
         ".": {
@@ -48,5 +48,5 @@
         }
     },
     "keywords": ["typescript", "vue", "tailwindcss"],
-    "packageManager": "bun@1.1.34"
+    "packageManager": "bun@1.1.38"
 }
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index 8d89906..9b0a94c 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -1,21 +1,27 @@
 <template>
-    <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
-        <Note v-for="note of context?.ancestors" :render-replies="false" :thread-view="true" :borders="false" :element="note" />
-        <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
-            <Note class="!rounded-none border-2 -m-[2px] border-primary-500" v-if="note" :render-replies="false":element="note" />
-        </div>
-        <Note v-for="note of context?.descendants" :element="note" :render-replies="false" :thread-view="note.id !== context?.descendants.at(-1)?.id" :borders="false" :thread-view-top="true" />
+    <div v-if="loaded" class="mx-auto max-w-2xl w-full pb-72 *:rounded space-y-4 *:border *:border-border/50">
+        <Note v-for="note of context?.ancestors" :note="note" />
+        <Note v-if="note" :note="note" />
+        <Note v-for="note of context?.descendants" :note="note" />
     </div>
-    <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
-        <Note v-for="_ of 5" :skeleton="true" />
+
+    <div v-else class="p-4 flex items-center justify-center h-48">
+        <Loader class="size-8 animate-spin" />
     </div>
 </template>
 
 <script setup lang="ts">
-import Note from "~/components/social-elements/notes/note.vue";
+import { Loader } from "lucide-vue-next";
+import Note from "~/components/notes/note.vue";
+import * as m from "~/paraglide/messages.js";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.chunky_awake_mallard_grow(),
+        },
+    ],
 });
 
 const element = ref<HTMLElement | null>(null);
@@ -49,10 +55,16 @@ watch(
     },
 );
 
-useServerSeoMeta({
-    title: note.value?.account.display_name,
-    description: note.value?.content,
-    ogImage: note.value?.media_attachments[0]?.preview_url,
+useSeoMeta({
+    title: computed(() =>
+        note.value
+            ? note.value.account.display_name
+            : m.steep_sour_warthog_aim(),
+    ),
+    description: computed(() => (note.value ? note.value.content : undefined)),
+    ogImage: computed(() =>
+        note.value ? note.value.media_attachments[0]?.preview_url : undefined,
+    ),
     robots: computed(() => ({
         noindex: !!note.value?.account.noindex,
         nofollow: !!note.value?.account.noindex,
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index 9ece1fb..6baee0a 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -1,61 +1,53 @@
 <template>
-    <ErrorBoundary>
-        <div class="mx-auto max-w-2xl w-full">
-            <TimelineScroller>
-                <AccountProfile :account="account ?? undefined" />
-                <AccountTimeline v-if="accountId" :id="accountId" :key="accountId" />
-            </TimelineScroller>
+    <div class="mx-auto max-w-2xl w-full space-y-2">
+        <div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
+            <Loader class="size-8 animate-spin" />
         </div>
-    </ErrorBoundary>
+        <TimelineScroller v-else-if="account">
+            <AccountProfile :account="account" />
+            <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>
+    </div>
 </template>
 
 <script setup lang="ts">
-import type { Account } from "@versia/client/types";
-import ErrorBoundary from "~/components/errors/ErrorBoundary.vue";
-import AccountProfile from "~/components/social-elements/users/Account.vue";
+import { Loader } from "lucide-vue-next";
+import AccountProfile from "~/components/profiles/profile.vue";
 import AccountTimeline from "~/components/timelines/account.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
-
-definePageMeta({
-    layout: "app",
-});
+import * as m from "~/paraglide/messages.js";
 
 const route = useRoute();
 const username = (route.params.username as string).startsWith("@")
     ? (route.params.username as string).substring(1)
     : (route.params.username as string);
 
-const accounts = useAccountSearch(client, username);
-watch(accounts, (newValue) => {
-    if (Array.isArray(newValue)) {
-        if (
-            !newValue.find(
-                (account) =>
-                    account.acct.toLowerCase() === username.toLowerCase(),
-            )
-        ) {
-            useEvent("error", {
-                title: "Account not found",
-                message: `The account <code>@${username}</code> does not exist.`,
-                code: "ERR_ACCOUNT_NOT_FOUND",
-            });
-        }
-    }
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.tough_nice_ox_drum(),
+        },
+    ],
 });
-const account = computed<Account | null>(
-    () =>
-        accounts.value?.find(
-            (account) => account.acct.toLowerCase() === username.toLowerCase(),
-        ) ?? null,
-);
+
+const { account, isLoading } = useAccountFromAcct(client, username);
 const accountId = computed(() => account.value?.id ?? undefined);
 
-useServerSeoMeta({
+useSeoMeta({
     title: computed(() =>
-        account.value ? account.value.display_name : "Loading",
+        account.value ? account.value.display_name : m.steep_sour_warthog_aim(),
     ),
     ogTitle: computed(() =>
-        account.value ? account.value.display_name : "Loading",
+        account.value ? account.value.display_name : m.steep_sour_warthog_aim(),
     ),
     ogImage: computed(() => (account.value ? account.value.avatar : undefined)),
     ogType: "profile",
diff --git a/pages/_test/demo.vue b/pages/_test/demo.vue
deleted file mode 100644
index cd67366..0000000
--- a/pages/_test/demo.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <ButtonsDemo />
-</template>
-
-<script setup lang="ts">
-import ButtonsDemo from "~/packages/ui/demo/buttons-demo.vue";
-
-definePageMeta({
-    layout: "app",
-});
-</script>
\ No newline at end of file
diff --git a/pages/about/apps.vue b/pages/about/apps.vue
deleted file mode 100644
index 0734ac1..0000000
--- a/pages/about/apps.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <div class="px-4 py-20 prose prose-invert mx-auto max-w-md">
-        <h2>Where is the mobile app?</h2>
-        <p>Versia Server is compatible with the Mastodon API, meaning it can be used with any Mastodon-compatible
-            client. This
-            includes the official Mastodon app, as well as many third-party clients.</p>
-        <h2>Recommended Clients</h2>
-        <ul class="w-full flex flex-col gap-3 mt-4 not-prose">
-            <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
-                <a :href="client.link" target="_blank"
-                    class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                    <img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
-                    <div class="flex flex-col justify-between items-start">
-                        <h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
-                        <span class="underline text-primary-700">{{ client.link }}</span>
-                    </div>
-                </a>
-            </li>
-        </ul>
-        <p>
-            Many other clients exist, but <strong class="font-bold">they have not been tested for
-                compatibility</strong>. Bug reports are nevertheless welcome.
-        </p>
-
-        <h2>Main Issues</h2>
-        <ul>
-            <li>File uploads are inconsistent and don't work a lot of the time</li>
-        </ul>
-
-        <p>
-            Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                target="_blank" class="underline text-primary-700">the issue tracker</a>.
-        </p>
-    </div>
-</template>
-
-<script lang="ts" setup>
-definePageMeta({
-    layout: "app",
-});
-</script>
\ No newline at end of file
diff --git a/pages/global.vue b/pages/global.vue
new file mode 100644
index 0000000..2f40dfc
--- /dev/null
+++ b/pages/global.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="mx-auto max-w-2xl w-full">
+        <TimelineScroller>
+            <Global />
+        </TimelineScroller>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Global from "~/components/timelines/global.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: m.real_tame_moose_greet(),
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.steep_aqua_fox_harbor(),
+        },
+        {
+            text: m.real_tame_moose_greet(),
+            href: "/global",
+        },
+    ],
+});
+</script>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
index 0507393..ebad67b 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,18 +1,31 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
         <TimelineScroller>
-            <Greeting />
             <Home />
         </TimelineScroller>
     </div>
 </template>
 
 <script setup lang="ts">
-import Greeting from "~/components/headers/greeting.vue";
 import Home from "~/components/timelines/home.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: "Home",
+});
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.steep_aqua_fox_harbor(),
+        },
+        {
+            text: m.bland_chunky_sparrow_propel(),
+            href: "/home",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 3f3578c..28d9a7c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,19 +1,40 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
         <TimelineScroller>
-            <Greeting />
-            <Public />
+            <Home v-if="identity" />
+            <Public v-else />
         </TimelineScroller>
     </div>
 </template>
 
 
 <script setup lang="ts">
-import Greeting from "~/components/headers/greeting.vue";
+import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: identity.value
+        ? m.bland_chunky_sparrow_propel()
+        : m.lost_trick_dog_grace(),
+});
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.steep_aqua_fox_harbor(),
+        },
+        identity.value
+            ? {
+                  text: m.bland_chunky_sparrow_propel(),
+                  href: "/home",
+              }
+            : {
+                  text: m.lost_trick_dog_grace(),
+                  href: "/public",
+              },
+    ],
 });
 </script>
\ No newline at end of file
diff --git a/pages/loader.vue b/pages/loader.vue
new file mode 100644
index 0000000..942d15d
--- /dev/null
+++ b/pages/loader.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="p-6 flex items-center justify-center h-dvh w-dvw">
+        <div class="flex flex-col items-center justify-center gap-4">
+            <Loader class="animate-spin size-8" />
+            <!-- <p class="text-xl font-semibold tracking-tight">Versia Frontend</p> -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Loader } from "lucide-vue-next";
+</script>
\ No newline at end of file
diff --git a/pages/local.vue b/pages/local.vue
index b193f83..750a7a2 100644
--- a/pages/local.vue
+++ b/pages/local.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
         <TimelineScroller>
-            <Greeting />
             <Local />
         </TimelineScroller>
     </div>
@@ -9,11 +8,24 @@
 
 
 <script lang="ts" setup>
-import Greeting from "~/components/headers/greeting.vue";
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: m.crazy_game_parrot_pave(),
+});
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.steep_aqua_fox_harbor(),
+        },
+        {
+            text: m.crazy_game_parrot_pave(),
+            href: "/local",
+        },
+    ],
 });
 </script>
\ No newline at end of file
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 3a46a95..14e0362 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -12,7 +12,6 @@
             </button>
         </div>
         <TimelineScroller v-else>
-            <Greeting />
             <div class="rounded overflow-hidden">
                 <Notifications />
             </div>
@@ -21,11 +20,22 @@
 </template>
 
 <script lang="ts" setup>
-import Greeting from "~/components/headers/greeting.vue";
 import Notifications from "~/components/timelines/notifications.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: m.that_patchy_mare_snip(),
+});
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.that_patchy_mare_snip(),
+            href: "/notifications",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>
\ No newline at end of file
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index 1a9696d..f608234 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -1,165 +1,96 @@
+<script setup lang="ts">
+import { Client } from "@versia/client";
+import { AlertCircle, Loader } from "lucide-vue-next";
+import UserAuthForm from "~/components/oauth/login.vue";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+useHead({
+    title: m.fuzzy_sea_moth_absorb(),
+});
+
+const host = new URL(useBaseUrl().value).host;
+const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
+const {
+    error,
+    error_description,
+    redirect_uri,
+    response_type,
+    client_id,
+    scope,
+    state,
+} = useUrlSearchParams();
+const hasValidUrlSearchParams =
+    redirect_uri && response_type && client_id && scope;
+</script>
+
 <template>
-    <div class="flex min-h-screen relative flex-col gap-10 justify-center py-12 px-8">
-        <img crossorigin="anonymous" src="https://cdn.versia.pub/branding/icon.svg" alt="Versia logo"
-            class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
-        <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
-            <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
-                :action="redirectUrl.toString()">
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
-
-                <div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
-                    <h2 class="font-bold text-lg">An error occured</h2>
-                    <span class="text-sm">{{ params.error_description }}</span>
-                </div>
-
-                <VeeField name="identifier" as="div" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="identifier">Username or Email</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <TextInput id="identifier" placeholder="joemama" autocomplete="email username" required
-                            v-bind="field" :is-invalid="!!errorMessage" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="password" as="div" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="password">Password</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <PasswordInput id="password" placeholder="hunter2" autocomplete="current-password" required
-                            v-bind="field" :is-invalid="!!errorMessage" />
-                    </Field>
-                </VeeField>
-
-                <div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full space-y-3">
-                    <div
-                        class="flex items-center text-center w-full after:border-b after:border-dark-200 after:flex-1 after:ml-2 before:border-b before:border-dark-200 before:flex-1 before:mr-2">
-                        <h2 class="text-sm text-gray-200 font-semibold">Or sign in with</h2>
-                    </div>
-                    <div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
-                        <a v-for="provider of ssoConfig.providers" :key="provider.id"
-                            :href="issuerRedirectUrl(provider.id)">
-                            <Button theme="secondary" class="flex flex-row w-full items-center justify-center gap-3">
-                                <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
-                                    class="w-6 h-6" />
-                                <div class="flex flex-col gap-0 justify-center">
-                                    <h3 class="font-bold">{{ provider.name }}</h3>
-                                </div>
-                            </Button>
-                        </a>
-                    </div>
-                </div>
-
-                <p class="text-xs text-gray-300">
-                    You are signing in to <strong>{{ hostname }}</strong>. If you did not intend to sign in
-                    here, please close this page.
-                </p>
-
-                <Button theme="primary" type="submit" class="w-full">Sign in</Button>
-            </VeeForm>
+    <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"
+            :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" />
+            <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" />
+                {{ instance?.title }}
+            </div>
+            <!-- <div class="relative z-20 mt-auto">
+                <blockquote class="space-y-2">
+                    <p class="text-lg">
+                        &ldquo;This library has saved me countless hours of work and
+                        helped me deliver stunning designs to my clients faster than
+                        ever before.&rdquo;
+                    </p>
+                    <footer class="text-sm">
+                        Sofia Davis
+                    </footer>
+                </blockquote>
+            </div> -->
         </div>
-        <div v-else class="mx-auto max-w-md">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
-                parameters
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
-                through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
-                    API</strong> client to access this page.
-            </p>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
-            <ul class="w-full flex flex-col gap-3 mt-4">
-                <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
-                    <a :href="client.link" target="_blank"
-                        class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                        <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
-                            class="h-10 w-10" />
-                        <div class="flex flex-col justify-between items-start">
-                            <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
-                            <span class="underline text-primary-700">{{ client.link }}</span>
-                        </div>
-                    </a>
-                </li>
-            </ul>
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Many other clients exist, but <strong class="font-bold">they have not been tested for
-                    compatibility</strong>. Bug reports are nevertheless welcome.
-            </p>
-
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
-            </p>
+        <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]">
+                <Alert v-if="error" variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{ error }}</AlertTitle>
+                    <AlertDescription>
+                        {{ error_description }}
+                    </AlertDescription>
+                </Alert>
+                <div class="flex flex-col space-y-2 text-center">
+                    <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,
+                    })">
+                    </p>
+                </div>
+                <UserAuthForm v-if="instance && hasValidUrlSearchParams" :instance="instance" />
+                <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>
+                    <AlertDescription>
+                        <p>{{ m.gray_clean_shark_comfort() }}</p>
+                        <ul class="list-disc list-inside mt-2 font-mono">
+                            <li>redirect_uri</li>
+                            <li>response_type</li>
+                            <li>client_id</li>
+                            <li>scope</li>
+                        </ul>
+                    </AlertDescription>
+                </Alert>
+            </div>
         </div>
     </div>
 </template>
-
-<script setup lang="ts">
-import { toTypedSchema } from "@vee-validate/zod";
-import { Client } from "@versia/client";
-import { z } from "zod";
-import FieldError from "~/components/inputs/field-error.vue";
-import Field from "~/components/inputs/field.vue";
-import LabelAndError from "~/components/inputs/label-and-error.vue";
-import Label from "~/components/inputs/label.vue";
-import PasswordInput from "~/components/inputs/password-input.vue";
-import TextInput from "~/components/inputs/text-input.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
-
-const schema = toTypedSchema(
-    z.object({
-        identifier: z.string().min(3).or(z.string().email()),
-        password: z.string().min(3),
-    }),
-);
-
-const hostname = useRequestURL().hostname;
-const params = useUrlSearchParams();
-
-const validUrlParameters =
-    params.redirect_uri &&
-    params.response_type &&
-    params.client_id &&
-    params.scope;
-
-const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
-
-const ssoConfig = computed(() => instance.value?.sso);
-
-const redirectUrl = new URL("/api/auth/login", useBaseUrl().value);
-
-if (params.redirect_uri) {
-    redirectUrl.searchParams.set("redirect_uri", params.redirect_uri as string);
-}
-if (params.response_type) {
-    redirectUrl.searchParams.set(
-        "response_type",
-        params.response_type as string,
-    );
-}
-if (params.client_id) {
-    redirectUrl.searchParams.set("client_id", params.client_id as string);
-}
-if (params.scope) {
-    redirectUrl.searchParams.set("scope", params.scope as string);
-}
-if (params.state) {
-    redirectUrl.searchParams.set("state", params.state as string);
-}
-
-const issuerRedirectUrl = (issuerId: string) => {
-    const url = new URL("/oauth/sso", useBaseUrl().value);
-    params.redirect_uri &&
-        url.searchParams.set("redirect_uri", params.redirect_uri as string);
-    params.response_type &&
-        url.searchParams.set("response_type", params.response_type as string);
-    params.client_id &&
-        url.searchParams.set("client_id", params.client_id as string);
-    params.scope && url.searchParams.set("scope", params.scope as string);
-    params.state && url.searchParams.set("state", params.state as string);
-    url.searchParams.set("issuer", issuerId);
-    return url.toString();
-};
-</script>
\ No newline at end of file
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index 24c3c78..b5af872 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -1,29 +1,33 @@
 <template>
-    <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
-
-        <div class="mx-auto max-w-md mt-10">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
-            </p>
-            <div class="prose prose-invert select-all mt-6">
-                <pre
-                    class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
-            </div>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
-                to.
-            </p>
-
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
-            </p>
-        </div>
+    <div class="h-svh flex items-center justify-center px-4 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.aware_awful_crow_spur() }}</CardTitle>
+                <CardDescription>{{ m.mushy_soft_lizard_propel() }}<br />{{ m.short_arable_leopard_zap() }}
+                </CardDescription>
+            </CardHeader>
+            <CardContent class="grid">
+                <pre class="rounded bg-muted px-4 py-2 border text-center w-full font-mono text-sm font-semibold select-all">{{ code }}</pre>
+            </CardContent>
+        </Card>
     </div>
 </template>
 
 <script setup lang="ts">
-const params = useUrlSearchParams();
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import * as m from "~/paraglide/messages.js";
 
-const code = params.code;
+useHead({
+    title: m.spare_aqua_warthog_mend(),
+});
+
+const { code } = useUrlSearchParams();
 </script>
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 5dddf51..e9233e9 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -1,89 +1,56 @@
 <template>
-    <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
-        <div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
-            <form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
-                <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
-                <div class="flex flex-col items-center gap-y-5">
-                    <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
-                        access your
-                        account?</h1>
-                    <div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
-                        <h2 class="font-bold text-gray-200">{{ application }}</h2>
-                        <a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
-                            }}</a>
-                    </div>
-                </div>
-
-                <h2 class="text-gray-50 tracking-tight text-xl font-semibold">
-                    This application will be able to:
-                </h2>
-
-                <ul class="flex flex-col gap-y-1.5">
-                    <li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
-                        <svg class="fill-primary-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                            viewBox="0 0 16 16">
-                            <path
-                                d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
-                        </svg>
-                        <h2 class="text-sm text-gray-200">
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card class="w-full max-w-md" as="form"  method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
+            <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
+            <CardHeader>
+                <CardTitle as="h1" class="text-2xl break-words">{{ m.fresh_broad_cockroach_radiate({
+                    application: application ?? "",
+                }) }}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <Card>
+                    <CardContent class="flex flex-col px-4 py-2">
+                        <CardTitle as="h2" class="text-lg">{{ application }}</CardTitle>
+                        <a v-if="website" :href="website" target="_blank" rel="noopener noreferrer" class="underline">{{ website }}</a>
+                    </CardContent>
+                </Card>
+                <ul class="list-none my-6 [&>li]:mt-2">
+                    <li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1 items-center">
+                        <Check class="size-4" />
+                        <h2 class="text-sm">
                             <strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
                         </h2>
                     </li>
                 </ul>
-
-                <div class="flex-col flex gap-y-1">
-                    <p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
-                        account.</p>
-                    <p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
-                        account
-                        actions.</p>
+                <div class="flex-col flex gap-y-1 text-sm">
+                    <p v-html="m.gross_antsy_kangaroo_succeed({
+                        application: application ?? '',
+                    })"></p>
+                    <p v-html="m.hour_close_giraffe_mop({
+                        application: application ?? '',
+                    })"></p>
                 </div>
-
-                <div class="flex flex-col gap-3">
-                    <Button theme="primary" type="submit">Authorize</Button>
-                    <NuxtLink href="/" class="w-full">
-                        <Button theme="secondary" class="w-full">Cancel</Button>
-                    </NuxtLink>
-                </div>
-            </form>
-        </div>
-        <div v-else class="mx-auto max-w-md mt-10">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
-                parameters
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
-                through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
-                    API</strong> client to access this page.
-            </p>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
-            <ul class="w-full flex flex-col gap-3 mt-4">
-                <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
-                    <a :href="client.link" target="_blank"
-                        class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                        <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
-                            class="h-10 w-10" />
-                        <div class="flex flex-col justify-between items-start">
-                            <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
-                            <span class="underline text-primary-700">{{ client.link }}</span>
-                        </div>
-                    </a>
-                </li>
-            </ul>
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Many other clients exist, but <strong class="font-bold">they have not been tested for
-                    compatibility</strong>. Bug reports are nevertheless welcome.
-            </p>
-
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
-            </p>
-        </div>
+            </CardContent>
+            <CardFooter class="grid gap-2">
+                <Button variant="default" type="submit">{{ m.last_spare_polecat_reside() }}</Button>
+                <Button :as="NuxtLink" href="/" variant="secondary">{{ m.soft_bold_ant_attend() }}</Button>
+            </CardFooter>
+        </Card>
     </div>
 </template>
 
 <script setup lang="ts">
-import Button from "~/packages/ui/components/buttons/button.vue";
+import { Check } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+useHead({
+    title: m.lower_factual_frog_evoke(),
+});
 
 const url = useRequestURL();
 const params = useUrlSearchParams();
@@ -99,20 +66,20 @@ const scope = params.scope ? decodeURIComponent(params.scope as string) : "";
 const validUrlParameters = application && redirectUri && clientId && scope;
 
 const oauthScopeText: Record<string, string> = {
-    "rw:accounts": "$VERB your account information",
-    "rw:blocks": "$VERB your block list",
-    "rw:bookmarks": "$VERB your bookmarks",
-    "rw:favourites": "$VERB your favourites",
-    "rw:filters": "$VERB your filters",
-    "rw:follows": "$VERB your follows",
-    "rw:lists": "$VERB your lists",
-    "rw:mutes": "$VERB your mutes",
-    "rw:notifications": "$VERB your notifications",
-    "r:search": "Perform searches",
-    "rw:statuses": "$VERB your statuses",
-    "w:conversations": "Edit your conversations",
-    "w:media": "Upload media",
-    "w:reports": "Report users",
+    "rw:accounts": m.awake_ago_capybara_kick(),
+    "rw:blocks": m.teary_zesty_racoon_transform(),
+    "rw:bookmarks": m.whole_flaky_nuthatch_rush(),
+    "rw:favourites": m.still_spicy_lionfish_quell(),
+    "rw:filters": m.away_mean_dolphin_empower(),
+    "rw:follows": m.sleek_empty_penguin_radiate(),
+    "rw:lists": m.every_silly_racoon_lift(),
+    "rw:mutes": m.top_careful_scallop_clip(),
+    "rw:notifications": m.this_short_bulldog_walk(),
+    "r:search": m.fresh_odd_rook_forgive(),
+    "rw:statuses": m.witty_whole_capybara_pull(),
+    "w:conversations": m.agent_warm_javelina_blink(),
+    "w:media": m.dirty_red_jellyfish_ascend(),
+    "w:reports": m.crisp_vivid_seahorse_tend(),
 };
 
 const scopes = scope.split(" ");
@@ -140,7 +107,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Read and write",
+                    m.teary_such_jay_fade(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {
@@ -156,7 +123,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Read",
+                    m.smug_safe_warthog_dare(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {
@@ -171,7 +138,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Write",
+                    m.loose_large_blackbird_peek(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index b0d0f3b..3e689d1 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -1,95 +1,149 @@
 <template>
-    <div class="flex min-h-screen relative flex-col gap-10 justify-center py-12 px-8">
-        <img crossorigin="anonymous" src="https://cdn.versia.pub/branding/icon.svg" alt="Versia logo"
-            class="mx-auto hidden md:inline-block h-20 ring-1 ring-white/20 rounded" />
-        <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
-            <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
-                <input type="hidden" name="token" :value="params.token" />
-
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
-
-                <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
-                    <h2 class="font-bold text-lg">An error occured</h2>
-                    <span class="text-sm">{{ params.error_description }}</span>
-                </div>
-
-                <VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="password">New password</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <PasswordInput id="password" placeholder="hunter2" autocomplete="new-password" required
-                            v-bind="field" :is-invalid="!!errorMessage" :show-strength="true" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="password-confirm" as="div" v-slot="{ errors, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="password-confirm">Confirm password</Label>
-                            <FieldError v-if="errors.length > 0">{{ errors[0] }}</FieldError>
-                        </LabelAndError>
-                        <PasswordInput id="password-confirm" placeholder="hunter2" autocomplete="new-password" required
-                            v-bind="field" :is-invalid="errors.length > 0" />
-                    </Field>
-                </VeeField>
-
-                <p class="text-xs font-semibold text-red-300">This will reset your
-                    password. Make sure to put it in a password manager.
-                </p>
-
-                <Button theme="primary" type="submit" class="w-full">Reset</Button>
-            </VeeForm>
-        </div>
-        <div v-else-if="params.success">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
-                successful!
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300 text-center">
-                You can now login to your account with your new password.
-            </p>
-        </div>
-        <div v-else class="mx-auto max-w-md">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
-                parameters
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
-                through a valid password reset request. Please ask your admin to reset your password.
-            </p>
-
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
-            </p>
-        </div>
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card v-if="params.success" class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
+                <CardDescription>
+                    {{ m.brave_acidic_lobster_fetch() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}
+                </Button>
+            </CardFooter>
+        </Card>
+        <Card v-else class="w-full max-w-md">
+            <form method="POST" action="/api/auth/reset" @submit="form.submitForm">
+                <CardHeader>
+                    <Alert v-if="params.login_reset" variant="default" class="mb-4">
+                        <AlertCircle class="size-4" />
+                        <AlertTitle>{{ m.east_loud_lobster_explore() }}</AlertTitle>
+                        <AlertDescription>
+                            {{ m.good_plane_gazelle_glow() }}
+                        </AlertDescription>
+                    </Alert>
+                    <Alert v-if="params.error" variant="destructive" class="mb-4">
+                        <AlertCircle class="size-4" />
+                        <AlertTitle>{{ params.error }}</AlertTitle>
+                        <AlertDescription>
+                            {{ params.error_description }}
+                        </AlertDescription>
+                    </Alert>
+                    <CardTitle as="h1">{{ m.tired_green_sloth_evoke() }}</CardTitle>
+                    <CardDescription>
+                        {{ m.solid_slow_platypus_talk() }}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent class="grid gap-6">
+                    <FormField v-slot="{ componentField }" name="token">
+                        <FormItem>
+                            <FormControl>
+                                <input type="hidden" v-bind="componentField" />
+                            </FormControl>
+                        </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="password">
+                        <FormItem>
+                            <FormLabel>
+                                {{ m.true_male_gadfly_stab() }}
+                            </FormLabel>
+                            <FormControl>
+                                <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-correct="off"
+                                    v-bind="componentField" />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="password-confirm">
+                        <FormItem>
+                            <FormLabel>
+                                {{ m.awful_cozy_jannes_rise() }}
+                            </FormLabel>
+                            <FormControl>
+                                <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-correct="off"
+                                    v-bind="componentField" />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                </CardContent>
+                <CardFooter class="grid gap-2">
+                    <Button variant="default" type="submit">{{ m.noisy_round_skate_yell() }}</Button>
+                </CardFooter>
+            </form>
+        </Card>
     </div>
 </template>
 
 <script setup lang="ts">
 import { toTypedSchema } from "@vee-validate/zod";
+import { AlertCircle } from "lucide-vue-next";
+import { useForm } from "vee-validate";
 import { z } from "zod";
-import FieldError from "~/components/inputs/field-error.vue";
-import Field from "~/components/inputs/field.vue";
-import LabelAndError from "~/components/inputs/label-and-error.vue";
-import Label from "~/components/inputs/label.vue";
-import PasswordInput from "~/components/inputs/password-input.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+useHead({
+    title: m.arable_arable_herring_lead(),
+});
 
 identity.value = null;
 
-const schema = toTypedSchema(
+const formSchema = toTypedSchema(
     z
         .object({
-            password: z.string().min(3).max(100),
-            "password-confirm": z.string().min(3).max(100),
+            token: z.string(),
+            password: z
+                .string()
+                .min(3, {
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
+                })
+                .max(100, {
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
+                }),
+            "password-confirm": z
+                .string()
+                .min(3, {
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
+                })
+                .max(100, {
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
+                }),
         })
         .superRefine((data, ctx) => {
             if (data.password !== data["password-confirm"]) {
                 ctx.addIssue({
                     path: [...ctx.path, "password-confirm"],
                     code: "custom",
-                    message: "Passwords do not match",
+                    message: m.candid_fancy_leopard_prosper(),
                 });
             }
             return {};
@@ -97,14 +151,11 @@ const schema = toTypedSchema(
 );
 
 const params = useUrlSearchParams();
-let error = params.error;
-let errorDescription = params.error_description;
 
-if (params.login_reset) {
-    error = "Login reset";
-    errorDescription =
-        "Your password has been reset by an administrator. Please change it here.";
-}
-
-const validUrlParameters = !!params.token;
+const form = useForm({
+    validationSchema: formSchema,
+    initialValues: {
+        token: (params.token as string) ?? undefined,
+    },
+});
 </script>
\ No newline at end of file
diff --git a/pages/preferences/[page].vue b/pages/preferences/[page].vue
new file mode 100644
index 0000000..aa07ba1
--- /dev/null
+++ b/pages/preferences/[page].vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full">
+        <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
+            {{ page }}
+        </h1>   
+        <div class="grid grid-cols-1 gap-4 mt-6">
+            <template v-for="[id, setting] of settingEntries">
+                <SwitchPreference v-if="setting.type === SettingType.Boolean" :setting="(setting as BooleanSetting)" @update:setting="updateSetting(id, setting)" />
+                <SelectPreference v-else-if="setting.type === SettingType.Enum" :setting="(setting as EnumSetting)" @update:setting="updateSetting(id, setting)" />
+                <CodePreference v-else-if="setting.type === SettingType.Code" :setting="(setting as CodeSetting)" @update:setting="updateSetting(id, setting)" />
+                <StringPreference v-else-if="setting.type === SettingType.String" :setting="(setting as StringSetting)" @update:setting="updateSetting(id, setting)" />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import CodePreference from "~/components/preferences/code.vue";
+import SelectPreference from "~/components/preferences/select.vue";
+import StringPreference from "~/components/preferences/string.vue";
+import SwitchPreference from "~/components/preferences/switch.vue";
+import * as m from "~/paraglide/messages.js";
+import {
+    type BooleanSetting,
+    type CodeSetting,
+    type EnumSetting,
+    type Setting,
+    type SettingIds,
+    type SettingPages,
+    SettingType,
+    type StringSetting,
+} from "~/settings.ts";
+
+useHead({
+    title: m.broad_whole_herring_reside(),
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.broad_whole_herring_reside(),
+        },
+    ],
+    requiresAuth: true,
+});
+
+const route = useRoute();
+
+const page = route.params.page as SettingPages;
+const settingEntries = computed(() =>
+    (Object.entries(settings.value) as [SettingIds, Setting][]).filter(
+        ([, s]) => s.page === page && !s.notImplemented,
+    ),
+);
+
+const updateSetting = (id: SettingIds, setting: Setting) => {
+    settings.value = {
+        ...settings.value,
+        [id]: setting,
+    };
+};
+</script>
\ No newline at end of file
diff --git a/pages/preferences/account.vue b/pages/preferences/account.vue
new file mode 100644
index 0000000..dda7b5f
--- /dev/null
+++ b/pages/preferences/account.vue
@@ -0,0 +1,37 @@
+<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>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+// biome-ignore lint/style/useImportType: <explanation>
+import ProfileEditor from "~/components/preferences/profile/editor.vue";
+import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: m.actual_mean_cow_dare(),
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.broad_whole_herring_reside(),
+        },
+    ],
+    requiresAuth: true,
+});
+
+const profileEditor = ref<InstanceType<typeof ProfileEditor> | null>(null);
+</script>
\ No newline at end of file
diff --git a/pages/preferences/emojis.vue b/pages/preferences/emojis.vue
new file mode 100644
index 0000000..779ec21
--- /dev/null
+++ b/pages/preferences/emojis.vue
@@ -0,0 +1,98 @@
+<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', canUpload && 'grid-cols-[1fr,auto]')">
+            <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
+                {{ m.suave_smart_mantis_climb() }}
+            </h1>
+            <Uploader v-if="canUpload">
+                <Button variant="default">
+                    <Upload /> Upload
+                </Button>
+            </Uploader>
+        </div>
+        <div v-if="emojis.length > 0" class="max-w-sm w-full relative">
+            <Input v-model="search" placeholder="Search" class="pl-8" />
+            <Search class="absolute size-4 top-1/2 left-2.5 transform -translate-y-1/2" />
+        </div>
+        <Category v-if="emojis.length > 0" v-for="([name, emojis]) in categories" :key="name" :emojis="emojis"
+            :name="name" />
+        <Card v-else class="shadow-none bg-transparent border-none p-4">
+            <CardHeader class="text-center gap-y-4">
+                <CardTitle>{{ m.actual_steep_llama_rest() }}</CardTitle>
+                <CardDescription>
+                    {{ m.lucky_suave_myna_adore() }}
+                </CardDescription>
+            </CardHeader>
+        </Card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { type Emoji, RolePermission } from "@versia/client/types";
+import { Search, Upload } from "lucide-vue-next";
+import Category from "~/components/preferences/emojis/category.vue";
+import Uploader from "~/components/preferences/emojis/uploader.vue";
+import {
+    Card,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: m.mild_many_dolphin_mend(),
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.broad_whole_herring_reside(),
+        },
+    ],
+    requiresAuth: true,
+});
+
+const permissions = usePermissions();
+const canUpload = computed(
+    () =>
+        permissions.value.includes(RolePermission.ManageOwnEmojis) ||
+        permissions.value.includes(RolePermission.ManageEmojis),
+);
+
+const emojis = computed(
+    () =>
+        identity.value?.emojis?.filter((emoji) =>
+            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
+        ) ?? [],
+);
+
+const search = ref("");
+
+/**
+ * Sort emojis by category
+ */
+const categories = computed(() => {
+    const categories = new Map<string, Emoji[]>();
+    for (const emoji of emojis.value) {
+        if (!emoji.category) {
+            if (!categories.has(m.lucky_ago_rat_pinch())) {
+                categories.set(m.lucky_ago_rat_pinch(), []);
+            }
+
+            categories.get(m.lucky_ago_rat_pinch())?.push(emoji);
+            continue;
+        }
+
+        if (!categories.has(emoji.category)) {
+            categories.set(emoji.category, []);
+        }
+
+        categories.get(emoji.category)?.push(emoji);
+    }
+    return categories;
+});
+</script>
\ No newline at end of file
diff --git a/pages/preferences/index.vue b/pages/preferences/index.vue
new file mode 100644
index 0000000..53be26f
--- /dev/null
+++ b/pages/preferences/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+import * as m from "~/paraglide/messages.js";
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.broad_whole_herring_reside(),
+        },
+    ],
+    requiresAuth: true,
+});
+</script>
\ No newline at end of file
diff --git a/pages/public.vue b/pages/public.vue
index 2e9640b..d64fed4 100644
--- a/pages/public.vue
+++ b/pages/public.vue
@@ -1,18 +1,30 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
         <TimelineScroller>
-            <Greeting />
             <Public />
         </TimelineScroller>
     </div>
 </template>
 
 <script setup lang="ts">
-import Greeting from "~/components/headers/greeting.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~/paraglide/messages.js";
+
+useHead({
+    title: "Public",
+});
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.steep_aqua_fox_harbor(),
+        },
+        {
+            text: m.lost_trick_dog_grace(),
+            href: "/public",
+        },
+    ],
 });
 </script>
\ No newline at end of file
diff --git a/pages/register/index.vue b/pages/register/index.vue
index f4d650b..5b30982 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -1,118 +1,137 @@
 <template>
-    <div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
-        <img crossorigin="anonymous" src="https://cdn.versia.pub/branding/icon.svg" alt="Versia logo"
-            class="mx-auto hidden md:inline-block h-20" />
-        <div v-if="true" class="mx-auto w-full max-w-md">
-            <div v-if="Object.keys(errors).length > 0"
-                class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
-                <h2 class="font-bold text-lg">Error</h2>
-                <span class="text-sm">{{ errors.error }}</span>
-            </div>
-            <VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
-
-                <VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="username">Username</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <TextInput id="username" type="text" placeholder="thespeedy" required v-bind="field"
-                            :disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="username"
-                            :spellcheck="false" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="email" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="email">Email address</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <TextInput id="email" type="email" placeholder="joseph.jones@gmail.com" required v-bind="field"
-                            :disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="email" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="password">Password</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <PasswordInput id="password" placeholder="hunter2" required v-bind="field" :disabled="isLoading"
-                            :is-invalid="!!errorMessage" :show-strength="true" autocomplete="new-password" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="password-confirm" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <LabelAndError>
-                            <Label for="password-confirm">Confirm password</Label>
-                            <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                        </LabelAndError>
-                        <PasswordInput id="password-confirm" placeholder="hunter2" required v-bind="field"
-                            :disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="new-password" />
-                    </Field>
-                </VeeField>
-
-                <VeeField name="tos" v-slot="{ errorMessage, field }" validate-on-change>
-                    <Field>
-                        <div class="flex flex-row gap-x-2 items-center">
-                            <CheckboxInput :checked="true" id="tos" required :disabled="true" v-bind="field" />
-                            <Label for="tos" class="!text-gray-200">
-                                I agree to the Terms of Service
-                            </Label>
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card v-if="instance?.registrations.enabled ?? true" class="w-full max-w-md" as="form" @submit="handleSubmit">
+            <CardHeader>
+                <Alert v-if="errors.error" variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{ m.vexed_each_falcon_enjoy() }}</AlertTitle>
+                    <AlertDescription>
+                        {{ errors.error }}
+                    </AlertDescription>
+                </Alert>
+                <CardTitle as="h1" class="text-2xl break-words">{{ m.wide_topical_vole_walk() }}</CardTitle>
+            </CardHeader>
+            <CardContent v-if="instance && tos" class="grid gap-6">
+                <FormField v-slot="{ componentField }" name="username">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.keen_clean_nils_slurp() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="petergriffin" type="text" auto-capitalize="none"
+                                auto-complete="idenfifier" auto-correct="off" :disabled="isLoading"
+                                v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.top_inclusive_wallaby_hack() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="peter.griffin@fox.com" type="email" auto-capitalize="none"
+                                auto-complete="email" auto-correct="off" :disabled="isLoading"
+                                v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>
+                            {{ 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" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="password-confirm">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.awful_cozy_jannes_rise() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-complete="password"
+                                auto-correct="off" :disabled="isLoading" v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField, value, handleChange }" name="tos">
+                    <FormItem class="space-y-0">
+                        <div class="flex flex-row gap-x-2 items-center ">
+                            <FormControl>
+                                <Checkbox v-bind="componentField" :checked="value" @update:checked="handleChange" />
+                            </FormControl>
+                            <FormLabel>
+                                <Dialog>
+                                    {{ m.plane_quick_chipmunk_rush() }} <DialogTrigger :as-child="true"><Button variant="link"
+                                            class="px-0 underline">{{ m.glad_last_crow_dine() }}</Button>.</DialogTrigger>
+                                    <DialogContent class="!max-h-[90vh] overflow-auto">
+                                        <DialogHeader>
+                                            <DialogTitle>{{ instance.title }}
+                                            </DialogTitle>
+                                        </DialogHeader>
+                                        <div v-html="tos.content" class="prose prose-sm dark:prose-invert"></div>
+                                    </DialogContent>
+                                </Dialog>
+                            </FormLabel>
                         </div>
-                        <FieldError v-if="errorMessage">{{ errorMessage }}</FieldError>
-                    </Field>
-                </VeeField>
-
-                <Collapsible.Root>
-                    <Collapsible.Trigger class="w-full">
-                        <Button theme="secondary" class="w-full">View Terms of Service</Button>
-                    </Collapsible.Trigger>
-                    <Collapsible.Content
-                        class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
-                        <div v-html="tos?.content"></div>
-                    </Collapsible.Content>
-                </Collapsible.Root>
-
-                <p class="text-xs font-semibold text-gray-300">
-                    Passwords are stored securely and hashed. Passwords are not stored in plain text.
-                    Administrators
-                    cannot see your password.
-                </p>
-
-                <Button theme="primary" type="submit" class="w-full" :disabled="isLoading">{{ isLoading ?
-                    "Registering..." :
-                    "Register" }}</Button>
-            </VeeForm>
-        </div>
-        <div v-else>
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
-                disabled
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
-                config!
-            </p>
-        </div>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <div class="flex-col flex gap-y-1 text-sm text-muted-foreground">
+                    <p>{{ m.happy_house_dragonfly_clap() }}</p>
+                </div>
+            </CardContent>
+            <CardFooter v-if="instance && tos" class="grid gap-2">
+                <Button variant="default" type="submit">{{ m.early_last_ocelot_praise() }}</Button>
+            </CardFooter>
+            <div v-else class="p-4 flex items-center justify-center h-48">
+                <Loader class="size-8 animate-spin" />
+            </div>
+        </Card>
+        <Card v-else class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.wide_away_cat_taste() }}</CardTitle>
+                <CardDescription>
+                    {{ m.safe_candid_horse_jump() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}}
+                </Button>
+            </CardFooter>
+        </Card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { Collapsible } from "@ark-ui/vue";
 import { toTypedSchema } from "@vee-validate/zod";
-import type { ResponseError } from "@versia/client";
+import { Client, type ResponseError } from "@versia/client";
+import { AlertCircle, Loader } from "lucide-vue-next";
+import { useForm } from "vee-validate";
 import { z } from "zod";
-import CheckboxInput from "~/components/inputs/checkbox-input.vue";
-import FieldError from "~/components/inputs/field-error.vue";
-import Field from "~/components/inputs/field.vue";
-import LabelAndError from "~/components/inputs/label-and-error.vue";
-import Label from "~/components/inputs/label.vue";
-import PasswordInput from "~/components/inputs/password-input.vue";
-import TextInput from "~/components/inputs/text-input.vue";
-import Button from "~/packages/ui/components/buttons/button.vue";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Checkbox } from "~/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
+import { FormItem } from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+useHead({
+    title: m.early_last_ocelot_praise(),
+});
 
 const schema = toTypedSchema(
     z
@@ -123,47 +142,39 @@ const schema = toTypedSchema(
             username: z
                 .string()
                 .min(3)
-                .regex(
-                    /^[a-z0-9_]+$/,
-                    "Must be lowercase letters, numbers, or underscores",
-                ),
+                .regex(/^[a-z0-9_-]+$/, m.sea_maroon_peacock_yell()),
             reason: z.string().optional(),
+            tos: z.boolean().refine((value) => value, {
+                message: m.civil_loose_coyote_jump(),
+            }),
         })
         .superRefine((data, ctx) => {
             if (data.password !== data["password-confirm"]) {
                 ctx.addIssue({
                     path: [...ctx.path, "password-confirm"],
                     code: "custom",
-                    message: "Passwords do not match",
+                    message: m.candid_fancy_leopard_prosper(),
                 });
             }
             return {};
         }),
 );
 
-const tos = useTos(client);
+const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
+const form = useForm({
+    validationSchema: schema,
+});
 
-const errors = ref<{
-    error?: string;
-}>({});
-
-const isLoading = ref(false);
-
-const register = (result: {
-    username: string;
-    email: string;
-    password: string;
-    reason: string;
-}) => {
+const handleSubmit = form.handleSubmit((values) => {
     isLoading.value = true;
     ref(client)
         .value?.registerAccount(
-            result.username,
-            result.email,
-            result.password,
+            values.username,
+            values.email,
+            values.password,
             true,
             "en",
-            result.reason || "Empty reason",
+            values.reason || "Empty reason",
         )
         .then(() => {
             navigateTo("/register/success");
@@ -172,41 +183,18 @@ const register = (result: {
             const error = e as ResponseError<{
                 error: string;
             }>;
-            // @ts-ignore
             errors.value = error.response.data || {};
         })
         .finally(() => {
             isLoading.value = false;
         });
-};
+});
+
+const tos = useTos(client);
+
+const errors = ref<{
+    error?: string;
+}>({});
+
+const isLoading = ref(false);
 </script>
-
-<style>
-@keyframes slideDown {
-    from {
-        height: 0;
-    }
-
-    to {
-        height: var(--height);
-    }
-}
-
-@keyframes slideUp {
-    from {
-        height: var(--height);
-    }
-
-    to {
-        height: 0;
-    }
-}
-
-[data-scope='collapsible'][data-part='content'][data-state='open'] {
-    animation: slideDown 250ms;
-}
-
-[data-scope='collapsible'][data-part='content'][data-state='closed'] {
-    animation: slideUp 200ms;
-}
-</style>
\ No newline at end of file
diff --git a/pages/register/success.vue b/pages/register/success.vue
index be3f703..5b370e2 100644
--- a/pages/register/success.vue
+++ b/pages/register/success.vue
@@ -1,12 +1,30 @@
 <template>
-    <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
-        <div>
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
-                success!
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
-                Mastodon
-                client </p>
-        </div>
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
+                <CardDescription>
+                    {{ m.left_maroon_myna_drip() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}
+                </Button>
+            </CardFooter>
+        </Card>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { Button } from "~/components/ui/button";
+import { Card, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
+import * as m from "~/paraglide/messages.js";
+import { NuxtLink } from "#components";
+
+useHead({
+    title: "Success!",
+});
+</script>
\ No newline at end of file
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
deleted file mode 100644
index 458301c..0000000
--- a/pages/settings/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <SettingsSidebar>
-        <template #behaviour>
-            <SettingPage :page="SettingPages.Behaviour" />
-        </template>
-        <template #appearance>
-            <SettingPage :page="SettingPages.Appearance" />
-        </template>
-        <template #account>
-            <ProfileEditor />
-        </template>
-        <template #emojis>
-            <EmojiEditor />
-        </template>
-    </SettingsSidebar>
-</template>
-
-<script setup lang="ts">
-import EmojiEditor from "~/components/settings/emojis/emojis.vue";
-import SettingPage from "~/components/settings/page.vue";
-import ProfileEditor from "~/components/settings/profile-editor.vue";
-import SettingsSidebar from "~/components/sidebars/settings-sidebar.vue";
-import { SettingPages } from "~/settings";
-
-definePageMeta({
-    layout: "app",
-});
-</script>
\ No newline at end of file
diff --git a/plugins/EmojiRenderer.ts b/plugins/EmojiRenderer.ts
new file mode 100644
index 0000000..83a8ace
--- /dev/null
+++ b/plugins/EmojiRenderer.ts
@@ -0,0 +1,49 @@
+import type { Emoji } from "@versia/client/types";
+import { SettingIds } from "~/settings";
+
+const emojisRegex =
+    /\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u200D(\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?))*/gu;
+const incorrectEmojisRegex = /^[#*0-9©®]$/;
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.directive<HTMLElement, Emoji[]>("render-emojis", {
+        beforeMount(el, binding) {
+            const shouldRenderEmoji = useSetting(SettingIds.CustomEmojis);
+            const emojiFont = useSetting(SettingIds.EmojiTheme);
+
+            // Replace emoji shortcodes with images
+            if (shouldRenderEmoji.value.value) {
+                el.innerHTML = el.innerHTML.replace(
+                    /:([a-zA-Z0-9_-]+):/g,
+                    (match, emoji) => {
+                        const emojiData = binding.value.find(
+                            (e) => e.shortcode === emoji,
+                        );
+
+                        if (!emojiData) {
+                            return match;
+                        }
+
+                        const image = document.createElement("img");
+                        image.src = emojiData.url;
+                        image.alt = `:${emoji}:`;
+                        image.title = emojiData.shortcode;
+                        image.className =
+                            "h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
+                        return image.outerHTML;
+                    },
+                );
+            }
+
+            if (emojiFont.value.value !== "native") {
+                el.innerHTML = el.innerHTML.replace(emojisRegex, (match) => {
+                    if (incorrectEmojisRegex.test(match)) {
+                        return match;
+                    }
+
+                    return `<img src="/emojis/${emojiFont}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out">`;
+                });
+            }
+        },
+    });
+});
diff --git a/project.inlang/.gitignore b/project.inlang/.gitignore
new file mode 100644
index 0000000..5e46596
--- /dev/null
+++ b/project.inlang/.gitignore
@@ -0,0 +1 @@
+cache
\ No newline at end of file
diff --git a/project.inlang/project_id b/project.inlang/project_id
new file mode 100644
index 0000000..70d5486
--- /dev/null
+++ b/project.inlang/project_id
@@ -0,0 +1 @@
+9d8c2839bac9b12c091cd75e30f73bf4570b61f052e0bae7af076988269f44ed
\ No newline at end of file
diff --git a/project.inlang/settings.json b/project.inlang/settings.json
new file mode 100644
index 0000000..3c0afeb
--- /dev/null
+++ b/project.inlang/settings.json
@@ -0,0 +1,15 @@
+{
+    "$schema": "https://inlang.com/schema/project-settings",
+    "sourceLanguageTag": "en",
+    "languageTags": ["en", "fr", "en-rot", "en-pt"],
+    "modules": [
+        "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+        "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+        "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+        "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+        "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js"
+    ],
+    "plugin.inlang.messageFormat": {
+        "pathPattern": "./messages/{languageTag}.json"
+    }
+}
diff --git a/public/images/banner.webp b/public/images/banner.webp
new file mode 100644
index 0000000..2c3ed34
Binary files /dev/null and b/public/images/banner.webp differ
diff --git a/server/plugins/DocumentComment.ts b/server/plugins/DocumentComment.ts
index 7d4f508..913c2ec 100644
--- a/server/plugins/DocumentComment.ts
+++ b/server/plugins/DocumentComment.ts
@@ -12,8 +12,7 @@ const art = `
 * Join development at https://github.com/versia-pub
 * 
 * With ❤️ from us:
-* - @jessew@social.lysand.org
-* - @aprl@social.lysand.org
+* - @jessew@beta.versia.social
 `;
 
 export default defineNitroPlugin((nitroApp) => {
diff --git a/settings.ts b/settings.ts
index e8bf179..3c8cc4a 100644
--- a/settings.ts
+++ b/settings.ts
@@ -1,3 +1,6 @@
+import * as m from "~/paraglide/messages.js";
+import { setLanguageTag } from "./paraglide/runtime";
+
 export enum SettingType {
     String = "string",
     Boolean = "boolean",
@@ -8,8 +11,8 @@ export enum SettingType {
 }
 
 export type Setting = {
-    title: string;
-    description: string;
+    title: () => string;
+    description: () => string;
     notImplemented?: boolean;
     type: SettingType;
     value: unknown;
@@ -31,7 +34,7 @@ export type EnumSetting = Setting & {
     value: string;
     options: {
         value: string;
-        label: string;
+        label: () => string;
         icon?: string;
     }[];
 };
@@ -66,6 +69,7 @@ export enum SettingPages {
 }
 
 export enum SettingIds {
+    Language = "language",
     Mfm = "mfm",
     CustomCSS = "custom-css",
     Theme = "theme",
@@ -76,153 +80,243 @@ export enum SettingIds {
     ConfirmDelete = "confirm-delete",
     ConfirmFollow = "confirm-follow",
     ConfirmReblog = "confirm-reblog",
-    ConfirmFavourite = "confirm-favourite",
+    ConfirmLike = "confirm-favourite",
+    CtrlEnterToSend = "ctrl-enter-to-send",
     EmojiTheme = "emoji-theme",
     BackgroundURL = "background-url",
+    NotificationsSidebar = "notifications-sidebar",
+    AvatarShape = "avatar-shape",
+    SidebarStyle = "sidebar-style",
 }
 
-export const settings: Record<SettingIds, Setting> = {
-    [SettingIds.Mfm]: {
-        title: "Render MFM",
-        description: "Render Misskey-Flavoured Markdown.",
-        type: SettingType.Boolean,
-        value: false,
-        page: SettingPages.Behaviour,
-        notImplemented: true,
-    } as BooleanSetting,
-    [SettingIds.CustomCSS]: {
-        title: "Custom CSS",
-        description: "Custom CSS for the UI.",
-        type: SettingType.Code,
-        value: "",
-        language: "css",
-        page: SettingPages.Appearance,
-    } as CodeSetting,
-    [SettingIds.Theme]: {
-        title: "Theme",
-        description: "UI theme.",
-        type: SettingType.Enum,
-        value: "dark",
-        options: [
-            {
-                value: "dark",
-                label: "Dark",
-            },
-            {
-                value: "light",
-                label: "Light",
-            },
-            {
-                value: "system",
-                label: "System",
-            },
-        ],
-        page: SettingPages.Appearance,
-        notImplemented: true,
-    } as EnumSetting,
-    [SettingIds.CustomEmojis]: {
-        title: "Render Custom Emojis",
-        description: "Render custom emojis.",
-        type: SettingType.Boolean,
-        value: true,
-        page: SettingPages.Behaviour,
-    } as BooleanSetting,
-    [SettingIds.ShowContentWarning]: {
-        title: "Show Content Warning",
-        description: "Show content warnings on notes marked sensitive/spoiler.",
-        type: SettingType.Boolean,
-        value: true,
-        page: SettingPages.Behaviour,
-    } as BooleanSetting,
-    [SettingIds.PopupAvatarHover]: {
-        title: "Popup Profile Hover",
-        description: "Show profile popup when hovering over a user's avatar.",
-        type: SettingType.Boolean,
-        value: true,
-        page: SettingPages.Behaviour,
-    } as BooleanSetting,
-    [SettingIds.InfiniteScroll]: {
-        title: "Infinite Scroll",
-        description:
-            "Automatically load more notes when reaching the bottom of the page.",
-        type: SettingType.Boolean,
-        value: true,
-        page: SettingPages.Behaviour,
-    } as BooleanSetting,
-    [SettingIds.ConfirmDelete]: {
-        title: "Confirm Delete",
-        description: "Confirm before deleting a note.",
-        type: SettingType.Boolean,
-        value: false,
-        page: SettingPages.Behaviour,
-        notImplemented: true,
-    } as BooleanSetting,
-    [SettingIds.ConfirmFollow]: {
-        title: "Confirm Follow",
-        description: "Confirm before following/unfollowing a user.",
-        type: SettingType.Boolean,
-        value: false,
-        page: SettingPages.Behaviour,
-        notImplemented: true,
-    } as BooleanSetting,
-    [SettingIds.ConfirmReblog]: {
-        title: "Confirm Reblog",
-        description: "Confirm before reblogging a note.",
-        type: SettingType.Boolean,
-        value: false,
-        page: SettingPages.Behaviour,
-        notImplemented: true,
-    } as BooleanSetting,
-    [SettingIds.ConfirmFavourite]: {
-        title: "Confirm Favourite",
-        description: "Confirm before favouriting a note.",
-        type: SettingType.Boolean,
-        value: false,
-        page: SettingPages.Behaviour,
-        notImplemented: true,
-    } as BooleanSetting,
-    [SettingIds.EmojiTheme]: {
-        title: "Emoji Theme",
-        description:
-            "Theme used for rendering emojis. Requires a page reload to apply.",
-        type: SettingType.Enum,
-        value: "native",
-        options: [
-            {
-                value: "native",
-                label: "Operating System",
-            },
-            {
-                value: "twemoji",
-                label: "Twitter Emojis",
-            },
-            {
-                value: "noto",
-                label: "Noto Emoji",
-            },
-            {
-                value: "fluent",
-                label: "Fluent Emojis",
-            },
-            {
-                value: "fluent-flat",
-                label: "Fluent Emojis (flat version)",
-            },
-        ],
-        page: SettingPages.Appearance,
-    } as EnumSetting,
-    [SettingIds.BackgroundURL]: {
-        title: "Background URL",
-        description: "Change the background image of the site.",
-        type: SettingType.String,
-        value: "",
-        page: SettingPages.Appearance,
-    } as StringSetting,
+export const settings = (): Record<SettingIds, Setting> => {
+    return {
+        [SettingIds.Mfm]: {
+            title: m.quaint_clear_boar_attend,
+            description: m.aloof_helpful_larva_spur,
+            type: SettingType.Boolean,
+            value: false,
+            page: SettingPages.Behaviour,
+            notImplemented: true,
+        } as BooleanSetting,
+        [SettingIds.Language]: {
+            title: m.pretty_born_jackal_dial,
+            description: m.tired_happy_lobster_pet,
+            type: SettingType.Enum,
+            value: "en",
+            options: [
+                {
+                    value: "en",
+                    label: () =>
+                        m.keen_aware_goldfish_thrive(
+                            {},
+                            {
+                                languageTag: "en",
+                            },
+                        ),
+                },
+                {
+                    value: "fr",
+                    label: () =>
+                        m.vivid_mellow_sawfish_approve(
+                            {},
+                            {
+                                languageTag: "fr",
+                            },
+                        ),
+                },
+                {
+                    value: "en-rot",
+                    label: () => "Brainrot",
+                },
+                {
+                    value: "en-pt",
+                    label: () => m.these_awful_ape_reside(),
+                },
+            ],
+            page: SettingPages.Behaviour,
+        } as EnumSetting,
+        [SettingIds.SidebarStyle]: {
+            title: m.deft_seemly_donkey_slide,
+            description: m.wide_least_samuel_conquer,
+            type: SettingType.Enum,
+            value: "inset",
+            options: [
+                {
+                    value: "inset",
+                    label: m.fluffy_north_crow_blink,
+                },
+                {
+                    value: "sidebar",
+                    label: m.day_polite_newt_loop,
+                },
+                {
+                    value: "floating",
+                    label: m.jolly_mad_jackdaw_assure,
+                },
+            ],
+            page: SettingPages.Appearance,
+        } as EnumSetting,
+        [SettingIds.AvatarShape]: {
+            title: m.fit_cool_bulldog_dine,
+            description: m.agent_misty_firefox_arise,
+            type: SettingType.Enum,
+            value: "square",
+            options: [
+                {
+                    value: "circle",
+                    label: m.polite_awful_ladybug_greet,
+                },
+                {
+                    value: "square",
+                    label: m.sad_each_cowfish_lock,
+                },
+            ],
+            page: SettingPages.Appearance,
+        } as EnumSetting,
+        [SettingIds.CustomCSS]: {
+            title: m.smart_awake_dachshund_view,
+            description: m.loved_topical_rat_coax,
+            type: SettingType.Code,
+            value: "",
+            language: "css",
+            page: SettingPages.Appearance,
+        } as CodeSetting,
+        [SettingIds.Theme]: {
+            title: m.hour_elegant_mink_grip,
+            description: m.male_stout_florian_feast,
+            type: SettingType.Enum,
+            value: "dark",
+            options: [
+                {
+                    value: "dark",
+                    label: m.wise_neat_ox_buzz,
+                },
+                {
+                    value: "light",
+                    label: m.each_strong_snail_aid,
+                },
+                {
+                    value: "system",
+                    label: m.helpful_raw_seal_nurture,
+                },
+            ],
+            page: SettingPages.Appearance,
+        } as EnumSetting,
+        [SettingIds.CustomEmojis]: {
+            title: m.loud_raw_sheep_imagine,
+            description: m.inclusive_pink_tuna_enjoy,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.ShowContentWarning]: {
+            title: m.fair_swift_elephant_hunt,
+            description: m.gray_minor_bee_endure,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.PopupAvatarHover]: {
+            title: m.north_nimble_turkey_transform,
+            description: m.bold_moving_fly_savor,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.InfiniteScroll]: {
+            title: m.sleek_this_earthworm_hug,
+            description: m.plane_dark_salmon_pout,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.ConfirmDelete]: {
+            title: m.trite_salty_eel_race,
+            description: m.helpful_early_worm_laugh,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.ConfirmFollow]: {
+            title: m.jolly_empty_bullock_mend,
+            description: m.calm_male_wombat_relish,
+            type: SettingType.Boolean,
+            value: false,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.ConfirmReblog]: {
+            title: m.honest_great_rooster_taste,
+            description: m.wacky_inner_osprey_intend,
+            type: SettingType.Boolean,
+            value: false,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.ConfirmLike]: {
+            title: m.patchy_basic_alligator_inspire,
+            description: m.antsy_weak_raven_treat,
+            type: SettingType.Boolean,
+            value: false,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.CtrlEnterToSend]: {
+            title: m.equal_blue_zebra_launch,
+            description: m.heavy_pink_meerkat_affirm,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Behaviour,
+        } as BooleanSetting,
+        [SettingIds.EmojiTheme]: {
+            title: m.weak_bad_martin_glow,
+            description: m.warm_round_dove_skip,
+            type: SettingType.Enum,
+            value: "native",
+            options: [
+                {
+                    value: "native",
+                    label: m.slimy_sound_termite_hug,
+                },
+                {
+                    value: "twemoji",
+                    label: m.new_brave_maggot_relish,
+                },
+                {
+                    value: "noto",
+                    label: m.shy_clear_spider_cook,
+                },
+                {
+                    value: "fluent",
+                    label: m.many_tasty_midge_zoom,
+                },
+                {
+                    value: "fluent-flat",
+                    label: m.less_early_lionfish_honor,
+                },
+            ],
+            page: SettingPages.Appearance,
+        } as EnumSetting,
+        [SettingIds.BackgroundURL]: {
+            title: m.stock_large_marten_comfort,
+            description: m.mean_weird_donkey_stab,
+            type: SettingType.String,
+            value: "",
+            page: SettingPages.Appearance,
+        } as StringSetting,
+        [SettingIds.NotificationsSidebar]: {
+            title: m.tired_jumpy_rook_slurp,
+            description: m.wide_new_robin_empower,
+            type: SettingType.Boolean,
+            value: true,
+            page: SettingPages.Appearance,
+        } as BooleanSetting,
+    };
 };
 
 export const getSettingsForPage = (page: SettingPages): Partial<Settings> => {
     return Object.fromEntries(
-        Object.entries(settings).filter(([, setting]) => setting.page === page),
+        Object.entries(settings()).filter(
+            ([, setting]) => setting.page === page,
+        ),
     );
 };
 
@@ -233,14 +327,14 @@ export const getSettingsForPage = (page: SettingPages): Partial<Settings> => {
 export const mergeSettings = (
     settingsToMerge: Record<SettingIds, Setting["value"]>,
 ): Settings => {
-    const finalSettings = structuredClone(settings);
+    const finalSettings = settings();
 
     for (const [key, value] of Object.entries(settingsToMerge)) {
-        if (key in settings) {
+        if (key in settings()) {
             finalSettings[key as SettingIds].value = value;
         }
     }
 
     return finalSettings;
 };
-export type Settings = typeof settings;
+export type Settings = ReturnType<typeof settings>;
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..eee3cec
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,104 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --warning: 40, 100%, 50%;
+        --warning-foreground: 0 0% 98%;
+
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --warning: 40 100% 50%;
+        --warning-foreground: 0 0% 98%;
+
+        --ring: 240 4.9% 83.9%;
+
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
diff --git a/styles/mcdonalds.css b/styles/mcdonalds.css
new file mode 100644
index 0000000..2f55236
--- /dev/null
+++ b/styles/mcdonalds.css
@@ -0,0 +1,50 @@
+@tailwind base;
+
+@layer base {
+    :root,
+    .dark {
+        --background: 44, 100%, 59%;
+        --foreground: 4, 77%, 48%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 4, 77%, 48%;
+
+        --popover: 44, 100%, 59%;
+        --popover-foreground: 4, 77%, 48%;
+
+        --card: 4, 77%, 48%;
+        --card-foreground: 44, 100%, 59%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+
+        --primary: 44, 100%, 59%;
+        --primary-foreground: 44, 100%, 59%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --accent: 4, 77%, 48%;
+        --accent-foreground: 44, 100%, 59%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+
+        --sidebar-background: 4, 77%, 48%;
+        --sidebar-foreground: 44, 100%, 59%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 44, 100%, 59%;
+        --sidebar-ring: 4, 77%, 48%;
+    }
+
+    .prose * {
+        color: hsl(var(--card-foreground)) !important;
+    }
+}
diff --git a/sws.toml b/sws.toml
new file mode 100644
index 0000000..7f17100
--- /dev/null
+++ b/sws.toml
@@ -0,0 +1,22 @@
+[general]
+
+#### Address & Root dir
+host = "::"
+port = 3000
+root = "/app/public"
+
+#### Logging
+log-level = "error"
+
+#### Cache Control headers
+cache-control-headers = true
+
+#### Auto Compression
+compression = true
+compression-level = "default"
+
+#### Page fallback for 404s
+page-fallback = "/app/public/200.html"
+
+# Disable because it strips URI parameters
+redirect-trailing-slash = false
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2417310..7a4e2aa 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
 
 const themeVariables = (color: string) => ({
     50: `var(--theme-${color}-50)`,
@@ -17,14 +18,82 @@ const themeVariables = (color: string) => ({
 });
 
 export default (<Config>{
+    darkMode: "class",
+    safelist: ["dark"],
     theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
         extend: {
             colors: {
                 dark: themeVariables("dark"),
-                primary: themeVariables("primary"),
+                primary2: themeVariables("primary"),
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                warning: {
+                    DEFAULT: "hsl(var(--warning))",
+                    foreground: "hsl(var(--warning-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+                sidebar: {
+                    DEFAULT: "hsl(var(--sidebar-background))",
+                    foreground: "hsl(var(--sidebar-foreground))",
+                    primary: "hsl(var(--sidebar-primary))",
+                    "primary-foreground":
+                        "hsl(var(--sidebar-primary-foreground))",
+                    accent: "hsl(var(--sidebar-accent))",
+                    "accent-foreground":
+                        "hsl(var(--sidebar-accent-foreground))",
+                    border: "hsl(var(--sidebar-border))",
+                    ring: "hsl(var(--sidebar-ring))",
+                },
+            },
+            borderRadius: {
+                xl: "calc(var(--radius) + 4px)",
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
             },
             animation: {
                 like: "like 1s ease-in-out",
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+                "collapsible-down": "collapsible-down 0.2s ease-in-out",
+                "collapsible-up": "collapsible-up 0.2s ease-in-out",
             },
             keyframes: {
                 like: {
@@ -38,9 +107,25 @@ export default (<Config>{
                         transform: "scale(1) rotate(360deg)",
                     },
                 },
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+                "collapsible-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-collapsible-content-height)" },
+                },
+                "collapsible-up": {
+                    from: { height: "var(--radix-collapsible-content-height)" },
+                    to: { height: "0" },
+                },
             },
         },
     },
-    plugins: [forms, typography],
+    plugins: [forms, typography, animate],
     content: ["packages/**/*.{vue,js,ts}"],
 });
diff --git a/tsconfig.json b/tsconfig.json
index aff85fe..28eea3d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "compilerOptions": {
         "target": "esnext",
         "module": "esnext",
-        "allowImportingTsExtensions": true
+        "allowImportingTsExtensions": true,
+        "allowJs": true
     }
 }
diff --git a/utils/auth.ts b/utils/auth.ts
index 15b6269..27cb28b 100644
--- a/utils/auth.ts
+++ b/utils/auth.ts
@@ -1,5 +1,42 @@
 import type { ApplicationData } from "@versia/client/types";
 import { nanoid } from "nanoid";
+import { toast } from "vue-sonner";
+import * as m from "~/paraglide/messages.js";
+
+export const signIn = async (appData: Ref<ApplicationData | null>) => {
+    const id = toast.loading(m.level_due_ox_greet());
+
+    const output = await client.value.createApp("Versia", {
+        scopes: ["read", "write", "follow", "push"],
+        redirect_uris: new URL("/", useRequestURL().origin).toString(),
+        website: useBaseUrl().value,
+    });
+
+    if (!output?.data) {
+        toast.dismiss(id);
+        toast.error(m.silly_sour_fireant_fear());
+        return;
+    }
+
+    appData.value = output.data;
+
+    const url = await client.value.generateAuthUrl(
+        output.data.client_id,
+        output.data.client_secret,
+        {
+            scopes: ["read", "write", "follow", "push"],
+            redirect_uri: new URL("/", useRequestURL().origin).toString(),
+        },
+    );
+
+    if (!url) {
+        toast.dismiss(id);
+        toast.error(m.candid_frail_lion_value());
+        return;
+    }
+
+    window.location.href = url;
+};
 
 export const signInWithCode = (code: string, appData: ApplicationData) => {
     client.value
diff --git a/utils/urls.ts b/utils/urls.ts
new file mode 100644
index 0000000..da22ac3
--- /dev/null
+++ b/utils/urls.ts
@@ -0,0 +1,16 @@
+import { languageTag } from "~/paraglide/runtime";
+
+export const wrapUrl = (path: string) => {
+    return new URL(
+        path,
+        identity.value
+            ? `https://${identity.value.instance.domain}`
+            : window.location.origin,
+    ).toString();
+};
+
+export const getLanguageTag = () => {
+    const tag = languageTag();
+
+    return tag === "en-rot" ? "en" : tag;
+};
diff --git a/utils/validators.ts b/utils/validators.ts
index 0a9da6c..2306f78 100644
--- a/utils/validators.ts
+++ b/utils/validators.ts
@@ -1,6 +1,7 @@
 import {
     caseInsensitive,
     char,
+    charIn,
     createRegExp,
     digit,
     exactly,
@@ -12,7 +13,7 @@ import {
 
 export const emojiValidator = createRegExp(
     // A-Z a-z 0-9 _ -
-    oneOrMore(letter.or(digit).or(exactly("_")).or(exactly("-"))),
+    oneOrMore(letter.or(digit).or(charIn("_-"))),
     [caseInsensitive, global],
 );