diff --git a/web/index.html b/web/index.html
index 349f34e..f98b051 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>drop</title>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.bunny.net" />
+    <link
+      href="https://fonts.bunny.net/css?family=bricolage-grotesque:400,500"
+      rel="stylesheet"
+    />
   </head>
   <body id="root" class="bg-bg">
     <script type="module" src="/src/index.tsx"></script>
diff --git a/web/src/pages/Upload.tsx b/web/src/pages/Upload.tsx
index 35fc72b..9b91cf5 100644
--- a/web/src/pages/Upload.tsx
+++ b/web/src/pages/Upload.tsx
@@ -252,12 +252,15 @@ export default function Upload() {
           </g>
         </svg>
 
-        <div class="z-10 flex flex-col items-center gap-1.5 text-center">
+        <div class="z-10 flex flex-col items-center gap-3 text-center">
           <Show when={uploading()}>
-            <span class="text-accent font-medium tabular-nums" style={{ "font-size": "clamp(1.5rem, 5vw, 2.5rem)" }}>
+            <span
+              class="text-accent font-medium tabular-nums"
+              style={{ "font-size": "clamp(1.5rem, 5vw, 2.5rem)" }}
+            >
               {progress()}%
             </span>
-            <span class="text-muted text-[10px]">{statusText()}</span>
+            <span class="text-muted text-xs">{statusText()}</span>
             <button
               class="text-muted hover:text-text mt-1 border-none bg-transparent p-0 text-[10px]"
               onClick={(e) => {
@@ -273,7 +276,10 @@ export default function Upload() {
               when={!file()}
               fallback={
                 <>
-                  <span class="text-text max-w-[160px] truncate font-mono text-xs">
+                  <span
+                    class="text-text truncate text-xs"
+                    style={{ "max-width": "clamp(120px, 40vw, 300px)" }}
+                  >
                     {file()!.name}
                   </span>
                   <span
@@ -287,7 +293,8 @@ export default function Upload() {
                     {tooLarge() ? ` / ${formatBytes(maxFileSize())} limit` : ""}
                   </span>
                   <button
-                    class="bg-accent hover:bg-accent-hover mt-2 rounded-md border-none px-4 py-1.5 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+                    class="bg-accent hover:bg-accent-hover mt-2 rounded-md border-none px-4 py-1.5 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+                    style={{ "font-size": "clamp(0.875rem, 2.5vw, 1.25rem)" }}
                     disabled={tooLarge()}
                     onClick={(e) => {
                       e.stopPropagation();
@@ -308,8 +315,12 @@ export default function Upload() {
                 </>
               }
             >
-              <p class="text-muted font-medium" style={{ "font-size": "clamp(0.875rem, 2.5vw, 1.25rem)" }}>Drop a file</p>
-              <span class="text-muted" style={{ "font-size": "clamp(10px, 1.5vw, 14px)" }}>or</span>
+              <p
+                class="text-muted font-medium"
+                style={{ "font-size": "clamp(0.625rem, 2vw, 0.875rem)" }}
+              >
+                Drop a file, or
+              </p>
               <button
                 class="bg-accent hover:bg-accent-hover rounded-md border-none px-4 py-1.5 font-medium text-white transition-colors"
                 style={{ "font-size": "clamp(0.875rem, 2.5vw, 1.25rem)" }}
diff --git a/web/src/styles.css b/web/src/styles.css
index d4f477a..5285459 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2,6 +2,7 @@
 
 @theme {
   --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
+  --font-sans: "Bricolage Grotesque", sans-serif;
 
   --color-bg: var(--c-bg);
   --color-surface: var(--c-surface);