diff --git a/src/features/problems/code/components/toolbar/actions/copy-button.tsx b/src/features/problems/code/components/toolbar/actions/copy-button.tsx
index 3c97762..db48110 100644
--- a/src/features/problems/code/components/toolbar/actions/copy-button.tsx
+++ b/src/features/problems/code/components/toolbar/actions/copy-button.tsx
@@ -7,7 +7,7 @@ import { useTranslations } from "next-intl";
 import { TooltipButton } from "@/components/tooltip-button";
 import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
 
-const CopyButton = () => {
+export const CopyButton = () => {
   const t = useTranslations("WorkspaceEditorHeader.CopyButton");
   const [copied, setCopied] = useState(false);
   const { canExecute, handleCopy } = useProblemEditorActions();
@@ -52,5 +52,3 @@ const CopyButton = () => {
     </TooltipButton>
   );
 };
-
-export { CopyButton };
diff --git a/src/features/problems/code/components/toolbar/actions/format-button.tsx b/src/features/problems/code/components/toolbar/actions/format-button.tsx
index 8add6e3..24ee4c1 100644
--- a/src/features/problems/code/components/toolbar/actions/format-button.tsx
+++ b/src/features/problems/code/components/toolbar/actions/format-button.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { TooltipButton } from "@/components/tooltip-button";
 import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
 
-const FormatButton = () => {
+export const FormatButton = () => {
   const t = useTranslations("WorkspaceEditorHeader.FormatButton");
   const { canExecute, handleFormat } = useProblemEditorActions();
 
@@ -20,5 +20,3 @@ const FormatButton = () => {
     </TooltipButton>
   );
 };
-
-export { FormatButton };
diff --git a/src/features/problems/code/components/toolbar/actions/redo-button.tsx b/src/features/problems/code/components/toolbar/actions/redo-button.tsx
index af6411d..386e654 100644
--- a/src/features/problems/code/components/toolbar/actions/redo-button.tsx
+++ b/src/features/problems/code/components/toolbar/actions/redo-button.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { TooltipButton } from "@/components/tooltip-button";
 import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
 
-const RedoButton = () => {
+export const RedoButton = () => {
   const t = useTranslations("WorkspaceEditorHeader.RedoButton");
   const { canExecute, handleRedo } = useProblemEditorActions();
 
@@ -20,5 +20,3 @@ const RedoButton = () => {
     </TooltipButton>
   );
 };
-
-export { RedoButton };
diff --git a/src/features/problems/code/components/toolbar/actions/reset-button.tsx b/src/features/problems/code/components/toolbar/actions/reset-button.tsx
index 7f5ed2a..a046611 100644
--- a/src/features/problems/code/components/toolbar/actions/reset-button.tsx
+++ b/src/features/problems/code/components/toolbar/actions/reset-button.tsx
@@ -1,37 +1,18 @@
 "use client";
 
-import { useMemo } from "react";
 import { RotateCcw } from "lucide-react";
 import { useTranslations } from "next-intl";
-import type { Template } from "@/generated/client";
 import { TooltipButton } from "@/components/tooltip-button";
-import { useProblemEditorStore } from "@/stores/problem-editor-store";
 import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
 
-interface ResetButtonProps {
-  templates: Template[];
-}
-
-const ResetButton = ({ templates }: ResetButtonProps) => {
+export const ResetButton = () => {
   const t = useTranslations("WorkspaceEditorHeader.ResetButton");
-  const { language } = useProblemEditorStore();
   const { canExecute, handleReset } = useProblemEditorActions();
 
-  const currentTemplate = useMemo(() => {
-    return (
-      templates.find((template) => template.language === language)?.template ??
-      ""
-    );
-  }, [language, templates]);
-
-  const handleClick = () => {
-    handleReset(currentTemplate);
-  };
-
   return (
     <TooltipButton
       tooltipContent={t("TooltipContent")}
-      onClick={handleClick}
+      onClick={handleReset}
       aria-label={t("TooltipContent")}
       disabled={!canExecute}
     >
@@ -39,5 +20,3 @@ const ResetButton = ({ templates }: ResetButtonProps) => {
     </TooltipButton>
   );
 };
-
-export { ResetButton };
diff --git a/src/features/problems/code/components/toolbar/actions/undo-button.tsx b/src/features/problems/code/components/toolbar/actions/undo-button.tsx
index d10a579..0b2bfdc 100644
--- a/src/features/problems/code/components/toolbar/actions/undo-button.tsx
+++ b/src/features/problems/code/components/toolbar/actions/undo-button.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { TooltipButton } from "@/components/tooltip-button";
 import { useProblemEditorActions } from "@/features/problems/code/hooks/use-problem-editor-actions";
 
-const UndoButton = () => {
+export const UndoButton = () => {
   const t = useTranslations("WorkspaceEditorHeader.UndoButton");
   const { canExecute, handleUndo } = useProblemEditorActions();
 
@@ -20,5 +20,3 @@ const UndoButton = () => {
     </TooltipButton>
   );
 };
-
-export { UndoButton };
diff --git a/src/features/problems/code/components/toolbar/code-toolbar.tsx b/src/features/problems/code/components/toolbar/code-toolbar.tsx
new file mode 100644
index 0000000..05f4d7d
--- /dev/null
+++ b/src/features/problems/code/components/toolbar/code-toolbar.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import {
+  CopyButton,
+  FormatButton,
+  LanguageSelector,
+  RedoButton,
+  ResetButton,
+  UndoButton,
+} from "@/features/problems/code/components/toolbar";
+
+interface CodeToolbarProps {
+  className?: string;
+}
+
+export const CodeToolbar = async ({ className }: CodeToolbarProps) => {
+  return (
+    <header
+      className={cn("relative flex h-8 flex-none items-center", className)}
+    >
+      <div className="absolute flex w-full items-center justify-between px-2">
+        <div className="flex items-center gap-2">
+          <LanguageSelector />
+        </div>
+        <div className="flex items-center gap-2">
+          <ResetButton />
+          <UndoButton />
+          <RedoButton />
+          <FormatButton />
+          <CopyButton />
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/src/features/problems/code/hooks/use-problem-editor-actions.ts b/src/features/problems/code/hooks/use-problem-editor-actions.ts
index b17cd33..9436a83 100644
--- a/src/features/problems/code/hooks/use-problem-editor-actions.ts
+++ b/src/features/problems/code/hooks/use-problem-editor-actions.ts
@@ -1,8 +1,8 @@
 import { useCallback } from "react";
-import { useProblemEditorStore } from "@/stores/problem-editor-store";
+import { useProblemEditorStore } from "@/stores/problem-editor";
 
 export const useProblemEditorActions = () => {
-  const { editor } = useProblemEditorStore();
+  const { editor, problem, language } = useProblemEditorStore();
 
   const handleCopy = useCallback(async () => {
     try {
@@ -26,12 +26,15 @@ export const useProblemEditorActions = () => {
     editor?.trigger("redo", "redo", null);
   }, [editor]);
 
-  const handleReset = useCallback((template: string) => {
-    if (!editor) return;
+  const handleReset = useCallback(() => {
+    if (!editor || !problem) return;
 
     const model = editor.getModel();
     if (!model) return;
 
+    const template =
+      problem.templates.find((t) => t.language === language)?.content ?? "";
+
     const fullRange = model.getFullModelRange();
     editor.pushUndoStop();
     editor.executeEdits("reset-code", [
@@ -42,7 +45,7 @@ export const useProblemEditorActions = () => {
       },
     ]);
     editor.pushUndoStop();
-  }, [editor]);
+  }, [editor, language, problem]);
 
   return {
     handleCopy,