diff --git a/index.html b/index.html
index 319754d..36a1725 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
 
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="https://assets.craigcallen.com/media/devflowcode/favicon-primary.svg" />
-    
+    <link rel="icon" type="image/svg+xml" href="https://assets.craigcallen.com/media/devflowcode/favicon-primary.svg" media="(prefers-color-scheme: light)" />
+    <link rel="icon" type="image/svg+xml" href="https://assets.craigcallen.com/media/devflowcode/favicon-primary-inverse.svg" media="(prefers-color-scheme: dark)" />
+
 
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
@@ -29,7 +31,8 @@
     <meta name="twitter:image" content="https://assets.craigcallen.com/media/devflowcode/og-image.png" />
 
     <!-- Theme -->
-    <meta name="theme-color" content="#051830" />
+    <meta name="theme-color" content="#f5f8fc" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#051830" media="(prefers-color-scheme: dark)" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="DevFlow" />
diff --git a/src/App.tsx b/src/App.tsx
index 1d83d4b..fce4952 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,7 @@ import FooterCTA from './components/FooterCTA'
 
 export default function App() {
   return (
-    <div className="min-h-screen bg-bg">
+    <div className="min-h-screen bg-bg overflow-x-hidden">
       <Navbar />
       <Hero />
       <ProblemBar />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a8aab6f..e5ee516 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -4,7 +4,7 @@ import AppMockup from './AppMockup'
 
 export default function Hero() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden">
+    <section className="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden w-full">
       {/* Background grid */}
       <div
         className="absolute inset-0 opacity-[0.03]"
@@ -17,20 +17,20 @@ export default function Hero() {
       {/* Radial glow */}
       <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-indigo/8 rounded-full blur-[120px]" />
 
-      <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
+      <div className="relative z-10 mx-auto max-w-4xl px-10 sm:px-6 text-center">
         <motion.div
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] }}
         >
-          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-bg-raised px-4 py-1.5 text-sm text-text-muted mb-8">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-bg-raised px-4 py-1.5 text-xs sm:text-sm text-text-muted mb-8">
             <span className="inline-block w-2 h-2 rounded-full bg-peach animate-pulse" />
             Free beta — now available for macOS
           </div>
         </motion.div>
 
         <motion.h1
-          className="text-5xl sm:text-6xl md:text-7xl font-heading font-bold tracking-tight text-cream leading-[1.08]"
+          className="text-4xl sm:text-6xl md:text-7xl font-heading font-bold tracking-tight text-cream leading-[1.08]"
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.1, ease: [0.25, 0.1, 0.25, 1] }}
@@ -45,7 +45,7 @@ export default function Hero() {
         </motion.h1>
 
         <motion.p
-          className="mt-6 text-lg sm:text-xl text-text-muted max-w-2xl mx-auto leading-relaxed"
+          className="mt-6 text-base sm:text-xl text-text-muted max-w-2xl mx-auto leading-relaxed"
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
@@ -56,7 +56,7 @@ export default function Hero() {
         </motion.p>
 
         <motion.div
-          className="mt-10 max-w-md mx-auto"
+          className="mt-10 max-w-sm sm:max-w-md mx-auto"
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
@@ -65,7 +65,7 @@ export default function Hero() {
         </motion.div>
 
         <motion.p
-          className="mt-4 text-xs text-text-muted"
+          className="mt-4 text-xs text-text-muted px-4 sm:px-0"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.7, delay: 0.5 }}