diff --git a/app/header.tsx b/app/header.tsx
index 2be764a..787bd43 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { useConvexAuth } from "convex/react";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 function SignInWithGitHub() {
   const { signIn } = useAuthActions();
@@ -14,6 +15,7 @@ function SignInWithGitHub() {
       variant="outline"
       type="button"
       onClick={() => void signIn("github", { redirectTo: "/" })}
+      className="dark:invert"
     >
       <GitHubLogoIcon className="mr-2 h-4 w-4" /> GitHub
     </Button>
@@ -25,14 +27,16 @@ export default function Header() {
   const { isAuthenticated } = useConvexAuth();
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b bg-slate-950">
+    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b bg-gray-200 dark:bg-slate-950">
       <Link href="/" className="flex items-center">
         <Image src="/logo.png" alt="Logo" width={32} height={32} />
         <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
       </Link>
 
       <div className="flex items-center">
-        <span className="mr-2 text-sm text-gray-200">Synced using Convex</span>
+        <span className="mr-2 text-sm text-gray-900 dark:text-gray-200">
+          Synced using Convex
+        </span>
         <Link
           href="https://www.convex.dev"
           target="_blank"
@@ -42,11 +46,14 @@ export default function Header() {
         </Link>
       </div>
 
-      {!isAuthenticated ? (
-        <SignInWithGitHub />
-      ) : (
-        <Button onClick={() => void signOut()}>Sign Out</Button>
-      )}
+      <div className="flex space-x-8">
+        <ThemeToggle />
+        {!isAuthenticated ? (
+          <SignInWithGitHub />
+        ) : (
+          <Button onClick={() => void signOut()}>Sign Out</Button>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f221e13..06ff44d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -29,7 +29,7 @@ export default function RootLayout({
         <body className={inter.className}>
           <Providers>
             <Header />
-            {children}
+            <main className="bg-background">{children}</main>
           </Providers>
         </body>
       </html>
diff --git a/convex/openai.ts b/convex/openai.ts
index 066a8d8..1814db7 100644
--- a/convex/openai.ts
+++ b/convex/openai.ts
@@ -68,11 +68,11 @@ export const playMapAction = internalAction({
                       "R" represents rocks, which players can shoot over but zombies cannot pass through or break.
                       "P" represents the player, who cannot move. The player's goal is to shoot and kill zombies before they reach them.
                       "B" represents blocks that can be placed before the round begins to hinder the zombies. You can place up to two blocks on the map.
-                      
+
                       Your goal is to place the player ("P") and two blocks ("B") in locations that maximize the player's survival by delaying the zombies' approach.
                       You can shoot any zombie regardless of where it is on the grid.
                       Returning a 2d grid with the player and blocks placed in the optimal locations, with the coordinates player ("P") and the blocks ("B"), also provide reasoning for the choices.
-                      
+
                       You can't replace rocks R or zombies Z with blocks.  If there is no room to place a block, do not place any.`,
           },
           {
