diff --git a/src/features/problems/code/components/content.tsx b/src/features/problems/code/components/content.tsx
new file mode 100644
index 0000000..bca3087
--- /dev/null
+++ b/src/features/problems/code/components/content.tsx
@@ -0,0 +1,21 @@
+import prisma from "@/lib/prisma";
+import { Loading } from "@/components/loading";
+import { ProblemEditor } from "@/components/problem-editor";
+
+interface CodeContentProps {
+  problemId: string;
+}
+
+export const CodeContent = async ({ problemId }: CodeContentProps) => {
+  const templates = await prisma.template.findMany({
+    where: {
+      problemId,
+    },
+  });
+
+  return <ProblemEditor problemId={problemId} templates={templates} />;
+};
+
+export const CodeContentSkeleton = () => {
+  return <Loading />;
+};
diff --git a/src/features/problems/code/components/panel.tsx b/src/features/problems/code/components/panel.tsx
new file mode 100644
index 0000000..4604c2b
--- /dev/null
+++ b/src/features/problems/code/components/panel.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import {
+  CodeContent,
+  CodeContentSkeleton,
+} from "@/features/problems/code/components/content";
+import { CodeToolbar } from "@/features/problems/code/components/toolbar/code-toolbar";
+
+interface CodePanelProps {
+  problemId: string;
+}
+
+export const CodePanel = ({ problemId }: CodePanelProps) => {
+  return (
+    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background overflow-hidden">
+      <CodeToolbar className="border-b" />
+      <div className="relative flex-1">
+        <div className="absolute h-full w-full">
+          <Suspense fallback={<CodeContentSkeleton />}>
+            <CodeContent problemId={problemId} />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+};