diff --git a/apps/commons-app/app/page.tsx b/apps/commons-app/app/page.tsx
index 29116869..5b2be14b 100644
--- a/apps/commons-app/app/page.tsx
+++ b/apps/commons-app/app/page.tsx
@@ -74,7 +74,7 @@ export default function Home() {
           </header>
 
           <div className="flex min-h-0 flex-1 flex-col items-center justify-center overflow-hidden px-5 py-4 sm:px-8 sm:py-6">
-            <h1 className="shrink-0 text-center text-[1.7rem] font-medium leading-[1.1] tracking-[-0.04em] text-stone-950 sm:text-[2rem]">
+            <h1 className="shrink-0 text-center text-[1.5rem] font-medium leading-[1.1] tracking-[-0.04em] text-stone-950 sm:text-[1.8rem]">
               One home for all your{" "}
               <span className="inline-block rounded-md border border-teal-300/70 bg-teal-200 px-[0.18em] leading-[1.15] text-stone-950">
                 agents
@@ -82,13 +82,13 @@ export default function Home() {
               .
             </h1>
 
-            <div className="mt-5 w-full max-w-[52rem] shrink-0 sm:mt-6">
+            <div className="mt-5 w-full max-w-[46rem] shrink-0 sm:mt-6">
               <FeatureCarousel />
             </div>
 
             {/* The composer closes the page: the last thing a visitor sees is
                 the box they would type into once they are inside. */}
-            <div className="mt-6 w-full max-w-[52rem] shrink-0 sm:mt-7">
+            <div className="mt-6 w-full max-w-[46rem] shrink-0 sm:mt-7">
               <HeroComposer />
             </div>
           </div>
diff --git a/apps/commons-app/components/landing/developer-visual.tsx b/apps/commons-app/components/landing/developer-visual.tsx
index fe8aee34..edb88386 100644
--- a/apps/commons-app/components/landing/developer-visual.tsx
+++ b/apps/commons-app/components/landing/developer-visual.tsx
@@ -20,7 +20,7 @@ export function DeveloperVisual() {
         </p>
         <p className="mt-4 text-zinc-200">
           <span className="text-emerald-400">❯</span> agc agents create --name
-          Scout --model gpt-5.4
+          Scout --model gpt-5.5
         </p>
         <div className="mt-2 border-l border-zinc-700 pl-4">
           <p className="flex items-center gap-2 font-sans text-emerald-400">
@@ -30,7 +30,7 @@ export function DeveloperVisual() {
             <span className="text-zinc-600">Name</span>
             <span className="text-zinc-300">Scout</span>
             <span className="text-zinc-600">Model</span>
-            <span className="text-zinc-300">gpt-5.4</span>
+            <span className="text-zinc-300">gpt-5.5</span>
           </p>
         </div>
         <p className="mt-4 text-zinc-200">
diff --git a/apps/commons-app/components/landing/feature-carousel.tsx b/apps/commons-app/components/landing/feature-carousel.tsx
index cf77d6ac..a19d7c08 100644
--- a/apps/commons-app/components/landing/feature-carousel.tsx
+++ b/apps/commons-app/components/landing/feature-carousel.tsx
@@ -214,7 +214,7 @@ function StartButton() {
   return (
     <Button variant="outline" size="sm" asChild className="w-fit">
       <Link href={START_URL}>
-        Get started free
+        Get started
         <ArrowRight />
       </Link>
     </Button>
@@ -272,13 +272,13 @@ export function FeatureCarousel() {
         if (event.key === "ArrowLeft") go(index - 1);
       }}
     >
-      <div className="relative h-[220px] w-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-card sm:h-[300px]">
+      <div className="relative h-[210px] w-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-card sm:h-[276px]">
         {SLIDES.map((slide, i) => (
           <div
             key={slide.id}
             aria-hidden={i !== index}
             className={cn(
-              "absolute inset-0 grid grid-cols-1 transition-opacity duration-700 ease-out sm:grid-cols-[minmax(0,1.22fr)_minmax(0,0.78fr)]",
+              "absolute inset-0 grid grid-cols-1 transition-opacity duration-700 ease-out sm:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]",
               i === index ? "opacity-100" : "pointer-events-none opacity-0",
             )}
           >
@@ -293,17 +293,17 @@ export function FeatureCarousel() {
                 </ScaledStage>
               )}
             </div>
-            <div className="hidden min-w-0 flex-col justify-center px-6 sm:flex">
+            <div className="hidden min-w-0 flex-col justify-center px-5 sm:flex">
               {/* Fixed height, so the button lands on the same line no matter
                   how long the headline and description run. */}
-              <div className="h-[136px]">
+              <div className="h-[148px]">
                 <p className="text-[10px] font-medium uppercase tracking-[0.16em] text-stone-400">
                   {slide.eyebrow}
                 </p>
-                <h2 className="mt-2 text-[1.15rem] font-medium leading-[1.2] tracking-[-0.025em] text-stone-950">
+                <h2 className="mt-2 text-[1.05rem] font-medium leading-[1.25] tracking-[-0.025em] text-stone-950">
                   {slide.title}
                 </h2>
-                <p className="mt-2 text-[13px] leading-5 text-stone-500">
+                <p className="mt-1.5 text-[12.5px] leading-[1.45] text-stone-500">
                   {slide.body}
                 </p>
               </div>
diff --git a/apps/commons-app/components/landing/hero-composer.tsx b/apps/commons-app/components/landing/hero-composer.tsx
index 663f64e7..93a37b4b 100644
--- a/apps/commons-app/components/landing/hero-composer.tsx
+++ b/apps/commons-app/components/landing/hero-composer.tsx
@@ -17,6 +17,9 @@ const PROMPTS = [
  * The hero's centerpiece: a replica of the in-app composer that types out
  * example prompts on a loop. Any interaction routes to sign-in and drops the
  * visitor straight into the studio.
+ *
+ * Sizing and chrome track ChatInputBox exactly, so the box a visitor sees here
+ * is the box they get once they are inside.
  */
 export function HeroComposer() {
   const router = useRouter();
@@ -65,26 +68,26 @@ export function HeroComposer() {
       type="button"
       onClick={start}
       aria-label="Start a session on Agent Commons"
-      className="group block w-full cursor-text rounded-[1.35rem] border border-stone-300 bg-white text-left shadow-composer transition-all hover:-translate-y-0.5 hover:border-stone-400 hover:shadow-floating"
+      className="group relative block w-full cursor-text rounded-2xl border border-stone-300 bg-white text-left shadow-composer transition-colors hover:border-stone-400"
     >
-      <div className="min-h-[5rem] px-5 pt-4 text-[15px] leading-6 text-stone-400 sm:text-base">
+      <div className="h-16 p-3 text-sm text-muted-foreground/60">
         {text}
-        <span className="ml-px inline-block h-[1.15em] w-[2px] translate-y-[3px] animate-caret-blink rounded-full bg-stone-400" />
+        <span className="ml-px inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-caret-blink rounded-full bg-stone-400" />
       </div>
-      <div className="flex items-center justify-between px-4 pb-4 pt-1">
-        <div className="flex items-center gap-1.5">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-stone-200 text-stone-500">
+      <div className="flex items-center justify-between px-2 pb-2">
+        <div className="flex items-center gap-1">
+          <span className="rounded-lg p-1.5 text-muted-foreground">
             <Plus className="h-4 w-4" />
           </span>
-          <span className="flex h-8 w-8 items-center justify-center rounded-full text-stone-500">
+          <span className="rounded-lg p-1.5 text-muted-foreground">
             <Monitor className="h-4 w-4" />
           </span>
-          <span className="flex h-8 items-center gap-1.5 rounded-full px-2 text-xs text-stone-500">
-            <Sparkles className="h-3.5 w-3.5" />
+          <span className="flex items-center gap-1.5 rounded-lg p-1.5 text-xs text-muted-foreground">
+            <Sparkles className="h-4 w-4" />
             Auto
           </span>
         </div>
-        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-stone-900 text-white transition-transform group-hover:scale-105">
+        <span className="rounded-lg bg-foreground p-1.5 text-background transition-opacity group-hover:opacity-80">
           <ArrowUp className="h-4 w-4" />
         </span>
       </div>
diff --git a/apps/commons-app/components/landing/models-visual.tsx b/apps/commons-app/components/landing/models-visual.tsx
index 82bcc6fa..cdd1f87c 100644
--- a/apps/commons-app/components/landing/models-visual.tsx
+++ b/apps/commons-app/components/landing/models-visual.tsx
@@ -2,15 +2,14 @@ import { Check } from "lucide-react";
 import { BrandLogo } from "@/components/landing/brand-logo";
 
 /**
- * The model picker exactly as an agent's settings present it, the clearest
- * way to say "swap the model, keep the agent". Model ids are the platform's
- * own provider defaults.
+ * The model picker exactly as an agent's settings present it, the clearest way
+ * to say "swap the model, keep the agent". One current flagship per provider.
  */
 const MODELS = [
-  { logo: "openai-icon", id: "gpt-5.4-mini", provider: "OpenAI" },
-  { logo: "claude-icon", id: "claude-sonnet-4-6", provider: "Anthropic" },
-  { logo: "google-gemini", id: "gemini-2.0-flash", provider: "Google" },
-  { logo: "mistral-ai-icon", id: "mistral-large-latest", provider: "Mistral" },
+  { logo: "openai-icon", name: "GPT-5.5", provider: "OpenAI" },
+  { logo: "claude-icon", name: "Claude Opus 5", provider: "Anthropic" },
+  { logo: "google-gemini", name: "Gemini 3 Pro", provider: "Google" },
+  { logo: "mistral-ai-icon", name: "Mistral Large", provider: "Mistral" },
 ];
 const SELECTED = 1;
 
@@ -23,7 +22,7 @@ export function ModelsVisual() {
       <div className="divide-y divide-stone-100">
         {MODELS.map((model, i) => (
           <div
-            key={model.id}
+            key={model.name}
             className={`flex items-center gap-2.5 px-4 py-2.5 ${
               i === SELECTED ? "bg-stone-50" : ""
             }`}
@@ -32,8 +31,8 @@ export function ModelsVisual() {
               <BrandLogo name={model.logo} size={16} maxWidth={28} />
             </span>
             <span className="min-w-0 flex-1">
-              <span className="block truncate font-mono text-[11px] leading-4 text-stone-800">
-                {model.id}
+              <span className="block truncate text-[12px] font-medium leading-4 text-stone-800">
+                {model.name}
               </span>
               <span className="block text-[10px] leading-4 text-stone-400">
                 {model.provider}