diff --git a/packages/frontend/src/lib/components/recording-card/recording-card.svelte b/packages/frontend/src/lib/components/recording-card/recording-card.svelte
index 0df67b9..984fe53 100644
--- a/packages/frontend/src/lib/components/recording-card/recording-card.svelte
+++ b/packages/frontend/src/lib/components/recording-card/recording-card.svelte
@@ -21,7 +21,6 @@
     const seconds = totalSeconds % 60;
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
   }
-
 </script>
 
 <Card
diff --git a/packages/frontend/src/lib/components/ui/empty/empty-content.svelte b/packages/frontend/src/lib/components/ui/empty/empty-content.svelte
index f5a9c68..b1f8a7a 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty-content.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty-content.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty-content"
-	class={cn(
-		"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-		className
-	)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty-content"
+  class={cn(
+    "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+    className,
+  )}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/empty-description.svelte b/packages/frontend/src/lib/components/ui/empty/empty-description.svelte
index 85a866c..4d2ce1c 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty-description.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty-description.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty-description"
-	class={cn(
-		"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-		className
-	)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty-description"
+  class={cn(
+    "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+    className,
+  )}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/empty-header.svelte b/packages/frontend/src/lib/components/ui/empty/empty-header.svelte
index 296eaf8..163d7c6 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty-header.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty-header.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty-header"
-	class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty-header"
+  class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/empty-media.svelte b/packages/frontend/src/lib/components/ui/empty/empty-media.svelte
index 0b4e45d..542ffd6 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty-media.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty-media.svelte
@@ -1,41 +1,41 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+  import { tv, type VariantProps } from "tailwind-variants";
 
-	export const emptyMediaVariants = tv({
-		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
+  export const emptyMediaVariants = tv({
+    base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
 
-	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+  export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		variant = "default",
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "default",
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty-icon"
-	data-variant={variant}
-	class={cn(emptyMediaVariants({ variant }), className)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty-icon"
+  data-variant={variant}
+  class={cn(emptyMediaVariants({ variant }), className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/empty-title.svelte b/packages/frontend/src/lib/components/ui/empty/empty-title.svelte
index 8c237aa..076d3cd 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty-title.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty-title"
-	class={cn("text-lg font-medium tracking-tight", className)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty-title"
+  class={cn("text-lg font-medium tracking-tight", className)}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/empty.svelte b/packages/frontend/src/lib/components/ui/empty/empty.svelte
index 4ccf060..23f6dd1 100644
--- a/packages/frontend/src/lib/components/ui/empty/empty.svelte
+++ b/packages/frontend/src/lib/components/ui/empty/empty.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	bind:this={ref}
-	data-slot="empty"
-	class={cn(
-		"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-		className
-	)}
-	{...restProps}
+  bind:this={ref}
+  data-slot="empty"
+  class={cn(
+    "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+    className,
+  )}
+  {...restProps}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>
diff --git a/packages/frontend/src/lib/components/ui/empty/index.ts b/packages/frontend/src/lib/components/ui/empty/index.ts
index ae4c106..a4996a2 100644
--- a/packages/frontend/src/lib/components/ui/empty/index.ts
+++ b/packages/frontend/src/lib/components/ui/empty/index.ts
@@ -6,17 +6,17 @@ import Description from "./empty-description.svelte";
 import Content from "./empty-content.svelte";
 
 export {
-	Root,
-	Header,
-	Media,
-	Title,
-	Description,
-	Content,
-	//
-	Root as Empty,
-	Header as EmptyHeader,
-	Media as EmptyMedia,
-	Title as EmptyTitle,
-	Description as EmptyDescription,
-	Content as EmptyContent,
+  Root,
+  Header,
+  Media,
+  Title,
+  Description,
+  Content,
+  //
+  Root as Empty,
+  Header as EmptyHeader,
+  Media as EmptyMedia,
+  Title as EmptyTitle,
+  Description as EmptyDescription,
+  Content as EmptyContent,
 };
diff --git a/packages/frontend/src/lib/services.ts b/packages/frontend/src/lib/services.ts
index 559cea2..66125c3 100644
--- a/packages/frontend/src/lib/services.ts
+++ b/packages/frontend/src/lib/services.ts
@@ -912,20 +912,14 @@ const UPDATE_RECORDING_MUTATION = gql`
   }
 `;
 
-export async function updateRecording(
-  id: string,
-  fields: { status?: string; public?: boolean },
-) {
-  return loggedApiCall(
-    "updateRecording",
-    async () => {
-      const data = await getGraphQLClient().request<{ updateRecording: Recording }>(
-        UPDATE_RECORDING_MUTATION,
-        { id, ...fields },
-      );
-      return data.updateRecording;
-    },
-  );
+export async function updateRecording(id: string, fields: { status?: string; public?: boolean }) {
+  return loggedApiCall("updateRecording", async () => {
+    const data = await getGraphQLClient().request<{ updateRecording: Recording }>(
+      UPDATE_RECORDING_MUTATION,
+      { id, ...fields },
+    );
+    return data.updateRecording;
+  });
 }
 
 const DELETE_RECORDING_MUTATION = gql`
diff --git a/packages/frontend/src/routes/admin/+layout.svelte b/packages/frontend/src/routes/admin/+layout.svelte
index 8d49a30..080a598 100644
--- a/packages/frontend/src/routes/admin/+layout.svelte
+++ b/packages/frontend/src/routes/admin/+layout.svelte
@@ -68,7 +68,10 @@
       <!-- Sidebar (desktop only) -->
       <aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
         <div class="px-4 py-5 border-b border-border/40">
-          <a href="/" class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
+          <a
+            href="/"
+            class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
             <span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
             {$_("admin.nav.back_to_site")}
           </a>
@@ -80,8 +83,11 @@
                   {getUserInitials(displayName)}
                 </AvatarFallback>
               </Avatar>
-              <span class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background">
-                <span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"></span>
+              <span
+                class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background"
+              >
+                <span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"
+                ></span>
               </span>
             </div>
             <div class="min-w-0">
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
index 7ab836f..1414842 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
@@ -101,7 +101,10 @@
   <div class="mb-6">
     <h1 class="text-2xl font-bold">{data.article.title}</h1>
     <p class="text-xs text-muted-foreground mt-0.5">
-      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article.author ? " · " + data.article.author.artist_name : ""}
+      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article
+        .author
+        ? " · " + data.article.author.artist_name
+        : ""}
     </p>
   </div>
 
@@ -238,7 +241,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <label class="flex items-center gap-2 cursor-pointer">
diff --git a/packages/frontend/src/routes/admin/articles/new/+page.svelte b/packages/frontend/src/routes/admin/articles/new/+page.svelte
index a19c956..ed3916e 100644
--- a/packages/frontend/src/routes/admin/articles/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/new/+page.svelte
@@ -187,7 +187,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <label class="flex items-center gap-2 cursor-pointer">
diff --git a/packages/frontend/src/routes/admin/users/[id]/+page.svelte b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
index fbb8763..f9f5167 100644
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -182,7 +182,11 @@
               class="h-20 w-20 rounded-full object-cover mb-2"
             />
           {/if}
-          <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleAvatarUpload} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handleAvatarUpload}
+          />
         </div>
 
         <div class="space-y-1.5">
@@ -194,7 +198,11 @@
               class="w-full h-24 rounded object-cover mb-2"
             />
           {/if}
-          <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handleBannerUpload}
+          />
         </div>
 
         <div class="space-y-1.5">
@@ -207,7 +215,11 @@
               class="w-full h-48 rounded object-cover mb-2"
             />
           {/if}
-          <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handlePhotoUpload2} />
+          <FileDropZone
+            accept="image/*"
+            maxFileSize={10 * MEGABYTE}
+            onUpload={handlePhotoUpload2}
+          />
         </div>
 
         <label
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index 895f8f6..0abec19 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -110,7 +110,9 @@
   <div class="mb-6">
     <h1 class="text-2xl font-bold">{data.video.title}</h1>
     <p class="text-xs text-muted-foreground mt-0.5">
-      {data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured ? " · featured" : ""}
+      {data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured
+        ? " · featured"
+        : ""}
     </p>
   </div>
 
@@ -177,7 +179,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <div class="space-y-1.5">
diff --git a/packages/frontend/src/routes/admin/videos/new/+page.svelte b/packages/frontend/src/routes/admin/videos/new/+page.svelte
index bda9717..9881ddd 100644
--- a/packages/frontend/src/routes/admin/videos/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/new/+page.svelte
@@ -161,7 +161,10 @@
 
       <div class="space-y-1.5">
         <Label>{$_("admin.common.tags")}</Label>
-        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
       </div>
 
       <div class="space-y-1.5">
diff --git a/packages/frontend/src/routes/me/+layout.svelte b/packages/frontend/src/routes/me/+layout.svelte
index de83ef9..415fbc0 100644
--- a/packages/frontend/src/routes/me/+layout.svelte
+++ b/packages/frontend/src/routes/me/+layout.svelte
@@ -65,7 +65,10 @@
       <!-- Sidebar (desktop only) -->
       <aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
         <div class="px-4 py-5 border-b border-border/40">
-          <a href="/" class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
+          <a
+            href="/"
+            class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
             <span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
             {$_("me.nav.back_to_site")}
           </a>
diff --git a/packages/frontend/src/routes/me/profile/+page.svelte b/packages/frontend/src/routes/me/profile/+page.svelte
index b979102..1109a0a 100644
--- a/packages/frontend/src/routes/me/profile/+page.svelte
+++ b/packages/frontend/src/routes/me/profile/+page.svelte
@@ -135,150 +135,150 @@
   </div>
 
   <Card class="bg-card/50 border-primary/20 max-w-2xl">
-      <CardHeader>
-        <CardTitle>{$_("me.settings.profile_title")}</CardTitle>
-        <CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
-      </CardHeader>
-      <CardContent class="space-y-4">
-        <form onsubmit={handleProfileSubmit} class="space-y-4">
-          <div class="space-y-2">
-            <Label>{$_("me.settings.avatar")}</Label>
-            <div class="flex items-center gap-5">
-              <FileDropZone
-                id="avatar"
-                fileCount={0}
-                maxFiles={1}
-                maxFileSize={2 * MEGABYTE}
-                onUpload={handleFilesUpload}
-                accept="image/*"
-                class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
-              >
-                <div class="relative group cursor-pointer w-24 h-24">
-                  {#if avatar}
-                    <img
-                      src={avatar.url}
-                      alt={avatar.name}
-                      class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
-                    />
-                    <div
-                      class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                    >
-                      <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
-                    </div>
-                  {:else}
-                    <div
-                      class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
-                    >
-                      <span
-                        class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
-                      ></span>
-                      <span class="text-xs text-muted-foreground">Upload</span>
-                    </div>
-                  {/if}
-                </div>
-              </FileDropZone>
-              <div class="flex flex-col gap-1">
-                <p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
-                <p class="text-xs text-muted-foreground/70">
-                  Click or drop to {avatar ? "change" : "upload"}
-                </p>
+    <CardHeader>
+      <CardTitle>{$_("me.settings.profile_title")}</CardTitle>
+      <CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <form onsubmit={handleProfileSubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label>{$_("me.settings.avatar")}</Label>
+          <div class="flex items-center gap-5">
+            <FileDropZone
+              id="avatar"
+              fileCount={0}
+              maxFiles={1}
+              maxFileSize={2 * MEGABYTE}
+              onUpload={handleFilesUpload}
+              accept="image/*"
+              class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
+            >
+              <div class="relative group cursor-pointer w-24 h-24">
                 {#if avatar}
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onclick={handleAvatarRemove}
-                    class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  <img
+                    src={avatar.url}
+                    alt={avatar.name}
+                    class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
+                  />
+                  <div
+                    class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                   >
-                    <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
-                    Remove
-                  </Button>
+                    <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
+                  </div>
+                {:else}
+                  <div
+                    class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
+                  >
+                    <span
+                      class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
+                    ></span>
+                    <span class="text-xs text-muted-foreground">Upload</span>
+                  </div>
                 {/if}
               </div>
+            </FileDropZone>
+            <div class="flex flex-col gap-1">
+              <p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
+              <p class="text-xs text-muted-foreground/70">
+                Click or drop to {avatar ? "change" : "upload"}
+              </p>
+              {#if avatar}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onclick={handleAvatarRemove}
+                  class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                >
+                  <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
+                  Remove
+                </Button>
+              {/if}
             </div>
           </div>
+        </div>
 
-          <div class="grid grid-cols-2 gap-4">
-            <div class="space-y-2">
-              <Label for="firstName">{$_("me.settings.first_name")}</Label>
-              <Input
-                id="firstName"
-                placeholder={$_("me.settings.first_name_placeholder")}
-                bind:value={firstName}
-                required
-                class="bg-background/50 border-primary/20 focus:border-primary"
-              />
-            </div>
-            <div class="space-y-2">
-              <Label for="lastName">{$_("me.settings.last_name")}</Label>
-              <Input
-                id="lastName"
-                placeholder={$_("me.settings.last_name_placeholder")}
-                bind:value={lastName}
-                required
-                class="bg-background/50 border-primary/20 focus:border-primary"
-              />
-            </div>
-          </div>
-
+        <div class="grid grid-cols-2 gap-4">
           <div class="space-y-2">
-            <Label for="artistName">{$_("me.settings.artist_name")}</Label>
+            <Label for="firstName">{$_("me.settings.first_name")}</Label>
             <Input
-              id="artistName"
-              placeholder={$_("me.settings.artist_name_placeholder")}
-              bind:value={artistName}
+              id="firstName"
+              placeholder={$_("me.settings.first_name_placeholder")}
+              bind:value={firstName}
               required
               class="bg-background/50 border-primary/20 focus:border-primary"
             />
           </div>
-
           <div class="space-y-2">
-            <Label for="description">{$_("me.settings.description")}</Label>
-            <Textarea
-              id="description"
-              bind:value={description}
-              placeholder={$_("me.settings.description_placeholder")}
-              class="bg-background/50 border-primary/20 focus:border-primary"
-              rows={3}
-            />
-          </div>
-
-          <div class="space-y-2">
-            <Label for="tags">{$_("me.settings.tags")}</Label>
-            <TagsInput
-              id="tags"
-              bind:value={tags}
-              placeholder={$_("me.settings.tags_placeholder")}
+            <Label for="lastName">{$_("me.settings.last_name")}</Label>
+            <Input
+              id="lastName"
+              placeholder={$_("me.settings.last_name_placeholder")}
+              bind:value={lastName}
+              required
               class="bg-background/50 border-primary/20 focus:border-primary"
             />
           </div>
+        </div>
 
-          {#if isProfileError}
-            <div class="grid w-full items-start gap-4">
-              <Alert.Root variant="destructive">
-                <Alert.Title class="items-center flex">
-                  <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
-                  {$_("me.settings.error")}
-                </Alert.Title>
-                <Alert.Description>{profileError}</Alert.Description>
-              </Alert.Root>
-            </div>
+        <div class="space-y-2">
+          <Label for="artistName">{$_("me.settings.artist_name")}</Label>
+          <Input
+            id="artistName"
+            placeholder={$_("me.settings.artist_name_placeholder")}
+            bind:value={artistName}
+            required
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="description">{$_("me.settings.description")}</Label>
+          <Textarea
+            id="description"
+            bind:value={description}
+            placeholder={$_("me.settings.description_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+            rows={3}
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="tags">{$_("me.settings.tags")}</Label>
+          <TagsInput
+            id="tags"
+            bind:value={tags}
+            placeholder={$_("me.settings.tags_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        {#if isProfileError}
+          <div class="grid w-full items-start gap-4">
+            <Alert.Root variant="destructive">
+              <Alert.Title class="items-center flex">
+                <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
+                {$_("me.settings.error")}
+              </Alert.Title>
+              <Alert.Description>{profileError}</Alert.Description>
+            </Alert.Root>
+          </div>
+        {/if}
+
+        <Button
+          type="submit"
+          class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          disabled={isProfileLoading}
+        >
+          {#if isProfileLoading}
+            <div
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
+            ></div>
+            {$_("me.settings.updating_profile")}
+          {:else}
+            {$_("me.settings.update_profile")}
           {/if}
-
-          <Button
-            type="submit"
-            class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-            disabled={isProfileLoading}
-          >
-            {#if isProfileLoading}
-              <div
-                class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
-              ></div>
-              {$_("me.settings.updating_profile")}
-            {:else}
-              {$_("me.settings.update_profile")}
-            {/if}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
+        </Button>
+      </form>
+    </CardContent>
+  </Card>
 </div>
diff --git a/packages/frontend/src/routes/me/security/+page.svelte b/packages/frontend/src/routes/me/security/+page.svelte
index 662b760..96d3f45 100644
--- a/packages/frontend/src/routes/me/security/+page.svelte
+++ b/packages/frontend/src/routes/me/security/+page.svelte
@@ -63,101 +63,101 @@
   </div>
 
   <Card class="bg-card/50 border-primary/20 max-w-2xl">
-      <CardHeader>
-        <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
-        <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
-      </CardHeader>
-      <CardContent class="space-y-4">
-        <form onsubmit={handleSecuritySubmit} class="space-y-4">
-          <div class="space-y-2">
-            <Label for="email">{$_("me.settings.email")}</Label>
+    <CardHeader>
+      <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
+      <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <form onsubmit={handleSecuritySubmit} class="space-y-4">
+        <div class="space-y-2">
+          <Label for="email">{$_("me.settings.email")}</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder={$_("me.settings.email_placeholder")}
+            bind:value={email}
+            required
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="password">{$_("me.settings.password")}</Label>
+          <div class="relative">
             <Input
-              id="email"
-              type="email"
-              placeholder={$_("me.settings.email_placeholder")}
-              bind:value={email}
+              id="password"
+              type={showPassword ? "text" : "password"}
+              placeholder={$_("me.settings.password_placeholder")}
+              bind:value={password}
               required
-              class="bg-background/50 border-primary/20 focus:border-primary"
+              class="bg-background/50 border-primary/20 focus:border-primary pr-10"
             />
+            <button
+              type="button"
+              onclick={() => (showPassword = !showPassword)}
+              class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {#if showPassword}
+                <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
+              {:else}
+                <span class="icon-[ri--eye-line] w-4 h-4"></span>
+              {/if}
+            </button>
           </div>
+        </div>
 
-          <div class="space-y-2">
-            <Label for="password">{$_("me.settings.password")}</Label>
-            <div class="relative">
-              <Input
-                id="password"
-                type={showPassword ? "text" : "password"}
-                placeholder={$_("me.settings.password_placeholder")}
-                bind:value={password}
-                required
-                class="bg-background/50 border-primary/20 focus:border-primary pr-10"
-              />
-              <button
-                type="button"
-                onclick={() => (showPassword = !showPassword)}
-                class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              >
-                {#if showPassword}
-                  <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                {:else}
-                  <span class="icon-[ri--eye-line] w-4 h-4"></span>
-                {/if}
-              </button>
-            </div>
+        <div class="space-y-2">
+          <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
+          <div class="relative">
+            <Input
+              id="confirmPassword"
+              type={showConfirmPassword ? "text" : "password"}
+              placeholder={$_("me.settings.confirm_password_placeholder")}
+              bind:value={confirmPassword}
+              required
+              class="bg-background/50 border-primary/20 focus:border-primary pr-10"
+            />
+            <button
+              type="button"
+              onclick={() => (showConfirmPassword = !showConfirmPassword)}
+              class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {#if showConfirmPassword}
+                <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
+              {:else}
+                <span class="icon-[ri--eye-line] w-4 h-4"></span>
+              {/if}
+            </button>
           </div>
+        </div>
 
-          <div class="space-y-2">
-            <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
-            <div class="relative">
-              <Input
-                id="confirmPassword"
-                type={showConfirmPassword ? "text" : "password"}
-                placeholder={$_("me.settings.confirm_password_placeholder")}
-                bind:value={confirmPassword}
-                required
-                class="bg-background/50 border-primary/20 focus:border-primary pr-10"
-              />
-              <button
-                type="button"
-                onclick={() => (showConfirmPassword = !showConfirmPassword)}
-                class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              >
-                {#if showConfirmPassword}
-                  <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
-                {:else}
-                  <span class="icon-[ri--eye-line] w-4 h-4"></span>
-                {/if}
-              </button>
-            </div>
+        {#if isSecurityError}
+          <div class="grid w-full items-start gap-4">
+            <Alert.Root variant="destructive">
+              <Alert.Title class="items-center flex">
+                <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
+                {$_("me.settings.error")}
+              </Alert.Title>
+              <Alert.Description>{securityError}</Alert.Description>
+            </Alert.Root>
           </div>
+        {/if}
 
-          {#if isSecurityError}
-            <div class="grid w-full items-start gap-4">
-              <Alert.Root variant="destructive">
-                <Alert.Title class="items-center flex">
-                  <span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
-                  {$_("me.settings.error")}
-                </Alert.Title>
-                <Alert.Description>{securityError}</Alert.Description>
-              </Alert.Root>
-            </div>
+        <Button
+          type="submit"
+          class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          disabled={isSecurityLoading}
+        >
+          {#if isSecurityLoading}
+            <div
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
+            ></div>
+            {$_("me.settings.updating_security")}
+          {:else}
+            {$_("me.settings.update_security")}
           {/if}
-
-          <Button
-            type="submit"
-            class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-            disabled={isSecurityLoading}
-          >
-            {#if isSecurityLoading}
-              <div
-                class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
-              ></div>
-              {$_("me.settings.updating_security")}
-            {:else}
-              {$_("me.settings.update_security")}
-            {/if}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
+        </Button>
+      </form>
+    </CardContent>
+  </Card>
 </div>
diff --git a/packages/frontend/src/routes/play/+layout.svelte b/packages/frontend/src/routes/play/+layout.svelte
index 6abbb40..f8e2197 100644
--- a/packages/frontend/src/routes/play/+layout.svelte
+++ b/packages/frontend/src/routes/play/+layout.svelte
@@ -9,9 +9,24 @@
   const { children, data } = $props();
 
   const navLinks = $derived([
-    { name: $_("play.nav.play"), href: "/play/buttplug", icon: "icon-[ri--rocket-line]", exact: false },
-    { name: $_("play.nav.recordings"), href: "/play/recordings", icon: "icon-[ri--play-list-2-line]", exact: false },
-    { name: $_("play.nav.leaderboard"), href: "/play/leaderboard", icon: "icon-[ri--trophy-line]", exact: false },
+    {
+      name: $_("play.nav.play"),
+      href: "/play/buttplug",
+      icon: "icon-[ri--rocket-line]",
+      exact: false,
+    },
+    {
+      name: $_("play.nav.recordings"),
+      href: "/play/recordings",
+      icon: "icon-[ri--play-list-2-line]",
+      exact: false,
+    },
+    {
+      name: $_("play.nav.leaderboard"),
+      href: "/play/leaderboard",
+      icon: "icon-[ri--trophy-line]",
+      exact: false,
+    },
   ]);
 
   function isActive(link: { href: string; exact: boolean }) {