diff --git a/artifacts/teaboy-os/src/components/ui/calendar.tsx b/artifacts/teaboy-os/src/components/ui/calendar.tsx
index ba85e81e..1453e55f 100644
--- a/artifacts/teaboy-os/src/components/ui/calendar.tsx
+++ b/artifacts/teaboy-os/src/components/ui/calendar.tsx
@@ -10,6 +10,12 @@ import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
+import i18n from "@/i18n"
+
+function activeLocaleLatn(): string {
+  const lang = i18n.language === "ar" ? "ar" : "en-US"
+  return `${lang}-u-nu-latn`
+}
 
 function Calendar({
   className,
@@ -37,7 +43,7 @@ function Calendar({
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) =>
-          new Intl.DateTimeFormat("en-US-u-nu-latn", { month: "short", numberingSystem: "latn" }).format(date),
+          new Intl.DateTimeFormat(activeLocaleLatn(), { month: "short", numberingSystem: "latn" }).format(date),
         ...formatters,
       }}
       classNames={{
@@ -190,7 +196,7 @@ function CalendarDayButton({
       ref={ref}
       variant="ghost"
       size="icon"
-      data-day={new Intl.DateTimeFormat("en-US-u-nu-latn", { numberingSystem: "latn" }).format(day.date)}
+      data-day={new Intl.DateTimeFormat(activeLocaleLatn(), { numberingSystem: "latn" }).format(day.date)}
       data-selected-single={
         modifiers.selected &&
         !modifiers.range_start &&