diff --git a/src/lib/components/FireEffect.svelte b/src/lib/components/FireEffect.svelte
new file mode 100644
index 0000000..481dd1f
--- /dev/null
+++ b/src/lib/components/FireEffect.svelte
@@ -0,0 +1,376 @@
+<!-- FireEffect.svelte -->
+<script lang="ts">
+	interface Props {
+		holy?: boolean;
+		burst?: boolean;
+	}
+
+	let { holy = false, burst = false }: Props = $props();
+</script>
+
+<div class="fire {burst ? 'burst' : ''}" class:holy-fire={holy}>
+	<div class="fire-left">
+		<div class="main-fire"></div>
+		<div class="particle-fire"></div>
+	</div>
+
+	<div class="fire-center">
+		<div class="main-fire"></div>
+		<div class="particle-fire"></div>
+	</div>
+
+	<div class="fire-right">
+		<div class="main-fire"></div>
+		<div class="particle-fire"></div>
+	</div>
+
+	<div class="fire-bottom">
+		<div class="main-fire"></div>
+	</div>
+</div>
+
+<style>
+	/* =====================
+   BASE LAYOUT
+===================== */
+.aura {
+	position: relative;
+	width: 88px;
+	display: grid;
+	place-items: center;
+}
+.aura.phase-3,
+.aura.phase-4,
+.aura.phase-5,
+.aura.phase-6
+{
+	height: 88px;
+}
+
+.number {
+	position: relative;
+	z-index: 5;
+	font-size: 2.5rem;
+	font-weight: 700;
+	color: var(--nord13);
+	--shadow-outline:  0 0 1px rgba(255,255,255,0.9), 0 0 3px rgba(0,0,0,0.4);
+}
+
+/* =====================
+   PHASE 1 – GLOW
+===================== */
+.phase-1 .number {
+	text-shadow:
+		0 0 8px rgba(255,215,100,.5),
+		0 0 16px rgba(255,215,100,.35);
+	animation: glow-pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes glow-pulse {
+	0%,100% { text-shadow: 0 0 8px rgba(255,215,100,.4); }
+	50% { text-shadow: 0 0 16px rgba(255,215,100,.8); }
+}
+
+/* =====================
+   PURE CSS FIRE (SCALED + RISING)
+===================== */
+.fire {
+	position: absolute;
+	bottom: -10px;
+	left: 50%;
+	transform: translateX(-50%) scale(0.55);
+	width: 100px;
+	height: 100px;
+	pointer-events: none;
+	z-index: 4;
+}
+
+/* ---------- animations ---------- */
+@keyframes scaleUpDown {
+	0%,100% { transform: scaleY(1) scaleX(1); }
+	50%,90% { transform: scaleY(1.1); }
+	75% { transform: scaleY(0.95); }
+	80% { transform: scaleX(0.95); }
+}
+
+@keyframes shake {
+	0%,100% { transform: skewX(0) scale(1); }
+	50% { transform: skewX(5deg) scale(0.9); }
+}
+
+@keyframes particleUp {
+	0% { opacity: 0; }
+	20% { opacity: 1; }
+	80% { opacity: 1; }
+	100% {
+		opacity: 0;
+		top: -100%;
+		transform: scale(0.5);
+	}
+}
+
+@keyframes glow {
+	0%,100% { background-color: #ef5a00; }
+	50% { background-color: #ff7800; }
+}
+
+/* ---------- fire structure ---------- */
+.fire-center,
+.fire-left,
+.fire-right {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.fire-center {
+	animation: scaleUpDown 3s ease-out infinite;
+}
+
+.fire-left {
+	animation: shake 3s ease-out infinite;
+}
+
+.fire-right {
+	animation: shake 2s ease-out infinite;
+}
+
+.main-fire {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-image: radial-gradient(
+		farthest-corner at 10px 0,
+		color-mix(in srgb, var(--nord11) 70%, transparent),
+		color-mix(in srgb, var(--nord12) 70%, transparent) 60%,
+		color-mix(in srgb, var(--nord13) 85%, transparent) 95%
+	);
+	filter: drop-shadow(0 0 6px var(--nord12));
+	transform: scaleX(0.8) rotate(45deg);
+	border-radius: 0 40% 60% 40%;
+	/*filter: drop-shadow(0 0 10px #d43322);*/
+}
+
+.fire-left .main-fire {
+	top: 15%;
+	left: -20%;
+	width: 80%;
+	height: 80%;
+}
+
+.fire-right .main-fire {
+	top: 15%;
+	right: -25%;
+	width: 80%;
+	height: 80%;
+}
+
+.particle-fire {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+		background-color: var(--nord13);
+	filter: drop-shadow(0 0 4px var(--nord12));
+	border-radius: 50%;
+	animation: particleUp 2.5s ease-out infinite;
+}
+
+.fire-center .particle-fire {
+	top: 60%;
+	left: 45%;
+}
+
+.fire-left .particle-fire {
+	top: 20%;
+	left: 20%;
+	animation-duration: 3s;
+}
+
+.fire-right .particle-fire {
+	top: 45%;
+	left: 50%;
+	width: 15px;
+	height: 15px;
+}
+
+.fire-bottom .main-fire {
+	position: absolute;
+	top: 30%;
+	left: 20%;
+	width: 75%;
+	height: 75%;
+	background-color: #ff7800;
+	transform: scaleX(0.8) rotate(45deg);
+	border-radius: 0 40% 100% 40%;
+	filter: blur(10px);
+	animation: glow 2s ease-out infinite;
+}
+
+/* =====================
+   HOLY (BLUE-WHITE) FIRE
+===================== */
+.holy-fire .main-fire {
+	background-image: radial-gradient(
+		farthest-corner at 10px 0,
+		#9fd4ff 0%,
+		#eaf6ff 95%
+	);
+	filter: drop-shadow(0 0 12px rgba(180,220,255,.9));
+}
+
+.holy-fire .particle-fire {
+	background-color: #eaf6ff;
+	filter: drop-shadow(0 0 12px rgba(180,220,255,.9));
+}
+
+.holy-fire .fire-bottom .main-fire {
+	background-color: #d6ecff;
+}
+
+/* =====================
+   PHASE 3 – HALO
+===================== */
+.halo {
+	position: absolute;
+	top: -6px;
+	width: 70px;
+	height: 20px;
+	border-radius: 50%;
+	border: 4px solid rgba(255,235,180,.9);
+	box-shadow:
+		0 0 12px rgba(255,235,180,.8),
+		0 0 20px rgba(255,235,180,.5);
+	animation: halo-float 3s ease-in-out infinite;
+	z-index: 3;
+}
+
+@keyframes halo-float {
+	0%,100% { transform: translateY(0); }
+	50% { transform: translateY(-4px); }
+}
+
+/* =====================
+   PHASE 4 – WINGS
+===================== */
+.wing {
+  position: absolute;
+  top: 20%;
+  width: 36px;
+  height: 64px;
+  z-index: 0;
+  pointer-events: none;
+  transform-origin: top center;
+ 	filter: drop-shadow(0 0 3px white);
+
+}
+
+.wing svg {
+  width: 100%;
+  height: 100%;
+  fill: white;
+}
+.wing.left {
+  left: -18px;
+  transform: rotate(-10deg);
+  animation: wing-slow-fly-left 4s ease-in-out infinite alternate;
+}
+
+.wing.right {
+  right: -18px;
+  transform: scaleX(-1) rotate(-10deg);
+  animation: wing-slow-fly-right 4s ease-in-out infinite alternate;
+}
+
+/* slow back-and-forth rotation for a gentle flight */
+@keyframes wing-slow-fly-left {
+  0%   { transform: rotate(10deg); }
+  50%  { transform: rotate(0deg); }
+  100% { transform: rotate(10deg); }
+}
+
+@keyframes wing-slow-fly-right {
+  0%   { transform: scaleX(-1) rotate(10deg); }
+  50%  { transform: scaleX(-1) rotate(0deg); }
+  100% { transform: scaleX(-1) rotate(10deg); }
+}
+
+/* =====================
+   EMBER TEXT SHADOW
+===================== */
+.phase-2 .number,
+.phase-3 .number,
+.phase-4 .number {
+	animation: ember-pulse 1.4s infinite alternate;
+}
+
+@keyframes ember-pulse {
+	0% {
+		text-shadow:
+			var(--shadow-outline),
+			0 0 6px rgba(255,140,0,.6),
+			0 0 12px rgba(255,90,0,.4),
+			0 0 20px rgba(255,50,0,.2);
+	}
+	100% {
+		text-shadow:
+			var(--shadow-outline),
+			0 0 10px rgba(255,180,0,.9),
+			0 0 18px rgba(255,120,0,.6),
+			0 0 28px rgba(255,70,0,.35);
+	}
+}
+
+.holy-fire .number {
+	animation: holy-ember 1.8s infinite alternate;
+	color: #eaf6ff;
+	--shadow-outline: 0 0 5px rgba(0,0,0,0.7);
+}
+
+@keyframes holy-ember {
+	0% {
+		text-shadow:
+			var(--shadow-outline),
+			0 0 6px rgba(180,220,255,.6),
+			0 0 14px rgba(120,180,255,.45),
+			0 0 24px rgba(80,140,255,.3);
+	}
+	100% {
+		text-shadow:
+			var(--shadow-outline),
+			0 0 12px rgba(220,245,255,.95),
+			0 0 22px rgba(160,210,255,.7),
+			0 0 36px rgba(100,160,255,.45);
+	}
+}
+/* ===== BURST OVERRIDE ===== */
+.fire.burst {
+	animation: flame-burst 600ms ease-out forwards;
+}
+
+.fire.burst .particle-fire {
+	animation: particleBurst 600ms ease-out forwards;
+}
+
+@keyframes flame-burst {
+	0% {
+		transform: translateX(-50%) scale(0.1) translateY(0%);
+		opacity: 0;
+	}
+	30% {
+		opacity: 1;
+	}
+	100% {
+		transform: translateX(-50%) scale(2) translateY(-10%);
+		opacity: 0;
+	}
+}
+
+@keyframes particleBurst {
+	0% { opacity: 0; }
+	30% { opacity: 1; }
+	100% {
+		transform: translateY(-120px) scale(0.3);
+		opacity: 0;
+	}
+}
+</style>
diff --git a/src/lib/components/StreakAura.svelte b/src/lib/components/StreakAura.svelte
index c888a9e..d09d9cd 100644
--- a/src/lib/components/StreakAura.svelte
+++ b/src/lib/components/StreakAura.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
-	export let value: number = 0;
+	import FireEffect from './FireEffect.svelte';
 
-	const phase =
+	interface Props {
+		value?: number;
+		burst?: boolean;
+	}
+
+	let { value = 0, burst = false }: Props = $props();
+
+	const phase = $derived(
 		value >= 365 ? 6 :
 		value >= 180 ? 5 :
 		value >= 90  ? 4 :
 		value >= 30  ? 3 :
-		value >= 14  ? 2 :   // NEW: particles only
-		value >= 7   ? 1 : 0;
+		value >= 14  ? 2 :
+		value >= 7   ? 1 : 0
+	);
 </script>
 
 <div class="aura phase-{phase}" class:holy-fire={phase>=4}>
@@ -33,36 +41,13 @@
 	{/if}
 
 
-{#if phase >= 2}
-	<div class="fire">
-		<div class="fire-left">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
-			{/if}
-			<div class="particle-fire"></div>
-		</div>
+	{#if phase >= 2}
+		<FireEffect holy={phase>=4} />
+	{/if}
 
-		<div class="fire-center">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
-			{/if}
-			<div class="particle-fire"></div>
-		</div>
-
-		<div class="fire-right">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
-			{/if}
-			<div class="particle-fire"></div>
-		</div>
-
-		<div class="fire-bottom">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
-			{/if}
-		</div>
-	</div>
-{/if}
+	{#if burst}
+		<FireEffect holy={phase>=4} burst />
+	{/if}
 
 	<span class="number">{value}</span>
 </div>
diff --git a/src/lib/components/StreakCounter.svelte b/src/lib/components/StreakCounter.svelte
index 8a99435..391b889 100644
--- a/src/lib/components/StreakCounter.svelte
+++ b/src/lib/components/StreakCounter.svelte
@@ -2,37 +2,47 @@
 import { browser } from '$app/environment';
 import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
 import StreakAura from '$lib/components/StreakAura.svelte';
+import { tick, onMount } from 'svelte';
 
+let burst = $state(false);
+let streak = $state<ReturnType<typeof getRosaryStreak> | null>(null);
 
 interface Props {
-	user?: { nickname?: string } | null;
+	streakData?: { length: number; lastPrayed: string | null } | null;
 }
 
-let { user = null }: Props = $props();
+let { streakData = null }: Props = $props();
 
-const streak = browser ? getRosaryStreak() : null;
+// Derive display values: use store when available, fall back to server data for SSR
+let displayLength = $derived(streak?.length ?? streakData?.length ?? 0);
+let prayedToday = $derived(streak?.prayedToday ?? (streakData?.lastPrayed === new Date().toISOString().split('T')[0]));
 
-
-// Sync with server when user is logged in
-$effect(() => {
-	if (browser && streak) {
-		streak.setLoggedIn(!!user?.nickname);
-	}
+// Initialize store on mount (client-side only)
+onMount(() => {
+	streak = getRosaryStreak();
+	streak.initWithServerData(streakData, streakData !== null);
 });
+
+async function pray() {
+	burst = true;
+	await tick();
+	setTimeout(() => burst = false, 700);
+	streak?.recordPrayer();
+}
 </script>
 
 <div class="streak-container">
 	<div class="streak-display">
-		<StreakAura value={streak?.length ?? 0} />
-		<span class="streak-label">Tag{#if streak?.length !== 1}e{/if}</span>
+		<StreakAura value={displayLength} {burst} />
+		<span class="streak-label">Tag{#if displayLength !== 1}e{/if}</span>
 	</div>
 	<button
 		class="streak-button"
-		onclick={() => streak?.recordPrayer()}
-		disabled={streak?.prayedToday}
+		onclick={pray}
+  		disabled={prayedToday}
 		aria-label="Gebet als gebetet markieren"
 	>
-		{#if streak?.prayedToday}
+		{#if prayedToday}
 			Heute gebetet
 		{:else}
 			Gebetet
diff --git a/src/lib/stores/rosaryStreak.svelte.ts b/src/lib/stores/rosaryStreak.svelte.ts
index 3754a40..b73622d 100644
--- a/src/lib/stores/rosaryStreak.svelte.ts
+++ b/src/lib/stores/rosaryStreak.svelte.ts
@@ -36,18 +36,6 @@ function saveToStorage(data: StreakData): void {
 	localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
 }
 
-async function fetchFromServer(): Promise<StreakData | null> {
-	try {
-		const res = await fetch('/api/glaube/rosary-streak');
-		if (res.ok) {
-			return await res.json();
-		}
-	} catch {
-		// Server unavailable, return null
-	}
-	return null;
-}
-
 async function saveToServer(data: StreakData): Promise<boolean> {
 	try {
 		const res = await fetch('/api/glaube/rosary-streak', {
@@ -77,6 +65,13 @@ function mergeStreakData(local: StreakData, server: StreakData | null): StreakDa
 	return local.lastPrayed > server.lastPrayed ? local : server;
 }
 
+// Check if running as installed PWA
+function isPWA(): boolean {
+	if (!browser) return false;
+	return window.matchMedia('(display-mode: standalone)').matches ||
+		(window.navigator as Navigator & { standalone?: boolean }).standalone === true;
+}
+
 class RosaryStreakStore {
 	#length = $state(0);
 	#lastPrayed = $state<string | null>(null);
@@ -84,15 +79,18 @@ class RosaryStreakStore {
 	#initialized = false;
 	#syncing = $state(false);
 	#pendingSync = false; // Track if we have unsynced changes
+	#hasSyncedOnce = false; // Track if initial sync has completed
+	#isOffline = $state(false);
+	#reconnectInterval: ReturnType<typeof setInterval> | null = null;
 
 	constructor() {
 		if (browser) {
-			this.#init();
-			this.#setupOnlineListener();
+			this.#initFromStorage();
+			this.#setupNetworkListeners();
 		}
 	}
 
-	#init() {
+	#initFromStorage() {
 		if (this.#initialized) return;
 		const data = loadFromStorage();
 		this.#length = data.length;
@@ -100,12 +98,47 @@ class RosaryStreakStore {
 		this.#initialized = true;
 	}
 
-	#setupOnlineListener() {
+	#setupNetworkListeners() {
+		// Track online/offline status
+		this.#isOffline = !navigator.onLine;
+
 		window.addEventListener('online', () => {
+			this.#isOffline = false;
+			this.#stopReconnectPolling();
+			// Sync pending changes when coming back online
 			if (this.#isLoggedIn && this.#pendingSync) {
-				this.#syncWithServer();
+				this.#pushToServer();
 			}
 		});
+
+		window.addEventListener('offline', () => {
+			this.#isOffline = true;
+			// Only start polling in PWA mode
+			if (isPWA() && this.#isLoggedIn && this.#pendingSync) {
+				this.#startReconnectPolling();
+			}
+		});
+	}
+
+	#startReconnectPolling() {
+		if (this.#reconnectInterval) return;
+		// Poll every 30 seconds to check if we're back online (only in PWA mode when offline)
+		this.#reconnectInterval = setInterval(() => {
+			if (navigator.onLine) {
+				this.#isOffline = false;
+				this.#stopReconnectPolling();
+				if (this.#pendingSync) {
+					this.#pushToServer();
+				}
+			}
+		}, 30000);
+	}
+
+	#stopReconnectPolling() {
+		if (this.#reconnectInterval) {
+			clearInterval(this.#reconnectInterval);
+			this.#reconnectInterval = null;
+		}
 	}
 
 	get length() {
@@ -128,36 +161,41 @@ class RosaryStreakStore {
 		return this.#syncing;
 	}
 
-	// Call this when user session is available
-	async setLoggedIn(loggedIn: boolean): Promise<void> {
-		this.#isLoggedIn = loggedIn;
+	// Initialize with server data (called once on page load)
+	initWithServerData(serverData: StreakData | null, isLoggedIn: boolean): void {
+		if (this.#hasSyncedOnce) return; // Only sync once
 
-		if (loggedIn && browser) {
-			await this.#syncWithServer();
+		this.#isLoggedIn = isLoggedIn;
+
+		if (!isLoggedIn || !serverData) {
+			this.#hasSyncedOnce = true;
+			return;
 		}
+
+		const localData = loadFromStorage();
+		const merged = mergeStreakData(localData, serverData);
+
+		// Update local state
+		this.#length = merged.length;
+		this.#lastPrayed = merged.lastPrayed;
+		saveToStorage(merged);
+
+		// If local had newer data, push to server
+		if (merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
+			this.#pushToServer();
+		}
+
+		this.#hasSyncedOnce = true;
 	}
 
-	async #syncWithServer(): Promise<void> {
-		if (this.#syncing) return;
+	async #pushToServer(): Promise<void> {
+		if (this.#syncing || !this.#isLoggedIn) return;
 		this.#syncing = true;
 
 		try {
-			const serverData = await fetchFromServer();
-			const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
-			const merged = mergeStreakData(localData, serverData);
-
-			// Update local state
-			this.#length = merged.length;
-			this.#lastPrayed = merged.lastPrayed;
-			saveToStorage(merged);
-
-			// If local had newer data, push to server
-			if (!serverData || merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
-				const success = await saveToServer(merged);
-				this.#pendingSync = !success;
-			} else {
-				this.#pendingSync = false;
-			}
+			const data: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
+			const success = await saveToServer(data);
+			this.#pendingSync = !success;
 		} catch {
 			this.#pendingSync = true;
 		} finally {
@@ -193,6 +231,11 @@ class RosaryStreakStore {
 		if (this.#isLoggedIn) {
 			const success = await saveToServer(data);
 			this.#pendingSync = !success;
+
+			// Start polling if offline in PWA mode
+			if (!success && this.#isOffline && isPWA()) {
+				this.#startReconnectPolling();
+			}
 		}
 	}
 }
diff --git a/src/routes/glaube/rosenkranz/+page.server.ts b/src/routes/glaube/rosenkranz/+page.server.ts
index 1032c01..a92799c 100644
--- a/src/routes/glaube/rosenkranz/+page.server.ts
+++ b/src/routes/glaube/rosenkranz/+page.server.ts
@@ -4,6 +4,11 @@ import type { PageServerLoad } from './$types';
 // TODO: allow prerendering/fetching of bible verses at compile time while keeping the rest dynamic.
 // export const prerender = true; # breaks user logged-in state
 
+interface StreakData {
+  length: number;
+  lastPrayed: string | null;
+}
+
 async function fetchBibleData(reference: string, fetch: typeof globalThis.fetch): Promise<{ text: string; verseData: VerseData | null }> {
   try {
     const response = await fetch(`/api/glaube/bibel/${encodeURIComponent(reference)}`);
@@ -33,7 +38,9 @@ async function fetchBibleData(reference: string, fetch: typeof globalThis.fetch)
   }
 }
 
-export const load: PageServerLoad = async ({ fetch }) => {
+export const load: PageServerLoad = async ({ fetch, locals }) => {
+  const session = await locals.auth();
+
   // Fetch Bible texts for all mysteries at build time
   const mysteryDescriptions: Record<string, MysteryDescription[]> = {
     lichtreichen: [],
@@ -59,7 +66,21 @@ export const load: PageServerLoad = async ({ fetch }) => {
     mysteryDescriptions[mysteryType] = descriptions;
   }
 
+  // Fetch streak data for logged-in users via API route
+  let streakData: StreakData | null = null;
+  if (session?.user?.nickname) {
+    try {
+      const res = await fetch('/api/glaube/rosary-streak');
+      if (res.ok) {
+        streakData = await res.json();
+      }
+    } catch {
+      // Server unavailable, client will use localStorage
+    }
+  }
+
   return {
-    mysteryDescriptions
+    mysteryDescriptions,
+    streakData
   };
 };
diff --git a/src/routes/glaube/rosenkranz/+page.svelte b/src/routes/glaube/rosenkranz/+page.svelte
index 24ac3c1..c774ed0 100644
--- a/src/routes/glaube/rosenkranz/+page.svelte
+++ b/src/routes/glaube/rosenkranz/+page.svelte
@@ -1215,7 +1215,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 
 	<!-- Toggle Controls & Streak Counter -->
 	<div class="controls-row">
-		<StreakCounter user={data.session?.user} />
+		<StreakCounter streakData={data.streakData} />
 		<div class="toggle-controls">
 			<!-- Luminous Mysteries Toggle -->
 			<Toggle