diff --git a/apps/matrix/CLAUDE.md b/apps/matrix/CLAUDE.md
index 6132c4512..b84f56f87 100644
--- a/apps/matrix/CLAUDE.md
+++ b/apps/matrix/CLAUDE.md
@@ -1,19 +1,20 @@
-# Matrix Client
+# Manalink
 
-Self-hosted Matrix chat client built with SvelteKit and matrix-js-sdk.
+Secure Matrix messaging client - a bridge to decentralized communication.
 
 ## Project Overview
 
-A minimal, privacy-focused Matrix client that connects to your self-hosted Synapse server (matrix.mana.how).
+Manalink is a privacy-focused Matrix client built with SvelteKit. It connects to Matrix homeservers (default: matrix.mana.how) and supports PWA installation for mobile devices.
 
 ### Tech Stack
 
 | Layer | Technology |
 |-------|------------|
 | Frontend | SvelteKit 2, Svelte 5 (runes), Tailwind CSS 4 |
-| Matrix SDK | matrix-js-sdk |
+| Matrix SDK | matrix-js-sdk + matrix-sdk-crypto-wasm |
 | State Management | Svelte 5 runes ($state, $derived) |
 | Icons | @manacore/shared-icons (Phosphor) |
+| PWA | @vite-pwa/sveltekit + Workbox |
 | Date Handling | date-fns |
 
 ## Project Structure
@@ -21,7 +22,7 @@ A minimal, privacy-focused Matrix client that connects to your self-hosted Synap
 ```
 apps/matrix/
 ├── apps/
-│   └── web/                      # SvelteKit web client
+│   └── web/                      # SvelteKit web client (PWA)
 │       ├── src/
 │       │   ├── routes/
 │       │   │   ├── (auth)/       # Login flow
@@ -31,10 +32,16 @@ apps/matrix/
 │       │       ├── matrix/       # Matrix SDK integration
 │       │       │   ├── store.svelte.ts  # Reactive Matrix store
 │       │       │   ├── client.ts        # Login/auth functions
+│       │       │   ├── crypto.ts        # E2EE utilities
 │       │       │   ├── types.ts         # TypeScript types
 │       │       │   └── polyfills.ts     # Browser polyfills
 │       │       └── components/
-│       │           └── chat/     # Chat UI components
+│       │           ├── chat/     # Chat UI components
+│       │           ├── call/     # VoIP call components
+│       │           └── crypto/   # E2EE verification UI
+│       ├── static/               # PWA icons and assets
+│       ├── scripts/
+│       │   └── generate-icons.mjs  # Icon generation script
 │       └── package.json
 └── packages/
     └── shared/                   # Shared types
@@ -43,15 +50,42 @@ apps/matrix/
 ## Development
 
 ```bash
-# Start the Matrix web client
+# Start the web client
 pnpm dev:matrix:web
 
 # Or from monorepo root
 pnpm matrix:dev
