diff --git a/packages/frontend/src/lib/i18n/locales/en.ts b/packages/frontend/src/lib/i18n/locales/en.ts
index c6c6805..84725b0 100644
--- a/packages/frontend/src/lib/i18n/locales/en.ts
+++ b/packages/frontend/src/lib/i18n/locales/en.ts
@@ -91,6 +91,23 @@ export default {
   me: {
     title: "Dashboard",
     welcome: "Welcome back, {name}",
+    nav: {
+      profile: "Profile",
+      security: "Security",
+      recordings: "Recordings",
+      analytics: "Analytics",
+      back_to_site: "← Back to site",
+      back_mobile: "← Back",
+    },
+    analytics: {
+      title: "Analytics",
+      description: "Track your content performance and audience engagement",
+      total_videos: "Total Videos",
+      total_likes: "Total Likes",
+      total_plays: "Total Plays",
+      video_performance: "Video Performance",
+      video_performance_description: "Detailed metrics for each video",
+    },
     view_profile: "View Public Profile",
     settings: {
       title: "Settings",
diff --git a/packages/frontend/src/routes/me/+layout.server.ts b/packages/frontend/src/routes/me/+layout.server.ts
new file mode 100644
index 0000000..341546d
--- /dev/null
+++ b/packages/frontend/src/routes/me/+layout.server.ts
@@ -0,0 +1,12 @@
+import { redirect } from "@sveltejs/kit";
+import { isModel } from "$lib/api";
+
+export async function load({ locals }) {
+  if (!locals.authStatus.authenticated) {
+    throw redirect(302, "/login");
+  }
+  return {
+    authStatus: locals.authStatus,
+    isModel: isModel(locals.authStatus.user!),
+  };
+}
diff --git a/packages/frontend/src/routes/me/+layout.svelte b/packages/frontend/src/routes/me/+layout.svelte
new file mode 100644
index 0000000..89d2524
--- /dev/null
+++ b/packages/frontend/src/routes/me/+layout.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { _ } from "svelte-i18n";
+  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
+  import { getAssetUrl } from "$lib/api";
+
+  const { children, data } = $props();
+
+  const navLinks = $derived([
+    { name: $_("me.nav.profile"), href: "/me/profile", icon: "icon-[ri--user-line]" },
+    { name: $_("me.nav.security"), href: "/me/security", icon: "icon-[ri--shield-keyhole-line]" },
+    {
+      name: $_("me.nav.recordings"),
+      href: "/me/recordings",
+      icon: "icon-[ri--play-list-2-line]",
+    },
+    ...(data.isModel
+      ? [
+          {
+            name: $_("me.nav.analytics"),
+            href: "/me/analytics",
+            icon: "icon-[ri--line-chart-line]",
+          },
+        ]
+      : []),
+  ]);
+
+  function isActive(href: string) {
+    return page.url.pathname.startsWith(href);
+  }
+
+  const user = $derived(data.authStatus.user!);
+  const avatarUrl = $derived(
+    user.avatar ? (getAssetUrl(user.avatar, "thumbnail") ?? undefined) : undefined,
+  );
+  const displayName = $derived(user.artist_name ?? user.email);
+</script>
+
+<div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
+  <div class="container mx-auto px-4">
+    <!-- Mobile top nav -->
+    <div class="lg:hidden border-b border-border/40">
+      <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
+        <a
+          href="/"
+          class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
+        >
+          {$_("me.nav.back_mobile")}
+        </a>
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
+              isActive(link.href)
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            }`}
+          >
+            <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
+            <span class="hidden sm:inline">{link.name}</span>
+          </a>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Desktop layout -->
+    <div class="flex min-h-screen">
+      <!-- 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="text-xs text-muted-foreground hover:text-foreground transition-colors">
+            {$_("me.nav.back_to_site")}
+          </a>
+          <div class="mt-3 flex items-center gap-3">
+            <Avatar class="h-9 w-9 shrink-0">
+              <AvatarImage src={avatarUrl} alt={displayName} />
+              <AvatarFallback class="text-xs">
+                {getUserInitials(displayName)}
+              </AvatarFallback>
+            </Avatar>
+            <div class="min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{displayName}</p>
+              <p class="text-xs text-muted-foreground">{$_("me.title")}</p>
+            </div>
+          </div>
+        </div>
+
+        <nav class="flex-1 p-3 space-y-1">
+          {#each navLinks as link (link.href)}
+            <a
+              href={link.href}
+              class={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                isActive(link.href)
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+              }`}
+            >
+              <span class={`${link.icon} h-4 w-4`}></span>
+              {link.name}
+            </a>
+          {/each}
+        </nav>
+      </aside>
+
+      <!-- Main content -->
+      <main class="flex-1 min-w-0">
+        {@render children()}
+      </main>
+    </div>
+  </div>
+</div>
diff --git a/packages/frontend/src/routes/me/+page.server.ts b/packages/frontend/src/routes/me/+page.server.ts
index 04741dc..17cef2d 100644
--- a/packages/frontend/src/routes/me/+page.server.ts
+++ b/packages/frontend/src/routes/me/+page.server.ts
@@ -1,25 +1,4 @@
 import { redirect } from "@sveltejs/kit";
-import { getAnalytics, getFolders, getRecordings } from "$lib/services";
-import { isModel } from "$lib/api";
-
-export async function load({ locals, fetch }) {
-  // Redirect to login if not authenticated
-  if (!locals.authStatus.authenticated) {
-    throw redirect(302, "/login");
-  }
-
-  const recordings = await getRecordings(fetch).catch(() => []);
-
-  const analytics = isModel(locals.authStatus.user!)
-    ? await getAnalytics(fetch).catch(() => null)
-    : null;
-
-  const folders = await getFolders(fetch).catch(() => []);
-
-  return {
-    authStatus: locals.authStatus,
-    folders,
-    recordings,
-    analytics,
-  };
+export function load() {
+  throw redirect(302, "/me/profile");
 }
diff --git a/packages/frontend/src/routes/me/+page.svelte b/packages/frontend/src/routes/me/+page.svelte
index fd1c8f9..e69de29 100644
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/packages/frontend/src/routes/me/+page.svelte
@@ -1,690 +0,0 @@
-<script lang="ts">
-  import { _ } from "svelte-i18n";
-  import { Button } from "$lib/components/ui/button";
-  import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-  } from "$lib/components/ui/card";
-  import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-  import { Input } from "$lib/components/ui/input";
-  import { Label } from "$lib/components/ui/label";
-  import SexyBackground from "$lib/components/background/background.svelte";
-  import { onMount, untrack } from "svelte";
-  import { goto, invalidateAll } from "$app/navigation";
-  import { getAssetUrl, isModel } from "$lib/api";
-  import * as Alert from "$lib/components/ui/alert";
-  import { toast } from "svelte-sonner";
-  import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/services";
-  import * as Dialog from "$lib/components/ui/dialog";
-  import { Textarea } from "$lib/components/ui/textarea";
-  import Meta from "$lib/components/meta/meta.svelte";
-  import { TagsInput } from "$lib/components/ui/tags-input";
-  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
-  import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
-
-  const { data } = $props();
-
-  let recordings = $state(untrack(() => data.recordings));
-  let deleteTarget = $state<string | null>(null);
-  let deleteOpen = $state(false);
-  let deleting = $state(false);
-
-  let activeTab = $state("settings");
-
-  let firstName = $state(untrack(() => data.authStatus.user!.first_name));
-  let lastName = $state(untrack(() => data.authStatus.user!.last_name));
-  let artistName = $state(untrack(() => data.authStatus.user!.artist_name));
-  let description = $state(untrack(() => data.authStatus.user!.description));
-  let tags = $state(untrack(() => data.authStatus.user!.tags ?? undefined));
-  $effect(() => {
-    recordings = data.recordings;
-    firstName = data.authStatus.user!.first_name;
-    lastName = data.authStatus.user!.last_name;
-    artistName = data.authStatus.user!.artist_name;
-    description = data.authStatus.user!.description;
-    tags = data.authStatus.user!.tags ?? undefined;
-    email = data.authStatus.user!.email;
-  });
-
-  let email = $state(untrack(() => data.authStatus.user!.email));
-  let password = $state("");
-  let confirmPassword = $state("");
-
-  let showPassword = $state(false);
-  let showConfirmPassword = $state(false);
-
-  let isProfileLoading = $state(false);
-  let isProfileError = $state(false);
-  let profileError = $state("");
-
-  let isSecurityLoading = $state(false);
-  let isSecurityError = $state(false);
-  let securityError = $state("");
-
-  async function handleProfileSubmit(e: Event) {
-    e.preventDefault();
-    try {
-      isProfileLoading = true;
-      isProfileError = false;
-      profileError = "";
-
-      let avatarId: string | null | undefined = undefined;
-
-      if (!avatar?.id && data.authStatus.user!.avatar) {
-        // User removed their avatar
-        await removeFile(data.authStatus.user!.avatar);
-        avatarId = null;
-      } else if (avatar?.id) {
-        // Keep existing avatar
-        avatarId = avatar.id;
-      }
-
-      if (avatar?.file) {
-        const formData = new FormData();
-        formData.append("file", avatar.file);
-        const result = await uploadFile(formData);
-        avatarId = result.id;
-      }
-
-      await updateProfile({
-        first_name: firstName,
-        last_name: lastName,
-        artist_name: artistName,
-        description,
-        tags,
-        avatar: avatarId ?? undefined,
-      });
-      toast.success($_("me.settings.toast_update"));
-      invalidateAll();
-    } catch (err) {
-      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
-      profileError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
-      isProfileError = true;
-    } finally {
-      isProfileLoading = false;
-    }
-  }
-
-  async function handleSecuritySubmit(e: Event) {
-    e.preventDefault();
-    try {
-      if (password !== confirmPassword) {
-        throw new Error($_("me.settings.password_error"));
-      }
-      isSecurityLoading = true;
-      isSecurityError = false;
-      securityError = "";
-      await updateProfile({
-        email,
-        password,
-      });
-      toast.success($_("me.settings.toast_update"));
-      invalidateAll();
-      password = confirmPassword = "";
-    } catch (err) {
-      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
-      securityError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
-      isSecurityError = true;
-    } finally {
-      isSecurityLoading = false;
-    }
-  }
-
-  let avatar = $state<{
-    id?: string;
-    url: string;
-    name: string;
-    size: number;
-    file?: File;
-  }>();
-
-  async function handleFilesUpload(files: File[]) {
-    const file = files[0];
-    avatar = {
-      name: file.name,
-      size: file.size,
-      url: URL.createObjectURL(file),
-      file,
-    };
-  }
-
-  async function handleAvatarRemove() {
-    if (avatar!.id) {
-      avatar = undefined;
-    } else {
-      setExistingAvatar();
-    }
-  }
-
-  function setExistingAvatar() {
-    if (data.authStatus.user!.avatar) {
-      avatar = {
-        id: data.authStatus.user!.avatar,
-        url: getAssetUrl(data.authStatus.user!.avatar, "thumbnail")!,
-        name: data.authStatus.user!.artist_name ?? "",
-        size: 0,
-      };
-    } else {
-      avatar = undefined;
-    }
-  }
-
-  function handleDeleteRecording(id: string) {
-    deleteTarget = id;
-    deleteOpen = true;
-  }
-
-  async function confirmDeleteRecording() {
-    if (!deleteTarget) return;
-    deleting = true;
-    try {
-      await deleteRecording(deleteTarget);
-      recordings = recordings.filter((r) => r.id !== deleteTarget);
-      toast.success($_("me.recordings.delete_success"));
-      deleteOpen = false;
-      deleteTarget = null;
-    } catch {
-      toast.error($_("me.recordings.delete_error"));
-    } finally {
-      deleting = false;
-    }
-  }
-
-  function handlePlayRecording(id: string) {
-    // Navigate to play page with recording ID
-    goto(`/play?recording=${id}`);
-  }
-
-  onMount(() => {
-    if (data.authStatus.authenticated) {
-      setExistingAvatar();
-      return;
-    }
-    goto("/login");
-  });
-</script>
-
-<Meta
-  title={$_("me.title")}
-  description={$_("me.welcome", {
-    values: { name: data.authStatus.user!.artist_name },
-  })}
-/>
-
-<div
-  class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
->
-  <SexyBackground />
-  <div class="container mx-auto px-4 py-8">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-6">
-      <div>
-        <h1 class="text-2xl font-bold">{$_("me.title")}</h1>
-        <p class="text-sm text-muted-foreground mt-0.5">
-          {$_("me.welcome", { values: { name: data.authStatus.user!.artist_name } })}
-        </p>
-      </div>
-      {#if isModel(data.authStatus.user!)}
-        <Button href={`/models/${data.authStatus.user!.slug}`} variant="outline">
-          {$_("me.view_profile")}
-        </Button>
-      {/if}
-    </div>
-
-    <!-- Dashboard Tabs -->
-    <Tabs bind:value={activeTab} class="w-full">
-      <TabsList class="grid w-full {data.analytics ? 'grid-cols-3' : 'grid-cols-2'} max-w-2xl mb-8">
-        <TabsTrigger value="settings" class="flex items-center gap-2">
-          <span class="icon-[ri--settings-4-line] w-4 h-4"></span>
-          {$_("me.settings.title")}
-        </TabsTrigger>
-        <TabsTrigger value="recordings" class="flex items-center gap-2">
-          <span class="icon-[ri--play-list-2-line] w-4 h-4"></span>
-          {$_("me.recordings.title")}
-        </TabsTrigger>
-        {#if data.analytics}
-          <TabsTrigger value="analytics" class="flex items-center gap-2">
-            <span class="icon-[ri--line-chart-line] w-4 h-4"></span>
-            Analytics
-          </TabsTrigger>
-        {/if}
-      </TabsList>
-
-      <!-- Settings Tab -->
-      <TabsContent value="settings" class="space-y-6">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <!-- Profile Settings -->
-          <Card class="bg-card/50 border-primary/20">
-            <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>
-                      {#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>
-                <!-- Name Fields -->
-                <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="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>
-              </form>
-            </CardContent>
-          </Card>
-
-          <!-- Privacy Settings -->
-          <Card class="bg-card/50 border-primary/20">
-            <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">
-                <!-- Email -->
-                <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>
-
-                <!-- Password -->
-                <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>
-
-                <!-- Confirm Password -->
-                <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>
-                {#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}
-                <Button
-                  variant="outline"
-                  type="submit"
-                  class="cursor-pointer w-full border-primary/20 hover:bg-primary/10"
-                  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>
-        </div>
-      </TabsContent>
-
-      <!-- Recordings Tab -->
-      <TabsContent value="recordings" class="space-y-6">
-        <div class="mb-6 flex justify-between items-center">
-          <div>
-            <h2 class="text-2xl font-bold text-card-foreground">
-              {$_("me.recordings.title")}
-            </h2>
-            <p class="text-muted-foreground">
-              {$_("me.recordings.description")}
-            </p>
-          </div>
-          <Button
-            href="/play"
-            class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-          >
-            <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
-            {$_("me.recordings.go_to_play")}
-          </Button>
-        </div>
-
-        {#if recordings.length === 0}
-          <Card class="bg-card/50 border-primary/20">
-            <CardContent class="py-12">
-              <div class="flex flex-col items-center justify-center text-center">
-                <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
-                  <span class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"></span>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">
-                  {$_("me.recordings.no_recordings")}
-                </h3>
-                <p class="text-muted-foreground mb-6 max-w-md">
-                  {$_("me.recordings.no_recordings_description")}
-                </p>
-                <Button
-                  href="/play"
-                  class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                >
-                  <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
-                  {$_("me.recordings.go_to_play")}
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        {:else}
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {#each recordings as recording (recording.id)}
-              <RecordingCard
-                {recording}
-                onPlay={handlePlayRecording}
-                onDelete={handleDeleteRecording}
-              />
-            {/each}
-          </div>
-        {/if}
-      </TabsContent>
-
-      <!-- Analytics Tab -->
-      {#if data.analytics}
-        <TabsContent value="analytics" class="space-y-6">
-          <div class="mb-6">
-            <h2 class="text-2xl font-bold text-card-foreground">Analytics Dashboard</h2>
-            <p class="text-muted-foreground">
-              Track your content performance and audience engagement
-            </p>
-          </div>
-
-          <!-- Overview Stats -->
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--video-line] w-5 h-5 text-primary"></span>
-                  Total Videos
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_videos}</p>
-              </CardContent>
-            </Card>
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--heart-fill] w-5 h-5 text-primary"></span>
-                  Total Likes
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_likes.toLocaleString()}</p>
-              </CardContent>
-            </Card>
-            <Card class="bg-card/50 border-primary/20">
-              <CardHeader>
-                <CardTitle class="flex items-center gap-2">
-                  <span class="icon-[ri--play-fill] w-5 h-5 text-primary"></span>
-                  Total Plays
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <!-- Video Performance Table -->
-          <Card class="bg-card/50 border-primary/20">
-            <CardHeader>
-              <CardTitle>Video Performance</CardTitle>
-              <CardDescription>Detailed metrics for each video</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div class="overflow-x-auto">
-                <table class="w-full">
-                  <thead>
-                    <tr class="border-b border-border">
-                      <th class="text-left p-3">Title</th>
-                      <th class="text-right p-3">Likes</th>
-                      <th class="text-right p-3">Plays</th>
-                      <th class="text-right p-3">Completion Rate</th>
-                      <th class="text-right p-3">Avg Watch Time</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {#each data.analytics.videos as video (video.slug)}
-                      <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
-                        <td class="p-3">
-                          <a
-                            href="/videos/{video.slug}"
-                            class="hover:text-primary transition-colors"
-                          >
-                            {video.title}
-                          </a>
-                        </td>
-                        <td class="text-right p-3 font-medium">
-                          {video.likes}
-                        </td>
-                        <td class="text-right p-3 font-medium">
-                          {video.plays}
-                        </td>
-                        <td class="text-right p-3">
-                          <span
-                            class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
-                            70
-                              ? 'bg-green-500/20 text-green-500'
-                              : video.completion_rate >= 40
-                                ? 'bg-yellow-500/20 text-yellow-500'
-                                : 'bg-red-500/20 text-red-500'}"
-                          >
-                            {video.completion_rate.toFixed(1)}%
-                          </span>
-                        </td>
-                        <td class="text-right p-3 text-muted-foreground">
-                          {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
-                            .toString()
-                            .padStart(2, "0")}
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      {/if}
-    </Tabs>
-  </div>
-</div>
-
-<Dialog.Root bind:open={deleteOpen}>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>{$_("me.recordings.delete_confirm")}</Dialog.Title>
-      <Dialog.Description>This cannot be undone.</Dialog.Description>
-    </Dialog.Header>
-    <Dialog.Footer>
-      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
-      <Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
-        {deleting ? "Deleting…" : "Delete"}
-      </Button>
-    </Dialog.Footer>
-  </Dialog.Content>
-</Dialog.Root>
diff --git a/packages/frontend/src/routes/me/analytics/+page.server.ts b/packages/frontend/src/routes/me/analytics/+page.server.ts
new file mode 100644
index 0000000..4d6019f
--- /dev/null
+++ b/packages/frontend/src/routes/me/analytics/+page.server.ts
@@ -0,0 +1,12 @@
+import { redirect } from "@sveltejs/kit";
+import { isModel } from "$lib/api";
+import { getAnalytics } from "$lib/services";
+
+export async function load({ locals, fetch }) {
+  if (!isModel(locals.authStatus.user!)) {
+    throw redirect(302, "/me/profile");
+  }
+  return {
+    analytics: await getAnalytics(fetch).catch(() => null),
+  };
+}
diff --git a/packages/frontend/src/routes/me/analytics/+page.svelte b/packages/frontend/src/routes/me/analytics/+page.svelte
new file mode 100644
index 0000000..2a6967e
--- /dev/null
+++ b/packages/frontend/src/routes/me/analytics/+page.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+</script>
+
+<Meta title={$_("me.analytics.title")} />
+
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+    <div>
+      <h1 class="text-2xl font-bold">{$_("me.analytics.title")}</h1>
+      <p class="text-sm text-muted-foreground mt-0.5">{$_("me.analytics.description")}</p>
+    </div>
+  </div>
+
+  <div class="px-3 sm:px-0 space-y-6">
+    {#if data.analytics}
+      <!-- Overview Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--video-line] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_videos")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_videos}</p>
+          </CardContent>
+        </Card>
+
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--heart-fill] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_likes")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_likes.toLocaleString()}</p>
+          </CardContent>
+        </Card>
+
+        <Card class="bg-card/50 border-primary/20">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <span class="icon-[ri--play-fill] w-5 h-5 text-primary"></span>
+              {$_("me.analytics.total_plays")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Video Performance Table -->
+      <Card class="bg-card/50 border-primary/20">
+        <CardHeader>
+          <CardTitle>{$_("me.analytics.video_performance")}</CardTitle>
+          <CardDescription>{$_("me.analytics.video_performance_description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead>
+                <tr class="border-b border-border">
+                  <th class="text-left p-3">Title</th>
+                  <th class="text-right p-3">Likes</th>
+                  <th class="text-right p-3">Plays</th>
+                  <th class="text-right p-3">Completion Rate</th>
+                  <th class="text-right p-3">Avg Watch Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each data.analytics.videos as video (video.slug)}
+                  <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
+                    <td class="p-3">
+                      <a href="/videos/{video.slug}" class="hover:text-primary transition-colors">
+                        {video.title}
+                      </a>
+                    </td>
+                    <td class="text-right p-3 font-medium">
+                      {video.likes}
+                    </td>
+                    <td class="text-right p-3 font-medium">
+                      {video.plays}
+                    </td>
+                    <td class="text-right p-3">
+                      <span
+                        class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
+                        70
+                          ? 'bg-green-500/20 text-green-500'
+                          : video.completion_rate >= 40
+                            ? 'bg-yellow-500/20 text-yellow-500'
+                            : 'bg-red-500/20 text-red-500'}"
+                      >
+                        {video.completion_rate.toFixed(1)}%
+                      </span>
+                    </td>
+                    <td class="text-right p-3 text-muted-foreground">
+                      {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
+                        .toString()
+                        .padStart(2, "0")}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    {:else}
+      <Card class="bg-card/50 border-primary/20">
+        <CardContent class="py-12">
+          <div class="flex flex-col items-center justify-center text-center">
+            <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
+              <span class="icon-[ri--line-chart-line] w-12 h-12 text-muted-foreground"></span>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">No analytics available</h3>
+            <p class="text-muted-foreground max-w-md">
+              Analytics data will appear here once your content starts getting views.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    {/if}
+  </div>
+</div>
diff --git a/packages/frontend/src/routes/me/profile/+page.svelte b/packages/frontend/src/routes/me/profile/+page.svelte
new file mode 100644
index 0000000..2162669
--- /dev/null
+++ b/packages/frontend/src/routes/me/profile/+page.svelte
@@ -0,0 +1,291 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { invalidateAll } from "$app/navigation";
+  import { untrack } from "svelte";
+  import { getAssetUrl, isModel } from "$lib/api";
+  import { toast } from "svelte-sonner";
+  import { updateProfile, uploadFile, removeFile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Textarea } from "$lib/components/ui/textarea";
+  import { TagsInput } from "$lib/components/ui/tags-input";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import * as Alert from "$lib/components/ui/alert";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let firstName = $state(untrack(() => data.authStatus.user!.first_name));
+  let lastName = $state(untrack(() => data.authStatus.user!.last_name));
+  let artistName = $state(untrack(() => data.authStatus.user!.artist_name));
+  let description = $state(untrack(() => data.authStatus.user!.description));
+  let tags = $state(untrack(() => data.authStatus.user!.tags ?? undefined));
+
+  $effect(() => {
+    firstName = data.authStatus.user!.first_name;
+    lastName = data.authStatus.user!.last_name;
+    artistName = data.authStatus.user!.artist_name;
+    description = data.authStatus.user!.description;
+    tags = data.authStatus.user!.tags ?? undefined;
+  });
+
+  let isProfileLoading = $state(false);
+  let isProfileError = $state(false);
+  let profileError = $state("");
+
+  let avatar = $state<{
+    id?: string;
+    url: string;
+    name: string;
+    size: number;
+    file?: File;
+  }>();
+
+  function setExistingAvatar() {
+    if (data.authStatus.user!.avatar) {
+      avatar = {
+        id: data.authStatus.user!.avatar,
+        url: getAssetUrl(data.authStatus.user!.avatar, "thumbnail")!,
+        name: data.authStatus.user!.artist_name ?? "",
+        size: 0,
+      };
+    } else {
+      avatar = undefined;
+    }
+  }
+
+  $effect(() => {
+    setExistingAvatar();
+  });
+
+  async function handleFilesUpload(files: File[]) {
+    const file = files[0];
+    avatar = {
+      name: file.name,
+      size: file.size,
+      url: URL.createObjectURL(file),
+      file,
+    };
+  }
+
+  async function handleAvatarRemove() {
+    if (avatar!.id) {
+      avatar = undefined;
+    } else {
+      setExistingAvatar();
+    }
+  }
+
+  async function handleProfileSubmit(e: Event) {
+    e.preventDefault();
+    try {
+      isProfileLoading = true;
+      isProfileError = false;
+      profileError = "";
+
+      let avatarId: string | null | undefined = undefined;
+
+      if (!avatar?.id && data.authStatus.user!.avatar) {
+        await removeFile(data.authStatus.user!.avatar);
+        avatarId = null;
+      } else if (avatar?.id) {
+        avatarId = avatar.id;
+      }
+
+      if (avatar?.file) {
+        const formData = new FormData();
+        formData.append("file", avatar.file);
+        const result = await uploadFile(formData);
+        avatarId = result.id;
+      }
+
+      await updateProfile({
+        first_name: firstName,
+        last_name: lastName,
+        artist_name: artistName,
+        description,
+        tags,
+        avatar: avatarId ?? undefined,
+      });
+      toast.success($_("me.settings.toast_update"));
+      invalidateAll();
+    } catch (err) {
+      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
+      profileError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
+      isProfileError = true;
+    } finally {
+      isProfileLoading = false;
+    }
+  }
+</script>
+
+<Meta title={$_("me.settings.profile_title")} />
+
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+    <h1 class="text-2xl font-bold">{$_("me.settings.profile_title")}</h1>
+    {#if isModel(data.authStatus.user!)}
+      <Button href={`/models/${data.authStatus.user!.slug}`} variant="outline">
+        {$_("me.view_profile")}
+      </Button>
+    {/if}
+  </div>
+
+  <div class="px-3 sm:px-0">
+    <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>
+                {#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="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>
+        </form>
+      </CardContent>
+    </Card>
+  </div>
+</div>
diff --git a/packages/frontend/src/routes/me/recordings/+page.server.ts b/packages/frontend/src/routes/me/recordings/+page.server.ts
new file mode 100644
index 0000000..c87da3e
--- /dev/null
+++ b/packages/frontend/src/routes/me/recordings/+page.server.ts
@@ -0,0 +1,7 @@
+import { getRecordings } from "$lib/services";
+
+export async function load({ fetch }) {
+  return {
+    recordings: await getRecordings(fetch).catch(() => []),
+  };
+}
diff --git a/packages/frontend/src/routes/me/recordings/+page.svelte b/packages/frontend/src/routes/me/recordings/+page.svelte
new file mode 100644
index 0000000..30da96c
--- /dev/null
+++ b/packages/frontend/src/routes/me/recordings/+page.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { _ } from "svelte-i18n";
+  import { goto } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { deleteRecording } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let recordings = $state(untrack(() => data.recordings));
+  let deleteTarget = $state<string | null>(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+
+  function handleDeleteRecording(id: string) {
+    deleteTarget = id;
+    deleteOpen = true;
+  }
+
+  async function confirmDeleteRecording() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteRecording(deleteTarget);
+      recordings = recordings.filter((r) => r.id !== deleteTarget);
+      toast.success($_("me.recordings.delete_success"));
+      deleteOpen = false;
+      deleteTarget = null;
+    } catch {
+      toast.error($_("me.recordings.delete_error"));
+    } finally {
+      deleting = false;
+    }
+  }
+
+  function handlePlayRecording(id: string) {
+    goto(`/play?recording=${id}`);
+  }
+</script>
+
+<Meta title={$_("me.recordings.title")} />
+
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+    <h1 class="text-2xl font-bold">{$_("me.recordings.title")}</h1>
+    <Button
+      href="/play"
+      class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+    >
+      <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
+      {$_("me.recordings.go_to_play")}
+    </Button>
+  </div>
+
+  <div class="px-3 sm:px-0">
+    {#if recordings.length === 0}
+      <Card class="bg-card/50 border-primary/20">
+        <CardContent class="py-12">
+          <div class="flex flex-col items-center justify-center text-center">
+            <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
+              <span class="icon-[ri--play-list-2-line] w-12 h-12 text-muted-foreground"></span>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">
+              {$_("me.recordings.no_recordings")}
+            </h3>
+            <p class="text-muted-foreground mb-6 max-w-md">
+              {$_("me.recordings.no_recordings_description")}
+            </p>
+            <Button
+              href="/play"
+              class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+            >
+              <span class="icon-[ri--rocket-line] w-4 h-4 mr-2"></span>
+              {$_("me.recordings.go_to_play")}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    {:else}
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {#each recordings as recording (recording.id)}
+          <RecordingCard
+            {recording}
+            onPlay={handlePlayRecording}
+            onDelete={handleDeleteRecording}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$_("me.recordings.delete_confirm")}</Dialog.Title>
+      <Dialog.Description>This cannot be undone.</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>
+        {$_("common.cancel")}
+      </Button>
+      <Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
+        {deleting ? "Deleting…" : $_("common.delete")}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/packages/frontend/src/routes/me/security/+page.svelte b/packages/frontend/src/routes/me/security/+page.svelte
new file mode 100644
index 0000000..0971bdf
--- /dev/null
+++ b/packages/frontend/src/routes/me/security/+page.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { invalidateAll } from "$app/navigation";
+  import { untrack } from "svelte";
+  import { toast } from "svelte-sonner";
+  import { updateProfile } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import * as Alert from "$lib/components/ui/alert";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
+
+  const { data } = $props();
+
+  let email = $state(untrack(() => data.authStatus.user!.email));
+  let password = $state("");
+  let confirmPassword = $state("");
+  let showPassword = $state(false);
+  let showConfirmPassword = $state(false);
+
+  let isSecurityLoading = $state(false);
+  let isSecurityError = $state(false);
+  let securityError = $state("");
+
+  async function handleSecuritySubmit(e: Event) {
+    e.preventDefault();
+    try {
+      if (password !== confirmPassword) {
+        throw new Error($_("me.settings.password_error"));
+      }
+      isSecurityLoading = true;
+      isSecurityError = false;
+      securityError = "";
+      await updateProfile({
+        email,
+        password,
+      });
+      toast.success($_("me.settings.toast_update"));
+      invalidateAll();
+      password = confirmPassword = "";
+    } catch (err) {
+      const e = err as { response?: { errors?: Array<{ message: string }> }; message?: string };
+      securityError = e.response?.errors?.[0]?.message ?? e.message ?? "Unknown error";
+      isSecurityError = true;
+    } finally {
+      isSecurityLoading = false;
+    }
+  }
+</script>
+
+<Meta title={$_("me.settings.privacy_title")} />
+
+<div class="py-3 sm:py-6 sm:pl-6">
+  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+    <h1 class="text-2xl font-bold">{$_("me.settings.privacy_title")}</h1>
+  </div>
+
+  <div class="px-3 sm:px-0">
+    <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>
+            <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="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>
+
+          <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>
+
+          {#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}
+
+          <Button
+            variant="outline"
+            type="submit"
+            class="cursor-pointer w-full border-primary/20 hover:bg-primary/10"
+            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>
+  </div>
+</div>