diff --git a/src/app/(app)/playground/@problem/@description/page.tsx b/src/app/(app)/playground/@problem/@description/page.tsx
index 10ab28c..7ef0a48 100644
--- a/src/app/(app)/playground/@problem/@description/page.tsx
+++ b/src/app/(app)/playground/@problem/@description/page.tsx
@@ -1,6 +1,6 @@
 import MdxPreview from "@/components/mdx-preview";
-import { DEFAULT_PROBLEM } from "@/config/problem";
+import { DEFAULT_PROBLEM_DESCRIPTION } from "@/config/problem/description";
 
 export default function ProblemDescriptionPage() {
-  return <MdxPreview source={DEFAULT_PROBLEM} />;
+  return <MdxPreview source={DEFAULT_PROBLEM_DESCRIPTION} />;
 }
diff --git a/src/app/(app)/playground/@problem/@solution/page.tsx b/src/app/(app)/playground/@problem/@solution/page.tsx
new file mode 100644
index 0000000..bd33438
--- /dev/null
+++ b/src/app/(app)/playground/@problem/@solution/page.tsx
@@ -0,0 +1,6 @@
+import MdxPreview from "@/components/mdx-preview";
+import { DEFAULT_PROBLEM_SOLUTION } from "@/config/problem/solution";
+
+export default function ProblemSolutionPage() {
+  return <MdxPreview source={DEFAULT_PROBLEM_SOLUTION} />;
+}
diff --git a/src/app/(app)/playground/@problem/layout.tsx b/src/app/(app)/playground/@problem/layout.tsx
index e5b1f75..9247d52 100644
--- a/src/app/(app)/playground/@problem/layout.tsx
+++ b/src/app/(app)/playground/@problem/layout.tsx
@@ -1,12 +1,16 @@
-import { FileTextIcon } from "lucide-react";
+import { FileTextIcon, FlaskConicalIcon } from "lucide-react";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface ProblemLayoutProps {
   description: React.ReactNode;
+  solution: React.ReactNode;
 }
 
-export default function ProblemLayout({ description }: ProblemLayoutProps) {
+export default function ProblemLayout({
+  description,
+  solution,
+}: ProblemLayoutProps) {
   return (
     <Tabs defaultValue="description" className="h-full flex flex-col">
       <ScrollArea className="h-9 flex-none bg-muted px-1">
@@ -22,12 +26,26 @@ export default function ProblemLayout({ description }: ProblemLayoutProps) {
             />
             Description
           </TabsTrigger>
+          <TabsTrigger
+            value="solution"
+            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
+          >
+            <FlaskConicalIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Solution
+          </TabsTrigger>
         </TabsList>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
       <TabsContent value="description" className="grow mt-0">
         {description}
       </TabsContent>
+      <TabsContent value="solution" className="grow mt-0">
+        {solution}
+      </TabsContent>
     </Tabs>
   );
 }