diff --git a/src/components/header.tsx b/src/components/header.tsx
index 2b40049..0040b22 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import RunCode from "./run-code";
+import SettingsButton from "./settings-button";
 
 interface HeaderProps {
   className?: string;
@@ -12,9 +13,25 @@ export function Header({
   return (
     <header
       {...props}
-      className={cn("h-12 flex flex-none items-center justify-center", className)}
+      className={cn("relative", className)}
     >
-      <RunCode />
+      <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 flex items-center gap-2">
+              <SettingsButton />
+            </div>
+          </div>
+        </div>
+      </nav>
+      <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 />
+          </div>
+        </div>
+      </div>
     </header>
   );
 }