diff --git a/src/food-market.web/src/components/DateField.tsx b/src/food-market.web/src/components/DateField.tsx
index 3f9de38..5c28e8c 100644
--- a/src/food-market.web/src/components/DateField.tsx
+++ b/src/food-market.web/src/components/DateField.tsx
@@ -138,8 +138,20 @@ export function DateField({ value, onChange, disabled, required, className, widt
       {open && pos && createPortal(
         <div
           ref={popRef}
-          style={{ position: 'fixed', top: pos.top, left: pos.left }}
-          className="z-[100] rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg p-2"
+          style={{
+            position: 'fixed', top: pos.top, left: pos.left,
+            // Тонкие настройки react-day-picker v9 через CSS-переменные —
+            // shadcn-style плотный календарь ~280–290px вместо ~700px.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ...({ '--rdp-day-height': '2rem', '--rdp-day-width': '2rem',
+                  '--rdp-weekday-padding': '0', '--rdp-nav-height': '1.75rem',
+                  '--rdp-day_button-height': '2rem', '--rdp-day_button-width': '2rem',
+                  '--rdp-day_button-border-radius': '0.375rem',
+                  '--rdp-accent-color': 'var(--color-brand)',
+                  '--rdp-accent-background-color': 'var(--color-brand)',
+                  '--rdp-selected-border': 'none' } as Record<string, string>),
+          }}
+          className="z-[100] rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md p-3 text-sm"
         >
           <DayPicker
             mode="single"
@@ -156,8 +168,24 @@ export function DateField({ value, onChange, disabled, required, className, widt
               setOpen(false)
             }}
             classNames={{
-              caption_label: 'capitalize',
-              weekday: 'capitalize',
+              months: 'flex flex-col gap-2',
+              month: 'space-y-2',
+              month_caption: 'flex justify-center pt-1 relative items-center h-7',
+              caption_label: 'text-sm font-medium capitalize',
+              nav: 'absolute inset-x-0 top-0 flex items-center justify-between px-1 h-7',
+              button_previous: 'h-6 w-6 inline-flex items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800',
+              button_next: 'h-6 w-6 inline-flex items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800',
+              chevron: 'w-4 h-4 fill-current',
+              weekdays: 'flex',
+              weekday: 'w-8 text-center text-[0.75rem] font-normal text-slate-500 capitalize',
+              weeks: 'mt-1',
+              week: 'flex w-full mt-1',
+              day: 'w-8 h-8 p-0 text-center align-middle',
+              day_button: 'w-8 h-8 inline-flex items-center justify-center rounded-md text-sm font-normal hover:bg-slate-100 dark:hover:bg-slate-800',
+              today: '[&_button]:bg-slate-100 dark:[&_button]:bg-slate-800 [&_button]:font-semibold',
+              selected: '[&_button]:bg-[var(--color-brand)] [&_button]:text-white [&_button]:hover:bg-[var(--color-brand)]',
+              outside: 'text-slate-300 dark:text-slate-600 opacity-60',
+              disabled: 'text-slate-300 opacity-50',
             }}
           />
         </div>,