diff --git a/client/web/index.html b/client/web/index.html
index 08952dd4b..e5d889206 100644
--- a/client/web/index.html
+++ b/client/web/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="/src/index.css" />
     <link rel="preload" as="font" href="/src/assets/fonts/Inter.var.latin.woff2" type="font/woff2" crossorigin />
   </head>
-  <body>
+  <body class="px-2">
     <noscript>
       <p class="mb-2">You need to enable Javascript to access the Tailscale web client.</p>
       <p>If you need any help, feel free to <a href="mailto:support+webclient@tailscale.com" class="link">contact us</a>.</p>
diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index 6f76c155f..888031eef 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -22,7 +22,7 @@ export default function App() {
   const { data: auth, loading: loadingAuth, newSession } = useAuth()
 
   return (
-    <main className="min-w-sm max-w-lg mx-auto py-14 px-5">
+    <main className="min-w-sm max-w-lg mx-auto py-4 md:py-14 px-5">
       {loadingAuth || !auth ? (
         <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
       ) : (
@@ -140,7 +140,7 @@ function Header({
 
   return (
     <>
-      <div className="flex justify-between items-center mb-12">
+      <div className="flex justify-between items-center mb-9 md:mb-12">
         <div className="flex gap-3">
           <TailscaleIcon
             className="cursor-pointer"
