diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index f0678ceb..58f0e20e 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -484,5 +484,5 @@
 	"yes": "Yes",
 	"no": "No",
 	"restricted": "Restricted",
-  "scopes": "Scopes"
+	"scopes": "Scopes"
 }
diff --git a/frontend/package.json b/frontend/package.json
index b8b64b39..2bdbffa6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,63 +1,63 @@
 {
-  "name": "pocket-id-frontend",
-  "version": "1.16.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "preview": "vite preview --port 3000",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "@simplewebauthn/browser": "^13.2.2",
-    "@tailwindcss/vite": "^4.1.17",
-    "axios": "^1.13.2",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "jose": "^6.1.3",
-    "qrcode": "^1.5.4",
-    "runed": "^0.37.0",
-    "sveltekit-superforms": "^2.28.1",
-    "tailwind-merge": "^3.4.0",
-    "zod": "^4.1.13"
-  },
-  "devDependencies": {
-    "@inlang/paraglide-js": "^2.6.0",
-    "@inlang/plugin-m-function-matcher": "^2.1.0",
-    "@inlang/plugin-message-format": "^4.0.0",
-    "@internationalized/date": "^3.10.0",
-    "@lucide/svelte": "^0.559.0",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.2",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/eslint": "^9.6.1",
-    "@types/node": "^24.10.2",
-    "@types/qrcode": "^1.5.6",
-    "bits-ui": "^2.14.4",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.13.1",
-    "formsnap": "^2.0.1",
-    "globals": "^16.5.0",
-    "mode-watcher": "^1.1.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "rollup": "^4.53.3",
-    "svelte": "^5.45.8",
-    "svelte-check": "^4.3.4",
-    "svelte-sonner": "^1.0.7",
-    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.17",
-    "tslib": "^2.8.1",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7"
-  }
+	"name": "pocket-id-frontend",
+	"version": "1.16.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"preinstall": "npx only-allow pnpm",
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview --port 3000",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@simplewebauthn/browser": "^13.2.2",
+		"@tailwindcss/vite": "^4.1.17",
+		"axios": "^1.13.2",
+		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"jose": "^6.1.3",
+		"qrcode": "^1.5.4",
+		"runed": "^0.37.0",
+		"sveltekit-superforms": "^2.28.1",
+		"tailwind-merge": "^3.4.0",
+		"zod": "^4.1.13"
+	},
+	"devDependencies": {
+		"@inlang/paraglide-js": "^2.6.0",
+		"@inlang/plugin-m-function-matcher": "^2.1.0",
+		"@inlang/plugin-message-format": "^4.0.0",
+		"@internationalized/date": "^3.10.0",
+		"@lucide/svelte": "^0.559.0",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/eslint": "^9.6.1",
+		"@types/node": "^24.10.2",
+		"@types/qrcode": "^1.5.6",
+		"bits-ui": "^2.14.4",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.1",
+		"formsnap": "^2.0.1",
+		"globals": "^16.5.0",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"rollup": "^4.53.3",
+		"svelte": "^5.45.8",
+		"svelte-check": "^4.3.4",
+		"svelte-sonner": "^1.0.7",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.1.17",
+		"tslib": "^2.8.1",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.49.0",
+		"vite": "^7.2.7"
+	}
 }