+
+# Generate PWA icons (after changing favicon.svg)
+cd apps/matrix/apps/web && node scripts/generate-icons.mjs
 ```
 
 The client runs on **http://localhost:5180**
 
+## PWA Features
+
+Manalink is a Progressive Web App with:
+
+- **Installable** on iOS/Android homescreen
+- **Offline support** via Service Worker caching
+- **Push notifications** (Web Push API)
+- **App shortcuts** for quick actions
+
+### Caching Strategy
+
+| Content | Strategy | TTL |
+|---------|----------|-----|
+| Matrix API | NetworkFirst | 5 min |
+| Images/Avatars | CacheFirst | 30 days |
+| Fonts | CacheFirst | 1 year |
+| App Shell | StaleWhileRevalidate | - |
+
+### Installation
+
+1. Open https://[your-domain] in a mobile browser
+2. Tap "Add to Home Screen" (iOS) or install prompt (Android/Chrome)
+3. Launch from homescreen for fullscreen app experience
+
 ## Key Files
 
 ### Matrix Store (`src/lib/matrix/store.svelte.ts`)
@@ -90,26 +124,30 @@ if (result.success) {
 ## Features
 
 ### Phase 1 (Current)
-- [x] Password login
+- [x] Password login + SSO (Mana Core)
 - [x] Room list (DMs and groups)
-- [x] Message timeline
+- [x] Message timeline with pagination
 - [x] Send text messages
 - [x] Typing indicators
 - [x] Read receipts
-- [x] Unread counts
-- [x] Message pagination (load more)
+- [x] Unread/highlight counts
+- [x] Room creation
+- [x] Room settings
+- [x] Message search
+- [x] PWA support
 
-### Phase 2 (Planned)
+### Phase 2 (In Progress)
 - [ ] End-to-end encryption (E2EE)
 - [ ] File/image uploads
 - [ ] Message editing/deletion
-- [ ] Room creation
 - [ ] User search/invite
+- [ ] Message reactions
 
 ### Phase 3 (Future)
 - [ ] VoIP calls (WebRTC)
 - [ ] Video calls
 - [ ] Screen sharing
+- [ ] Capacitor native wrapper
 
 ## Configuration
 
@@ -133,15 +171,24 @@ matrix-js-sdk requires polyfills for browser usage. These are automatically load
 
 ### Vite Configuration
 
-Special Vite config in `vite.config.ts`:
+Special Vite config for Matrix SDK + PWA:
 
 ```typescript
