diff --git a/frontend/src/lib/components/chat/ChatMessage.svelte b/frontend/src/lib/components/chat/ChatMessage.svelte
index e7e4a5d..697ee2a 100644
--- a/frontend/src/lib/components/chat/ChatMessage.svelte
+++ b/frontend/src/lib/components/chat/ChatMessage.svelte
@@ -363,11 +363,15 @@
 		{/if}
 		{#if hasSelfDestruct && countdownSeconds > 0}
 			<span class="self-destruct-indicator" title="Self-destructing message">
-				<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-					<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
-					<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
-				</svg>
-				{formatCountdown(countdownSeconds)}
+				{#if countdownSeconds <= 4}
+					<img src="/timer.gif" alt="Timer" class="self-destruct-gif" />
+				{:else}
+					<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+						<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+						<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+					</svg>
+					{formatCountdown(countdownSeconds)}
+				{/if}
 			</span>
 		{/if}
 
@@ -656,6 +660,11 @@
 		animation: pulse 2s ease-in-out infinite;
 	}
 
+	.self-destruct-gif {
+		height: 16px;
+		width: auto;
+	}
+
 	@keyframes pulse {
 		0%, 100% { opacity: 1; }
 		50% { opacity: 0.6; }
diff --git a/frontend/src/routes/[realm]/live/+page.svelte b/frontend/src/routes/[realm]/live/+page.svelte
index 729fdaf..aa197b1 100644
--- a/frontend/src/routes/[realm]/live/+page.svelte
+++ b/frontend/src/routes/[realm]/live/+page.svelte
@@ -1038,6 +1038,15 @@
             position: relative;
             width: 100%;
         }
+
+        .sidebar {
+            height: auto;
+            max-height: none;
+        }
+
+        .chat-section {
+            min-height: 400px;
+        }
     }
 
     /* Stream grid layout for multiple streams - Resizable */
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 9f7ecfc..7ba2c1b 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -6,6 +6,7 @@
     import { goto } from '$app/navigation';
     import * as pgp from '$lib/pgp';
     import GraffitiEditor from '$lib/components/GraffitiEditor.svelte';
+    import { chatWebSocket } from '$lib/chat/chatWebSocket';
     
     let activeTab = 'profile';
     let loading = false;
@@ -753,12 +754,29 @@
             userColor = result.color;
             colorMessage = 'Color updated successfully!';
             showColorPicker = false;
-            
+
             // Refresh the current user data to ensure consistency
             if (currentUser) {
                 currentUser = { ...currentUser, userColor: result.color, colorCode: result.color };
             }
-            
+
+            // Fetch fresh token with updated color and store in localStorage
+            // This ensures chat reconnects with the new color
+            try {
+                const tokenResponse = await fetch('/api/user/token', { credentials: 'include' });
+                if (tokenResponse.ok) {
+                    const tokenData = await tokenResponse.json();
+                    if (tokenData.token) {
+                        localStorage.setItem('token', tokenData.token);
+                    }
+                }
+            } catch (e) {
+                console.error('Failed to refresh token:', e);
+            }
+
+            // Disconnect chat so it reconnects with fresh auth (new color)
+            chatWebSocket.disconnect();
+
             // Clear message after 3 seconds
             setTimeout(() => { colorMessage = ''; }, 3000);
         } else {
diff --git a/frontend/static/timer.gif b/frontend/static/timer.gif
new file mode 100644
index 0000000..8e284b8
Binary files /dev/null and b/frontend/static/timer.gif differ