diff --git a/frontend/src/app.css b/frontend/src/app.css
index 59203a3..ba6cd6a 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,14 +1,16 @@
 :root {
-	--color-bg: #1a1a2e;
-	--color-bg-secondary: #16213e;
-	--color-bg-card: #0f3460;
-	--color-primary: #e94560;
-	--color-primary-hover: #ff6b81;
+	--color-navy: #0d2440;
+	--color-bg: #081829;
+	--color-bg-secondary: #0d2440;
+	--color-bg-card: #122e52;
+	--color-primary: #00b4c8;
+	--color-primary-hover: #00d4e8;
+	--color-teal: #00b4c8;
 	--color-text: #eaeaea;
-	--color-text-muted: #a0a0b0;
+	--color-text-muted: #8aaabf;
 	--color-success: #2ed573;
 	--color-warning: #ffa502;
-	--color-border: #2a2a4a;
+	--color-border: #1a3a5c;
 	--radius: 12px;
 	--radius-sm: 8px;
 }
diff --git a/frontend/src/app.html b/frontend/src/app.html
index ae4acaf..f1320fa 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,7 +4,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-title" content="Qaffee" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<meta name="theme-color" content="#0d2440" />
 		<link rel="manifest" href="/manifest.json" />
 		<link rel="icon" href="/favicon.png" />
 		%sveltekit.head%
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
new file mode 100644
index 0000000..c601127
--- /dev/null
+++ b/frontend/src/lib/components/Header.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	export let title = '';
+	export let backHref = '';
+</script>
+
+<header class="app-header">
+	<div class="header-inner">
+		<div class="header-left">
+			{#if backHref}
+				<a href={backHref} class="back-btn" aria-label="Zurück">←</a>
+			{/if}
+		</div>
+
+		<div class="header-center">
+			{#if title}
+				<span class="page-title">{title}</span>
+			{/if}
+		</div>
+
+		<div class="header-right">
+			<a href="/" class="brand-link">
+				<img src="/aquantico-logo.png" alt="Aquantico" class="brand-logo" />
+				<span class="brand-name">Qaffee</span>
+			</a>
+		</div>
+	</div>
+</header>
+
+<style>
+	.app-header {
+		background: var(--color-navy);
+		border-bottom: 2px solid var(--color-teal);
+		padding: 0 20px;
+		height: 64px;
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		z-index: 50;
+	}
+
+	.header-inner {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		align-items: center;
+	}
+
+	.header-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.header-center {
+		display: flex;
+		justify-content: center;
+	}
+
+	.header-right {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.back-btn {
+		font-size: 1.5rem;
+		color: var(--color-text);
+		text-decoration: none;
+		padding: 8px 12px;
+		border-radius: var(--radius-sm);
+		line-height: 1;
+		touch-action: manipulation;
+	}
+
+	.back-btn:active {
+		background: rgba(255,255,255,0.1);
+	}
+
+	.page-title {
+		font-size: 1.2rem;
+		font-weight: 600;
+		color: var(--color-text);
+	}
+
+	.brand-link {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		text-decoration: none;
+	}
+
+	.brand-logo {
+		height: 28px;
+		width: auto;
+		filter: brightness(0) invert(1);
+	}
+
+	.brand-name {
+		font-size: 1rem;
+		font-weight: 700;
+		color: var(--color-teal);
+		letter-spacing: 0.05em;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 47c7c33..7ca3e34 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { api, type Company } from '$lib/api/client';
+	import Header from '$lib/components/Header.svelte';
 
 	let companies: Company[] = [];
 	let loading = true;
@@ -12,13 +13,10 @@
 </script>
 
 <svelte:head>
-	<title>Strichliste</title>
+	<title>Qaffee by Aquantico</title>
 </svelte:head>
 
-<div class="page-header">
-	<h1>Strichliste</h1>
-	<p style="color: var(--color-text-muted); margin-top: 4px;">Firma auswählen</p>
-</div>
+<Header title="Firma auswählen" />
 
 {#if loading}
 	<div style="text-align: center; padding: 48px;">
diff --git a/frontend/src/routes/admin/company/+page.svelte b/frontend/src/routes/admin/company/+page.svelte
index 6f9b2e9..9503a1a 100644
--- a/frontend/src/routes/admin/company/+page.svelte
+++ b/frontend/src/routes/admin/company/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { api, type Employee, type MonthlyReport, type EmployeeReportLine, type Company } from '$lib/api/client';
+	import Header from '$lib/components/Header.svelte';
 
 	let token = '';
 	let employees: Employee[] = [];
@@ -105,13 +106,12 @@
 </script>
 
 <svelte:head>
-	<title>Firmen-Admin - Strichliste</title>
+	<title>Firmen-Admin – Qaffee</title>
 </svelte:head>
 
+<Header title="Firmen-Administration" />
+
 <div class="admin-container">
-	<div class="admin-header">
-		<h1>Firmen-Administration</h1>
-	</div>
 
 	{#if !token}
 		<p>Kein Zugangstoken angegeben.</p>
diff --git a/frontend/src/routes/admin/provider/+page.svelte b/frontend/src/routes/admin/provider/+page.svelte
index 243c3b6..2151522 100644
--- a/frontend/src/routes/admin/provider/+page.svelte
+++ b/frontend/src/routes/admin/provider/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { api, type Company, type Product, type ProviderReport, type AccessLink } from '$lib/api/client';
+	import Header from '$lib/components/Header.svelte';
 
 	let token = '';
 	let activeTab: 'companies' | 'products' | 'report' | 'links' = 'companies';
@@ -153,13 +154,12 @@
 </script>
 
 <svelte:head>
-	<title>Anbieter-Admin - Strichliste</title>
+	<title>Anbieter-Admin – Qaffee</title>
 </svelte:head>
 
+<Header title="Anbieter-Administration" />
+
 <div class="admin-container">
-	<div class="admin-header">
-		<h1>Anbieter-Administration</h1>
-	</div>
 
 	{#if !token}
 		<p>Kein Zugangstoken angegeben.</p>
diff --git a/frontend/src/routes/company/[id]/+page.svelte b/frontend/src/routes/company/[id]/+page.svelte
index 01290cd..c892de0 100644
--- a/frontend/src/routes/company/[id]/+page.svelte
+++ b/frontend/src/routes/company/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { api, type Employee, type Company } from '$lib/api/client';
+	import Header from '$lib/components/Header.svelte';
 
 	let employees: Employee[] = [];
 	let companyName = '';
@@ -22,14 +23,10 @@
 </script>
 
 <svelte:head>
-	<title>{companyName} - Strichliste</title>
+	<title>{companyName} – Qaffee</title>
 </svelte:head>
 
-<div class="page-header" style="position: relative;">
-	<a href="/" class="back-btn" aria-label="Zurück">←</a>
-	<h1>{companyName}</h1>
-	<p style="color: var(--color-text-muted); margin-top: 4px;">Mitarbeiter auswählen</p>
-</div>
+<Header title={companyName} backHref="/" />
 
 {#if loading}
 	<div style="text-align: center; padding: 48px;">
diff --git a/frontend/src/routes/company/[id]/tally/+page.svelte b/frontend/src/routes/company/[id]/tally/+page.svelte
index f408fd8..3f44017 100644
--- a/frontend/src/routes/company/[id]/tally/+page.svelte
+++ b/frontend/src/routes/company/[id]/tally/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { api, type Product, type MonthlyTally, type Employee } from '$lib/api/client';
+	import Header from '$lib/components/Header.svelte';
 
 	let products: Product[] = [];
 	let tallies: MonthlyTally[] = [];
@@ -51,14 +52,13 @@
 </script>
 
 <svelte:head>
-	<title>Produkt wählen - Strichliste</title>
+	<title>Produkt wählen – Qaffee</title>
 </svelte:head>
 
-<div class="page-header" style="position: relative;">
-	<a href="/company/{companyId}" class="back-btn" aria-label="Zurück">←</a>
-	<h1>{employee ? `${employee.firstName} ${employee.lastName}` : ''}</h1>
-	<p style="color: var(--color-text-muted); margin-top: 4px;">Produkt auswählen</p>
-</div>
+<Header
+	title={employee ? `${employee.firstName} ${employee.lastName}` : ''}
+	backHref="/company/{companyId}"
+/>
 
 {#if loading}
 	<div style="text-align: center; padding: 48px;">
diff --git a/frontend/static/aquantico-logo.png b/frontend/static/aquantico-logo.png
new file mode 100644
index 0000000..deedac1
Binary files /dev/null and b/frontend/static/aquantico-logo.png differ
diff --git a/frontend/static/manifest.json b/frontend/static/manifest.json
index 2b211c5..bf1ea45 100644
--- a/frontend/static/manifest.json
+++ b/frontend/static/manifest.json
@@ -1,11 +1,11 @@
 {
-	"name": "Strichliste",
-	"short_name": "Strichliste",
-	"description": "Digitale Strichliste für die Kaffeeküche",
+	"name": "Qaffee by Aquantico",
+	"short_name": "Qaffee",
+	"description": "Digitale Kaffeeliste von Aquantico",
 	"start_url": "/",
 	"display": "standalone",
-	"background_color": "#1a1a2e",
-	"theme_color": "#16213e",
+	"background_color": "#081829",
+	"theme_color": "#0d2440",
 	"orientation": "portrait",
 	"icons": [
 		{