diff --git a/bun.lockb b/bun.lockb
index b37539f..ce8b05f 100755
Binary files a/bun.lockb and b/bun.lockb differ
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/oauth/login.vue b/components/oauth/login.vue
new file mode 100644
index 0000000..4bf775b
--- /dev/null
+++ b/components/oauth/login.vue
@@ -0,0 +1,141 @@
+<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";
+
+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: "Must be at least 3 characters long",
+            })
+            .or(
+                z.string().email({
+                    message: "Must be a valid email address",
+                }),
+            ),
+        password: z.string().min(3, {
+            message: "Must be at least 3 characters long",
+        }),
+    }),
+);
+
+const form = useForm({
+    validationSchema: formSchema,
+});
+
+const onSubmit = form.handleSubmit((values) => {
+    console.info("Form submitted!", values);
+});
+
+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="onSubmit" method="post" :action="redirectUrl.toString()">
+            <div class="grid gap-6">
+                <FormField v-slot="{ componentField }" name="identifier">
+                    <FormItem>
+                        <FormLabel>
+                            Email (or username)
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="petergriffin" type="email" 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>
+                            Password
+                        </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" />
+                    Sign In
+                </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">
+                    Or continue with
+                </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/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/users/Account.vue b/components/social-elements/users/Account.vue
deleted file mode 100644
index b15ab9d..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-primary2-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 a53c1a6..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-primary2-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-primary2-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/UserCard.vue b/components/social-elements/users/UserCard.vue
deleted file mode 100644
index 34c2c02..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-primary2-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/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..da875ca
--- /dev/null
+++ b/components/ui/form/FormItem.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { useId } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/form/FormLabel.vue b/components/ui/form/FormLabel.vue
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/input/Input.vue b/components/ui/input/Input.vue
index 770afee..53a87ce 100644
--- a/components/ui/input/Input.vue
+++ b/components/ui/input/Input.vue
@@ -19,5 +19,5 @@ const modelValue = useVModel(props, "modelValue", emits, {
 </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-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)">
+  <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 !outline-none 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/composables/AccountAcct.ts b/composables/AccountAcct.ts
index da87dff..4863c21 100644
--- a/composables/AccountAcct.ts
+++ b/composables/AccountAcct.ts
@@ -4,14 +4,16 @@ import type { Account } from "@versia/client/types";
 export const useAccountFromAcct = (
     client: MaybeRef<Client | null>,
     acct: string,
-): Ref<Account | null> => {
+): { 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 output;
+    return { account: output, isLoading };
 };
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/nuxt.config.ts b/nuxt.config.ts
index 324146d..9986777 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,11 @@ 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,
     },
diff --git a/package.json b/package.json
index e283541..a8b99de 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
         "shiki": "^1.24.0",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
+        "vee-validate": "^4.14.7",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "vue-sonner": "^1.3.0",
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index d449de6..5e2f524 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -1,16 +1,25 @@
 <template>
-    <ErrorBoundary>
-        <div class="mx-auto max-w-2xl w-full space-y-2">
-            <TimelineScroller v-if="account">
-                <AccountProfile :account="account" />
-                <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 class="text-">Account not found.</CardTitle>
+                <CardDescription>
+                    Check for typos or try again later.
+                </CardDescription>
+            </CardHeader>
+        </Card>
+    </div>
 </template>
 
 <script setup lang="ts">
-import ErrorBoundary from "~/components/errors/ErrorBoundary.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";
@@ -24,7 +33,7 @@ const username = (route.params.username as string).startsWith("@")
     ? (route.params.username as string).substring(1)
     : (route.params.username as string);
 
-const account = useAccountFromAcct(client, username);
+const { account, isLoading } = useAccountFromAcct(client, username);
 const accountId = computed(() => account.value?.id ?? undefined);
 
 useServerSeoMeta({
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/oauth/authorize.vue b/pages/oauth/authorize.vue
index f424a97..dd1814d 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -1,165 +1,59 @@
+<script setup lang="ts">
+import { Client } from "@versia/client";
+import { Loader } from "lucide-vue-next";
+import UserAuthForm from "~/components/oauth/login.vue";
+import { Button } from "~/components/ui/button";
+import { NuxtLink } from "#components";
+
+const {
+    public: { apiHost },
+} = useRuntimeConfig();
+
+const host = new URL(apiHost).host;
+const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
+</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">
+            Register
+        </Button>
+        <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow">
+            <div class="absolute inset-0 bg-zinc-900" />
+            <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-primary2-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-primary2-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]">
+                <div class="flex flex-col space-y-2 text-center">
+                    <h1 class="text-2xl font-semibold tracking-tight">
+                        Log in to your account.
+                    </h1>
+                    <p class="text-sm text-muted-foreground">
+                        Enter your credentials for <code>{{ host }}</code>.
+                    </p>
+                </div>
+                <UserAuthForm v-if="instance" :instance="instance" />
+                <div v-else class="p-4 flex items-center justify-center h-48">
+                    <Loader class="size-8 animate-spin" />
+                </div>
+            </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/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/styles/index.css b/styles/index.css
index 5d6a199..30f61c5 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,5 +1,9 @@
 @tailwind base;
 
+@tailwind components;
+
+@tailwind utilities;
+
 @layer base {
     :root {
         --background: 0 0% 100%;