diff --git a/src/app/(app)/problems/[id]/@Bot/layout.tsx b/src/app/(app)/problems/[id]/@Bot/layout.tsx
deleted file mode 100644
index 675be62..0000000
--- a/src/app/(app)/problems/[id]/@Bot/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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]/@Bot/page.tsx b/src/app/(app)/problems/[id]/@Bot/page.tsx
deleted file mode 100644
index 6f40c81..0000000
--- a/src/app/(app)/problems/[id]/@Bot/page.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import { toast } from "sonner";
-import { useCallback } from "react";
-import { useChat } from "@ai-sdk/react";
-import { Button } from "@/components/ui/button";
-import { useProblem } from "@/hooks/use-problem";
-import MdxPreview from "@/components/mdx-preview";
-import { Textarea } from "@/components/ui/textarea";
-import { BotIcon, SendHorizonal } from "lucide-react";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
-import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-
-export default function AiBotPage() {
-  const { problemId, problem, currentLang, currentValue } = useProblem();
-  const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
-    initialMessages: [
-      {
-        id: problemId,
-        role: "system",
-        content: `Problem description:\n${problem.description}`,
-      },
-    ],
-  });
-
-  const handleFormSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!input.trim()) {
-        toast.error("Input cannot be empty");
-        return;
-      }
-
-      const currentCodeMessage = {
-        id: problemId,
-        role: "system" as const,
-        content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
-      };
-
-      setMessages((prev) => [...prev, currentCodeMessage]);
-      handleSubmit();
-    },
-    [currentLang, currentValue, handleSubmit, input, problemId, setMessages]
-  );
-
-  return (
-    <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">
-            <BotIcon />
-            <span>Ask Bot</span>
-            <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
-          </div>
-        )}
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
-          <ChatMessageList>
-            {messages
-              .filter((message) => message.role === "user" || message.role === "assistant")
-              .map((message) => (
-                <ChatBubble key={message.id} layout="ai" className="border-b pb-4">
-                  <ChatBubbleMessage layout="ai">
-                    <MdxPreview source={message.content} />
-                  </ChatBubbleMessage>
-                </ChatBubble>
-              ))}
-          </ChatMessageList>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </div>
-      <footer className="h-36 flex flex-none">
-        <form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
-          <Textarea
-            value={input}
-            onChange={handleInputChange}
-            onKeyDown={(e) => {
-              if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-                e.preventDefault();
-                if (input.trim()) {
-                  handleFormSubmit(e);
-                } else {
-                  toast.error("Input cannot be empty");
-                }
-              }
-            }}
-            className="h-full bg-muted border-transparent shadow-none rounded-lg"
-            placeholder="Bot will automatically get your current code"
-          />
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="submit"
-                  variant="ghost"
-                  className="absolute bottom-6 right-6 h-6 w-auto px-2"
-                  aria-label="Send Message"
-                >
-                  <SendHorizonal className="size-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent className="px-2 py-1 text-xs">Ctrl + Enter</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </form>
-      </footer>
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@Code/page.tsx b/src/app/(app)/problems/[id]/@Code/page.tsx
deleted file mode 100644
index 7b1c9f7..0000000
--- a/src/app/(app)/problems/[id]/@Code/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ProblemEditor } from "@/components/problem-editor";
-
-export default function CodePage() {
-  return (
-    <div className="absolute w-full h-full">
-      <ProblemEditor />
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@Description/layout.tsx b/src/app/(app)/problems/[id]/@Description/layout.tsx
deleted file mode 100644
index d94c10e..0000000
--- a/src/app/(app)/problems/[id]/@Description/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import { notFound } from "next/navigation";
-import { useProblem } from "@/hooks/use-problem";
-import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
-
-interface DescriptionLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
-  const { problem } = useProblem();
-
-  if (!problem) {
-    notFound();
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <main className="relative flex-1 border-x border-muted">
-        {children}
-      </main>
-      <ProblemDescriptionFooter title={problem.title} />
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@Description/page.tsx b/src/app/(app)/problems/[id]/@Description/page.tsx
deleted file mode 100644
index 5a9b16a..0000000
--- a/src/app/(app)/problems/[id]/@Description/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { notFound } from "next/navigation";
-import { useProblem } from "@/hooks/use-problem";
-import MdxPreview from "@/components/mdx-preview";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-
-export default function DescriptionPage() {
-  const { problem } = useProblem();
-
-  if (!problem) {
-    notFound();
-  }
-
-  return (
-    <div className="absolute h-full w-full">
-      <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
-        <MdxPreview source={problem.description} className="p-4 md:p-6" />
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@Solutions/layout.tsx b/src/app/(app)/problems/[id]/@Solutions/layout.tsx
deleted file mode 100644
index a1aa42a..0000000
--- a/src/app/(app)/problems/[id]/@Solutions/layout.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { notFound } from "next/navigation";
-import { useProblem } from "@/hooks/use-problem";
-import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
-
-interface SolutionsLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function SolutionsLayout({
-  children,
-}: SolutionsLayoutProps) {
-  const { problem } = useProblem();
-
-  if (!problem) {
-    notFound();
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="relative flex-1 border-x border-muted">
-        {children}
-      </div>
-      <ProblemSolutionFooter title={problem.title} />
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/@Solutions/page.tsx b/src/app/(app)/problems/[id]/@Solutions/page.tsx
deleted file mode 100644
index d76b819..0000000
--- a/src/app/(app)/problems/[id]/@Solutions/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { notFound } from "next/navigation";
-import { useProblem } from "@/hooks/use-problem";
-import MdxPreview from "@/components/mdx-preview";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-
-export default function SolutionsPage() {
-  const { problem } = useProblem();
-
-  if (!problem) {
-    notFound();
-  }
-
-  return (
-    <div className="absolute h-full w-full">
-      <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
-        <MdxPreview source={problem.solution} className="p-4 md:p-6" />
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </div>
-  );
-}
diff --git a/src/app/(app)/problems/[id]/features/bot.tsx b/src/app/(app)/problems/[id]/features/bot.tsx
new file mode 100644
index 0000000..e094108
--- /dev/null
+++ b/src/app/(app)/problems/[id]/features/bot.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { toast } from "sonner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useCallback } from "react";
+import { useChat } from "@ai-sdk/react";
+import { Button } from "@/components/ui/button";
+import { useProblem } from "@/hooks/use-problem";
+import MdxPreview from "@/components/mdx-preview";
+import { Textarea } from "@/components/ui/textarea";
+import { BotIcon, SendHorizonal } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
+import { ChatBubble, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
+
+export default function Bot() {
+  const { problemId, problem, currentLang, currentValue } = useProblem();
+  const { messages, input, handleInputChange, setMessages, handleSubmit } = useChat({
+    initialMessages: [
+      {
+        id: problemId,
+        role: "system",
+        content: `Problem description:\n${problem.description}`,
+      },
+    ],
+  });
+
+  const handleFormSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!input.trim()) {
+        toast.error("Input cannot be empty");
+        return;
+      }
+
+      const currentCodeMessage = {
+        id: problemId,
+        role: "system" as const,
+        content: `Current code:\n\`\`\`${currentLang}\n${currentValue}\n\`\`\``,
+      };
+
+      setMessages((prev) => [...prev, currentCodeMessage]);
+      handleSubmit();
+    },
+    [currentLang, currentValue, handleSubmit, input, problemId, setMessages]
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex-1 border-x border-muted">
+        <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">
+                <BotIcon />
+                <span>Ask Bot</span>
+                <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
+              </div>
+            )}
+            <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
+              <ChatMessageList>
+                {messages
+                  .filter(
+                    (message) => message.role === "user" || message.role === "assistant"
+                  )
+                  .map((message) => (
+                    <ChatBubble key={message.id} layout="ai" className="border-b pb-4">
+                      <ChatBubbleMessage layout="ai">
+                        <MdxPreview source={message.content} />
+                      </ChatBubbleMessage>
+                    </ChatBubble>
+                  ))}
+              </ChatMessageList>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+          <footer className="h-36 flex flex-none">
+            <form onSubmit={handleFormSubmit} className="w-full p-4 pt-0 relative">
+              <Textarea
+                value={input}
+                onChange={handleInputChange}
+                onKeyDown={(e) => {
+                  if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+                    e.preventDefault();
+                    if (input.trim()) {
+                      handleFormSubmit(e);
+                    } else {
+                      toast.error("Input cannot be empty");
+                    }
+                  }
+                }}
+                className="h-full bg-muted border-transparent shadow-none rounded-lg"
+                placeholder="Bot will automatically get your current code"
+              />
+              <TooltipProvider delayDuration={0}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="submit"
+                      variant="ghost"
+                      className="absolute bottom-6 right-6 h-6 w-auto px-2"
+                      aria-label="Send Message"
+                    >
+                      <SendHorizonal className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="px-2 py-1 text-xs">Ctrl + Enter</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </form>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Code/layout.tsx b/src/app/(app)/problems/[id]/features/code.tsx
similarity index 72%
rename from src/app/(app)/problems/[id]/@Code/layout.tsx
rename to src/app/(app)/problems/[id]/features/code.tsx
index 337197a..8731298 100644
--- a/src/app/(app)/problems/[id]/@Code/layout.tsx
+++ b/src/app/(app)/problems/[id]/features/code.tsx
@@ -1,16 +1,15 @@
+import { ProblemEditor } from "@/components/problem-editor";
 import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
 import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
 
-interface CodeLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function CodeLayout({ children }: CodeLayoutProps) {
+export default function Code() {
   return (
     <div className="flex flex-col h-full">
       <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
       <div className="relative flex-1 border-x border-muted">
-        {children}
+        <div className="absolute w-full h-full">
+          <ProblemEditor />
+        </div>
       </div>
       <WorkspaceEditorFooter />
     </div>
diff --git a/src/app/(app)/problems/[id]/features/description.tsx b/src/app/(app)/problems/[id]/features/description.tsx
new file mode 100644
index 0000000..eb2f493
--- /dev/null
+++ b/src/app/(app)/problems/[id]/features/description.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
+
+export default function Description() {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex-1 border-x border-muted">
+        <div className="absolute h-full w-full">
+          <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
+            <MdxPreview source={problem.description} className="p-4 md:p-6" />
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+      </div>
+      <ProblemDescriptionFooter title={problem.title} />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/features/index.ts b/src/app/(app)/problems/[id]/features/index.ts
new file mode 100644
index 0000000..f70a7d6
--- /dev/null
+++ b/src/app/(app)/problems/[id]/features/index.ts
@@ -0,0 +1,7 @@
+export { default as Bot } from "./bot";
+export { default as Code } from "./code";
+export { default as Description } from "./description";
+export { default as Solutions } from "./solutions";
+export { default as Submissions } from "./submissions";
+export { default as Testcase } from "./testcase";
+export { default as TestResult } from "./test-result";
diff --git a/src/app/(app)/problems/[id]/features/solutions.tsx b/src/app/(app)/problems/[id]/features/solutions.tsx
new file mode 100644
index 0000000..7b05fb6
--- /dev/null
+++ b/src/app/(app)/problems/[id]/features/solutions.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
+
+export default function Solutions() {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex-1 border-x border-muted">
+        <div className="absolute h-full w-full">
+          <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
+            <MdxPreview source={problem.solution} className="p-4 md:p-6" />
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+      </div>
+      <ProblemSolutionFooter title={problem.title} />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Submissions/page.tsx b/src/app/(app)/problems/[id]/features/submissions.tsx
similarity index 57%
rename from src/app/(app)/problems/[id]/@Submissions/page.tsx
rename to src/app/(app)/problems/[id]/features/submissions.tsx
index 6c443b7..d0a4e57 100644
--- a/src/app/(app)/problems/[id]/@Submissions/page.tsx
+++ b/src/app/(app)/problems/[id]/features/submissions.tsx
@@ -1,3 +1,3 @@
-export default function SubmissionsPage() {
+export default function Submissions() {
   return <div className="h-full px-4">Submissions</div>;
 }
diff --git a/src/app/(app)/problems/[id]/@TestResult/page.tsx b/src/app/(app)/problems/[id]/features/test-result.tsx
similarity index 57%
rename from src/app/(app)/problems/[id]/@TestResult/page.tsx
rename to src/app/(app)/problems/[id]/features/test-result.tsx
index f71967c..c954c5a 100644
--- a/src/app/(app)/problems/[id]/@TestResult/page.tsx
+++ b/src/app/(app)/problems/[id]/features/test-result.tsx
@@ -1,3 +1,3 @@
-export default function TestResultPage() {
+export default function TestResult() {
   return <div className="h-full px-4">Test Result</div>;
 }
diff --git a/src/app/(app)/problems/[id]/@Testcase/page.tsx b/src/app/(app)/problems/[id]/features/testcase.tsx
similarity index 57%
rename from src/app/(app)/problems/[id]/@Testcase/page.tsx
rename to src/app/(app)/problems/[id]/features/testcase.tsx
index 53b838e..4526fa0 100644
--- a/src/app/(app)/problems/[id]/@Testcase/page.tsx
+++ b/src/app/(app)/problems/[id]/features/testcase.tsx
@@ -1,3 +1,3 @@
-export default function TestcasePage() {
+export default function Testcase() {
   return <div className="h-full px-4">Testcase</div>;
 }