diff --git a/src/routes/invoices.new.tsx b/src/routes/invoices.new.tsx
index 9fc22b9..fd4f6e2 100644
--- a/src/routes/invoices.new.tsx
+++ b/src/routes/invoices.new.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, useNavigate, Outlet, useMatches } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
 import { ProtectedLayout } from "@/components/protected-layout";
 import { PageContainer, PageHeader } from "@/components/app-shell";
@@ -11,12 +11,20 @@ import { Search, ArrowLeft } from "lucide-react";
 import { formatCurrency } from "@/lib/format";
 
 export const Route = createFileRoute("/invoices/new")({
-  component: () => (
+  component: NewInvoiceLayout,
+});
+
+function NewInvoiceLayout() {
+  // If a child route (e.g. /invoices/new/$clientId) is matched, render only it.
+  const matches = useMatches();
+  const hasChild = matches.some((m) => m.routeId !== "/invoices/new" && m.routeId.startsWith("/invoices/new/"));
+  if (hasChild) return <Outlet />;
+  return (
     <ProtectedLayout>
       <NewInvoicePickClient />
     </ProtectedLayout>
-  ),
-});
+  );
+}
 
 interface ClientLite {
   id: string;