diff --git a/src/app/(app)/problems/[id]/@Bot/page.tsx b/src/app/(app)/problems/[id]/@Bot/page.tsx
new file mode 100644
index 0000000..09bc148
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Bot/page.tsx
@@ -0,0 +1,125 @@
+"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 } 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 border border-t-0 border-muted rounded-b-3xl bg-background">
+      <div className="flex-1 relative">
+        {!messages.some(
+          (message) => message.role === "user" || message.role === "assistant"
+        ) && (
+          <div className="h-full flex flex-col items-center justify-center gap-2 text-muted-foreground">
+            <BotIcon />
+            <span>Ask Bot</span>
+            <span className="font-thin text-xs">Powered by Vercel Ai SDK</span>
+          </div>
+        )}
+
+        <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">
+            <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>
+          </ScrollArea>
+        </div>
+      </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
new file mode 100644
index 0000000..bb7becf
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Code/page.tsx
@@ -0,0 +1,17 @@
+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";
+
+export default function CodePage() {
+  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">
+        <div className="absolute w-full h-full">
+          <ProblemEditor />
+        </div>
+      </div>
+      <WorkspaceEditorFooter />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Description/page.tsx b/src/app/(app)/problems/[id]/@Description/page.tsx
new file mode 100644
index 0000000..297525e
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Description/page.tsx
@@ -0,0 +1,42 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
+
+interface DescriptionPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function DescriptionPage({ params }: DescriptionPageProps) {
+  const { id } = await params;
+
+  if (!id) {
+    return notFound();
+  }
+
+  const problem = await prisma.problem.findUnique({
+    where: { id },
+    select: {
+      title: true,
+      description: true,
+    },
+  });
+
+  if (!problem) {
+    return notFound();
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <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" />
+          </ScrollArea>
+        </div>
+      </div>
+      <ProblemDescriptionFooter title={problem.title} />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Solutions/page.tsx b/src/app/(app)/problems/[id]/@Solutions/page.tsx
new file mode 100644
index 0000000..bd697d9
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Solutions/page.tsx
@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
+
+interface SolutionsPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function SolutionsPage({ params }: SolutionsPageProps) {
+  const { id } = await params;
+
+  if (!id) {
+    return notFound();
+  }
+
+  const problem = await prisma.problem.findUnique({
+    where: { id },
+    select: {
+      title: true,
+      solution: true,
+    },
+  });
+
+  if (!problem) {
+    return 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]/@Submissions/page.tsx
new file mode 100644
index 0000000..d5e165d
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Submissions/page.tsx
@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import SubmissionsTable from "@/components/submissions-table";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface SubmissionsPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function SubmissionsPage({ params }: SubmissionsPageProps) {
+  const { id } = await params;
+
+  if (!id) {
+    return notFound();
+  }
+
+  const problem = await prisma.problem.findUnique({
+    where: { id },
+    select: {
+      submissions: true,
+    },
+  });
+
+  if (!problem) {
+    return notFound();
+  }
+
+  return (
+    <div className="px-3 flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <ScrollArea className="h-full">
+        <SubmissionsTable submissions={problem.submissions} />
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@TestResult/page.tsx b/src/app/(app)/problems/[id]/@TestResult/page.tsx
new file mode 100644
index 0000000..c954c5a
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@TestResult/page.tsx
@@ -0,0 +1,3 @@
+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]/@Testcase/page.tsx
new file mode 100644
index 0000000..4be2bf0
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Testcase/page.tsx
@@ -0,0 +1,41 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import TestcaseCard from "@/components/testcase-card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface TestcasePageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function TestcasePage({ params }: TestcasePageProps) {
+  const { id } = await params;
+
+  if (!id) {
+    return notFound();
+  }
+
+  const problem = await prisma.problem.findUnique({
+    where: { id },
+    select: {
+      testcases: {
+        include: {
+          data: true,
+        },
+      },
+    },
+  });
+
+  if (!problem) {
+    return notFound();
+  }
+
+  return (
+    <div className="relative h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <div className="absolute h-full w-full">
+        <ScrollArea className="h-full">
+          <TestcaseCard testcases={problem.testcases} />
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}