diff --git a/src/app/header.tsx b/src/app/header.tsx
index 33fdb76..957fe2a 100644
--- a/src/app/header.tsx
+++ b/src/app/header.tsx
@@ -3,7 +3,7 @@ import gitHubLogo from './github-mark-white.svg';
 
 export function Header(): React.ReactNode {
   return (
-    <header className="flex items-center justify-between bg-zinc-800 px-4 py-3 text-zinc-50 shadow">
+    <header className="flex items-center justify-between bg-zinc-800 px-4 py-3 text-zinc-50 shadow md:px-6">
       <div>
         <h1 className="text-xl font-bold">AI SDK with Generative UI</h1>
         <h2 className="text-sm">Deployed on AWS Lambda &amp; CloudFront</h2>