diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index d4d71c1..9ad8598 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { MessageSquare, Send, Bot, User } from "lucide-react";
+import { Bot, User, Send } from "lucide-react";
 import { useState } from "react";
 
 export default function ChatPage() {
@@ -33,25 +33,26 @@ export default function ChatPage() {
 
         <main className="min-h-screen pt-32 pb-20 flex flex-col items-center px-4 md:px-8">
           <div className="max-w-4xl w-full flex flex-col gap-6">
-            <div className="bg-card/30 backdrop-blur-2xl border border-white/10 rounded-3xl p-8 shadow-2xl flex-grow overflow-y-auto min-h-[500px] flex flex-col gap-4">
+            <div className="relative overflow-hidden bg-white/5 backdrop-blur-3xl border border-white/20 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.12)] flex-grow min-h-[500px] flex flex-col gap-6">
+              <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none" />
               {messages.map((msg, i) => (
-                <div key={i} className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
-                  <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
-                    {msg.role === 'bot' ? <Bot size={20} /> : <User size={20} />}
+                <div key={i} className={`relative flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
+                  <div className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center shrink-0">
+                    {msg.role === 'bot' ? <Bot size={20} className="text-white" /> : <User size={20} className="text-white" />}
                   </div>
-                  <div className={`p-4 rounded-2xl ${msg.role === 'user' ? 'bg-primary-cta text-white' : 'bg-white/5 text-foreground'}`}>
+                  <div className={`p-4 px-6 rounded-2xl backdrop-blur-md border border-white/10 shadow-lg ${msg.role === 'user' ? 'bg-primary-cta text-white' : 'bg-black/20 text-white'}`}>
                     {msg.content}
                   </div>
                 </div>
               ))}
             </div>
             
-            <div className="bg-card/30 backdrop-blur-2xl border border-white/10 rounded-full p-2 flex items-center gap-2">
+            <div className="bg-white/5 backdrop-blur-3xl border border-white/20 rounded-full p-2 flex items-center gap-2 shadow-xl">
               <input 
-                className="flex-grow bg-transparent px-6 py-3 outline-none text-foreground placeholder:text-foreground/50"
+                className="flex-grow bg-transparent px-6 py-4 outline-none text-white placeholder:text-white/40"
                 placeholder="Type your message..."
               />
-              <button className="p-4 rounded-full bg-primary-cta text-white">
+              <button className="p-4 rounded-full bg-primary-cta text-white hover:opacity-90 transition-opacity">
                 <Send size={20} />
               </button>
             </div>