diff --git a/src/components/common/code-editor.tsx b/src/components/common/code-editor.tsx
new file mode 100644
index 0000000..62e06b4
--- /dev/null
+++ b/src/components/common/code-editor.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import { Code2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useUiStore } from "@/stores/ui-store";
+
+const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
+  ssr: false,
+  loading: () => <div className="skeleton h-72 rounded-md" />,
+});
+
+export function CodeEditor({
+  title,
+  language,
+  value,
+  autoLoad = false,
+}: {
+  title: string;
+  language: string;
+  value: string;
+  autoLoad?: boolean;
+}) {
+  const themePref = useUiStore((state) => state.theme);
+  const [dark, setDark] = useState(true);
+  const [open, setOpen] = useState(autoLoad);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setDark(document.documentElement.classList.contains("dark"));
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [themePref]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between gap-3">
+          <span className="truncate">{title}</span>
+          <span className="rounded-md border border-border/70 bg-muted/60 px-2 py-1 font-mono text-[11px] uppercase text-muted-foreground">
+            {language}
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className={open ? "p-0" : "space-y-3"}>
+        {open ? (
+          <MonacoEditor
+            height="360px"
+            language={language}
+            value={value}
+            theme={dark ? "vs-dark" : "vs-light"}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 13,
+              scrollBeyondLastLine: false,
+              wordWrap: "on",
+              automaticLayout: true,
+            }}
+          />
+        ) : (
+          <>
+            <pre className="max-h-40 overflow-hidden rounded-md border border-border/70 bg-muted/45 p-3 font-mono text-xs leading-5 text-muted-foreground">
+              {value}
+            </pre>
+            <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
+              <Code2 className="h-4 w-4" />
+              Open editor
+            </Button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}