diff --git a/src/components/features/playground/header.tsx b/src/components/features/playground/header.tsx
index 9fd5c3b..b1f7628 100644
--- a/src/components/features/playground/header.tsx
+++ b/src/components/features/playground/header.tsx
@@ -16,20 +16,20 @@ export function PlaygroundHeader({
       {...props}
       className={cn("relative", className)}
     >
-      <nav className="relative h-12 w-full flex shrink-0 items-center px-2.5">
+      <nav className="z-0 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="z-10 flex items-center">
+            <div className="flex items-center">
               <BackButton href="/problemset" />
             </div>
-            <div className="z-10 flex items-center gap-2">
+            <div className="relative flex items-center gap-2">
               <AvatarButton />
             </div>
           </div>
         </div>
       </nav>
-      <div className="absolute left-0 right-0 top-0 h-full mx-auto py-2">
-        <div className="relative flex justify-center">
+      <div className="z-10 absolute left-1/2 top-0 h-full -translate-x-1/2 py-2">
+        <div className="relative flex">
           <div className="relative flex overflow-hidden rounded">
             <RunCode className="bg-muted text-muted-foreground hover:bg-muted/50" />
           </div>