diff --git a/src/components/overlay.tsx b/src/components/overlay.tsx
index 404c4a4..0d327c4 100644
--- a/src/components/overlay.tsx
+++ b/src/components/overlay.tsx
@@ -1,9 +1,12 @@
 import { useEffect, useState } from "react";
+import { LuUpload } from "react-icons/lu";
 import {
   Box,
   Button,
+  FileUpload,
   GridItem,
   HStack,
+  IconButton,
   Input,
   SimpleGrid,
   type UseFileUploadReturn,
@@ -104,7 +107,15 @@ export default function Overlay({
               Examples
             </Button>
           </Examples>
-          <ColorModeButton />
+          <FileUpload.RootProvider value={fileUpload} flex={"0"}>
+            <FileUpload.HiddenInput />
+            <FileUpload.Trigger asChild>
+              <IconButton variant={"surface"} aria-label="upload">
+                <LuUpload />
+              </IconButton>
+            </FileUpload.Trigger>
+          </FileUpload.RootProvider>
+          <ColorModeButton variant={"surface"} />
         </HStack>
       </GridItem>
     </SimpleGrid>
@@ -133,7 +144,7 @@ function HrefInput({
         e.preventDefault();
         setHref(value);
       }}
-      w={"full"}
+      flex="1"
     >
       <Input
         bg={"bg.muted/90"}
diff --git a/tests/app.spec.tsx b/tests/app.spec.tsx
index 1daf83b..70c1469 100644
--- a/tests/app.spec.tsx
+++ b/tests/app.spec.tsx
@@ -36,6 +36,13 @@ describe("app", () => {
       .toBeVisible();
   });
 
+  test("has an upload button", async () => {
+    const app = renderApp();
+    await expect
+      .element(app.getByRole("button", { name: "upload" }))
+      .toBeVisible();
+  });
+
   test("has a color mode button", async () => {
     const app = renderApp();
     await expect