diff --git a/src/features/playground/header.tsx b/src/features/playground/header.tsx
index faf6a0d..d85f93f 100644
--- a/src/features/playground/header.tsx
+++ b/src/features/playground/header.tsx
@@ -1,8 +1,6 @@
-"use client";
-
 import { cn } from "@/lib/utils";
-import { useState } from "react";
 import RunCode from "@/components/run-code";
+import BackButton from "@/components/back-button";
 import SettingsButton from "@/components/settings-button";
 import { SettingsDialog } from "@/components/settings-dialog";
 
@@ -14,12 +12,6 @@ export function PlaygroundHeader({
   className,
   ...props
 }: PlaygroundHeaderProps) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
-
-  const toggleDialog = () => {
-    setDialogOpen(!isDialogOpen);
-  };
-
   return (
     <header
       {...props}
@@ -28,9 +20,11 @@ export function PlaygroundHeader({
       <nav className="relative h-12 w-full flex shrink-0 items-center px-2.5">
         <div className="w-full flex justify-between">
           <div className="w-full flex items-center justify-between">
-            <div className="flex items-center"></div>
-            <div className="relative z-10 flex items-center gap-2">
-              <SettingsButton onClick={toggleDialog} />
+            <div className="z-10 flex items-center">
+              <BackButton href="/problemset" />
+            </div>
+            <div className="z-10 flex items-center gap-2">
+              <SettingsButton />
             </div>
           </div>
         </div>
@@ -42,7 +36,7 @@ export function PlaygroundHeader({
           </div>
         </div>
       </div>
-      <SettingsDialog open={isDialogOpen} onClose={toggleDialog} />
+      <SettingsDialog />
     </header>
   );
 }