diff --git a/web/src/App.tsx b/web/src/App.tsx
index db5dfa7..90bbab5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -345,7 +345,7 @@ export default function App() {
         <header className="flex items-center justify-between p-6">
           <div className="flex items-center">
             <div>
-               <h1 className="text-4xl font-bold">
+               <h1 className="text-4xl font-bold site-title">
                   Jukebox 420
                    {import.meta.env.VITE_BUILD_CHANNEL === 'nightly' && (
                    <div className="text-sm font-normal mt-1 opacity-70">
diff --git a/web/src/styles.css b/web/src/styles.css
index 6928ae6..e904884 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -362,6 +362,20 @@ header h1 {
   color: inherit;
 }
 
+/* Titel-Effekte pro Theme */
+[data-theme="rainbow"] .site-title {
+  background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-size: 400% 400%;
+  animation: chaos-rainbow-animation 2s ease-in-out infinite;
+}
+
+[data-theme="420"] .site-title {
+  color: #22C55E;
+}
+
 /* Nightly Badge Farbe (Fallback) */
 .nightly-badge { color: #ff4d4f; }