-define: {
-  global: 'globalThis',
+// WASM headers for crypto
+server: {
+  headers: {
+    'Cross-Origin-Opener-Policy': 'same-origin',
+    'Cross-Origin-Embedder-Policy': 'require-corp',
+  },
 },
-optimizeDeps: {
-  include: ['buffer', 'events'],
-}
+// PWA plugin
+plugins: [
+  SvelteKitPWA({
+    registerType: 'autoUpdate',
+    manifest: { ... },
+    workbox: { ... },
+  }),
+],
 ```
 
 ### Client-Side Only
@@ -172,8 +219,16 @@ This is a known issue with typed-event-emitter. Make sure polyfills are loaded b
 
 The initial sync can take time depending on room history. Check `matrixStore.syncState` for status.
 
+### PWA not installing
+
+1. Ensure HTTPS is enabled
+2. Check manifest.json is served correctly
+3. Verify icons exist at specified paths
+4. Check DevTools > Application > Manifest for errors
+
 ## Related Documentation
 
 - [Matrix Client-Server API](https://spec.matrix.org/latest/client-server-api/)
 - [matrix-js-sdk docs](https://matrix-org.github.io/matrix-js-sdk/)
 - [Synapse Admin API](https://element-hq.github.io/synapse/latest/admin_api/)
+- [Vite PWA Plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html)
diff --git a/apps/matrix/apps/web/package.json b/apps/matrix/apps/web/package.json
index ade0c85a6..aed2bae0f 100644
--- a/apps/matrix/apps/web/package.json
+++ b/apps/matrix/apps/web/package.json
@@ -20,20 +20,20 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/vite": "^4.1.7",
 		"@types/node": "^22.15.21",
+		"@vite-pwa/sveltekit": "^1.1.0",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.4.0",
+		"sharp": "^0.33.5",
 		"svelte": "^5.41.0",
 		"svelte-check": "^4.3.3",
 		"tailwindcss": "^4.1.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.9.3",
-		"vite": "^6.3.5"
+		"vite": "^6.3.5",
+		"vite-plugin-pwa": "^1.2.0",
+		"workbox-window": "^7.4.0"
 	},
 	"dependencies": {
-		"matrix-js-sdk": "^37.1.0",
-		"@matrix-org/matrix-sdk-crypto-wasm": "^13.0.0",
-		"buffer": "^6.0.3",
-		"events": "^3.3.0",
 		"@manacore/shared-auth": "workspace:*",
 		"@manacore/shared-branding": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
@@ -41,7 +41,11 @@
 		"@manacore/shared-tailwind": "workspace:*",
 		"@manacore/shared-theme": "workspace:*",
 		"@manacore/shared-ui": "workspace:*",
+		"@matrix-org/matrix-sdk-crypto-wasm": "^13.0.0",
+		"buffer": "^6.0.3",
 		"date-fns": "^4.1.0",
+		"events": "^3.3.0",
+		"matrix-js-sdk": "^37.1.0",
 		"svelte-i18n": "^4.0.1"
 	}
 }
diff --git a/apps/matrix/apps/web/scripts/generate-icons.mjs b/apps/matrix/apps/web/scripts/generate-icons.mjs
new file mode 100644
index 000000000..4a0e0f23d
--- /dev/null
+++ b/apps/matrix/apps/web/scripts/generate-icons.mjs
@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * Generate PWA icons from SVG favicon
+ * Run: node scripts/generate-icons.mjs
+ * Requires: npm install -D sharp
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const staticDir = join(__dirname, '..', 'static');
+
+// Icon sizes to generate
+const sizes = [
+	{ name: 'favicon.png', size: 32 },
+	{ name: 'pwa-192x192.png', size: 192 },
+	{ name: 'pwa-512x512.png', size: 512 },
+	{ name: 'apple-touch-icon.png', size: 180 },
+];
+
+async function generateIcons() {
+	try {
+		const sharp = (await import('sharp')).default;
+		const svgPath = join(staticDir, 'favicon.svg');
+		const svgBuffer = readFileSync(svgPath);
+
+		for (const { name, size } of sizes) {
+			const outputPath = join(staticDir, name);
+			await sharp(svgBuffer).resize(size, size).png().toFile(outputPath);
+			console.log(`Generated: ${name} (${size}x${size})`);
+		}
+
+		console.log('\nAll icons generated successfully!');
+	} catch (error) {
+		if (error.code === 'ERR_MODULE_NOT_FOUND') {
+			console.error('Sharp is not installed. Run: pnpm add -D sharp');
+			console.log('\nAlternatively, use an online tool to convert the SVG:');
+			console.log('1. Open static/favicon.svg in a browser');
+			console.log('2. Use https://realfavicongenerator.net/ to generate icons');
+			console.log('3. Replace the placeholder PNGs in static/');
+		} else {
+			console.error('Error generating icons:', error);
+		}
+		process.exit(1);
+	}
+}
+
+generateIcons();
diff --git a/apps/matrix/apps/web/src/app.html b/apps/matrix/apps/web/src/app.html
index 8997ef202..a49fca6f4 100644
--- a/apps/matrix/apps/web/src/app.html
+++ b/apps/matrix/apps/web/src/app.html
@@ -1,13 +1,31 @@
 <!doctype html>
-<html lang="en" data-theme="dark">
+<html lang="de" data-theme="dark">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Mana Matrix</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1, user-scalable=no" />
+
+		<!-- PWA Meta Tags -->
+		<meta name="theme-color" content="#8b5cf6" />
+		<meta name="application-name" content="Manalink" />
+		<meta name="description" content="Secure Matrix messaging client" />
+
+		<!-- iOS Meta Tags -->
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<meta name="apple-mobile-web-app-title" content="Manalink" />
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
+
+		<!-- Favicon -->
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon.png" />
+
+		<!-- Prevent phone number detection -->
+		<meta name="format-detection" content="telephone=no" />
+
+		<title>Manalink</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="overscroll-none">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/apps/matrix/apps/web/src/lib/i18n/locales/de.json b/apps/matrix/apps/web/src/lib/i18n/locales/de.json
index 3d1cd8197..d5455f06a 100644
--- a/apps/matrix/apps/web/src/lib/i18n/locales/de.json
+++ b/apps/matrix/apps/web/src/lib/i18n/locales/de.json
@@ -1,6 +1,6 @@
 {
 	"app": {
-		"name": "Mana Matrix",
+		"name": "Manalink",
 		"description": "Sicherer Matrix-Chat"
 	},
 	"nav": {
diff --git a/apps/matrix/apps/web/src/lib/i18n/locales/en.json b/apps/matrix/apps/web/src/lib/i18n/locales/en.json
index 24c380b25..34b10b001 100644
--- a/apps/matrix/apps/web/src/lib/i18n/locales/en.json
+++ b/apps/matrix/apps/web/src/lib/i18n/locales/en.json
@@ -1,6 +1,6 @@
 {
 	"app": {
-		"name": "Mana Matrix",
+		"name": "Manalink",
 		"description": "Secure Matrix chat"
 	},
 	"nav": {
diff --git a/apps/matrix/apps/web/src/lib/matrix/client.ts b/apps/matrix/apps/web/src/lib/matrix/client.ts
index 9f594d7cc..321e64d6a 100644
--- a/apps/matrix/apps/web/src/lib/matrix/client.ts
+++ b/apps/matrix/apps/web/src/lib/matrix/client.ts
@@ -26,7 +26,7 @@ export async function loginWithPassword(
 		const response = await tempClient.login('m.login.password', {
 			user: username,
 			password: password,
-			initial_device_display_name: 'Mana Matrix Client',
+			initial_device_display_name: 'Manalink',
 		});
 
 		return {
@@ -169,7 +169,7 @@ export async function register(
 
 	try {
 		const response = await tempClient.register(username, password, null, {
-			initial_device_display_name: 'Mana Matrix Client',
+			initial_device_display_name: 'Manalink',
 		} as any);
 
 		return {
diff --git a/apps/matrix/apps/web/src/lib/matrix/crypto.ts b/apps/matrix/apps/web/src/lib/matrix/crypto.ts
index ef20c2c83..bc04d22c3 100644
--- a/apps/matrix/apps/web/src/lib/matrix/crypto.ts
+++ b/apps/matrix/apps/web/src/lib/matrix/crypto.ts
@@ -83,7 +83,7 @@ export function getEncryptionWarningLevel(
  * Generate a device display name based on browser/OS info
  */
 export function generateDeviceName(): string {
-	if (typeof navigator === 'undefined') return 'Mana Matrix Client';
+	if (typeof navigator === 'undefined') return 'Manalink';
 
 	const ua = navigator.userAgent;
 	let browser = 'Browser';
@@ -102,7 +102,7 @@ export function generateDeviceName(): string {
 	else if (ua.includes('Android')) os = 'Android';
 	else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
 
-	return `Mana Matrix (${browser} on ${os})`;
+	return `Manalink (${browser} on ${os})`;
 }
 
 /**
diff --git a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
index 9d933a8bc..8277829b1 100644
--- a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
@@ -225,7 +225,7 @@
 		<PillNavigation
 			items={navItems}
 			currentPath={$page.url.pathname}
-			appName="Mana Matrix"
+			appName="Manalink"
 			homeRoute="/chat"
 			onToggleTheme={handleToggleTheme}
 			{isDark}
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
index 917aef49a..cff456656 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
@@ -200,7 +200,7 @@
 					<ChatCircle class="h-12 w-12 text-violet-500" />
 				</div>
 				<div class="text-center">
-					<h2 class="text-xl font-semibold text-foreground">Willkommen bei Mana Matrix</h2>
+					<h2 class="text-xl font-semibold text-foreground">Willkommen bei Manalink</h2>
 					<p class="mt-2 max-w-sm">
 						Wähle eine Unterhaltung aus der Seitenleiste oder starte einen neuen Chat
 					</p>
diff --git a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
index 144e61884..7da5ac743 100644
--- a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
@@ -35,9 +35,7 @@
 	// Theme state
 	let userThemePreference = $state<'light' | 'dark' | null>(null);
 	let systemIsDark = $state(
-		typeof window !== 'undefined'
-			? window.matchMedia('(prefers-color-scheme: dark)').matches
-			: true
+		typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : true
 	);
 
 	let isDark = $derived(
@@ -142,14 +140,10 @@
 </script>
 
 <svelte:head>
-	<title>Login - Mana Matrix</title>
+	<title>Login - Manalink</title>
 </svelte:head>
 
-<div
-	class="page-container"
-	class:dark={isDark}
-	class:light={!isDark}
->
+<div class="page-container" class:dark={isDark} class:light={!isDark}>
 	<!-- Theme Toggle -->
 	<button
 		type="button"
@@ -167,17 +161,14 @@
 	<main class="main-content">
 		<!-- Logo Section -->
 		<div class="logo-section">
-			<div
-				class="logo-button"
-				class:success-pulse={showSuccess}
-			>
+			<div class="logo-button" class:success-pulse={showSuccess}>
 				{#if showSuccess}
 					<Check size={55} class="text-green-500" />
 				{:else}
 					<ChatCircle size={55} weight="duotone" class="text-violet-500" />
 				{/if}
 			</div>
-			<h1 class="app-name">Mana Matrix</h1>
+			<h1 class="app-name">Manalink</h1>
 			<p class="app-subtitle">Sichere Matrix-Kommunikation</p>
 		</div>
 
@@ -274,11 +265,7 @@
 					</div>
 
 					<!-- Submit Button -->
-					<button
-						type="submit"
-						disabled={loading || showSuccess}
-						class="submit-button"
-					>
+					<button type="submit" disabled={loading || showSuccess} class="submit-button">
 						{#if loading}
 							<CircleNotch size={20} class="animate-spin" />
 							<span>Anmelden...</span>
@@ -298,12 +285,7 @@
 				</div>
 
 				<!-- SSO Login -->
-				<button
-					type="button"
-					class="sso-button"
-					onclick={handleSSOLogin}
-					disabled={loadingSSO}
-				>
+				<button type="button" class="sso-button" onclick={handleSSOLogin} disabled={loadingSSO}>
 					{#if loadingSSO}
 						<CircleNotch size={20} class="animate-spin" />
 						<span>Weiterleiten...</span>
@@ -514,7 +496,9 @@
 		border: 1px solid rgba(255, 255, 255, 0.2);
 		border-radius: 0.75rem;
 		font-size: 1rem;
-		transition: border-color 0.2s, box-shadow 0.2s;
+		transition:
+			border-color 0.2s,
+			box-shadow 0.2s;
 		background-color: rgba(0, 0, 0, 0.2);
 		color: #fff;
 		box-sizing: border-box;
@@ -712,9 +696,23 @@
 	}
 
 	@keyframes shake {
-		0%, 100% { transform: translateX(0); }
-		10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-		20%, 40%, 60%, 80% { transform: translateX(4px); }
+		0%,
+		100% {
+			transform: translateX(0);
+		}
+		10%,
+		30%,
+		50%,
+		70%,
+		90% {
+			transform: translateX(-4px);
+		}
+		20%,
+		40%,
+		60%,
+		80% {
+			transform: translateX(4px);
+		}
 	}
 
 	.shake {
@@ -722,8 +720,13 @@
 	}
 
 	@keyframes success-pulse {
-		0%, 100% { transform: scale(1); }
-		50% { transform: scale(1.05); }
+		0%,
+		100% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.05);
+		}
 	}
 
 	.success-pulse {
@@ -737,7 +740,9 @@
 	}
 
 	@keyframes spin {
-		to { transform: rotate(360deg); }
+		to {
+			transform: rotate(360deg);
+		}
 	}
 
 	/* Mobile adjustments */
diff --git a/apps/matrix/apps/web/static/apple-touch-icon.png b/apps/matrix/apps/web/static/apple-touch-icon.png
new file mode 100644
index 000000000..a56722250
Binary files /dev/null and b/apps/matrix/apps/web/static/apple-touch-icon.png differ
diff --git a/apps/matrix/apps/web/static/favicon.png b/apps/matrix/apps/web/static/favicon.png
new file mode 100644
index 000000000..c352c323c
Binary files /dev/null and b/apps/matrix/apps/web/static/favicon.png differ
diff --git a/apps/matrix/apps/web/static/favicon.svg b/apps/matrix/apps/web/static/favicon.svg
new file mode 100644
index 000000000..07d21b48e
--- /dev/null
+++ b/apps/matrix/apps/web/static/favicon.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#8b5cf6"/>
+      <stop offset="100%" style="stop-color:#7c3aed"/>
+    </linearGradient>
+    <linearGradient id="bridge" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.9"/>
+      <stop offset="50%" style="stop-color:#ffffff"/>
+      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.9"/>
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
+  <!-- Bridge symbol (Manalink = bridge) -->
+  <g fill="url(#bridge)">
+    <!-- Left pillar -->
+    <rect x="100" y="180" width="40" height="180" rx="8"/>
+    <!-- Right pillar -->
+    <rect x="372" y="180" width="40" height="180" rx="8"/>
+    <!-- Arch -->
+    <path d="M100 240 Q256 80 412 240 L412 200 Q256 40 100 200 Z"/>
+    <!-- Deck -->
+    <rect x="100" y="280" width="312" height="32" rx="4"/>
+    <!-- Connection dots -->
+    <circle cx="180" cy="296" r="12"/>
+    <circle cx="256" cy="296" r="12"/>
+    <circle cx="332" cy="296" r="12"/>
+  </g>
+</svg>
diff --git a/apps/matrix/apps/web/static/pwa-192x192.png b/apps/matrix/apps/web/static/pwa-192x192.png
new file mode 100644
index 000000000..e69962d63
Binary files /dev/null and b/apps/matrix/apps/web/static/pwa-192x192.png differ
diff --git a/apps/matrix/apps/web/static/pwa-512x512.png b/apps/matrix/apps/web/static/pwa-512x512.png
new file mode 100644
index 000000000..1d596ae7c
Binary files /dev/null and b/apps/matrix/apps/web/static/pwa-512x512.png differ
diff --git a/apps/matrix/apps/web/vite.config.ts b/apps/matrix/apps/web/vite.config.ts
index 45e4c4fbc..8ec36e66d 100644
--- a/apps/matrix/apps/web/vite.config.ts
+++ b/apps/matrix/apps/web/vite.config.ts
@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, type UserConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 
 // ManaCore shared packages that need SSR configuration
 const MANACORE_SHARED_PACKAGES = [
@@ -45,7 +46,114 @@ const baseConfig: Partial<UserConfig> = {
 
 export default defineConfig({
 	...baseConfig,
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+		SvelteKitPWA({
+			srcDir: 'src',
+			registerType: 'autoUpdate',
+			strategies: 'generateSW',
+			scope: '/',
+			base: '/',
+			manifest: {
+				name: 'Manalink',
+				short_name: 'Manalink',
+				description: 'Secure Matrix messaging client',
+				theme_color: '#8b5cf6',
+				background_color: '#09090b',
+				display: 'standalone',
+				orientation: 'portrait',
+				start_url: '/',
+				scope: '/',
+				categories: ['communication', 'social'],
+				icons: [
+					{
+						src: 'pwa-192x192.png',
+						sizes: '192x192',
+						type: 'image/png',
+					},
+					{
+						src: 'pwa-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+					},
+					{
+						src: 'pwa-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'maskable',
+					},
+				],
+				shortcuts: [
+					{
+						name: 'New Chat',
+						short_name: 'New Chat',
+						url: '/chat?action=new',
+						icons: [{ src: 'pwa-192x192.png', sizes: '192x192' }],
+					},
+				],
+			},
+			injectManifest: {
+				globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
+			},
+			workbox: {
+				globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
+				cleanupOutdatedCaches: true,
+				clientsClaim: true,
+				skipWaiting: true,
+				// Cache strategies
+				runtimeCaching: [
+					{
+						// Cache Matrix API responses (short TTL)
+						urlPattern: /^https:\/\/matrix\.mana\.how\/_matrix\/.*/i,
+						handler: 'NetworkFirst',
+						options: {
+							cacheName: 'matrix-api-cache',
+							expiration: {
+								maxEntries: 100,
+								maxAgeSeconds: 60 * 5, // 5 minutes
+							},
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+						},
+					},
+					{
+						// Cache images and avatars
+						urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/i,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'image-cache',
+							expiration: {
+								maxEntries: 200,
+								maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
+							},
+						},
+					},
+					{
+						// Cache fonts
+						urlPattern: /\.(?:woff|woff2|ttf|otf)$/i,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'font-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
+							},
+						},
+					},
+				],
+			},
+			devOptions: {
+				enabled: true,
+				type: 'module',
+				navigateFallback: '/',
+			},
+			kit: {
+				includeVersionFile: true,
+			},
+		}),
+	],
 	server: {
 		...baseConfig.server,
 		headers: {