diff --git a/frontend/src/app/questions/[slug]/page.tsx b/frontend/src/app/questions/[slug]/page.tsx
index 927047b..bb2a0a5 100644
--- a/frontend/src/app/questions/[slug]/page.tsx
+++ b/frontend/src/app/questions/[slug]/page.tsx
@@ -1,20 +1,6 @@
 import { getQuestion } from "@/lib/api";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { CodeBlock } from "@/components/ui/code-block";
-import { Markdown } from "@/components/ui/markdown";
-import { Callout, ApproachBox } from "@/components/ui/callout";
-import { Collapsible } from "@/components/ui/collapsible";
-import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
-import {
-  FileText,
-  AlertCircle,
-  BookOpen,
-  Code,
-  Clock,
-  HardDrive,
-} from "lucide-react";
-import Link from "next/link";
+import { QuestionDetail } from "@/components/questions/question-detail";
+import { ProblemWorkspace } from "@/components/editor";
 import { notFound } from "next/navigation";
 
 export default async function QuestionDetailPage({
@@ -31,262 +17,11 @@ export default async function QuestionDetailPage({
     notFound();
   }
 
-  const optimalSolutions = question.solutions.filter((s) => s.is_optimal);
-  const otherSolutions = question.solutions.filter((s) => !s.is_optimal);
+  // Show interactive workspace if the question has test cases
+  if (question.function_signature && question.visible_test_cases) {
+    return <ProblemWorkspace question={question} />;
+  }
 
-  return (
-    <div className="max-w-4xl mx-auto space-y-8">
-      <div>
-        <div className="flex items-start justify-between gap-4 mb-4">
-          <h1 className="text-3xl font-bold">{question.title}</h1>
-          <Link href={`/questions?difficulty=${question.difficulty}`}>
-            <Badge
-              variant={getDifficultyVariant(question.difficulty)}
-              aria-label={getDifficultyLabel(question.difficulty)}
-              className="cursor-pointer hover:opacity-80"
-            >
-              {capitalize(question.difficulty)}
-            </Badge>
-          </Link>
-        </div>
-
-        <div className="flex flex-wrap gap-2 mb-4">
-          {question.categories.map((cat) => (
-            <Link key={cat.id} href={`/questions?category=${cat.slug}`}>
-              <Badge variant="category">{cat.name}</Badge>
-            </Link>
-          ))}
-          {question.patterns.map((pat) => (
-            <Link key={pat.id} href={`/patterns/${pat.slug}`}>
-              <Badge variant="pattern">{pat.name}</Badge>
-            </Link>
-          ))}
-        </div>
-
-        {question.leetcode_url && (
-          <a
-            href={question.leetcode_url}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`View ${question.title} on LeetCode (opens in new tab)`}
-            className="text-[var(--primary)] hover:underline text-sm"
-          >
-            View on LeetCode
-          </a>
-        )}
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <FileText className="h-5 w-5" aria-hidden="true" />
-            Problem
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="prose-content">
-          <Markdown>{question.description}</Markdown>
-        </CardContent>
-      </Card>
-
-      {question.constraints && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <AlertCircle className="h-5 w-5" aria-hidden="true" />
-              Constraints
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Markdown>{question.constraints}</Markdown>
-          </CardContent>
-        </Card>
-      )}
-
-      {question.examples && question.examples.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <BookOpen className="h-5 w-5" aria-hidden="true" />
-              Examples
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {question.examples.map((example, i) => (
-              <div
-                key={i}
-                className="p-4 rounded bg-[var(--secondary)] space-y-2"
-              >
-                <div>
-                  <span className="font-medium">Input: </span>
-                  <code>{example.input}</code>
-                </div>
-                <div>
-                  <span className="font-medium">Output: </span>
-                  <code>{example.output}</code>
-                </div>
-                {example.explanation && (
-                  <div className="text-sm text-[var(--muted-foreground)]">
-                    {example.explanation}
-                  </div>
-                )}
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-      )}
-
-      {question.explanation && (
-        <>
-          <Callout variant="info" title="Approach">
-            <div className="prose-content">
-              <Markdown>{question.explanation.approach}</Markdown>
-            </div>
-          </Callout>
-
-          <Callout variant="insight" title="Intuition">
-            <div className="prose-content">
-              <Markdown>{question.explanation.intuition}</Markdown>
-            </div>
-          </Callout>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Clock className="h-5 w-5" aria-hidden="true" />
-                Complexity Analysis
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="flex items-start gap-2">
-                <Clock
-                  className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
-                  aria-hidden="true"
-                />
-                <div className="[&>div]:inline [&>div>p]:inline">
-                  <span className="font-medium">Time Complexity: </span>
-                  <Markdown>{question.explanation.time_complexity}</Markdown>
-                </div>
-              </div>
-              <div className="flex items-start gap-2">
-                <HardDrive
-                  className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
-                  aria-hidden="true"
-                />
-                <div className="[&>div]:inline [&>div>p]:inline">
-                  <span className="font-medium">Space Complexity: </span>
-                  <Markdown>{question.explanation.space_complexity}</Markdown>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {question.explanation.common_pitfalls &&
-            question.explanation.common_pitfalls.length > 0 && (
-              <Callout variant="warning" title="Common Pitfalls">
-                <div className="space-y-4">
-                  {question.explanation.common_pitfalls.map((pitfall, i) => (
-                    <div key={i}>
-                      <h4 className="font-medium mb-2">{pitfall.title}</h4>
-                      <div className="text-sm prose-content mb-3">
-                        <Markdown>{pitfall.description}</Markdown>
-                      </div>
-                      {(pitfall.wrong_approach || pitfall.correct_approach) && (
-                        <div className="space-y-2">
-                          {pitfall.wrong_approach && (
-                            <ApproachBox variant="wrong">
-                              <code className="text-sm">
-                                {pitfall.wrong_approach}
-                              </code>
-                            </ApproachBox>
-                          )}
-                          {pitfall.correct_approach && (
-                            <ApproachBox variant="correct">
-                              <code className="text-sm">
-                                {pitfall.correct_approach}
-                              </code>
-                            </ApproachBox>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </Callout>
-            )}
-
-          {question.explanation.key_takeaways &&
-            question.explanation.key_takeaways.length > 0 && (
-              <Callout variant="success" title="Key Takeaways">
-                <ul className="list-disc list-inside space-y-2">
-                  {question.explanation.key_takeaways.map((takeaway, i) => (
-                    <li key={i} className="[&>div]:inline [&>div>p]:inline">
-                      <Markdown>{takeaway}</Markdown>
-                    </li>
-                  ))}
-                </ul>
-              </Callout>
-            )}
-        </>
-      )}
-
-      {question.solutions.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Code className="h-5 w-5" aria-hidden="true" />
-              Solutions
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {optimalSolutions.map((solution) => (
-              <div key={solution.id}>
-                <div className="flex items-center gap-2 mb-2">
-                  <h4 className="font-medium">{solution.approach_name}</h4>
-                  <Badge variant="optimal">Optimal</Badge>
-                </div>
-                {solution.explanation && (
-                  <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
-                    <Markdown>{solution.explanation}</Markdown>
-                  </div>
-                )}
-                <CodeBlock code={solution.code} language={solution.language} />
-              </div>
-            ))}
-
-            {otherSolutions.length > 0 && (
-              <div className="space-y-4">
-                {otherSolutions.map((solution) => (
-                  <Collapsible
-                    key={solution.id}
-                    title={
-                      <span className="flex items-center gap-2">
-                        {solution.approach_name}
-                        <Badge
-                          variant="outline"
-                          className="text-xs font-normal"
-                        >
-                          Alternative
-                        </Badge>
-                      </span>
-                    }
-                    defaultOpen={false}
-                  >
-                    {solution.explanation && (
-                      <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
-                        <Markdown>{solution.explanation}</Markdown>
-                      </div>
-                    )}
-                    <CodeBlock
-                      code={solution.code}
-                      language={solution.language}
-                    />
-                  </Collapsible>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
+  // Fall back to read-only view for questions without test cases
+  return <QuestionDetail question={question} />;
 }