diff --git a/web/app/chat/page.tsx b/web/app/chat/page.tsx
index d2dca39..9fb93c8 100644
--- a/web/app/chat/page.tsx
+++ b/web/app/chat/page.tsx
@@ -343,7 +343,7 @@ function EmptyState({ onExample, onSearchMode }: { onExample: (q: string) => voi
       </motion.div>
 
       {/* Examples */}
-      <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }} className="relative z-10 mt-8 grid w-full max-w-lg grid-cols-2 gap-3">
+      <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }} className="relative z-10 mt-8 grid w-full max-w-lg grid-cols-1 gap-3 sm:grid-cols-2">
         {EXAMPLES.map(({ q, icon }) => (
           <button
             key={q}
diff --git a/web/app/docs/page.tsx b/web/app/docs/page.tsx
index 337c8a7..6605e89 100644
--- a/web/app/docs/page.tsx
+++ b/web/app/docs/page.tsx
@@ -136,7 +136,7 @@ export default function DocsPage() {
   }
 
   return (
-    <div className="mx-auto flex max-w-6xl gap-0 px-6 py-10">
+    <div className="mx-auto flex max-w-6xl flex-col gap-0 px-4 py-8 sm:px-6 md:flex-row md:py-10">
       {/* Sidebar */}
       <aside className="hidden w-56 shrink-0 pr-6 md:block">
         <nav className="mb-6 space-y-1">
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index cbcc020..8bf8e3f 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -43,26 +43,26 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <nav className="sticky top-0 z-50 bg-background/70 backdrop-blur-xl">
-            <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
+            <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
               {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
-              <a href="/" className="group flex items-center gap-3.5">
+              <a href="/" className="group flex shrink-0 items-center gap-2 sm:gap-3.5">
                 {/* Logo mark — PixelRAG cat (inverts to white in dark mode) */}
                 {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img
                   src="/logo.png"
                   alt=""
-                  className="h-9 w-auto transition-transform duration-300 group-hover:scale-105 dark:invert"
+                  className="h-7 w-auto transition-transform duration-300 group-hover:scale-105 dark:invert sm:h-9"
                 />
                 <span className="flex items-baseline gap-0.5">
-                  <span className="font-display text-2xl font-semibold tracking-tight">
+                  <span className="font-display text-xl font-semibold tracking-tight sm:text-2xl">
                     Pixel
                   </span>
-                  <span className="font-display text-2xl font-semibold tracking-tight text-primary">
+                  <span className="font-display text-xl font-semibold tracking-tight text-primary sm:text-2xl">
                     RAG
                   </span>
                 </span>
               </a>
-              <div className="flex items-center gap-4">
+              <div className="flex min-w-0 items-center gap-3 sm:gap-4">
                 <NavLinks />
                 <a
                   href="https://github.com/StarTrail-org/PixelRAG"
diff --git a/web/components/NavLinks.tsx b/web/components/NavLinks.tsx
index 882aa78..86da7b9 100644
--- a/web/components/NavLinks.tsx
+++ b/web/components/NavLinks.tsx
@@ -14,7 +14,7 @@ export function NavLinks() {
   const pathname = usePathname()
 
   return (
-    <div className="flex items-center gap-6">
+    <div className="flex items-center gap-3 sm:gap-6">
       {links.map(({ href, label }) => {
         const isActive =
           href === "/" ? pathname === "/" : pathname.startsWith(href)
@@ -22,7 +22,7 @@ export function NavLinks() {
           <Link
             key={href}
             href={href}
-            className={`text-sm transition-colors hover:text-foreground ${
+            className={`whitespace-nowrap text-sm transition-colors hover:text-foreground ${
               isActive
                 ? "nav-link-active text-foreground"
                 : "text-muted-foreground"
@@ -38,7 +38,7 @@ export function NavLinks() {
         href="https://status.pixelrag.ai"
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        className="hidden items-center gap-1 whitespace-nowrap text-sm text-muted-foreground transition-colors hover:text-foreground sm:flex"
       >
         Status
         <ExternalLink className="h-3 w-3" />
