diff --git a/src/app/(app)/problems/[id]/@Bot/layout.tsx b/src/app/(app)/problems/[id]/@Bot/layout.tsx
new file mode 100644
index 0000000..675be62
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Bot/layout.tsx
@@ -0,0 +1,15 @@
+interface BotLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function BotLayout({
+  children,
+}: BotLayoutProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex-1 border-x border-muted">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx b/src/app/(app)/problems/[id]/@Bot/page.tsx
similarity index 98%
rename from src/app/(app)/problems/[id]/@ai/@bot/page.tsx
rename to src/app/(app)/problems/[id]/@Bot/page.tsx
index 7e10d13..6f40c81 100644
--- a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
+++ b/src/app/(app)/problems/[id]/@Bot/page.tsx
@@ -46,7 +46,7 @@ export default function AiBotPage() {
   );
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="flex flex-col h-full bg-background">
       <div className="flex-1 relative">
         {!messages.some((message) => message.role === "user" || message.role === "assistant") && (
           <div className="absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-muted-foreground flex flex-col items-center gap-2">
diff --git a/src/app/(app)/problems/[id]/@ai/@bot/layout.tsx b/src/app/(app)/problems/[id]/@ai/@bot/layout.tsx
deleted file mode 100644
index 8185d75..0000000
--- a/src/app/(app)/problems/[id]/@ai/@bot/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
-
-interface AiBotLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function AiBotLayout({
-  children,
-}: AiBotLayoutProps) {
-  return (
-    <Suspense fallback={<Loading />}>
-      {children}
-    </Suspense>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@ai/layout.tsx b/src/app/(app)/problems/[id]/@ai/layout.tsx
deleted file mode 100644
index 9f787f4..0000000
--- a/src/app/(app)/problems/[id]/@ai/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { BotIcon } from "lucide-react";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-interface AiLayoutProps {
-  bot: React.ReactNode;
-}
-
-export default function AiLayout({
-  bot,
-}: AiLayoutProps) {
-  return (
-    <Tabs defaultValue="bot" className="h-full flex flex-col">
-      <ScrollArea className="h-9 flex-none bg-muted">
-        <TabsList>
-          <TabsTrigger value="bot">
-            <BotIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Bot
-          </TabsTrigger>
-        </TabsList>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-      <TabsContent value="bot" className="h-full mt-0">
-        {bot}
-      </TabsContent>
-    </Tabs>
-  );
-}