diff --git a/src/components/dockview.tsx b/src/components/dockview.tsx
index 601e1be..0b6b263 100644
--- a/src/components/dockview.tsx
+++ b/src/components/dockview.tsx
@@ -62,7 +62,7 @@ const useDockviewComponents = (
   );
 };
 
-const Dockview = ({
+export const Dockview = ({
   storageKey,
   onApiReady,
   components,
@@ -139,5 +139,3 @@ const Dockview = ({
     />
   );
 };
-
-export { Dockview };
diff --git a/src/features/problems/components/dockview.tsx b/src/features/problems/components/dockview.tsx
new file mode 100644
index 0000000..5954b25
--- /dev/null
+++ b/src/features/problems/components/dockview.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import type { AddPanelOptions } from "dockview";
+import { Dockview, type PanelParams } from "@/components/dockview";
+import { useProblemDockviewStore } from "@/stores/problem-dockview";
+
+interface ProblemDockviewProps {
+  components: Record<string, React.ReactNode>;
+  tabComponents: Record<string, React.ReactNode>;
+  panelOptions: AddPanelOptions<PanelParams>[];
+}
+
+export const ProblemDockview = ({
+  components,
+  tabComponents,
+  panelOptions,
+}: ProblemDockviewProps) => {
+  const locale = useLocale();
+  const { setApi } = useProblemDockviewStore();
+
+  return (
+    <Dockview
+      key={locale}
+      storageKey="dockview:problem"
+      onApiReady={setApi}
+      components={components}
+      tabComponents={tabComponents}
+      panelOptions={panelOptions}
+    />
+  );
+};