diff --git a/src/app/(app)/problems/[id]/@problem/@description/page.tsx b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
index da3653d..48e32ae 100644
--- a/src/app/(app)/problems/[id]/@problem/@description/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
@@ -1,25 +1,13 @@
-import prisma from "@/lib/prisma";
+"use client";
+
 import { notFound } from "next/navigation";
-import { MdxRenderer } from "@/components/content/mdx-renderer";
+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";
 
-interface ProblemDescriptionPageProps {
-  params: Promise<{ id: string }>
-}
-
-export default async function ProblemDescriptionPage({
-  params
-}: ProblemDescriptionPageProps) {
-  const { id } = await params;
-
-  const problem = await prisma.problem.findUnique({
-    where: { id },
-    select: {
-      title: true,
-      description: true,
-    }
-  });
+export default function ProblemDescriptionPage() {
+  const { problem } = useProblem();
 
   if (!problem) {
     notFound();
@@ -29,7 +17,7 @@ export default async function ProblemDescriptionPage({
     <>
       <div className="flex-1">
         <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxRenderer source={problem.description} />
+          <MdxPreview source={problem.description} />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>
diff --git a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
index 1d0e7b6..25fef36 100644
--- a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
@@ -1,35 +1,18 @@
-import prisma from "@/lib/prisma";
-import { notFound } from "next/navigation";
-import { MdxRenderer } from "@/components/content/mdx-renderer";
+"use client";
+
+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";
 
-interface ProblemSolutionPageProps {
-  params: Promise<{ id: string }>;
-}
-
-export default async function ProblemSolutionPage({
-  params,
-}: ProblemSolutionPageProps) {
-  const { id } = await params;
-
-  const problem = await prisma.problem.findUnique({
-    where: { id },
-    select: {
-      title: true,
-      solution: true,
-    },
-  });
-
-  if (!problem) {
-    notFound();
-  }
+export default function ProblemSolutionPage() {
+  const { problem } = useProblem();
 
   return (
     <>
       <div className="flex-1">
         <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxRenderer source={problem.solution} />
+          <MdxPreview source={problem.solution} />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>