diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index baede37..2faac51 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import {
   Scissors,
@@ -14,6 +15,8 @@ import {
   Gem,
   Pen,
   FileOutput,
+  Menu,
+  X,
 } from 'lucide-react'
 
 const tools = [
@@ -34,6 +37,8 @@ const steps = [
 ]
 
 export default function LandingPage() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
   return (
     <div className="min-h-screen bg-[#050e18] text-slate-200 relative">
       {/* ── CSS ─────────────────────────────────────────────── */}
@@ -52,6 +57,10 @@ export default function LandingPage() {
           from { transform: rotate(0deg); }
           to   { transform: rotate(360deg); }
         }
+        @keyframes slideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
 
         .anim-reveal { animation: reveal .8s cubic-bezier(.16,1,.3,1) both; }
         .anim-d1 { animation-delay: .08s; }
@@ -59,6 +68,7 @@ export default function LandingPage() {
         .anim-d3 { animation-delay: .24s; }
         .anim-d4 { animation-delay: .36s; }
         .anim-fade { animation: fade .6s ease both; }
+        .anim-slide-down { animation: slideDown .2s ease both; }
 
         /* Dot grid texture */
         .dot-grid {
@@ -66,12 +76,15 @@ export default function LandingPage() {
           background-size: 24px 24px;
         }
 
-        /* Crystal prism */
+        /* Crystal prism – scales down on mobile */
         .prism {
-          width: 340px;
-          height: 340px;
+          width: 220px;
+          height: 220px;
           position: relative;
         }
+        @media (min-width: 768px) {
+          .prism { width: 340px; height: 340px; }
+        }
         .prism::before {
           content: '';
           position: absolute;
@@ -117,98 +130,138 @@ export default function LandingPage() {
           box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(96,165,250,.08);
         }
 
-        /* Step connector dash */
-        .step-connector {
-          width: 100%;
-          height: 1px;
-          background: repeating-linear-gradient(
-            90deg,
-            rgba(96,165,250,.2) 0px,
-            rgba(96,165,250,.2) 6px,
-            transparent 6px,
-            transparent 12px
-          );
+        /* Mobile nav links */
+        .mobile-nav-link {
+          display: block;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 500;
+          color: rgba(148,163,184,1);
+          border-bottom: 1px solid rgba(255,255,255,.04);
+          transition: color .15s ease, background .15s ease;
+        }
+        .mobile-nav-link:hover {
+          color: #fff;
+          background: rgba(255,255,255,.03);
         }
       `}</style>
 
       {/* ── Ambient glow ───────────────────────────────────── */}
       <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden>
-        <div className="absolute -top-[30%] left-1/2 -translate-x-1/2 w-[900px] h-[900px] rounded-full"
-          style={{ background: 'radial-gradient(circle, rgba(45,98,255,.1) 0%, transparent 65%)' }} />
-        <div className="absolute top-[55%] -right-[10%] w-[500px] h-[500px] rounded-full"
-          style={{ background: 'radial-gradient(circle, rgba(56,189,248,.05) 0%, transparent 65%)' }} />
+        <div
+          className="absolute -top-[30%] left-1/2 -translate-x-1/2 w-[600px] h-[600px] sm:w-[900px] sm:h-[900px] rounded-full"
+          style={{ background: 'radial-gradient(circle, rgba(45,98,255,.1) 0%, transparent 65%)' }}
+        />
+        <div
+          className="absolute top-[55%] -right-[10%] w-[300px] h-[300px] sm:w-[500px] sm:h-[500px] rounded-full"
+          style={{ background: 'radial-gradient(circle, rgba(56,189,248,.05) 0%, transparent 65%)' }}
+        />
       </div>
 
       {/* ── Nav ────────────────────────────────────────────── */}
-      <nav className="sticky top-0 z-50 backdrop-blur-xl border-b border-white/[.04]"
-        style={{ background: 'rgba(5,14,24,.75)' }}>
-        <div className="max-w-6xl mx-auto flex items-center justify-between px-6 h-16">
-          <Link to="/" className="flex items-center gap-2.5 group">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center
-                            shadow-lg shadow-brand-500/20 group-hover:shadow-brand-500/40 transition-shadow">
+      <nav
+        className="sticky top-0 z-50 backdrop-blur-xl border-b border-white/[.04]"
+        style={{ background: 'rgba(5,14,24,.85)' }}
+      >
+        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-16">
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-2.5 group shrink-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-blue-400 flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
               <Gem size={14} className="text-white" />
             </div>
-            <span className="font-display text-lg font-semibold tracking-tight text-white">
+            <span className="font-semibold tracking-tight text-white text-lg">
               Crystal<span className="text-blue-400">PDF</span>
             </span>
           </Link>
-          <div className="flex items-center gap-2">
-            <Link to="/login"
-              className="text-sm text-slate-400 hover:text-white px-4 py-2 transition-colors">
+
+          {/* Desktop nav links */}
+          <div className="hidden sm:flex items-center gap-2">
+            <Link
+              to="/login"
+              className="text-sm text-slate-400 hover:text-white px-4 py-2 transition-colors"
+            >
               Sign in
             </Link>
-            <Link to="/register"
-              className="text-sm font-medium text-blue-300 bg-brand-500/15 hover:bg-brand-500/25
-                         border border-brand-500/25 hover:border-brand-500/40
-                         px-4 py-2 rounded-lg transition-all">
+            <Link
+              to="/register"
+              className="text-sm font-medium text-blue-300 bg-blue-500/15 hover:bg-blue-500/25 border border-blue-500/25 hover:border-blue-500/40 px-4 py-2 rounded-lg transition-all"
+            >
               Get started
             </Link>
           </div>
+
+          {/* Mobile hamburger button */}
+          <button
+            className="sm:hidden flex items-center justify-center w-9 h-9 rounded-lg text-slate-400 hover:text-white hover:bg-white/[.06] transition-all"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={mobileMenuOpen}
+          >
+            {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+          </button>
         </div>
+
+        {/* Mobile dropdown menu */}
+        {mobileMenuOpen && (
+          <div
+            className="sm:hidden border-t border-white/[.04] anim-slide-down"
+            style={{ background: 'rgba(5,14,24,.97)' }}
+          >
+            <Link
+              to="/login"
+              className="mobile-nav-link"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Sign in
+            </Link>
+            <div className="p-4">
+              <Link
+                to="/register"
+                onClick={() => setMobileMenuOpen(false)}
+                className="flex items-center justify-center gap-2 w-full px-4 py-3 rounded-xl text-sm font-medium text-white bg-gradient-to-b from-blue-600 to-blue-700 shadow-lg transition-all"
+              >
+                Get started free <ArrowRight size={14} strokeWidth={2.2} />
+              </Link>
+            </div>
+          </div>
+        )}
       </nav>
 
       {/* ── Hero ───────────────────────────────────────────── */}
-      <section className="relative z-10 max-w-6xl mx-auto px-6
-                          pt-20 pb-24 md:pt-32 md:pb-36
-                          grid md:grid-cols-[1fr,auto] items-center gap-12">
+      <section className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 pt-14 pb-16 sm:pt-20 sm:pb-24 md:pt-32 md:pb-36 grid md:grid-cols-[1fr,auto] items-center gap-8 md:gap-12">
         {/* Text column */}
-        <div className="max-w-2xl">
-          <h1 className="font-display font-semibold tracking-tight leading-[1.1]
-                         text-[clamp(2.2rem,5.5vw,4.8rem)] text-white anim-reveal">
-            Every<br className="hidden sm:block" /> PDF tool<br className="hidden sm:block" /> you'll ever{' '}
+        <div className="max-w-2xl text-center md:text-left mx-auto md:mx-0">
+          <h1 className="font-bold tracking-tight leading-[1.1] text-[clamp(2.4rem,8vw,4.8rem)] text-white anim-reveal">
+            Every PDF tool<br className="hidden sm:block" /> you'll ever{' '}
             <em className="not-italic text-blue-400">need.</em>
           </h1>
 
-          <p className="mt-7 text-[clamp(1rem,1.8vw,1.2rem)] leading-relaxed
-                        text-slate-400 max-w-md anim-reveal anim-d2">
+          <p className="mt-5 sm:mt-7 text-[clamp(.95rem,2vw,1.2rem)] leading-relaxed text-slate-400 max-w-sm sm:max-w-md mx-auto md:mx-0 anim-reveal anim-d2">
             Merge, split, compress, protect, convert, and annotate&nbsp;&mdash;
             from one elegant workspace. No subscriptions, no upload limits.
           </p>
 
-          <div className="mt-10 flex flex-wrap gap-3 anim-reveal anim-d3">
-            <Link to="/register"
-              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
-                         text-white bg-gradient-to-b from-brand-500 to-brand-600
-                         shadow-[0_2px_24px_rgba(45,98,255,.35)]
-                         hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
-                         hover:-translate-y-px active:translate-y-0 transition-all">
+          <div className="mt-8 sm:mt-10 flex flex-col sm:flex-row flex-wrap justify-center md:justify-start gap-3 anim-reveal anim-d3">
+            <Link
+              to="/register"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium text-white bg-gradient-to-b from-blue-600 to-blue-700 shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:-translate-y-px active:translate-y-0 transition-all"
+            >
               Start for free <ArrowRight size={15} strokeWidth={2.2} />
             </Link>
-            <Link to="/login"
-              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
-                         text-slate-300 border border-white/10 hover:border-white/20
-                         hover:bg-white/[.03] transition-all">
+            <Link
+              to="/login"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium text-slate-300 border border-white/10 hover:border-white/20 hover:bg-white/[.03] transition-all"
+            >
               Sign in to workspace
             </Link>
           </div>
         </div>
 
         {/* Crystal visual */}
-        <div className="hidden md:flex items-center justify-center anim-fade anim-d4">
+        <div className="flex items-center justify-center anim-fade anim-d4">
           <div className="prism">
-            {/* Inner facets */}
             <div className="absolute inset-0 flex items-center justify-center">
-              <Layers size={48} className="text-blue-400/30" strokeWidth={1} />
+              <Layers size={36} className="text-blue-400/30" strokeWidth={1} />
             </div>
           </div>
         </div>
@@ -216,14 +269,12 @@ export default function LandingPage() {
 
       {/* ── Tools grid ─────────────────────────────────────── */}
       <section className="relative z-10 dot-grid">
-        <div className="max-w-6xl mx-auto px-6 py-24 md:py-32">
-          {/* Section header */}
-          <div className="max-w-lg mb-14">
-            <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-4">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
+          <div className="max-w-lg mb-10 sm:mb-14 text-center sm:text-left mx-auto sm:mx-0">
+            <p className="text-xs font-medium tracking-[.15em] uppercase text-blue-400 mb-4">
               Toolkit
             </p>
-            <h2 className="font-display text-[clamp(2rem,4.5vw,3.5rem)] font-semibold
-                           tracking-tight leading-[1.05] text-white">
+            <h2 className="text-[clamp(2rem,6vw,3.5rem)] font-bold tracking-tight leading-[1.05] text-white">
               Everything in<br className="hidden sm:block" /> one workspace
             </h2>
             <p className="mt-4 text-slate-500 leading-relaxed text-[15px]">
@@ -231,14 +282,11 @@ export default function LandingPage() {
             </p>
           </div>
 
-          {/* Grid */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          {/* 1 col on xs, 2 on sm, 4 on md+ */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
             {tools.map((t) => (
               <div key={t.name} className="tool-card rounded-2xl p-5 cursor-default group">
-                <div className="w-10 h-10 rounded-xl bg-blue-400/[.08] border border-blue-400/[.12]
-                                flex items-center justify-center mb-4
-                                group-hover:bg-blue-400/[.12] group-hover:border-blue-400/[.2]
-                                transition-colors">
+                <div className="w-10 h-10 rounded-xl bg-blue-400/[.08] border border-blue-400/[.12] flex items-center justify-center mb-4 group-hover:bg-blue-400/[.12] group-hover:border-blue-400/[.2] transition-colors">
                   <t.icon size={18} className="text-blue-400" strokeWidth={1.8} />
                 </div>
                 <p className="text-[15px] font-semibold text-white tracking-tight mb-1">
@@ -255,13 +303,12 @@ export default function LandingPage() {
 
       {/* ── How it works ───────────────────────────────────── */}
       <section className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-3xl mx-auto px-6 py-24 md:py-32">
-          <div className="text-center max-w-lg mx-auto mb-16">
-            <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-4">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
+          <div className="text-center max-w-lg mx-auto mb-12 sm:mb-16">
+            <p className="text-xs font-medium tracking-[.15em] uppercase text-blue-400 mb-4">
               How it works
             </p>
-            <h2 className="font-display text-[clamp(2rem,4.5vw,3.5rem)] font-semibold
-                           tracking-tight leading-[1.05] text-white">
+            <h2 className="text-[clamp(2rem,6vw,3.5rem)] font-bold tracking-tight leading-[1.05] text-white">
               Three steps, that's it
             </h2>
           </div>
@@ -269,35 +316,28 @@ export default function LandingPage() {
           <div className="flex flex-col gap-0">
             {steps.map((s, i) => (
               <div key={s.num}>
-                {/* Step row */}
-                <div className="flex items-start gap-5">
-                  {/* Left: number + icon */}
-                  <div className="flex flex-col items-center">
-                    <div className="w-12 h-12 rounded-xl flex items-center justify-center
-                                    bg-brand-500/10 border border-brand-500/20 shrink-0">
+                <div className="flex items-start gap-4 sm:gap-5">
+                  <div className="shrink-0">
+                    <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-blue-500/10 border border-blue-500/20">
                       <s.icon size={20} className="text-blue-400" strokeWidth={1.6} />
                     </div>
                   </div>
-
-                  {/* Right: text */}
-                  <div className="pt-1">
-                    <p className="text-xs font-medium text-brand-400/60 tracking-wider mb-1">
+                  <div className="pt-1 pb-4">
+                    <p className="text-xs font-medium text-blue-400/60 tracking-wider mb-1">
                       Step {s.num}
                     </p>
                     <h3 className="text-base font-semibold text-white tracking-tight mb-1.5">
                       {s.title}
                     </h3>
-                    <p className="text-sm text-slate-500 leading-relaxed max-w-sm">
+                    <p className="text-sm text-slate-500 leading-relaxed max-w-xs sm:max-w-sm">
                       {s.body}
                     </p>
                   </div>
                 </div>
-
-                {/* Connector between steps */}
                 {i < steps.length - 1 && (
-                  <div className="flex items-stretch gap-5 py-1">
-                    <div className="w-12 flex justify-center shrink-0">
-                      <div className="w-px h-8 bg-gradient-to-b from-brand-500/20 to-transparent" />
+                  <div className="flex gap-4 sm:gap-5">
+                    <div className="w-11 flex justify-center shrink-0">
+                      <div className="w-px h-6 bg-gradient-to-b from-blue-500/20 to-transparent" />
                     </div>
                   </div>
                 )}
@@ -309,31 +349,29 @@ export default function LandingPage() {
 
       {/* ── CTA ────────────────────────────────────────────── */}
       <section className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-6xl mx-auto px-6 py-28 md:py-36 text-center">
-          {/* Soft top glow */}
-          <div className="absolute inset-x-0 top-0 h-64 pointer-events-none"
-            style={{ background: 'radial-gradient(ellipse 50% 100% at 50% 0%, rgba(45,98,255,.06), transparent)' }} />
-
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20 sm:py-28 md:py-36 text-center">
+          <div
+            className="absolute inset-x-0 top-0 h-64 pointer-events-none"
+            style={{ background: 'radial-gradient(ellipse 50% 100% at 50% 0%, rgba(45,98,255,.06), transparent)' }}
+          />
           <p className="text-sm text-slate-500 mb-4 relative">
             Free to use. No credit card required.
           </p>
-          <h2 className="font-display text-[clamp(2.4rem,5.5vw,4.5rem)] font-semibold
-                         tracking-tight leading-[.95] text-white mb-10 relative">
+          <h2 className="text-[clamp(2.2rem,7vw,4.5rem)] font-bold tracking-tight leading-[.95] text-white mb-8 sm:mb-10 relative">
             Start working with<br />
             your PDFs today.
           </h2>
-          <div className="relative flex flex-wrap justify-center gap-3">
-            <Link to="/register"
-              className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
-                         text-white bg-gradient-to-b from-brand-500 to-brand-600
-                         shadow-[0_2px_24px_rgba(45,98,255,.35)]
-                         hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
-                         hover:-translate-y-px transition-all">
+          <div className="relative flex flex-col sm:flex-row flex-wrap justify-center gap-3">
+            <Link
+              to="/register"
+              className="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium text-white bg-gradient-to-b from-blue-600 to-blue-700 shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:-translate-y-px transition-all"
+            >
               Create free account <ArrowRight size={15} strokeWidth={2.2} />
             </Link>
-            <Link to="/login"
-              className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
-                         text-slate-400 hover:text-slate-200 transition-colors">
+            <Link
+              to="/login"
+              className="inline-flex items-center justify-center px-7 py-3.5 text-[15px] text-slate-400 hover:text-slate-200 transition-colors"
+            >
               or sign in
             </Link>
           </div>
@@ -342,8 +380,8 @@ export default function LandingPage() {
 
       {/* ── Footer ─────────────────────────────────────────── */}
       <footer className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-6xl mx-auto px-6 py-8 flex items-center justify-between flex-wrap gap-4">
-          <span className="font-display text-sm font-semibold text-slate-600">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center sm:justify-between gap-3 text-center sm:text-left">
+          <span className="font-semibold text-sm text-slate-600">
             Crystal<span className="text-blue-400/50">PDF</span>
           </span>
           <p className="text-xs text-slate-700">