diff --git a/index.html b/index.html
index 1506caa..3ceea3f 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,6 @@
 <!doctype html>
-<html lang="en">
-<head>
+<script type="module" src="/src/main.js"></script>
 <meta charset="utf-8">
 <title>Calendar</title>
-<meta name="viewport" content="width=device-width,initial-scale=1">
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/src/main.js"></script>
-</body>
-</html>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<div id="app"></div>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5836a2c..4c0fe18 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 import CalendarView from './components/CalendarView.vue'
 import EventDialog from './components/EventDialog.vue'
 import { useCalendarStore } from './stores/CalendarStore'
+import { lang } from './utils/locale'
 
 const eventDialog = ref(null)
 const calendarStore = useCalendarStore()
@@ -35,6 +36,8 @@ function handleGlobalKey(e) {
 onMounted(() => {
   calendarStore.initializeHolidaysFromConfig()
   document.addEventListener('keydown', handleGlobalKey, { passive: false })
+  // Set document language via shared util
+  if (lang) document.documentElement.setAttribute('lang', lang)
 })
 
 onBeforeUnmount(() => {
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 387f5d7..aa57e68 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -13,6 +13,7 @@ import { daysInclusive, addDaysStr, MIN_YEAR, MAX_YEAR } from '@/utils/date'
 import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date'
 import { addDays, differenceInWeeks } from 'date-fns'
 import { createVirtualWeekManager } from '@/plugins/virtualWeeks'
+import { rtl } from '@/utils/locale'
 
 const calendarStore = useCalendarStore()
 const emit = defineEmits(['create-event', 'edit-event'])
@@ -433,7 +434,7 @@ window.addEventListener('resize', () => {
 </script>
 
 <template>
-  <div class="calendar-view-root">
+  <div class="calendar-view-root" :dir="rtl && 'rtl'">
     <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
     <div class="wrap">
       <HeaderControls @go-to-today="goToToday" />
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 2b15949..2383f7e 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -4,6 +4,7 @@
       v-for="span in eventSpans"
       :key="span.id"
       class="event-span"
+      dir="auto"
       :class="[`event-color-${span.colorId}`]"
       :data-id="span.id"
       :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
diff --git a/src/utils/locale.js b/src/utils/locale.js
new file mode 100644
index 0000000..1a6ffdf
--- /dev/null
+++ b/src/utils/locale.js
@@ -0,0 +1,4 @@
+export const lang = navigator.language
+const rtlLangs = new Set(['ar', 'fa', 'he', 'iw', 'ur', 'ps', 'sd', 'ug', 'dv', 'ku', 'yi'])
+const primary = lang.toLowerCase().split(/[-_]/)[0]
+export const rtl = rtlLangs.has(primary)
