diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index d747e4e..caa52c5 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -104,7 +104,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
 
   return (
     <div 
-      className="flex h-dvh w-screen overflow-clip bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100 animated-hue-bg"
+      className="flex h-dvh w-screen overflow-clip animated-bg-container"
       style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
diff --git a/examples/chat-ui/src/index.css b/examples/chat-ui/src/index.css
index 8eef8e2..647e290 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -11,7 +11,19 @@
   }
 }
 
-.animated-hue-bg {
+.animated-bg-container {
+  position: relative;
+}
+
+.animated-bg-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
   animation: hue-rotate 60s linear infinite;
   animation-delay: var(--random-delay, 0s);
+  z-index: -1;
 }