diff --git a/libs/ui/src/lib/input/AmharicDatePicker.css b/libs/ui/src/lib/input/AmharicDatePicker.css
index cf982ab54..a9ac935bf 100644
--- a/libs/ui/src/lib/input/AmharicDatePicker.css
+++ b/libs/ui/src/lib/input/AmharicDatePicker.css
@@ -3,10 +3,93 @@
    no border/box affordance and a hardcoded blue chevron. */
 .amharic-daypicker {
   --rdp-accent-color: var(--mantine-primary-color-filled);
+  --rdp-day-height: 44px;
+  --rdp-day-width: 44px;
+  --rdp-day_button-height: 42px;
+  --rdp-day_button-width: 42px;
+  --rdp-weekday-padding: 0.5rem 0;
+  --rdp-nav-height: 2.75rem;
   --rdp-nav_button-width: 2.75rem;
   --rdp-nav_button-height: 2.75rem;
 }
 
+/* Backoffice loads Tailwind's preflight after the package stylesheet. That
+   reset can strip the day-picker table layout, leaving every weekday and day
+   stacked in a single column. Keep the calendar's structural styles local to
+   the component so it renders consistently in every app. */
+.amharic-daypicker .rdp-months {
+  position: relative;
+  display: flex;
+  max-width: fit-content;
+}
+
+.amharic-daypicker .rdp-month {
+  position: relative;
+}
+
+.amharic-daypicker .rdp-month_grid {
+  display: table;
+  border-collapse: collapse;
+}
+
+.amharic-daypicker .rdp-month_grid thead {
+  display: table-header-group;
+}
+
+.amharic-daypicker .rdp-month_grid tbody {
+  display: table-row-group;
+}
+
+.amharic-daypicker .rdp-month_grid tr {
+  display: table-row;
+}
+
+.amharic-daypicker .rdp-weekday,
+.amharic-daypicker .rdp-day {
+  display: table-cell;
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  text-align: center;
+}
+
+.amharic-daypicker .rdp-weekday {
+  padding: var(--rdp-weekday-padding);
+}
+
+.amharic-daypicker .rdp-day_button {
+  padding: 0;
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 100%;
+  background: none;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+}
+
+.amharic-daypicker .rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  height: var(--rdp-nav-height);
+}
+
+.amharic-daypicker .rdp-button_previous,
+.amharic-daypicker .rdp-button_next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+  padding: 0;
+  margin: 0;
+}
+
 .amharic-daypicker .rdp-dropdowns {
   gap: 0.375rem;
 }