diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx
index 2d9837b..52e0849 100644
--- a/packages/client/src/components/App.tsx
+++ b/packages/client/src/components/App.tsx
@@ -1,4 +1,4 @@
-import { Header } from "./Header";
+import { Header } from "./Header/Header";
 import { AppContext, useAppContext } from "../contexts/AppContext";
 import { CanvasWrapper } from "./CanvasWrapper";
 import { TemplateContext } from "../contexts/TemplateContext";
diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
deleted file mode 100644
index 1fed3e9..0000000
--- a/packages/client/src/components/Header.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Button, Card, CardBody, Link } from "@nextui-org/react";
-import { useAppContext } from "../contexts/AppContext";
-import { User } from "./Header/User";
-import { Debug } from "@sc07-canvas/lib/src/debug";
-import React, { lazy } from "react";
-
-const OpenChatButton = lazy(() => import("./Chat/OpenChatButton"));
-
-const DynamicChat = () => {
-  const { loadChat } = useAppContext();
-
-  return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
-};
-
-export const Header = () => {
-  const { setSettingsSidebar, connected, hasAdmin, setInfoSidebar } =
-    useAppContext();
-
-  return (
-    <header id="main-header">
-      <div className="box">
-        <Button onPress={() => setInfoSidebar(true)}>Info</Button>
-      </div>
-      <div className="spacer"></div>
-      {!connected && (
-        <div>
-          <Card>
-            <CardBody>Disconnected</CardBody>
-          </Card>
-        </div>
-      )}
-      <div className="spacer"></div>
-      <div className="box">
-        <User />
-        <Button onClick={() => setSettingsSidebar(true)}>Settings</Button>
-        <Button onClick={() => Debug.openDebugTools()}>debug</Button>
-        {hasAdmin && (
-          <Button href="/admin" target="_blank" as={Link}>
-            Admin
-          </Button>
-        )}
-        <DynamicChat />
-      </div>
-    </header>
-  );
-};
diff --git a/packages/client/src/components/Header/Header.tsx b/packages/client/src/components/Header/Header.tsx
new file mode 100644
index 0000000..a96b675
--- /dev/null
+++ b/packages/client/src/components/Header/Header.tsx
@@ -0,0 +1,61 @@
+import { Button, Card, CardBody, Link } from "@nextui-org/react";
+import { useAppContext } from "../../contexts/AppContext";
+import { User } from "./User";
+import { Debug } from "@sc07-canvas/lib/src/debug";
+import React, { lazy } from "react";
+
+const OpenChatButton = lazy(() => import("../Chat/OpenChatButton"));
+
+const DynamicChat = () => {
+  const { loadChat } = useAppContext();
+
+  return <React.Suspense>{loadChat && <OpenChatButton />}</React.Suspense>;
+};
+
+export const Header = () => {
+  const { connected } = useAppContext();
+
+  return (
+    <header id="main-header">
+      <HeaderLeft />
+      <div className="spacer"></div>
+      {!connected && (
+        <div>
+          <Card>
+            <CardBody>Disconnected</CardBody>
+          </Card>
+        </div>
+      )}
+      <div className="spacer"></div>
+      <HeaderRight />
+    </header>
+  );
+};
+
+const HeaderLeft = () => {
+  const { setInfoSidebar } = useAppContext();
+
+  return (
+    <div className="box">
+      <Button onPress={() => setInfoSidebar(true)}>Info</Button>
+      <Button onPress={() => Debug.openDebugTools()}>Debug Tools</Button>
+    </div>
+  );
+};
+
+const HeaderRight = () => {
+  const { setSettingsSidebar, hasAdmin } = useAppContext();
+
+  return (
+    <div className="box">
+      <User />
+      <Button onClick={() => setSettingsSidebar(true)}>Settings</Button>
+      {hasAdmin && (
+        <Button href="/admin" target="_blank" as={Link}>
+          Admin
+        </Button>
+      )}
+      <DynamicChat />
+    </div>
+  );
+};