diff --git a/app/kids/page.tsx b/app/kids/page.tsx
new file mode 100644
index 0000000..32b5b08
--- /dev/null
+++ b/app/kids/page.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import KidsBrowser from "@/app/components/KidsBrowser";
+import Sidebar from "@/app/components/Sidebar";
+import { kids } from "@/app/data/kids";
+
+export default function KidsPage() {
+  return (
+    <div className="flex min-h-screen bg-[#F6ECDF]">
+      <Sidebar activeHref="/kids" />
+      <main className="h-screen min-w-0 flex-1 overflow-y-auto">
+        <div className="mx-auto w-full max-w-[880px] px-10 pb-20 pt-[34px]">
+          {/* Encabezado */}
+          <div className="mb-[22px] flex items-end justify-between gap-4">
+            <div>
+              <div className="mb-1 text-[12.5px] font-extrabold tracking-[.8px] text-[#D9583C]">GESTIÓN</div>
+              <h1 className="font-display text-[30px] font-semibold text-[#3F362E]">Niños</h1>
+            </div>
+            <Link
+              href="/agregar-nino"
+              className="flex items-center gap-2 rounded-[14px] bg-[linear-gradient(180deg,#F4977E,#EE8164)] px-[18px] py-[11px] text-[14.5px] font-extrabold text-white shadow-[0_8px_18px_-8px_rgba(238,129,100,.7)]"
+            >
+              <svg
+                width="17"
+                height="17"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                strokeWidth="2.4"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+              Agregar niño
+            </Link>
+          </div>
+
+          <KidsBrowser kids={kids} />
+        </div>
+      </main>
+    </div>
+  );
+}