diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 0a30c29..7d2a2ea 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -1,11 +1,8 @@
-import { useRef, useState, useEffect } from 'react'
 import { type AgentState, type ReceivedMessage, useChat } from '@livekit/components-react'
 import { Keyboard, Loader, Plus, SendHorizontal, Trash2 } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 
-import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript'
 import { Conversation, ConversationContent, ConversationScrollButton } from '@/components/ai-elements/conversation'
-import { Button } from '@/components/ui/button'
 import { Bubble, BubbleContent } from '@/components/ui/bubble'
 import { Button } from '@/components/ui/button'
 import { Drawer, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
@@ -61,69 +58,62 @@ export function Chat({ agentState, messages }: ChatProps) {
         </Button>
       </DrawerTrigger>
       <DrawerContent>
-        <div className="mx-auto flex h-[50svh] w-full max-w-2xl flex-col">
-          <DrawerHeader>
-            <DrawerTitle>Chat</DrawerTitle>
-          </DrawerHeader>
-          <div className="flex-1 overflow-hidden">
-            {messages.length === 0 ? (
-              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-                No messages yet. Start a conversation!
-              </div>
-            ) : (
-              <Conversation className="h-full">
-                <ConversationContent>
-                  {messages.length > 0 &&
-                    (() => {
-                      return (
-                        <Marker variant="separator">
-                          <MarkerContent>Conversation started</MarkerContent>
-                        </Marker>
-                      )
-                    })()}
-                  {messages.map((msg) => (
-                    <Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
-                      <MessageContent>
-                        <Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>
-                          <BubbleContent>{msg.content}</BubbleContent>
-                        </Bubble>
-                        <MessageFooter>{formatTime(msg.timestamp)}</MessageFooter>
-                      </MessageContent>
-                    </Message>
-                  ))}
-                  {messages.length > 0 && (
-                    <AgentChatTranscript agentState={agentState} messages={messages} className="h-full" />
-                  )}
-                </ConversationContent>
-                <ConversationScrollButton />
-              </Conversation>
-            )}
+        <DrawerHeader className="flex flex-row items-center justify-between border-b border-border">
+          <Button variant="ghost" size="icon" title="Delete conversation" className="text-muted-foreground">
+            <Trash2 className="size-5" />
+          </Button>
+          <DrawerTitle>Chat</DrawerTitle>
+          <Button variant="ghost" size="icon" title="New conversation" className="text-muted-foreground">
+            <Plus className="size-5" />
+          </Button>
+        </DrawerHeader>
+        <Conversation className="h-full overflow-y-auto">
+          <ConversationContent>
+            {messages.length > 0 &&
+              (() => {
+                return (
+                  <Marker variant="separator">
+                    <MarkerContent>Conversation started</MarkerContent>
+                  </Marker>
+                )
+              })()}
+            {messages.map((msg) => (
+              <Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
+                <MessageContent>
+                  <Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>
+                    <BubbleContent>{msg.content}</BubbleContent>
+                  </Bubble>
+                  <MessageFooter>{formatTime(msg.timestamp)}</MessageFooter>
+                </MessageContent>
+              </Message>
+            ))}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+        <DrawerFooter className="border-t border-border p-4">
+          <div className="flex items-end gap-2">
+            <textarea
+              ref={inputRef}
+              value={message}
+              disabled={isFormSubmitting}
+              placeholder="Type a message..."
+              onKeyDown={handleKeyDown}
+              onChange={(e) => setMessage(e.target.value)}
+              className="field-sizing-content max-h-20 min-h-9 flex-1 resize-none [scrollbar-width:thin] rounded-lg border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <Button
+              size="icon"
+              type="button"
+              disabled={isDisabled}
+              variant={isDisabled ? 'secondary' : 'default'}
+              title={isFormSubmitting ? 'Sending...' : 'Send'}
+              onClick={handleSend}
+              className="shrink-0"
+            >
+              {isFormSubmitting ? <Loader className="animate-spin" /> : <SendHorizontal />}
+            </Button>
           </div>
-          <div className="border-t border-border p-4">
-            <div className="flex items-end gap-2">
-              <textarea
-                ref={inputRef}
-                value={message}
-                disabled={isFormSubmitting}
-                placeholder="Type a message..."
-                onKeyDown={handleKeyDown}
-                onChange={(e) => setMessage(e.target.value)}
-                className="field-sizing-content max-h-20 min-h-9 flex-1 resize-none [scrollbar-width:thin] rounded-lg border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-              />
-              <Button
-                size="icon"
-                type="button"
-                disabled={isDisabled}
-                variant={isDisabled ? 'secondary' : 'default'}
-                title={isFormSubmitting ? 'Sending...' : 'Send'}
-                onClick={handleSend}
-                className="shrink-0"
-              >
-                {isFormSubmitting ? <Loader className="animate-spin" /> : <SendHorizontal />}
-              </Button>
-            </div>
-          </div>
-        </div>
+        </DrawerFooter>
       </DrawerContent>
     </Drawer>
   )