diff --git a/apps/web/package.json b/apps/web/package.json
index c8526dac..cfd98f55 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -45,6 +45,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
+    "react-is": "^19.2.5",
     "recharts": "^3.6.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.1.18",
diff --git a/apps/web/src/components/landing/Landing.tsx b/apps/web/src/components/landing/Landing.tsx
index 22155448..079ea5fd 100644
--- a/apps/web/src/components/landing/Landing.tsx
+++ b/apps/web/src/components/landing/Landing.tsx
@@ -11,7 +11,7 @@ import { LocalAccess } from "./local-access";
 export const Landing = () => {
   return (
     <>
-      <div className="min-h-screen bg-black text-white selection:bg-accent/30">
+      <div className="min-h-screen bg-black text-white selection:bg-accent/30 overflow-x-hidden">
         <Navbar />
 
         <Hero />
diff --git a/apps/web/src/components/landing/Terminal.tsx b/apps/web/src/components/landing/Terminal.tsx
index d5ae330b..c5de9383 100644
--- a/apps/web/src/components/landing/Terminal.tsx
+++ b/apps/web/src/components/landing/Terminal.tsx
@@ -119,7 +119,7 @@ export function Terminal() {
               {logs.map((log, i) => (
                 <div key={i} className="flex gap-3 text-xs md:text-sm">
                   <span className="text-white/50 w-16">{log.method}</span>
-                  <span className="text-white/80 flex-1">{log.path}</span>
+                  <span className="text-white/80 flex-1 truncate">{log.path}</span>
                   <span
                     className={
                       log.status >= 400
diff --git a/apps/web/src/components/landing/bring-your-own-domain.tsx b/apps/web/src/components/landing/bring-your-own-domain.tsx
index a0d592b4..177fe25c 100644
--- a/apps/web/src/components/landing/bring-your-own-domain.tsx
+++ b/apps/web/src/components/landing/bring-your-own-domain.tsx
@@ -3,40 +3,40 @@ import { Check, Globe } from "lucide-react";
 export const BringYourOwnDomain = () => (
   <div className="py-24 bg-black relative overflow-hidden">
     <div className="max-w-7xl mx-auto px-6">
-      <div className="grid lg:grid-cols-2 gap-16 items-center">
+      <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
         <div>
-          <h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+          <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight">
             Bring your <br />
             own domain
           </h2>
-          <p className="text-xl text-white/40 mb-8">
+          <p className="text-lg sm:text-xl text-white/40 mb-8">
             Don't want to use our random subdomains? No problem. Connect your
             own domain in seconds and get automatic SSL certificates.
           </p>
 
           <div className="space-y-4">
             <div className="flex items-center gap-4 text-white/60">
-              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
                 <Check size={16} className="text-accent" />
               </div>
-              <span>Automatic SSL/TLS certificates</span>
+              <span className="text-sm sm:text-base">Automatic SSL/TLS certificates</span>
             </div>
             <div className="flex items-center gap-4 text-white/60">
-              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
                 <Check size={16} className="text-accent" />
               </div>
-              <span>Simple CNAME configuration</span>
+              <span className="text-sm sm:text-base">Simple CNAME configuration</span>
             </div>
             <div className="flex items-center gap-4 text-white/60">
-              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
                 <Check size={16} className="text-accent" />
               </div>
-              <span>Zero-downtime reconfiguration</span>
+              <span className="text-sm sm:text-base">Zero-downtime reconfiguration</span>
             </div>
           </div>
         </div>
 
-        <div className="relative group">
+        <div className="relative group mt-8 lg:mt-0">
           <div className="absolute inset-0 bg-accent/20 blur-3xl rounded-full group-hover:bg-accent/30 transition-colors duration-500" />
 
           <div className="relative bg-white/2 border border-white/5 rounded-3xl p-6 hover:border-white/10 transition-all backdrop-blur-sm">
@@ -45,36 +45,36 @@ export const BringYourOwnDomain = () => (
                 <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center shrink-0">
                   <Globe className="w-5 h-5 text-accent" />
                 </div>
-                <div>
-                  <div className="flex items-center gap-3">
-                    <h3 className="text-lg font-medium text-white">
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                    <h3 className="text-base sm:text-lg font-medium text-white truncate">
                       api.yourcompany.com
                     </h3>
-                    <span className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-xs font-medium text-accent">
+                    <span className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-[10px] font-medium text-accent">
                       Active
                     </span>
                   </div>
-                  <p className="text-sm text-white/40 mt-1">
+                  <p className="text-xs sm:text-sm text-white/40 mt-1">
                     Added on {new Date().toLocaleDateString()}
                   </p>
                 </div>
               </div>
             </div>
 
-            <div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden font-mono text-sm">
-              <div className="p-4 border-b border-white/5 flex items-center justify-between">
+            <div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden font-mono text-xs sm:text-sm">
+              <div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
                 <span className="text-white/40">Type</span>
                 <span className="text-white/80">CNAME</span>
               </div>
-              <div className="p-4 border-b border-white/5 flex items-center justify-between">
+              <div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
                 <span className="text-white/40">Name</span>
                 <span className="text-white/80">api</span>
               </div>
-              <div className="p-4 border-b border-white/5 flex items-center justify-between">
+              <div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
                 <span className="text-white/40">Value</span>
-                <span className="text-accent">edge.outray.app</span>
+                <span className="text-accent truncate">edge.outray.app</span>
               </div>
-              <div className="p-4 flex items-center justify-between">
+              <div className="p-4 flex items-center justify-between gap-4">
                 <span className="text-white/40">TTL</span>
                 <span className="text-white/80">Auto</span>
               </div>
diff --git a/apps/web/src/components/landing/developer-experience.tsx b/apps/web/src/components/landing/developer-experience.tsx
index 347a7ff7..df1caa52 100644
--- a/apps/web/src/components/landing/developer-experience.tsx
+++ b/apps/web/src/components/landing/developer-experience.tsx
@@ -9,54 +9,54 @@ const PluginTabs = () => {
 
   return (
     <div className="mt-auto">
-      <div className="flex gap-2 mb-3">
+      <div className="flex flex-wrap gap-2 mb-4">
         <button
           onClick={() => setActiveTab("vite")}
-          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
+          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
             activeTab === "vite"
               ? "bg-white/10 text-white"
               : "text-white/40 hover:text-white/60"
           }`}
         >
-          <SiVite className={`w-4 h-4 ${activeTab === "vite" ? "text-[#646CFF]" : ""}`} />
+          <SiVite className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${activeTab === "vite" ? "text-[#646CFF]" : ""}`} />
           Vite
         </button>
         <button
           onClick={() => setActiveTab("next")}
-          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
+          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
             activeTab === "next"
               ? "bg-white/10 text-white"
               : "text-white/40 hover:text-white/60"
           }`}
         >
-          <SiNextdotjs className="w-4 h-4" />
+          <SiNextdotjs className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
           Next.js
         </button>
         <button
           onClick={() => setActiveTab("express")}
-          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
+          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
             activeTab === "express"
               ? "bg-white/10 text-white"
               : "text-white/40 hover:text-white/60"
           }`}
         >
-          <SiExpress className="w-4 h-4" />
+          <SiExpress className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
           Express
         </button>
       </div>
 
       <div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden">
-        <div className="bg-white/5 border-b border-white/5 px-4 py-2 flex items-center gap-2">
+        <div className="bg-white/5 border-b border-white/5 px-4 py-2.5 flex items-center gap-2">
           <div className="flex gap-1.5">
-            <div className="w-2.5 h-2.5 rounded-full bg-white/20" />
-            <div className="w-2.5 h-2.5 rounded-full bg-white/20" />
-            <div className="w-2.5 h-2.5 rounded-full bg-white/20" />
+            <div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
+            <div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
+            <div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
           </div>
-          <span className="text-xs text-white/40 ml-2">
+          <span className="text-[10px] sm:text-xs text-white/40 ml-2 truncate">
             {activeTab === "vite" ? "vite.config.ts" : activeTab === "next" ? "next.config.ts" : "index.js"}
           </span>
         </div>
-        <div className="p-4 font-mono text-sm overflow-x-auto">
+        <div className="p-4 font-mono text-[11px] sm:text-sm overflow-x-auto scrollbar-hide">
           {activeTab === "vite" ? (
             <pre className="text-white/70">
               <code>
@@ -101,7 +101,7 @@ const PluginTabs = () => {
 
       <Link
         to={activeTab === "vite" ? "/vite" : activeTab === "next" ? "/nextjs" : "/express"}
-        className="mt-3 text-sm text-accent hover:underline inline-block"
+        className="mt-4 text-xs sm:text-sm text-accent hover:underline inline-block font-medium"
       >
         Learn more →
       </Link>
@@ -186,65 +186,65 @@ export const DeveloperExperience = () => {
 
   return (
     <div className="max-w-7xl mx-auto px-6 py-10">
-      <div className="mb-16">
-        <h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight text-white">
+      <div className="mb-12 sm:mb-16">
+        <h2 className="text-3xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight text-white leading-[1.1]">
           First-class <br />
           developer experience
         </h2>
       </div>
 
-      <div className="grid lg:grid-cols-2 gap-8">
-        <div className="grid gap-8">
-          <div className="bg-white/2 border border-white/5 rounded-3xl p-8 hover:border-white/10 transition-colors group flex flex-col">
+      <div className="grid lg:grid-cols-2 gap-6 sm:gap-8">
+        <div className="grid gap-6 sm:gap-8">
+          <div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 hover:border-white/10 transition-colors group flex flex-col">
             <div className="flex items-center gap-4 mb-6">
-              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
+              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
                 <TerminalIcon size={20} className="text-accent" />
               </div>
-              <h3 className="text-xl font-bold text-white">
+              <h3 className="text-lg sm:text-xl font-bold text-white">
                 Online in one line
               </h3>
             </div>
-            <p className="text-white/40 mb-6">
+            <p className="text-sm sm:text-base text-white/40 mb-6">
               One command, you're online. Seriously, try for yourself.
             </p>
-            <div className="bg-black/40 rounded-2xl border border-white/5 p-4 font-mono text-sm mt-auto">
+            <div className="bg-black/40 rounded-2xl border border-white/5 p-4 font-mono text-xs sm:text-sm mt-auto">
               <span className="text-accent">$</span> outray 3000
             </div>
           </div>
 
-          <div className="bg-white/2 border border-white/5 rounded-3xl p-8 hover:border-white/10 transition-colors group flex flex-col">
+          <div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 hover:border-white/10 transition-colors group flex flex-col">
             <div className="flex items-center gap-4 mb-6">
-              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
+              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
                 <Code size={20} className="text-accent" />
               </div>
-              <h3 className="text-xl font-bold text-white">Don't fw CLI?</h3>
+              <h3 className="text-lg sm:text-xl font-bold text-white">Don't fw CLI?</h3>
             </div>
-            <p className="text-white/40 mb-6">
+            <p className="text-sm sm:text-base text-white/40 mb-6">
               Use our plugins to embed OutRay directly into your build tool.
             </p>
             <PluginTabs />
           </div>
         </div>
 
-        <div className="bg-white/2 border border-white/5 rounded-3xl p-8 flex flex-col relative overflow-hidden group h-full">
+        <div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 flex flex-col relative overflow-hidden group h-full">
           <div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl -mr-32 -mt-32 pointer-events-none group-hover:bg-accent/20 transition-colors" />
 
           <div>
             <div className="flex items-center gap-4 mb-6">
-              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
+              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
                 <Activity size={20} className="text-accent" />
               </div>
-              <h3 className="text-xl font-bold text-white">
+              <h3 className="text-lg sm:text-xl font-bold text-white">
                 Instant Observability
               </h3>
             </div>
-            <p className="text-white/40">
+            <p className="text-sm sm:text-base text-white/40">
               View live traffic happening on your APIs in real-time the second
               it goes online.
             </p>
           </div>
 
-          <div className="mt-6 space-y-3 font-mono text-xs flex-1 flex flex-col justify-end">
+          <div className="mt-8 space-y-3 font-mono text-[10px] sm:text-xs flex-1 flex flex-col justify-end">
             <AnimatePresence mode="popLayout" initial={false}>
               {visibleLogs.map((log) => (
                 <motion.div
@@ -258,12 +258,12 @@ export const DeveloperExperience = () => {
                     transition: { duration: 0.2 },
                   }}
                   transition={{ duration: 0.4, type: "spring", bounce: 0 }}
-                  className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5"
+                  className="flex items-center gap-2 sm:gap-3 p-2.5 sm:p-3 rounded-xl bg-white/5 border border-white/5"
                 >
-                  <span className={log.color}>{log.status}</span>
-                  <span className="text-white/40">{log.method}</span>
-                  <span className="text-white/60">{log.path}</span>
-                  <span className="ml-auto text-white/20">{log.time}</span>
+                  <span className={`${log.color} shrink-0 w-[60px] sm:w-auto`}>{log.status}</span>
+                  <span className="text-white/40 shrink-0">{log.method}</span>
+                  <span className="text-white/60 truncate flex-1">{log.path}</span>
+                  <span className="ml-auto text-white/20 shrink-0">{log.time}</span>
                 </motion.div>
               ))}
             </AnimatePresence>
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index 5aaa59e9..4fba9d88 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -50,25 +50,9 @@ export const Hero = () => {
         </Canvas>
       </div>
 
-      <div className="flex flex-col gap-8 max-w-360 mx-auto px-6 relative z-10 w-full items-center">
-        <div className="flex flex-col gap-6 items-center mt-20">
-          <div className="flex items-center gap-3 flex-col-reverse flex-col">
-            {/* <motion.a
-              href="https://www.ycombinator.com/companies/outray"
-              target="_blank"
-              onClick={() => posthog.capture("yc_badge_clicked")}
-              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-sm text-white/60 backdrop-blur-sm hover:bg-white/10 transition-colors"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-            >
-              <div className="w-4 h-4 bg-[#F26522] flex items-center justify-center rounded-xs">
-                <span className="text-white text-[10px] font-bold font-sans">
-                  Y
-                </span>
-              </div>
-              <span>Not backed by Y Combinator</span>
-            </motion.a> */}
+      <div className="flex flex-col gap-8 max-w-7xl mx-auto px-4 sm:px-6 relative z-10 w-full items-center">
+        <div className="flex flex-col gap-6 items-center mt-12 sm:mt-20">
+          <div className="flex items-center gap-3 flex-col">
             <motion.a
               href="https://vercel.com/oss"
               target="_blank"
@@ -76,23 +60,22 @@ export const Hero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.1 }}
             >
-              <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" className="w-52" />
+              <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" className="w-40 sm:w-52" />
             </motion.a>
           </div>
           <motion.h1
-            className="text-5xl md:text-7xl font-bold text-center"
+            className="text-4xl sm:text-5xl md:text-7xl font-bold text-center leading-tight sm:leading-none"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.1 }}
           >
             <span
-              className="relative inline-block mb-2 md:mb-0 cursor-pointer"
+              className="relative inline-block mb-1 sm:mb-2 md:mb-0 cursor-pointer"
               onMouseEnter={() => setExposeHovered(true)}
               onMouseLeave={() => setExposeHovered(false)}
             >
-              {/* Hidden streaming logs behind */}
               <motion.span
-                className="absolute inset-0 bg-black rounded-2xl px-3 border border-accent/30 font-mono text-[10px] md:text-xs overflow-hidden flex items-center"
+                className="absolute inset-0 bg-black rounded-xl sm:rounded-2xl px-2 sm:px-3 border border-accent/30 font-mono text-[8px] sm:text-xs overflow-hidden flex items-center"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: exposeHovered ? 1 : 0 }}
                 transition={{ duration: 0.2 }}
@@ -107,19 +90,18 @@ export const Hero = () => {
                         animate={{ opacity: 1, x: 0 }}
                         exit={{ opacity: 0 }}
                         transition={{ duration: 0.3, type: "spring", bounce: 0 }}
-                        className="flex items-center whitespace-nowrap h-4"
+                        className="flex items-center whitespace-nowrap h-3 sm:h-4"
                       >
-                        <span className="text-accent font-medium w-10 shrink-0">{log.method}</span>
-                        <span className="text-white/50 flex-1">{log.path}</span>
+                        <span className="text-accent font-medium w-8 sm:w-10 shrink-0">{log.method}</span>
+                        <span className="text-white/50 flex-1 truncate">{log.path}</span>
                         <span className="text-white/30 ml-auto">{log.status}</span>
                       </motion.div>
                     ))}
                   </AnimatePresence>
                 </span>
               </motion.span>
-              {/* Front card that rotates */}
               <motion.span
-                className="bg-accent/15 text-white rounded-2xl px-4 py-1 inline-block border border-accent/30 relative origin-bottom-left"
+                className="bg-accent/15 text-white rounded-xl sm:rounded-2xl px-3 sm:px-4 py-0.5 sm:py-1 inline-block border border-accent/30 relative origin-bottom-left"
                 animate={{
                   rotate: exposeHovered ? -45 : 0,
                 }}
@@ -128,10 +110,10 @@ export const Hero = () => {
                 Expose
               </motion.span>
             </span>{" "}
-            your local server <br className="hidden md:block" /> to the internet
+            your local server <br className="hidden sm:block" /> to the internet
           </motion.h1>
           <motion.p
-            className="text-xl md:text-2xl text-center text-white/60 max-w-2xl leading-relaxed"
+            className="text-lg sm:text-xl md:text-2xl text-center text-white/60 max-w-2xl leading-relaxed px-4 sm:px-0"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -143,14 +125,14 @@ export const Hero = () => {
         </div>
 
         <motion.div
-          className="flex flex-col sm:flex-row items-center gap-4 w-full justify-center"
+          className="flex flex-col sm:flex-row items-center gap-4 w-full justify-center px-4 sm:px-0"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.3 }}
         >
           <Link
             to="/signup"
-            className="group w-full sm:w-auto px-8 py-4 bg-white text-black hover:bg-gray-200 rounded-full font-bold text-lg transition-all flex items-center justify-center gap-2"
+            className="group w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 bg-white text-black hover:bg-gray-200 rounded-full font-bold text-base sm:text-lg transition-all flex items-center justify-center gap-2"
           >
             Get Started Free{" "}
             <ArrowRight
@@ -160,7 +142,7 @@ export const Hero = () => {
           </Link>
           <button
             onClick={copyCommand}
-            className="w-full sm:w-auto flex items-center gap-3 text-white/60 hover:text-white px-8 py-4 bg-white/5 hover:bg-white/10 rounded-full border border-white/10 hover:border-accent/40 font-mono text-sm backdrop-blur-sm transition-all group cursor-pointer"
+            className="w-full sm:w-auto flex items-center gap-3 text-white/60 hover:text-white px-6 sm:px-8 py-3 sm:py-4 bg-white/5 hover:bg-white/10 rounded-full border border-white/10 hover:border-accent/40 font-mono text-xs sm:text-sm backdrop-blur-sm transition-all group cursor-pointer"
           >
             <span className="text-accent">$</span> npm install -g outray
             {copied ? (
@@ -175,7 +157,7 @@ export const Hero = () => {
         </motion.div>
 
         <motion.div
-          className="w-full max-w-4xl mt-12 pointer-events-auto"
+          className="w-full max-w-4xl mt-8 sm:mt-12 pointer-events-auto px-2 sm:px-0"
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.4 }}
diff --git a/apps/web/src/components/landing/local-access.tsx b/apps/web/src/components/landing/local-access.tsx
index c145137d..b0a94dc7 100644
--- a/apps/web/src/components/landing/local-access.tsx
+++ b/apps/web/src/components/landing/local-access.tsx
@@ -8,28 +8,28 @@ export const LocalAccess = () => (
           <Wifi size={14} />
           <span>New</span>
         </div>
-        <h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+        <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight">
           Unlimited{" "}
           <span className="bg-linear-to-r from-blue-400 via-cyan-400 to-teal-400 bg-clip-text text-transparent">
             .local
           </span>{" "}
           domains
         </h2>
-        <p className="text-xl text-white/60">
+        <p className="text-lg sm:text-xl text-white/60">
           Test on any device in your network. Just add --local and your app is
           instantly accessible at a memorable .local domain.
         </p>
       </div>
 
-      <div className="grid lg:grid-cols-2 gap-12 items-start">
+      <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
         <div className="space-y-6">
           <div className="flex items-start gap-4">
             <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0">
               <Radio className="w-5 h-5 text-blue-400" />
             </div>
             <div>
-              <h3 className="text-white font-semibold mb-1">mDNS Discovery</h3>
-              <p className="text-white/40 text-sm">
+              <h3 className="text-white font-semibold mb-1 text-sm sm:text-base">mDNS Discovery</h3>
+              <p className="text-white/40 text-xs sm:text-sm">
                 Auto-discovered by all devices via Bonjour/Avahi
               </p>
             </div>
@@ -39,8 +39,8 @@ export const LocalAccess = () => (
               <Shield className="w-5 h-5 text-cyan-400" />
             </div>
             <div>
-              <h3 className="text-white font-semibold mb-1">Trusted HTTPS</h3>
-              <p className="text-white/40 text-sm">
+              <h3 className="text-white font-semibold mb-1 text-sm sm:text-base">Trusted HTTPS</h3>
+              <p className="text-white/40 text-xs sm:text-sm">
                 Automatic certificates with mkcert - no browser warnings
               </p>
             </div>
@@ -50,8 +50,8 @@ export const LocalAccess = () => (
               <Zap className="w-5 h-5 text-teal-400" />
             </div>
             <div>
-              <h3 className="text-white font-semibold mb-1">Zero Config</h3>
-              <p className="text-white/40 text-sm">
+              <h3 className="text-white font-semibold mb-1 text-sm sm:text-base">Zero Config</h3>
+              <p className="text-white/40 text-xs sm:text-sm">
                 No port forwarding, no firewall rules, no DNS setup
               </p>
             </div>
@@ -59,7 +59,7 @@ export const LocalAccess = () => (
         </div>
 
         {/* Right - Terminal demo */}
-        <div className="relative group">
+        <div className="relative group mt-8 lg:mt-0">
           <div className="absolute inset-0 bg-cyan-500/10 blur-3xl rounded-full opacity-50 group-hover:opacity-70 transition-opacity" />
           <div className="relative bg-white/2 border border-white/5 rounded-2xl overflow-hidden">
             <div className="px-4 py-3 border-b border-white/5 flex items-center gap-2">
@@ -67,17 +67,17 @@ export const LocalAccess = () => (
               <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
               <div className="w-3 h-3 rounded-full bg-green-500/80" />
             </div>
-            <div className="p-6 font-mono text-sm space-y-3">
+            <div className="p-4 sm:p-6 font-mono text-[10px] sm:text-sm space-y-3">
               <div className="text-white/60">
                 <span className="text-green-400">$</span> outray 3000 --local
               </div>
-              <div className="text-white/40 pt-2">
-                ✨ Tunnel:{" "}
-                <span className="text-white/60">https://my-app.outray.app</span>
+              <div className="text-white/40 pt-2 flex flex-wrap gap-x-2">
+                <span>✨ Tunnel:</span>
+                <span className="text-white/60 truncate">https://my-app.outray.app</span>
               </div>
-              <div className="text-cyan-400">
-                📡 Local:{" "}
-                <span className="text-cyan-300">https://my-app.local</span>
+              <div className="text-cyan-400 flex flex-wrap gap-x-2">
+                <span>📡 Local:</span>
+                <span className="text-cyan-300 truncate">https://my-app.local</span>
               </div>
             </div>
           </div>
diff --git a/apps/web/src/components/landing/multiple-protocols.tsx b/apps/web/src/components/landing/multiple-protocols.tsx
index 640f599e..a647e12c 100644
--- a/apps/web/src/components/landing/multiple-protocols.tsx
+++ b/apps/web/src/components/landing/multiple-protocols.tsx
@@ -4,11 +4,11 @@ export const MultipleProtocols = () => (
   <div className="py-32 bg-black relative overflow-hidden border-t border-white/5">
     <div className="max-w-7xl mx-auto px-6">
       <div className="text-center max-w-3xl mx-auto mb-20">
-        <h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+        <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight">
           Any protocol, <br />
           <span className="text-white/40">anywhere.</span>
         </h2>
-        <p className="text-xl text-white/60">
+        <p className="text-lg sm:text-xl text-white/60">
           OutRay isn't limited to just web traffic. Tunnel any TCP or UDP
           service securely to your local machine with a single command.
         </p>
@@ -25,14 +25,14 @@ export const MultipleProtocols = () => (
             </div>
 
             <h3 className="text-xl font-bold text-white mb-3">HTTP/HTTPS</h3>
-            <p className="text-white/40 mb-8 h-12">
+            <p className="text-white/40 mb-8 sm:h-12">
               Instant secure URLs for your local web servers, webhooks, and
               APIs.
             </p>
 
             <div className="bg-black/40 rounded-xl border border-white/5 p-3 font-mono text-sm text-white/60 flex items-center justify-between group-hover:border-blue-500/20 transition-colors">
-              <span>outray http 3000</span>
-              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-blue-400" />
+              <span className="truncate mr-2">outray http 3000</span>
+              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-blue-400 shrink-0" />
             </div>
           </div>
         </div>
@@ -47,13 +47,13 @@ export const MultipleProtocols = () => (
             </div>
 
             <h3 className="text-xl font-bold text-white mb-3">TCP Tunnels</h3>
-            <p className="text-white/40 mb-8 h-12">
+            <p className="text-white/40 mb-8 sm:h-12">
               Expose databases, SSH, RDP, and other TCP services securely.
             </p>
 
             <div className="bg-black/40 rounded-xl border border-white/5 p-3 font-mono text-sm text-white/60 flex items-center justify-between group-hover:border-purple-500/20 transition-colors">
-              <span>outray tcp 5432</span>
-              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-purple-400" />
+              <span className="truncate mr-2">outray tcp 5432</span>
+              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-purple-400 shrink-0" />
             </div>
           </div>
         </div>
@@ -68,13 +68,13 @@ export const MultipleProtocols = () => (
             </div>
 
             <h3 className="text-xl font-bold text-white mb-3">UDP Tunnels</h3>
-            <p className="text-white/40 mb-8 h-12">
+            <p className="text-white/40 mb-8 sm:h-12">
               Perfect for game servers, streaming, and real-time applications.
             </p>
 
             <div className="bg-black/40 rounded-xl border border-white/5 p-3 font-mono text-sm text-white/60 flex items-center justify-between group-hover:border-orange-500/20 transition-colors">
-              <span>outray udp 25565</span>
-              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-orange-400" />
+              <span className="truncate mr-2">outray udp 25565</span>
+              <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all text-orange-400 shrink-0" />
             </div>
           </div>
         </div>
diff --git a/apps/web/src/components/landing/navbar.tsx b/apps/web/src/components/landing/navbar.tsx
index 4802852c..1513a753 100644
--- a/apps/web/src/components/landing/navbar.tsx
+++ b/apps/web/src/components/landing/navbar.tsx
@@ -110,7 +110,7 @@ export const Navbar = () => {
           : "bg-transparent py-6"
       }`}
     >
-      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-between">
         <Link to="/" className="flex items-center gap-2" onContextMenu={handleLogoRightClick}>
           <img
             src="/logo.png"
diff --git a/apps/web/src/components/landing/network-diagram.tsx b/apps/web/src/components/landing/network-diagram.tsx
index e35b5094..30cd27e5 100644
--- a/apps/web/src/components/landing/network-diagram.tsx
+++ b/apps/web/src/components/landing/network-diagram.tsx
@@ -19,12 +19,12 @@ export function NetworkDiagram() {
                 ease: "easeInOut",
               }}
             />
-            <h2 className="relative text-6xl md:text-7xl font-bold italic tracking-tighter text-transparent bg-clip-text bg-linear-to-b from-white via-white/90 to-white/70 drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]">
+            <h2 className="relative text-4xl sm:text-6xl md:text-7xl font-bold italic tracking-tighter text-transparent bg-clip-text bg-linear-to-b from-white via-white/90 to-white/70 drop-shadow-[0_0_15px_rgba(255,255,255,0.3)] px-4">
               It just works
             </h2>
 
             <motion.div
-              className="absolute -top-8 -right-10 text-yellow-200"
+              className="absolute -top-6 -right-4 sm:-top-8 sm:-right-10 text-yellow-200"
               animate={{
                 scale: [1, 1.2, 1],
                 opacity: [0.7, 1, 0.7],
@@ -32,10 +32,10 @@ export function NetworkDiagram() {
               }}
               transition={{ duration: 2, repeat: Infinity }}
             >
-              <Sparkles className="w-10 h-10 fill-yellow-200/20" />
+              <Sparkles className="w-6 h-6 sm:w-10 sm:h-10 fill-yellow-200/20" />
             </motion.div>
             <motion.div
-              className="absolute -bottom-4 -left-10 text-purple-300"
+              className="absolute -bottom-2 -left-4 sm:-bottom-4 sm:-left-10 text-purple-300"
               animate={{
                 scale: [1, 1.2, 1],
                 opacity: [0.5, 0.8, 0.5],
@@ -43,7 +43,7 @@ export function NetworkDiagram() {
               }}
               transition={{ duration: 3, repeat: Infinity, delay: 1 }}
             >
-              <Sparkles className="w-8 h-8 fill-purple-300/20" />
+              <Sparkles className="w-5 h-5 sm:w-8 sm:h-8 fill-purple-300/20" />
             </motion.div>
             <motion.div
               className="absolute top-0 -left-8 text-blue-300"
diff --git a/apps/web/src/components/landing/opensource.tsx b/apps/web/src/components/landing/opensource.tsx
index 84844d03..aa4a14b4 100644
--- a/apps/web/src/components/landing/opensource.tsx
+++ b/apps/web/src/components/landing/opensource.tsx
@@ -5,12 +5,12 @@ export function OpenSource() {
   return (
     <section className="py-24 bg-black relative overflow-hidden border-t border-white/5">
       <div className="max-w-7xl mx-auto px-6">
-        <div className="grid lg:grid-cols-2 gap-16 items-center">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
           <div>
-            <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight">
+            <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight">
               100% Open Source
             </h2>
-            <p className="text-lg text-white/60 mb-8 leading-relaxed">
+            <p className="text-base sm:text-lg text-white/60 mb-8 leading-relaxed">
               We believe in transparency and community. OutRay is built in the
               open, so you can inspect the code, contribute features, or
               self-host the entire platform on your own infrastructure.
@@ -20,7 +20,7 @@ export function OpenSource() {
                 href="https://github.com/akinloluwami/outray"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white text-black font-medium hover:bg-gray-200 transition-colors"
+                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white text-black text-sm sm:text-base font-medium hover:bg-gray-200 transition-colors"
               >
                 <SiGithub className="w-5 h-5" />
                 Star on GitHub
@@ -29,7 +29,7 @@ export function OpenSource() {
                 href="https://discord.gg/DncjGcCHDg"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/5 border border-white/10 text-white font-medium hover:bg-white/10 transition-colors"
+                className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/5 border border-white/10 text-white text-sm sm:text-base font-medium hover:bg-white/10 transition-colors"
               >
                 <SiDiscord className="w-5 h-5" />
                 Join Community
@@ -37,18 +37,17 @@ export function OpenSource() {
             </div>
           </div>
 
-          <div className="relative">
-            <div className="rounded-full" />
-            <div className="relative bg-[#0c0c0c] border border-white/10 rounded-3xl p-8">
+          <div className="relative mt-8 lg:mt-0">
+            <div className="relative bg-[#0c0c0c] border border-white/10 rounded-3xl p-6 sm:p-8">
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                 <div className="space-y-2">
                   <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
                     <Lock className="w-5 h-5 text-blue-400" />
                   </div>
-                  <h3 className="text-white font-semibold">
+                  <h3 className="text-white font-semibold text-sm sm:text-base">
                     Auditable Security
                   </h3>
-                  <p className="text-sm text-white/40">
+                  <p className="text-xs sm:text-sm text-white/40">
                     Verify our security claims by inspecting the source code
                     yourself.
                   </p>
@@ -57,8 +56,8 @@ export function OpenSource() {
                   <div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
                     <Users className="w-5 h-5 text-purple-400" />
                   </div>
-                  <h3 className="text-white font-semibold">Community Driven</h3>
-                  <p className="text-sm text-white/40">
+                  <h3 className="text-white font-semibold text-sm sm:text-base">Community Driven</h3>
+                  <p className="text-xs sm:text-sm text-white/40">
                     Built with feedback and contributions from developers like
                     you.
                   </p>
@@ -67,8 +66,8 @@ export function OpenSource() {
                   <div className="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center mb-4">
                     <Server className="w-5 h-5 text-green-400" />
                   </div>
-                  <h3 className="text-white font-semibold">Self-Hostable</h3>
-                  <p className="text-sm text-white/40">
+                  <h3 className="text-white font-semibold text-sm sm:text-base">Self-Hostable</h3>
+                  <p className="text-xs sm:text-sm text-white/40">
                     Run the entire stack on your own servers. No vendor lock-in.
                   </p>
                 </div>
@@ -76,8 +75,8 @@ export function OpenSource() {
                   <div className="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center mb-4">
                     <Heart className="w-5 h-5 text-red-400" />
                   </div>
-                  <h3 className="text-white font-semibold">Free Forever</h3>
-                  <p className="text-sm text-white/40">
+                  <h3 className="text-white font-semibold text-sm sm:text-base">Free Forever</h3>
+                  <p className="text-xs sm:text-sm text-white/40">
                     The core features will always be free and open source.
                   </p>
                 </div>
diff --git a/apps/web/src/components/overview/overview-card.tsx b/apps/web/src/components/overview/overview-card.tsx
index 17129037..b106b5a2 100644
--- a/apps/web/src/components/overview/overview-card.tsx
+++ b/apps/web/src/components/overview/overview-card.tsx
@@ -29,19 +29,19 @@ export function OverviewCard({
         : "text-red-400 bg-red-500/10 border-red-500/20";
 
   return (
-    <div className="group bg-white/2 border border-white/5 rounded-2xl p-6 hover:border-white/10 transition-all relative overflow-hidden">
-      <div className="flex items-start justify-between mb-4 relative z-10">
-        <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-gray-300 border border-white/5 group-hover:border-accent/20 group-hover:text-accent transition-colors">
-          {icon}
+    <div className="group bg-white/2 border border-white/5 rounded-2xl p-4 sm:p-6 hover:border-white/10 transition-all relative overflow-hidden">
+      <div className="flex items-start justify-between mb-3 sm:mb-4 relative z-10">
+        <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-white/5 flex items-center justify-center text-gray-300 border border-white/5 group-hover:border-accent/20 group-hover:text-accent transition-colors">
+          {React.cloneElement(icon as React.ReactElement, { size: 18 })}
         </div>
         {(change !== undefined || trend !== "neutral") && (
           <div
-            className={`flex items-center gap-1 px-2 py-1 rounded-lg border text-xs font-medium ${changeColor}`}
+            className={`flex items-center gap-1 px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-lg border text-[10px] sm:text-xs font-medium ${changeColor}`}
           >
             {trend === "up" ? (
-              <ArrowUpRight size={12} />
+              <ArrowUpRight size={10} className="sm:w-[12px] sm:h-[12px]" />
             ) : trend === "down" ? (
-              <ArrowDownRight size={12} />
+              <ArrowDownRight size={10} className="sm:w-[12px] sm:h-[12px]" />
             ) : null}
             {showDash
               ? "-"
@@ -53,17 +53,17 @@ export function OverviewCard({
       </div>
 
       <div className="relative z-10">
-        <div className="text-3xl font-bold text-white mb-1 tracking-tight">
+        <div className="text-2xl sm:text-3xl font-bold text-white mb-0.5 sm:mb-1 tracking-tight">
           {value}
         </div>
         <div className="flex items-center gap-2">
-          <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
+          <div className="text-[10px] sm:text-xs text-gray-500 uppercase tracking-wider font-medium">
             {title}
           </div>
           {subValue && (
             <>
               <span className="text-gray-700">•</span>
-              <span className="text-xs text-gray-500">{subValue}</span>
+              <span className="text-[10px] sm:text-xs text-gray-500">{subValue}</span>
             </>
           )}
         </div>
diff --git a/apps/web/src/components/overview/overview-header.tsx b/apps/web/src/components/overview/overview-header.tsx
index 8da51386..6a6522eb 100644
--- a/apps/web/src/components/overview/overview-header.tsx
+++ b/apps/web/src/components/overview/overview-header.tsx
@@ -9,7 +9,7 @@ export function OverviewHeader({
   onNewTunnelClick: () => void;
 }) {
   return (
-    <div className="flex items-start sm:items-center justify-between gap-4">
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
       <div className="min-w-0 flex-1">
         <h1 className="text-xl sm:text-2xl font-bold text-white tracking-tight">
           Overview
@@ -22,9 +22,9 @@ export function OverviewHeader({
         onClick={onNewTunnelClick}
         disabled={isAtLimit}
         leftIcon={<Plus size={18} />}
-        className="shrink-0"
+        className="w-full sm:w-auto shrink-0"
       >
-        <span className="hidden sm:inline">New Tunnel</span>
+        <span>New Tunnel</span>
       </Button>
     </div>
   );
diff --git a/apps/web/src/components/overview/request-activity-card.tsx b/apps/web/src/components/overview/request-activity-card.tsx
index 36db3978..fa53a588 100644
--- a/apps/web/src/components/overview/request-activity-card.tsx
+++ b/apps/web/src/components/overview/request-activity-card.tsx
@@ -49,13 +49,13 @@ export function RequestActivityCard({
     });
 
   return (
-    <div className="lg:col-span-2 bg-white/2 border border-white/5 rounded-2xl p-6 relative">
+    <div className="lg:col-span-2 bg-white/2 border border-white/5 rounded-2xl p-4 sm:p-6 relative">
       {isPlaceholderData && (
         <div className="absolute inset-0 bg-black/20 backdrop-blur-sm z-10 rounded-2xl flex items-center justify-center transition-all duration-200">
           <div className="w-6 h-6 border-2 border-white/20 border-t-white rounded-full animate-spin" />
         </div>
       )}
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
         <div>
           <h3 className="text-lg font-medium text-white flex items-center gap-2">
             <Zap size={18} className="text-accent" />
@@ -63,12 +63,12 @@ export function RequestActivityCard({
           </h3>
           <p className="text-sm text-gray-500">Traffic over time</p>
         </div>
-        <div className="flex bg-white/5 rounded-lg p-1">
+        <div className="flex bg-white/5 rounded-lg p-1 w-full sm:w-auto overflow-x-auto">
           {["1h", "24h", "7d", "30d"].map((range) => (
             <button
               key={range}
               onClick={() => setTimeRange(range)}
-              className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${
+              className={`flex-1 sm:flex-none px-3 py-1 text-xs font-medium rounded-md transition-all ${
                 timeRange === range
                   ? "bg-white/10 text-white shadow-sm"
                   : "text-gray-500 hover:text-gray-300"
@@ -81,16 +81,16 @@ export function RequestActivityCard({
       </div>
 
       {!chartData || chartData.length === 0 ? (
-        <div className="h-75 flex flex-col items-center justify-center text-gray-500 bg-white/5 rounded-xl border border-white/5 border-dashed">
+        <div className="h-64 sm:h-75 flex flex-col items-center justify-center text-gray-500 bg-white/5 rounded-xl border border-white/5 border-dashed">
           <Activity size={32} className="mb-2 opacity-50" />
           <p>No traffic data available yet</p>
         </div>
       ) : (
-        <div className="h-75 w-full">
+        <div className="h-64 sm:h-75 w-full">
           <ResponsiveContainer width="100%" height="100%">
             <AreaChart
               data={transformData()}
-              margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+              margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
             >
               <defs>
                 <linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
@@ -106,14 +106,15 @@ export function RequestActivityCard({
               <XAxis
                 dataKey="time"
                 stroke="#666"
-                fontSize={12}
+                fontSize={10}
                 tickLine={false}
                 axisLine={false}
                 interval="preserveStartEnd"
+                minTickGap={30}
               />
               <YAxis
                 stroke="#666"
-                fontSize={12}
+                fontSize={10}
                 tickLine={false}
                 axisLine={false}
                 tickFormatter={(value) => `${value}`}
diff --git a/apps/web/src/components/overview/stats-summary.tsx b/apps/web/src/components/overview/stats-summary.tsx
index 1d54908a..a6317ead 100644
--- a/apps/web/src/components/overview/stats-summary.tsx
+++ b/apps/web/src/components/overview/stats-summary.tsx
@@ -13,7 +13,7 @@ export type OverviewStats = {
 
 export function StatsSummary({ stats }: { stats?: OverviewStats | null }) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
       <OverviewCard
         title="Total Requests"
         value={formatNumber(stats?.totalRequests || 0)}
diff --git a/apps/web/src/routes/$orgSlug.tsx b/apps/web/src/routes/$orgSlug.tsx
index 4c707ce6..d6011a75 100644
--- a/apps/web/src/routes/$orgSlug.tsx
+++ b/apps/web/src/routes/$orgSlug.tsx
@@ -130,22 +130,22 @@ function DashboardLayout() {
   }
 
   return (
-    <div className="min-h-screen bg-[#070707] text-gray-300 font-sans selection:bg-accent/30">
+    <div className="min-h-screen bg-[#070707] text-gray-300 font-sans selection:bg-accent/30 flex flex-col">
       {/* Mobile header */}
       <MobileHeader />
 
-      <div className="flex h-[calc(100vh-52px)] md:h-screen overflow-hidden">
+      <div className="flex flex-1 overflow-hidden">
         {/* Desktop sidebar - hidden on mobile */}
         <div className="hidden md:flex h-full">
           <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
         </div>
 
-        <div className="flex-1 flex flex-col min-w-0 bg-[#101010] md:border md:border-white/5 md:m-2 md:rounded-2xl">
+        <div className="flex-1 flex flex-col min-w-0 bg-[#101010] md:border md:border-white/5 md:m-2 md:rounded-2xl overflow-hidden">
           {/* <header className="h-16 border-b border-white/5 flex items-center justify-between px-6 bg-black">
            
           </header> */}
 
-          <div className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
+          <div className="flex-1 overflow-y-auto p-4 md:p-6 pb-24 md:pb-6">
             <Outlet />
           </div>
         </div>
diff --git a/apps/web/src/routes/pricing.tsx b/apps/web/src/routes/pricing.tsx
index 310e8cee..c1e986ca 100644
--- a/apps/web/src/routes/pricing.tsx
+++ b/apps/web/src/routes/pricing.tsx
@@ -47,13 +47,13 @@ function PricingPage() {
     <div className="min-h-screen bg-black text-white selection:bg-accent/30 font-sans">
       <Navbar />
 
-      <div className="pt-32 pb-24 px-6">
+      <div className="pt-24 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6">
         <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-16">
-            <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+          <div className="text-center mb-12 sm:mb-16">
+            <h1 className="text-3xl sm:text-4xl md:text-6xl font-bold mb-4 sm:mb-6 tracking-tight">
               Simple, transparent pricing
             </h1>
-            <p className="text-xl text-white/60 max-w-2xl mx-auto mb-8">
+            <p className="text-lg sm:text-xl text-white/60 max-w-2xl mx-auto mb-8">
               Start for free, upgrade as you grow. No hidden fees.
             </p>
 
@@ -70,10 +70,10 @@ function PricingPage() {
                   {
                     value: "year" as const,
                     label: (
-                      <span className="flex items-center gap-2">
+                      <span className="flex items-center gap-1 sm:gap-2">
                         Yearly
-                        <span className="text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded-full">
-                          2 months free
+                        <span className="text-[10px] sm:text-xs bg-green-500/20 text-green-400 px-1.5 sm:px-2 py-0.5 rounded-full">
+                          -2 months
                         </span>
                       </span>
                     ),
@@ -87,7 +87,7 @@ function PricingPage() {
             </div>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
             {plans.map((plan) => {
               const f = plan.features as {
                 maxTunnels: number;
@@ -108,16 +108,16 @@ function PricingPage() {
               return (
                 <div
                   key={plan.id}
-                  className={`relative flex flex-col p-8 rounded-3xl border transition-all duration-300 ${
+                  className={`relative flex flex-col p-6 sm:p-8 rounded-3xl border transition-all duration-300 ${
                     plan.id === "beam"
-                      ? "bg-linear-to-br from-accent/10 via-white/5 to-purple-500/10 border-accent shadow-[0_0_60px_rgba(255,255,255,0.15)] ring-2 ring-accent/30 scale-[1.02]"
+                      ? "bg-linear-to-br from-accent/10 via-white/5 to-purple-500/10 border-accent shadow-[0_0_60px_rgba(255,255,255,0.15)] ring-2 ring-accent/30 lg:scale-[1.02]"
                       : "bg-[#0c0c0c] border-white/10 hover:border-white/20"
                   }`}
                 >
                   {plan.id === "beam" && (
                     <>
                       <div className="absolute inset-0 rounded-3xl bg-linear-to-br from-accent/5 via-transparent to-purple-500/5 pointer-events-none" />
-                      <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-5 py-1.5 bg-linear-to-r from-accent to-yellow-400 text-black text-xs font-bold rounded-full uppercase tracking-wider shadow-lg shadow-accent/30 flex items-center gap-1.5">
+                      <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 sm:px-5 py-1 sm:1.5 bg-linear-to-r from-accent to-yellow-400 text-black text-[10px] sm:text-xs font-bold rounded-full uppercase tracking-wider shadow-lg shadow-accent/30 flex items-center gap-1 sm:gap-1.5 whitespace-nowrap">
                         <span className="animate-pulse">✨</span>
                         Recommended
                         <span className="animate-pulse">✨</span>
@@ -125,31 +125,31 @@ function PricingPage() {
                     </>
                   )}
 
-                  <div className="mb-8 relative">
+                  <div className="mb-6 sm:mb-8 relative">
                     <h3
-                      className={`text-xl font-bold mb-2 ${plan.id === "beam" ? "text-accent" : ""}`}
+                      className={`text-lg sm:text-xl font-bold mb-2 ${plan.id === "beam" ? "text-accent" : ""}`}
                     >
                       {plan.name}
                     </h3>
                     <div className="flex items-baseline gap-1">
-                      <span className="text-4xl font-bold">
+                      <span className="text-3xl sm:text-4xl font-bold">
                         ${displayPriceUSD}
                       </span>
-                      <span className="text-white/40">{intervalLabel}</span>
+                      <span className="text-white/40 text-sm sm:text-base">{intervalLabel}</span>
                     </div>
                     {showNGN && displayPriceNGN > 0 && (
                       <div className="flex items-baseline gap-1 mt-1">
-                        <span className="text-lg text-white/60">
+                        <span className="text-base sm:text-lg text-white/60">
                           ₦{displayPriceNGN.toLocaleString()}
                         </span>
-                        <span className="text-white/40 text-sm">
+                        <span className="text-white/40 text-xs sm:text-sm">
                           {intervalLabel}
                         </span>
                       </div>
                     )}
                   </div>
 
-                  <div className="flex-1 space-y-4 mb-8">
+                  <div className="flex-1 space-y-3 sm:space-y-4 mb-6 sm:mb-8">
                     <FeatureItem
                       label={`${
                         f.maxTunnels === -1 ? "Unlimited" : f.maxTunnels
@@ -185,7 +185,7 @@ function PricingPage() {
 
                   <Link
                     to="/login"
-                    className={`w-full py-3 rounded-full font-bold text-center transition-all ${
+                    className={`w-full py-3 rounded-full font-bold text-center transition-all text-sm sm:text-base ${
                       plan.id === "beam"
                         ? "bg-white text-black hover:bg-gray-200"
                         : "bg-white/10 text-white hover:bg-white/20"
@@ -200,13 +200,13 @@ function PricingPage() {
         </div>
       </div>
 
-      <footer className="border-t border-white/10 py-12 bg-black">
-        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
+      <footer className="border-t border-white/10 py-10 sm:py-12 bg-black">
+        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8 md:gap-6">
           <div className="flex items-center gap-2">
             <img src="/logo.png" alt="OutRay Logo" className="w-6" />
             <span className="font-bold">OutRay</span>
           </div>
-          <div className="text-white/40 text-sm">
+          <div className="text-white/40 text-xs sm:text-sm text-center md:text-left">
             © {new Date().getFullYear()} OutRay Inc. All rights reserved.
           </div>
           <div className="flex gap-6 text-white/60">
@@ -234,14 +234,14 @@ function FeatureItem({
   included?: boolean;
 }) {
   return (
-    <div className="flex items-center gap-3 text-sm">
+    <div className="flex items-center gap-3 text-xs sm:text-sm">
       {included ? (
-        <div className="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center shrink-0">
-          <Check size={12} className="text-white" />
+        <div className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-white/10 flex items-center justify-center shrink-0">
+          <Check size={10} className="text-white sm:w-[12px] sm:h-[12px]" />
         </div>
       ) : (
-        <div className="w-5 h-5 rounded-full bg-white/5 flex items-center justify-center shrink-0">
-          <X size={12} className="text-white/20" />
+        <div className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-white/5 flex items-center justify-center shrink-0">
+          <X size={10} className="text-white/20 sm:w-[12px] sm:h-[12px]" />
         </div>
       )}
       <span className={included ? "text-white/80" : "text-white/40"}>
diff --git a/package-lock.json b/package-lock.json
index a74e5f4b..fe500c3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
     },
     "apps/cli": {
       "name": "outray",
-      "version": "0.1.8",
+      "version": "0.1.9",
       "license": "MIT",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
@@ -111,6 +111,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-icons": "^5.5.0",
+        "react-is": "^19.2.5",
         "recharts": "^3.6.0",
         "sonner": "^2.0.7",
         "tailwindcss": "^4.1.18",
@@ -219,7 +220,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^20.0.0 || >=22.0.0"
       }
@@ -270,7 +270,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -573,34 +572,16 @@
         "nanostores": "^1.0.1"
       }
     },
-    "node_modules/@better-auth/telemetry/node_modules/nanostores": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-1.1.0.tgz",
-      "integrity": "sha512-yJBmDJr18xy47dbNVlHcgdPrulSn1nhSE6Ns9vTG+Nx9VPT6iV1MD6aQFp/t52zpf82FhLLTXAXr30NuCnxvwA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^20.0.0 || >=22.0.0"
-      }
-    },
     "node_modules/@better-auth/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@better-auth/utils/-/utils-0.3.0.tgz",
       "integrity": "sha512-W+Adw6ZA6mgvnSnhOki270rwJ42t4XzSK6YWGF//BbVXL6SwCLWfyzBc1lN2m/4RM28KubdBKQ4X5VMoLRNPQw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@better-fetch/fetch": {
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/@better-fetch/fetch/-/fetch-1.1.18.tgz",
-      "integrity": "sha512-rEFOE1MYIsBmoMJtQbl32PGHHXuG2hDxvEd7rUHE0vCBoFQVSDqaVs9hkZEtHCxRoY+CljXKFCOuJ8uxqw1LcA==",
-      "peer": true
+      "integrity": "sha512-rEFOE1MYIsBmoMJtQbl32PGHHXuG2hDxvEd7rUHE0vCBoFQVSDqaVs9hkZEtHCxRoY+CljXKFCOuJ8uxqw1LcA=="
     },
     "node_modules/@braintree/sanitize-url": {
       "version": "7.1.1",
@@ -3763,7 +3744,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.5.0.tgz",
       "integrity": "sha512-FiUzfYW4wB1+PpmsE47UM+mCads7j2+giRBltfwH7SNhah95rqJs3ltEs9V3pP8rYdS0QlNne+9Aj8dS/SiaIA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/webxr": "*",
@@ -5453,7 +5433,7 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.16.0.tgz",
       "integrity": "sha512-RmhMd/wD+CF8Dfo+cVIy3RR5cl8CyfXQ0tGgW6XBL8L4LM/UTEbNXYRbLwU6w+CgrKBNbrQWt4FUtTfaU5jSYQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -5475,8 +5455,8 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -5485,9 +5465,8 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5512,7 +5491,6 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
       "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -5603,7 +5581,6 @@
       "integrity": "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.52.0",
         "@typescript-eslint/types": "8.52.0",
@@ -5891,7 +5868,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6144,7 +6120,6 @@
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/better-call/-/better-call-1.0.19.tgz",
       "integrity": "sha512-sI3GcA1SCVa3H+CDHl8W8qzhlrckwXOTKhqq3OOPXjgn5aTOMIqGY34zLY/pHA6tRRMjTUC3lz5Mi7EbDA24Kw==",
-      "peer": true,
       "dependencies": {
         "@better-auth/utils": "^0.3.0",
         "@better-fetch/fetch": "^1.1.4",
@@ -6280,7 +6255,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6794,7 +6768,6 @@
       "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.4.1.tgz",
       "integrity": "sha512-E7WKBcHVhAVrY6JYD5kteNqVq1GSZxqGrdSiwXR9at+XHi43HJoCQKXcCczR5LBnBquFZPsB3o7HklulKoBU5w==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "srvx": ">=0.7.1"
       },
@@ -6848,6 +6821,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cytoscape": {
@@ -6855,7 +6829,6 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
       "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -7256,7 +7229,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -7372,7 +7344,6 @@
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
       "integrity": "sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@electric-sql/pglite": "*",
         "@libsql/client": "*",
@@ -7675,7 +7646,6 @@
       "resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.45.1.tgz",
       "integrity": "sha512-Te0FOdKIistGNPMq2jscdqngBRfBpC8uMFVwqjf6gtTVJHIQ/dosgV/CLBU2N4ZJBsXL5savCba9b0YJskKdcA==",
       "license": "Apache-2.0",
-      "peer": true,
       "peerDependencies": {
         "@aws-sdk/client-rds-data": ">=3",
         "@cloudflare/workers-types": ">=4",
@@ -7965,7 +7935,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -8042,7 +8011,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8629,7 +8597,6 @@
       "resolved": "https://registry.npmjs.org/fumadocs-core/-/fumadocs-core-16.4.6.tgz",
       "integrity": "sha512-cPmKu7HmzzAOXk4TbAfJhVQ12C36nu0A8sDPi664X35lOAMr+vBtjY6yIYrc8szPEFrBcmkVRGLZyEkNDZWE/Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@formatjs/intl-localematcher": "^0.7.5",
         "@orama/orama": "^3.1.18",
@@ -9872,7 +9839,6 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
       "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -10141,7 +10107,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -10164,7 +10129,6 @@
       "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
       "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -10309,7 +10273,6 @@
       "resolved": "https://registry.npmjs.org/kysely/-/kysely-0.28.9.tgz",
       "integrity": "sha512-3BeXMoiOhpOwu62CiVpO6lxfq4eS6KMYfQdMsN/2kUCRNuF2YiEr7u0HLHaQU+O4Xu8YXE3bHVkwaQ85i72EuA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       }
@@ -10694,7 +10657,6 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -10704,7 +10666,6 @@
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.560.0.tgz",
       "integrity": "sha512-NwKoUA/aBShsdL8WE5lukV2F/tjHzQRlonQs7fkNGI1sCT0Ay4a9Ap3ST2clUUkcY+9eQ0pBe2hybTQd2fmyDA==",
       "license": "ISC",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -12362,8 +12323,7 @@
       "version": "2.0.0-alpha.3",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-2.0.0-alpha.3.tgz",
       "integrity": "sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/ohash": {
       "version": "2.0.11",
@@ -12684,7 +12644,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -12966,7 +12925,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13314,7 +13272,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13324,7 +13281,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -13342,11 +13298,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
-      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT",
-      "peer": true
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
+      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
+      "license": "MIT"
     },
     "node_modules/react-medium-image-zoom": {
       "version": "5.4.0",
@@ -13369,7 +13324,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -13663,8 +13617,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -14054,7 +14007,6 @@
       "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.4.2.tgz",
       "integrity": "sha512-N3HEHRCZYn3cQbsC4B5ldj9j+tHdf4JZoYPlcI4rRYu0Xy4qN8MQf1Z08EibzB0WpgRG5BGK08FTrmM66eSzKQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -14566,8 +14518,7 @@
       "version": "0.182.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
       "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -14660,7 +14611,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15401,7 +15351,6 @@
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -15960,7 +15909,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16355,7 +16303,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -16924,7 +16871,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17228,7 +17174,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
       "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }