diff --git a/src/app/(app)/playground/@problem/page.tsx b/src/app/(app)/playground/@problem/@description/page.tsx
similarity index 75%
rename from src/app/(app)/playground/@problem/page.tsx
rename to src/app/(app)/playground/@problem/@description/page.tsx
index d22ffd8..10ab28c 100644
--- a/src/app/(app)/playground/@problem/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";
 
-export default function DescriptionPage() {
+export default function ProblemDescriptionPage() {
   return <MdxPreview source={DEFAULT_PROBLEM} />;
 }
diff --git a/src/app/(app)/playground/@problem/layout.tsx b/src/app/(app)/playground/@problem/layout.tsx
index b88a49e..e5b1f75 100644
--- a/src/app/(app)/playground/@problem/layout.tsx
+++ b/src/app/(app)/playground/@problem/layout.tsx
@@ -3,10 +3,10 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface ProblemLayoutProps {
-  children: React.ReactNode;
+  description: React.ReactNode;
 }
 
-export default function ProblemLayout({ children }: ProblemLayoutProps) {
+export default function ProblemLayout({ description }: ProblemLayoutProps) {
   return (
     <Tabs defaultValue="description" className="h-full flex flex-col">
       <ScrollArea className="h-9 flex-none bg-muted px-1">
@@ -26,7 +26,7 @@ export default function ProblemLayout({ children }: ProblemLayoutProps) {
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
       <TabsContent value="description" className="grow mt-0">
-        {children}
+        {description}
       </TabsContent>
     </Tabs>
   );