diff --git a/frontend/src/lib/components/Avatar.svelte b/frontend/src/lib/components/Avatar.svelte
new file mode 100644
index 0000000..459b9bd
--- /dev/null
+++ b/frontend/src/lib/components/Avatar.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    /**
+     * Bild eines Nutzers — und wenn keins hinterlegt ist, ein erzeugtes aus
+     * Initialen und einer Farbe.
+     *
+     * Die Farbe kommt aus einer Prüfsumme über die ID: Derselbe Mensch bekommt
+     * damit überall dasselbe Bild, ohne dass es irgendwo gespeichert werden
+     * müsste. Bewusst kein externer Avatar-Dienst — der würde bei jedem
+     * Seitenaufruf verraten, wer hier gerade unterwegs ist.
+     */
+    import { getFileURL } from '$lib/stores/pocketbase.svelte'
+
+    let {
+        user = null,
+        size = 32,
+        class: className = '',
+    }: {
+        user?: { id?: string; name?: string; email?: string; avatar?: string } | null
+        size?: number
+        class?: string
+    } = $props()
+
+    const label = $derived(user?.name?.trim() || user?.email?.trim() || '')
+
+    /** Erste Buchstaben der ersten beiden Wörter, sonst der erste des Namens. */
+    const initials = $derived.by(() => {
+        if (!label) return '?'
+
+        const words = label.split(/[\s.@_-]+/).filter(Boolean)
+        if (words.length === 0) return '?'
+        if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
+
+        return (words[0][0] + words[1][0]).toUpperCase()
+    })
+
+    /**
+     * Farbton aus der ID, hilfsweise aus dem Namen. Sättigung und Helligkeit
+     * bleiben fest, damit weiße Schrift auf jedem Ton lesbar bleibt — auch im
+     * Dunkelmodus, wo eine zufällige Helligkeit schnell blendet.
+     */
+    const hue = $derived.by(() => {
+        const seed = user?.id || label || '?'
+        let h = 0
+        for (let i = 0; i < seed.length; i++) {
+            h = (h * 31 + seed.charCodeAt(i)) % 360
+        }
+        return h
+    })
+
+    const src = $derived(
+        user?.avatar
+            ? getFileURL(user as object, user.avatar, { thumb: `${size * 2}x${size * 2}` })
+            : null,
+    )
+</script>
+
+{#if src}
+    <img
+        {src}
+        alt={label}
+        width={size}
+        height={size}
+        class="shrink-0 rounded-full object-cover {className}"
+        style:width="{size}px"
+        style:height="{size}px"
+    />
+{:else}
+    <span
+        aria-hidden="true"
+        class="grid shrink-0 place-items-center rounded-full font-medium text-white select-none {className}"
+        style:width="{size}px"
+        style:height="{size}px"
+        style:background="hsl({hue} 55% 42%)"
+        style:font-size="{Math.round(size * 0.4)}px"
+    >
+        {initials}
+    </span>
+{/if}
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 41162cb..20cf648 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -15,6 +15,7 @@
     import { Separator } from '@/components/ui/separator'
     import Logo from '$lib/components/Logo.svelte'
     import TeamSwitcher from '$lib/components/TeamSwitcher.svelte'
+    import Avatar from '$lib/components/Avatar.svelte'
     import RunningTimesToast from '$lib/components/RunningTimesToast.svelte'
     import { Home, Calendar, LogOut, Menu, X, Moon, Sun, Route, Settings, Bike } from 'lucide-svelte'
     import { toggleMode, mode } from 'mode-watcher'
@@ -123,7 +124,10 @@
                          Zeile, das Team-Dropdown darunter. -->
                     <div class="flex items-center gap-2">
                         <div class="hidden md:flex flex-col items-end gap-1">
-                            <div class="flex items-center gap-1">
+                            <div class="flex items-center gap-2">
+                                <a href="/dashboard/settings" title="Profil">
+                                    <Avatar user={auth.user} size={24} />
+                                </a>
                                 <p class="text-sm font-medium leading-none">
                                     {auth.user.name || auth.user.email}
                                 </p>
@@ -187,9 +191,12 @@
                         <Separator class="my-2" />
                         <div class="flex items-center justify-between gap-2 px-3 py-2">
                             <div class="flex flex-col items-start gap-1 min-w-0">
-                                <p class="text-sm font-medium leading-none truncate">
-                                    {auth.user.name || auth.user.email}
-                                </p>
+                                <span class="flex items-center gap-2 min-w-0">
+                                    <Avatar user={auth.user} size={24} />
+                                    <span class="text-sm font-medium leading-none truncate">
+                                        {auth.user.name || auth.user.email}
+                                    </span>
+                                </span>
                                 <TeamSwitcher />
                             </div>
                             <div class="flex items-center gap-1 shrink-0">
diff --git a/frontend/src/routes/dashboard/settings/+page.svelte b/frontend/src/routes/dashboard/settings/+page.svelte
index 26bb038..923e6f6 100644
--- a/frontend/src/routes/dashboard/settings/+page.svelte
+++ b/frontend/src/routes/dashboard/settings/+page.svelte
@@ -4,11 +4,12 @@
      * Datensatz (updateRule `id = @request.auth.id`) — was hier steht, kann
      * also niemand für jemand anderen ändern.
      */
-    import { api, auth, getFileURL } from '$lib/stores/pocketbase.svelte'
+    import { api, auth } from '$lib/stores/pocketbase.svelte'
     import { Button } from '@/components/ui/button'
     import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
     import { Input } from '@/components/ui/input'
     import { Label } from '@/components/ui/label'
+    import Avatar from '$lib/components/Avatar.svelte'
     import { KeyRound, User } from 'lucide-svelte'
 
     let name = $state(auth.user?.name ?? '')
@@ -17,10 +18,6 @@
     let profileMessage = $state<string | null>(null)
     let profileError = $state<string | null>(null)
 
-    const avatarUrl = $derived(
-        auth.user?.avatar ? getFileURL(auth.user as object, auth.user.avatar as string) : null,
-    )
-
     async function saveProfile() {
         if (!auth.user) return
 
@@ -108,13 +105,7 @@
         </CardHeader>
         <CardContent class="space-y-4">
             <div class="flex items-center gap-4">
-                {#if avatarUrl}
-                    <img src={avatarUrl} alt="" class="size-16 rounded-full object-cover border" />
-                {:else}
-                    <div class="size-16 rounded-full border grid place-items-center text-muted-foreground">
-                        <User class="size-6" />
-                    </div>
-                {/if}
+                <Avatar user={auth.user} size={64} />
                 <div class="space-y-1">
                     <Label for="avatar">Bild</Label>
                     <input
@@ -124,6 +115,9 @@
                         class="block w-full text-sm"
                         onchange={(e) => (avatarFile = e.currentTarget.files?.[0] ?? null)}
                     />
+                    <p class="text-xs text-muted-foreground">
+                        Ohne Bild stehen deine Initialen da.
+                    </p>
                 </div>
             </div>
 
diff --git a/frontend/src/routes/dashboard/settings/team/+page.svelte b/frontend/src/routes/dashboard/settings/team/+page.svelte
index cbb24a9..9c791ee 100644
--- a/frontend/src/routes/dashboard/settings/team/+page.svelte
+++ b/frontend/src/routes/dashboard/settings/team/+page.svelte
@@ -11,6 +11,7 @@
     import { Input } from '@/components/ui/input'
     import { Label } from '@/components/ui/label'
     import * as Dialog from '@/components/ui/dialog'
+    import Avatar from '$lib/components/Avatar.svelte'
     import { Crown, LogOut, Plus, Shield, Trash2, UserMinus, UserPlus, Users } from 'lucide-svelte'
     import type { TeamsResponse } from '$lib/types'
 
@@ -204,6 +205,7 @@
                             {@const isAdm = (t.admins ?? []).includes(userId)}
                             <li class="py-3 flex items-center justify-between gap-2">
                                 <div class="flex items-center gap-2 min-w-0">
+                                    <Avatar user={teams.users[userId]} size={28} />
                                     <span class="font-medium truncate">{teams.userLabel(userId)}</span>
                                     {#if isOwner}
                                         <Badge class="gap-1">