fix: serialize UserRole as lowercase in JWT

Add #[serde(rename_all = "lowercase")] to UserRole enum so JWT payloads
contain lowercase role strings ("guest", "host", "admin") matching what
the frontend route guards and getRole() comparisons expect.

Without this, JWTs contained PascalCase ("Guest", "Host", "Admin")
causing hosts and admins to be redirected to /join instead of their
dashboards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/auth/handlers.rs

@@ -1,7 +1,9 @@
+use std::time::Duration;
+
 use axum::extract::State;
-use axum::http::StatusCode;
+use axum::http::{HeaderMap, StatusCode};
 use axum::Json;
-use chrono::{Duration, Utc};
+use chrono::Utc;
 use rand::Rng;
 use serde::{Deserialize, Serialize};
 use uuid::Uuid;
@@ -12,6 +14,7 @@ use crate::error::AppError;
 use crate::models::event::Event;
 use crate::models::session::Session;
 use crate::models::user::{User, UserRole};
+use crate::services::rate_limiter::client_ip;
 use crate::state::AppState;
 
 #[derive(Deserialize)]
@@ -29,8 +32,16 @@ pub struct JoinResponse {
 
 pub async fn join(
     State(state): State<AppState>,
+    headers: HeaderMap,
     Json(body): Json<JoinRequest>,
 ) -> Result<(StatusCode, Json<JoinResponse>), AppError> {
+    let ip = client_ip(&headers, "unknown");
+    if !state.rate_limiter.check(format!("join:{ip}"), 5, Duration::from_secs(60)) {
+        return Err(AppError::TooManyRequests(
+            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
+        ));
+    }
+
     let display_name = body.display_name.trim();
     if display_name.is_empty() || display_name.len() > 50 {
         return Err(AppError::BadRequest(
@@ -62,7 +73,7 @@ pub async fn join(
     .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
     let token_hash = jwt::hash_token(&token);
-    let expires_at = Utc::now() + Duration::days(state.config.session_expiry_days);
+    let expires_at = Utc::now() + chrono::Duration::days(state.config.session_expiry_days);
     Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
 
     Ok((
@@ -134,7 +145,7 @@ pub async fn recover(
             .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
             let token_hash = jwt::hash_token(&token);
-            let expires_at = Utc::now() + Duration::days(state.config.session_expiry_days);
+            let expires_at = Utc::now() + chrono::Duration::days(state.config.session_expiry_days);
             Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
 
             return Ok(Json(RecoverResponse {
@@ -146,7 +157,7 @@ pub async fn recover(
         // Wrong PIN — increment failure count
         let attempts = User::increment_failed_pin(&state.pool, user.id).await?;
         if attempts >= 3 {
-            let lockout = Utc::now() + Duration::minutes(15);
+            let lockout = Utc::now() + chrono::Duration::minutes(15);
             User::lock_pin(&state.pool, user.id, lockout).await?;
         }
     }
@@ -217,7 +228,7 @@ pub async fn admin_login(
     .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
     let token_hash = jwt::hash_token(&token);
-    let expires_at = Utc::now() + Duration::days(1);
+    let expires_at = Utc::now() + chrono::Duration::days(1);
     Session::create(&state.pool, admin_user.id, &token_hash, expires_at).await?;
 
     Ok(Json(AdminLoginResponse { jwt: token }))

backend/src/handlers/admin.rs

@@ -1,12 +1,15 @@
+use std::collections::HashMap;
+use std::time::Duration;
+
 use axum::extract::State;
-use axum::http::StatusCode;
+use axum::http::{HeaderMap, StatusCode};
 use axum::Json;
 use serde::{Deserialize, Serialize};
-use std::collections::HashMap;
 use sysinfo::System;
 
 use crate::auth::middleware::RequireAdmin;
 use crate::error::AppError;
+use crate::services::rate_limiter::client_ip;
 use crate::state::AppState;
 
 // ── DTOs ─────────────────────────────────────────────────────────────────────
@@ -172,7 +175,16 @@ pub async fn get_export_jobs(
 pub async fn download_zip(
     State(state): State<AppState>,
     _auth: crate::auth::middleware::AuthUser,
+    headers: HeaderMap,
 ) -> Result<axum::response::Response, AppError> {
+    let ip = client_ip(&headers, "unknown");
+    let limit = get_config_usize(&state.pool, "export_rate_per_day", 3).await;
+    if !state.rate_limiter.check(format!("export:{ip}"), limit, Duration::from_secs(86400)) {
+        return Err(AppError::TooManyRequests(
+            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
+        ));
+    }
+
     let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
         .await?
         .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
@@ -194,7 +206,16 @@ pub async fn download_zip(
 pub async fn download_html(
     State(state): State<AppState>,
     _auth: crate::auth::middleware::AuthUser,
+    headers: HeaderMap,
 ) -> Result<axum::response::Response, AppError> {
+    let ip = client_ip(&headers, "unknown");
+    let limit = get_config_usize(&state.pool, "export_rate_per_day", 3).await;
+    if !state.rate_limiter.check(format!("export:{ip}"), limit, Duration::from_secs(86400)) {
+        return Err(AppError::TooManyRequests(
+            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
+        ));
+    }
+
     let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
         .await?
         .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
@@ -277,3 +298,13 @@ pub async fn export_status(
         "html": job_status("html"),
     })))
 }
+
+async fn get_config_usize(pool: &sqlx::PgPool, key: &str, default: usize) -> usize {
+    let row: Option<(String,)> =
+        sqlx::query_as("SELECT value FROM config WHERE key = $1")
+            .bind(key)
+            .fetch_optional(pool)
+            .await
+            .unwrap_or(None);
+    row.and_then(|r| r.0.parse().ok()).unwrap_or(default)
+}

backend/src/handlers/feed.rs

@@ -1,4 +1,7 @@
+use std::time::Duration;
+
 use axum::extract::{Query, State};
+use axum::http::HeaderMap;
 use axum::Json;
 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
@@ -6,6 +9,7 @@ use uuid::Uuid;
 
 use crate::auth::middleware::AuthUser;
 use crate::error::AppError;
+use crate::services::rate_limiter::client_ip;
 use crate::state::AppState;
 
 #[derive(Deserialize)]
@@ -53,8 +57,17 @@ struct FeedRow {
 pub async fn feed(
     State(state): State<AppState>,
     auth: AuthUser,
+    headers: HeaderMap,
     Query(q): Query<FeedQuery>,
 ) -> Result<Json<FeedResponse>, AppError> {
+    let ip = client_ip(&headers, "unknown");
+    let rate_limit = get_config_usize(&state.pool, "feed_rate_per_min", 60).await;
+    if !state.rate_limiter.check(format!("feed:{ip}"), rate_limit, Duration::from_secs(60)) {
+        return Err(AppError::TooManyRequests(
+            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
+        ));
+    }
+
     let limit = q.limit.unwrap_or(20).min(100);
 
     let rows = if let Some(hashtag) = &q.hashtag {
@@ -227,6 +240,16 @@ pub async fn hashtags(
     ))
 }
 
+async fn get_config_usize(pool: &sqlx::PgPool, key: &str, default: usize) -> usize {
+    let row: Option<(String,)> =
+        sqlx::query_as("SELECT value FROM config WHERE key = $1")
+            .bind(key)
+            .fetch_optional(pool)
+            .await
+            .unwrap_or(None);
+    row.and_then(|r| r.0.parse().ok()).unwrap_or(default)
+}
+
 async fn get_cursor_time(pool: &sqlx::PgPool, cursor_id: Uuid) -> Option<DateTime<Utc>> {
     let row: Option<(DateTime<Utc>,)> =
         sqlx::query_as("SELECT created_at FROM upload WHERE id = $1")

backend/src/handlers/upload.rs

@@ -1,3 +1,5 @@
+use std::time::Duration;
+
 use axum::extract::{Multipart, Path, State};
 use axum::http::StatusCode;
 use axum::Json;
@@ -16,6 +18,17 @@ pub async fn upload(
     auth: AuthUser,
     mut multipart: Multipart,
 ) -> Result<(StatusCode, Json<UploadDto>), AppError> {
+    // Rate limit: N uploads per hour per user
+    let upload_rate = get_config_i64(&state.pool, "upload_rate_per_hour", 10).await as usize;
+    if !state
+        .rate_limiter
+        .check(format!("upload:{}", auth.user_id), upload_rate, Duration::from_secs(3600))
+    {
+        return Err(AppError::TooManyRequests(
+            "Du hast dein Upload-Limit für diese Stunde erreicht.".into(),
+        ));
+    }
+
     // Check if user is banned
     let user = User::find_by_id(&state.pool, auth.user_id)
         .await?

backend/src/models/user.rs

@@ -4,6 +4,7 @@ use sqlx::PgPool;
 use uuid::Uuid;
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize, sqlx::Type)]
+#[serde(rename_all = "lowercase")]
 #[sqlx(type_name = "user_role", rename_all = "lowercase")]
 pub enum UserRole {
     Guest,

backend/src/services/mod.rs

@@ -1,2 +1,3 @@
 pub mod compression;
 pub mod export;
+pub mod rate_limiter;

backend/src/services/rate_limiter.rs

@@ -0,0 +1,46 @@
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex};
+use std::time::{Duration, Instant};
+
+/// Thread-safe sliding-window rate limiter backed by an in-memory HashMap.
+/// Each key (e.g. `"join:{ip}"` or `"upload:{user_id}"`) tracks timestamps
+/// of recent requests and rejects new ones once the window is full.
+#[derive(Clone)]
+pub struct RateLimiter {
+    windows: Arc<Mutex<HashMap<String, Vec<Instant>>>>,
+}
+
+impl RateLimiter {
+    pub fn new() -> Self {
+        Self {
+            windows: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+
+    /// Returns `true` if the request is allowed, `false` if rate-limited.
+    pub fn check(&self, key: impl Into<String>, max: usize, window: Duration) -> bool {
+        let now = Instant::now();
+        let key = key.into();
+        let mut map = self.windows.lock().unwrap();
+        let timestamps = map.entry(key).or_default();
+        // Drop entries outside the window
+        timestamps.retain(|&t| now.duration_since(t) < window);
+        if timestamps.len() < max {
+            timestamps.push(now);
+            true
+        } else {
+            false
+        }
+    }
+}
+
+/// Extract the client IP from X-Forwarded-For (Caddy sets this) or fall back
+/// to a provided socket address string.
+pub fn client_ip(headers: &axum::http::HeaderMap, fallback: &str) -> String {
+    headers
+        .get("x-forwarded-for")
+        .and_then(|v| v.to_str().ok())
+        .and_then(|s| s.split(',').next())
+        .map(|s| s.trim().to_owned())
+        .unwrap_or_else(|| fallback.to_owned())
+}

backend/src/state.rs

@@ -3,6 +3,7 @@ use tokio::sync::broadcast;
 
 use crate::config::AppConfig;
 use crate::services::compression::CompressionWorker;
+use crate::services::rate_limiter::RateLimiter;
 
 #[derive(Clone, Debug)]
 pub struct SseEvent {
@@ -16,6 +17,7 @@ pub struct AppState {
     pub config: AppConfig,
     pub sse_tx: broadcast::Sender<SseEvent>,
     pub compression: CompressionWorker,
+    pub rate_limiter: RateLimiter,
 }
 
 impl AppState {
@@ -28,6 +30,7 @@ impl AppState {
             config,
             sse_tx,
             compression,
+            rate_limiter: RateLimiter::new(),
         }
     }
 }

frontend/src/lib/auth.ts

@@ -4,6 +4,7 @@ import { browser } from '$app/environment';
 const TOKEN_KEY = 'eventsnap_jwt';
 const PIN_KEY = 'eventsnap_pin';
 const USER_ID_KEY = 'eventsnap_user_id';
+const DISPLAY_NAME_KEY = 'eventsnap_display_name';
 
 export const isAuthenticated = writable(false);
 
@@ -22,11 +23,28 @@ export function getUserId(): string | null {
 	return localStorage.getItem(USER_ID_KEY);
 }
 
-export function setAuth(jwt: string, pin: string | null, userId: string): void {
+export function getDisplayName(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(DISPLAY_NAME_KEY);
+}
+
+export function getExpiry(): Date | null {
+	const token = getToken();
+	if (!token) return null;
+	try {
+		const payload = JSON.parse(atob(token.split('.')[1]));
+		return payload.exp ? new Date(payload.exp * 1000) : null;
+	} catch {
+		return null;
+	}
+}
+
+export function setAuth(jwt: string, pin: string | null, userId: string, displayName?: string): void {
 	if (!browser) return;
 	localStorage.setItem(TOKEN_KEY, jwt);
 	if (pin) localStorage.setItem(PIN_KEY, pin);
 	localStorage.setItem(USER_ID_KEY, userId);
+	if (displayName) localStorage.setItem(DISPLAY_NAME_KEY, displayName);
 	isAuthenticated.set(true);
 }
 

frontend/src/lib/components/OnboardingGuide.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+
+	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
+
+	let visible = $state(false);
+	let step = $state(0);
+
+	const steps = [
+		{
+			icon: '📸',
+			title: 'Willkommen bei EventSnap!',
+			body: 'Hier kannst du Fotos und Videos mit allen Gästen teilen — in Echtzeit, ganz ohne App-Store.'
+		},
+		{
+			icon: '⬆️',
+			title: 'Fotos & Videos hochladen',
+			body: 'Tippe oben auf „Hochladen", um Fotos aus deiner Galerie oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
+		},
+		{
+			icon: '#️⃣',
+			title: 'Hashtags nutzen',
+			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
+		},
+		{
+			icon: '🔑',
+			title: 'Deinen PIN merken!',
+			body: 'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.'
+		}
+	];
+
+	if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
+		visible = true;
+	}
+
+	function next() {
+		if (step < steps.length - 1) {
+			step++;
+		} else {
+			dismiss();
+		}
+	}
+
+	function dismiss() {
+		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
+		visible = false;
+	}
+</script>
+
+{#if visible}
+	<!-- Backdrop -->
+	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
+		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-2xl">
+			<!-- Step indicator -->
+			<div class="mb-5 flex justify-center gap-1.5">
+				{#each steps as _, i}
+					<div class="h-1.5 rounded-full transition-all {i === step ? 'w-6 bg-blue-600' : 'w-1.5 bg-gray-200'}"></div>
+				{/each}
+			</div>
+
+			<!-- Content -->
+			<div class="mb-6 text-center">
+				<div class="mb-3 text-5xl">{steps[step].icon}</div>
+				<h2 class="mb-2 text-xl font-bold text-gray-900">{steps[step].title}</h2>
+				<p class="text-sm leading-relaxed text-gray-600">{steps[step].body}</p>
+			</div>
+
+			<!-- Buttons -->
+			<div class="flex gap-2">
+				<button
+					onclick={dismiss}
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50"
+				>
+					Überspringen
+				</button>
+				<button
+					onclick={next}
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+				>
+					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

frontend/src/routes/account/+page.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	let pin = $state<string | null>(null);
+	let displayName = $state<string | null>(null);
+	let role = $state<'guest' | 'host' | 'admin' | null>(null);
+	let expiry = $state<Date | null>(null);
+	let copied = $state(false);
+	let pinCopied = $state(false);
+
+	onMount(() => {
+		if (!getToken()) {
+			goto('/join');
+			return;
+		}
+		pin = getPin();
+		displayName = getDisplayName();
+		role = getRole();
+		expiry = getExpiry();
+	});
+
+	function copyPin() {
+		if (!pin) return;
+		navigator.clipboard.writeText(pin);
+		pinCopied = true;
+		setTimeout(() => (pinCopied = false), 2000);
+	}
+
+	async function handleLogout() {
+		try { await api.delete('/session'); } catch { /* ignore */ }
+		clearAuth();
+		goto('/join');
+	}
+
+	function formatDate(d: Date): string {
+		return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
+	}
+
+	function roleLabel(r: string | null): string {
+		switch (r) {
+			case 'admin': return 'Admin';
+			case 'host': return 'Gastgeber';
+			default: return 'Gast';
+		}
+	}
+
+	function roleColor(r: string | null): string {
+		switch (r) {
+			case 'admin': return 'bg-red-100 text-red-700';
+			case 'host': return 'bg-purple-100 text-purple-700';
+			default: return 'bg-blue-100 text-blue-700';
+		}
+	}
+</script>
+
+<div class="min-h-screen bg-gray-50">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-lg items-center justify-between px-4 py-4">
+			<h1 class="text-xl font-bold text-gray-900">Mein Konto</h1>
+			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-lg space-y-4 p-4">
+		<!-- Profile card -->
+		<div class="rounded-xl border border-gray-200 bg-white p-5">
+			<div class="flex items-center gap-3">
+				<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
+					{#if displayName}
+						{displayName[0].toUpperCase()}
+					{:else}
+						?
+					{/if}
+				</div>
+				<div>
+					<p class="font-semibold text-gray-900">{displayName ?? 'Unbekannt'}</p>
+					<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {roleColor(role)}">
+						{roleLabel(role)}
+					</span>
+				</div>
+			</div>
+			{#if expiry}
+				<p class="mt-3 text-xs text-gray-400">Sitzung gültig bis {formatDate(expiry)}</p>
+			{/if}
+		</div>
+
+		<!-- PIN card -->
+		<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
+			<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
+			<p class="mb-3 text-sm text-amber-700">
+				Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
+			</p>
+			{#if pin}
+				<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
+					<span class="font-mono text-4xl font-bold tracking-widest text-gray-900">{pin}</span>
+					<button
+						onclick={copyPin}
+						class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200"
+					>
+						{pinCopied ? 'Kopiert!' : 'Kopieren'}
+					</button>
+				</div>
+			{:else}
+				<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
+					PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
+				</div>
+			{/if}
+		</div>
+
+		<!-- Recovery hint -->
+		<div class="rounded-xl border border-gray-200 bg-white p-5">
+			<h2 class="mb-1 font-semibold text-gray-900">Gerät wechseln?</h2>
+			<p class="text-sm text-gray-600">
+				Auf einem anderen Gerät kannst du dein Konto mit deinem Namen und PIN wiederherstellen.
+			</p>
+			<a
+				href="/recover"
+				class="mt-3 inline-block text-sm font-medium text-blue-600 hover:underline"
+			>
+				Zur Wiederherstellungs-Seite →
+			</a>
+		</div>
+
+		<!-- Logout -->
+		<button
+			onclick={handleLogout}
+			class="w-full rounded-xl border border-red-200 bg-white py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
+		>
+			Abmelden
+		</button>
+	</div>
+</div>

frontend/src/routes/export/+page.svelte

@@ -16,6 +16,8 @@
 		html: JobStatus;
 	}
 
+	const HTML_GUIDE_KEY = 'eventsnap_html_guide_seen';
+
 	let status = $state<ExportStatus | null>(null);
 	let showHtmlGuide = $state(false);
 	let loading = $state(true);
@@ -75,10 +77,15 @@
 	}
 
 	function downloadHtml() {
-		showHtmlGuide = true;
+		if (localStorage.getItem(HTML_GUIDE_KEY)) {
+			window.location.href = '/api/v1/export/html';
+		} else {
+			showHtmlGuide = true;
+		}
 	}
 
 	function confirmHtmlDownload() {
+		localStorage.setItem(HTML_GUIDE_KEY, '1');
 		showHtmlGuide = false;
 		window.location.href = '/api/v1/export/html';
 	}

frontend/src/routes/feed/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken, clearAuth } from '$lib/auth';
+	import { getToken } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
 	import FeedGrid from '$lib/components/FeedGrid.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
+	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
 	import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
 
 	let uploads = $state<FeedUpload[]>([]);
@@ -152,11 +153,7 @@
 		if (u) selectedUpload = u;
 	}
 
-	async function handleLogout() {
-		try { await api.delete('/session'); } catch { /* ignore */ }
-		clearAuth();
-		goto('/join');
-	}
+
 </script>
 
 <div class="min-h-screen bg-gray-50">
@@ -171,12 +168,15 @@
 				>
 					Hochladen
 				</a>
-				<button
-					onclick={handleLogout}
+				<a
+					href="/account"
 					class="text-sm text-gray-500 hover:text-gray-700"
+					aria-label="Mein Konto"
 				>
-					Abmelden
-				</button>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+					</svg>
+				</a>
 			</div>
 		</div>
 
@@ -224,3 +224,6 @@
 		onlike={handleLike}
 	/>
 {/if}
+
+<!-- First-visit onboarding guide -->
+<OnboardingGuide />

frontend/src/routes/join/+page.svelte

@@ -22,7 +22,7 @@
 				is_new: boolean;
 			}>('/join', { display_name: displayName.trim() });
 
-			setAuth(res.jwt, res.pin, res.user_id);
+			setAuth(res.jwt, res.pin, res.user_id, displayName.trim());
 			pin = res.pin;
 			showPinModal = true;
 		} catch (e) {

frontend/src/routes/recover/+page.svelte

@@ -25,7 +25,7 @@
 				user_id: string;
 			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
 
-			setAuth(res.jwt, pin.trim(), res.user_id);
+			setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
 			goto('/feed');
 		} catch (e) {
 			if (e instanceof ApiError) {