diff --git a/src/components/problem-description.tsx b/src/components/problem-description.tsx
new file mode 100644
index 0000000..cdc2de6
--- /dev/null
+++ b/src/components/problem-description.tsx
@@ -0,0 +1,21 @@
+import { Suspense } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface ProblemDescriptionProps {
+  mdxSource: string;
+}
+
+export function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
+  return (
+    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
+      <Suspense fallback={<Skeleton className="h-full w-full" />}>
+        <div className="markdown-body">
+          <MDXRemote source={mdxSource} />
+        </div>
+      </Suspense>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}