diff --git a/docs/CONCEPT_HTML_VIEWER.md b/docs/CONCEPT_HTML_VIEWER.md
new file mode 100644
index 0000000..d843e34
--- /dev/null
+++ b/docs/CONCEPT_HTML_VIEWER.md
@@ -0,0 +1,278 @@
+# HTML Viewer Export Concept
+
+## Overview
+
+The HTML Viewer export produces a **self-contained offline ZIP** that is a read-only clone
+of the live EventSnap feed. Opening `index.html` in any modern browser shows the full event
+gallery — list view, grid view, search, filter, lightbox — with no internet connection or
+server required.
+
+It **replaces the current HTML export job type**. The old HTML export produced a raw
+minijinja-rendered template; the new viewer supersedes it entirely. The existing `html`
+job variant in the backend is repurposed to run this flow instead of being kept alongside
+it.
+
+It is distinct from the ZIP archive export (which is raw media files). The viewer is a
+polished, navigable web app bundled with the event's content.
+
+---
+
+## User-Facing Behavior
+
+- Download `event_name_viewer.zip`, unzip, open `index.html`
+- Full list view (chronological, newest first) and grid view with search/filter
+- Likes, comments, and reaction counts shown (static snapshot from export time)
+- Read-only: no uploads, no auth, no dashboards
+- Works offline, no CDN or external resources
+
+---
+
+## Architecture
+
+### Separate Static SvelteKit App
+
+A new mini SvelteKit project lives at `frontend/export-viewer/` within the same monorepo.
+It uses `adapter-static` and is kept completely independent of the main app.
+
+**Why separate rather than a shared route:**
+- The viewer must be distributable as a standalone static bundle; the main app uses
+  `adapter-node` and cannot be mixed
+- Keeping it separate avoids auth, store, and routing dependencies leaking in
+- Simpler to reason about: the viewer has exactly two concerns (list view, grid view)
+
+**Why same repo:**
+- Shares Tailwind config and design tokens → visual parity with the main app
+- Single `pnpm` workspace, no separate CI needed
+- Backend can reference the pre-built output by relative path
+
+### Pre-Built Output Committed to Repo
+
+The viewer is built once and its output committed to `backend/static/export-viewer/`.
+The backend export job **does not run a Node build** at runtime — it just copies the
+pre-built assets and injects event data alongside them.
+
+When the viewer source changes, a developer rebuilds it locally (`pnpm build` in
+`frontend/export-viewer/`) and commits the updated `backend/static/export-viewer/` output.
+
+---
+
+## ZIP Structure
+
+```
+event_name_viewer.zip/
+├── index.html                  ← entry point; open this in any browser
+├── _app/
+│   └── immutable/
+│       ├── viewer.[hash].js    ← all Svelte/app logic, single bundle
+│       └── viewer.[hash].css   ← all styles including Tailwind output
+├── data.json                   ← injected by backend at export time
+└── media/
+    ├── abc123_thumb.jpg        ← ~400 px wide, used in grid cells
+    ├── abc123_full.jpg         ← original or capped (see Media Strategy)
+    ├── def456_thumb.jpg
+    └── def456.mp4              ← videos included as-is
+```
+
+No external font CDN, no Google Fonts, no remote scripts. All assets are local.
+
+---
+
+## data.json Schema
+
+Generated by the backend export job. The viewer fetches this file on startup via
+`fetch('./data.json')` (relative path, works from filesystem).
+
+```json
+{
+  "event": {
+    "name": "Sommerfest 2025",
+    "exported_at": "2025-07-15T20:00:00Z"
+  },
+  "posts": [
+    {
+      "id": "abc123",
+      "uploader": "MaxMustermann",
+      "caption": "Tolle Stimmung! #party #spaß",
+      "tags": ["party", "spaß"],
+      "timestamp": "2025-07-15T18:30:00Z",
+      "likes": 12,
+      "comments": [
+        {
+          "author": "AnnaSchulz",
+          "text": "So schön!",
+          "timestamp": "2025-07-15T18:35:00Z"
+        }
+      ],
+      "media": [
+        {
+          "type": "image",
+          "thumb": "media/abc123_thumb.jpg",
+          "full": "media/abc123_full.jpg",
+          "width": 1920,
+          "height": 1080
+        }
+      ]
+    }
+  ]
+}
+```
+
+All post data (likes, comments, tags) reflects the state at export time. No live updates.
+
+---
+
+## Media Strategy
+
+### Images
+
+| Variant | Purpose | Max dimension | Format |
+|---------|---------|---------------|--------|
+| `_thumb` | Grid cells, list post thumbnail | 400 px wide | JPEG q75 |
+| `_full` | Lightbox / full-screen view | Original, or 2000 px cap if >5 MB | JPEG q85 |
+
+The backend applies compression only when the original exceeds a threshold (e.g. >5 MB for
+images). Below that threshold the original is used as `_full` unchanged.
+
+The full-resolution original is always available via the separate ZIP archive export.
+
+### Videos
+
+Included as-is (no server-side transcoding). The viewer uses a standard `<video>` element.
+The `_thumb` variant for videos is a JPEG frame extracted at the 1-second mark.
+
+---
+
+## SvelteKit SSG Configuration
+
+```
+// frontend/export-viewer/src/routes/+layout.ts
+export const prerender = true;
+export const ssr = false;
+```
+
+`ssr = false` produces a pure client-side SPA: SvelteKit emits a minimal `index.html` shell
+and the JavaScript bundle hydrates it entirely in the browser. This is correct for a ZIP
+distribution where no server exists to handle SSR.
+
+```
+// frontend/export-viewer/svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+export default {
+  kit: {
+    adapter: adapter({
+      fallback: 'index.html',
+      pages: '../../backend/static/export-viewer',
+      assets: '../../backend/static/export-viewer',
+    })
+  }
+};
+```
+
+The build output is written directly into `backend/static/export-viewer/` so the backend
+can reference it without a copy step.
+
+### Shared Tailwind Config
+
+```
+// frontend/export-viewer/tailwind.config.js
+import baseConfig from '../tailwind.config.js';
+export default { ...baseConfig, content: ['./src/**/*.{svelte,ts}'] };
+```
+
+Imports the main app's Tailwind config to guarantee visual parity. Only the `content` glob
+is overridden.
+
+---
+
+## Viewer Feature Set
+
+| Feature | Included | Notes |
+|---------|----------|-------|
+| List view (chronological, newest first) | ✓ | Full-width cards, same layout as live app |
+| Grid view (3-column) | ✓ | Square cells, video duration badge |
+| List/grid toggle | ✓ | Same toggle icons as live app |
+| Search bar (grid view only) | ✓ | Appears only in grid view |
+| Tag filter chips | ✓ | Built from tags in data.json |
+| Uploader filter | ✓ | Dropdown from uploaders in data.json |
+| Autocomplete suggestions | ✓ | From data.json — no network requests |
+| Lightbox (tap to expand) | ✓ | Swipe left/right navigates filtered set |
+| Like counts (static) | ✓ | Snapshot from export time |
+| Comment list (static) | ✓ | Expandable under each post |
+| Like/comment actions | ✗ | Read-only export |
+| Upload button / FAB | ✗ | |
+| Account / Host / Admin | ✗ | |
+| Authentication | ✗ | No JWT, no PIN |
+| Service Worker (offline cache) | Future | Could be added later for PWA behavior |
+
+---
+
+## Backend Export Job Flow
+
+The `html` job variant is repurposed. The old minijinja template rendering path is removed
+and replaced entirely by the steps below.
+
+```
+1. Query all posts, media, reactions, and comments for the event from the DB
+2. Copy pre-built viewer assets:
+     backend/static/export-viewer/ → tmp/{job_id}/
+3. Generate data.json:
+     - Build the JSON structure from queried data
+     - Write to tmp/{job_id}/data.json
+4. Process and copy media:
+     For each media file:
+       a. Copy original; if image >5 MB, also produce compressed _full variant
+       b. Generate _thumb (resize to 400 px wide via image library)
+       c. For video, extract JPEG frame for _thumb
+       d. Write to tmp/{job_id}/media/
+5. Create ZIP:
+     zip -r event_name_viewer.zip tmp/{job_id}/
+6. Store ZIP path, mark job as complete
+7. Clean up tmp/{job_id}/
+```
+
+The backend needs an image processing dependency (e.g. `image` crate in Rust) for thumbnail
+generation and compression. Video frame extraction requires `ffmpeg` available in the
+deployment environment (already used for video handling if applicable, otherwise add to
+docker-compose).
+
+---
+
+## Monorepo Structure After Implementation
+
+```
+EventSnap/
+├── backend/
+│   ├── static/
+│   │   └── export-viewer/        ← pre-built viewer output (committed)
+│   │       ├── index.html
+│   │       └── _app/...
+│   └── src/
+│       └── handlers/
+│           └── export.rs          ← export job assembles ZIP
+├── frontend/
+│   ├── export-viewer/             ← new mini SvelteKit project
+│   │   ├── package.json
+│   │   ├── svelte.config.js       ← adapter-static, output → backend/static/export-viewer
+│   │   ├── tailwind.config.js     ← extends ../tailwind.config.js
+│   │   └── src/
+│   │       └── routes/
+│   │           ├── +layout.ts     ← prerender=true, ssr=false
+│   │           └── +page.svelte   ← list/grid feed, lightbox, search
+│   └── src/                       ← existing main app (unchanged)
+└── docs/
+    ├── CONCEPT_MOBILE_UI.md
+    └── CONCEPT_HTML_VIEWER.md
+```
+
+---
+
+## Open Questions for Implementation
+
+1. **Image processing library**: The `image` crate handles JPEG resize/compress; is it
+   already a backend dependency, or does it need to be added?
+2. **Video thumbnail extraction**: Is `ffmpeg` available in the Docker environment?
+   If not, a fallback (no video thumb, use a placeholder) is needed.
+3. **Viewer rebuild workflow**: Add a `make build-viewer` or `pnpm --filter export-viewer build`
+   step to the developer workflow docs and CI so the committed output stays in sync.
+4. **ZIP file naming**: `{event_slug}_viewer_{date}.zip` or a fixed name?
diff --git a/docs/CONCEPT_MOBILE_UI.md b/docs/CONCEPT_MOBILE_UI.md
new file mode 100644
index 0000000..5441c7c
--- /dev/null
+++ b/docs/CONCEPT_MOBILE_UI.md
@@ -0,0 +1,420 @@
+# Mobile-First UI/UX Redesign Concept
+
+## Overview
+
+EventSnap is intended for mobile use at live events, but the current UI is desktop-oriented.
+This document describes a full mobile-first redesign covering navigation, the feed/gallery,
+account page, host dashboard, and admin dashboard.
+
+---
+
+## 1. Navigation: Bottom Tab Bar
+
+Replace all per-page top-right icon links with a single **persistent bottom tab bar** present
+on every page. The bar sits at the very bottom with proper `padding-bottom` for iPhone home
+indicator (safe-area-inset-bottom).
+
+### Tab Composition by Role
+
+| Role  | Tabs |
+|-------|------|
+| Guest | 🏠 Feed · [📷+] · 👤 Account |
+| Host  | 🏠 Feed · [📷+] · 👤 Account |
+| Admin | 🏠 Feed · [📷+] · 👤 Account |
+
+All roles see the same three tabs. Role-specific dashboard links (Host, Admin) live inside
+the Account page — not as separate tabs. This keeps the bar simple and avoids conditional
+tab rendering.
+
+### Visual Style
+
+- Frosted glass background: `bg-white/85 backdrop-blur-md`
+- Thin top border: `border-t border-gray-200`
+- Subtle shadow upward
+- Active tab: colored icon + small label below
+- Inactive tab: gray icon, small gray label
+
+### Upload FAB (Floating Action Button)
+
+The center tab is an elevated circular button, not a flat tab icon:
+
+- Circle ~56 px diameter, `bg-blue-600`
+- Icon: camera outline with a small `+` badge overlaid at bottom-right
+- Raised above the bar with a drop shadow
+- Press: slight scale-down (`scale-95`) + haptic feedback where available
+- Communicates "capture new or upload existing"
+
+---
+
+## 2. Feed / Gallery Page
+
+### Header
+
+```
+┌─────────────────────────────────────────┐
+│  Sommerfest 2025              ≡  ⊞      │
+└─────────────────────────────────────────┘
+```
+
+- Event name left-aligned
+- List/grid view toggle icons right-aligned (≡ list, ⊞ grid)
+- Header collapses on downward scroll (only toggle remains visible), expands on upward scroll
+
+---
+
+### View A — Chronological List (default)
+
+Full-width post cards, newest at top, infinite scroll.
+
+```
+┌─────────────────────────────────────────┐
+│  👤 MaxMustermann          · vor 2 Min  │
+│ ┌───────────────────────────────────┐   │
+│ │                                   │   │
+│ │          [photo / video]          │   │
+│ │                                   │   │
+│ └───────────────────────────────────┘   │
+│  Tolle Stimmung! #party #spaß           │
+│  ❤️ 12   💬 3                           │
+└─────────────────────────────────────────┘
+```
+
+- Media: full-width, native aspect ratio, capped at 80 vh
+- Avatar: colored initial circle, no photo
+- Timestamp: relative ("vor 2 Min", "vor 1 Std")
+- Tap media → fullscreen lightbox, swipe left/right navigates feed
+- No search bar in list view
+
+---
+
+### View B — Grid View
+
+Transition animation when toggling: list collapses, grid fades/scales in (~200 ms).
+
+#### Search Bar (grid view only)
+
+```
+┌─────────────────────────────────────────┐
+│  🔍  Nutzer oder #Tag suchen…      ×   │
+└─────────────────────────────────────────┘
+```
+
+- Appears below the header only in grid view
+- Slides in as part of the view transition
+- `×` clears current input
+- Auto-focuses when grid view is activated
+
+#### Autocomplete Dropdown
+
+Appears immediately on focus and updates on every keystroke. Data source: the already-loaded
+posts in memory — **no extra API calls**.
+
+Two suggestion lists are derived at load time:
+- `allTags`: unique hashtags from all post captions, sorted by frequency descending
+- `allUploaders`: unique display names, sorted alphabetically
+
+| User input | Suggestions shown |
+|------------|-------------------|
+| (focus, empty) | Top 3 tags by frequency + top 3 uploaders |
+| `#` | All tags, frequency-sorted |
+| `#par` | Tags with prefix "par": `#party`, `#parade` |
+| `Max` | Uploaders matching "max" (case-insensitive) |
+| `a` | Uploaders containing "a" + tags containing "a" |
+
+Dropdown layout:
+
+```
+┌─────────────────────────────────────────┐
+│  👤 Nutzer                              │
+│     MaxMustermann                       │
+│     AnnaSchulz                          │
+│  # Tags                                 │
+│     #party    #tanz    #spaß            │
+└─────────────────────────────────────────┘
+```
+
+Max ~5 total suggestions. Tapping a suggestion adds it as an active filter chip and clears
+the search bar for another entry.
+
+#### Active Filter Chips
+
+```
+┌─────────────────────────────────────────┐
+│  👤 MaxMustermann ×   # party ×         │
+│  Alle Filter löschen                    │  ← shown when 2+ chips active
+└─────────────────────────────────────────┘
+```
+
+Filter combination logic:
+
+| Combination | Logic |
+|-------------|-------|
+| Two tags: `#party` + `#tanz` | OR — posts with either tag |
+| Two uploaders: Max + Anna | OR — posts from either |
+| Uploader + tag: Max + `#party` | AND — posts by Max that also have `#party` |
+
+#### Grid Layout
+
+```
+┌───────┬───────┬───────┐
+│       │       │       │
+│       │       │       │  3-column, equal square cells
+├───────┼───────┼───────┤  small gap (2 px)
+│       │  ▶    │       │  ← video: small ▶ badge + duration
+│       │  0:42 │       │
+└───────┴───────┴───────┘
+```
+
+- Tap cell → fullscreen lightbox, swipe navigates filtered set only
+- Virtualized grid for performance on large events
+
+---
+
+## 3. Upload Flow
+
+### Step 1 — Source Selection (Bottom Sheet)
+
+Tapping the FAB slides up a bottom sheet (~300 ms spring animation).
+Frosted glass, rounded top corners, drag handle at top. Tap outside or swipe down to dismiss.
+
+```
+┌──────────────────────────────────┐
+│          ▬  (drag handle)        │
+│                                  │
+│  📸  Kamera                      │
+│      Jetzt aufnehmen             │
+│                                  │
+│  🖼  Galerie                     │
+│      Foto oder Video wählen      │
+│                                  │
+│  [  Abbrechen  ]                 │
+└──────────────────────────────────┘
+```
+
+### Step 2a — Camera
+
+Triggers `<input type="file" accept="image/*,video/*" capture="environment">`.
+Native camera opens. After capture → Step 3.
+
+### Step 2b — Gallery
+
+Triggers `<input type="file" accept="image/*,video/*" multiple>`.
+Native gallery picker with multi-select (up to ~10 items). After selection → Step 3.
+
+### Step 3 — Preview & Metadata Screen
+
+Full-screen, pushes in from right. Bottom nav hidden (immersive).
+
+```
+┌──────────────────────────────────┐
+│  ×  Abbrechen      Hochladen →  │
+├──────────────────────────────────┤
+│                                  │
+│  ┌────┐ ┌────┐ ┌────┐  →        │  ← horizontal scroll, tap to preview
+│  │img │ │img │ │ ×  │           │    × on each thumbnail to remove
+│  └────┘ └────┘ └────┘           │
+│                                  │
+│  Beschreibung (optional)         │
+│  ┌────────────────────────────┐  │
+│  │                            │  │  ← auto-focused
+│  └────────────────────────────┘  │
+│                                  │
+│  # Schnell-Tags                  │
+│  [#Feier] [#Spaß] [#Party] …   │  ← tap to append to caption
+│                                  │
+├──────────────────────────────────┤
+│  ┌────────────────────────────┐  │
+│  │      📤 Hochladen          │  │  ← sticky, disabled until ≥1 file
+│  └────────────────────────────┘  │
+└──────────────────────────────────┘
+```
+
+### Step 4 — Background Upload + Feedback
+
+- Tapping "Hochladen" immediately returns to the feed (optimistic UX)
+- Slim progress bar above the bottom tab bar while queue is active
+- FAB gets a small spinning ring badge while uploads are in progress
+- On completion: brief toast near the bottom ("✓ Hochgeladen")
+- Rate-limit countdown banner anchored above the bottom bar (existing behavior)
+
+---
+
+## 4. Account Page
+
+Single entry point for profile info and role-based dashboard navigation.
+
+```
+┌─────────────────────────────────────────┐
+│              Mein Account               │
+├─────────────────────────────────────────┤
+│                                         │
+│        ┌───────┐                        │
+│        │  M    │   MaxMustermann        │
+│        └───────┘   🏷 Gast              │
+│                    Sommerfest 2025      │
+│                    7 Uploads            │
+│                                         │
+├── Dashboards ───────────────────────────┤  (entire section absent for guests)
+│                                         │
+│  ⭐  Host-Dashboard                →    │  (host + admin only)
+│  🛡  Admin-Dashboard               →    │  (admin only)
+│                                         │
+├── Konto ────────────────────────────────┤
+│                                         │
+│  ✏️  Anzeigename ändern             →    │
+│  🔑  PIN ändern                     →    │
+│  🚪  Event verlassen                →    │  (red text, confirm sheet)
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+- "Dashboards" section is entirely absent in the DOM for plain guests — not just hidden
+- "Event verlassen" triggers a bottom-sheet confirmation before action
+- Avatar: colored circle with initial letter
+
+---
+
+## 5. Host Dashboard
+
+Accessed via Account → ⭐ Host-Dashboard. Full-screen page, bottom nav visible.
+
+```
+┌─────────────────────────────────────────┐
+│  ←   🎉 Host-Dashboard                  │
+├─────────────────────────────────────────┤
+│                                         │
+│  ── Statistiken ──────────────────────  │
+│  ┌──────────┐  ┌──────────┐            │
+│  │    24    │  │   156    │            │
+│  │  Nutzer  │  │ Uploads  │            │
+│  └──────────┘  └──────────┘            │
+│                                         │
+│  ── Event-Einstellungen ──────────────  │  ← collapsible section
+│                                         │
+│  Neue Uploads sperren                   │
+│  ○────────────●  Gesperrt              │  ← toggle
+│  Keine neuen Uploads möglich            │
+│                                         │
+│  ── Nutzerverwaltung ─────────────────  │  ← collapsible section
+│                                         │
+│  🔍  Nutzer suchen…                     │
+│  ┌───────────────────────────────────┐  │
+│  │  👤  MaxMustermann   Gast  [🚫]   │  │
+│  │  👤  AnnaSchulz      Gast  [🚫]   │  │
+│  │  👤  GesperrterNutzer      [↩]    │  │  ← banned: undo icon
+│  └───────────────────────────────────┘  │
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+- Sections have a chevron toggle to collapse/expand (helps on small phones)
+- Ban/unban: icon tap + bottom sheet confirmation ("Nutzer wirklich sperren?")
+- User list virtualized for large events
+
+---
+
+## 6. Admin Dashboard
+
+Most complex page. Uses an **inner tab bar** directly below the header to divide the four
+functional areas. The inner tabs are independent of the bottom nav.
+
+```
+┌─────────────────────────────────────────┐
+│  ←   🛡 Admin-Dashboard                 │
+├─────────────────────────────────────────┤
+│  [Stats] [Config] [Export] [Nutzer]     │  ← inner tab bar (scrollable if needed)
+├─────────────────────────────────────────┤
+│                                         │
+│  [Tab content]                          │
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+### Stats Tab
+
+```
+  ┌──────────┐  ┌──────────┐
+  │  156     │  │  24      │
+  │ Uploads  │  │ Nutzer   │
+  └──────────┘  └──────────┘
+  ┌──────────┐  ┌──────────┐
+  │  2.1 GB  │  │  3       │
+  │ Speicher │  │ Gesperrt │
+  └──────────┘  └──────────┘
+```
+
+2×2 metric card grid. Values large and prominent. Optionally expandable to show time-series
+charts on tap.
+
+### Config Tab
+
+```
+  Upload-Limit / Nutzer
+  ┌────────────────────────────────┐
+  │  10                            │
+  └────────────────────────────────┘
+
+  Zeitfenster (Sek.)
+  ┌────────────────────────────────┐
+  │  60                            │
+  └────────────────────────────────┘
+
+  Max. Dateigröße (MB)
+  ┌────────────────────────────────┐
+  │  50                            │
+  └────────────────────────────────┘
+
+  ┌────────────────────────────────┐
+  │        💾 Speichern            │  ← sticky at bottom of tab scroll area
+  └────────────────────────────────┘
+```
+
+Each setting: full-width label + input. Save button always reachable without scrolling.
+
+### Export Tab
+
+```
+  ── Galerie ──────────────────────────
+  [  🔓 Galerie freigeben  ]
+
+  ── Export-Jobs ──────────────────────
+  [  🔄 Aktualisieren  ]
+
+  ┌───────────────────────────────────┐
+  │  HTML-Viewer   ● Fertig  [↓ ZIP]  │
+  │  JSON-Export   ⏳ Läuft…          │
+  │  ZIP-Archiv    ✗ Fehler   [↺]     │
+  └───────────────────────────────────┘
+
+  [  + Neuer Export-Job  ]
+```
+
+- Status chips: green (Fertig), amber (Läuft), red (Fehler)
+- Download button inline per completed job
+- Only the jobs list refreshes on "Aktualisieren" — no full page re-render
+
+### Nutzer Tab
+
+Same structure as Host Nutzerverwaltung, with any additional admin-only actions
+(e.g. role assignment) added as extra controls per row.
+
+---
+
+## Design Principles Summary
+
+| Principle | Application |
+|-----------|-------------|
+| Thumb zone | All primary actions in bottom ~20% of screen |
+| One-hand operation | FAB centered, bottom sheets dismissable with swipe |
+| Minimal taps to upload | Source → picker → preview → upload: 4 taps |
+| Immediate feedback | Optimistic return to feed, background upload |
+| Progressive disclosure | Caption/tags optional; CTA always reachable |
+| No role clutter in nav | Role links only in Account, bar stays clean |
+| Collapsible sections | Long management pages stay usable on small phones |
+| Inner tabs for complex pages | Admin dashboard split across 4 focused tabs |
diff --git a/frontend/src/lib/components/BottomNav.svelte b/frontend/src/lib/components/BottomNav.svelte
new file mode 100644
index 0000000..6af5afd
--- /dev/null
+++ b/frontend/src/lib/components/BottomNav.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
+
+	function isActive(path: string): boolean {
+		return $page.url.pathname.startsWith(path);
+	}
+</script>
+
+<!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
+<nav
+	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md"
+	style="padding-bottom: env(safe-area-inset-bottom)"
+>
+	<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
+		<!-- Feed tab -->
+		<a
+			href="/feed"
+			class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
+				{isActive('/feed') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
+			aria-label="Galerie"
+		>
+			<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="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+			</svg>
+			<span>Galerie</span>
+		</a>
+
+		<!-- Upload FAB (center, elevated) -->
+		<div class="relative -translate-y-3">
+			<button
+				onclick={() => ($uploadSheetOpen = true)}
+				class="relative flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition active:scale-95 hover:bg-blue-700"
+				aria-label="Hochladen"
+			>
+				<!-- Camera + plus icon -->
+				<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="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
+					<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
+				</svg>
+				<!-- Badge -->
+				{#if $uploadBadgeCount > 0}
+					<span
+						class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
+					>
+						{$uploadBadgeCount > 9 ? '9+' : $uploadBadgeCount}
+					</span>
+				{/if}
+			</button>
+		</div>
+
+		<!-- Account tab -->
+		<a
+			href="/account"
+			class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
+				{isActive('/account') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
+			aria-label="Konto"
+		>
+			<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>
+			<span>Konto</span>
+		</a>
+	</div>
+</nav>
diff --git a/frontend/src/lib/components/FeedGrid.svelte b/frontend/src/lib/components/FeedGrid.svelte
index 44a71df..7bf1f62 100644
--- a/frontend/src/lib/components/FeedGrid.svelte
+++ b/frontend/src/lib/components/FeedGrid.svelte
@@ -6,9 +6,10 @@
 		onlike: (id: string) => void;
 		oncomment: (id: string) => void;
 		onselect: (upload: FeedUpload) => void;
+		threeCol?: boolean;
 	}
 
-	let { uploads, onlike, oncomment, onselect }: Props = $props();
+	let { uploads, onlike, oncomment, onselect, threeCol = false }: Props = $props();
 
 	function isVideo(mime: string): boolean {
 		return mime.startsWith('video/');
@@ -21,7 +22,7 @@
 	}
 </script>
 
-<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+<div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
 	{#each uploads as upload (upload.id)}
 		<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
 			<button
diff --git a/frontend/src/lib/components/FeedListCard.svelte b/frontend/src/lib/components/FeedListCard.svelte
new file mode 100644
index 0000000..f7dbe74
--- /dev/null
+++ b/frontend/src/lib/components/FeedListCard.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import type { FeedUpload } from '$lib/types';
+
+	interface Props {
+		upload: FeedUpload;
+		onlike: (id: string) => void;
+		oncomment: (id: string) => void;
+		onselect: (upload: FeedUpload) => void;
+	}
+
+	let { upload, onlike, oncomment, onselect }: Props = $props();
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	function mediaUrl(u: FeedUpload): string {
+		return u.preview_url ?? u.thumbnail_url ?? '';
+	}
+
+	function relativeTime(iso: string): string {
+		const diff = Date.now() - new Date(iso).getTime();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'gerade eben';
+		if (mins < 60) return `vor ${mins} Min.`;
+		const hrs = Math.floor(mins / 60);
+		if (hrs < 24) return `vor ${hrs} Std.`;
+		const days = Math.floor(hrs / 24);
+		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
+	}
+
+	function initial(name: string): string {
+		return name[0]?.toUpperCase() ?? '?';
+	}
+
+	// Deterministic color from name
+	const COLORS = [
+		'bg-blue-100 text-blue-700',
+		'bg-purple-100 text-purple-700',
+		'bg-green-100 text-green-700',
+		'bg-amber-100 text-amber-700',
+		'bg-rose-100 text-rose-700',
+		'bg-teal-100 text-teal-700',
+	];
+	function avatarColor(name: string): string {
+		let hash = 0;
+		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
+		return COLORS[hash % COLORS.length];
+	}
+</script>
+
+<article class="bg-white">
+	<!-- Uploader row -->
+	<div class="flex items-center gap-3 px-4 py-3">
+		<div
+			class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
+				{avatarColor(upload.uploader_name)}"
+		>
+			{initial(upload.uploader_name)}
+		</div>
+		<div class="min-w-0">
+			<p class="truncate text-sm font-semibold text-gray-900">{upload.uploader_name}</p>
+			<p class="text-xs text-gray-400">{relativeTime(upload.created_at)}</p>
+		</div>
+	</div>
+
+	<!-- Media -->
+	<button
+		class="block w-full"
+		onclick={() => onselect(upload)}
+		aria-label="Bild vergrößern"
+	>
+		{#if isVideo(upload.mime_type)}
+			<div class="relative aspect-video w-full bg-gray-900">
+				{#if mediaUrl(upload)}
+					<img src={mediaUrl(upload)} alt="" class="h-full w-full object-cover opacity-80" />
+				{/if}
+				<div class="absolute inset-0 flex items-center justify-center">
+					<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
+						<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M8 5v14l11-7z" />
+						</svg>
+					</span>
+				</div>
+			</div>
+		{:else if mediaUrl(upload)}
+			<img
+				src={mediaUrl(upload)}
+				alt=""
+				class="w-full object-cover"
+				style="max-height: 80svh"
+				loading="lazy"
+			/>
+		{:else}
+			<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
+				<svg class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+				</svg>
+			</div>
+		{/if}
+	</button>
+
+	<!-- Actions row -->
+	<div class="flex items-center gap-4 px-4 py-2">
+		<button
+			onclick={() => onlike(upload.id)}
+			class="flex items-center gap-1.5 text-sm font-medium transition-colors
+				{upload.liked_by_me ? 'text-red-500' : 'text-gray-500 hover:text-red-400'}"
+		>
+			<svg
+				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+			</svg>
+			{upload.like_count}
+		</button>
+		<button
+			onclick={() => oncomment(upload.id)}
+			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500"
+		>
+			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+			</svg>
+			{upload.comment_count}
+		</button>
+	</div>
+
+	<!-- Caption -->
+	{#if upload.caption}
+		<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
+			{upload.caption}
+		</p>
+	{/if}
+
+	<div class="border-b border-gray-100"></div>
+</article>
diff --git a/frontend/src/lib/components/OnboardingGuide.svelte b/frontend/src/lib/components/OnboardingGuide.svelte
index 58c8167..6de095f 100644
--- a/frontend/src/lib/components/OnboardingGuide.svelte
+++ b/frontend/src/lib/components/OnboardingGuide.svelte
@@ -15,7 +15,7 @@
 		{
 			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!'
+			body: 'Tippe auf den Plus-Button unten in der Mitte, um Fotos aus deiner Galerie zu wählen oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
 		},
 		{
 			icon: '#️⃣',
diff --git a/frontend/src/lib/components/UploadSheet.svelte b/frontend/src/lib/components/UploadSheet.svelte
new file mode 100644
index 0000000..e297664
--- /dev/null
+++ b/frontend/src/lib/components/UploadSheet.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { uploadSheetOpen } from '$lib/ui-store';
+	import { pendingFiles } from '$lib/pending-upload-store';
+	import CameraCapture from '$lib/components/CameraCapture.svelte';
+	import type { PendingFile } from '$lib/pending-upload-store';
+
+	let showCamera = $state(false);
+	let fileInput: HTMLInputElement;
+
+	// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
+	let open = $derived($uploadSheetOpen);
+
+	function close() {
+		uploadSheetOpen.set(false);
+	}
+
+	function openGallery() {
+		fileInput?.click();
+	}
+
+	function openCamera() {
+		showCamera = true;
+	}
+
+	async function handleFiles() {
+		const files = fileInput?.files;
+		if (!files || files.length === 0) return;
+
+		const staged: PendingFile[] = [];
+		for (const file of files) {
+			staged.push({ file, previewUrl: URL.createObjectURL(file) });
+		}
+		pendingFiles.set(staged);
+		fileInput.value = '';
+		close();
+		await goto('/upload');
+	}
+
+	async function handleCapture(blob: Blob, type: 'photo' | 'video') {
+		const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
+		const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+		const fileName = `${type}_${timestamp}.${ext}`;
+		const file = new File([blob], fileName, { type: blob.type });
+		pendingFiles.set([{ file, previewUrl: URL.createObjectURL(file) }]);
+		showCamera = false;
+		close();
+		await goto('/upload');
+	}
+
+	function handleCameraClose() {
+		showCamera = false;
+	}
+</script>
+
+<!-- Camera (rendered outside sheet so it gets full viewport) -->
+{#if showCamera}
+	<CameraCapture oncapture={handleCapture} onclose={handleCameraClose} />
+{/if}
+
+<!-- Hidden file input -->
+<input
+	bind:this={fileInput}
+	type="file"
+	accept="image/*,video/*"
+	multiple
+	class="hidden"
+	onchange={handleFiles}
+/>
+
+<!-- Backdrop -->
+<div
+	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
+	class:opacity-0={!open}
+	class:pointer-events-none={!open}
+	class:opacity-100={open}
+	onclick={close}
+	aria-hidden="true"
+></div>
+
+<!-- Sheet -->
+<div
+	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300"
+	class:translate-y-full={!open}
+	class:translate-y-0={open}
+	style="padding-bottom: env(safe-area-inset-bottom)"
+>
+	<!-- Drag handle -->
+	<div class="flex justify-center pt-3 pb-1">
+		<div class="h-1 w-10 rounded-full bg-gray-300"></div>
+	</div>
+
+	<div class="space-y-3 px-4 pb-4 pt-2">
+		<!-- Gallery option -->
+		<button
+			onclick={openGallery}
+			class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
+		>
+			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600">
+				<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="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+				</svg>
+			</span>
+			<div>
+				<p class="font-semibold text-gray-900">Galerie</p>
+				<p class="text-sm text-gray-500">Foto oder Video wählen</p>
+			</div>
+		</button>
+
+		<!-- Camera option -->
+		<button
+			onclick={openCamera}
+			class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
+		>
+			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600">
+				<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="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
+					<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
+				</svg>
+			</span>
+			<div>
+				<p class="font-semibold text-gray-900">Kamera</p>
+				<p class="text-sm text-gray-500">Jetzt aufnehmen</p>
+			</div>
+		</button>
+
+		<!-- Cancel -->
+		<button
+			onclick={close}
+			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50"
+		>
+			Abbrechen
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/pending-upload-store.ts b/frontend/src/lib/pending-upload-store.ts
new file mode 100644
index 0000000..590459a
--- /dev/null
+++ b/frontend/src/lib/pending-upload-store.ts
@@ -0,0 +1,17 @@
+import { writable } from 'svelte/store';
+
+export interface PendingFile {
+	file: File;
+	previewUrl: string; // URL.createObjectURL result — revoke after use
+}
+
+export const pendingFiles = writable<PendingFile[]>([]);
+export const pendingCaption = writable('');
+
+export function clearPending() {
+	pendingFiles.update((files) => {
+		for (const f of files) URL.revokeObjectURL(f.previewUrl);
+		return [];
+	});
+	pendingCaption.set('');
+}
diff --git a/frontend/src/lib/ui-store.ts b/frontend/src/lib/ui-store.ts
new file mode 100644
index 0000000..74b5af7
--- /dev/null
+++ b/frontend/src/lib/ui-store.ts
@@ -0,0 +1,13 @@
+import { writable, derived } from 'svelte/store';
+import { queueItems } from './upload-queue';
+
+// Controls BottomNav visibility. Upload page sets this false on mount and restores on destroy.
+export const showBottomNav = writable(true);
+
+// Controls the UploadSheet overlay. FAB sets true; sheet sets false.
+export const uploadSheetOpen = writable(false);
+
+// Count of items currently pending or uploading — shown as FAB badge.
+export const uploadBadgeCount = derived(queueItems, ($items) =>
+	$items.filter((i) => i.status === 'pending' || i.status === 'uploading').length
+);
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index c12e0f2..91c6995 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,9 +3,22 @@
 	import '../app.css';
 	import { initAuth } from '$lib/auth';
 	import { onMount } from 'svelte';
+	import BottomNav from '$lib/components/BottomNav.svelte';
+	import UploadSheet from '$lib/components/UploadSheet.svelte';
+	import { showBottomNav } from '$lib/ui-store';
+	import { isAuthenticated } from '$lib/auth';
+	import { queueItems, isProcessing } from '$lib/upload-queue';
 
 	let { children } = $props();
 
+	// Slim progress bar: ratio of completed items to total, shown while processing.
+	let progressPct = $derived.by(() => {
+		const total = $queueItems.length;
+		if (total === 0) return 0;
+		const done = $queueItems.filter((i) => i.status === 'done').length;
+		return Math.round((done / total) * 100);
+	});
+
 	onMount(() => {
 		initAuth();
 	});
@@ -16,3 +29,23 @@
 </svelte:head>
 
 {@render children()}
+
+<!-- Slim upload progress bar — sits just above the bottom nav -->
+{#if $isProcessing && $isAuthenticated && $showBottomNav}
+	<div
+		class="fixed z-30 h-0.5 bg-gray-200 transition-all"
+		style="bottom: calc(3.5rem + env(safe-area-inset-bottom)); left: 0; right: 0"
+	>
+		<div
+			class="h-full bg-blue-500 transition-all duration-500"
+			style="width: {progressPct}%"
+		></div>
+	</div>
+{/if}
+
+<!-- UploadSheet is always mounted for smooth enter/exit animation -->
+<UploadSheet />
+
+{#if $showBottomNav && $isAuthenticated}
+	<BottomNav />
+{/if}
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 4e1977e..a8e5c64 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -2,15 +2,14 @@
 	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);
+	let leaveConfirmOpen = $state(false);
 
 	onMount(() => {
 		if (!getToken()) {
@@ -55,31 +54,37 @@
 			default: return 'bg-blue-100 text-blue-700';
 		}
 	}
+
+	function avatarColor(name: string | null): string {
+		if (!name) return 'bg-gray-100 text-gray-500';
+		const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
+		let hash = 0;
+		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
+		return COLORS[hash % COLORS.length];
+	}
 </script>
 
-<div class="min-h-screen bg-gray-50">
+<div class="min-h-screen bg-gray-50 pb-24">
 	<!-- 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">
+		<div class="mx-auto flex max-w-lg items-center 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">
+	<div class="mx-auto max-w-lg space-y-3 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 class="flex items-center gap-4">
+				<div
+					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
+						{avatarColor(displayName)}"
+				>
+					{displayName ? displayName[0].toUpperCase() : '?'}
 				</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)}">
+				<div class="min-w-0">
+					<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
+					<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
 						{roleLabel(role)}
 					</span>
 				</div>
@@ -89,6 +94,43 @@
 			{/if}
 		</div>
 
+		<!-- Dashboards section (host + admin only) -->
+		{#if role === 'host' || role === 'admin'}
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<div class="border-b border-gray-100 px-5 py-3">
+					<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Dashboards</h2>
+				</div>
+				<a
+					href="/host"
+					class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
+				>
+					<!-- Star icon -->
+					<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+					</svg>
+					<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
+					<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+					</svg>
+				</a>
+				{#if role === 'admin'}
+					<a
+						href="/admin"
+						class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
+					>
+						<!-- Shield icon -->
+						<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+						</svg>
+						<span class="flex-1 font-medium text-gray-900">Admin-Dashboard</span>
+						<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+						</svg>
+					</a>
+				{/if}
+			</div>
+		{/if}
+
 		<!-- 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>
@@ -112,26 +154,70 @@
 			{/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>
+		<!-- Konto section -->
+		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+			<div class="border-b border-gray-100 px-5 py-3">
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
+			</div>
+
+			<!-- Recover / device switch -->
 			<a
 				href="/recover"
-				class="mt-3 inline-block text-sm font-medium text-blue-600 hover:underline"
+				class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
 			>
-				Zur Wiederherstellungs-Seite →
+				<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
+				</svg>
+				<span class="flex-1 text-sm font-medium text-gray-700">Gerät wechseln / PIN nutzen</span>
+				<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+				</svg>
 			</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>
+			<!-- Leave / logout -->
+			<button
+				onclick={() => (leaveConfirmOpen = true)}
+				class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50"
+			>
+				<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+				</svg>
+				<span class="flex-1 text-sm font-medium text-red-600">Event verlassen</span>
+			</button>
+		</div>
 	</div>
 </div>
+
+<!-- Leave-confirm bottom sheet -->
+{#if leaveConfirmOpen}
+	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
+		<div
+			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			role="dialog"
+			aria-modal="true"
+			tabindex="-1"
+		>
+			<div class="mb-4 flex justify-center">
+				<div class="h-1 w-10 rounded-full bg-gray-300"></div>
+			</div>
+			<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
+			<p class="mb-6 text-center text-sm text-gray-500">
+				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
+			</p>
+			<button
+				onclick={handleLogout}
+				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
+			>
+				Abmelden
+			</button>
+			<button
+				onclick={() => (leaveConfirmOpen = false)}
+				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+			>
+				Abbrechen
+			</button>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 3e483a1..c5e75b8 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -23,6 +23,17 @@
 		completed_at: string | null;
 	}
 
+	interface UserSummary {
+		id: string;
+		display_name: string;
+		role: string;
+		is_banned: boolean;
+		uploads_hidden: boolean;
+		upload_count: number;
+		total_upload_bytes: number;
+		created_at: string;
+	}
+
 	const CONFIG_LABELS: Record<string, string> = {
 		max_image_size_mb: 'Max. Bildgröße (MB)',
 		max_video_size_mb: 'Max. Videogröße (MB)',
@@ -34,14 +45,36 @@
 		compression_concurrency: 'Kompressions-Worker'
 	};
 
+	type AdminTab = 'stats' | 'config' | 'export' | 'users';
+	const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
+
+	let activeTab = $state<AdminTab>('stats');
+
 	let stats = $state<StatsDto | null>(null);
 	let config = $state<Record<string, string>>({});
 	let configDraft = $state<Record<string, string>>({});
 	let exportJobs = $state<ExportJob[]>([]);
+	let users = $state<UserSummary[]>([]);
 	let loading = $state(true);
 	let saving = $state(false);
 	let error = $state<string | null>(null);
 	let toast = $state<string | null>(null);
+	let exportJobsRefreshing = $state(false);
+
+	// Nutzer tab state
+	let userSearch = $state('');
+	let filteredUsers = $derived(
+		userSearch.trim()
+			? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
+			: users
+	);
+
+	// Ban modal state
+	let banTarget = $state<UserSummary | null>(null);
+	let banHideUploads = $state(false);
+	let banSubmitting = $state(false);
+
+	const myRole = getRole();
 
 	onMount(async () => {
 		const token = getToken();
@@ -57,10 +90,11 @@
 		loading = true;
 		error = null;
 		try {
-			[stats, config, exportJobs] = await Promise.all([
+			[stats, config, exportJobs, users] = await Promise.all([
 				api.get<StatsDto>('/admin/stats'),
 				api.get<Record<string, string>>('/admin/config'),
-				api.get<ExportJob[]>('/admin/export/jobs')
+				api.get<ExportJob[]>('/admin/export/jobs'),
+				api.get<UserSummary[]>('/host/users')
 			]);
 			configDraft = { ...config };
 		} catch (e: unknown) {
@@ -70,8 +104,6 @@
 		}
 	}
 
-	let exportJobsRefreshing = $state(false);
-
 	async function refreshExportJobs() {
 		exportJobsRefreshing = true;
 		try {
@@ -89,7 +121,6 @@
 	async function saveConfig() {
 		saving = true;
 		try {
-			// Only send changed values
 			const changes: Record<string, string> = {};
 			for (const key of Object.keys(configDraft)) {
 				if (configDraft[key] !== config[key]) {
@@ -110,15 +141,74 @@
 		}
 	}
 
+	async function releaseGallery() {
+		try {
+			await api.post('/host/gallery/release');
+			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	function openBanModal(user: UserSummary) {
+		banTarget = user;
+		banHideUploads = false;
+	}
+
+	async function confirmBan() {
+		if (!banTarget) return;
+		banSubmitting = true;
+		try {
+			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
+			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			banTarget = null;
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		} finally {
+			banSubmitting = false;
+		}
+	}
+
+	async function unban(user: UserSummary) {
+		try {
+			await api.post(`/host/users/${user.id}/unban`);
+			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function promoteToHost(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
+			showToast(`${user.display_name} ist jetzt Host.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function demoteToGuest(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
+			showToast(`${user.display_name} ist jetzt Gast.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
 	function formatBytes(bytes: number): string {
 		if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
 		if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
 		return `${(bytes / 1024).toFixed(1)} KB`;
 	}
 
-	function diskPct(stats: StatsDto): number {
-		if (stats.disk_total_bytes === 0) return 0;
-		return Math.round((stats.disk_used_bytes / stats.disk_total_bytes) * 100);
+	function diskPct(s: StatsDto): number {
+		if (s.disk_total_bytes === 0) return 0;
+		return Math.round((s.disk_used_bytes / s.disk_total_bytes) * 100);
 	}
 
 	function jobLabel(type: string): string {
@@ -145,139 +235,268 @@
 	}
 </script>
 
+<!-- Ban modal -->
+{#if banTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+			<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
+			<p class="mb-4 text-sm text-gray-600">
+				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+			</p>
+			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
+				<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500" />
+				<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
+			</label>
+			<div class="flex gap-2">
+				<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50">Abbrechen</button>
+				<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50">
+					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
 		{toast}
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50">
+<div class="min-h-screen bg-gray-50 pb-24">
 	<!-- Header -->
 	<div class="border-b border-gray-200 bg-white">
-		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
-			<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
-			<div class="flex items-center gap-3">
-				<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
-					<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="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-					</svg>
-				</a>
-				<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
-			</div>
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
+			<button
+				onclick={() => goto('/account')}
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+				aria-label="Zurück"
+			>
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+				</svg>
+			</button>
+			<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
 		</div>
 	</div>
 
-	<div class="mx-auto max-w-3xl space-y-4 p-4">
+	<!-- Inner tab bar -->
+	<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl min-w-max">
+			{#each Object.entries(TAB_LABELS) as [tab, label]}
+				<button
+					onclick={() => (activeTab = tab as AdminTab)}
+					class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
+						{activeTab === tab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}"
+				>
+					{label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-3xl p-4">
 		{#if loading}
 			<div class="py-16 text-center text-gray-400">Laden…</div>
 		{:else if error}
 			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
 		{:else}
-			<!-- Stats -->
-			{#if stats}
-				<div class="rounded-xl border border-gray-200 bg-white p-5">
-					<h2 class="mb-4 font-semibold text-gray-900">Statistiken</h2>
-					<div class="grid grid-cols-3 gap-4 text-center">
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.user_count}</p>
-							<p class="text-xs text-gray-500">Gäste</p>
-						</div>
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.upload_count}</p>
-							<p class="text-xs text-gray-500">Uploads</p>
-						</div>
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.comment_count}</p>
-							<p class="text-xs text-gray-500">Kommentare</p>
-						</div>
-					</div>
 
-					<!-- Disk usage -->
-					<div class="mt-4">
-						<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
-							<span>Speicher</span>
-							<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)} ({diskPct(stats)} %)</span>
-						</div>
-						<div class="h-2 overflow-hidden rounded-full bg-gray-200">
-							<div
-								class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
-								style="width: {diskPct(stats)}%"
-							></div>
-						</div>
-						<p class="mt-1 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
-					</div>
-				</div>
-			{/if}
-
-			<!-- Config -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
-				<h2 class="mb-4 font-semibold text-gray-900">Konfiguration</h2>
+			<!-- ── Stats tab ────────────────────────────────────────────────── -->
+			{#if activeTab === 'stats'}
 				<div class="space-y-3">
-					{#each Object.entries(CONFIG_LABELS) as [key, label]}
-						<div class="flex items-center gap-3">
-							<label for={key} class="w-56 shrink-0 text-sm text-gray-700">{label}</label>
-							<input
-								id={key}
-								type="number"
-								step="any"
-								bind:value={configDraft[key]}
-								class="w-32 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
-							/>
+					{#if stats}
+						<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
+								<p class="text-3xl font-bold text-gray-900">{stats.user_count}</p>
+								<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
+							</div>
+							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
+								<p class="text-3xl font-bold text-gray-900">{stats.upload_count}</p>
+								<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
+							</div>
+							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
+								<p class="text-3xl font-bold text-gray-900">{stats.comment_count}</p>
+								<p class="mt-0.5 text-xs text-gray-500">Kommentare</p>
+							</div>
+							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
+								<p class="text-3xl font-bold text-gray-900">{diskPct(stats)} %</p>
+								<p class="mt-0.5 text-xs text-gray-500">Speicher</p>
+							</div>
 						</div>
-					{/each}
+						<!-- Disk bar -->
+						<div class="rounded-xl border border-gray-200 bg-white p-5">
+							<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
+								<span>Speicherauslastung</span>
+								<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)}</span>
+							</div>
+							<div class="h-2.5 overflow-hidden rounded-full bg-gray-200">
+								<div
+									class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
+									style="width: {diskPct(stats)}%"
+								></div>
+							</div>
+							<p class="mt-1.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
+						</div>
+					{/if}
 				</div>
-				<button
-					onclick={saveConfig}
-					disabled={saving}
-					class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-				>
-					{saving ? 'Wird gespeichert…' : 'Speichern'}
-				</button>
-			</div>
 
-			<!-- Export jobs -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
-				<div class="mb-4 flex items-center justify-between">
-					<h2 class="font-semibold text-gray-900">Export-Jobs</h2>
-					<button onclick={refreshExportJobs} disabled={exportJobsRefreshing} class="text-xs text-blue-600 hover:underline disabled:opacity-50">
-						{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
-					</button>
-				</div>
-				{#if exportJobs.length === 0}
-					<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
-				{:else}
-					<div class="space-y-3">
-						{#each exportJobs as job}
-							<div class="rounded-lg border border-gray-100 p-3">
-								<div class="flex items-center justify-between">
-									<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
-									<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
-										{statusLabel(job.status)}
-									</span>
-								</div>
-								{#if job.status === 'running'}
-									<div class="mt-2">
-										<div class="mb-1 flex justify-between text-xs text-gray-500">
-											<span>Fortschritt</span>
-											<span>{job.progress_pct} %</span>
-										</div>
-										<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
-											<div
-												class="h-full rounded-full bg-blue-500 transition-all"
-												style="width: {job.progress_pct}%"
-											></div>
-										</div>
-									</div>
-								{/if}
-								{#if job.error_message}
-									<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
-								{/if}
+			<!-- ── Config tab ───────────────────────────────────────────────── -->
+			{:else if activeTab === 'config'}
+				<div class="relative">
+					<div class="space-y-3 rounded-xl border border-gray-200 bg-white p-5 pb-20">
+						{#each Object.entries(CONFIG_LABELS) as [key, label]}
+							<div>
+								<label for={key} class="mb-1 block text-sm font-medium text-gray-700">{label}</label>
+								<input
+									id={key}
+									type="number"
+									step="any"
+									bind:value={configDraft[key]}
+									class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
+								/>
 							</div>
 						{/each}
 					</div>
-				{/if}
-			</div>
+					<!-- Sticky save button -->
+					<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
+						<button
+							onclick={saveConfig}
+							disabled={saving}
+							class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50"
+						>
+							{saving ? 'Wird gespeichert…' : 'Speichern'}
+						</button>
+					</div>
+				</div>
+
+			<!-- ── Export tab ───────────────────────────────────────────────── -->
+			{:else if activeTab === 'export'}
+				<div class="space-y-3">
+					<!-- Gallery release -->
+					<div class="rounded-xl border border-gray-200 bg-white p-5">
+						<h3 class="mb-3 font-semibold text-gray-900">Galerie</h3>
+						<button
+							onclick={releaseGallery}
+							class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
+						>
+							Galerie freigeben
+						</button>
+					</div>
+
+					<!-- Export jobs -->
+					<div class="rounded-xl border border-gray-200 bg-white p-5">
+						<div class="mb-4 flex items-center justify-between">
+							<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
+							<button
+								onclick={refreshExportJobs}
+								disabled={exportJobsRefreshing}
+								class="text-xs text-blue-600 hover:underline disabled:opacity-50"
+							>
+								{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
+							</button>
+						</div>
+						{#if exportJobs.length === 0}
+							<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
+						{:else}
+							<div class="space-y-3">
+								{#each exportJobs as job}
+									<div class="rounded-lg border border-gray-100 p-3">
+										<div class="flex items-center justify-between">
+											<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
+											<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
+												{statusLabel(job.status)}
+											</span>
+										</div>
+										{#if job.status === 'running'}
+											<div class="mt-2">
+												<div class="mb-1 flex justify-between text-xs text-gray-500">
+													<span>Fortschritt</span><span>{job.progress_pct} %</span>
+												</div>
+												<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+													<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
+												</div>
+											</div>
+										{/if}
+										{#if job.error_message}
+											<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+
+			<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
+			{:else if activeTab === 'users'}
+				<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+					<!-- Search -->
+					<div class="p-4">
+						<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+							<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+							</svg>
+							<input
+								type="search"
+								placeholder="Nutzer suchen…"
+								bind:value={userSearch}
+								class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+							/>
+						</div>
+					</div>
+					{#if filteredUsers.length === 0}
+						<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
+					{:else}
+						<div class="divide-y divide-gray-100">
+							{#each filteredUsers as user}
+								<div class="flex items-center gap-3 px-5 py-3">
+									<div class="min-w-0 flex-1">
+										<div class="flex flex-wrap items-center gap-1.5">
+											<span class="font-medium text-gray-900">{user.display_name}</span>
+											{#if user.role === 'host'}
+												<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
+											{:else if user.role === 'admin'}
+												<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
+											{/if}
+											{#if user.is_banned}
+												<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
+											{/if}
+										</div>
+										<p class="text-xs text-gray-400">
+											{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
+										</p>
+									</div>
+									<div class="flex shrink-0 gap-1.5">
+										{#if user.role !== 'admin'}
+											{#if user.is_banned}
+												<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
+													Entsperren
+												</button>
+											{:else}
+												{#if user.role === 'guest'}
+													<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100">
+														Host
+													</button>
+												{/if}
+												{#if user.role === 'host' && myRole === 'admin'}
+													<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
+														Degradieren
+													</button>
+												{/if}
+												<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
+													Sperren
+												</button>
+											{/if}
+										{/if}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>
 </div>
diff --git a/frontend/src/routes/export/+page.svelte b/frontend/src/routes/export/+page.svelte
index 1e3b892..d806671 100644
--- a/frontend/src/routes/export/+page.svelte
+++ b/frontend/src/routes/export/+page.svelte
@@ -137,11 +137,10 @@
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50">
+<div class="min-h-screen bg-gray-50 pb-24">
 	<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">
+		<div class="mx-auto flex max-w-lg items-center px-4 py-4">
 			<h1 class="text-xl font-bold text-gray-900">Export</h1>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
 		</div>
 	</div>
 
diff --git a/frontend/src/routes/feed/+page.svelte b/frontend/src/routes/feed/+page.svelte
index 1f9713a..d9b83ca 100644
--- a/frontend/src/routes/feed/+page.svelte
+++ b/frontend/src/routes/feed/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken, getRole } 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 FeedListCard from '$lib/components/FeedListCard.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
@@ -18,9 +19,75 @@
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
 
-	const role = getRole();
+	// View mode
+	let viewMode = $state<'list' | 'grid'>('list');
+
+	// Grid search / filter state
+	let searchQuery = $state('');
+	let showAutocomplete = $state(false);
+
+	interface Filter { type: 'tag' | 'user'; value: string }
+	let activeFilters = $state<Filter[]>([]);
+
 	let unsubscribers: (() => void)[] = [];
 
+	// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
+	let allTags = $derived.by(() => {
+		const freq = new Map<string, number>();
+		for (const u of uploads) {
+			for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) {
+				const t = m[1].toLowerCase();
+				freq.set(t, (freq.get(t) ?? 0) + 1);
+			}
+		}
+		return [...freq.entries()].sort((a, b) => b[1] - a[1]).map(([t]) => t);
+	});
+
+	let allUploaders = $derived([...new Set(uploads.map((u) => u.uploader_name))].sort());
+
+	let suggestions = $derived.by((): Filter[] => {
+		const q = searchQuery.trim();
+		if (!q) {
+			// Show top suggestions on focus
+			if (!showAutocomplete) return [];
+			return [
+				...allUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
+				...allTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t })),
+			];
+		}
+		if (q.startsWith('#')) {
+			const prefix = q.slice(1).toLowerCase();
+			return allTags
+				.filter((t) => t.startsWith(prefix))
+				.slice(0, 8)
+				.map((t) => ({ type: 'tag' as const, value: t }));
+		}
+		const lower = q.toLowerCase();
+		return [
+			...allUploaders
+				.filter((u) => u.toLowerCase().includes(lower))
+				.slice(0, 4)
+				.map((u) => ({ type: 'user' as const, value: u })),
+			...allTags
+				.filter((t) => t.includes(lower))
+				.slice(0, 4)
+				.map((t) => ({ type: 'tag' as const, value: t })),
+		];
+	});
+
+	// ── Filtered uploads for grid view ───────────────────────────────────────
+	let displayUploads = $derived.by(() => {
+		if (viewMode === 'list' || activeFilters.length === 0) return uploads;
+		const tags = activeFilters.filter((f) => f.type === 'tag').map((f) => f.value);
+		const users = activeFilters.filter((f) => f.type === 'user').map((f) => f.value);
+		return uploads.filter((u) => {
+			const cap = (u.caption ?? '').toLowerCase();
+			const passTag = !tags.length || tags.some((t) => cap.includes('#' + t));
+			const passUser = !users.length || users.includes(u.uploader_name);
+			return passTag && passUser;
+		});
+	});
+
 	onMount(async () => {
 		if (!getToken()) {
 			goto('/join');
@@ -37,25 +104,15 @@
 					uploads = [upload, ...uploads];
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('upload-processed', () => {
-				// Reload feed to get updated preview URLs
-				loadFeed(true);
-			}),
-			onSseEvent('like-update', () => {
-				loadFeed(true);
-			}),
-			onSseEvent('new-comment', () => {
-				loadFeed(true);
-			})
+			onSseEvent('upload-processed', () => loadFeed(true)),
+			onSseEvent('like-update', () => loadFeed(true)),
+			onSseEvent('new-comment', () => loadFeed(true))
 		);
 
-		// Infinite scroll via IntersectionObserver
 		if (sentinel) {
 			const observer = new IntersectionObserver(
 				(entries) => {
-					if (entries[0].isIntersecting && nextCursor && !loadingMore) {
-						loadMore();
-					}
+					if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
 				},
 				{ rootMargin: '200px' }
 			);
@@ -74,18 +131,10 @@
 			if (!refresh && nextCursor) params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
-
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
-
-			if (refresh) {
-				uploads = res.uploads;
-			} else {
-				uploads = res.uploads;
-			}
+			uploads = res.uploads;
 			nextCursor = res.next_cursor;
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	async function loadMore() {
@@ -96,13 +145,10 @@
 			params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
-
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = [...uploads, ...res.uploads];
 			nextCursor = res.next_cursor;
-		} catch {
-			// Ignore
-		} finally {
+		} catch { /* ignore */ } finally {
 			loadingMore = false;
 		}
 	}
@@ -110,9 +156,7 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function selectHashtag(tag: string | null) {
@@ -124,29 +168,19 @@
 	async function handleLike(id: string) {
 		try {
 			await api.post(`/upload/${id}/like`);
-			// Toggle locally for instant feedback
 			uploads = uploads.map((u) =>
 				u.id === id
-					? {
-							...u,
-							liked_by_me: !u.liked_by_me,
-							like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1
-						}
+					? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
 					: u
 			);
-			// Also update lightbox if open
 			if (selectedUpload?.id === id) {
 				selectedUpload = {
 					...selectedUpload,
 					liked_by_me: !selectedUpload.liked_by_me,
-					like_count: selectedUpload.liked_by_me
-						? selectedUpload.like_count - 1
-						: selectedUpload.like_count + 1
+					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
 				};
 			}
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function openComments(id: string) {
@@ -154,77 +188,187 @@
 		if (u) selectedUpload = u;
 	}
 
+	function selectSuggestion(item: Filter) {
+		if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
+			activeFilters = [...activeFilters, item];
+		}
+		searchQuery = '';
+		showAutocomplete = false;
+	}
 
+	function removeFilter(item: Filter) {
+		activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
+	}
+
+	function clearFilters() {
+		activeFilters = [];
+		searchQuery = '';
+	}
+
+	function switchView(mode: 'list' | 'grid') {
+		viewMode = mode;
+		if (mode === 'list') {
+			searchQuery = '';
+			showAutocomplete = false;
+		}
+	}
 </script>
 
-<div class="min-h-screen bg-gray-50">
-	<!-- Header -->
-	<div class="sticky top-0 z-40 border-b border-gray-200 bg-white/95 backdrop-blur">
+<div class="min-h-screen bg-gray-50 pb-24">
+	<!-- Sticky header -->
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
 		<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
 			<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
-			<div class="flex items-center gap-3">
-				<a
-					href="/upload"
-					class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-blue-700"
+
+			<!-- List / Grid toggle -->
+			<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
+				<button
+					onclick={() => switchView('list')}
+					class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+					aria-label="Listenansicht"
 				>
-					Hochladen
-				</a>
-				{#if role === 'host' || role === 'admin'}
-					<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
-						<!-- star icon -->
-						<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="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-						</svg>
-					</a>
-				{/if}
-				{#if role === 'admin'}
-					<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
-						<!-- shield icon -->
-						<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="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
-						</svg>
-					</a>
-				{/if}
-				<a
-					href="/account"
-					class="text-gray-400 hover:text-gray-600"
-					aria-label="Mein Konto"
-				>
-					<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" />
+					<!-- bars-3 -->
+					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
 					</svg>
-				</a>
+				</button>
+				<button
+					onclick={() => switchView('grid')}
+					class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+					aria-label="Rasteransicht"
+				>
+					<!-- squares-2x2 -->
+					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+					</svg>
+				</button>
 			</div>
 		</div>
 
-		<!-- Hashtag filter chips -->
-		<div class="mx-auto max-w-2xl px-4 pb-2">
-			<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
-		</div>
-	</div>
-
-	<!-- Feed grid -->
-	<div class="mx-auto max-w-2xl p-4">
-		{#if uploads.length === 0}
-			<div class="py-16 text-center">
-				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
-				<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
-				<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
-					Jetzt hochladen
-				</a>
+		<!-- List view: hashtag chips -->
+		{#if viewMode === 'list'}
+			<div class="mx-auto max-w-2xl px-4 pb-2">
+				<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
 			</div>
-		{:else}
-			<FeedGrid
-				{uploads}
-				onlike={handleLike}
-				oncomment={openComments}
-				onselect={(u) => (selectedUpload = u)}
-			/>
 		{/if}
 
-		<!-- Infinite scroll sentinel -->
-		<div bind:this={sentinel} class="h-4"></div>
+		<!-- Grid view: search bar + autocomplete -->
+		{#if viewMode === 'grid'}
+			<div class="mx-auto max-w-2xl px-4 pb-3">
+				<div class="relative">
+					<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
+						<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+						</svg>
+						<input
+							type="search"
+							placeholder="Nutzer oder #Tag suchen…"
+							bind:value={searchQuery}
+							onfocus={() => (showAutocomplete = true)}
+							onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
+							class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+						/>
+						{#if searchQuery}
+							<button
+								onclick={() => { searchQuery = ''; }}
+								class="shrink-0 text-gray-400 hover:text-gray-600"
+								aria-label="Suche löschen"
+							>
+								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+								</svg>
+							</button>
+						{/if}
+					</div>
 
+					<!-- Autocomplete dropdown -->
+					{#if showAutocomplete && suggestions.length > 0}
+						<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
+							{#each suggestions as item}
+								<button
+									class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
+									onmousedown={() => selectSuggestion(item)}
+								>
+									{#if item.type === 'user'}
+										<svg class="h-4 w-4 shrink-0 text-gray-400" 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>
+										<span class="font-medium text-gray-900">{item.value}</span>
+									{:else}
+										<span class="text-blue-500 font-medium">#</span>
+										<span class="font-medium text-gray-900">{item.value}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Active filter chips -->
+				{#if activeFilters.length > 0}
+					<div class="mt-2 flex flex-wrap items-center gap-1.5">
+						{#each activeFilters as filter}
+							<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
+								{filter.type === 'tag' ? '#' : ''}{filter.value}
+								<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
+									<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									</svg>
+								</button>
+							</span>
+						{/each}
+						{#if activeFilters.length >= 2}
+							<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
+								Alle löschen
+							</button>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Content -->
+	{#if uploads.length === 0}
+		<div class="py-20 text-center">
+			<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+			<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
+		</div>
+	{:else if viewMode === 'list'}
+		<!-- List view: chronological full-width cards -->
+		<div class="mx-auto max-w-2xl">
+			{#each uploads as upload (upload.id)}
+				<FeedListCard
+					{upload}
+					onlike={handleLike}
+					oncomment={openComments}
+					onselect={(u) => (selectedUpload = u)}
+				/>
+			{/each}
+		</div>
+	{:else}
+		<!-- Grid view: 3-col, filters applied -->
+		<div class="mx-auto max-w-2xl">
+			{#if displayUploads.length === 0}
+				<div class="py-16 text-center">
+					<p class="text-sm text-gray-400">Keine Treffer für die gewählten Filter.</p>
+					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurücksetzen</button>
+				</div>
+			{:else}
+				<FeedGrid
+					uploads={displayUploads}
+					onlike={handleLike}
+					oncomment={openComments}
+					onselect={(u) => (selectedUpload = u)}
+					threeCol={true}
+				/>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Infinite scroll sentinel -->
+	<div class="mx-auto max-w-2xl">
+		<div bind:this={sentinel} class="h-4"></div>
 		{#if loadingMore}
 			<div class="py-4 text-center">
 				<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
diff --git a/frontend/src/routes/host/+page.svelte b/frontend/src/routes/host/+page.svelte
index d7aaa5f..ae51b94 100644
--- a/frontend/src/routes/host/+page.svelte
+++ b/frontend/src/routes/host/+page.svelte
@@ -27,14 +27,28 @@
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 
+	// Collapsible section state
+	let statsOpen = $state(true);
+	let settingsOpen = $state(true);
+	let usersOpen = $state(true);
+
+	// User search
+	let userSearch = $state('');
+	let filteredUsers = $derived(
+		userSearch.trim()
+			? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
+			: users
+	);
+
 	// Ban modal state
 	let banTarget = $state<UserSummary | null>(null);
 	let banHideUploads = $state(false);
 	let banSubmitting = $state(false);
 
-	// Toast state
 	let toast = $state<string | null>(null);
 
+	const myRole = getRole();
+
 	onMount(async () => {
 		const token = getToken();
 		const role = getRole();
@@ -146,8 +160,6 @@
 		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
 		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 	}
-
-	const myRole = getRole();
 </script>
 
 <!-- Ban modal -->
@@ -187,140 +199,208 @@
 
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
 		{toast}
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50">
+<div class="min-h-screen bg-gray-50 pb-24">
 	<!-- Header -->
 	<div class="border-b border-gray-200 bg-white">
-		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
-			<div>
-				<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
+			<button
+				onclick={() => goto('/account')}
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+				aria-label="Zurück"
+			>
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+				</svg>
+			</button>
+			<div class="min-w-0">
+				<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
 				{#if event}
-					<p class="text-sm text-gray-500">{event.name}</p>
+					<p class="truncate text-sm text-gray-500">{event.name}</p>
 				{/if}
 			</div>
-			<div class="flex items-center gap-3">
-				{#if myRole === 'admin'}
-					<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
-						<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="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
-						</svg>
-					</a>
-				{/if}
-				<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
-			</div>
 		</div>
 	</div>
 
-	<div class="mx-auto max-w-3xl space-y-4 p-4">
+	<div class="mx-auto max-w-3xl space-y-3 p-4">
 		{#if loading}
 			<div class="py-16 text-center text-gray-400">Laden…</div>
 		{:else if error}
 			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
 		{:else if event}
-			<!-- Event controls -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
-				<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
-				<div class="flex flex-wrap gap-3">
-					<button
-						onclick={toggleEventLock}
-						class="rounded-lg px-4 py-2 text-sm font-medium {event.uploads_locked
-							? 'bg-green-600 text-white hover:bg-green-700'
-							: 'bg-amber-500 text-white hover:bg-amber-600'}"
+
+			<!-- ── Statistiken ─────────────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<button
+					onclick={() => (statsOpen = !statsOpen)}
+					class="flex w-full items-center justify-between px-5 py-4"
+				>
+					<h2 class="font-semibold text-gray-900">Statistiken</h2>
+					<svg
+						class="h-5 w-5 text-gray-400 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
+						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
 					>
-						{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
-					</button>
-					<button
-						onclick={releaseGallery}
-						disabled={event.export_released}
-						class="rounded-lg px-4 py-2 text-sm font-medium {event.export_released
-							? 'cursor-default bg-gray-100 text-gray-400'
-							: 'bg-blue-600 text-white hover:bg-blue-700'}"
-					>
-						{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
-					</button>
-				</div>
-				<div class="mt-3 flex gap-4 text-xs text-gray-500">
-					<span class="flex items-center gap-1">
-						<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
-						Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
-					</span>
-					<span class="flex items-center gap-1">
-						<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
-						Export {event.export_released ? 'freigegeben' : 'gesperrt'}
-					</span>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+					</svg>
+				</button>
+				<div class="overflow-hidden transition-[max-height] duration-200 {statsOpen ? 'max-h-[500px]' : 'max-h-0'}">
+					<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 sm:grid-cols-4">
+						<div class="rounded-xl bg-gray-50 p-4 text-center">
+							<p class="text-2xl font-bold text-gray-900">{users.length}</p>
+							<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
+						</div>
+						<div class="rounded-xl bg-gray-50 p-4 text-center">
+							<p class="text-2xl font-bold text-gray-900">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
+							<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
+						</div>
+						<div class="rounded-xl bg-gray-50 p-4 text-center">
+							<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600' : 'text-green-600'}">
+								{event.uploads_locked ? 'Gesperrt' : 'Offen'}
+							</p>
+							<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
+						</div>
+						<div class="rounded-xl bg-gray-50 p-4 text-center">
+							<p class="text-2xl font-bold {event.export_released ? 'text-blue-600' : 'text-gray-400'}">
+								{event.export_released ? 'Ja' : 'Nein'}
+							</p>
+							<p class="mt-0.5 text-xs text-gray-500">Freigegeben</p>
+						</div>
+					</div>
 				</div>
 			</div>
 
-			<!-- User management -->
-			<div class="rounded-xl border border-gray-200 bg-white">
-				<div class="border-b border-gray-100 px-5 py-4">
-					<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
-				</div>
-				{#if users.length === 0}
-					<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
-				{:else}
-					<div class="divide-y divide-gray-100">
-						{#each users as user}
-							<div class="flex items-center gap-3 px-5 py-3">
-								<div class="min-w-0 flex-1">
-									<div class="flex items-center gap-2">
-										<span class="truncate font-medium text-gray-900">{user.display_name}</span>
-										{#if user.role === 'host'}
-											<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
-										{:else if user.role === 'admin'}
-											<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
-										{/if}
-										{#if user.is_banned}
-											<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
-										{/if}
-									</div>
-									<p class="text-xs text-gray-400">
-										{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
-									</p>
-								</div>
-								<div class="flex shrink-0 gap-1.5">
-									{#if user.role !== 'admin'}
-										{#if user.is_banned}
-											<button
-												onclick={() => unban(user)}
-												class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
-											>
-												Entsperren
-											</button>
-										{:else}
-											{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
-												<button
-													onclick={() => promoteToHost(user)}
-													class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
-												>
-													Host
-												</button>
-											{/if}
-											{#if user.role === 'host' && myRole === 'admin'}
-												<button
-													onclick={() => demoteToGuest(user)}
-													class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
-												>
-													Degradieren
-												</button>
-											{/if}
-											<button
-												onclick={() => openBanModal(user)}
-												class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
-											>
-												Sperren
-											</button>
-										{/if}
-									{/if}
-								</div>
-							</div>
-						{/each}
+			<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<button
+					onclick={() => (settingsOpen = !settingsOpen)}
+					class="flex w-full items-center justify-between px-5 py-4"
+				>
+					<h2 class="font-semibold text-gray-900">Event-Einstellungen</h2>
+					<svg
+						class="h-5 w-5 text-gray-400 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
+						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+					</svg>
+				</button>
+				<div class="overflow-hidden transition-[max-height] duration-200 {settingsOpen ? 'max-h-[500px]' : 'max-h-0'}">
+					<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5">
+						<button
+							onclick={toggleEventLock}
+							class="rounded-lg px-4 py-2 text-sm font-medium transition
+								{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-amber-500 text-white hover:bg-amber-600'}"
+						>
+							{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
+						</button>
+						<button
+							onclick={releaseGallery}
+							disabled={event.export_released}
+							class="rounded-lg px-4 py-2 text-sm font-medium transition
+								{event.export_released ? 'cursor-default bg-gray-100 text-gray-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"
+						>
+							{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
+						</button>
 					</div>
-				{/if}
+				</div>
+			</div>
+
+			<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<button
+					onclick={() => (usersOpen = !usersOpen)}
+					class="flex w-full items-center justify-between px-5 py-4"
+				>
+					<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
+					<svg
+						class="h-5 w-5 text-gray-400 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
+						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+					</svg>
+				</button>
+				<div class="overflow-hidden transition-[max-height] duration-300 {usersOpen ? 'max-h-[9999px]' : 'max-h-0'}">
+					<div class="border-t border-gray-100">
+						<!-- Search -->
+						<div class="px-4 py-3">
+							<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+								<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+								</svg>
+								<input
+									type="search"
+									placeholder="Nutzer suchen…"
+									bind:value={userSearch}
+									class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+								/>
+							</div>
+						</div>
+						{#if filteredUsers.length === 0}
+							<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
+						{:else}
+							<div class="divide-y divide-gray-100">
+								{#each filteredUsers as user}
+									<div class="flex items-center gap-3 px-5 py-3">
+										<div class="min-w-0 flex-1">
+											<div class="flex flex-wrap items-center gap-1.5">
+												<span class="font-medium text-gray-900">{user.display_name}</span>
+												{#if user.role === 'host'}
+													<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
+												{:else if user.role === 'admin'}
+													<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
+												{/if}
+												{#if user.is_banned}
+													<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
+												{/if}
+											</div>
+											<p class="text-xs text-gray-400">
+												{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
+											</p>
+										</div>
+										<div class="flex shrink-0 gap-1.5">
+											{#if user.role !== 'admin'}
+												{#if user.is_banned}
+													<button
+														onclick={() => unban(user)}
+														class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+													>
+														Entsperren
+													</button>
+												{:else}
+													{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
+														<button
+															onclick={() => promoteToHost(user)}
+															class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+														>
+															Host
+														</button>
+													{/if}
+													{#if user.role === 'host' && myRole === 'admin'}
+														<button
+															onclick={() => demoteToGuest(user)}
+															class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+														>
+															Degradieren
+														</button>
+													{/if}
+													<button
+														onclick={() => openBanModal(user)}
+														class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
+													>
+														Sperren
+													</button>
+												{/if}
+											{/if}
+										</div>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index e6205ec..fdcf058 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -2,111 +2,193 @@
 	import { goto } from '$app/navigation';
 	import { getToken } from '$lib/auth';
 	import { addToQueue, loadQueue } from '$lib/upload-queue';
-	import UploadQueue from '$lib/components/UploadQueue.svelte';
-	import CameraCapture from '$lib/components/CameraCapture.svelte';
-	import { onMount } from 'svelte';
+	import { showBottomNav } from '$lib/ui-store';
+	import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
+	import { get } from 'svelte/store';
+	import { onMount, onDestroy } from 'svelte';
+	import type { PendingFile } from '$lib/pending-upload-store';
 
+	interface StagedFile extends PendingFile {
+		// previewUrl and file inherited from PendingFile
+	}
+
+	let stagedFiles = $state<StagedFile[]>([]);
 	let caption = $state('');
-	let hashtags = $state('');
-	let fileInput: HTMLInputElement;
-	let showCamera = $state(false);
+	let submitting = $state(false);
+	let captionEl: HTMLTextAreaElement;
+
+	// Quick-tag chips derived from caption as the user types
+	let captionTags = $derived.by(() => {
+		const matches = [...caption.matchAll(/#(\w+)/g)];
+		return [...new Set(matches.map((m) => m[1].toLowerCase()))];
+	});
 
 	onMount(() => {
+		showBottomNav.set(false);
 		if (!getToken()) {
 			goto('/join');
 			return;
 		}
 		loadQueue();
+
+		// Pull staged files from the pending store (written by UploadSheet)
+		const pf = get(pendingFiles);
+		const pc = get(pendingCaption);
+		stagedFiles = pf;
+		caption = pc;
+
+		// Auto-focus caption textarea after a short delay (let layout settle)
+		setTimeout(() => captionEl?.focus(), 80);
 	});
 
-	async function handleFiles() {
-		const files = fileInput?.files;
-		if (!files || files.length === 0) return;
+	onDestroy(() => {
+		showBottomNav.set(true);
+	});
 
-		for (const file of files) {
-			await addToQueue(file, caption, hashtags);
-		}
-
-		// Reset form
-		caption = '';
-		hashtags = '';
-		if (fileInput) fileInput.value = '';
+	function removeFile(idx: number) {
+		const removed = stagedFiles[idx];
+		URL.revokeObjectURL(removed.previewUrl);
+		stagedFiles = stagedFiles.filter((_, i) => i !== idx);
 	}
 
-	async function handleCapture(blob: Blob, type: 'photo' | 'video') {
-		const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
-		const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-		const fileName = `${type}_${timestamp}.${ext}`;
-		const file = new File([blob], fileName, { type: blob.type });
-		await addToQueue(file, caption, hashtags);
+	function cancel() {
+		clearPending();
+		goto('/feed');
+	}
+
+	async function handleSubmit() {
+		if (stagedFiles.length === 0 || submitting) return;
+		submitting = true;
+		for (const sf of stagedFiles) {
+			await addToQueue(sf.file, caption, '');
+		}
+		clearPending();
+		goto('/feed');
+	}
+
+	function isVideo(file: File): boolean {
+		return file.type.startsWith('video/');
 	}
 </script>
 
-{#if showCamera}
-	<CameraCapture
-		oncapture={handleCapture}
-		onclose={() => (showCamera = false)}
-	/>
-{/if}
+<!-- Full-screen composer — bottom nav is suppressed -->
+<div class="flex min-h-screen flex-col bg-white">
+	<!-- Header -->
+	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
+		<button
+			onclick={cancel}
+			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+			aria-label="Abbrechen"
+		>
+			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+			</svg>
+		</button>
+		<h1 class="text-base font-semibold text-gray-900">Neuer Beitrag</h1>
+		<!-- Submit button in header for desktop convenience -->
+		<button
+			onclick={handleSubmit}
+			disabled={stagedFiles.length === 0 || submitting}
+			class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition
+				hover:bg-blue-700 disabled:opacity-40"
+		>
+			{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
+		</button>
+	</div>
 
-<div class="min-h-screen bg-gray-50 p-4">
-	<div class="mx-auto max-w-lg">
-		<div class="mb-6 flex items-center justify-between">
-			<h1 class="text-xl font-bold text-gray-900">Hochladen</h1>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
-		</div>
-
-		<div class="rounded-lg border border-gray-200 bg-white p-4">
-			<div class="grid grid-cols-2 gap-3">
-				<!-- File picker -->
-				<label
-					class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
-				>
-					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
-					</svg>
-					<span class="text-center text-sm font-medium text-gray-600">Galerie</span>
-					<span class="mt-1 text-center text-xs text-gray-400">Mehrere Dateien</span>
-					<input
-						bind:this={fileInput}
-						type="file"
-						accept="image/*,video/*"
-						multiple
-						class="hidden"
-						onchange={handleFiles}
-					/>
-				</label>
-
-				<!-- Camera button -->
+	<div class="flex flex-1 flex-col overflow-y-auto">
+		<!-- Thumbnail strip -->
+		{#if stagedFiles.length > 0}
+			<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
+				{#each stagedFiles as sf, i}
+					<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
+						{#if isVideo(sf.file)}
+							<div class="flex h-full w-full items-center justify-center bg-gray-800">
+								<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
+									<path d="M8 5v14l11-7z" />
+								</svg>
+							</div>
+						{:else}
+							<img src={sf.previewUrl} alt="" class="h-full w-full object-cover" />
+						{/if}
+						<button
+							onclick={() => removeFile(i)}
+							class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white"
+							aria-label="Entfernen"
+						>
+							<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+				{/each}
+			</div>
+			<div class="border-b border-gray-100"></div>
+		{:else}
+			<!-- No files: prompt to go back and pick some -->
+			<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+				<svg class="h-16 w-16 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
+				</svg>
+				<div>
+					<p class="font-medium text-gray-500">Keine Dateien ausgewählt</p>
+					<p class="mt-1 text-sm text-gray-400">Geh zurück und tippe auf den Plus-Button.</p>
+				</div>
 				<button
-					onclick={() => (showCamera = true)}
-					class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
+					onclick={cancel}
+					class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
 				>
-					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-					</svg>
-					<span class="text-sm font-medium text-gray-600">Kamera</span>
-					<span class="mt-1 text-xs text-gray-400">Foto & Video</span>
+					Zurück
 				</button>
 			</div>
+		{/if}
 
-			<div class="mt-4 space-y-3">
-				<input
-					type="text"
-					bind:value={caption}
-					placeholder="Beschreibung (optional, #hashtags möglich)"
-					class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
-				/>
-				<input
-					type="text"
-					bind:value={hashtags}
-					placeholder="Hashtags (kommagetrennt, z.B. hochzeit, party)"
-					class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
-				/>
-			</div>
+		<!-- Caption textarea -->
+		<div class="px-4 pt-4">
+			<textarea
+				bind:this={captionEl}
+				bind:value={caption}
+				placeholder="Beschreibung hinzufügen… (#hashtags möglich)"
+				rows="4"
+				class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900
+					placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200"
+			></textarea>
 		</div>
 
-		<UploadQueue />
+		<!-- Quick-tag chips (derived from typed caption) -->
+		{#if captionTags.length > 0}
+			<div class="flex flex-wrap gap-1.5 px-4 pt-2">
+				{#each captionTags as tag}
+					<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600">
+						#{tag}
+					</span>
+				{/each}
+			</div>
+		{/if}
+
+		<div class="h-8"></div>
+	</div>
+
+	<!-- Sticky submit button at bottom (mobile-primary) -->
+	<div class="border-t border-gray-100 px-4 py-3">
+		<button
+			onclick={handleSubmit}
+			disabled={stagedFiles.length === 0 || submitting}
+			class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-semibold
+				text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40"
+		>
+			{#if submitting}
+				<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+				Wird hochgeladen…
+			{:else}
+				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+				</svg>
+				{stagedFiles.length > 0 ? `${stagedFiles.length} Datei${stagedFiles.length > 1 ? 'en' : ''} hochladen` : 'Hochladen'}
+			{/if}
+		</button>
 	</div>
 </div>