diff --git a/src/components/mods/studio/ai/chat-mode.tsx b/src/components/mods/studio/ai/chat-mode.tsx
deleted file mode 100644
index 76a9095..0000000
--- a/src/components/mods/studio/ai/chat-mode.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Bot, MessageSquare, Send } from 'lucide-react'
-import React from 'react'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Textarea } from '@/components/ui/textarea'
-
-import { Message } from '@/lib/definitions'
-
-export const ChatMode = ({
-  messages,
-  scrollAreaRef,
-  isLoading,
-  inputValue,
-  handleSubmit,
-  setInputValue
-}: {
-  messages: Message[]
-  scrollAreaRef: React.RefObject<HTMLDivElement>
-  isLoading: boolean
-  inputValue: string
-  handleSubmit: () => void
-  setInputValue: (value: string) => void
-}) => {
-  return (
-    <Card className='flex-1'>
-      <CardContent className='flex flex-col p-4 h-[350px]'>
-        <div
-          ref={scrollAreaRef}
-          className='flex-1 overflow-y-auto pr-4 mb-4 scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent'
-        >
-          <div className='space-y-4'>
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={`flex gap-3 ${message.role === 'assistant' ? 'justify-start' : 'justify-end'}`}
-              >
-                {message.role === 'assistant' && (
-                  <div className='rounded-full bg-primary/10 p-2 h-8 w-8 flex items-center justify-center shrink-0'>
-                    <Bot className='h-4 w-4' />
-                  </div>
-                )}
-                <div
-                  className={`rounded-lg px-4 py-2 max-w-[80%] ${
-                    message.role === 'assistant' ? 'bg-muted' : 'bg-primary text-primary-foreground'
-                  }`}
-                >
-                  <p className='text-sm whitespace-pre-wrap'>{message.content}</p>
-                </div>
-                {message.role === 'user' && (
-                  <div className='rounded-full bg-primary p-2 h-8 w-8 flex items-center justify-center shrink-0'>
-                    <MessageSquare className='h-4 w-4 text-white' />
-                  </div>
-                )}
-              </div>
-            ))}
-
-            {/* Loading Message */}
-            {isLoading && (
-              <div className='flex gap-3 justify-start'>
-                <div className='rounded-full bg-primary/10 p-2 h-8 w-8 flex items-center justify-center shrink-0'>
-                  <Bot className='h-4 w-4' />
-                </div>
-                <div className='rounded-lg px-4 py-2 max-w-[80%] bg-muted'>
-                  <p className='text-sm whitespace-pre-wrap flex items-center gap-1'>
-                    Drowser AI is responding
-                    <span className='inline-flex w-4'>
-                      <span className='animate-bounce'>.</span>
-                      <span className='animate-bounce' style={{ animationDelay: '0.2s' }}>
-                        .
-                      </span>
-                      <span className='animate-bounce' style={{ animationDelay: '0.4s' }}>
-                        .
-                      </span>
-                    </span>
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className='flex gap-2'>
-          <div className='relative flex-1'>
-            <Textarea
-              className='min-h-[80px] max-h-[160px] resize-none pr-12 bg-muted/50'
-              placeholder='Type your message here...'
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault()
-                  handleSubmit()
-                }
-              }}
-              disabled={isLoading}
-            />
-            <div className='absolute bottom-2 right-2'>
-              <Button
-                size='icon'
-                onClick={handleSubmit}
-                disabled={!inputValue.trim() || isLoading}
-                className='rounded-full'
-              >
-                <Send className='h-4 w-4' />
-                <span className='sr-only'>Send message</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/src/components/mods/studio/ai/prompt-mode.tsx b/src/components/mods/studio/ai/prompt-mode.tsx
deleted file mode 100644
index f585d1b..0000000
--- a/src/components/mods/studio/ai/prompt-mode.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Bot, Send, FileText } from 'lucide-react'
-import React from 'react'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Textarea } from '@/components/ui/textarea'
-
-export const PromptMode = ({
-  prompt,
-  response,
-  isLoading,
-  setInputValue,
-  handleSubmit
-}: {
-  prompt: string
-  response: string
-  isLoading: boolean
-  setInputValue: (value: string) => void
-  handleSubmit: () => void
-}) => {
-  return (
-    <div className='grid gap-4 lg:grid-cols-2 h-[350px]'>
-      <Card className='h-full'>
-        <CardHeader>
-          <CardTitle className='flex items-center gap-2 text-base'>
-            <FileText className='h-5 w-5' />
-            Analysis Prompt
-          </CardTitle>
-          <CardDescription>
-            Write your analysis request or select from the templates above
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className='space-y-4'>
-            <div className='relative'>
-              <Textarea
-                className='h-[150px] resize-none pr-12 bg-muted/50'
-                placeholder='Enter your analysis prompt here...'
-                value={prompt}
-                onChange={(e) => setInputValue(e.target.value)}
-                disabled={isLoading}
-              />
-              <div className='absolute bottom-2 right-2'>
-                <Button
-                  size='icon'
-                  onClick={handleSubmit}
-                  disabled={!prompt.trim() || isLoading}
-                  className='rounded-full'
-                >
-                  <Send className='h-4 w-4' />
-                  <span className='sr-only'>Send prompt</span>
-                </Button>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className='flex items-center gap-2 text-base'>
-            <Bot className='h-5 w-5' />
-            Analysis Response
-          </CardTitle>
-          <CardDescription>AI-generated analysis based on your prompt</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className='relative h-[175px] overflow-y-auto rounded-md bg-muted/50 p-4'>
-            {isLoading ? (
-              <div className='flex items-center gap-2 text-sm text-muted-foreground'>
-                <span>Drowser AI is thinking</span>
-                <span className='inline-flex w-4'>
-                  <span className='animate-bounce'>.</span>
-                  <span className='animate-bounce' style={{ animationDelay: '0.2s' }}>
-                    .
-                  </span>
-                  <span className='animate-bounce' style={{ animationDelay: '0.4s' }}>
-                    .
-                  </span>
-                </span>
-              </div>
-            ) : response ? (
-              <div className='text-sm whitespace-pre-wrap'>{response}</div>
-            ) : (
-              <div className='text-sm text-muted-foreground'>
-                Response will appear here after you submit a prompt.
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/src/hooks/use-ai.tsx b/src/hooks/use-ai.tsx
deleted file mode 100644
index ce54d32..0000000
--- a/src/hooks/use-ai.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useState, useCallback } from 'react'
-
-import { Message } from '@/lib/definitions'
-
-import { useReport } from '@/hooks/use-report'
-
-export const useAI = (type: 'chat' | 'prompt') => {
-  const [responseData, setResponseData] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const { report } = useReport()
-
-  const fetchData = useCallback(
-    async (input: string | Message[]) => {
-      if (!input || !type) return
-
-      const baseUrl = process.env.AI_BASE_URL
-      const endpoint = type === 'chat' ? `${baseUrl}/api/ai/chat` : `${baseUrl}/api/ai/generate`
-      const token = process.env.AI_TOKEN
-      const stringiedReport = JSON.stringify(report)
-
-      const prePrompt = `
-        You are Drowser AI with analyzing the following JSON report to provide insights on the performance of 
-        various tests. Please focus on key metrics, trends, and any anomalies detected. Do not respond with 
-        information unrelated to the test performance analysis.
-
-        ${stringiedReport}
-      `
-
-      const body = type === 'chat' ? { messages: input } : { prompt: `${prePrompt}\n${input}` }
-
-      setIsLoading(true)
-      try {
-        const response = await fetch(endpoint, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`
-          },
-          body: JSON.stringify(body)
-        })
-
-        if (!response.body) {
-          throw new Error('ReadableStream not yet supported in this browser.')
-        }
-
-        const reader = response.body.getReader()
-        const decoder = new TextDecoder()
-        let done = false
-        let responseText = ''
-
-        while (!done) {
-          const { value, done: doneReading } = await reader.read()
-          done = doneReading
-          const chunkValue = decoder.decode(value, { stream: true })
-          responseText += chunkValue
-        }
-
-        setResponseData(responseText)
-      } catch (error) {
-        console.error('Error fetching stream:', error)
-      } finally {
-        setIsLoading(false)
-      }
-    },
-    [report, type]
-  )
-
-  return { responseData, isLoading, fetchData }
-}