diff --git a/frontend/src/lib/components/ui/field/field-content.svelte b/frontend/src/lib/components/ui/field/field-content.svelte
index d95fe951..db017eb9 100644
--- a/frontend/src/lib/components/ui/field/field-content.svelte
+++ b/frontend/src/lib/components/ui/field/field-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	class={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/field/field-error.svelte b/frontend/src/lib/components/ui/field/field-error.svelte
index 78b87a22..5ad1d77d 100644
--- a/frontend/src/lib/components/ui/field/field-error.svelte
+++ b/frontend/src/lib/components/ui/field/field-error.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
-		class={cn("text-destructive text-sm font-normal", className)}
+		class={cn('text-destructive text-sm font-normal', className)}
 		{...restProps}
 	>
 		{#if children}
diff --git a/frontend/src/lib/components/ui/field/field-legend.svelte b/frontend/src/lib/components/ui/field/field-legend.svelte
index 73335d9f..5771a482 100644
--- a/frontend/src/lib/components/ui/field/field-legend.svelte
+++ b/frontend/src/lib/components/ui/field/field-legend.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = "legend",
+		variant = 'legend',
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
-		variant?: "legend" | "label";
+		variant?: 'legend' | 'label';
 	} = $props();
 </script>
 
@@ -18,9 +18,9 @@
 	data-slot="field-legend"
 	data-variant={variant}
 	class={cn(
-		"mb-3 font-medium",
-		"data-[variant=legend]:text-base",
-		"data-[variant=label]:text-sm",
+		'mb-3 font-medium',
+		'data-[variant=legend]:text-base',
+		'data-[variant=label]:text-sm',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-separator.svelte b/frontend/src/lib/components/ui/field/field-separator.svelte
index d16f805c..c6b88068 100644
--- a/frontend/src/lib/components/ui/field/field-separator.svelte
+++ b/frontend/src/lib/components/ui/field/field-separator.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -20,10 +20,7 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn(
-		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-		className
-	)}
+	class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
diff --git a/frontend/src/lib/components/ui/field/field-title.svelte b/frontend/src/lib/components/ui/field/field-title.svelte
index 091320e5..9eeb49bd 100644
--- a/frontend/src/lib/components/ui/field/field-title.svelte
+++ b/frontend/src/lib/components/ui/field/field-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-title"
 	class={cn(
-		"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+		'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/index.ts b/frontend/src/lib/components/ui/field/index.ts
index a644a956..0c207d8a 100644
--- a/frontend/src/lib/components/ui/field/index.ts
+++ b/frontend/src/lib/components/ui/field/index.ts
@@ -1,13 +1,13 @@
-import Field from "./field.svelte";
-import Set from "./field-set.svelte";
-import Legend from "./field-legend.svelte";
-import Group from "./field-group.svelte";
-import Content from "./field-content.svelte";
-import Label from "./field-label.svelte";
-import Title from "./field-title.svelte";
-import Description from "./field-description.svelte";
-import Separator from "./field-separator.svelte";
-import Error from "./field-error.svelte";
+import Field from './field.svelte';
+import Set from './field-set.svelte';
+import Legend from './field-legend.svelte';
+import Group from './field-group.svelte';
+import Content from './field-content.svelte';
+import Label from './field-label.svelte';
+import Title from './field-title.svelte';
+import Description from './field-description.svelte';
+import Separator from './field-separator.svelte';
+import Error from './field-error.svelte';
 
 export {
 	Field,
@@ -29,5 +29,5 @@ export {
 	Title as FieldTitle,
 	Description as FieldDescription,
 	Separator as FieldSeparator,
-	Error as FieldError,
+	Error as FieldError
 };
diff --git a/frontend/src/lib/components/ui/item/index.ts b/frontend/src/lib/components/ui/item/index.ts
index 168bc3ec..3b548a5a 100644
--- a/frontend/src/lib/components/ui/item/index.ts
+++ b/frontend/src/lib/components/ui/item/index.ts
@@ -1,13 +1,13 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
-import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
-import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
-import Media from "./item-media.svelte";
+import Root from './item.svelte';
+import Group from './item-group.svelte';
+import Separator from './item-separator.svelte';
+import Header from './item-header.svelte';
+import Footer from './item-footer.svelte';
+import Content from './item-content.svelte';
+import Title from './item-title.svelte';
+import Description from './item-description.svelte';
+import Actions from './item-actions.svelte';
+import Media from './item-media.svelte';
 
 export {
 	Root,
@@ -30,5 +30,5 @@ export {
 	Title as ItemTitle,
 	Description as ItemDescription,
 	Actions as ItemActions,
-	Media as ItemMedia,
+	Media as ItemMedia
 };
diff --git a/frontend/src/lib/components/ui/item/item-actions.svelte b/frontend/src/lib/components/ui/item/item-actions.svelte
index d7c92515..ce37080b 100644
--- a/frontend/src/lib/components/ui/item/item-actions.svelte
+++ b/frontend/src/lib/components/ui/item/item-actions.svelte
@@ -16,7 +16,11 @@
 <div
 	bind:this={ref}
 	data-slot="item-actions"
-	class={cn('flex items-center gap-2', wrapOnMobile && 'w-full pl-8 sm:w-auto sm:pl-0 pt-1', className)}
+	class={cn(
+		'flex items-center gap-2',
+		wrapOnMobile && 'w-full pl-8 sm:w-auto sm:pl-0 pt-1',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-content.svelte b/frontend/src/lib/components/ui/item/item-content.svelte
index 5761497d..e7e30a15 100644
--- a/frontend/src/lib/components/ui/item/item-content.svelte
+++ b/frontend/src/lib/components/ui/item/item-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-content"
-	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+	class={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-description.svelte b/frontend/src/lib/components/ui/item/item-description.svelte
index 337d8f86..33521ff1 100644
--- a/frontend/src/lib/components/ui/item/item-description.svelte
+++ b/frontend/src/lib/components/ui/item/item-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,8 +14,8 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		"text-muted-foreground text-balance text-sm font-normal leading-normal",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		'text-muted-foreground text-balance text-sm font-normal leading-normal',
+		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/item/item-footer.svelte b/frontend/src/lib/components/ui/item/item-footer.svelte
index eac5bab1..321e6fde 100644
--- a/frontend/src/lib/components/ui/item/item-footer.svelte
+++ b/frontend/src/lib/components/ui/item/item-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn('flex basis-full items-center justify-between gap-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-group.svelte b/frontend/src/lib/components/ui/item/item-group.svelte
index 8bbcf2f9..d9a8fc4e 100644
--- a/frontend/src/lib/components/ui/item/item-group.svelte
+++ b/frontend/src/lib/components/ui/item/item-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn("group/item-group flex flex-col", className)}
+	class={cn('group/item-group flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-header.svelte b/frontend/src/lib/components/ui/item/item-header.svelte
index fad24190..bd3635db 100644
--- a/frontend/src/lib/components/ui/item/item-header.svelte
+++ b/frontend/src/lib/components/ui/item/item-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn('flex basis-full items-center justify-between gap-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-separator.svelte b/frontend/src/lib/components/ui/item/item-separator.svelte
index bd028629..765d639a 100644
--- a/frontend/src/lib/components/ui/item/item-separator.svelte
+++ b/frontend/src/lib/components/ui/item/item-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils/style.js";
-	import type { ComponentProps } from "svelte";
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils/style.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="item-separator"
 	orientation="horizontal"
-	class={cn("my-0", className)}
+	class={cn('my-0', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte
index 03383cdc..5b363ee9 100644
--- a/frontend/src/lib/components/ui/item/item-title.svelte
+++ b/frontend/src/lib/components/ui/item/item-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils/style.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	role="heading"
 	aria-level="3"
 	data-slot="item-title"
-	class={cn("flex w-fit items-center gap-2 font-semibold leading-snug", className)}
+	class={cn('flex w-fit items-center gap-2 font-semibold leading-snug', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/spinner/index.ts b/frontend/src/lib/components/ui/spinner/index.ts
index f8b1cedd..2e459c67 100644
--- a/frontend/src/lib/components/ui/spinner/index.ts
+++ b/frontend/src/lib/components/ui/spinner/index.ts
@@ -1 +1 @@
-export { default as Spinner } from "./spinner.svelte";
+export { default as Spinner } from './spinner.svelte';
diff --git a/frontend/src/lib/components/ui/spinner/spinner.svelte b/frontend/src/lib/components/ui/spinner/spinner.svelte
index fba1b061..fa46b4db 100644
--- a/frontend/src/lib/components/ui/spinner/spinner.svelte
+++ b/frontend/src/lib/components/ui/spinner/spinner.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from "$lib/utils/style.js";
-	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import type { ComponentProps } from "svelte";
+	import { cn } from '$lib/utils/style.js';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { ComponentProps } from 'svelte';
 
 	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
 </script>
@@ -9,6 +9,6 @@
 <Loader2Icon
 	role="status"
 	aria-label="Loading"
-	class={cn("size-4 animate-spin", className)}
+	class={cn('size-4 animate-spin', className)}
 	{...restProps}
 />