diff --git a/web/src/App.tsx b/web/src/App.tsx
index 69fb448..4f92371 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -269,16 +269,16 @@ export default function App() {
               <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => {
                 try { const res = await fetch('/api/sounds'); const data = await res.json(); const items = data?.items || []; if (!items.length || !selected) return; const rnd = items[Math.floor(Math.random()*items.length)]; const [guildId, channelId] = selected.split(':'); await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);} catch {}
               }}>Random</button>
-              <button 
-                className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
-                  chaosMode 
-                    ? 'bg-red-600 hover:bg-red-700 text-white' 
-                    : 'bg-gray-700 hover:bg-gray-600 text-white'
-                }`} 
-                onClick={toggleChaosMode}
-              >
-                {chaosMode ? 'CHAOS ON' : 'CHAOS OFF'}
-              </button>
+                             <button 
+                 className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
+                   chaosMode 
+                     ? 'chaos-rainbow text-white' 
+                     : 'bg-gray-700 hover:bg-gray-600 text-white'
+                 }`} 
+                 onClick={toggleChaosMode}
+               >
+                 {chaosMode ? 'CHAOS ON' : 'CHAOS'}
+               </button>
               <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => { if (!selected) return; const [guildId] = selected.split(':'); await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method:'POST' }); }}>Panic</button>
             </div>
           </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index dd346bd..72d18c6 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -309,6 +309,19 @@ body {
   max-width: none;
 }
 
+/* CHAOS Button Regenbogen-Animation */
+.chaos-rainbow {
+  background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
+  background-size: 400% 400%;
+  animation: chaos-rainbow-animation 2s ease-in-out infinite;
+}
+
+@keyframes chaos-rainbow-animation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
 /* Neuer Header-Style basierend auf Google Stitch Design */
 header { 
   display: flex;