diff --git a/apps/web/app/(admin)/chat/[chatId]/page.tsx b/apps/web/app/(admin)/chat/[chatId]/page.tsx
index fff73fb..c13a305 100644
--- a/apps/web/app/(admin)/chat/[chatId]/page.tsx
+++ b/apps/web/app/(admin)/chat/[chatId]/page.tsx
@@ -61,7 +61,7 @@ export default async function Page({
   })) as LinkedAccount[];
 
   return (
-    <div className="pb-6 h-[calc(100vh-161px)]">
+    <div className="pb-6 h-[calc(100vh-161px)] relative">
       <BreadcrumbsConsumer breadcrumbs={breadCrumbs} />
       <ChatContainer currentUser={user} linkedAccounts={linkedAccounts} />
     </div>
diff --git a/apps/web/components/chat/ChatContainer.tsx b/apps/web/components/chat/ChatContainer.tsx
index 2a6636d..1f2b145 100644
--- a/apps/web/components/chat/ChatContainer.tsx
+++ b/apps/web/components/chat/ChatContainer.tsx
@@ -11,6 +11,7 @@ import { CurrentUser, SelectedAccount } from '@/types/chat';
 import { ChatService } from '@/services/client/chat.service';
 import { LinkedAccount } from '@/types/linkedAccounts';
 import { WelcomeChat } from './WelcomeChat';
+import { ChatDrawer } from '@/components/chatDrawer';
 
 const STORED_MESSAGE_KEY = 'firstMessage';
 
@@ -28,6 +29,10 @@ export default function ChatContainer({
     params.chatId as string,
   );
   const [isRedirecting, setIsRedirecting] = useState(false);
+  const [previewedMessageIndex, setPreviewedMessageIndex] = useState<
+    number | null
+  >(null);
+  const [previewTimestamp, setPreviewTimestamp] = useState<number>(0);
   const hasSentFirstMessage = useRef(false);
 
   const {
@@ -38,6 +43,12 @@ export default function ChatContainer({
     markLastAssistantMessageAsComplete,
   } = useMessages(chatId || '');
 
+  // Convert messages to the format expected by ChatDrawer
+  const drawerMessages = messages.map((msg) => ({
+    content: msg.content,
+    role: msg.role as 'user' | 'assistant',
+  }));
+
   const createNewChat = async (content: string) => {
     const response = await fetch('/api/chats', {
       method: 'POST',
@@ -120,6 +131,18 @@ export default function ChatContainer({
     }
   };
 
+  // Handle visualize code button click
+  const handleVisualizeMessage = (messageIndex: number) => {
+    // Always set the preview index and timestamp to force update
+    setPreviewedMessageIndex(messageIndex);
+    setPreviewTimestamp(Date.now());
+  };
+
+  // Reset previewed message when chat changes
+  useEffect(() => {
+    setPreviewedMessageIndex(null);
+  }, [chatId]);
+
   useEffect(() => {
     if (chatId && pathname.includes('/chat/')) {
       const run = async () => {
@@ -154,14 +177,28 @@ export default function ChatContainer({
   }
 
   return (
-    <>
-      <MessagesList messages={messages} currentUser={currentUser} />
-      <div className="absolute inset-x-0 bottom-0 border-t overflow-hidden rounded-b-lg bg-background">
-        <ChatInput
-          onSendMessage={handleNewMessage}
-          linkedAccounts={linkedAccounts}
+    <div className="flex h-full">
+      <div className="flex-1">
+        <MessagesList
+          messages={messages}
+          currentUser={currentUser}
+          onVisualizeMessage={handleVisualizeMessage}
         />
+        <div className="absolute inset-x-0 bottom-0 border-t overflow-hidden rounded-b-lg bg-background">
+          <ChatInput
+            onSendMessage={handleNewMessage}
+            linkedAccounts={linkedAccounts}
+          />
+        </div>
       </div>
-    </>
+      {chatId && (
+        <ChatDrawer
+          messages={messages}
+          chatId={chatId}
+          previewMessageIndex={previewedMessageIndex}
+          previewTimestamp={previewTimestamp}
+        />
+      )}
+    </div>
   );
 }
diff --git a/apps/web/components/chat/MessagesList.tsx b/apps/web/components/chat/MessagesList.tsx
index 3828895..5684420 100644
--- a/apps/web/components/chat/MessagesList.tsx
+++ b/apps/web/components/chat/MessagesList.tsx
@@ -1,19 +1,50 @@
 import { ChatBubble } from '@repo/ui/components/chat-bubble';
 import { ScrollToBottom } from './scroll-to-bottom';
 import { MessagesListProps } from '@/types/chat';
+import { hasGeneratedCode } from '../../utils/codeDetection';
+import { VisualizeCodeButton } from './VisualizeCodeButton';
 
-export function MessagesList({ messages, currentUser }: MessagesListProps) {
+interface MessagesListWithVisualizeProps extends MessagesListProps {
+  onVisualizeMessage?: (messageIndex: number) => void;
+}
+
+// Function to check if a message is complete (not still streaming)
+const isMessageComplete = (content: string): boolean => {
+  // Check if the message has incomplete code blocks
+  const codeBlockCount = (content.match(/```/g) || []).length;
+  return codeBlockCount % 2 === 0; // Even number means all code blocks are closed
+};
+
+export function MessagesList({
+  messages,
+  currentUser,
+  onVisualizeMessage,
+}: MessagesListWithVisualizeProps) {
   return (
     <div className="p-4 pb-24 flex flex-col gap-4 max-h-full overflow-y-scroll">
-      {messages.map((message) => (
-        <ChatBubble
-          key={message.id}
-          variant={message.role}
-          message={message.content}
-          userName={message.role === 'user' ? currentUser.name : undefined}
-          userImage={message.role === 'user' ? currentUser.image : undefined}
-          isLoading={message.isLoading}
-        />
+      {messages.map((message, index) => (
+        <div key={message.id} className="flex flex-col gap-2 over">
+          <ChatBubble
+            variant={message.role}
+            message={message.content}
+            userName={message.role === 'user' ? currentUser.name : undefined}
+            userImage={message.role === 'user' ? currentUser.image : undefined}
+            isLoading={message.isLoading}
+          />
+
+          {/* Show visualize button for assistant messages with code that are complete */}
+          {message.role === 'assistant' &&
+            hasGeneratedCode(message.content) &&
+            isMessageComplete(message.content) &&
+            onVisualizeMessage && (
+              <div className="flex justify-start ml-12">
+                <VisualizeCodeButton
+                  onClick={() => onVisualizeMessage(index)}
+                  className="animate-in slide-in-from-left duration-300"
+                />
+              </div>
+            )}
+        </div>
       ))}
       <ScrollToBottom deps={[messages]} />
     </div>
diff --git a/apps/web/components/chat/RecentChats.tsx b/apps/web/components/chat/RecentChats.tsx
index 572e0bf..990f68e 100644
--- a/apps/web/components/chat/RecentChats.tsx
+++ b/apps/web/components/chat/RecentChats.tsx
@@ -64,7 +64,7 @@ export async function RecentChats() {
     orderBy: {
       createdAt: 'desc',
     },
-    take:10,
+    take: 10,
   });
 
   if (chats.length === 0) {
diff --git a/apps/web/components/chat/VisualizeCodeButton.tsx b/apps/web/components/chat/VisualizeCodeButton.tsx
new file mode 100644
index 0000000..5f77d9c
--- /dev/null
+++ b/apps/web/components/chat/VisualizeCodeButton.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { Button } from '@repo/ui/components/button';
+import { Eye, Code2 } from 'lucide-react';
+import { cn } from '@repo/ui/lib/utils';
+
+interface VisualizeCodeButtonProps {
+  onClick: () => void;
+  className?: string;
+  variant?: 'default' | 'outline' | 'ghost';
+  size?: 'sm' | 'default';
+}
+
+export function VisualizeCodeButton({
+  onClick,
+  className,
+  variant = 'outline',
+  size = 'sm',
+}: VisualizeCodeButtonProps) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-2 text-xs transition-all hover:scale-105',
+        'bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30',
+        'border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300',
+        className,
+      )}
+    >
+      <Eye className="h-3 w-3" />
+      <Code2 className="h-3 w-3" />
+      Visualize Code
+    </Button>
+  );
+}
diff --git a/apps/web/components/chatDrawer/ChatDrawer.tsx b/apps/web/components/chatDrawer/ChatDrawer.tsx
new file mode 100644
index 0000000..0b705c2
--- /dev/null
+++ b/apps/web/components/chatDrawer/ChatDrawer.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from '@repo/ui/components/drawer';
+import { Button } from '@repo/ui/components/button';
+import { Settings2 } from 'lucide-react';
+
+import { ChatDrawerProps } from '@/types/chat';
+import { useChatDrawer } from '@/hooks/useChatDrawer';
+import { DrawerHeader, DrawerContent as ChatDrawerContent } from './index';
+
+export function ChatDrawer({
+  messages: initialMessages,
+  chatId,
+  previewMessageIndex,
+  previewTimestamp,
+}: ChatDrawerProps) {
+  const {
+    messages,
+    extractedCode,
+    open,
+    isLoading,
+    currentPreviewIndex,
+    handleOpenChange,
+  } = useChatDrawer({
+    chatId,
+    initialMessages,
+    previewMessageIndex,
+    previewTimestamp,
+  });
+
+  return (
+    <Drawer direction="right" open={open} onOpenChange={handleOpenChange}>
+      <DrawerTrigger asChild>
+        <Button variant="ghost" size="icon" className="absolute right-4 top-4">
+          <Settings2 className="h-4 w-4" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="!max-w-xl h-full flex flex-col bg-white dark:bg-gray-900 shadow-2xl border-l border-gray-200 dark:border-gray-800 p-0">
+        <DrawerHeader
+          currentPreviewIndex={currentPreviewIndex}
+          previewMessageIndex={previewMessageIndex}
+          onClose={() => handleOpenChange(false)}
+        />
+        <ChatDrawerContent
+          extractedCode={extractedCode}
+          isLoading={isLoading}
+        />
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/apps/web/components/chatDrawer/CodeBlock.tsx b/apps/web/components/chatDrawer/CodeBlock.tsx
new file mode 100644
index 0000000..8073588
--- /dev/null
+++ b/apps/web/components/chatDrawer/CodeBlock.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@repo/ui/lib/utils';
+import { CodeBlockProps } from '@/types/chat';
+
+export function CodeBlock({ code, language }: CodeBlockProps) {
+  return (
+    <pre className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
+      <code
+        className={cn(
+          'text-sm font-mono',
+          language === 'html' && 'text-blue-600 dark:text-blue-400',
+          language === 'css' && 'text-green-600 dark:text-green-400',
+          language === 'javascript' && 'text-yellow-600 dark:text-yellow-400',
+        )}
+      >
+        {code}
+      </code>
+    </pre>
+  );
+}
diff --git a/apps/web/components/chatDrawer/CodeDetectedNotification.tsx b/apps/web/components/chatDrawer/CodeDetectedNotification.tsx
new file mode 100644
index 0000000..ebc0280
--- /dev/null
+++ b/apps/web/components/chatDrawer/CodeDetectedNotification.tsx
@@ -0,0 +1,12 @@
+import { Code2 } from 'lucide-react';
+
+export function CodeDetectedNotification() {
+  return (
+    <div className="fixed top-4 right-4 z-50 bg-blue-500 text-white px-3 py-2 rounded-md shadow-lg animate-in slide-in-from-right duration-200">
+      <div className="flex items-center gap-2">
+        <Code2 className="h-3 w-3" />
+        <span className="text-xs font-medium">Code preview ready</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/chatDrawer/CodeView.tsx b/apps/web/components/chatDrawer/CodeView.tsx
new file mode 100644
index 0000000..f4ad3d2
--- /dev/null
+++ b/apps/web/components/chatDrawer/CodeView.tsx
@@ -0,0 +1,56 @@
+import { CodeViewProps } from '@/types/chat';
+import { CodeBlock } from './CodeBlock';
+
+export function CodeView({
+  html,
+  css,
+  js,
+  isLoading,
+}: CodeViewProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-gray-100" />
+      </div>
+    );
+  }
+
+  const hasCode = html || css || js;
+
+  if (!hasCode) {
+    return (
+      <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+        No code available
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col gap-6 overflow-y-auto">
+      {html && (
+        <div>
+          <h3 className="text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">
+            HTML
+          </h3>
+          <CodeBlock code={html} language="html" />
+        </div>
+      )}
+      {css && (
+        <div>
+          <h3 className="text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">
+            CSS
+          </h3>
+          <CodeBlock code={css} language="css" />
+        </div>
+      )}
+      {js && (
+        <div>
+          <h3 className="text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">
+            JavaScript
+          </h3>
+          <CodeBlock code={js} language="javascript" />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/components/chatDrawer/DrawerContent.tsx b/apps/web/components/chatDrawer/DrawerContent.tsx
new file mode 100644
index 0000000..4022d4b
--- /dev/null
+++ b/apps/web/components/chatDrawer/DrawerContent.tsx
@@ -0,0 +1,58 @@
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from '@repo/ui/components/tabs';
+import { Code2, Eye } from 'lucide-react';
+import { ExtractedCode } from '@/types/chat';
+import { VisualizationFrame } from './VisualizationFrame';
+import { CodeView } from './CodeView';
+
+interface DrawerContentProps {
+  extractedCode: ExtractedCode;
+  isLoading: boolean;
+}
+
+export function DrawerContent({
+  extractedCode,
+  isLoading,
+}: DrawerContentProps) {
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <Tabs
+        defaultValue="visualize"
+        className="flex-1 flex flex-col w-full h-full"
+      >
+        <TabsList className="grid w-full grid-cols-2 bg-transparent px-6">
+          <TabsTrigger
+            value="visualize"
+            className="flex items-center gap-2 data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-800 rounded-t-md px-4 py-2 transition-colors"
+          >
+            <Eye className="h-4 w-4" />
+            Preview
+          </TabsTrigger>
+          <TabsTrigger
+            value="code"
+            className="flex items-center gap-2 data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-800 rounded-t-md px-4 py-2 transition-colors"
+          >
+            <Code2 className="h-4 w-4" />
+            Code
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent
+          value="visualize"
+          className="flex-1 flex flex-col p-6 h-0 min-h-0"
+        >
+          <VisualizationFrame {...extractedCode} />
+        </TabsContent>
+        <TabsContent
+          value="code"
+          className="flex-1 flex flex-col p-6 h-0 min-h-0"
+        >
+          <CodeView {...extractedCode} isLoading={isLoading} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/web/components/chatDrawer/DrawerHeader.tsx b/apps/web/components/chatDrawer/DrawerHeader.tsx
new file mode 100644
index 0000000..cf334c9
--- /dev/null
+++ b/apps/web/components/chatDrawer/DrawerHeader.tsx
@@ -0,0 +1,35 @@
+import { Button } from '@repo/ui/components/button';
+import { DrawerTitle } from '@repo/ui/components/drawer';
+import { X } from 'lucide-react';
+
+interface DrawerHeaderProps {
+  currentPreviewIndex: number | null;
+  previewMessageIndex: number | null | undefined;
+  onClose: () => void;
+}
+
+export function DrawerHeader({
+  currentPreviewIndex,
+  previewMessageIndex,
+  onClose,
+}: DrawerHeaderProps) {
+  const messageNumber = (currentPreviewIndex ?? previewMessageIndex ?? 0) + 1;
+  const showMessageNumber =
+    currentPreviewIndex !== null || previewMessageIndex !== null;
+
+  return (
+    <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+      <DrawerTitle className="text-lg font-semibold">
+        Code Preview
+        {showMessageNumber && (
+          <span className="text-sm font-normal text-gray-500 ml-2">
+            (Message {messageNumber})
+          </span>
+        )}
+      </DrawerTitle>
+      <Button variant="ghost" size="icon" onClick={onClose}>
+        <X className="h-5 w-5" />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/components/chatDrawer/README.md b/apps/web/components/chatDrawer/README.md
new file mode 100644
index 0000000..eaea6a9
--- /dev/null
+++ b/apps/web/components/chatDrawer/README.md
@@ -0,0 +1,97 @@
+# Chat Drawer Component
+
+This directory contains the ChatDrawer component with proper separation of concerns and global organization.
+
+## Structure
+
+```
+chatDrawer/
+├── ChatDrawer.tsx              # Main component
+├── CodeBlock.tsx               # Individual code block display
+├── CodeDetectedNotification.tsx  # Notification when code is detected
+├── CodeView.tsx                # Code view with syntax highlighting
+├── DrawerContent.tsx           # Main drawer content with tabs
+├── DrawerHeader.tsx            # Drawer header with title and close button
+├── VisualizationFrame.tsx      # Iframe for code preview
+├── index.ts                    # Component exports
+└── README.md                   # This file
+```
+
+## Global Organization
+
+The ChatDrawer component is now properly organized across the global directories:
+
+### **Hooks** (`@/hooks/useChatDrawer.ts`)
+
+- Custom hook for managing chat drawer state
+- Handles message fetching, code extraction, and auto-opening behavior
+- Encapsulates all complex state management logic
+
+### **Types** (`@/types/chat.ts`)
+
+- All TypeScript interfaces are centralized
+- Includes `ExtractedCode`, `ChatDrawerProps`, `CodeViewProps`, `CodeBlockProps`
+- Extends existing chat types
+
+### **Utils** (`@/utils/codeExtractor.ts`)
+
+- Code extraction and parsing utilities
+- Functions for categorizing and extracting HTML, CSS, and JavaScript
+- Message completion checking logic
+
+### **Components** (`@/components/chatDrawer/`)
+
+- All UI components are organized in their own directory
+- Each component has a single responsibility
+- Clean separation between logic and presentation
+
+## Key Benefits
+
+1. **Global Accessibility**: Components, hooks, and utilities can be used throughout the application
+2. **No Import Conflicts**: Proper organization prevents naming conflicts
+3. **Better Maintainability**: Clear separation of concerns
+4. **Reusability**: Components and utilities can be reused in other parts of the app
+5. **Consistent Structure**: Follows the established project patterns
+
+## Usage
+
+```tsx
+import { ChatDrawer } from '@/components/chatDrawer';
+
+<ChatDrawer
+  chatId="chat-123"
+  messages={messages}
+  previewMessageIndex={selectedMessageIndex}
+  previewTimestamp={timestamp}
+/>;
+```
+
+## Import Structure
+
+```tsx
+// Main component
+import { ChatDrawer } from '@/components/chatDrawer';
+
+// Individual components (if needed)
+import {
+  CodeBlock,
+  CodeView,
+  VisualizationFrame,
+} from '@/components/chatDrawer';
+
+// Hook (if needed elsewhere)
+import { useChatDrawer } from '@/hooks/useChatDrawer';
+
+// Types
+import { ChatDrawerProps, ExtractedCode } from '@/types/chat';
+
+// Utils
+import { extractCodeFromContent, hasCode } from '@/utils/codeExtractor';
+```
+
+## Migration Notes
+
+- All imports have been updated to use global paths (`@/`)
+- No conflicts with existing code
+- Maintains all original functionality
+- Improved organization and maintainability
diff --git a/apps/web/components/chatDrawer/VisualizationFrame.tsx b/apps/web/components/chatDrawer/VisualizationFrame.tsx
new file mode 100644
index 0000000..a54893b
--- /dev/null
+++ b/apps/web/components/chatDrawer/VisualizationFrame.tsx
@@ -0,0 +1,53 @@
+import { ExtractedCode } from '@/types/chat';
+
+export function VisualizationFrame({ html, css, js }: ExtractedCode) {
+  if (!html && !css && !js) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
+        No code to visualize
+      </div>
+    );
+  }
+
+  const iframeSrcDoc = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <style>
+          ${css}
+          body {
+            margin: 0;
+            padding: 0;
+            background: white;
+          }
+          canvas {
+            width: 100%;
+            height: 100%;
+          }
+          .content {
+            width: 100%;
+            height: 100%;
+          }
+          .container {
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+      </head>
+      <body>
+        ${html}
+        <script>${js}</script>
+      </body>
+    </html>
+  `;
+
+  return (
+    <div className="w-full h-full bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <iframe
+        srcDoc={iframeSrcDoc}
+        sandbox="allow-scripts"
+        className="w-full h-full border-0 flex-1 min-h-0"
+      />
+    </div>
+  );
+}
diff --git a/apps/web/components/chatDrawer/index.ts b/apps/web/components/chatDrawer/index.ts
new file mode 100644
index 0000000..1eed269
--- /dev/null
+++ b/apps/web/components/chatDrawer/index.ts
@@ -0,0 +1,6 @@
+export { ChatDrawer } from './ChatDrawer';
+export { CodeBlock } from './CodeBlock';
+export { CodeView } from './CodeView';
+export { DrawerContent } from './DrawerContent';
+export { DrawerHeader } from './DrawerHeader';
+export { VisualizationFrame } from './VisualizationFrame';
diff --git a/apps/web/components/sidebar/sidebar.tsx b/apps/web/components/sidebar/sidebar.tsx
index 8e1f175..5665f0c 100644
--- a/apps/web/components/sidebar/sidebar.tsx
+++ b/apps/web/components/sidebar/sidebar.tsx
@@ -66,6 +66,7 @@ export function AppSidebar({ recentChatsContent, ...props }: AppSidebarProps) {
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
+
         {/* We create a SidebarGroup for each parent. */}
         {data.navMain.map((item) => (
           <SidebarGroup key={item.title}>
diff --git a/apps/web/hooks/useChatDrawer.ts b/apps/web/hooks/useChatDrawer.ts
new file mode 100644
index 0000000..2893b22
--- /dev/null
+++ b/apps/web/hooks/useChatDrawer.ts
@@ -0,0 +1,186 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Message } from '@/types/chat';
+import {
+  extractCodeFromContent,
+  isMessageComplete,
+  hasCode,
+} from '@/utils/codeExtractor';
+
+interface ExtractedCode {
+  html: string;
+  css: string;
+  js: string;
+}
+
+interface UseChatDrawerProps {
+  chatId: string;
+  initialMessages: Message[];
+  previewMessageIndex?: number | null;
+  previewTimestamp?: number;
+}
+
+interface UseChatDrawerReturn {
+  messages: Message[];
+  extractedCode: ExtractedCode;
+  open: boolean;
+  isLoading: boolean;
+  currentPreviewIndex: number | null;
+  manuallyClosedMessageId: string;
+  handleOpenChange: (newOpen: boolean) => void;
+  setExtractedCode: (code: ExtractedCode) => void;
+}
+
+export const useChatDrawer = ({
+  chatId,
+  initialMessages,
+  previewMessageIndex,
+  previewTimestamp,
+}: UseChatDrawerProps): UseChatDrawerReturn => {
+  const [messages, setMessages] = useState(initialMessages);
+  const [extractedCode, setExtractedCode] = useState<ExtractedCode>({
+    html: '',
+    css: '',
+    js: '',
+  });
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPreviewIndex, setCurrentPreviewIndex] = useState<number | null>(
+    null,
+  );
+  const [manuallyClosedMessageId, setManuallyClosedMessageId] =
+    useState<string>('');
+  const [lastProcessedMessageId, setLastProcessedMessageId] =
+    useState<string>('');
+
+  const fetchMessages = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(`/api/chats/${chatId}`);
+      if (!response.ok) throw new Error('Failed to fetch messages');
+      const { messages: fetchedMessages } = await response.json();
+      setMessages(fetchedMessages);
+    } catch (error) {
+      console.error('Failed to fetch messages:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [chatId]);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      if (!newOpen) {
+        const lastAssistantMessage = [...messages]
+          .reverse()
+          .find((m) => m.role === 'assistant');
+        if (lastAssistantMessage?.id) {
+          setManuallyClosedMessageId(lastAssistantMessage.id);
+        }
+        setCurrentPreviewIndex(null);
+      }
+    },
+    [messages],
+  );
+
+  // Handle external preview message index changes
+  useEffect(() => {
+    if (previewMessageIndex !== null && previewMessageIndex !== undefined) {
+      const message = messages[previewMessageIndex];
+      if (message && message.role === 'assistant') {
+        if (!isMessageComplete(message.content)) {
+          return;
+        }
+
+        const newExtractedCode = extractCodeFromContent(message.content);
+        setExtractedCode(newExtractedCode);
+        setCurrentPreviewIndex(previewMessageIndex);
+        setOpen(true);
+      }
+    }
+  }, [previewMessageIndex, previewTimestamp, messages]);
+
+  // Fetch messages when drawer opens
+  useEffect(() => {
+    if (open) {
+      fetchMessages();
+    }
+  }, [open, fetchMessages]);
+
+  // Update messages when initialMessages changes
+  useEffect(() => {
+    setMessages(initialMessages);
+  }, [initialMessages]);
+
+  // Auto-open drawer when code is detected in completed assistant messages
+  useEffect(() => {
+    // Skip if we're already showing a specific message or if drawer is open
+    if (currentPreviewIndex !== null || previewMessageIndex !== null || open) {
+      return;
+    }
+
+    const lastAssistantMessage = [...messages]
+      .reverse()
+      .find((m) => m.role === 'assistant');
+
+    if (!lastAssistantMessage) {
+      return;
+    }
+
+    // Skip if we've already processed this message
+    if (lastAssistantMessage.id === lastProcessedMessageId) {
+      return;
+    }
+
+    // Skip if message was manually closed
+    if (lastAssistantMessage.id === manuallyClosedMessageId) {
+      return;
+    }
+
+    // Only process complete messages that aren't loading
+    if (
+      !isMessageComplete(lastAssistantMessage.content) ||
+      lastAssistantMessage.isLoading
+    ) {
+      return;
+    }
+
+    const newExtractedCode = extractCodeFromContent(
+      lastAssistantMessage.content,
+    );
+    const hasCodeInMessage = hasCode(newExtractedCode);
+
+    if (hasCodeInMessage) {
+      // Open drawer immediately when code is detected
+      setExtractedCode(newExtractedCode);
+      setLastProcessedMessageId(lastAssistantMessage.id);
+      setOpen(true);
+    }
+  }, [
+    messages,
+    open,
+    currentPreviewIndex,
+    previewMessageIndex,
+    manuallyClosedMessageId,
+    lastProcessedMessageId,
+  ]);
+
+  // Reset states when messages change significantly (new chat)
+  useEffect(() => {
+    if (messages.length <= 1) {
+      setCurrentPreviewIndex(null);
+      setManuallyClosedMessageId('');
+      setLastProcessedMessageId('');
+    }
+  }, [messages.length]);
+
+  return {
+    messages,
+    extractedCode,
+    open,
+    isLoading,
+    currentPreviewIndex,
+    manuallyClosedMessageId,
+    handleOpenChange,
+    setExtractedCode,
+  };
+};
diff --git a/apps/web/services/server/AI/image-generation-tool.definition.ts b/apps/web/services/server/AI/image-generation-tool.definition.ts
new file mode 100644
index 0000000..757a726
--- /dev/null
+++ b/apps/web/services/server/AI/image-generation-tool.definition.ts
@@ -0,0 +1,34 @@
+export const imageGenerationToolDefinition = {
+  type: 'function',
+  function: {
+    name: 'generateImage',
+    description: 'Generate an image based on a text prompt',
+    parameters: {
+      type: 'object',
+      properties: {
+        prompt: {
+          type: 'string',
+          description: 'The text prompt describing the image to generate',
+        },
+        revised_prompt: {
+          type: 'string',
+          description:
+            'A more detailed or refined version of the original prompt for better results',
+        },
+        size: {
+          type: 'string',
+          enum: ['256x256', '512x512', '1024x1024'],
+          description: 'The size of the generated image',
+          default: '512x512',
+        },
+        quality: {
+          type: 'string',
+          enum: ['standard', 'hd'],
+          description: 'The quality of the generated image',
+          default: 'standard',
+        },
+      },
+      required: ['prompt'],
+    },
+  },
+};
diff --git a/apps/web/services/server/AI/image-generation-tool.execution.ts b/apps/web/services/server/AI/image-generation-tool.execution.ts
new file mode 100644
index 0000000..5f52a1e
--- /dev/null
+++ b/apps/web/services/server/AI/image-generation-tool.execution.ts
@@ -0,0 +1,36 @@
+import OpenAI from 'openai';
+
+interface GenerateImageParams {
+  prompt: string;
+  size?: '256x256' | '512x512' | '1024x1024';
+  quality?: 'standard' | 'hd';
+}
+
+export const imageGenerationToolsExecution = (client: OpenAI) => ({
+  generateImage: async (params: GenerateImageParams) => {
+    try {
+      const response = await client.images.generate({
+        model: 'dall-e-3',
+        prompt: params.prompt,
+        n: 1,
+        size: params.size || '512x512',
+        quality: params.quality || 'standard',
+      });
+
+      if (!response.data?.[0]?.url) {
+        throw new Error('No image URL in response');
+      }
+
+      return {
+        success: true,
+        data: response.data[0].url,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error:
+          error instanceof Error ? error.message : 'Failed to generate image',
+      };
+    }
+  },
+});
diff --git a/apps/web/services/server/AI/openai.service.ts b/apps/web/services/server/AI/openai.service.ts
index 553c307..7627197 100644
--- a/apps/web/services/server/AI/openai.service.ts
+++ b/apps/web/services/server/AI/openai.service.ts
@@ -5,6 +5,8 @@ import {
 } from 'openai/resources/chat/completions.mjs';
 import { facebookToolDefinition } from './facebook-tools.definition';
 import { facebookToolsExecution } from './facebook-tools.execution';
+import { imageGenerationToolDefinition } from './image-generation-tool.definition';
+import { imageGenerationToolsExecution } from './image-generation-tool.execution';
 
 export class OpenAIChatService {
   private client: OpenAI;
@@ -21,8 +23,11 @@ export class OpenAIChatService {
     }
 
     this.client = new OpenAI({ apiKey, timeout: 30000, maxRetries: 2 });
-    this.tools = facebookToolsExecution(accessToken);
-    this.instructions = `You're a marketer expert. Help user perform the best marketing actions, you'll provide a very specific plan for the user based on information you'll get through tools. Use the following act_id as ad account id: ${adAccountId} if user didn't provide another one in the message. If you got an error that access token is not provided ask user to make sure they selected an account or try to re-link them`;
+    this.tools = {
+      ...facebookToolsExecution(accessToken),
+      ...imageGenerationToolsExecution(this.client),
+    };
+    this.instructions = `You're a marketer expert. Help user perform the best marketing actions, you'll provide a very specific plan for the user based on information you'll get through tools. Use the following act_id as ad account id: ${adAccountId} if user didn't provide another one in the message. If you got an error that access token is not provided ask user to make sure they selected an account or try to re-link them, if you were asked to generate reports generate page using html, css, js page contains the report and tableau like charts needed for marketer and make the max generated components 500px wide`;
   }
 
   async *streamChat(
@@ -38,10 +43,13 @@ export class OpenAIChatService {
           },
           ...messages,
         ],
-        tools: facebookToolDefinition as ChatCompletionTool[],
+        tools: [
+          ...facebookToolDefinition,
+          imageGenerationToolDefinition,
+        ] as ChatCompletionTool[],
         stream: true,
         temperature: 0.7,
-        max_tokens: 1024,
+        // max_tokens: 1024,
         stream_options: { include_usage: false },
         top_p: 0.9,
         frequency_penalty: 0,
diff --git a/apps/web/types/chat.ts b/apps/web/types/chat.ts
index 85de5df..dafc655 100644
--- a/apps/web/types/chat.ts
+++ b/apps/web/types/chat.ts
@@ -54,3 +54,26 @@ export interface CreateMessageData {
   role: 'user' | 'assistant';
   isLoading?: boolean;
 }
+
+// Chat Drawer Types
+export interface ExtractedCode {
+  html: string;
+  css: string;
+  js: string;
+}
+
+export interface ChatDrawerProps {
+  chatId: string;
+  messages: Message[];
+  previewMessageIndex?: number | null;
+  previewTimestamp?: number;
+}
+
+export interface CodeViewProps extends ExtractedCode {
+  isLoading: boolean;
+}
+
+export interface CodeBlockProps {
+  code: string;
+  language: string;
+}
diff --git a/apps/web/utils/codeDetection.ts b/apps/web/utils/codeDetection.ts
new file mode 100644
index 0000000..93a101f
--- /dev/null
+++ b/apps/web/utils/codeDetection.ts
@@ -0,0 +1,45 @@
+// Function to detect if a message contains generated code
+export const hasGeneratedCode = (content: string): boolean => {
+  // Check for code blocks with HTML, CSS, or JavaScript
+  const htmlMatch = content.match(/```html\n([\s\S]*?)```/);
+  const cssMatch = content.match(/```css\n([\s\S]*?)```/);
+  const jsMatch = content.match(/```javascript\n([\s\S]*?)```/);
+  const jsAltMatch = content.match(/```js\n([\s\S]*?)```/);
+
+  // Also check for code blocks without language specification that contain HTML/CSS/JS
+  const genericCodeBlocks = content.match(/```\n([\s\S]*?)```/g);
+  let hasGenericCode = false;
+
+  if (genericCodeBlocks) {
+    for (const block of genericCodeBlocks) {
+      const codeContent = block.replace(/```\n/, '').replace(/```/, '');
+      // Check if the code content looks like HTML, CSS, or JavaScript
+      if (
+        codeContent.includes('<html') ||
+        codeContent.includes('<div') ||
+        codeContent.includes('<body') ||
+        codeContent.includes('function') ||
+        codeContent.includes('const ') ||
+        codeContent.includes('let ') ||
+        codeContent.includes('var ') ||
+        (codeContent.includes('{') && codeContent.includes('}')) ||
+        codeContent.includes(';') ||
+        codeContent.includes('color:') ||
+        codeContent.includes('background:') ||
+        codeContent.includes('margin:') ||
+        codeContent.includes('padding:')
+      ) {
+        hasGenericCode = true;
+        break;
+      }
+    }
+  }
+
+  return !!(
+    htmlMatch?.[1]?.trim() ||
+    cssMatch?.[1]?.trim() ||
+    jsMatch?.[1]?.trim() ||
+    jsAltMatch?.[1]?.trim() ||
+    hasGenericCode
+  );
+};
diff --git a/apps/web/utils/codeExtractor.ts b/apps/web/utils/codeExtractor.ts
new file mode 100644
index 0000000..4f69015
--- /dev/null
+++ b/apps/web/utils/codeExtractor.ts
@@ -0,0 +1,75 @@
+import { ExtractedCode } from '@/types/chat';
+
+const HTML_PATTERNS = ['<html', '<div', '<body', '<head', '<!DOCTYPE'];
+const CSS_PATTERNS = [
+  'color:',
+  'background:',
+  'margin:',
+  'padding:',
+  'font-',
+  'border:',
+  'display:',
+  'position:',
+];
+const JS_PATTERNS = [
+  'function',
+  'const ',
+  'let ',
+  'var ',
+  'document.',
+  'window.',
+  'addEventListener',
+  'console.',
+];
+
+export const categorizeGenericCode = (
+  codeContent: string,
+  result: ExtractedCode,
+): ExtractedCode => {
+  const newResult = { ...result };
+
+  if (HTML_PATTERNS.some((pattern) => codeContent.includes(pattern))) {
+    newResult.html = codeContent;
+  } else if (CSS_PATTERNS.some((pattern) => codeContent.includes(pattern))) {
+    newResult.css = codeContent;
+  } else if (JS_PATTERNS.some((pattern) => codeContent.includes(pattern))) {
+    newResult.js = codeContent;
+  }
+
+  return newResult;
+};
+
+export const extractCodeFromContent = (content: string): ExtractedCode => {
+  const result: ExtractedCode = { html: '', css: '', js: '' };
+
+  // Extract language-specific code blocks
+  const htmlMatch = content.match(/```html\n([\s\S]*?)```/);
+  const cssMatch = content.match(/```css\n([\s\S]*?)```/);
+  const jsMatch = content.match(/```javascript\n([\s\S]*?)```/);
+  const jsAltMatch = content.match(/```js\n([\s\S]*?)```/);
+
+  result.html = htmlMatch?.[1]?.trim() || '';
+  result.css = cssMatch?.[1]?.trim() || '';
+  result.js = (jsMatch?.[1] || jsAltMatch?.[1])?.trim() || '';
+
+  // Extract and categorize generic code blocks
+  const genericCodeBlocks = content.match(/```\n([\s\S]*?)```/g);
+  if (genericCodeBlocks) {
+    genericCodeBlocks.forEach((block) => {
+      const codeContent = block.replace(/```\n/, '').replace(/```/, '').trim();
+      const categorizedResult = categorizeGenericCode(codeContent, result);
+      Object.assign(result, categorizedResult);
+    });
+  }
+
+  return result;
+};
+
+export const isMessageComplete = (content: string): boolean => {
+  const codeBlockCount = (content.match(/```/g) || []).length;
+  return codeBlockCount % 2 === 0; // Even number means all code blocks are closed
+};
+
+export const hasCode = (extractedCode: ExtractedCode): boolean => {
+  return !!(extractedCode.html || extractedCode.css || extractedCode.js);
+};
diff --git a/packages/ui/src/components/chat-bubble.tsx b/packages/ui/src/components/chat-bubble.tsx
index 4cc28db..6b3cc4d 100644
--- a/packages/ui/src/components/chat-bubble.tsx
+++ b/packages/ui/src/components/chat-bubble.tsx
@@ -6,13 +6,14 @@ import { Loader2 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Components } from 'react-markdown';
+import { ImagePreviewDialog } from './image-preview-dialog';
 
 const chatBubbleVariants = cva('rounded-lg p-4 max-w-[80%] text-sm', {
   variants: {
     variant: {
       user: 'bg-primary text-primary-foreground ml-auto',
       assistant:
-        'bg-muted text-muted-foreground mr-auto prose prose-invert dark:prose-invert max-w-none',
+        'bg-muted text-muted-foreground mr-auto prose prose-invert dark:prose-invert max-w-none break-words overflow-hidden',
     },
   },
   defaultVariants: {
@@ -27,20 +28,39 @@ interface ChatBubbleProps
   userImage?: string;
   userName?: string;
   isLoading?: boolean;
+  image?: string;
 }
 
 const markdownComponents: Components = {
   pre: ({ children }) => (
-    <pre className="overflow-auto rounded-lg bg-black/10 p-2">{children}</pre>
+    <pre className="hidden overflow-x-auto rounded-lg bg-black/10 p-2 break-words whitespace-pre-wrap">
+      {children}
+    </pre>
   ),
   code: ({ children, className }) => {
     const isInline = !className;
     return isInline ? (
-      <code className="rounded bg-black/10 px-1 py-0.5">{children}</code>
+      <code className="rounded bg-black/10 px-1 py-0.5 break-words">
+        {children}
+      </code>
     ) : (
-      <code className={className}>{children}</code>
+      <code className={cn(className, 'break-words')}>{children}</code>
     );
   },
+  p: ({ children }) => (
+    <p className="break-words overflow-hidden">{children}</p>
+  ),
+  img: ({ src, alt }) => (
+    <div className="my-2">
+      <ImagePreviewDialog src={src || ''} alt={alt || 'Image'}>
+        <img
+          src={src}
+          alt={alt || 'Image'}
+          className="max-w-[150px] max-h-[150px] rounded-lg object-cover hover:opacity-90 transition-opacity"
+        />
+      </ImagePreviewDialog>
+    </div>
+  ),
 };
 
 export function ChatBubble({
@@ -50,6 +70,7 @@ export function ChatBubble({
   userImage,
   userName,
   isLoading,
+  image,
   ...props
 }: ChatBubbleProps) {
   return (
@@ -70,16 +91,29 @@ export function ChatBubble({
         )}
         {...props}
       >
-        <div className="whitespace-pre-wrap">
+        <div className="whitespace-pre-wrap break-words overflow-hidden">
           {variant === 'user' ? (
-            message.split('\n').map((line, i) => (
-              <React.Fragment key={i}>
-                {line}
-                {i < message.split('\n').length - 1 && <br />}
-              </React.Fragment>
-            ))
+            <>
+              {image && (
+                <div className="mb-2">
+                  <ImagePreviewDialog src={image} alt="User uploaded image">
+                    <img
+                      src={image}
+                      alt="User uploaded image"
+                      className="max-w-[150px] max-h-[150px] rounded-lg object-cover hover:opacity-90 transition-opacity"
+                    />
+                  </ImagePreviewDialog>
+                </div>
+              )}
+              {message.split('\n').map((line, i) => (
+                <React.Fragment key={i}>
+                  {line}
+                  {i < message.split('\n').length - 1 && <br />}
+                </React.Fragment>
+              ))}
+            </>
           ) : (
-            <div className="[&_*:first-child]:mt-0 [&_*:last-child]:mb-0 leading-normal">
+            <div className="[&_*:first-child]:mt-0 [&_*:last-child]:mb-0 leading-normal break-words overflow-hidden">
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}
                 components={markdownComponents}
diff --git a/packages/ui/src/components/image-preview-dialog.tsx b/packages/ui/src/components/image-preview-dialog.tsx
new file mode 100644
index 0000000..452e1db
--- /dev/null
+++ b/packages/ui/src/components/image-preview-dialog.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { Dialog, DialogContent, DialogTrigger, DialogClose } from './dialog';
+import { cn } from '@repo/ui/lib/utils';
+import { X } from 'lucide-react';
+
+interface ImagePreviewDialogProps {
+  src: string;
+  alt?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ImagePreviewDialog({
+  src,
+  alt = 'Image',
+  children,
+  className,
+}: ImagePreviewDialogProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <div className={cn('cursor-pointer', className)}>{children}</div>
+      </DialogTrigger>
+      <DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none">
+        <div className="relative w-full h-full flex items-center justify-center">
+          <img
+            src={src}
+            alt={alt}
+            className="max-w-full max-h-full object-contain rounded-lg"
+            onClick={(e) => e.stopPropagation()}
+          />
+          <DialogClose asChild>
+            <button
+              className="absolute top-4 right-4 z-50 rounded-full bg-black/50 hover:bg-black/70 text-white p-2 transition-colors duration-200 backdrop-blur-sm"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}