diff --git a/.bolt/config.json b/.bolt/config.json
deleted file mode 100644
index 6b6787d..0000000
--- a/.bolt/config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "bolt-vite-react-ts"
-}
diff --git a/.bolt/prompt b/.bolt/prompt
deleted file mode 100644
index ce91b43..0000000
--- a/.bolt/prompt
+++ /dev/null
@@ -1,5 +0,0 @@
-For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
-
-By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
-
-Use icons from lucide-react for logos.
diff --git a/README.md b/README.md
index c1378f6..8714d0d 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 > Professional multilingual AI-first platform with advanced LangChain-based agent orchestration, emotional intelligence, and real-time customer support de-escalation.
 
-[![Built with bolt.new](https://img.shields.io/badge/Built%20with-bolt.new-blue?style=for-the-badge)](https://bolt.new)
 [![Powered by Supabase](https://img.shields.io/badge/Powered%20by-Supabase-green?style=for-the-badge)](https://supabase.com)
 [![LangChain Integration](https://img.shields.io/badge/LangChain-Orchestration-orange?style=for-the-badge)](https://langchain.com)
 [![Hosted on Netlify](https://img.shields.io/badge/Hosted%20on-Netlify-00C7B7?style=for-the-badge)](https://netlify.com)
@@ -375,7 +374,6 @@ We welcome contributions to improve the LangChain AI Agent Orchestration system!
 We're grateful to our amazing sponsors who make this LangChain-powered platform possible:
 
 ### 🥇 **Platinum Sponsors**
-- **[bolt.new](https://bolt.new)** - AI-powered development platform
 - **[Supabase](https://supabase.com)** - Backend infrastructure and conversation memory
 - **[ElevenLabs](https://elevenlabs.io)** - Voice AI and emotion detection
 - **[Tavus](https://tavus.io)** - AI avatar generation and video synthesis
diff --git a/apps/backend-api/package.json b/apps/backend-api/package.json
index d05f04e..7664f61 100644
--- a/apps/backend-api/package.json
+++ b/apps/backend-api/package.json
@@ -37,14 +37,12 @@
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
-    "@types/dotenv": "^8.2.3",
     "@types/express": "^4.17.21",
     "@types/multer": "^1.4.13",
     "@types/node": "^20.8.0",
-    "dotenv-cli": "^7.3.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "tsx": "^4.0.0",
+    "tsx": "^4.20.3",
     "typescript": "^5.2.2"
   }
 }
\ No newline at end of file
diff --git a/apps/web-frontend/package.json b/apps/web-frontend/package.json
index 73bf052..3246b84 100644
--- a/apps/web-frontend/package.json
+++ b/apps/web-frontend/package.json
@@ -44,13 +44,14 @@
     "zustand": "^4.4.0"
   },
   "devDependencies": {
-    "@types/dotenv": "^8.2.3",
     "@types/node": "^20.8.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.1",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.21",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
     "postcss": "^8.5.4",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.2.2",
diff --git a/apps/web-frontend/src/components/AgentCard.tsx b/apps/web-frontend/src/components/AgentCard.tsx
index bf5a95e..1321493 100644
--- a/apps/web-frontend/src/components/AgentCard.tsx
+++ b/apps/web-frontend/src/components/AgentCard.tsx
@@ -22,21 +22,18 @@ const AgentCard: React.FC<AgentCardProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
-      className="relative p-6 bg-white/5 backdrop-blur-md border border-white/10 rounded-xl overflow-hidden group hover:border-white/20 transition-all duration-300"
+      className="relative dashboard-container p-6 group"
     >
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-      
       {/* Content */}
       <div className="relative z-10">
         {/* Icon */}
-        <div className={`w-12 h-12 rounded-xl bg-gradient-to-r ${color} flex items-center justify-center mb-4`}>
+        <div className={`dashboard-icon-container w-12 h-12 rounded-xl bg-gradient-to-r ${color} flex items-center justify-center mb-4`}>
           <Icon className="w-6 h-6 text-white" />
         </div>
         
         {/* Title & Description */}
-        <h3 className="text-xl font-bold text-white mb-2">{name}</h3>
-        <p className="text-gray-400 mb-4">{description}</p>
+        <h3 className="text-xl font-bold text-white mb-2 text-shadow">{name}</h3>
+        <p className="text-gray-300 mb-4">{description}</p>
         
         {/* Capabilities */}
         <div className="space-y-2">
diff --git a/apps/web-frontend/src/components/AgentContact.tsx b/apps/web-frontend/src/components/AgentContact.tsx
index 3e182dd..c1a9fd3 100644
--- a/apps/web-frontend/src/components/AgentContact.tsx
+++ b/apps/web-frontend/src/components/AgentContact.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Send } from 'lucide-react';
+import { Send, User, Mail, Building, MessageSquare } from 'lucide-react';
 
 const AgentContact = () => {
   const [formData, setFormData] = useState({
@@ -25,18 +25,27 @@ const AgentContact = () => {
   };
 
   return (
-    <div className="relative p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden">
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-50"></div>
+    <div className="dashboard-container">
+      {/* Distributed ambient lighting */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none" />
+      <div className="absolute top-4 right-4 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl" />
+      <div className="absolute bottom-4 left-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl" />
       
-      {/* Content */}
       <div className="relative z-10">
-        <h3 className="text-2xl font-bold text-white mb-6">Get in Touch</h3>
+        <div className="flex items-center gap-3 mb-6">
+          <div className="dashboard-icon-container p-3">
+            <MessageSquare className="w-6 h-6 text-white" />
+          </div>
+          <h3 className="text-2xl font-bold text-white">Get in Touch</h3>
+        </div>
         
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Name */}
           <div>
-            <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="name" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <User className="w-4 h-4 text-white" />
+              </div>
               Name
             </label>
             <input
@@ -45,7 +54,7 @@ const AgentContact = () => {
               name="name"
               value={formData.name}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="Your name"
               required
             />
@@ -53,7 +62,10 @@ const AgentContact = () => {
           
           {/* Email */}
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="email" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <Mail className="w-4 h-4 text-white" />
+              </div>
               Email
             </label>
             <input
@@ -62,7 +74,7 @@ const AgentContact = () => {
               name="email"
               value={formData.email}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="your@email.com"
               required
             />
@@ -70,7 +82,10 @@ const AgentContact = () => {
           
           {/* Company */}
           <div>
-            <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="company" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <Building className="w-4 h-4 text-white" />
+              </div>
               Company
             </label>
             <input
@@ -79,14 +94,17 @@ const AgentContact = () => {
               name="company"
               value={formData.company}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="Your company"
             />
           </div>
           
           {/* Message */}
           <div>
-            <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="message" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <MessageSquare className="w-4 h-4 text-white" />
+              </div>
               Message
             </label>
             <textarea
@@ -95,7 +113,7 @@ const AgentContact = () => {
               value={formData.message}
               onChange={handleChange}
               rows={4}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors resize-none"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 resize-none backdrop-blur-sm"
               placeholder="How can we help you?"
               required
             />
@@ -106,10 +124,12 @@ const AgentContact = () => {
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             type="submit"
-            className="w-full px-8 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-lg font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
+            className="group w-full px-8 py-4 border border-white/20 rounded-lg font-semibold bg-black/20 backdrop-blur-sm hover:border-white/30 hover:bg-black/30 transition-all duration-300 flex items-center justify-center gap-3"
           >
-            Send Message
-            <Send className="w-4 h-4" />
+            <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+              <Send className="w-4 h-4 text-white" />
+            </div>
+            <span className="text-white">Send Message</span>
           </motion.button>
         </form>
       </div>
diff --git a/apps/web-frontend/src/components/AgentFAQ.tsx b/apps/web-frontend/src/components/AgentFAQ.tsx
index 63b8874..8ba76e2 100644
--- a/apps/web-frontend/src/components/AgentFAQ.tsx
+++ b/apps/web-frontend/src/components/AgentFAQ.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, HelpCircle } from 'lucide-react';
 
 const AgentFAQ = () => {
   const [openIndex, setOpenIndex] = useState<number | null>(null);
@@ -31,21 +31,37 @@ const AgentFAQ = () => {
   return (
     <div className="space-y-4">
       {faqs.map((faq, index) => (
-        <div
+        <motion.div
           key={index}
-          className="relative bg-white/5 backdrop-blur-md border border-white/10 rounded-xl overflow-hidden"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: index * 0.1 }}
+          className="group relative border border-white/10 rounded-xl bg-black/20 backdrop-blur-sm overflow-hidden hover:border-white/20 transition-all duration-300"
         >
+          {/* Background gradient on hover */}
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          
           {/* Question */}
           <button
             onClick={() => setOpenIndex(openIndex === index ? null : index)}
-            className="w-full p-6 text-left flex items-center justify-between"
+            className="relative z-10 w-full p-6 text-left flex items-center gap-4"
           >
-            <span className="text-lg font-semibold text-white">{faq.question}</span>
-            <ChevronDown
-              className={`w-5 h-5 text-gray-400 transition-transform duration-300 ${
-                openIndex === index ? 'transform rotate-180' : ''
-              }`}
-            />
+            {/* Icon */}
+            <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+              <HelpCircle className="w-5 h-5 text-white" />
+            </div>
+            
+            {/* Content */}
+            <div className="flex-1 flex items-center justify-between">
+              <span className="text-lg font-semibold text-white">{faq.question}</span>
+              <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+                <ChevronDown
+                  className={`w-4 h-4 text-white transition-transform duration-300 ${
+                    openIndex === index ? 'transform rotate-180' : ''
+                  }`}
+                />
+              </div>
+            </div>
           </button>
           
           {/* Answer */}
@@ -56,15 +72,15 @@ const AgentFAQ = () => {
                 animate={{ height: 'auto', opacity: 1 }}
                 exit={{ height: 0, opacity: 0 }}
                 transition={{ duration: 0.3 }}
-                className="overflow-hidden"
+                className="relative z-10 overflow-hidden"
               >
-                <div className="p-6 pt-0 text-gray-300">
+                <div className="px-6 pb-6 text-gray-300 ml-16">
                   {faq.answer}
                 </div>
               </motion.div>
             )}
           </AnimatePresence>
-        </div>
+        </motion.div>
       ))}
     </div>
   );
diff --git a/apps/web-frontend/src/components/DashboardPreview.tsx b/apps/web-frontend/src/components/DashboardPreview.tsx
index 47a3ff2..50b569d 100644
--- a/apps/web-frontend/src/components/DashboardPreview.tsx
+++ b/apps/web-frontend/src/components/DashboardPreview.tsx
@@ -1,13 +1,8 @@
-import React from 'react';
-import { motion } from 'framer-motion';
 import { Bot, MessageSquare, Zap, Shield } from 'lucide-react';
 
 const DashboardPreview = () => {
   return (
-    <div className="relative p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden">
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-50"></div>
-      
+    <div className="relative p-8 border-2 border-gray-600/30 rounded-2xl overflow-hidden hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10">
       {/* Content */}
       <div className="relative z-10">
         <h3 className="text-2xl font-bold text-white mb-6">Dashboard Preview</h3>
@@ -22,10 +17,12 @@ const DashboardPreview = () => {
           ].map((stat, index) => (
             <div
               key={index}
-              className="p-4 bg-white/5 rounded-xl border border-white/10"
+              className="p-4 border-2 border-gray-600/30 rounded-xl hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300"
             >
               <div className="flex items-center gap-3 mb-2">
-                <stat.icon className="w-5 h-5 text-purple-400" />
+                <div className="border-2 border-purple-500/30 rounded-lg p-1">
+                  <stat.icon className="w-5 h-5 text-purple-400" />
+                </div>
                 <span className="text-gray-400 text-sm">{stat.label}</span>
               </div>
               <div className="text-2xl font-bold text-white">{stat.value}</div>
@@ -58,7 +55,7 @@ const DashboardPreview = () => {
           ].map((activity, index) => (
             <div
               key={index}
-              className="p-4 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between"
+              className="p-4 border-2 border-gray-600/30 rounded-xl hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 flex items-center justify-between"
             >
               <div className="flex items-center gap-3">
                 <div className={`w-2 h-2 rounded-full ${
diff --git a/apps/web-frontend/src/components/demo/AgentFlowchart.tsx b/apps/web-frontend/src/components/demo/AgentFlowchart.tsx
index 10ce30e..a8b9350 100644
--- a/apps/web-frontend/src/components/demo/AgentFlowchart.tsx
+++ b/apps/web-frontend/src/components/demo/AgentFlowchart.tsx
@@ -1,75 +1,90 @@
 import React from 'react';
-import { Box, Typography, Paper } from '@mui/material';
-import { ArrowForward } from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { ArrowDown, Brain, MessageSquare, Zap, Video } from 'lucide-react';
 
 const AgentFlowchart: React.FC = () => {
   const steps = [
     {
       title: 'Input Processing',
       description: 'Analyzing voice and video input for emotion and intent',
+      icon: Brain,
+      gradient: 'from-purple-500/20 to-blue-500/20'
     },
     {
       title: 'Context Analysis',
       description: 'Evaluating conversation history and user preferences',
+      icon: MessageSquare,
+      gradient: 'from-blue-500/20 to-cyan-500/20'
     },
     {
       title: 'Response Generation',
       description: 'Creating appropriate video response based on analysis',
+      icon: Zap,
+      gradient: 'from-cyan-500/20 to-green-500/20'
     },
     {
       title: 'Delivery',
       description: 'Presenting response through video interface',
+      icon: Video,
+      gradient: 'from-green-500/20 to-emerald-500/20'
     },
   ];
 
   return (
-    <Paper 
-      elevation={0}
-      sx={{ 
-        p: 3,
-        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-        backdropFilter: 'blur(10px)',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
-        borderRadius: 2,
-      }}
-    >
-      <Typography variant="h6" gutterBottom sx={{ color: 'white' }}>
-        Agent Decision Flow
-      </Typography>
+    <div className="dashboard-container">
+      {/* Distributed ambient lighting */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none" />
+      <div className="absolute top-4 left-4 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl" />
+      <div className="absolute bottom-4 right-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl" />
+      
+      <div className="relative z-10">
+        <h3 className="text-xl font-bold text-white mb-6">Agent Decision Flow</h3>
 
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-        {steps.map((step, index) => (
-          <React.Fragment key={step.title}>
-            <Paper
-              elevation={0}
-              sx={{
-                p: 3,
-                backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                border: '1px solid rgba(255, 255, 255, 0.1)',
-                borderRadius: 2,
-                transition: 'all 0.2s ease-in-out',
-                '&:hover': {
-                  backgroundColor: 'rgba(255, 255, 255, 0.08)',
-                  transform: 'translateY(-2px)',
-                },
-              }}
-            >
-              <Typography variant="subtitle1" fontWeight="bold" sx={{ color: 'white' }}>
-                {step.title}
-              </Typography>
-              <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
-                {step.description}
-              </Typography>
-            </Paper>
-            {index < steps.length - 1 && (
-              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                <ArrowForward sx={{ color: 'rgba(255, 255, 255, 0.5)' }} />
-              </Box>
-            )}
-          </React.Fragment>
-        ))}
-      </Box>
-    </Paper>
+        <div className="space-y-6">
+          {steps.map((step, index) => {
+            const IconComponent = step.icon;
+            
+            return (
+              <React.Fragment key={step.title}>
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                  className="group relative"
+                >
+                  {/* Background gradient */}
+                  <div className={`absolute inset-0 bg-gradient-to-r ${step.gradient} rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
+                  
+                  {/* Content container */}
+                  <div className="relative p-6 border border-white/10 rounded-xl bg-black/20 backdrop-blur-sm group-hover:border-white/20 transition-all duration-300 group-hover:-translate-y-1">
+                    <div className="flex items-start gap-4">
+                      {/* Icon */}
+                      <div className="dashboard-icon-container p-3 group-hover:border-white/30">
+                        <IconComponent className="w-6 h-6 text-white" />
+                      </div>
+                      
+                      {/* Content */}
+                      <div className="flex-1">
+                        <h4 className="text-lg font-semibold text-white mb-2">{step.title}</h4>
+                        <p className="text-gray-300 text-sm leading-relaxed">{step.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+                
+                {index < steps.length - 1 && (
+                  <div className="flex justify-center py-2">
+                    <div className="dashboard-icon-container p-2">
+                      <ArrowDown className="w-4 h-4 text-white/50" />
+                    </div>
+                  </div>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/web-frontend/src/components/demo/SoundWaves.tsx b/apps/web-frontend/src/components/demo/SoundWaves.tsx
new file mode 100644
index 0000000..bff03ff
--- /dev/null
+++ b/apps/web-frontend/src/components/demo/SoundWaves.tsx
@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+
+interface SoundWavesProps {
+  isActive?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+  className?: string;
+}
+
+const SoundWaves: React.FC<SoundWavesProps> = ({ 
+  isActive = false, 
+  size = 'md',
+  color = 'text-green-500',
+  className = ''
+}) => {
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16'
+  };
+
+  const barHeights = {
+    sm: ['h-2', 'h-3', 'h-4', 'h-3', 'h-2'],
+    md: ['h-3', 'h-6', 'h-8', 'h-6', 'h-3'],
+    lg: ['h-4', 'h-8', 'h-12', 'h-8', 'h-4']
+  };
+
+  // Simplified animation for better performance
+  const barAnimation = {
+    scale: isActive ? [1, 1.3, 0.9, 1.1, 1] : [1],
+    opacity: isActive ? [0.6, 1, 0.8, 1, 0.7] : [0.4]
+  };
+
+  return (
+    <div className={`${sizeClasses[size]} ${className} flex items-center justify-center gap-0.5`}>
+      {barHeights[size].map((height, index) => (
+        <motion.div
+          key={index}
+          className={`w-1 ${height} ${color} bg-current rounded-full`}
+          animate={barAnimation}
+          transition={{
+            duration: 0.5,
+            repeat: isActive ? Infinity : 0,
+            repeatType: "reverse",
+            delay: index * 0.08,
+            ease: "easeInOut"
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default SoundWaves;
diff --git a/apps/web-frontend/src/components/demo/VoiceChat.tsx b/apps/web-frontend/src/components/demo/VoiceChat.tsx
index 37e06f7..d4df7ac 100644
--- a/apps/web-frontend/src/components/demo/VoiceChat.tsx
+++ b/apps/web-frontend/src/components/demo/VoiceChat.tsx
@@ -1,4 +1,5 @@
-import { Mic, MicOff, Volume2, VolumeX, Sparkles, Loader2, Square } from "lucide-react";
+import { Mic, Volume2, VolumeX, Sparkles, Loader2, Square } from "lucide-react";
+import SoundWaves from './SoundWaves';
 import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import axios from 'axios';
@@ -25,26 +26,70 @@ interface Particle {
   velocity: { x: number; y: number };
 }
 
-// Model toggle: switch between v2 and v3
-const ELEVENLABS_MODEL_ID = 'eleven_multilingual_v2'; // or 'eleven_v3' if available
+interface ConversationContext {
+  messages: Array<{ role: 'user' | 'assistant'; content: string; timestamp: number; emotion?: string }>;
+  customerProfile: {
+    name: string;
+    tier: string;
+    previousIssues: string[];
+    mood: string;
+  };
+  sessionStartTime: number;
+  interruptionCount: number;
+}
+
+// Enhanced voice activity detection thresholds
+const VAD_CONFIG = {
+  silenceThreshold: 0.01,        // Lower threshold for better sensitivity
+  speechThreshold: 0.03,         // Threshold to detect speech start
+  silenceDuration: 1000,         // Shorter silence duration for faster response
+  maxListeningDuration: 8000,    // Max continuous listening time
+  interruptionThreshold: 0.05,   // Threshold for interruption detection
+  vadSensitivity: 0.8,           // VAD sensitivity (0-1)
+};
 
-// Use the backend API port for Socket.IO (default: 3002)
-const SOCKET_IO_URL = 'http://localhost:3002'; // TODO: use env var for prod
+// Model toggle: Use the fastest ElevenLabs model for maximum responsiveness
+const ELEVENLABS_MODEL_ID = 'eleven_flash_v2_5'; // Flash v2.5: Best for maximum responsiveness (~75ms latency)
+const SOCKET_IO_URL = 'http://localhost:3002';
+const isDevelopment = process.env.NODE_ENV === 'development';
 
-console.log(`[VoiceChat] Using ElevenLabs model: ${ELEVENLABS_MODEL_ID}`);
+/*
+ * MAXIMUM RESPONSIVENESS OPTIMIZATIONS:
+ * - Flash v2.5 model: ~75ms TTS latency (fastest available)
+ * - Ultra-fast API timeouts (STT: 5s, Agent: 6s, TTS: 3s)
+ * - Fastest error recovery (1-1.5s instead of 2-3s)
+ * - Reduced conversation context (2 messages vs 3)
+ * - Concise response mode with token limits
+ * - Optimized particle animation (every 3rd frame)
+ * - Production-optimized logging
+ * - Instant listening resume (300ms vs 500ms)
+ * - Maximum streaming latency optimization (level 4)
+ * - Lower quality audio format for speed (22kHz vs 44kHz)
+ * - Optimized voice settings for Flash model
+ */
+
+// Optimized logging for production performance
+const debugLog = (message: string, ...args: any[]) => {
+  if (isDevelopment) {
+    console.log(message, ...args);
+  }
+};
+
+debugLog(`[VoiceChat] Using enhanced ElevenLabs model: ${ELEVENLABS_MODEL_ID}`);
+debugLog(`[VoiceChat] VAD Configuration:`, VAD_CONFIG);
 
 export function VoiceChat({
   onStart,
   onStop,
   onVolumeChange,
   className,
-  demoMode,
   disabled = false,
   onLiveEmotion
 }: VoiceChatProps) {
   const [isListening, setIsListening] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isSpeaking, setIsSpeaking] = useState(false);
+  const [canInterrupt, setCanInterrupt] = useState(false);
   const [volume, setVolume] = useState(0);
   const [duration, setDuration] = useState(0);
   const [particles, setParticles] = useState<Particle[]>([]);
@@ -59,15 +104,33 @@ export function VoiceChat({
   const [conversationStarted, setConversationStarted] = useState(false);
   const [isIntroPlaying, setIsIntroPlaying] = useState(false);
   const cancelled = useRef(false);
-  const [sessionId, setSessionId] = useState<string>(() => uuidv4());
+  const sessionId = useRef<string>(uuidv4());
   const socketRef = useRef<Socket | null>(null);
   const [liveTranscript, setLiveTranscript] = useState<string>('');
   const [liveAgentResponse, setLiveAgentResponse] = useState<string>('');
   const silenceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
   const analyserRef = useRef<AnalyserNode | null>(null);
-  const silenceThreshold = 0.05; // Increased for more sensitivity
-  const silenceDuration = 1500; // ms
+  const vadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const maxListeningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Enhanced conversation context
+  const conversationContext = useRef<ConversationContext>({
+    messages: [],
+    customerProfile: {
+      name: 'Customer',
+      tier: 'Premium',
+      previousIssues: [],
+      mood: 'neutral'
+    },
+    sessionStartTime: Date.now(),
+    interruptionCount: 0
+  });
+
+  // Voice Activity Detection state
+  const [vadState, setVadState] = useState<'silence' | 'speech' | 'uncertain'>('silence');
+  const [isStreamingResponse, setIsStreamingResponse] = useState(false);
+  const lastVadUpdate = useRef<number>(Date.now());
 
   // Generate particles for ambient effect
   useEffect(() => {
@@ -92,15 +155,20 @@ export function VoiceChat({
     generateParticles();
   }, []);
 
-  // Animate particles
+  // Animate particles - optimized for performance
   useEffect(() => {
+    let frameCount = 0;
     const animateParticles = () => {
-      setParticles(prev => prev.map(particle => ({
-        ...particle,
-        x: (particle.x + particle.velocity.x + 400) % 400,
-        y: (particle.y + particle.velocity.y + 400) % 400,
-        opacity: particle.opacity + (Math.random() - 0.5) * 0.02
-      })));
+      // Reduce particle update frequency for better performance
+      frameCount++;
+      if (frameCount % 3 === 0) { // Update every 3rd frame instead of every frame
+        setParticles(prev => prev.map(particle => ({
+          ...particle,
+          x: (particle.x + particle.velocity.x + 400) % 400,
+          y: (particle.y + particle.velocity.y + 400) % 400,
+          opacity: particle.opacity + (Math.random() - 0.5) * 0.02
+        })));
+      }
       animationRef.current = requestAnimationFrame(animateParticles);
     };
 
@@ -149,18 +217,18 @@ export function VoiceChat({
     const socket = io(SOCKET_IO_URL, { transports: ['websocket'] });
     socketRef.current = socket;
     socket.on('connect', () => {
-      console.log('[VoiceChat] Socket.IO connected:', socket.id);
-      socket.emit('join_session', sessionId);
+      debugLog('[VoiceChat] Enhanced Socket.IO connected:', socket.id);
+      socket.emit('join_session', sessionId.current);
     });
     socket.on('emotion_update', (data) => {
-      console.log('[VoiceChat] Live emotion_update:', data);
+      debugLog('[VoiceChat] Live emotion_update:', data);
       if (data.emotions && data.emotions.emotion) {
         setEmotion(data.emotions.emotion);
         if (typeof onLiveEmotion === 'function') onLiveEmotion(data.emotions.emotion);
       }
     });
     socket.on('voice_processed', (data) => {
-      console.log('[VoiceChat] Live voice_processed:', data);
+      debugLog('[VoiceChat] Live voice_processed:', data);
       if (data.transcript) setLiveTranscript(data.transcript);
       if (data.emotions && data.emotions.emotion) {
         setEmotion(data.emotions.emotion);
@@ -168,15 +236,15 @@ export function VoiceChat({
       }
     });
     socket.on('agent_response', (data) => {
-      console.log('[VoiceChat] Live agent_response:', data);
+      debugLog('[VoiceChat] Live agent_response:', data);
       if (data.text) setLiveAgentResponse(data.text);
     });
     return () => {
       socket.disconnect();
     };
-  }, [sessionId, onLiveEmotion]);
+  }, [onLiveEmotion]);
 
-  // Start recording
+  // Enhanced start recording with VAD
   const startListening = async () => {
     if (disabled) return;
     cancelled.current = false;
@@ -184,27 +252,47 @@ export function VoiceChat({
     setIsListening(true);
     setDuration(0);
     setEmotion(null);
+    setVadState('silence');
+    
     try {
-      console.log('[VoiceChat] Requesting microphone access...');
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const mediaRecorder = new window.MediaRecorder(stream);
+      debugLog('[VoiceChat] Starting enhanced recording with VAD...');
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+          sampleRate: 16000
+        }
+      });
+      
+      const mediaRecorder = new window.MediaRecorder(stream, {
+        mimeType: 'audio/webm;codecs=opus'
+      });
       mediaRecorderRef.current = mediaRecorder;
       audioChunksRef.current = [];
+
       mediaRecorder.ondataavailable = (e) => {
         if (e.data.size > 0) audioChunksRef.current.push(e.data);
       };
       mediaRecorder.onstop = handleStopRecording;
-      mediaRecorder.start();
-      // --- Silence detection ---
+      mediaRecorder.start(100); // Collect data every 100ms for better responsiveness
+
+      // Enhanced Voice Activity Detection
       audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
       analyserRef.current = audioContextRef.current.createAnalyser();
       const source = audioContextRef.current.createMediaStreamSource(stream);
+      
       analyserRef.current.fftSize = 2048;
+      analyserRef.current.smoothingTimeConstant = 0.8;
       source.connect(analyserRef.current);
+      
       const dataArray = new Uint8Array(analyserRef.current.fftSize);
       let silenceStart: number | null = null;
-      const checkSilence = () => {
-        if (!analyserRef.current) return;
+      let speechDetected = false;
+
+      const enhancedVADCheck = () => {
+        if (!analyserRef.current || cancelled.current) return;
+        
         analyserRef.current.getByteTimeDomainData(dataArray);
         let sum = 0;
         for (let i = 0; i < dataArray.length; i++) {
@@ -212,23 +300,52 @@ export function VoiceChat({
           sum += val * val;
         }
         const rms = Math.sqrt(sum / dataArray.length);
-        console.log('[VoiceChat] RMS volume:', rms);
-        if (rms < silenceThreshold) {
-          if (silenceStart === null) silenceStart = Date.now();
-          if (Date.now() - silenceStart > silenceDuration) {
-            console.log('[VoiceChat] Silence detected, auto-stopping...');
+        
+        // Update volume visualization
+        setVolume(rms * 100);
+        onVolumeChange?.(rms * 100);
+        
+        console.log('[Enhanced-VAD] RMS:', rms.toFixed(4), 'State:', rms > VAD_CONFIG.speechThreshold ? 'SPEECH' : rms < VAD_CONFIG.silenceThreshold ? 'SILENCE' : 'UNCERTAIN');
+        
+        // Detect speech start
+        if (rms > VAD_CONFIG.speechThreshold) {
+          speechDetected = true;
+          silenceStart = null;
+          setVadState('speech');
+        } 
+        // Detect silence only after speech was detected
+        else if (rms < VAD_CONFIG.silenceThreshold && speechDetected) {
+          if (silenceStart === null) {
+            silenceStart = Date.now();
+            setVadState('silence');
+          }
+          
+          // Auto-stop after silence duration
+          if (Date.now() - silenceStart > VAD_CONFIG.silenceDuration) {
+            console.log('[Enhanced-VAD] Silence detected after speech, auto-stopping...');
             stopListening();
             return;
           }
         } else {
-          silenceStart = null;
+          setVadState('uncertain');
+        }
+
+        // Max listening duration safety
+        if (Date.now() - lastVadUpdate.current > VAD_CONFIG.maxListeningDuration) {
+          console.log('[Enhanced-VAD] Max listening duration reached, auto-stopping...');
+          stopListening();
+          return;
         }
-        silenceTimeoutRef.current = setTimeout(checkSilence, 100);
+
+        vadTimeoutRef.current = setTimeout(enhancedVADCheck, 50); // Check every 50ms for responsiveness
       };
-      checkSilence();
-      // --- End silence detection ---
-      console.log('[VoiceChat] Recording started.');
+
+      lastVadUpdate.current = Date.now();
+      enhancedVADCheck();
+
+      console.log('[VoiceChat] Enhanced recording started with VAD.');
       onStart?.();
+      
     } catch (err) {
       setError('Microphone access denied. Please enable it in your browser settings.');
       setIsListening(false);
@@ -236,128 +353,375 @@ export function VoiceChat({
     }
   };
 
-  // Handle stop recording (user finishes speaking, agent responds, then listen again)
+  // Enhanced stop recording with contextual responses
   const handleStopRecording = async (): Promise<void> => {
     setIsProcessing(true);
     setIsListening(false);
+    setVadState('silence');
+    
     if (cancelled.current) return;
-    console.log('[VoiceChat] Recording stopped. Sending audio to STT...');
+    
+    console.log('[VoiceChat] Enhanced recording stopped. Processing with context...');
     const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
+    
     try {
+      // Speech-to-text with enhanced error handling
       const sttForm = new FormData();
       sttForm.append('audio', audioBlob, 'audio.webm');
+      sttForm.append('model', ELEVENLABS_MODEL_ID);
+      sttForm.append('language', 'auto'); // Auto-detect language
+      
+      console.log('[VoiceChat] Sending audio to enhanced STT...');
       const sttRes = await axios.post('/api/elevenlabs/stt', sttForm, {
-        headers: { 'Content-Type': 'multipart/form-data' }
+        headers: { 'Content-Type': 'multipart/form-data' },
+        timeout: 5000 // Reduced from 10s to 5s for faster response
       });
+
       if (cancelled.current) {
         setIsProcessing(false);
         setError('Voice flow interrupted.');
         return;
       }
+
       const transcript = sttRes.data.transcript || sttRes.data.text;
-      const agentRes = await axios.post('/api/emotional-os', { message: transcript });
+      if (!transcript || transcript.trim().length === 0) {
+        console.log('[VoiceChat] Empty transcript, asking user to repeat...');
+        setError('I didn\'t catch that. Could you please repeat?');
+        setIsProcessing(false);
+        setTimeout(() => {
+          setError(null);
+          if (!cancelled.current) startListening();
+        }, 1000); // Reduced from 2s to 1s for faster retry
+        return;
+      }
+
+      console.log('[VoiceChat] Transcript:', transcript);
+      setLiveTranscript(transcript);
+
+      // Generate contextual prompt with conversation history
+      const contextualPrompt = {
+        message: transcript,
+        context: {
+          isFirstMessage: conversationContext.current.messages.length === 0,
+          messageCount: conversationContext.current.messages.length,
+          wasInterrupted: conversationContext.current.interruptionCount > 0,
+          customerMood: emotion || 'neutral',
+          previousMessages: conversationContext.current.messages.slice(-2), // Reduced from 3 to 2 for faster processing
+          sessionDuration: Math.floor((Date.now() - conversationContext.current.sessionStartTime) / 1000)
+        },
+        personality: {
+          style: 'conversational_friendly',
+          empathy: 'high',
+          interruption_handling: conversationContext.current.interruptionCount > 0 ? 'acknowledge_interruption' : 'normal',
+          response_length: 'concise', // Changed from 'concise_but_helpful' to 'concise' for faster responses
+          tone: 'professional_warm'
+        },
+        optimization: {
+          fast_mode: true, // Enable fast response mode
+          max_tokens: 100 // Limit response length for speed
+        }
+      };
+
+      console.log('[VoiceChat] Sending contextual request to emotional-os...');
+      const agentRes = await axios.post('/api/emotional-os', contextualPrompt, {
+        timeout: 6000 // Reduced to 6s for maximum conversation flow
+      });
+
       if (cancelled.current) {
         setIsProcessing(false);
         setError('Voice flow interrupted.');
         return;
       }
+
       const agentText = agentRes.data.reply || agentRes.data.response;
       if (!agentText) {
-        setError('No response from AI agent. Please try again or check backend connection.');
+        setError('I apologize, I\'m having trouble responding right now. Please try again.');
         setIsProcessing(false);
-        setIsSpeaking(false);
+        setTimeout(() => {
+          setError(null);
+          if (!cancelled.current) startListening();
+        }, 1000); // Reduced from 2s to 1s
         return;
       }
+
+      // Update conversation context
+      conversationContext.current.messages.push(
+        { role: 'user', content: transcript, timestamp: Date.now(), emotion: emotion || undefined },
+        { role: 'assistant', content: agentText, timestamp: Date.now() }
+      );
+
+      console.log('[VoiceChat] Agent response:', agentText);
       setEmotion(agentRes.data.emotion || null);
+      setLiveAgentResponse(agentText);
+
+      // Enhanced TTS with Flash v2.5 - optimized for maximum speed
+      const enhancedTTSParams = {
+        text: agentText,
+        model_id: ELEVENLABS_MODEL_ID,
+        voice_settings: {
+          stability: 0.75, // Optimized for Flash model
+          similarity_boost: 0.80, // Balanced for speed
+          style: 0.4, // Reduced for faster generation on Flash
+          use_speaker_boost: true
+        },
+        // Optimize for Flash v2.5 speed
+        optimize_streaming_latency: 4, // Maximum speed optimization for Flash
+        output_format: "mp3_22050_32", // Lower quality but faster for Flash model
+        emotion_context: {
+          customer_emotion: emotion || 'neutral',
+          response_type: 'supportive',
+          urgency: 'normal'
+        }
+      };
+
+      console.log('[VoiceChat] Generating Flash TTS for maximum speed...');
+      // Set processing to false early to show responsiveness
+      setIsProcessing(false);
       
-      // Since our agent is now casual and human-like, we don't need formal emotion cues
-      // Just use the agent's natural response directly
-      const ttsText = agentText;
-      
-      // Get voice configuration from backend
-      const voiceParams = await voiceConfigService.getTTSParams(ttsText);
-      const ttsRes = await axios.post('/api/elevenlabs/tts', voiceParams, { responseType: 'blob' });
+      const ttsRes = await axios.post('/api/elevenlabs/tts', enhancedTTSParams, { 
+        responseType: 'blob',
+        timeout: 3000 // Reduced to 3s for Flash model's ultra-fast response
+      });
+
       if (cancelled.current) {
         setIsProcessing(false);
         setIsSpeaking(false);
         setError('Voice flow interrupted.');
         return;
       }
+
       const audioUrl = URL.createObjectURL(ttsRes.data);
       if (audioRef.current) {
         audioRef.current.src = audioUrl;
-        audioRef.current.play();
         setIsSpeaking(true);
+        setCanInterrupt(true); // Allow interruption during speech
+        setIsStreamingResponse(true);
+        
+        // Start monitoring for interruptions
+        startInterruptionMonitoring();
+
+        audioRef.current.play();
         audioRef.current.onended = () => {
           setIsSpeaking(false);
+          setCanInterrupt(false);
+          setIsStreamingResponse(false);
+          
           if (cancelled.current) return;
-          setTimeout(() => startListening(), 500);
+          
+          // Resume listening after a brief pause
+          setTimeout(() => {
+            if (!cancelled.current) startListening();
+          }, 300); // Reduced from 500ms to 300ms for faster response
         };
-        audioRef.current.onerror = (e) => {
+
+        audioRef.current.onerror = () => {
           setIsSpeaking(false);
+          setCanInterrupt(false);
+          setIsStreamingResponse(false);
+          
           if (cancelled.current) return;
-          setTimeout(() => startListening(), 500);
+          
+          // Resume listening even if audio fails
+          setTimeout(() => {
+            if (!cancelled.current) startListening();
+          }, 300); // Reduced from 500ms to 300ms
         };
       }
+
     } catch (err: any) {
+      console.error('[VoiceChat] Error in enhanced voice chat flow:', err);
+      
       if (cancelled.current) {
         setError('Voice flow interrupted.');
       } else {
-        setError('Error in voice chat flow.');
+        // More specific error messages
+        if (err.code === 'ECONNABORTED' || err.message.includes('timeout')) {
+          setError('Connection timeout. Please check your internet and try again.');
+        } else if (err.response?.status === 429) {
+          setError('Service temporarily busy. Please wait a moment and try again.');
+        } else {
+          setError('I apologize for the technical difficulty. Let me try again.');
+        }
       }
+      
       setIsProcessing(false);
       setIsSpeaking(false);
-      console.error('[VoiceChat] Error in voice chat flow:', err);
+      
+      // Auto-retry after error
+      setTimeout(() => {
+        setError(null);
+        if (!cancelled.current) startListening();
+      }, 1500); // Reduced from 3s to 1.5s for faster recovery
     } finally {
       setIsProcessing(false);
     }
   };
 
-  // Stop recording and process
+  // Enhanced stop listening with cleanup
   const stopListening = () => {
     setIsListening(false);
     setIsProcessing(true);
+    setVadState('silence');
+    
     if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
       mediaRecorderRef.current.stop();
     }
+    
+    // Clean up audio context and timers
     if (audioContextRef.current) {
       audioContextRef.current.close();
       audioContextRef.current = null;
     }
+    
+    if (vadTimeoutRef.current) {
+      clearTimeout(vadTimeoutRef.current);
+      vadTimeoutRef.current = null;
+    }
+    
     if (silenceTimeoutRef.current) {
       clearTimeout(silenceTimeoutRef.current);
       silenceTimeoutRef.current = null;
     }
+    
+    if (maxListeningTimeoutRef.current) {
+      clearTimeout(maxListeningTimeoutRef.current);
+      maxListeningTimeoutRef.current = null;
+    }
+    
     onStop?.(duration);
     setDuration(0);
   };
 
-  // Force stop everything (for stop button)
+  // Enhanced force stop with interruption handling
   const forceStop = () => {
+    console.log('[VoiceChat] Force stopping all voice activities...');
     cancelled.current = true;
     setIsListening(false);
     setIsProcessing(false);
     setIsSpeaking(false);
+    setCanInterrupt(false);
+    setIsStreamingResponse(false);
     setDuration(0);
+    setVadState('silence');
+    
+    // Stop all recording and audio
     if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
       mediaRecorderRef.current.stop();
     }
+    
     if (audioContextRef.current) {
       audioContextRef.current.close();
       audioContextRef.current = null;
     }
-    if (silenceTimeoutRef.current) {
-      clearTimeout(silenceTimeoutRef.current);
-      silenceTimeoutRef.current = null;
-    }
+    
+    // Clear all timers
+    [vadTimeoutRef, silenceTimeoutRef, maxListeningTimeoutRef].forEach(ref => {
+      if (ref.current) {
+        clearTimeout(ref.current);
+        ref.current = null;
+      }
+    });
+    
     if (audioRef.current) {
       audioRef.current.pause();
       audioRef.current.currentTime = 0;
       audioRef.current.src = '';
     }
+    
     onStop?.(duration);
   };
 
+  // Enhanced interruption detection with microphone monitoring
+  const startInterruptionMonitoring = async () => {
+    if (!canInterrupt) return;
+    
+    try {
+      console.log('[VoiceChat] Starting interruption monitoring...');
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+          sampleRate: 16000
+        }
+      });
+      
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      const analyser = audioContext.createAnalyser();
+      const source = audioContext.createMediaStreamSource(stream);
+      
+      analyser.fftSize = 2048;
+      analyser.smoothingTimeConstant = 0.8;
+      source.connect(analyser);
+      
+      const dataArray = new Uint8Array(analyser.fftSize);
+      let consecutiveSpeechFrames = 0;
+      const requiredSpeechFrames = 3; // Need 3 consecutive frames of speech to trigger interruption
+      
+      const monitorForInterruption = () => {
+        if (!canInterrupt || !isSpeaking) {
+          // Clean up monitoring
+          stream.getTracks().forEach(track => track.stop());
+          audioContext.close();
+          return;
+        }
+        
+        analyser.getByteTimeDomainData(dataArray);
+        let sum = 0;
+        for (let i = 0; i < dataArray.length; i++) {
+          const val = (dataArray[i] - 128) / 128;
+          sum += val * val;
+        }
+        const rms = Math.sqrt(sum / dataArray.length);
+        
+        // Detect speech with higher threshold for interruption
+        if (rms > VAD_CONFIG.interruptionThreshold) {
+          consecutiveSpeechFrames++;
+          console.log('[VoiceChat] Speech detected during agent speech, frame:', consecutiveSpeechFrames);
+          
+          if (consecutiveSpeechFrames >= requiredSpeechFrames) {
+            console.log('[VoiceChat] Interruption triggered! User is speaking during agent response.');
+            // Clean up monitoring
+            stream.getTracks().forEach(track => track.stop());
+            audioContext.close();
+            handleInterruption();
+            return;
+          }
+        } else {
+          consecutiveSpeechFrames = 0;
+        }
+        
+        // Continue monitoring
+        requestAnimationFrame(monitorForInterruption);
+      };
+      
+      monitorForInterruption();
+      
+    } catch (err) {
+      console.error('[VoiceChat] Error setting up interruption monitoring:', err);
+    }
+  };
+
+  // Handle interruption during agent speech
+  const handleInterruption = () => {
+    console.log('[VoiceChat] Handling interruption');
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+    setIsSpeaking(false);
+    setCanInterrupt(false);
+    setIsStreamingResponse(false);
+    
+    // Add interruption to conversation context
+    conversationContext.current.interruptionCount++;
+    
+    // Start listening again immediately
+    if (!isListening) {
+      startListening();
+    }
+  };
+
   // Play agent intro and then start listening
   const playAgentIntroAndListen = async () => {
     cancelled.current = false;
@@ -433,15 +797,24 @@ export function VoiceChat({
     }
   };
 
-  // UI button handler
+  // UI button handler with interruption support
   const handleToggleListening = () => {
     if (disabled) return;
+    
     if (!conversationStarted) {
       setConversationStarted(true);
       playAgentIntroAndListen();
       return;
     }
-    // After conversation has started, stop button works as before
+    
+    // Allow manual interruption when agent is speaking
+    if (isSpeaking && canInterrupt) {
+      console.log('[VoiceChat] Manual interruption triggered by user tap');
+      handleInterruption();
+      return;
+    }
+    
+    // Stop button works as before for other states
     if (isSpeaking || isListening) {
       forceStop();
       return;
@@ -455,16 +828,24 @@ export function VoiceChat({
   };
 
   const getStatusText = () => {
-    if (isListening) return "Listening...";
-    if (isProcessing) return "Processing...";
+    if (isIntroPlaying) return "Agent introducing...";
+    if (isListening) return "Listening... (speak naturally)";
+    if (isProcessing) return "Processing your message...";
+    if (isSpeaking && canInterrupt) return "Speaking... (tap or speak to interrupt)";
     if (isSpeaking) return "Speaking...";
-    return "Tap to speak";
+    if (isStreamingResponse) return "Generating response...";
+    if (error) return "Error - will retry automatically";
+    return conversationStarted ? "Tap to speak again" : "Tap to start conversation";
   };
 
   const getStatusColor = () => {
+    if (isIntroPlaying) return "text-purple-400";
     if (isListening) return "text-blue-400";
     if (isProcessing) return "text-yellow-400";
+    if (isSpeaking && canInterrupt) return "text-green-400 animate-pulse";
     if (isSpeaking) return "text-green-400";
+    if (isStreamingResponse) return "text-orange-400";
+    if (error) return "text-red-400";
     return "text-gray-400";
   };
 
@@ -537,6 +918,7 @@ export function VoiceChat({
               "bg-gradient-to-br from-purple-500/20 to-purple-500/10 border-2",
               isListening ? "border-blue-500 shadow-lg shadow-blue-500/25" :
               isProcessing ? "border-yellow-500 shadow-lg shadow-yellow-500/25" :
+              isSpeaking && canInterrupt ? "border-orange-500 shadow-lg shadow-orange-500/25 cursor-pointer animate-pulse" :
               isSpeaking ? "border-green-500 shadow-lg shadow-green-500/25" :
               "border-white/10 hover:border-purple-500/50"
             )}
@@ -544,11 +926,13 @@ export function VoiceChat({
             animate={{
               boxShadow: isListening 
                 ? ["0 0 0 0 rgba(59, 130, 246, 0.4)", "0 0 0 20px rgba(59, 130, 246, 0)"]
+                : canInterrupt && isSpeaking
+                ? ["0 0 0 0 rgba(249, 115, 22, 0.4)", "0 0 0 20px rgba(249, 115, 22, 0)"]
                 : undefined
             }}
             transition={{
               duration: 1.5,
-              repeat: isListening ? Infinity : 0
+              repeat: (isListening || (canInterrupt && isSpeaking)) ? Infinity : 0
             }}
           >
             <AnimatePresence mode="wait">
@@ -567,8 +951,9 @@ export function VoiceChat({
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.8 }}
+                  className="flex items-center justify-center"
                 >
-                  <Volume2 className="w-12 h-12 text-green-500" />
+                  <SoundWaves isActive={true} size="md" color="text-green-500" />
                 </motion.div>
               ) : isListening ? (
                 <motion.div
@@ -694,25 +1079,11 @@ export function VoiceChat({
               <Volume2 className="w-4 h-4 text-gray-400" />
             </motion.div>
           )}
-
-          {/* Live transcript display */}
-          {liveTranscript && (
-            <div className="mt-2 text-base text-blue-300 font-mono bg-blue-900/20 rounded p-2">
-              <span className="font-semibold">You said:</span> {liveTranscript}
-            </div>
-          )}
-
-          {/* Live agent response display */}
-          {liveAgentResponse && (
-            <div className="mt-2 text-base text-green-300 font-mono bg-green-900/20 rounded p-2">
-              <span className="font-semibold">Agent:</span> {liveAgentResponse}
-            </div>
-          )}
         </div>
-
-        {/* AI indicator */}
+        
+        {/* Enhanced AI indicator with voice features */}
         <motion.div
-          className="flex items-center space-x-2 text-sm text-gray-400"
+          className="flex flex-col items-center space-y-2 text-sm text-gray-400"
           animate={{ opacity: [0.5, 1, 0.5] }}
           transition={{
             duration: 3,
@@ -720,36 +1091,140 @@ export function VoiceChat({
             ease: "easeInOut"
           }}
         >
-          <Sparkles className="w-4 h-4" />
-          <span>SentientOS AI Voice Assistant</span>
+          <div className="flex items-center space-x-2">
+            <Sparkles className="w-4 h-4" />
+            <span>SentientOS Enhanced Voice Assistant</span>
+          </div>
+          
+          {/* Voice features indicators */}
+          <div className="flex items-center space-x-4 text-xs">
+            <div className={`flex items-center space-x-1 ${vadState === 'speech' ? 'text-green-400' : 'text-gray-500'}`}>
+              <div className={`w-2 h-2 rounded-full ${vadState === 'speech' ? 'bg-green-400' : 'bg-gray-500'}`} />
+              <span>Voice Detection</span>
+            </div>
+            
+            <div className={`flex items-center space-x-1 ${canInterrupt ? 'text-orange-400' : 'text-gray-500'}`}>
+              <div className={`w-2 h-2 rounded-full ${canInterrupt ? 'bg-orange-400 animate-pulse' : 'bg-gray-500'}`} />
+              <span>Interruption Ready</span>
+            </div>
+            
+            <div className={`flex items-center space-x-1 ${emotion ? 'text-purple-400' : 'text-gray-500'}`}>
+              <div className={`w-2 h-2 rounded-full ${emotion ? 'bg-purple-400' : 'bg-gray-500'}`} />
+              <span>Emotion: {emotion || 'Neutral'}</span>
+            </div>
+          </div>
+          
+          {/* Session info */}
+          {conversationStarted && (
+            <div className="text-xs text-gray-500 text-center">
+              <div>Session: {Math.floor((Date.now() - conversationContext.current.sessionStartTime) / 1000)}s</div>
+              <div>Messages: {conversationContext.current.messages.length}</div>
+              {conversationContext.current.interruptionCount > 0 && (
+                <div>Interruptions: {conversationContext.current.interruptionCount}</div>
+              )}
+            </div>
+          )}
         </motion.div>
 
-        {/* Display emotion if available */}
-        {emotion && (
-          <div className="text-center space-y-2 mt-4">
-            <p className="text-lg font-medium text-green-400">
-              Emotion: {emotion}
-            </p>
-          </div>
+        {/* Enhanced transcript display with context */}
+        {liveTranscript && (
+          <motion.div 
+            className="mt-4 p-4 bg-blue-900/20 border border-blue-500/30 rounded-lg max-w-md"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="text-blue-300 font-mono text-sm">
+              <div className="flex items-center gap-2 mb-2">
+                <Mic className="w-4 h-4" />
+                <span className="font-semibold">You said:</span>
+              </div>
+              <div className="text-blue-200">{liveTranscript}</div>
+              {emotion && (
+                <div className="text-xs text-blue-400 mt-1">
+                  Detected emotion: {emotion}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+
+        {/* Enhanced agent response display */}
+        {liveAgentResponse && (
+          <motion.div 
+            className="mt-4 p-4 bg-green-900/20 border border-green-500/30 rounded-lg max-w-md"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="text-green-300 font-mono text-sm">
+              <div className="flex items-center gap-2 mb-2">
+                {isSpeaking ? (
+                  <SoundWaves isActive={true} size="sm" color="text-green-400" />
+                ) : (
+                  <Volume2 className="w-4 h-4" />
+                )}
+                <span className="font-semibold">Agent responds:</span>
+                {canInterrupt && (
+                  <span className="text-xs text-orange-400 bg-orange-400/20 px-2 py-1 rounded">
+                    You can interrupt
+                  </span>
+                )}
+              </div>
+              <div className="text-green-200">{liveAgentResponse}</div>
+              {isStreamingResponse && (
+                <div className="text-xs text-green-400 mt-1 animate-pulse">
+                  Generating response...
+                </div>
+              )}
+            </div>
+          </motion.div>
         )}
 
-        {/* Display error if any */}
+        {/* Enhanced error display */}
         {error && (
-          <div className="text-center space-y-2 mt-4 text-red-400">
-            <p className="text-lg font-medium">
-              Error: {error}
-            </p>
-          </div>
+          <motion.div 
+            className="mt-4 p-4 bg-red-900/20 border border-red-500/30 rounded-lg max-w-md"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className="text-red-300 font-mono text-sm">
+              <div className="flex items-center gap-2 mb-2">
+                <Square className="w-4 h-4" />
+                <span className="font-semibold">System Notice:</span>
+              </div>
+              <div className="text-red-200">{error}</div>
+              <div className="text-xs text-red-400 mt-1">
+                Will automatically retry in a moment...
+              </div>
+            </div>
+          </motion.div>
         )}
       </div>
 
       {/* Add <audio ref={audioRef} hidden /> to the JSX root */}
       <audio ref={audioRef} hidden />
 
-      {/* Emotion display */}
+      {/* Floating interruption hint */}
+      {canInterrupt && isSpeaking && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          className="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-orange-500/20 border border-orange-500/50 rounded-lg px-4 py-2 shadow-lg text-orange-400 text-sm font-semibold z-20"
+        >
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-orange-400 animate-pulse" />
+            <span>Tap button or speak to interrupt</span>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Floating emotion display */}
       {emotion && (
-        <div className="absolute top-8 right-8 bg-white/80 rounded-lg px-4 py-2 shadow text-black text-lg font-semibold z-20">
-          Emotion: {emotion}
+        <div className="absolute top-8 right-8 bg-black/80 border border-purple-500/50 rounded-lg px-4 py-2 shadow-lg text-purple-400 text-sm font-semibold z-20">
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-purple-400 animate-pulse" />
+            Emotion: {emotion}
+          </div>
         </div>
       )}
     </div>
@@ -759,10 +1234,9 @@ export function VoiceChat({
 export default function VoiceChatDemo() {
   return (
     <VoiceChat
-      onStart={() => console.log("Voice recording started")}
-      onStop={(duration) => console.log(`Voice recording stopped after ${duration}s`)}
+      onStart={() => console.log("Enhanced voice recording started")}
+      onStop={(duration) => console.log(`Enhanced voice recording stopped after ${duration}s`)}
       onVolumeChange={(volume) => console.log(`Volume: ${volume}%`)}
-      demoMode={true}
     />
   );
 }
\ No newline at end of file
diff --git a/apps/web-frontend/src/components/demo/VoiceChat_backup.tsx b/apps/web-frontend/src/components/demo/VoiceChat_backup.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web-frontend/src/components/landing/Flow.tsx b/apps/web-frontend/src/components/landing/Flow.tsx
index 65fa251..2ee3538 100644
--- a/apps/web-frontend/src/components/landing/Flow.tsx
+++ b/apps/web-frontend/src/components/landing/Flow.tsx
@@ -6,7 +6,6 @@ import {
   Zap, 
   Database, 
   Heart,
-  Users,
   Shield,
   Headphones,
   GraduationCap,
@@ -155,8 +154,11 @@ const Flow: React.FC = () => {
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: index * 0.1 }}
-            className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:border-purple-500/50 transition-all duration-300"
+            className="relative border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20"
           >
+            {/* Subtle background on hover */}
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+            <div className="relative z-10">
             <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-4">
               <component.icon className="w-8 h-8 text-white" />
             </div>
@@ -170,6 +172,7 @@ const Flow: React.FC = () => {
                 </li>
               ))}
             </ul>
+            </div>
           </motion.div>
         ))}
       </div>
@@ -188,10 +191,13 @@ const Flow: React.FC = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
-              className={`relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:border-white/20 transition-all duration-300 ${
+              className={`relative border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20 ${
                 industry.status === 'coming-soon' ? 'opacity-75' : ''
               }`}
             >
+              {/* Subtle background on hover */}
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+              <div className="relative z-10">
               {/* Status Badge */}
               <div className="absolute top-4 right-4">
                 {industry.status === 'available' ? (
@@ -252,6 +258,7 @@ const Flow: React.FC = () => {
                   Notify When Available
                 </button>
               )}
+              </div>
             </motion.div>
           ))}
         </div>
@@ -308,7 +315,10 @@ const Flow: React.FC = () => {
                 <div className="hidden md:block absolute top-8 left-full w-6 h-0.5 bg-gradient-to-r from-purple-500 to-transparent z-0" />
               )}
 
-              <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:border-white/20 transition-all duration-300 z-10">
+              <div className="relative border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20 z-10">
+                {/* Subtle background on hover */}
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                <div className="relative z-10">
                 {/* Step Number */}
                 <div className={`w-8 h-8 bg-gradient-to-r ${step.color} rounded-full flex items-center justify-center text-white font-bold text-sm mb-4`}>
                   {step.step}
@@ -322,6 +332,7 @@ const Flow: React.FC = () => {
                 {/* Step Info */}
                 <h4 className="text-lg font-semibold text-white mb-2">{step.title}</h4>
                 <p className="text-gray-400 text-sm">{step.description}</p>
+                </div>
               </div>
             </motion.div>
           ))}
@@ -334,8 +345,11 @@ const Flow: React.FC = () => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.5 }}
-          className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-3xl p-8 border border-white/10"
+          className="relative border-2 border-gray-600/30 rounded-3xl p-8 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20"
         >
+          {/* Subtle background on hover */}
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
+          <div className="relative z-10">
           <h3 className="text-2xl font-bold text-white mb-4">Ready to Experience Intelligent Agent Orchestration?</h3>
           <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
             Start with our Customer Support de-escalation system and see how emotional intelligence transforms AI interactions.
@@ -348,6 +362,7 @@ const Flow: React.FC = () => {
               Request Enterprise Demo
             </button>
           </div>
+          </div>
         </motion.div>
       </div>
     </div>
diff --git a/apps/web-frontend/src/components/landing/Footer.tsx b/apps/web-frontend/src/components/landing/Footer.tsx
index e4f6b23..162384f 100644
--- a/apps/web-frontend/src/components/landing/Footer.tsx
+++ b/apps/web-frontend/src/components/landing/Footer.tsx
@@ -89,7 +89,6 @@ const Footer: React.FC = () => {
         <div className="mt-12 pt-8 border-t border-white/10">
           <p className="text-center text-gray-400 text-sm">
             © {new Date().getFullYear()} SentientOS-ai. All rights reserved.
-            <span className="block mt-2">Powered by bolt.new</span>
           </p>
         </div>
       </div>
diff --git a/apps/web-frontend/src/components/landing/Hero.tsx b/apps/web-frontend/src/components/landing/Hero.tsx
index 2c1c28e..03c91ed 100644
--- a/apps/web-frontend/src/components/landing/Hero.tsx
+++ b/apps/web-frontend/src/components/landing/Hero.tsx
@@ -56,7 +56,7 @@ const Hero: React.FC = () => {
               className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-sm font-medium text-white mb-8"
             >
               <Sparkles className="w-4 h-4 text-purple-400" />
-              Powered by Bolt.new / a Advanced AI Technology 
+              Advanced AI Technology 
               <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
             </motion.div>
 
@@ -142,10 +142,10 @@ const Hero: React.FC = () => {
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.6, delay: 1.0 + index * 0.1 }}
-                className="group relative bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-300"
+                className="group relative border-2 border-gray-600/30 rounded-xl p-6 hover:border-purple-500/70 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"
               >
-                {/* Hover gradient background */}
-                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300" />
+                {/* Subtle background on hover */}
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300" />
                 
                 <div className="relative z-10">
                   <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
diff --git a/apps/web-frontend/src/components/support/EmotionalOS.tsx b/apps/web-frontend/src/components/support/EmotionalOS.tsx
index 460c008..631e4c3 100644
--- a/apps/web-frontend/src/components/support/EmotionalOS.tsx
+++ b/apps/web-frontend/src/components/support/EmotionalOS.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
 import { 
   Heart, 
   AlertTriangle, 
@@ -7,8 +7,6 @@ import {
   Frown, 
   Zap, 
   Brain,
-  TrendingUp,
-  TrendingDown,
   Activity
 } from 'lucide-react';
 
@@ -28,10 +26,9 @@ interface EmotionalOSProps {
 
 const EmotionalOS: React.FC<EmotionalOSProps> = ({ 
   currentState, 
-  history, 
-  onStateChange 
+  history
 }) => {
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [isAnalyzing] = useState(false);
 
   const getEmotionColor = (emotion: string) => {
     switch (emotion) {
@@ -76,16 +73,22 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
   const EmotionIcon = getEmotionIcon(currentState.emotion);
 
   return (
-    <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6">
-      <div className="flex items-center gap-3 mb-6">
-        <div className={`w-12 h-12 bg-gradient-to-r ${getEmotionColor(currentState.emotion)} rounded-xl flex items-center justify-center`}>
-          <Brain className="w-6 h-6 text-white" />
-        </div>
-        <div>
-          <h3 className="text-lg font-semibold text-white">EmotionalOS</h3>
-          <p className="text-gray-400 text-sm">Real-time Emotion Analysis</p>
+    <div className="dashboard-container p-6 relative overflow-hidden">
+      {/* Enhanced distributed background effects - no centralized glow */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/3 via-transparent to-blue-500/3 pointer-events-none rounded-2xl" />
+      <div className="absolute top-0 right-0 w-24 h-24 bg-purple-500/5 rounded-full blur-xl opacity-40 pointer-events-none" />
+      <div className="absolute bottom-0 left-0 w-24 h-24 bg-blue-500/5 rounded-full blur-xl opacity-40 pointer-events-none" />
+      
+      <div className="relative z-10">
+        <div className="flex items-center gap-3 mb-6">
+          <div className={`dashboard-icon-container w-12 h-12 bg-gradient-to-r ${getEmotionColor(currentState.emotion)} rounded-xl flex items-center justify-center`}>
+            <Brain className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white text-shadow">EmotionalOS</h3>
+            <p className="text-gray-300 text-sm">Real-time Emotion Analysis</p>
+          </div>
         </div>
-      </div>
 
       {/* Current Emotional State */}
       <div className="mb-6">
@@ -100,20 +103,24 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
         </div>
 
         <div className="grid grid-cols-2 gap-4 mb-4">
-          <div className="bg-white/5 rounded-lg p-4">
+          <div className="dashboard-container bg-white/5 rounded-lg p-4 border-2 border-gray-600/30">
             <div className="flex items-center gap-2 mb-2">
-              <EmotionIcon className="w-5 h-5 text-white" />
-              <span className="text-white font-medium capitalize">{currentState.emotion}</span>
+              <div className="dashboard-icon-container p-1">
+                <EmotionIcon className="w-5 h-5 text-white" />
+              </div>
+              <span className="text-white font-medium capitalize text-shadow">{currentState.emotion}</span>
             </div>
-            <div className="text-gray-400 text-sm">
+            <div className="text-gray-300 text-sm">
               Confidence: {Math.round(currentState.confidence * 100)}%
             </div>
           </div>
 
-          <div className="bg-white/5 rounded-lg p-4">
+          <div className="dashboard-container bg-white/5 rounded-lg p-4 border-2 border-gray-600/30">
             <div className="flex items-center gap-2 mb-2">
-              <Zap className="w-5 h-5 text-white" />
-              <span className="text-white font-medium">Intensity</span>
+              <div className="dashboard-icon-container p-1">
+                <Zap className="w-5 h-5 text-white" />
+              </div>
+              <span className="text-white font-medium text-shadow">Intensity</span>
             </div>
             <div className={`text-sm font-medium ${getIntensityColor(currentState.intensity)}`}>
               {getIntensityLevel(currentState.intensity)} ({Math.round(currentState.intensity * 100)}%)
@@ -140,12 +147,12 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
         {/* Trigger Phrases */}
         {currentState.triggers.length > 0 && (
           <div className="mb-4">
-            <h5 className="text-white text-sm font-medium mb-2">Detected Triggers</h5>
+            <h5 className="text-white text-sm font-medium mb-2 text-shadow">Detected Triggers</h5>
             <div className="flex flex-wrap gap-2">
               {currentState.triggers.map((trigger, index) => (
                 <span
                   key={index}
-                  className="px-2 py-1 bg-red-500/20 text-red-300 text-xs rounded border border-red-500/30"
+                  className="px-2 py-1 bg-red-500/20 text-red-300 text-xs rounded border-2 border-red-500/30 shadow-lg"
                 >
                   "{trigger}"
                 </span>
@@ -157,7 +164,7 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
 
       {/* Emotion History */}
       <div>
-        <h4 className="text-white font-medium mb-3">Emotion Timeline</h4>
+        <h4 className="text-white font-medium mb-3 text-shadow">Emotion Timeline</h4>
         <div className="space-y-2 max-h-32 overflow-y-auto">
           {history.slice(-5).map((state, index) => {
             const StateIcon = getEmotionIcon(state.emotion);
@@ -169,21 +176,23 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
                 initial={{ opacity: 0, x: -20 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: index * 0.1 }}
-                className={`flex items-center gap-3 p-2 rounded-lg ${
-                  isRecent ? 'bg-white/10' : 'bg-white/5'
+                className={`flex items-center gap-3 p-2 rounded-lg border-2 transition-all ${
+                  isRecent 
+                    ? 'bg-white/10 border-purple-500/30 shadow-lg shadow-purple-500/10' 
+                    : 'bg-white/5 border-gray-600/20 hover:border-gray-500/30'
                 }`}
               >
-                <div className={`w-6 h-6 bg-gradient-to-r ${getEmotionColor(state.emotion)} rounded-full flex items-center justify-center`}>
+                <div className={`dashboard-icon-container w-6 h-6 bg-gradient-to-r ${getEmotionColor(state.emotion)} rounded-full flex items-center justify-center`}>
                   <StateIcon className="w-3 h-3 text-white" />
                 </div>
                 <div className="flex-1">
                   <div className="flex items-center gap-2">
-                    <span className="text-white text-sm capitalize">{state.emotion}</span>
+                    <span className="text-white text-sm capitalize text-shadow">{state.emotion}</span>
                     <span className={`text-xs ${getIntensityColor(state.intensity)}`}>
                       {Math.round(state.intensity * 100)}%
                     </span>
                   </div>
-                  <div className="text-gray-400 text-xs">
+                  <div className="text-gray-300 text-xs">
                     {new Date(state.timestamp).toLocaleTimeString()}
                   </div>
                 </div>
@@ -195,6 +204,7 @@ const EmotionalOS: React.FC<EmotionalOSProps> = ({
           })}
         </div>
       </div>
+      </div>
     </div>
   );
 };
diff --git a/apps/web-frontend/src/index.css b/apps/web-frontend/src/index.css
index de9b6e1..9a772c0 100644
--- a/apps/web-frontend/src/index.css
+++ b/apps/web-frontend/src/index.css
@@ -125,6 +125,37 @@
     width: 12px;
     height: 12px;
   }
+
+  /* Enhanced Dashboard Styles */
+  .dashboard-container {
+    @apply bg-gray-900/40 backdrop-blur-sm border-2 border-gray-600/30 rounded-2xl;
+    @apply hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300;
+    @apply hover:shadow-lg hover:shadow-purple-500/10 relative overflow-hidden;
+  }
+  
+  .dashboard-container::before {
+    content: '';
+    @apply absolute inset-0 bg-gradient-to-br from-purple-500/5 to-blue-500/5;
+    @apply opacity-0 transition-opacity duration-300 rounded-2xl pointer-events-none;
+  }
+  
+  .dashboard-container:hover::before {
+    @apply opacity-100;
+  }
+  
+  .dashboard-icon-container {
+    @apply border-2 border-purple-500/30 rounded-lg bg-purple-500/10 backdrop-blur-sm;
+    @apply hover:border-purple-500/60 transition-colors duration-300;
+  }
+  
+  .dashboard-stat-badge {
+    @apply bg-green-400/10 px-2 py-1 rounded-full border border-green-400/20;
+  }
+
+  /* Enhanced background gradients */
+  .bg-gradient-radial {
+    background: radial-gradient(ellipse at center, var(--tw-gradient-stops));
+  }
 }
 
 @layer utilities {
@@ -140,6 +171,11 @@
     animation: gradient 8s linear infinite;
   }
   
+  /* Text shadow utility for better readability */
+  .text-shadow {
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+  
   /* Tavus embed utilities */
   .tavus-scale-up {
     transform: scale(1.05);
diff --git a/apps/web-frontend/src/pages/AboutPage.tsx b/apps/web-frontend/src/pages/AboutPage.tsx
index 96a1076..82e4bc8 100644
--- a/apps/web-frontend/src/pages/AboutPage.tsx
+++ b/apps/web-frontend/src/pages/AboutPage.tsx
@@ -3,14 +3,11 @@ import { motion } from 'framer-motion';
 import { 
   Brain, 
   Heart, 
-  Users, 
   Globe, 
   Shield, 
   Zap,
-  Target,
   Award,
   Lightbulb,
-  Rocket,
   Headphones,
   GraduationCap,
   Briefcase,
@@ -271,10 +268,13 @@ const AboutPage: React.FC = () => {
               </div>
               
               <div className="relative">
-                <div className="relative p-8 bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-3xl backdrop-blur-sm border border-white/10">
+                <div className="relative p-8 border-2 border-gray-600/30 rounded-3xl hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20">
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
+                  <div className="relative z-10">
                   <div className="grid grid-cols-1 gap-6">
                     <div className="text-center">
-                      <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mx-auto mb-3 border-2 border-blue-500/30 hover:border-blue-500/70 transition-all duration-300">
                         <Headphones className="w-8 h-8 text-white" />
                       </div>
                       <div className="text-lg font-semibold text-white">Customer Support</div>
@@ -283,12 +283,13 @@ const AboutPage: React.FC = () => {
                     
                     <div className="grid grid-cols-3 gap-3">
                       {['EmpathyAgent', 'RetentionAgent', 'EscalationAgent'].map((agent, idx) => (
-                        <div key={idx} className="text-center p-3 bg-white/5 rounded-lg border border-white/10">
+                        <div key={idx} className="text-center p-3 border border-gray-600/30 rounded-lg hover:border-purple-500/50 transition-all duration-300">
                           <div className="text-sm font-medium text-white">{agent}</div>
                         </div>
                       ))}
                     </div>
                   </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -328,8 +329,11 @@ const AboutPage: React.FC = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.6, delay: index * 0.1 }}
                 viewport={{ once: true }}
-                className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:border-white/20 transition-all duration-300 opacity-75"
+                className="relative border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20 opacity-75"
               >
+                {/* Subtle background on hover */}
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                <div className="relative z-10">
                 <div className="absolute top-4 right-4">
                   <div className="flex items-center gap-1 px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full border border-orange-500/30">
                     <Clock className="w-3 h-3" />
@@ -337,7 +341,7 @@ const AboutPage: React.FC = () => {
                   </div>
                 </div>
 
-                <div className={`w-16 h-16 bg-gradient-to-r ${service.color} rounded-xl flex items-center justify-center mb-4`}>
+                <div className={`w-16 h-16 bg-gradient-to-r ${service.color} rounded-xl flex items-center justify-center mb-4 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300`}>
                   <service.icon className="w-8 h-8 text-white" />
                 </div>
 
@@ -356,6 +360,7 @@ const AboutPage: React.FC = () => {
                 <button className="w-full mt-4 px-4 py-2 bg-white/10 text-gray-400 rounded-lg font-medium cursor-not-allowed">
                   Notify When Available
                 </button>
+                </div>
               </motion.div>
             ))}
           </div>
@@ -390,33 +395,37 @@ const AboutPage: React.FC = () => {
               </div>
               
               <div className="relative">
-                <div className="relative p-8 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-3xl backdrop-blur-sm border border-white/10">
+                <div className="relative p-8 border-2 border-gray-600/30 rounded-3xl hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20">
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
+                  <div className="relative z-10">
                   <div className="grid grid-cols-2 gap-6">
                     <div className="text-center">
-                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300">
                         <Brain className="w-8 h-8 text-white" />
                       </div>
                       <div className="text-sm text-gray-300">{t('ai_intelligence', 'Multi-Industry AI')}</div>
                     </div>
                     <div className="text-center">
-                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300">
                         <Heart className="w-8 h-8 text-white" />
                       </div>
                       <div className="text-sm text-gray-300">{t('human_empathy', 'Emotional Intelligence')}</div>
                     </div>
                     <div className="text-center">
-                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300">
                         <Building2 className="w-8 h-8 text-white" />
                       </div>
                       <div className="text-sm text-gray-300">{t('industry_specific', 'Industry Expertise')}</div>
                     </div>
                     <div className="text-center">
-                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3">
+                      <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-3 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300">
                         <Zap className="w-8 h-8 text-white" />
                       </div>
                       <div className="text-sm text-gray-300">{t('instant_response', 'Real-time Processing')}</div>
                     </div>
                   </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -454,11 +463,12 @@ const AboutPage: React.FC = () => {
                 viewport={{ once: true }}
                 className="group relative"
               >
-                <div className="relative p-8 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:border-purple-500/50 transition-all duration-300 h-full">
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                <div className="relative p-8 border-2 border-gray-600/30 rounded-2xl hover:border-purple-500/70 transition-all duration-300 group h-full hover:shadow-lg hover:shadow-purple-500/20">
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
                   
                   <div className="relative z-10">
-                    <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border-2 border-purple-500/30 hover:border-purple-500/70">
                       <value.icon className="w-8 h-8 text-white" />
                     </div>
                     
@@ -507,7 +517,7 @@ const AboutPage: React.FC = () => {
                   className="relative flex items-start mb-12"
                 >
                   {/* Timeline dot */}
-                  <div className="relative z-10 w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-8 flex-shrink-0">
+                  <div className="relative z-10 w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mr-8 flex-shrink-0 border-2 border-purple-500/30 hover:border-purple-500/70 transition-all duration-300">
                     <div className="text-white font-bold text-sm">{milestone.year}</div>
                   </div>
                   
@@ -553,10 +563,14 @@ const AboutPage: React.FC = () => {
                 viewport={{ once: true }}
                 className="text-center"
               >
-                <div className="relative p-6 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:border-purple-500/50 transition-all duration-300">
+                <div className="relative p-6 border-2 border-gray-600/30 rounded-2xl hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20">
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                  <div className="relative z-10">
                   <div className="text-6xl mb-4">{member.avatar}</div>
                   <h3 className="text-lg font-semibold text-white mb-2">{member.name}</h3>
                   <p className="text-gray-400 text-sm">{member.role}</p>
+                  </div>
                 </div>
               </motion.div>
             ))}
@@ -574,7 +588,10 @@ const AboutPage: React.FC = () => {
             viewport={{ once: true }}
             className="max-w-4xl mx-auto text-center"
           >
-            <div className="relative p-12 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-3xl backdrop-blur-sm border border-white/10">
+            <div className="relative p-12 border-2 border-gray-600/30 rounded-3xl hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20">
+              {/* Subtle background on hover */}
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
+              <div className="relative z-10">
               <h2 className="text-4xl font-bold mb-6">
                 <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
                   {t('join_mission', 'Start with Customer Support')}
@@ -602,6 +619,7 @@ const AboutPage: React.FC = () => {
                   {t('meet_sponsors', 'Meet Our Sponsors')}
                 </a>
               </div>
+              </div>
             </div>
           </motion.div>
         </div>
diff --git a/apps/web-frontend/src/pages/AgentEditorPage.tsx b/apps/web-frontend/src/pages/AgentEditorPage.tsx
index bd6323e..49ac2f2 100644
--- a/apps/web-frontend/src/pages/AgentEditorPage.tsx
+++ b/apps/web-frontend/src/pages/AgentEditorPage.tsx
@@ -9,14 +9,11 @@ import {
   Bot,
   Mic,
   Heart,
-  Zap,
   Brain,
   User,
-  Volume2,
-  Sliders,
-  Palette
+  Volume2
 } from 'lucide-react';
-import { useAgentStore, Agent } from '../stores/agentStore';
+import { useAgentStore } from '../stores/agentStore';
 import { useLanguageStore } from '../stores/languageStore';
 import toast from 'react-hot-toast';
 
@@ -24,7 +21,7 @@ const AgentEditorPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { t } = useLanguageStore();
-  const { agents, createAgent, updateAgent, getAgentById } = useAgentStore();
+  const { createAgent, updateAgent, getAgentById } = useAgentStore();
   
   const isEditing = id !== 'new';
   const existingAgent = isEditing ? getAgentById(id!) : null;
@@ -89,7 +86,7 @@ const AgentEditorPage: React.FC = () => {
     if (isEditing && id) {
       navigate(`/app/agents/${id}/conversation`);
     } else {
-      toast.info('Save the agent first to test it');
+      toast('Save the agent first to test it', { icon: 'ℹ️' });
     }
   };
 
@@ -128,7 +125,7 @@ const AgentEditorPage: React.FC = () => {
                 type="text"
                 value={formData.name}
                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-400 transition-colors"
+                className="w-full px-4 py-3 bg-white/5 border-2 border-gray-600/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/60 transition-colors"
                 placeholder="Enter agent name"
                 required
               />
@@ -142,7 +139,7 @@ const AgentEditorPage: React.FC = () => {
                 rows={4}
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-400 transition-colors resize-none"
+                className="w-full px-4 py-3 bg-white/5 border-2 border-gray-600/30 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/60 transition-colors resize-none"
                 placeholder="Describe your agent's purpose and capabilities"
               />
             </div>
@@ -157,7 +154,7 @@ const AgentEditorPage: React.FC = () => {
                   ...formData,
                   personality: { ...formData.personality, style: e.target.value }
                 })}
-                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-400"
+                className="w-full px-4 py-3 bg-white/5 border-2 border-gray-600/30 rounded-lg text-white focus:outline-none focus:border-purple-500/60"
               >
                 <option value="professional">Professional</option>
                 <option value="casual">Casual</option>
@@ -189,10 +186,10 @@ const AgentEditorPage: React.FC = () => {
                         personality: { ...formData.personality, traits }
                       });
                     }}
-                    className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                    className={`px-3 py-2 rounded-lg text-sm font-medium transition-all border-2 ${
                       formData.personality.traits.includes(trait)
-                        ? 'bg-purple-500 text-white'
-                        : 'bg-white/10 text-gray-300 hover:bg-white/20'
+                        ? 'bg-purple-500/20 border-purple-500/60 text-white shadow-lg shadow-purple-500/20'
+                        : 'bg-white/5 border-gray-600/30 text-gray-300 hover:bg-white/10 hover:border-purple-500/30'
                     }`}
                   >
                     {trait}
@@ -348,18 +345,18 @@ const AgentEditorPage: React.FC = () => {
                 ].map((style) => (
                   <div
                     key={style.value}
-                    className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                    className={`p-4 border-2 rounded-lg cursor-pointer transition-all ${
                       formData.emotion_config.response_style === style.value
-                        ? 'border-purple-500 bg-purple-500/10'
-                        : 'border-white/20 bg-white/5 hover:bg-white/10'
+                        ? 'border-purple-500/60 bg-purple-500/20 shadow-lg shadow-purple-500/20'
+                        : 'border-gray-600/30 bg-white/5 hover:bg-white/10 hover:border-purple-500/30'
                     }`}
                     onClick={() => setFormData({
                       ...formData,
                       emotion_config: { ...formData.emotion_config, response_style: style.value as any }
                     })}
                   >
-                    <h4 className="text-white font-medium mb-1">{style.label}</h4>
-                    <p className="text-gray-400 text-xs">{style.desc}</p>
+                    <h4 className="text-white font-medium mb-1 text-shadow">{style.label}</h4>
+                    <p className="text-gray-300 text-xs">{style.desc}</p>
                   </div>
                 ))}
               </div>
@@ -451,8 +448,29 @@ const AgentEditorPage: React.FC = () => {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className="p-6 max-w-7xl mx-auto"
+      className="relative min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900"
     >
+      {/* Enhanced distributed background effects - no centralized glow */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Multiple gradient overlays for better distributed lighting */}
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/3 via-transparent to-blue-500/3" />
+        <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-cyan-500/3 rounded-full blur-xl opacity-30" />
+        <div className="absolute bottom-1/3 left-1/4 w-48 h-48 bg-pink-500/3 rounded-full blur-xl opacity-30" />
+        
+        {/* Subtle grid pattern */}
+        <div className="absolute inset-0" 
+             style={{
+               backgroundImage: `
+                 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+               `,
+               backgroundSize: '50px 50px'
+             }} />
+      </div>
+      
+      <div className="relative z-10 p-6 max-w-7xl mx-auto">
       {/* Header */}
       <div className="mb-6">
         <button
@@ -476,7 +494,7 @@ const AgentEditorPage: React.FC = () => {
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Sidebar Navigation */}
         <div className="lg:col-span-1">
-          <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4">
+          <div className="dashboard-container p-4">
             <nav className="space-y-2">
               {tabs.map((tab) => {
                 const Icon = tab.icon;
@@ -484,13 +502,17 @@ const AgentEditorPage: React.FC = () => {
                   <button
                     key={tab.id}
                     onClick={() => setActiveTab(tab.id)}
-                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-all ${
+                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-all border-2 ${
                       activeTab === tab.id
-                        ? 'bg-purple-500 text-white'
-                        : 'text-gray-300 hover:bg-white/10'
+                        ? 'bg-purple-500/20 border-purple-500/50 text-white shadow-lg shadow-purple-500/20'
+                        : 'border-gray-600/30 text-gray-300 hover:bg-white/5 hover:border-purple-500/30'
                     }`}
                   >
-                    <Icon className="w-5 h-5" />
+                    <div className={`dashboard-icon-container p-2 ${
+                      activeTab === tab.id ? 'border-purple-500/60' : ''
+                    }`}>
+                      <Icon className="w-5 h-5" />
+                    </div>
                     <span className="font-medium">{tab.label}</span>
                   </button>
                 );
@@ -499,13 +521,13 @@ const AgentEditorPage: React.FC = () => {
           </div>
 
           {/* Quick Actions */}
-          <div className="mt-6 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4">
-            <h3 className="text-lg font-semibold text-white mb-4">{t('actions', 'Actions')}</h3>
+          <div className="mt-6 dashboard-container p-4">
+            <h3 className="text-lg font-semibold text-white mb-4 text-shadow">{t('actions', 'Actions')}</h3>
             <div className="space-y-3">
               <button
                 onClick={handleSave}
                 disabled={loading}
-                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-lg font-semibold hover:opacity-90 transition-all border-2 border-purple-500/30 hover:border-purple-400/50 shadow-lg disabled:opacity-50"
               >
                 <Save className="w-4 h-4" />
                 {loading ? t('saving', 'Saving...') : t('save_agent', 'Save Agent')}
@@ -513,7 +535,7 @@ const AgentEditorPage: React.FC = () => {
               
               <button
                 onClick={handleTestAgent}
-                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition-colors"
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-green-500/30 hover:border-green-400/50 bg-green-600/20 hover:bg-green-700/20 text-white rounded-lg font-semibold transition-all shadow-lg"
               >
                 <Play className="w-4 h-4" />
                 {t('test_agent', 'Test Agent')}
@@ -524,16 +546,16 @@ const AgentEditorPage: React.FC = () => {
 
         {/* Main Content */}
         <div className="lg:col-span-3">
-          <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6">
+          <div className="dashboard-container p-6">
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
+              <div className="dashboard-icon-container w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
                 <Bot className="w-6 h-6 text-white" />
               </div>
               <div>
-                <h2 className="text-xl font-semibold text-white">
+                <h2 className="text-xl font-semibold text-white text-shadow">
                   {formData.name || t('unnamed_agent', 'Unnamed Agent')}
                 </h2>
-                <p className="text-gray-400 text-sm">
+                <p className="text-gray-300 text-sm">
                   {formData.description || t('no_description', 'No description provided')}
                 </p>
               </div>
@@ -543,6 +565,7 @@ const AgentEditorPage: React.FC = () => {
           </div>
         </div>
       </div>
+      </div>
     </motion.div>
   );
 };
diff --git a/apps/web-frontend/src/pages/ConversationPage.tsx b/apps/web-frontend/src/pages/ConversationPage.tsx
index 04d85ec..4b8588f 100644
--- a/apps/web-frontend/src/pages/ConversationPage.tsx
+++ b/apps/web-frontend/src/pages/ConversationPage.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { ArrowLeft, Send, Mic, Paperclip, MoreVertical } from 'lucide-react';
 
 const ConversationPage: React.FC = () => {
-  const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const [message, setMessage] = useState('');
 
@@ -47,23 +46,44 @@ const ConversationPage: React.FC = () => {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className="flex flex-col h-full"
+      className="relative min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-black to-gray-900"
     >
+      {/* Enhanced distributed background effects - no centralized glow */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Multiple gradient overlays for better distributed lighting */}
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/3 via-transparent to-blue-500/3" />
+        <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-cyan-500/3 rounded-full blur-xl opacity-30" />
+        <div className="absolute bottom-1/3 left-1/4 w-48 h-48 bg-pink-500/3 rounded-full blur-xl opacity-30" />
+        
+        {/* Subtle grid pattern */}
+        <div className="absolute inset-0" 
+             style={{
+               backgroundImage: `
+                 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+               `,
+               backgroundSize: '50px 50px'
+             }} />
+      </div>
+      
+      <div className="relative z-10 flex flex-col h-full">
       {/* Header */}
-      <div className="flex items-center justify-between p-6 border-b border-gray-700">
+      <div className="dashboard-container flex items-center justify-between p-6 border-b-2 border-gray-600/30">
         <div className="flex items-center gap-4">
           <button
             onClick={() => navigate('/app/dashboard')}
-            className="text-gray-400 hover:text-white transition-colors"
+            className="dashboard-icon-container p-2 text-gray-300 hover:text-white transition-colors"
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
           <div>
-            <h1 className="text-xl font-semibold text-white">AI Assistant</h1>
-            <p className="text-sm text-gray-400">Online • Responds instantly</p>
+            <h1 className="text-xl font-semibold text-white text-shadow">AI Assistant</h1>
+            <p className="text-sm text-gray-300">Online • Responds instantly</p>
           </div>
         </div>
-        <button className="text-gray-400 hover:text-white transition-colors">
+        <button className="dashboard-icon-container p-2 text-gray-300 hover:text-white transition-colors">
           <MoreVertical className="w-5 h-5" />
         </button>
       </div>
@@ -76,10 +96,10 @@ const ConversationPage: React.FC = () => {
             className={`flex ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
           >
             <div
-              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${
+              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl border-2 transition-all ${
                 msg.type === 'user'
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-700 text-gray-100'
+                  ? 'bg-blue-600/20 border-blue-500/50 text-white shadow-lg shadow-blue-500/20'
+                  : 'bg-gray-700/30 border-gray-600/30 text-gray-100'
               }`}
             >
               <p className="text-sm">{msg.content}</p>
@@ -94,9 +114,9 @@ const ConversationPage: React.FC = () => {
       </div>
 
       {/* Input Area */}
-      <div className="p-6 border-t border-gray-700">
+      <div className="dashboard-container p-6 border-t-2 border-gray-600/30">
         <div className="flex items-center gap-3">
-          <button className="text-gray-400 hover:text-white transition-colors">
+          <button className="dashboard-icon-container p-2 text-gray-300 hover:text-white transition-colors">
             <Paperclip className="w-5 h-5" />
           </button>
           <div className="flex-1 relative">
@@ -106,20 +126,21 @@ const ConversationPage: React.FC = () => {
               onChange={(e) => setMessage(e.target.value)}
               onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
               placeholder="Type your message..."
-              className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-full text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent pr-12"
+              className="w-full px-4 py-3 bg-gray-700/30 border-2 border-gray-600/30 rounded-full text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all pr-12"
             />
             <button
               onClick={handleSendMessage}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 text-blue-500 hover:text-blue-400 transition-colors"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 dashboard-icon-container p-2 text-blue-400 hover:text-blue-300 transition-colors"
             >
               <Send className="w-4 h-4" />
             </button>
           </div>
-          <button className="text-gray-400 hover:text-white transition-colors">
+          <button className="dashboard-icon-container p-2 text-gray-300 hover:text-white transition-colors">
             <Mic className="w-5 h-5" />
           </button>
         </div>
       </div>
+      </div>
     </motion.div>
   );
 };
diff --git a/apps/web-frontend/src/pages/DashboardPage.tsx b/apps/web-frontend/src/pages/DashboardPage.tsx
index 1bd88dc..12c8dfd 100644
--- a/apps/web-frontend/src/pages/DashboardPage.tsx
+++ b/apps/web-frontend/src/pages/DashboardPage.tsx
@@ -1,37 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { 
   Plus, 
   Bot, 
   MessageSquare, 
-  Calendar, 
   TrendingUp, 
-  Settings,
   Trash2,
   Edit3,
   Play,
   MoreVertical,
   Heart,
   Zap,
-  Users,
   Activity,
-  Database,
   AlertCircle,
   Crown,
   CreditCard,
   BarChart3,
   Clock,
-  Target,
-  Sparkles,
-  Brain,
   Shield,
   Globe
 } from 'lucide-react';
 import { useAgentStore } from '../stores/agentStore';
 import { useLanguageStore } from '../stores/languageStore';
 import { useAuthStore } from '../stores/authStore';
-import { supabase } from '../lib/supabase';
 import toast from 'react-hot-toast';
 import {
   LineChart,
@@ -43,11 +35,8 @@ import {
   ResponsiveContainer,
   AreaChart,
   Area,
-  BarChart,
-  Bar,
   PieChart,
   Pie,
-  Cell,
 } from 'recharts';
 
 interface EmotionHistoryData {
@@ -65,7 +54,19 @@ interface ActivityLog {
   timestamp: Date;
   level: 'info' | 'warning' | 'error';
   message: string;
-  details?: any;
+  details?: Record<string, unknown>;
+}
+
+interface HeatmapData {
+  day: string;
+  hour: number;
+  intensity: number;
+  emotions: {
+    happy: number;
+    sad: number;
+    angry: number;
+    calm: number;
+  };
 }
 
 interface SubscriptionInfo {
@@ -85,7 +86,6 @@ interface SubscriptionInfo {
 }
 
 const DashboardPage: React.FC = () => {
-  const navigate = useNavigate();
   const { agents, loading, fetchAgents, deleteAgent } = useAgentStore();
   const { t } = useLanguageStore();
   const { user } = useAuthStore();
@@ -94,7 +94,7 @@ const DashboardPage: React.FC = () => {
   const [emotionHistory, setEmotionHistory] = useState<EmotionHistoryData[]>([]);
   const [activityLogs, setActivityLogs] = useState<ActivityLog[]>([]);
   const [subscriptionInfo, setSubscriptionInfo] = useState<SubscriptionInfo | null>(null);
-  const [heatmapData, setHeatmapData] = useState<any[]>([]);
+  const [heatmapData, setHeatmapData] = useState<HeatmapData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -120,40 +120,17 @@ const DashboardPage: React.FC = () => {
 
   const loadEmotionHistory = async () => {
     try {
-      if (user) {
-        const { data, error } = await supabase
-          .from('conversations')
-          .select('created_at, emotion_data')
-          .eq('user_id', user.id)
-          .order('created_at', { ascending: true })
-          .limit(50);
-
-        if (error) throw error;
-
-        const processedData: EmotionHistoryData[] = data?.map(item => ({
-          timestamp: new Date(item.created_at).toLocaleDateString(),
-          happy: Math.random() * 0.8 + 0.1,
-          sad: Math.random() * 0.4,
-          angry: Math.random() * 0.3,
-          calm: Math.random() * 0.7 + 0.2,
-          excited: Math.random() * 0.6,
-          anxious: Math.random() * 0.5,
-        })) || [];
-
-        setEmotionHistory(processedData);
-      } else {
-        // Mock data for demo
-        const mockData: EmotionHistoryData[] = Array.from({ length: 30 }, (_, i) => ({
-          timestamp: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toLocaleDateString(),
-          happy: Math.random() * 0.8 + 0.1,
-          sad: Math.random() * 0.4,
-          angry: Math.random() * 0.3,
-          calm: Math.random() * 0.7 + 0.2,
-          excited: Math.random() * 0.6,
-          anxious: Math.random() * 0.5,
-        }));
-        setEmotionHistory(mockData);
-      }
+      // Mock data for demo (in production, this would come from database)
+      const mockData: EmotionHistoryData[] = Array.from({ length: 30 }, (_, i) => ({
+        timestamp: new Date(Date.now() - (29 - i) * 24 * 60 * 60 * 1000).toLocaleDateString(),
+        happy: Math.random() * 0.8 + 0.1,
+        sad: Math.random() * 0.4,
+        angry: Math.random() * 0.3,
+        calm: Math.random() * 0.7 + 0.2,
+        excited: Math.random() * 0.6,
+        anxious: Math.random() * 0.5,
+      }));
+      setEmotionHistory(mockData);
     } catch (error) {
       console.error('Error loading emotion history:', error);
     }
@@ -226,7 +203,7 @@ const DashboardPage: React.FC = () => {
     const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
     const hours = Array.from({ length: 24 }, (_, i) => i);
     
-    const mockHeatmap = days.flatMap(day =>
+    const mockHeatmap: HeatmapData[] = days.flatMap(day =>
       hours.map(hour => ({
         day,
         hour,
@@ -310,16 +287,17 @@ const DashboardPage: React.FC = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: index * 0.1 }}
-            className="relative bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 overflow-hidden group hover:border-white/20 transition-all duration-300"
+            className="relative border-2 border-gray-600/30 rounded-2xl p-6 overflow-hidden group hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10 bg-gray-900/40 backdrop-blur-sm"
           >
-            <div className={`absolute inset-0 bg-gradient-to-r ${stat.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`} />
+            {/* Inner glow effect */}
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl" />
             
             <div className="relative z-10">
               <div className="flex items-center justify-between mb-4">
-                <div className={`w-12 h-12 bg-gradient-to-r ${stat.color} rounded-xl flex items-center justify-center`}>
-                  <stat.icon className="w-6 h-6 text-white" />
+                <div className={`w-12 h-12 border-2 border-purple-500/30 rounded-xl flex items-center justify-center group-hover:border-purple-500/60 transition-colors duration-300 bg-purple-500/10 backdrop-blur-sm`}>
+                  <stat.icon className="w-6 h-6 text-purple-400 group-hover:text-purple-300 transition-colors duration-300" />
                 </div>
-                <span className="text-xs text-green-400 font-medium">{stat.change}</span>
+                <span className="text-xs text-green-400 font-medium bg-green-400/10 px-2 py-1 rounded-full">{stat.change}</span>
               </div>
               
               <h3 className="text-2xl font-bold text-white mb-1">{stat.value}</h3>
@@ -336,12 +314,18 @@ const DashboardPage: React.FC = () => {
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.2 }}
-          className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+          className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10 bg-gray-900/40 backdrop-blur-sm relative overflow-hidden"
         >
-          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-            <TrendingUp className="w-5 h-5" />
-            Emotion Timeline (30 days)
-          </h3>
+          {/* Inner glow effect */}
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-blue-500/5 opacity-0 hover:opacity-100 transition-opacity duration-300 rounded-2xl" />
+          
+          <div className="relative z-10">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <div className="border-2 border-purple-500/30 rounded-lg p-1 bg-purple-500/10 backdrop-blur-sm">
+                <TrendingUp className="w-5 h-5 text-purple-400" />
+              </div>
+              Emotion Timeline (30 days)
+            </h3>
           
           <div className="h-64">
             <ResponsiveContainer width="100%" height="100%">
@@ -363,6 +347,7 @@ const DashboardPage: React.FC = () => {
               </LineChart>
             </ResponsiveContainer>
           </div>
+          </div>
         </motion.div>
 
         {/* Agent Performance */}
@@ -370,19 +355,21 @@ const DashboardPage: React.FC = () => {
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.3 }}
-          className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+          className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
         >
           <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-            <Bot className="w-5 h-5" />
+            <div className="border-2 border-purple-500/30 rounded-lg p-1">
+              <Bot className="w-5 h-5 text-purple-400" />
+            </div>
             Agent Performance
           </h3>
           
           <div className="space-y-4">
-            {agents.slice(0, 5).map((agent, index) => (
-              <div key={agent.id} className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
+            {agents.slice(0, 5).map((agent) => (
+              <div key={agent.id} className="flex items-center justify-between p-3 border-2 border-gray-600/30 rounded-lg hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300">
                 <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
-                    <Bot className="w-4 h-4 text-white" />
+                  <div className="w-8 h-8 border-2 border-purple-500/30 rounded-lg flex items-center justify-center">
+                    <Bot className="w-4 h-4 text-purple-400" />
                   </div>
                   <div>
                     <p className="text-white font-medium text-sm">{agent.name}</p>
@@ -413,16 +400,18 @@ const DashboardPage: React.FC = () => {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.4 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-          <Clock className="w-5 h-5" />
+          <div className="border-2 border-purple-500/30 rounded-lg p-1">
+            <Clock className="w-5 h-5 text-purple-400" />
+          </div>
           Recent Activity
         </h3>
         
         <div className="space-y-3">
           {activityLogs.slice(0, 5).map((log) => (
-            <div key={log.id} className="flex items-start gap-3 p-3 bg-white/5 rounded-lg">
+            <div key={log.id} className="flex items-start gap-3 p-3 border-2 border-gray-600/30 rounded-lg hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300">
               <div className={`w-2 h-2 rounded-full mt-2 ${
                 log.level === 'error' ? 'bg-red-400' : 
                 log.level === 'warning' ? 'bg-yellow-400' : 'bg-blue-400'
@@ -449,10 +438,12 @@ const DashboardPage: React.FC = () => {
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-          <BarChart3 className="w-5 h-5" />
+          <div className="border-2 border-purple-500/30 rounded-lg p-1">
+            <BarChart3 className="w-5 h-5 text-purple-400" />
+          </div>
           Emotion Heatmap (Weekly Pattern)
         </h3>
         
@@ -490,7 +481,7 @@ const DashboardPage: React.FC = () => {
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.1 }}
-          className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+          className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
         >
           <h3 className="text-lg font-semibold text-white mb-4">Emotion Distribution</h3>
           
@@ -521,7 +512,7 @@ const DashboardPage: React.FC = () => {
           initial={{ opacity: 0, x: 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.2 }}
-          className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+          className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
         >
           <h3 className="text-lg font-semibold text-white mb-4">Emotion Trends</h3>
           
@@ -556,11 +547,13 @@ const DashboardPage: React.FC = () => {
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <div className="flex items-center justify-between mb-6">
           <h3 className="text-lg font-semibold text-white flex items-center gap-2">
-            <Bot className="w-5 h-5" />
+            <div className="border-2 border-purple-500/30 rounded-lg p-1">
+              <Bot className="w-5 h-5 text-purple-400" />
+            </div>
             Your AI Agents
           </h3>
           <Link
@@ -596,11 +589,11 @@ const DashboardPage: React.FC = () => {
                 key={agent.id}
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
-                className="relative bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 group hover:border-white/20 transition-all duration-300"
+                className="relative border-2 border-gray-600/30 rounded-2xl p-6 group hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
               >
                 <div className="flex items-start justify-between mb-4">
-                  <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
-                    <Bot className="w-6 h-6 text-white" />
+                  <div className="w-12 h-12 border-2 border-purple-500/30 rounded-xl flex items-center justify-center group-hover:border-purple-500/60 transition-colors duration-300">
+                    <Bot className="w-6 h-6 text-purple-400 group-hover:text-purple-300 transition-colors duration-300" />
                   </div>
                   <div className="relative">
                     <button className="p-2 text-gray-400 hover:text-white transition-colors">
@@ -666,11 +659,13 @@ const DashboardPage: React.FC = () => {
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <div className="flex items-center justify-between mb-6">
           <h3 className="text-lg font-semibold text-white flex items-center gap-2">
-            <Crown className="w-5 h-5" />
+            <div className="border-2 border-purple-500/30 rounded-lg p-1">
+              <Crown className="w-5 h-5 text-purple-400" />
+            </div>
             Current Subscription
           </h3>
           <Link
@@ -719,10 +714,12 @@ const DashboardPage: React.FC = () => {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
-          <BarChart3 className="w-5 h-5" />
+          <div className="border-2 border-purple-500/30 rounded-lg p-1">
+            <BarChart3 className="w-5 h-5 text-purple-400" />
+          </div>
           Usage Statistics
         </h3>
 
@@ -784,10 +781,12 @@ const DashboardPage: React.FC = () => {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.2 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-          <CreditCard className="w-5 h-5" />
+          <div className="border-2 border-purple-500/30 rounded-lg p-1">
+            <CreditCard className="w-5 h-5 text-purple-400" />
+          </div>
           Payment & Billing
         </h3>
         
@@ -829,11 +828,13 @@ const DashboardPage: React.FC = () => {
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <div className="flex items-center justify-between mb-6">
           <h3 className="text-lg font-semibold text-white flex items-center gap-2">
-            <AlertCircle className="w-5 h-5" />
+            <div className="border-2 border-purple-500/30 rounded-lg p-1">
+              <AlertCircle className="w-5 h-5 text-purple-400" />
+            </div>
             System Activity Log
           </h3>
           <div className="flex items-center gap-2 text-sm text-gray-400">
@@ -843,13 +844,12 @@ const DashboardPage: React.FC = () => {
         </div>
 
         <div className="space-y-4 max-h-96 overflow-y-auto">
-          {activityLogs.map((log) => (
-            <motion.div
-              key={log.id}
-              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              className="flex items-start gap-4 p-4 bg-white/5 rounded-lg border border-white/10"
-            >
+          {activityLogs.map((log) => (              <motion.div
+                key={log.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                className="flex items-start gap-4 p-4 border-2 border-gray-600/30 rounded-lg hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300"
+              >
               <div className={`w-3 h-3 rounded-full mt-1 ${
                 log.level === 'error' ? 'bg-red-400' : 
                 log.level === 'warning' ? 'bg-yellow-400' : 'bg-blue-400'
@@ -886,16 +886,18 @@ const DashboardPage: React.FC = () => {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1 }}
-        className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
+        className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10"
       >
         <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
-          <Shield className="w-5 h-5" />
+          <div className="border-2 border-purple-500/30 rounded-lg p-1">
+            <Shield className="w-5 h-5 text-purple-400" />
+          </div>
           System Health
         </h3>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div className="text-center">
-            <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
+            <div className="w-16 h-16 border-2 border-green-500/30 rounded-full flex items-center justify-center mx-auto mb-3 hover:border-green-500/60 transition-colors duration-300">
               <Activity className="w-8 h-8 text-green-400" />
             </div>
             <div className="text-2xl font-bold text-white mb-1">99.9%</div>
@@ -903,7 +905,7 @@ const DashboardPage: React.FC = () => {
           </div>
 
           <div className="text-center">
-            <div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
+            <div className="w-16 h-16 border-2 border-blue-500/30 rounded-full flex items-center justify-center mx-auto mb-3 hover:border-blue-500/60 transition-colors duration-300">
               <Zap className="w-8 h-8 text-blue-400" />
             </div>
             <div className="text-2xl font-bold text-white mb-1">0.3s</div>
@@ -911,7 +913,7 @@ const DashboardPage: React.FC = () => {
           </div>
 
           <div className="text-center">
-            <div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
+            <div className="w-16 h-16 border-2 border-purple-500/30 rounded-full flex items-center justify-center mx-auto mb-3 hover:border-purple-500/60 transition-colors duration-300">
               <Globe className="w-8 h-8 text-purple-400" />
             </div>
             <div className="text-2xl font-bold text-white mb-1">5</div>
@@ -942,42 +944,74 @@ const DashboardPage: React.FC = () => {
   }
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -20 }}
-      className="p-6 max-w-7xl mx-auto"
-    >
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 relative">
+      {/* Enhanced Background Effects */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Multiple gradient overlays for better lighting */}
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5" />
+        <div className="absolute top-1/4 right-0 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl opacity-60 animate-pulse" />
+        <div className="absolute bottom-1/4 left-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl opacity-60 animate-pulse" style={{ animationDelay: '1s' }} />
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full blur-3xl opacity-30"
+             style={{
+               background: 'radial-gradient(circle, rgba(139,92,246,0.1) 0%, rgba(59,130,246,0.05) 50%, transparent 100%)'
+             }} />
+        
+        {/* Subtle grid pattern */}
+        <div className="absolute inset-0" 
+             style={{
+               backgroundImage: `
+                 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+               `,
+               backgroundSize: '50px 50px'
+             }} />
+             
+        {/* Additional ambient light spots */}
+        <div className="absolute top-0 right-1/4 w-64 h-64 bg-cyan-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-pink-500/5 rounded-full blur-2xl opacity-40" />
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        className="relative z-10 p-6 max-w-7xl mx-auto"
+      >
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-white mb-2">
+        <h1 className="text-3xl font-bold text-white mb-2 drop-shadow-lg">
           {t('dashboard', 'Dashboard')}
         </h1>
-        <p className="text-gray-400">
+        <p className="text-gray-300">
           Monitor your AI agents, analyze emotions, and track performance
         </p>
       </div>
 
       {/* Tab Navigation */}
       <div className="mb-8">
-        <div className="flex space-x-1 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-1">
-          {tabs.map((tab) => {
-            const Icon = tab.icon;
-            return (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={`flex items-center gap-2 px-4 py-3 rounded-xl font-medium transition-all duration-300 ${
-                  activeTab === tab.id
-                    ? 'bg-gradient-to-r from-purple-500 to-blue-500 text-white shadow-lg'
-                    : 'text-gray-400 hover:text-white hover:bg-white/10'
-                }`}
-              >
-                <Icon className="w-4 h-4" />
-                <span className="hidden sm:block">{tab.label}</span>
-              </button>
-            );
-          })}
+        <div className="flex space-x-1 border-2 border-gray-600/30 rounded-2xl p-1 hover:border-purple-500/50 transition-colors duration-300 bg-gray-900/40 backdrop-blur-sm relative overflow-hidden">
+          {/* Background glow for tabs */}
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 via-blue-500/5 to-purple-500/5 rounded-2xl" />
+          
+          <div className="relative z-10 flex space-x-1 w-full">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`flex items-center gap-2 px-4 py-3 rounded-xl font-medium transition-all duration-300 ${
+                    activeTab === tab.id
+                      ? 'bg-gradient-to-r from-purple-500 to-blue-500 text-white shadow-lg shadow-purple-500/25'
+                      : 'text-gray-400 hover:text-white hover:bg-gray-800/50 hover:shadow-md'
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  <span className="hidden sm:block">{tab.label}</span>
+                </button>
+              );
+            })}
+          </div>
         </div>
       </div>
 
@@ -989,7 +1023,8 @@ const DashboardPage: React.FC = () => {
         {activeTab === 'subscription' && renderSubscriptionTab()}
         {activeTab === 'activity' && renderActivityLogTab()}
       </div>
-    </motion.div>
+      </motion.div>
+    </div>
   );
 };
 
diff --git a/apps/web-frontend/src/pages/DocsPage.tsx b/apps/web-frontend/src/pages/DocsPage.tsx
index 03c983e..e3c78d8 100644
--- a/apps/web-frontend/src/pages/DocsPage.tsx
+++ b/apps/web-frontend/src/pages/DocsPage.tsx
@@ -60,10 +60,10 @@ const DocsPage: React.FC = () => {
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: index * 0.1 }}
-                  className="group relative bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
+                  className="group relative border-2 border-gray-600/30 rounded-xl p-6 hover:border-purple-500/70 transition-all duration-300 cursor-pointer hover:shadow-lg hover:shadow-purple-500/20"
                 >
-                  {/* Hover gradient background */}
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300" />
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300" />
                   
                   <div className="relative z-10">
                     <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
diff --git a/apps/web-frontend/src/pages/HomePage.tsx b/apps/web-frontend/src/pages/HomePage.tsx
index 31c28df..bb8fb05 100644
--- a/apps/web-frontend/src/pages/HomePage.tsx
+++ b/apps/web-frontend/src/pages/HomePage.tsx
@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { 
   Brain, 
-  Mic, 
   Video, 
   Heart, 
   Zap, 
@@ -12,8 +11,6 @@ import {
   ArrowRight,
   Play,
   Star,
-  Users,
-  MessageSquare,
   CheckCircle,
   Sparkles,
   Headphones,
@@ -264,9 +261,9 @@ const HomePage: React.FC = () => {
                 viewport={{ once: true }}
                 className="group relative"
               >
-                <div className="relative p-8 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:border-purple-500/50 transition-all duration-300 h-full">
-                  {/* Gradient background on hover */}
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                <div className="relative p-8 border-2 border-gray-600/30 rounded-2xl hover:border-purple-500/70 transition-all duration-300 h-full group-hover:shadow-lg group-hover:shadow-purple-500/20">
+                  {/* Subtle background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
                   
                   <div className="relative z-10">
                     <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
@@ -311,8 +308,11 @@ const HomePage: React.FC = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.6, delay: index * 0.1 }}
                 viewport={{ once: true }}
-                className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6"
+                className="border-2 border-gray-600/30 rounded-2xl p-6 hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20 relative"
               >
+                {/* Subtle background on hover */}
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                <div className="relative z-10">
                 <div className="flex items-center gap-4 mb-4">
                   <div className="text-3xl">{testimonial.avatar}</div>
                   <div>
@@ -326,6 +326,7 @@ const HomePage: React.FC = () => {
                     <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />
                   ))}
                 </div>
+                </div>
               </motion.div>
             ))}
           </div>
@@ -342,7 +343,10 @@ const HomePage: React.FC = () => {
             viewport={{ once: true }}
             className="max-w-4xl mx-auto text-center"
           >
-            <div className="relative p-12 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-3xl backdrop-blur-sm border border-white/10">
+            <div className="relative p-12 border-2 border-gray-600/30 rounded-3xl hover:border-purple-500/70 transition-all duration-300 group hover:shadow-lg hover:shadow-purple-500/20">
+              {/* Subtle background on hover */}
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
+              <div className="relative z-10">
               <h2 className="text-4xl md:text-5xl font-bold mb-6">
                 <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
                   {t('cta_title', 'Start with Customer Support Today')}
@@ -370,52 +374,11 @@ const HomePage: React.FC = () => {
                   {t('view_roadmap', 'View Industry Roadmap')}
                 </Link>
               </div>
+              </div>
             </div>
           </motion.div>
         </div>
       </section>
-      {/* Custom Bolt.new Badge Styles */}
-      <style>{`
-        .bolt-badge {
-          transition: all 0.3s ease;
-        }
-        @keyframes badgeIntro {
-          0% { transform: scale(0.3); opacity: 0; }
-          50% { transform: scale(1.05); }
-          70% { transform: scale(0.9); }
-          100% { transform: scale(1); opacity: 1; }
-        }
-        .bolt-badge-intro {
-          animation: badgeIntro 0.8s ease-out 1s both;
-        }
-        .bolt-badge-intro.animated {
-          animation: none;
-        }
-        @keyframes badgeHover {
-          0% { transform: scale(1) rotate(0deg); }
-          50% { transform: scale(1.1) rotate(22deg); }
-          100% { transform: scale(1) rotate(0deg); }
-        }
-        .bolt-badge:hover {
-          animation: badgeHover 0.6s ease-in-out;
-        }
-      `}</style>
-      {/* Custom Bolt.new Badge - bottom right, smaller, simple circle border */}
-      <div className="fixed bottom-4 right-4 z-50">
-        <a
-          href="https://bolt.new/?rid=os72mi"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block transition-all duration-300 hover:shadow-2xl"
-        >
-          <img
-            src="https://storage.bolt.army/black_circle_360x360.png"
-            alt="Built with Bolt.new badge"
-            className="w-14 h-14 md:w-20 md:h-20 rounded-full shadow-lg border-4 border-white bolt-badge bolt-badge-intro"
-            onAnimationEnd={e => e.currentTarget.classList.add('animated')}
-          />
-        </a>
-      </div>
     </LandingLayout>
   );
 };
diff --git a/apps/web-frontend/src/pages/SettingsPage.tsx b/apps/web-frontend/src/pages/SettingsPage.tsx
index aefbc1f..a57ea40 100644
--- a/apps/web-frontend/src/pages/SettingsPage.tsx
+++ b/apps/web-frontend/src/pages/SettingsPage.tsx
@@ -28,7 +28,7 @@ const SettingsPage: React.FC = () => {
                   </label>
                   <input
                     type="text"
-                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     placeholder="John"
                   />
                 </div>
@@ -38,7 +38,7 @@ const SettingsPage: React.FC = () => {
                   </label>
                   <input
                     type="text"
-                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     placeholder="Doe"
                   />
                 </div>
@@ -48,7 +48,7 @@ const SettingsPage: React.FC = () => {
                   </label>
                   <input
                     type="email"
-                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     placeholder="john@example.com"
                   />
                 </div>
@@ -58,7 +58,7 @@ const SettingsPage: React.FC = () => {
                   </label>
                   <textarea
                     rows={3}
-                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     placeholder="Tell us about yourself..."
                   />
                 </div>
@@ -108,17 +108,17 @@ const SettingsPage: React.FC = () => {
                     <input
                       type="password"
                       placeholder="Current password"
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     />
                     <input
                       type="password"
                       placeholder="New password"
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     />
                     <input
                       type="password"
                       placeholder="Confirm new password"
-                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all"
                     />
                     <button className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
                       Update Password
@@ -182,7 +182,7 @@ const SettingsPage: React.FC = () => {
                   <label className="block text-sm font-medium text-gray-300 mb-2">
                     Language
                   </label>
-                  <select className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                  <select className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all">
                     <option>English (US)</option>
                     <option>Spanish</option>
                     <option>French</option>
@@ -194,7 +194,7 @@ const SettingsPage: React.FC = () => {
                   <label className="block text-sm font-medium text-gray-300 mb-2">
                     Time Zone
                   </label>
-                  <select className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                  <select className="w-full px-4 py-2 bg-gray-700/30 border-2 border-gray-600/30 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500/60 transition-all">
                     <option>UTC-8 (Pacific Time)</option>
                     <option>UTC-5 (Eastern Time)</option>
                     <option>UTC+0 (GMT)</option>
@@ -246,40 +246,67 @@ const SettingsPage: React.FC = () => {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className="p-6 max-w-7xl mx-auto"
+      className="relative min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900"
     >
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-white mb-2">Settings</h1>
-        <p className="text-gray-400">Manage your account preferences and configuration</p>
+      {/* Enhanced distributed background effects - no centralized glow */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Multiple gradient overlays for better distributed lighting */}
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/3 via-transparent to-blue-500/3" />
+        <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-cyan-500/3 rounded-full blur-xl opacity-30" />
+        <div className="absolute bottom-1/3 left-1/4 w-48 h-48 bg-pink-500/3 rounded-full blur-xl opacity-30" />
+        
+        {/* Subtle grid pattern */}
+        <div className="absolute inset-0" 
+             style={{
+               backgroundImage: `
+                 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+               `,
+               backgroundSize: '50px 50px'
+             }} />
       </div>
+      
+      <div className="relative z-10 p-6 max-w-7xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-white mb-2 text-shadow">Settings</h1>
+          <p className="text-gray-300">Manage your account preferences and configuration</p>
+        </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Sidebar */}
         <div className="lg:col-span-1">
-          <nav className="space-y-2">
-            {tabs.map((tab) => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-colors ${
-                    activeTab === tab.id
-                      ? 'bg-blue-600 text-white'
-                      : 'text-gray-300 hover:bg-gray-700/50'
-                  }`}
-                >
-                  <Icon className="w-5 h-5" />
-                  {tab.label}
-                </button>
+          <div className="dashboard-container p-4">
+            <nav className="space-y-2">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-all border-2 ${
+                      activeTab === tab.id
+                        ? 'bg-blue-600/20 border-blue-500/50 text-white shadow-lg shadow-blue-500/20'
+                        : 'border-gray-600/30 text-gray-300 hover:bg-white/5 hover:border-purple-500/30'
+                    }`}
+                  >
+                    <div className={`dashboard-icon-container p-1 ${
+                      activeTab === tab.id ? 'border-blue-500/60' : ''
+                    }`}>
+                      <Icon className="w-5 h-5" />
+                    </div>
+                    {tab.label}
+                  </button>
               );
             })}
-          </nav>
+            </nav>
+          </div>
         </div>
 
         {/* Content */}
         <div className="lg:col-span-3">
-          <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+          <div className="dashboard-container p-6">
             {renderTabContent()}
             
             {/* Save Button */}
@@ -300,6 +327,7 @@ const SettingsPage: React.FC = () => {
           </div>
         </div>
       </div>
+      </div>
     </motion.div>
   );
 };
diff --git a/apps/web-frontend/src/pages/SponsorsPage.tsx b/apps/web-frontend/src/pages/SponsorsPage.tsx
index d555cb0..63c0f4d 100644
--- a/apps/web-frontend/src/pages/SponsorsPage.tsx
+++ b/apps/web-frontend/src/pages/SponsorsPage.tsx
@@ -5,16 +5,11 @@ import {
   Heart, 
   Star, 
   Award,
-  Zap,
-  Shield,
   Database,
-  Globe,
   Mic,
   Video,
   Code,
-  Cloud,
-  Bug,
-  CreditCard
+  Cloud
 } from 'lucide-react';
 import LandingLayout from '../components/landing/LandingLayout';
 import { useLanguageStore } from '../stores/languageStore';
@@ -23,14 +18,6 @@ const SponsorsPage: React.FC = () => {
   const { t } = useLanguageStore();
 
   const sponsors = [
-    {
-      name: 'bolt.new',
-      description: t('bolt_desc', 'AI-powered development platform that made this project possible'),
-      icon: Zap,
-      url: 'https://bolt.new',
-      tier: 'platinum',
-      contribution: t('bolt_contribution', 'Development Platform & AI Assistance')
-    },
     {
       name: 'Supabase',
       description: t('supabase_desc', 'Open source Firebase alternative providing our backend infrastructure'),
@@ -149,9 +136,9 @@ const SponsorsPage: React.FC = () => {
                   viewport={{ once: true }}
                   className="group relative"
                 >
-                  <div className="relative p-8 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl hover:border-purple-500/50 transition-all duration-300 h-full">
-                    {/* Gradient background on hover */}
-                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
+                  <div className="relative p-8 border-2 border-gray-600/30 rounded-2xl hover:border-purple-500/70 transition-all duration-300 h-full group-hover:shadow-lg group-hover:shadow-purple-500/20">
+                    {/* Subtle background on hover */}
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300" />
                     
                     {/* Tier badge */}
                     <div className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold rounded-full">
@@ -199,7 +186,9 @@ const SponsorsPage: React.FC = () => {
             viewport={{ once: true }}
             className="max-w-4xl mx-auto text-center"
           >
-            <div className="relative p-12 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-3xl backdrop-blur-sm border border-white/10">
+            <div className="relative p-12 border-2 border-gray-600/30 rounded-3xl hover:border-purple-500/70 transition-all duration-300 group">
+              {/* Subtle background on hover */}
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 rounded-3xl transition-opacity duration-300" />
               <h2 className="text-4xl font-bold mb-6">
                 <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
                   {t('thank_you_title', 'Thank You')}
diff --git a/apps/web-frontend/src/pages/SubscriptionPage.tsx b/apps/web-frontend/src/pages/SubscriptionPage.tsx
index 0b51019..8172510 100644
--- a/apps/web-frontend/src/pages/SubscriptionPage.tsx
+++ b/apps/web-frontend/src/pages/SubscriptionPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Check, Crown, Zap, Star } from 'lucide-react';
+import { Check, Star } from 'lucide-react';
 
 const SubscriptionPage: React.FC = () => {
   const plans = [
@@ -65,16 +65,37 @@ const SubscriptionPage: React.FC = () => {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className="p-6 max-w-7xl mx-auto"
+      className="relative min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900"
     >
-      <div className="text-center mb-12">
-        <h1 className="text-4xl font-bold text-white mb-4">
-          Choose Your Plan
-        </h1>
-        <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-          Unlock the full potential of AI-powered conversations with our flexible pricing plans
-        </p>
+      {/* Enhanced distributed background effects - no centralized glow */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Multiple gradient overlays for better distributed lighting */}
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/3 via-transparent to-blue-500/3" />
+        <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/5 rounded-full blur-2xl opacity-40" />
+        <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-cyan-500/3 rounded-full blur-xl opacity-30" />
+        <div className="absolute bottom-1/3 left-1/4 w-48 h-48 bg-pink-500/3 rounded-full blur-xl opacity-30" />
+        
+        {/* Subtle grid pattern */}
+        <div className="absolute inset-0" 
+             style={{
+               backgroundImage: `
+                 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+               `,
+               backgroundSize: '50px 50px'
+             }} />
       </div>
+      
+      <div className="relative z-10 p-6 max-w-7xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-white mb-4 text-shadow">
+            Choose Your Plan
+          </h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            Unlock the full potential of AI-powered conversations with our flexible pricing plans
+          </p>
+        </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
         {plans.map((plan, index) => (
@@ -83,8 +104,10 @@ const SubscriptionPage: React.FC = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: index * 0.1 }}
-            className={`relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border ${
-              plan.popular ? 'border-blue-500 ring-2 ring-blue-500/20' : 'border-gray-700'
+            className={`relative dashboard-container p-8 border-2 ${
+              plan.popular 
+                ? 'border-blue-500/60 ring-2 ring-blue-500/20 shadow-lg shadow-blue-500/20' 
+                : 'border-gray-600/30 hover:border-purple-500/30'
             }`}
           >
             {plan.popular && (
@@ -163,6 +186,7 @@ const SubscriptionPage: React.FC = () => {
           </div>
         </div>
       </div>
+      </div>
     </motion.div>
   );
 };
diff --git a/apps/web-frontend/src/stores/languageStore.ts b/apps/web-frontend/src/stores/languageStore.ts
index 1282572..6f3d96b 100644
--- a/apps/web-frontend/src/stores/languageStore.ts
+++ b/apps/web-frontend/src/stores/languageStore.ts
@@ -156,8 +156,6 @@ const defaultTranslations: Translation = {
   'sponsor_opportunity': 'Join our mission to create emotionally intelligent AI. Partner with us to shape the future of human-computer interaction.',
 
   // Sponsor descriptions
-  'bolt_desc': 'AI-powered development platform that made this project possible',
-  'bolt_contribution': 'Development Platform & AI Assistance',
   'supabase_desc': 'Open source Firebase alternative providing our backend infrastructure',
   'supabase_contribution': 'Database, Auth & Real-time Infrastructure',
   'elevenlabs_desc': 'AI voice technology powering our emotion detection and synthesis',
diff --git a/core/config/package.json b/core/config/package.json
index 57c4211..56e89ac 100644
--- a/core/config/package.json
+++ b/core/config/package.json
@@ -16,11 +16,10 @@
     "dotenv": "^16.3.1"
   },
   "devDependencies": {
-    "@types/dotenv": "^8.2.3",
     "@types/node": "^20.8.0",
-    "typescript": "^5.2.2",
+    "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "eslint": "^8.57.0"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {},
   "files": [
diff --git a/core/config/tsconfig.json b/core/config/tsconfig.json
index 626ee03..520b641 100644
--- a/core/config/tsconfig.json
+++ b/core/config/tsconfig.json
@@ -15,7 +15,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "types": ["node", "dotenv"]
+    "types": ["node"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist", "**/*.test.ts"]
diff --git a/core/emotionware/package.json b/core/emotionware/package.json
index 2ab2947..85467f9 100644
--- a/core/emotionware/package.json
+++ b/core/emotionware/package.json
@@ -19,7 +19,6 @@
     "@types/ws": "^8.18.1"
   },
   "devDependencies": {
-    "@types/dotenv": "^8.2.3",
     "@types/node": "^20.8.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
diff --git a/core/memory/package.json b/core/memory/package.json
index 7ff27bc..ccef925 100644
--- a/core/memory/package.json
+++ b/core/memory/package.json
@@ -19,7 +19,6 @@
     "langchain": "^0.1.25"
   },
   "devDependencies": {
-    "@types/dotenv": "^8.2.3",
     "@types/node": "^20.8.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..0b59c17
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,19 @@
+# Netlify configuration file
+[build]
+  # Directory with the built files (relative to root)
+  publish = "apps/web-frontend/dist"
+  
+  # Build command to create the web frontend
+  command = "pnpm install --no-frozen-lockfile && pnpm build:core && pnpm build --filter=web-frontend"
+
+# Redirects for SPA routing
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+# Environment variable configuration
+[build.environment]
+  NODE_VERSION = "18"
+  NPM_FLAGS = "--version"
+  PNPM_VERSION = "8.15.0"
\ No newline at end of file
diff --git a/package.json b/package.json
index 128dc5f..3d72310 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
-    "@types/dotenv": "^8.2.3",
     "@types/express": "^4.17.21",
     "@types/multer": "^1.4.13",
     "@types/node": "^20.19.1",
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index b6504aa..dcd2be8 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.3.5",
+    "@types/node": "^20.19.1",
     "typescript": "^5.2.2",
     "eslint": "^8.57.0"
   },
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index a0d383b..8cc573b 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.6.0"
   },
   "devDependencies": {
+    "@types/node": "^20.19.1",
     "typescript": "^5.2.2",
     "jest": "^29.7.0",
     "eslint": "^8.57.0"
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 87abb5d..8d76366 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,6 +19,7 @@
   "devDependencies": {
     "@types/react": "^18.3.5",
     "typescript": "^5.2.2",
+    "@types/node": "^20.19.1",
     "eslint": "^8.57.0"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7bf0cb0..31ecca4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,9 +33,6 @@ importers:
       '@types/cors':
         specifier: ^2.8.17
         version: 2.8.19
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/express':
         specifier: ^4.17.21
         version: 4.17.23
@@ -127,9 +124,6 @@ importers:
       '@types/cors':
         specifier: ^2.8.17
         version: 2.8.19
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/express':
         specifier: ^4.17.21
         version: 4.17.23
@@ -139,9 +133,6 @@ importers:
       '@types/node':
         specifier: ^20.8.0
         version: 20.19.2
-      dotenv-cli:
-        specifier: ^7.3.0
-        version: 7.4.4
       eslint:
         specifier: ^8.57.0
         version: 8.57.1
@@ -149,7 +140,7 @@ importers:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@20.19.2)
       tsx:
-        specifier: ^4.0.0
+        specifier: ^4.20.3
         version: 4.20.3
       typescript:
         specifier: ^5.2.2
@@ -251,9 +242,6 @@ importers:
         specifier: ^4.4.0
         version: 4.5.7(@types/react@18.3.23)(react@18.3.1)
     devDependencies:
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/node':
         specifier: ^20.8.0
         version: 20.19.2
@@ -272,6 +260,12 @@ importers:
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.1
+      jest:
+        specifier: ^29.7.0
+        version: 29.7.0(@types/node@20.19.2)
       postcss:
         specifier: ^8.5.4
         version: 8.5.6
@@ -356,9 +350,6 @@ importers:
         specifier: ^16.3.1
         version: 16.6.1
     devDependencies:
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/node':
         specifier: ^20.8.0
         version: 20.19.2
@@ -390,9 +381,6 @@ importers:
         specifier: ^8.18.1
         version: 8.18.1
     devDependencies:
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/node':
         specifier: ^20.8.0
         version: 20.19.2
@@ -424,9 +412,6 @@ importers:
         specifier: ^0.1.25
         version: 0.1.37(@supabase/supabase-js@2.50.2)(openai@4.104.0)
     devDependencies:
-      '@types/dotenv':
-        specifier: ^8.2.3
-        version: 8.2.3
       '@types/node':
         specifier: ^20.8.0
         version: 20.19.2
@@ -508,6 +493,9 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1
     devDependencies:
+      '@types/node':
+        specifier: ^20.19.1
+        version: 20.19.2
       '@types/react':
         specifier: ^18.3.5
         version: 18.3.23
@@ -524,6 +512,9 @@ importers:
         specifier: ^1.6.0
         version: 1.10.0
     devDependencies:
+      '@types/node':
+        specifier: ^20.19.1
+        version: 20.19.2
       eslint:
         specifier: ^8.57.0
         version: 8.57.1
@@ -549,6 +540,9 @@ importers:
         specifier: ^2.0.0
         version: 2.6.0
     devDependencies:
+      '@types/node':
+        specifier: ^20.19.1
+        version: 20.19.2
       '@types/react':
         specifier: ^18.3.5
         version: 18.3.23
@@ -3135,13 +3129,6 @@ packages:
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
     dev: false
 
-  /@types/dotenv@8.2.3:
-    resolution: {integrity: sha512-g2FXjlDX/cYuc5CiQvyU/6kkbP1JtmGzh0obW50zD7OKeILVL0NSpPWLXVfqoAGQjom2/SLLx9zHq0KXvD6mbw==}
-    deprecated: This is a stub types definition. dotenv provides its own type definitions, so you do not need this installed.
-    dependencies:
-      dotenv: 16.6.1
-    dev: true
-
   /@types/estree@1.0.8:
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
     dev: true
@@ -4127,14 +4114,17 @@ packages:
       dotenv: 16.6.1
       dotenv-expand: 10.0.0
       minimist: 1.2.8
+    dev: false
 
   /dotenv-expand@10.0.0:
     resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
     engines: {node: '>=12'}
+    dev: false
 
   /dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
+    dev: false
 
   /dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
@@ -6171,6 +6161,7 @@ packages:
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
 
   /minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}