diff --git a/src/components/overlay.tsx b/src/components/overlay.tsx
index 009754b..404c4a4 100644
--- a/src/components/overlay.tsx
+++ b/src/components/overlay.tsx
@@ -12,6 +12,7 @@ import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
 import Breadcrumbs from "./breadcrumbs";
 import { Examples } from "./examples";
 import Panel from "./panel";
+import { ColorModeButton } from "./ui/color-mode";
 import type { BBox2D } from "../types/map";
 import type { DatetimeBounds, StacValue } from "../types/stac";
 
@@ -103,6 +104,7 @@ export default function Overlay({
               Examples
             </Button>
           </Examples>
+          <ColorModeButton />
         </HStack>
       </GridItem>
     </SimpleGrid>
diff --git a/tests/app.spec.tsx b/tests/app.spec.tsx
index dd357cc..a3d8806 100644
--- a/tests/app.spec.tsx
+++ b/tests/app.spec.tsx
@@ -36,6 +36,13 @@ describe("app", () => {
       .toBeVisible();
   });
 
+  test("has a color mode button", async () => {
+    const app = renderApp();
+    await expect
+      .element(app.getByRole("button", { name: "Toggle color mode" }))
+      .toBeVisible();
+  });
+
   describe.for(EXAMPLES)("example $title", ({ title }) => {
     test("updates title", async ({ expect }) => {
       const app = renderApp();