diff --git a/src/app/(app)/problems/[id]/@problem/@solution/layout.tsx b/src/app/(app)/problems/[id]/@problem/@solution/layout.tsx
new file mode 100644
index 0000000..b90b74c
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@problem/@solution/layout.tsx
@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import ProblemSolutionFooter from "@/features/playground/problem/solution/footer";
+
+interface ProblemSolutionLayoutProps {
+  params: Promise<{ id: string }>;
+  children: React.ReactNode;
+}
+
+export default async function ProblemSolutionLayout({
+  params,
+  children,
+}: ProblemSolutionLayoutProps) {
+  const { id } = await params;
+
+  const problem = await prisma.problem.findUnique({
+    where: { id: parseInt(id) },
+    select: {
+      title: true,
+    },
+  });
+
+  const title = problem?.title ?? "";
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex-1">{children}</div>
+      <ProblemSolutionFooter title={title} />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
new file mode 100644
index 0000000..e27f01b
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
@@ -0,0 +1,32 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import { MdxRenderer } from "@/components/content/mdx-renderer";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+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: parseInt(id) },
+    select: {
+      solution: true,
+    },
+  });
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
+      <MdxRenderer source={problem.solution} />
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}
diff --git a/src/features/playground/problem/solution/footer.tsx b/src/features/playground/problem/solution/footer.tsx
new file mode 100644
index 0000000..69a21d0
--- /dev/null
+++ b/src/features/playground/problem/solution/footer.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+interface ProblemSolutionFooterProps {
+  title: string;
+  className?: string;
+}
+
+export default function ProblemSolutionFooter({
+  title,
+  className,
+  ...props
+}: ProblemSolutionFooterProps) {
+  return (
+    <footer
+      {...props}
+      className={cn("h-9 flex flex-none items-center bg-muted px-3 py-2", className)}
+    >
+      <div className="w-full flex items-center justify-center">
+        <span className="truncate">Solution of {title}</span>
+      </div>
+    </footer>
+  );
+}