diff --git a/frontend/src/components/birth-date-picker.tsx b/frontend/src/components/birth-date-picker.tsx
index 209f3e7a..42f1f9c3 100644
--- a/frontend/src/components/birth-date-picker.tsx
+++ b/frontend/src/components/birth-date-picker.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { format } from "date-fns";
-import { zhCN as dateFnsZhCN } from "date-fns/locale";
+import { zhCN } from "date-fns/locale";
 import { CalendarIcon } from "lucide-react";
 import { useId, useState } from "react";
-import { zhCN } from "react-day-picker/locale";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -17,8 +16,6 @@ type BirthDatePickerProps = {
   readonly onChange: (value: string) => void;
 };
 
-const emptyDefaultMonth = new Date(1997, 0, 1);
-
 export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerProps) {
   const labelId = useId();
   const valueId = useId();
@@ -26,6 +23,7 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
   const selected = parseBirthDate(value);
   const today = new Date();
   today.setHours(0, 0, 0, 0);
+  const defaultMonth = new Date(1997, today.getMonth(), 1);
 
   return (
     <div className="grid gap-2">
@@ -45,18 +43,19 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
           <span id={valueId}>
             {selected === undefined
               ? "选择出生日期"
-              : format(selected, "PPP", { locale: dateFnsZhCN })}
+              : format(selected, "PPP", { locale: zhCN })}
           </span>
         </PopoverTrigger>
-        <PopoverContent align="start" className="w-auto p-0" aria-label="选择出生日期">
+        <PopoverContent align="start" className="w-auto p-0">
           <Calendar
             key={value || "empty"}
             mode="single"
             className="[--cell-size:2.75rem] [&_button[data-selected-single=true]]:text-primary-foreground!"
             locale={zhCN}
             selected={selected}
-            defaultMonth={selected ?? emptyDefaultMonth}
+            defaultMonth={selected ?? defaultMonth}
             captionLayout="dropdown"
+            navLayout="after"
             startMonth={new Date(1900, 0)}
             endMonth={today}
             reverseYears
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
index 2d69b269..f0b0a3de 100644
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -51,17 +51,17 @@ function Calendar({
         ),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          "pointer-events-none absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          "pointer-events-auto size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          "pointer-events-auto size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
diff --git a/frontend/tests/birth-date-picker-contract.test.ts b/frontend/tests/birth-date-picker-contract.test.ts
index 91d92bd2..f4db70f8 100644
--- a/frontend/tests/birth-date-picker-contract.test.ts
+++ b/frontend/tests/birth-date-picker-contract.test.ts
@@ -5,6 +5,7 @@ import test from "node:test"
 const packageJson = readFileSync(new URL("../package.json", import.meta.url), "utf8")
 const intake = readFileSync(new URL("../src/components/birth-time-intake.tsx", import.meta.url), "utf8")
 const pickerUrl = new URL("../src/components/birth-date-picker.tsx", import.meta.url)
+const calendarUrl = new URL("../src/components/ui/calendar.tsx", import.meta.url)
 
 test("provides the shadcn calendar and popover primitives", () => {
   assert.equal(existsSync(new URL("../src/components/ui/calendar.tsx", import.meta.url)), true)
@@ -21,25 +22,15 @@ test("replaces the native birth date input with the shadcn date picker", () => {
   assert.match(picker, /render=\{<Button/)
   assert.match(picker, /<Calendar/)
   assert.match(picker, /captionLayout="dropdown"/)
+  assert.match(picker, /const defaultMonth = new Date\(1997, today\.getMonth\(\), 1\)/)
+  assert.match(picker, /defaultMonth=\{selected \?\? defaultMonth\}/)
   assert.match(picker, /startMonth=\{new Date\(1900, 0\)\}/)
   assert.match(picker, /reverseYears/)
 })
 
-test("keeps the shadcn date-of-birth dropdown navigation order", () => {
-  // Given the shadcn Date of Birth composition
-  const picker = readFileSync(pickerUrl, "utf8")
+test("keeps the month and year dropdowns clickable above calendar navigation", () => {
+  const calendar = readFileSync(calendarUrl, "utf8")
 
-  // When dropdown captions are enabled
-  // Then the picker must not move the full-width nav after the caption selects
-  assert.doesNotMatch(picker, /navLayout="after"/)
-})
-
-test("opens an empty birth date picker at 1997 instead of the current year", () => {
-  // Given: a new user has not selected a birth date yet.
-  const picker = readFileSync(pickerUrl, "utf8")
-
-  // When: the popover chooses its initial visible month.
-  // Then: it starts in 1997 so common birth years are nearby.
-  assert.match(picker, /const emptyDefaultMonth = new Date\(1997, 0, 1\)/)
-  assert.match(picker, /defaultMonth=\{selected \?\? emptyDefaultMonth\}/)
+  assert.match(calendar, /pointer-events-none absolute inset-x-0 top-0/)
+  assert.match(calendar, /pointer-events-auto size-\(--cell-size\)/)
 })