diff --git a/src/components/EnhancedChatInterface.tsx b/src/components/EnhancedChatInterface.tsx
index 82eaab6e..ea3110b3 100644
--- a/src/components/EnhancedChatInterface.tsx
+++ b/src/components/EnhancedChatInterface.tsx
@@ -17,7 +17,7 @@ import { toast } from 'sonner';
 
 // Import extracted components
 import { ChatSidebar } from './chat/ChatSidebar';
-import { ChatMessage } from './chat/ChatMessage';
+import { EnhancedChatMessage } from './chat/EnhancedChatMessage';
 import { ChatInput } from './chat/ChatInput';
 import { WelcomeScreen } from './chat/WelcomeScreen';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -398,19 +398,30 @@ const EnhancedChatInterface: React.FC = () => {
                 {/* Messages area */}
                 <ScrollArea className="flex-1 custom-scrollbar">
                   <div className="p-6 space-y-6 max-w-4xl mx-auto">
-                    {memoizedMessages.map((message, index) => (
-                      <ChatMessage
-                        key={message._id}
-                        message={message}
-                        user={user}
-                        copiedMessage={copiedMessage}
-                        setCopiedMessage={setCopiedMessage}
-                        isLast={index === memoizedMessages.length - 1}
-                        handleApproveDiagram={handleApproveDiagram}
-                        handleRequestDiagramChanges={handleRequestDiagramChanges}
-                        isSubmittingDiagram={isSubmittingDiagram}
-                      />
-                    ))}
+                    {memoizedMessages.map((message, index) => {
+                      const isUser = message.role === 'user';
+                      const isFirstInGroup = index === 0 || memoizedMessages[index - 1].role !== message.role;
+
+                      return (
+                        <EnhancedChatMessage
+                          key={message._id}
+                          message={message}
+                          isUser={isUser}
+                          isFirstInGroup={isFirstInGroup}
+                          formatTimestamp={formatTimestamp}
+                          copyToClipboard={async (text: string, messageId: string) => {
+                            await navigator.clipboard.writeText(text);
+                            setCopiedMessage(messageId);
+                            setTimeout(() => setCopiedMessage(null), 2000);
+                            toast.success('Message copied to clipboard!');
+                          }}
+                          copiedMessage={copiedMessage}
+                          onApproveDiagram={handleApproveDiagram}
+                          onRequestDiagramChanges={handleRequestDiagramChanges}
+                          isSubmittingDiagram={isSubmittingDiagram}
+                        />
+                      );
+                    })}
                     
                     {typingIndicator}
                     
diff --git a/src/components/chat/EnhancedChatMessage.tsx b/src/components/chat/EnhancedChatMessage.tsx
new file mode 100644
index 00000000..4ed97505
--- /dev/null
+++ b/src/components/chat/EnhancedChatMessage.tsx
@@ -0,0 +1,274 @@
+import { memo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { CodeArtifact } from '@/components/ui/code-artifact';
+import { executeCode } from '@/lib/sandbox';
+
+import {
+  Copy,
+  Check,
+  Play,
+  Code2,
+  Sparkles,
+  FileText,
+  Image,
+  Terminal,
+  ChevronDown,
+  ChevronUp
+} from 'lucide-react';
+import { toast } from 'sonner';
+import DiagramMessageComponent from '../DiagramMessageComponent';
+
+// Types for the enhanced message component
+interface ConvexMessage {
+  _id: string;
+  content: string | unknown;
+  role: 'user' | 'assistant';
+  createdAt: number;
+  metadata?: {
+    model?: string;
+    tokens?: number;
+    cost?: number;
+    diagramData?: unknown;
+  };
+}
+
+interface EnhancedChatMessageProps {
+  message: ConvexMessage;
+  isUser: boolean;
+  isFirstInGroup: boolean;
+  formatTimestamp: (timestamp: number) => string;
+  copyToClipboard: (text: string, messageId: string) => Promise<void>;
+  copiedMessage: string | null;
+  onApproveDiagram?: (messageId: string) => Promise<void>;
+  onRequestDiagramChanges?: (messageId: string, feedback: string) => Promise<void>;
+  isSubmittingDiagram?: boolean;
+}
+
+// Enhanced message component with modern AI tool styling
+export const EnhancedChatMessage = memo<EnhancedChatMessageProps>(({
+  message,
+  isUser,
+  isFirstInGroup,
+  formatTimestamp,
+  copyToClipboard,
+  copiedMessage,
+  onApproveDiagram,
+  onRequestDiagramChanges,
+  isSubmittingDiagram
+}) => {
+  const [showCodeArtifacts, setShowCodeArtifacts] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Extract code blocks from message content
+  const extractCodeBlocks = (content: string) => {
+    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+    const codeBlocks: Array<{ language: string; code: string; id: string }> = [];
+    let match;
+
+    while ((match = codeBlockRegex.exec(content)) !== null) {
+      const language = match[1] || 'plaintext';
+      const code = match[2];
+      codeBlocks.push({
+        language,
+        code: code.trim(),
+        id: `code-${Math.random().toString(36).substr(2, 9)}`
+      });
+    }
+
+    return codeBlocks;
+  };
+
+  // Remove code blocks from text content for display
+  const cleanContent = (content: string) => {
+    return content.replace(/```(\w+)?\n[\s\S]*?```/g, '').trim();
+  };
+
+  const codeBlocks = extractCodeBlocks(typeof message.content === 'string' ? message.content : '');
+  const textContent = cleanContent(typeof message.content === 'string' ? message.content : '');
+
+  return (
+    <div className="space-y-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20, scale: 0.95 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.3 }}
+        whileHover={{ scale: 1.01 }}
+        className="group"
+      >
+        <Card className={`
+          transition-all duration-300 shadow-soft hover:shadow-medium border-0
+          backdrop-blur-xl
+          ${isUser
+            ? 'chat-bubble-user ml-auto max-w-[90%]'
+            : 'chat-bubble-assistant max-w-[95%]'
+          }
+          ${isFirstInGroup ? 'rounded-2xl' : (isUser ? 'rounded-2xl rounded-tr-md' : 'rounded-2xl rounded-tl-md')}
+        `}>
+          <CardContent className="p-6 relative">
+            <div className="space-y-4">
+              {/* Message Header */}
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  {isUser ? (
+                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                      <span className="text-white font-medium text-sm">U</span>
+                    </div>
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
+                      <Sparkles className="w-4 h-4 text-white" />
+                    </div>
+                  )}
+                  <span className="text-sm font-medium text-gray-300">
+                    {isUser ? 'You' : 'ZapDev AI'}
+                  </span>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                  {codeBlocks.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setShowCodeArtifacts(!showCodeArtifacts)}
+                      className="h-8 w-8 p-0 glass-hover rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5"
+                    >
+                      <Code2 className="w-4 h-4" />
+                    </Button>
+                  )}
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    className="h-8 w-8 p-0 glass-hover rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5"
+                  >
+                    {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                  </Button>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => copyToClipboard(typeof message.content === 'string' ? message.content : String(message.content), message._id)}
+                    className="h-8 w-8 p-0 glass-hover rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5"
+                  >
+                    {copiedMessage === message._id ? (
+                      <Check className="w-4 h-4 text-green-400" />
+                    ) : (
+                      <Copy className="w-4 h-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Message Content */}
+              {textContent && (
+                <div
+                  className={`text-base leading-relaxed font-medium prose prose-invert max-w-none ${
+                    isUser ? 'text-foreground' : 'text-foreground/95'
+                  }`}
+                >
+                  {textContent}
+                </div>
+              )}
+
+              {/* Code Artifacts */}
+              <AnimatePresence>
+                {showCodeArtifacts && codeBlocks.length > 0 && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="space-y-3"
+                  >
+                    {codeBlocks.map((block, index) => (
+                      <CodeArtifact
+                        key={block.id}
+                        code={block.code}
+                        language={block.language}
+                        title={`${block.language.charAt(0).toUpperCase() + block.language.slice(1)} Code Block ${index + 1}`}
+                        onExecute={executeCode}
+                        autoRun={false}
+                        showLineNumbers={true}
+                        className="mt-3"
+                      />
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Metadata */}
+              <AnimatePresence>
+                {isExpanded && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="pt-3 border-t border-white/10"
+                  >
+                    <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                      {message.metadata?.model && (
+                        <Badge variant="outline" className="glass text-xs border-white/20 bg-white/5 backdrop-blur-sm rounded-lg px-2 py-1">
+                          {String(message.metadata.model)}
+                        </Badge>
+                      )}
+
+                      {message.metadata?.tokens && (
+                        <Badge variant="outline" className="glass text-xs border-white/20 bg-white/5 backdrop-blur-sm rounded-lg px-2 py-1">
+                          {String(message.metadata.tokens)} tokens
+                        </Badge>
+                      )}
+
+                      {message.metadata?.cost && (
+                        <Badge variant="outline" className="glass text-xs border-green-400/30 text-green-300 bg-green-500/10 backdrop-blur-sm rounded-lg px-2 py-1">
+                          ${String(message.metadata.cost.toFixed(4))}
+                        </Badge>
+                      )}
+
+                      {message.metadata?.diagramData && (
+                        <Badge variant="outline" className="glass text-xs text-blue-300 border border-blue-400/30 bg-blue-500/10 backdrop-blur-sm rounded-lg px-2 py-1">
+                          Contains Diagram
+                        </Badge>
+                      )}
+
+                      {codeBlocks.length > 0 && (
+                        <Badge variant="outline" className="glass text-xs border-purple-400/30 text-purple-300 bg-purple-500/10 backdrop-blur-sm rounded-lg px-2 py-1">
+                          {codeBlocks.length} Code Block{codeBlocks.length > 1 ? 's' : ''}
+                        </Badge>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            {/* Timestamp */}
+            <div className={`text-xs text-muted-foreground/70 mt-3 ${
+              isUser ? 'text-right' : 'text-left'
+            }`}>
+              {String(formatTimestamp(message.createdAt))}
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* Diagram Component */}
+      {onApproveDiagram && onRequestDiagramChanges && message.metadata?.diagramData && (
+        <DiagramMessageComponent
+          diagramData={message.metadata.diagramData as any}
+          messageId={message._id}
+          onApprove={onApproveDiagram}
+          onRequestChanges={onRequestDiagramChanges}
+          isSubmitting={isSubmittingDiagram}
+        />
+      )}
+    </div>
+  );
+});
+
+EnhancedChatMessage.displayName = 'EnhancedChatMessage';
diff --git a/src/components/ui/code-artifact.tsx b/src/components/ui/code-artifact.tsx
new file mode 100644
index 00000000..0032f270
--- /dev/null
+++ b/src/components/ui/code-artifact.tsx
@@ -0,0 +1,427 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Play,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  Terminal,
+  FileText,
+  Image,
+  BarChart,
+  Sparkles,
+  Code2,
+  Zap,
+  Download,
+  Copy,
+  Check,
+  Maximize2,
+  Minimize2,
+  RotateCcw,
+  Settings,
+  Eye,
+  EyeOff,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface ExecutionResult {
+  success: boolean;
+  output?: string;
+  error?: string;
+  logs: string[];
+  artifacts?: Array<{
+    name: string;
+    url: string;
+    type: 'image' | 'file' | 'chart';
+  }>;
+  executionTime?: number;
+  memoryUsage?: number;
+}
+
+interface CodeArtifactProps {
+  code: string;
+  language: string;
+  title?: string;
+  description?: string;
+  onExecute: (code: string, language: string) => Promise<ExecutionResult>;
+  autoRun?: boolean;
+  showLineNumbers?: boolean;
+  className?: string;
+}
+
+export function CodeArtifact({
+  code,
+  language,
+  title = "Code Preview",
+  description,
+  onExecute,
+  autoRun = false,
+  showLineNumbers = true,
+  className = ""
+}: CodeArtifactProps) {
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [result, setResult] = useState<ExecutionResult | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [activeTab, setActiveTab] = useState('preview');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showPreview, setShowPreview] = useState(true);
+  const codeRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (autoRun) {
+      const t = setTimeout(() => {
+        handleExecute();
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [autoRun]);
+
+  const handleExecute = async () => {
+    setIsExecuting(true);
+    setResult(null);
+
+    try {
+      const executionResult = await onExecute(code, language);
+      setResult(executionResult);
+
+      if (executionResult.success) {
+        toast.success('Code executed successfully!');
+        setActiveTab('output');
+      } else {
+        toast.error('Execution failed');
+        setActiveTab('error');
+      }
+    } catch (error) {
+      console.error('Execution error:', error);
+      const errorMessage = String(error);
+      toast.error('Code execution failed');
+
+      setResult({
+        success: false,
+        error: errorMessage,
+        logs: []
+      });
+      setActiveTab('error');
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    toast.success('Code copied to clipboard!');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const getLanguageIcon = () => {
+    switch (language.toLowerCase()) {
+      case 'javascript':
+      case 'typescript':
+        return <div className="w-3 h-3 bg-yellow-400 rounded-full" />;
+      case 'python':
+        return <div className="w-3 h-3 bg-blue-400 rounded-full" />;
+      case 'html':
+        return <div className="w-3 h-3 bg-orange-400 rounded-full" />;
+      case 'css':
+        return <div className="w-3 h-3 bg-purple-400 rounded-full" />;
+      case 'json':
+        return <div className="w-3 h-3 bg-green-400 rounded-full" />;
+      default:
+        return <Code2 className="w-3 h-3" />;
+    }
+  };
+
+  const getSyntaxHighlightClass = () => {
+    switch (language.toLowerCase()) {
+      case 'javascript':
+      case 'typescript':
+        return 'language-javascript';
+      case 'python':
+        return 'language-python';
+      case 'html':
+        return 'language-html';
+      case 'css':
+        return 'language-css';
+      case 'json':
+        return 'language-json';
+      default:
+        return 'language-plaintext';
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className={`w-full ${className}`}
+    >
+      <Card className="overflow-hidden border-0 shadow-2xl bg-gradient-to-br from-gray-900/95 to-gray-800/95 backdrop-blur-xl">
+        {/* Header */}
+        <CardHeader className="bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-cyan-600/10 border-b border-white/10">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <motion.div
+                animate={{
+                  rotate: isExecuting ? 360 : 0,
+                  scale: isExecuting ? 1.1 : 1
+                }}
+                transition={{
+                  rotate: { duration: 1, repeat: isExecuting ? Infinity : 0, ease: "linear" },
+                  scale: { duration: 0.2 }
+                }}
+              >
+                <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600">
+                  <Sparkles className="w-4 h-4 text-white" />
+                </div>
+              </motion.div>
+              <div>
+                <CardTitle className="text-lg font-semibold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+                  {title}
+                </CardTitle>
+                {description && (
+                  <p className="text-sm text-gray-400 mt-1">{description}</p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="flex items-center gap-1 border-white/20 bg-white/5 text-xs">
+                {getLanguageIcon()}
+                {language}
+              </Badge>
+
+              <div className="flex items-center gap-1">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowPreview(!showPreview)}
+                  className="h-8 w-8 p-0 text-gray-400 hover:text-white"
+                >
+                  {showPreview ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+                </Button>
+
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleCopy}
+                  className="h-8 w-8 p-0 text-gray-400 hover:text-white"
+                >
+                  {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                </Button>
+
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  className="h-8 w-8 p-0 text-gray-400 hover:text-white"
+                >
+                  {isExpanded ? <Minimize2 className="w-3 h-3" /> : <Maximize2 className="w-3 h-3" />}
+                </Button>
+              </div>
+
+              <Button
+                size="sm"
+                onClick={handleExecute}
+                disabled={isExecuting}
+                className="gap-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 border-0"
+              >
+                {isExecuting ? (
+                  <>
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                    Running...
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-3 h-3" />
+                    Run Code
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-0">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <div className="border-b border-white/10 bg-black/20">
+              <TabsList className="grid w-full grid-cols-4 bg-transparent">
+                <TabsTrigger
+                  value="preview"
+                  className="data-[state=active]:bg-white/10 data-[state=active]:text-white text-gray-400"
+                >
+                  <Eye className="w-3 h-3 mr-2" />
+                  Preview
+                </TabsTrigger>
+                <TabsTrigger
+                  value="output"
+                  className="data-[state=active]:bg-white/10 data-[state=active]:text-white text-gray-400"
+                  disabled={!result}
+                >
+                  <Terminal className="w-3 h-3 mr-2" />
+                  Output
+                </TabsTrigger>
+                <TabsTrigger
+                  value="logs"
+                  className="data-[state=active]:bg-white/10 data-[state=active]:text-white text-gray-400"
+                  disabled={!result}
+                >
+                  <FileText className="w-3 h-3 mr-2" />
+                  Logs
+                </TabsTrigger>
+                <TabsTrigger
+                  value="error"
+                  className="data-[state=active]:bg-white/10 data-[state=active]:text-white text-gray-400"
+                  disabled={!result?.error}
+                >
+                  <XCircle className="w-3 h-3 mr-2" />
+                  Error
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            {/* Code Preview Tab */}
+            <TabsContent value="preview" className="p-0">
+              <div className="relative">
+                <ScrollArea className={`transition-all duration-300 ${isExpanded ? 'max-h-[80vh]' : 'max-h-[60vh]'}`}>
+                  <div className="bg-black/40 p-4">
+                    <pre
+                      ref={codeRef}
+                      className={`text-sm leading-relaxed font-mono text-gray-300 ${getSyntaxHighlightClass()}`}
+                      style={{ whiteSpace: 'pre-wrap' }}
+                    >
+                      {showLineNumbers && (
+                        <code className="block">
+                          {code.split('\n').map((line, index) => (
+                            <div key={index} className="table-row">
+                              <span className="table-cell pr-4 text-right text-gray-600 select-none min-w-[3rem]">
+                                {index + 1}
+                              </span>
+                              <span className="table-cell">{line}</span>
+                            </div>
+                          ))}
+                        </code>
+                      )}
+                      {!showLineNumbers && (
+                        <code>{code}</code>
+                      )}
+                    </pre>
+                  </div>
+                </ScrollArea>
+
+                {/* Code overlay gradient */}
+                <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" />
+              </div>
+            </TabsContent>
+
+            {/* Output Tab */}
+            <TabsContent value="output" className="p-4">
+              {result?.output ? (
+                <ScrollArea className="max-h-[60vh]">
+                  <div className="bg-black/20 rounded-lg p-4">
+                    <pre className="text-sm font-mono text-green-400 whitespace-pre-wrap">
+                      {result.output}
+                    </pre>
+                  </div>
+                </ScrollArea>
+              ) : (
+                <div className="text-center py-8 text-gray-400">
+                  <Terminal className="w-8 h-8 mx-auto mb-2" />
+                  <p>No output available</p>
+                </div>
+              )}
+            </TabsContent>
+
+            {/* Logs Tab */}
+            <TabsContent value="logs" className="p-4">
+              {result?.logs && result.logs.length > 0 ? (
+                <ScrollArea className="max-h-[60vh]">
+                  <div className="space-y-2">
+                    {result.logs.map((log, index) => (
+                      <div key={index} className="bg-black/20 rounded p-2">
+                        <code className="text-xs font-mono text-gray-300">{log}</code>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              ) : (
+                <div className="text-center py-8 text-gray-400">
+                  <FileText className="w-8 h-8 mx-auto mb-2" />
+                  <p>No logs available</p>
+                </div>
+              )}
+            </TabsContent>
+
+            {/* Error Tab */}
+            <TabsContent value="error" className="p-4">
+              {result?.error ? (
+                <div className="bg-red-950/20 border border-red-800/30 rounded-lg p-4">
+                  <div className="flex items-center gap-2 mb-3">
+                    <XCircle className="w-4 h-4 text-red-400" />
+                    <span className="font-medium text-red-400">Execution Error</span>
+                  </div>
+                  <ScrollArea className="max-h-[60vh]">
+                    <pre className="text-sm font-mono text-red-300 whitespace-pre-wrap">
+                      {result.error}
+                    </pre>
+                  </ScrollArea>
+                </div>
+              ) : (
+                <div className="text-center py-8 text-gray-400">
+                  <CheckCircle className="w-8 h-8 mx-auto mb-2" />
+                  <p>No errors occurred</p>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+
+          {/* Status Bar */}
+          {result && (
+            <div className="border-t border-white/10 bg-black/20 px-4 py-2">
+              <div className="flex items-center justify-between text-xs text-gray-400">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    {result.success ? (
+                      <CheckCircle className="w-3 h-3 text-green-400" />
+                    ) : (
+                      <XCircle className="w-3 h-3 text-red-400" />
+                    )}
+                    <span>{result.success ? 'Success' : 'Failed'}</span>
+                  </div>
+                  {result.executionTime && (
+                    <span>{result.executionTime}ms</span>
+                  )}
+                  {result.memoryUsage && (
+                    <span>{result.memoryUsage}MB</span>
+                  )}
+                </div>
+
+                {result.artifacts && result.artifacts.length > 0 && (
+                  <div className="flex items-center gap-1">
+                    <span>{result.artifacts.length} artifact(s)</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-gray-400 hover:text-white"
+                    >
+                      <Download className="w-3 h-3" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 39a40fbd..06c675ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,64 +4,66 @@
 @import "tailwindcss";
 
 @theme {
-  --color-border: hsl(0 0% 12%);
-  --color-input: hsl(0 0% 12%);
+  /* Modern AI Tool Color Scheme */
+  --color-border: hsl(0 0% 15%);
+  --color-input: hsl(0 0% 8%);
   --color-ring: hsl(224 82% 60%);
-  --color-background: hsl(0 0% 4%);
-  --color-foreground: hsl(0 0% 100%);
+  --color-background: hsl(0 0% 2%);
+  --color-foreground: hsl(0 0% 98%);
   --color-primary: #3E6FF3;
   --color-primary-foreground: hsl(0 0% 100%);
-  --color-secondary: hsl(0 0% 9%);
-  --color-secondary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(0 0% 6%);
+  --color-secondary-foreground: hsl(0 0% 95%);
   --color-destructive: hsl(0 84% 60%);
   --color-destructive-foreground: hsl(0 0% 100%);
-  --color-muted: hsl(0 0% 9%);
-  --color-muted-foreground: hsl(0 0% 64%);
-  --color-accent: hsl(0 0% 9%);
-  --color-accent-foreground: hsl(0 0% 100%);
-  --color-popover: hsl(0 0% 4%);
-  --color-popover-foreground: hsl(0 0% 100%);
-  --color-card: hsl(0 0% 4%);
-  --color-card-foreground: hsl(0 0% 100%);
-  --color-sidebar: hsl(0 0% 98%);
-  --color-sidebar-foreground: hsl(240 5.3% 26.1%);
-  --color-sidebar-primary: hsl(240 5.9% 10%);
-  --color-sidebar-primary-foreground: hsl(0 0% 98%);
-  --color-sidebar-accent: hsl(240 4.8% 95.9%);
-  --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --color-sidebar-border: hsl(220 13% 91%);
-  --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
-  
+  --color-muted: hsl(0 0% 8%);
+  --color-muted-foreground: hsl(0 0% 65%);
+  --color-accent: hsl(0 0% 10%);
+  --color-accent-foreground: hsl(0 0% 95%);
+  --color-popover: hsl(0 0% 3%);
+  --color-popover-foreground: hsl(0 0% 98%);
+  --color-card: hsl(0 0% 3%);
+  --color-card-foreground: hsl(0 0% 98%);
+  --color-sidebar: hsl(0 0% 4%);
+  --color-sidebar-foreground: hsl(0 0% 85%);
+  --color-sidebar-primary: hsl(0 0% 8%);
+  --color-sidebar-primary-foreground: hsl(0 0% 95%);
+  --color-sidebar-accent: hsl(0 0% 6%);
+  --color-sidebar-accent-foreground: hsl(0 0% 90%);
+  --color-sidebar-border: hsl(0 0% 12%);
+  --color-sidebar-ring: hsl(224 82% 60%);
+
   --font-family-sans: "Inter", sans-serif;
   --font-family-mono: "JetBrains Mono", monospace;
-  
-  --radius: 0.75rem;
-  
-  /* Enhanced design tokens for ZapDev */
-  --color-chat-bg: hsl(0 0% 2.5%);
-  --color-chat-surface: hsl(0 0% 6%);
-  --color-chat-surface-elevated: hsl(0 0% 8%);
-  --color-chat-border: hsl(0 0% 15%);
-  --color-chat-user-bg: hsl(214 100% 50% / 0.1);
-  --color-chat-user-border: hsl(214 100% 50% / 0.2);
-  --color-chat-assistant-bg: hsl(0 0% 8% / 0.8);
-  --color-chat-assistant-border: hsl(0 0% 20% / 0.5);
-  
-  /* Gradient tokens */
+
+  --radius: 0.5rem;
+
+  /* Enhanced design tokens for modern AI tools */
+  --color-chat-bg: hsl(0 0% 2%);
+  --color-chat-surface: hsl(0 0% 4%);
+  --color-chat-surface-elevated: hsl(0 0% 6%);
+  --color-chat-border: hsl(0 0% 12%);
+  --color-chat-user-bg: hsl(214 100% 50% / 0.08);
+  --color-chat-user-border: hsl(214 100% 50% / 0.15);
+  --color-chat-assistant-bg: hsl(0 0% 5% / 0.9);
+  --color-chat-assistant-border: hsl(0 0% 15% / 0.6);
+
+  /* Modern gradient tokens */
   --gradient-primary: linear-gradient(135deg, #3E6FF3 0%, #5577FF 50%, #1E40AF 100%);
-  --gradient-surface: linear-gradient(135deg, hsl(0 0% 8% / 0.9) 0%, hsl(0 0% 6% / 0.9) 100%);
-  --gradient-glow: radial-gradient(circle at center, hsl(214 100% 50% / 0.15) 0%, transparent 70%);
-  
+  --gradient-surface: linear-gradient(135deg, hsl(0 0% 4% / 0.95) 0%, hsl(0 0% 2% / 0.95) 100%);
+  --gradient-glow: radial-gradient(circle at center, hsl(214 100% 50% / 0.08) 0%, transparent 70%);
+  --gradient-sidebar: linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 2%) 100%);
+
   /* Animation tokens */
   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
-  
-  /* Shadow tokens */
-  --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.1);
-  --shadow-medium: 0 4px 16px -4px hsl(0 0% 0% / 0.15);
-  --shadow-strong: 0 8px 32px -8px hsl(0 0% 0% / 0.2);
-  --shadow-glow: 0 0 32px hsl(214 100% 50% / 0.3);
+
+  /* Modern shadow tokens */
+  --shadow-soft: 0 1px 3px hsl(0 0% 0% / 0.12);
+  --shadow-medium: 0 4px 12px hsl(0 0% 0% / 0.15);
+  --shadow-strong: 0 8px 24px hsl(0 0% 0% / 0.2);
+  --shadow-glow: 0 0 24px hsl(214 100% 50% / 0.2);
 }
 
 
@@ -86,12 +88,12 @@
   }
 }
 
-/* Premium glass morphism components */
+/* Modern glass morphism components - inspired by AI tools */
 .glass {
   background: var(--gradient-surface);
-  backdrop-filter: blur(32px);
-  -webkit-backdrop-filter: blur(32px);
-  border: 1px solid hsl(0 0% 100% / 0.12);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid hsl(0 0% 100% / 0.08);
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-soft);
@@ -103,10 +105,10 @@
   inset: 0;
   border-radius: inherit;
   padding: 1px;
-  background: linear-gradient(135deg, 
-    hsl(0 0% 100% / 0.2) 0%, 
-    hsl(0 0% 100% / 0.05) 50%, 
-    hsl(0 0% 100% / 0.1) 100%);
+  background: linear-gradient(135deg,
+    hsl(0 0% 100% / 0.15) 0%,
+    hsl(0 0% 100% / 0.03) 50%,
+    hsl(0 0% 100% / 0.08) 100%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
@@ -115,14 +117,13 @@
 }
 
 .glass-elevated {
-  background: linear-gradient(135deg, hsl(0 0% 8% / 0.95) 0%, hsl(0 0% 6% / 0.95) 100%);
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
-  border: 1px solid hsl(0 0% 100% / 0.18);
-  box-shadow: 
-    0 8px 32px -8px hsl(0 0% 0% / 0.3),
-    0 0 0 1px hsl(0 0% 100% / 0.05),
-    inset 0 1px 0 hsl(0 0% 100% / 0.1);
+  background: var(--gradient-surface);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid hsl(0 0% 100% / 0.1);
+  box-shadow:
+    0 4px 16px -4px hsl(0 0% 0% / 0.2),
+    0 0 0 1px hsl(0 0% 100% / 0.03);
 }
 
 .glass-hover {
@@ -130,13 +131,12 @@
 }
 
 .glass-hover:hover {
-  background: linear-gradient(135deg, hsl(0 0% 100% / 0.12) 0%, hsl(0 0% 100% / 0.06) 100%);
-  border-color: hsl(0 0% 100% / 0.25);
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 
-    0 12px 40px -8px hsl(0 0% 0% / 0.4),
-    0 0 0 1px hsl(0 0% 100% / 0.08),
-    inset 0 1px 0 hsl(0 0% 100% / 0.15);
+  background: linear-gradient(135deg, hsl(0 0% 100% / 0.08) 0%, hsl(0 0% 100% / 0.04) 100%);
+  border-color: hsl(0 0% 100% / 0.15);
+  transform: translateY(-1px);
+  box-shadow:
+    0 8px 24px -4px hsl(0 0% 0% / 0.25),
+    0 0 0 1px hsl(0 0% 100% / 0.05);
 }
 
 /* Enhanced text gradients */
@@ -194,14 +194,14 @@
   transform: translateY(0);
 }
 
-/* Premium chat-specific styling */
+/* Modern chat bubble styling - inspired by AI tools */
 .chat-bubble-user {
-  background: linear-gradient(135deg, hsl(214 100% 50% / 0.15) 0%, hsl(214 100% 50% / 0.08) 100%);
-  border: 1px solid hsl(214 100% 50% / 0.25);
+  background: linear-gradient(135deg, hsl(214 100% 50% / 0.08) 0%, hsl(214 100% 50% / 0.04) 100%);
+  border: 1px solid hsl(214 100% 50% / 0.15);
   position: relative;
-  box-shadow: 
-    0 4px 16px -4px hsl(214 100% 50% / 0.2),
-    inset 0 1px 0 hsl(0 0% 100% / 0.1);
+  box-shadow:
+    0 2px 8px -2px hsl(214 100% 50% / 0.15);
+  border-radius: 1rem;
 }
 
 .chat-bubble-user::before {
@@ -216,17 +216,31 @@
 }
 
 .chat-bubble-user:hover::before {
-  opacity: 1;
+  opacity: 0.5;
 }
 
 .chat-bubble-assistant {
-  background: linear-gradient(135deg, hsl(0 0% 8% / 0.9) 0%, hsl(0 0% 6% / 0.8) 100%);
-  border: 1px solid hsl(0 0% 20% / 0.6);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  box-shadow: 
-    0 4px 16px -4px hsl(0 0% 0% / 0.2),
-    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+  background: var(--gradient-surface);
+  border: 1px solid hsl(0 0% 100% / 0.06);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow:
+    0 2px 8px -2px hsl(0 0% 0% / 0.15);
+  border-radius: 1rem;
+}
+
+/* Modern input styling */
+.chat-input {
+  background: var(--gradient-surface);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  border-radius: 0.75rem;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.chat-input:focus {
+  border-color: hsl(224 82% 60% / 0.5);
+  box-shadow: 0 0 0 1px hsl(224 82% 60% / 0.2);
 }
 
 /* Enhanced animations */
@@ -301,26 +315,44 @@
   transition: all var(--duration-slow) ease-out;
 }
 
-/* Premium scrollbar styling */
+/* Modern scrollbar styling */
 .custom-scrollbar::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  background: hsl(0 0% 5%);
-  border-radius: 4px;
+  background: transparent;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(45deg, hsl(0 0% 25%) 0%, hsl(0 0% 20%) 100%);
-  border-radius: 4px;
-  border: 1px solid hsl(0 0% 15%);
+  background: hsl(0 0% 20%);
+  border-radius: 3px;
   transition: all var(--duration-fast);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(45deg, hsl(214 100% 50% / 0.6) 0%, hsl(214 100% 45% / 0.4) 100%);
-  border-color: hsl(214 100% 50% / 0.3);
+  background: hsl(0 0% 30%);
+}
+
+/* Modern sidebar styling */
+.sidebar {
+  background: var(--gradient-sidebar);
+  border-right: 1px solid hsl(0 0% 100% / 0.06);
+}
+
+.sidebar-item {
+  border-radius: 0.5rem;
+  transition: all var(--duration-fast);
+  margin: 0.125rem 0.5rem;
+}
+
+.sidebar-item:hover {
+  background: hsl(0 0% 100% / 0.05);
+}
+
+.sidebar-item.active {
+  background: hsl(214 100% 50% / 0.1);
+  border: 1px solid hsl(214 100% 50% / 0.2);
 }
 
 /* Enhanced focus styles */
@@ -330,6 +362,140 @@
   border-radius: var(--radius);
 }
 
+/* Modern code artifact styles */
+.code-artifact-container {
+  background: linear-gradient(135deg, hsl(0 0% 4% / 0.95) 0%, hsl(0 0% 2% / 0.95) 100%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  border-radius: 1rem;
+  box-shadow:
+    0 8px 32px -4px hsl(0 0% 0% / 0.3),
+    0 0 0 1px hsl(0 0% 100% / 0.03);
+  position: relative;
+  overflow: hidden;
+}
+
+.code-artifact-container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg,
+    hsl(214 100% 50% / 0.15) 0%,
+    hsl(0 0% 100% / 0.03) 50%,
+    hsl(264 100% 50% / 0.15) 100%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.code-artifact-header {
+  background: linear-gradient(135deg,
+    hsl(214 100% 50% / 0.05) 0%,
+    hsl(264 100% 50% / 0.05) 50%,
+    hsl(214 100% 50% / 0.05) 100%);
+  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
+  position: relative;
+  overflow: hidden;
+}
+
+.code-artifact-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    hsl(214 100% 50% / 0.03) 50%,
+    transparent 100%);
+  animation: shimmer 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes shimmer {
+  0%, 100% { transform: translateX(-100%); }
+  50% { transform: translateX(100%); }
+}
+
+/* Enhanced chat bubble gradients */
+.chat-bubble-user {
+  background: linear-gradient(135deg,
+    hsl(214 100% 50% / 0.12) 0%,
+    hsl(214 100% 50% / 0.06) 50%,
+    hsl(214 100% 50% / 0.03) 100%);
+  border: 1px solid hsl(214 100% 50% / 0.2);
+  position: relative;
+  box-shadow:
+    0 4px 16px -2px hsl(214 100% 50% / 0.2),
+    0 0 0 1px hsl(214 100% 50% / 0.05);
+  border-radius: 1.25rem;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.chat-bubble-assistant {
+  background: linear-gradient(135deg,
+    hsl(0 0% 5% / 0.95) 0%,
+    hsl(0 0% 3% / 0.95) 50%,
+    hsl(0 0% 5% / 0.95) 100%);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow:
+    0 4px 16px -2px hsl(0 0% 0% / 0.2),
+    0 0 0 1px hsl(0 0% 100% / 0.03);
+  border-radius: 1.25rem;
+}
+
+/* Modern prose styling */
+.prose {
+  color: hsl(0 0% 95%);
+}
+
+.prose-invert {
+  color: hsl(0 0% 95%);
+}
+
+.prose code {
+  background: hsl(0 0% 10%);
+  border: 1px solid hsl(0 0% 20%);
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.875em;
+  color: hsl(0 0% 90%);
+}
+
+.prose pre {
+  background: hsl(0 0% 5%);
+  border: 1px solid hsl(0 0% 15%);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+  color: hsl(0 0% 90%);
+}
+
+.prose pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+}
+
+/* Enhanced button hover effects */
+.glass-hover:hover {
+  background: linear-gradient(135deg,
+    hsl(0 0% 100% / 0.1) 0%,
+    hsl(0 0% 100% / 0.05) 100%);
+  border-color: hsl(0 0% 100% / 0.2);
+  transform: translateY(-1px);
+  box-shadow:
+    0 8px 24px -4px hsl(0 0% 0% / 0.3),
+    0 0 0 1px hsl(0 0% 100% / 0.08);
+}
+
 /* Typography enhancements */
 .font-code {
   font-family: var(--font-family-mono);