bar

app/page.tsx

@@ -4,6 +4,7 @@ import { NumberBall } from "@/components/number-ball"
 import { SettingsPanel } from "@/components/settings"
 import { ResultPanel } from "@/components/result"
 import { SingleModePanel } from "@/components/single-panel"
+import { TitleBar } from "@/components/title-bar"
 import { useRollCallLogic } from "@/components/logic"
 
 export default function Page() {
@@ -11,7 +12,12 @@ export default function Page() {
   const isSingleMode = state.mode === "single"
 
   return (
-    <div className="h-screen w-full bg-[#ffffff] text-[#16191f] font-mono flex flex-col lg:flex-row overflow-hidden">
+    <div className="h-screen w-full bg-[#0f141a] text-[#16191f] font-mono flex flex-col overflow-hidden">
+      {/* Custom title bar */}
+      <TitleBar />
+      
+      {/* Main content */}
+      <div className="flex-1 bg-[#ffffff] flex flex-col lg:flex-row overflow-hidden">
 
       {/* Left sidebar — config (fixed width, full height) */}
       <aside className="w-full lg:w-72 flex-shrink-0 border-b lg:border-b-0 lg:border-r border-[#e2e6ea] bg-[#f7f8fa] overflow-y-auto scrollbar-thin">
@@ -124,6 +130,7 @@ export default function Page() {
 
       </main>
 
+      </div>
     </div>
   )
 }