diff --git a/enferno/admin/templates/admin/actor-fields.html b/enferno/admin/templates/admin/actor-fields.html
index 8647cf333..5b1e69aac 100644
--- a/enferno/admin/templates/admin/actor-fields.html
+++ b/enferno/admin/templates/admin/actor-fields.html
@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped
diff --git a/enferno/admin/templates/admin/actors.html b/enferno/admin/templates/admin/actors.html
index f62db0cad..31bc6cf3c 100644
--- a/enferno/admin/templates/admin/actors.html
+++ b/enferno/admin/templates/admin/actors.html
@@ -40,8 +40,8 @@
                             v-bind="props"
                             v-if="showMapVisualize"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute"
-                            style="right: 30px; bottom: 150px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute"
+                            style="inset-inline-end: 30px; bottom: 150px; z-index: 1000;"
                     ></v-btn>
                 </template>
             </v-tooltip>
@@ -55,8 +55,8 @@
                             v-if="showVisualize"
                             :loading="visualizeLoading"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute "
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute "
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                             icon="mdi-graph"
                     >
 
diff --git a/enferno/admin/templates/admin/bulletin-fields.html b/enferno/admin/templates/admin/bulletin-fields.html
index a047aa5ec..79320955e 100644
--- a/enferno/admin/templates/admin/bulletin-fields.html
+++ b/enferno/admin/templates/admin/bulletin-fields.html
@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped
diff --git a/enferno/admin/templates/admin/bulletins.html b/enferno/admin/templates/admin/bulletins.html
index 133d0c51d..93c950a68 100644
--- a/enferno/admin/templates/admin/bulletins.html
+++ b/enferno/admin/templates/admin/bulletins.html
@@ -32,8 +32,8 @@
                             v-if="showVisualize"
                             :loading="visualizeLoading"
                             variant="elevated"
-                            class="mb-5 mr-5 position-absolute"
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute"
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                     ></v-btn>
                 </template>
             </v-tooltip>
@@ -108,11 +108,11 @@
                                             @click="webImportDlg = true"
                                             color="primary"
                                             variant="elevated"
+                                            prepend-icon="mdi-web"
                                             class="ma-2"
                                     >
-                                        <v-icon left>mdi-web</v-icon>
-                                            {{ _('Import from Web') }}
-                                        </v-btn>
+                                        {{ _('Import from Web') }}
+                                    </v-btn>
                                     {% endif %}
                                 {% endif %}
                                 {% include'admin/partials/bulletin_dialog.html' %}
@@ -489,7 +489,7 @@
                         'content-props': {
                             style: { width: '60%' },
                         },
-                        'content-class': 'absolute left-0',
+                        'content-class': 'absolute inset-inline-start-0',
                         fullscreen: true,
                         persistent: true,
                         'no-click-animation': true,
@@ -500,7 +500,7 @@
                         'content-props': {
                             style: { width: '60%', contain: 'none' },
                         },
-                        'content-class': 'absolute right-0 left-auto',
+                        'content-class': 'absolute inset-inline-end-0',
                         fullscreen: true,
                         persistent: true,
                         'no-click-animation': true,
diff --git a/enferno/admin/templates/admin/incident-fields.html b/enferno/admin/templates/admin/incident-fields.html
index 3743574ed..cbe3bbf00 100644
--- a/enferno/admin/templates/admin/incident-fields.html
+++ b/enferno/admin/templates/admin/incident-fields.html
@@ -20,7 +20,7 @@
 <!-- Revision history sidebar -->
 <v-navigation-drawer
   v-model="formBuilder.showRevisions"
-  location="right"
+  location="end"
   temporary
   width="630"
   clipped
diff --git a/enferno/admin/templates/admin/incidents.html b/enferno/admin/templates/admin/incidents.html
index 614c3c897..ee9bbd886 100644
--- a/enferno/admin/templates/admin/incidents.html
+++ b/enferno/admin/templates/admin/incidents.html
@@ -21,8 +21,8 @@
                             @click.stop="visualizeResults"
                             v-if="showVisualize"
                             :loading="visualizeLoading"
-                            class="mb-5 mr-5 position-absolute "
-                            style="right: 30px; bottom: 90px; z-index: 1000;"
+                            class="mb-5 me-5 position-absolute "
+                            style="inset-inline-end: 30px; bottom: 90px; z-index: 1000;"
                             icon="mdi-graph"
                     >
 
diff --git a/enferno/admin/templates/admin/labels.html b/enferno/admin/templates/admin/labels.html
index 567559fa8..ef98a7e80 100644
--- a/enferno/admin/templates/admin/labels.html
+++ b/enferno/admin/templates/admin/labels.html
@@ -78,7 +78,7 @@
                                         </template>
 
                                         <template v-slot:item.action="{ item }">
-                                            <v-btn icon="mdi-pencil" density="compact" class="mr-2" @click="editItem(item)"></v-btn>
+                                            <v-btn icon="mdi-pencil" density="compact" class="me-2" @click="editItem(item)"></v-btn>
                                             <v-btn icon="mdi-delete-sweep" density="compact" @click="deleteItem(item)"></v-btn>
                                         </template>
 
@@ -100,12 +100,14 @@
                                                 <v-icon size="small">${ item.for_bulletin || item.for_actor || item.for_incident || item.for_offline ? 'mdi-label' : 'mdi-folder-outline' }</v-icon>
                                             </template>
                                             <template v-slot:append="{ item }">
-                                                <v-chip v-if="item.for_bulletin" size="default" class="mr-2">&nbsp;B&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_actor" size="default" class="mr-2">&nbsp;A&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_incident" size="default" class="mr-2">&nbsp;I&nbsp;</v-chip>
-                                                <v-chip v-if="item.for_offline" size="default" class="mr-2">&nbsp;O&nbsp;</v-chip>
-                                                <v-icon class="ml-4" @click="editItem(item)">mdi-pencil</v-icon>
-                                                <v-icon class="ml-4 mr-10" @click="deleteItem(item)">mdi-delete-sweep</v-icon>
+                                                <div class="d-flex align-center ga-2">
+                                                    <v-chip v-if="item.for_bulletin" size="default">B</v-chip>
+                                                    <v-chip v-if="item.for_actor" size="default">A</v-chip>
+                                                    <v-chip v-if="item.for_incident" size="default">I</v-chip>
+                                                    <v-chip v-if="item.for_offline" size="default">O</v-chip>
+                                                    <v-icon class="ms-2" @click="editItem(item)">mdi-pencil</v-icon>
+                                                    <v-icon class="me-10" @click="deleteItem(item)">mdi-delete-sweep</v-icon>
+                                                </div>
                                             </template>
                                         </v-treeview>
                                         <div v-else-if="treeLoading" class="text-center pa-4">
diff --git a/enferno/admin/templates/admin/partials/actor_drawer.html b/enferno/admin/templates/admin/partials/actor_drawer.html
index 15a8b8d86..a8dc6e30c 100644
--- a/enferno/admin/templates/admin/partials/actor_drawer.html
+++ b/enferno/admin/templates/admin/partials/actor_drawer.html
@@ -2,7 +2,7 @@
       v-model="actorDrawer"
       absolute
       floating
-      location="right"
+      location="end"
       temporary
       :width="actorDrawerSettings?.width ?? 520"
       app
@@ -18,4 +18,4 @@
       <actor-card v-if="actorDrawer && actor" :close-icon="actorDrawerSettings?.closeIcon" :hide-map="actorDrawerSettings?.hideMap" :close-position="actorDrawerSettings?.closePosition" :show-edit="true" :close="true" @edit="editItem" :active="actorDrawer" :log="true" :diff="true" :key="actor.id" @close="closeActorDrawer()" :actor="actor"></actor-card>
       <preview-card ref="prev" :item="pitem" v-model="preview"></preview-card>
       <visualization ref="viz" @error="showSnack($event)"></visualization>
-    </v-navigation-drawer>  
\ No newline at end of file
+    </v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/partials/bulk_actor_drawer.html b/enferno/admin/templates/admin/partials/bulk_actor_drawer.html
index 5a9b439c0..c7080a636 100644
--- a/enferno/admin/templates/admin/partials/bulk_actor_drawer.html
+++ b/enferno/admin/templates/admin/partials/bulk_actor_drawer.html
@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkActorDrawer"
         clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 >
diff --git a/enferno/admin/templates/admin/partials/bulk_bulletin_drawer.html b/enferno/admin/templates/admin/partials/bulk_bulletin_drawer.html
index da1ee8550..167e5ee99 100644
--- a/enferno/admin/templates/admin/partials/bulk_bulletin_drawer.html
+++ b/enferno/admin/templates/admin/partials/bulk_bulletin_drawer.html
@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkBulletinDrawer"
         clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 
diff --git a/enferno/admin/templates/admin/partials/bulk_incident_drawer.html b/enferno/admin/templates/admin/partials/bulk_incident_drawer.html
index 0f67be12a..9ddc1fa93 100644
--- a/enferno/admin/templates/admin/partials/bulk_incident_drawer.html
+++ b/enferno/admin/templates/admin/partials/bulk_incident_drawer.html
@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="bulkIncidentDrawer"
        clipped
-        location="right"
+        location="end"
         temporary
         width="440"
 >
diff --git a/enferno/admin/templates/admin/partials/bulletin_drawer.html b/enferno/admin/templates/admin/partials/bulletin_drawer.html
index eb821108a..aacd8c414 100644
--- a/enferno/admin/templates/admin/partials/bulletin_drawer.html
+++ b/enferno/admin/templates/admin/partials/bulletin_drawer.html
@@ -2,7 +2,7 @@
         v-model="bulletinDrawer"
         clipped
         fixed
-        location="right"
+        location="end"
         temporary
         width="520"
         app
@@ -24,4 +24,4 @@
                    :bulletin="bulletin"></bulletin-card>
     <preview-card ref="prev" :item="pitem" v-model="preview" :dialog-props="dialog ? rightDialogProps : null"></preview-card>
     <visualization ref="viz" @error="showSnack($event)"></visualization>
-</v-navigation-drawer>
\ No newline at end of file
+</v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/partials/export_drawer.html b/enferno/admin/templates/admin/partials/export_drawer.html
index 93d373c9d..1d605b0aa 100644
--- a/enferno/admin/templates/admin/partials/export_drawer.html
+++ b/enferno/admin/templates/admin/partials/export_drawer.html
@@ -1,7 +1,7 @@
 <v-navigation-drawer
         v-model="exportDrawer"
         fixed
-        location="right"
+        location="end"
         temporary
         width="440"
         app
@@ -67,4 +67,4 @@
         </v-card-actions>
     </v-card>
 
-</v-navigation-drawer>
\ No newline at end of file
+</v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/partials/incident_drawer.html b/enferno/admin/templates/admin/partials/incident_drawer.html
index 09abda34f..acb376839 100644
--- a/enferno/admin/templates/admin/partials/incident_drawer.html
+++ b/enferno/admin/templates/admin/partials/incident_drawer.html
@@ -2,7 +2,7 @@
       v-model="incidentDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -18,4 +18,4 @@
       <incident-card v-if="incidentDrawer && incident" :show-edit="true" :close="true" @edit="editItem" :log="true" :diff="true" @close="incidentDrawer=false" :incident="incident"></incident-card>
       <preview-card ref="prev" :item="pitem" v-model="preview"></preview-card>
     <visualization ref="viz" @error="showSnack($event)"></visualization>
-    </v-navigation-drawer>  
\ No newline at end of file
+    </v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/partials/location_drawer.html b/enferno/admin/templates/admin/partials/location_drawer.html
index c26831fd4..94980fb5e 100644
--- a/enferno/admin/templates/admin/partials/location_drawer.html
+++ b/enferno/admin/templates/admin/partials/location_drawer.html
@@ -2,7 +2,7 @@
       v-model="locationDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -18,4 +18,4 @@
 
       
        <location-card :close="true" v-if="locationDrawer && location" :show-edit="true" @edit="editItem" :log="true" @close="locationDrawer=false" :location="location"></location-card>
-    </v-navigation-drawer>  
\ No newline at end of file
+    </v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/partials/user_drawer.html b/enferno/admin/templates/admin/partials/user_drawer.html
index b6c44ada5..b098914ca 100644
--- a/enferno/admin/templates/admin/partials/user_drawer.html
+++ b/enferno/admin/templates/admin/partials/user_drawer.html
@@ -1,6 +1,6 @@
 <v-navigation-drawer
     v-model="userDrawer"
-    location="right"
+    location="end"
     temporary
     width="880"
     disable-route-watcher
@@ -18,4 +18,4 @@
         ></user-card>
     </v-card>
 
-</v-navigation-drawer>
\ No newline at end of file
+</v-navigation-drawer>
diff --git a/enferno/admin/templates/admin/system-administration.html b/enferno/admin/templates/admin/system-administration.html
index c6125575c..7b75db367 100644
--- a/enferno/admin/templates/admin/system-administration.html
+++ b/enferno/admin/templates/admin/system-administration.html
@@ -1041,7 +1041,7 @@ <h4 class="subtitle-2 mb-n1">{{ _('Enable Mail System') }}</h4>
     <!-- Revision history sidebar -->
     <v-navigation-drawer
             v-model="showRevisions"
-            location="right"
+            location="end"
             temporary
             width="630"
             clipped
diff --git a/enferno/admin/templates/nav-bar.html b/enferno/admin/templates/nav-bar.html
index e7c36c8ac..c72cf9fea 100644
--- a/enferno/admin/templates/nav-bar.html
+++ b/enferno/admin/templates/nav-bar.html
@@ -1,13 +1,11 @@
 <v-app-bar color="primary">
   <template v-slot:prepend>
     <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <a href="/" class="d-inline-flex align-center ms-2">
+      <img src="/static/img/bayanat-h-w-v2.svg?v={{ config.VERSION }}" class="d-block" height="42" loading="lazy" />
+    </a>
   </template>
 
-  <v-toolbar-title class="ml-0 pl-2 flex-fill">
-    <a href="/">
-      <img src="/static/img/bayanat-h-w-v2.svg?v={{ config.VERSION }}" class="mt-1" height="42" cover loading="lazy" />
-    </a>
-  </v-toolbar-title>
   <v-spacer></v-spacer>
 
   <template v-slot:append>
@@ -15,14 +13,14 @@
     {% if config.OCR_PROVIDER == 'google_vision' %}
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="mr-2" href="/admin/media/">Vision API</v-chip>
+        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-google" size="small" class="me-2" href="/admin/media/">Vision API</v-chip>
       </template>
       {{ _('OCR powered by Google Vision') }}
     </v-tooltip>
     {% elif config.OCR_PROVIDER %}
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="mr-2" href="/admin/media/">AI Powered</v-chip>
+        <v-chip v-bind="props" color="white" variant="tonal" prepend-icon="mdi-creation" size="small" class="me-2" href="/admin/media/">AI Powered</v-chip>
       </template>
       {{ _('OCR powered by AI') }}
     </v-tooltip>
@@ -30,12 +28,12 @@
 
     <v-tooltip location="bottom">
       <template v-slot:activator="{ props }">
-        <v-btn id="menu-activator" v-bind="props" icon="mdi-translate"></v-btn>
+        <v-btn id="language-menu-activator" v-bind="props" icon="mdi-translate"></v-btn>
       </template>
         {{ _('Interface Language') }}
     </v-tooltip>
   
-    <v-menu activator="#menu-activator">
+    <v-menu activator="#language-menu-activator" :z-index="3004">
       <v-list color="primary">
         <v-list-subheader>{{ _('Translations')}}</v-list-subheader>
         <v-list-item
diff --git a/enferno/app.py b/enferno/app.py
index 93699536a..b4faaa769 100755
--- a/enferno/app.py
+++ b/enferno/app.py
@@ -1,6 +1,7 @@
 # -*- coding: utf-8 -*-
 
 import pandas as pd
+from babel import Locale
 from urllib.parse import urlparse
 from flask import Flask, render_template, current_app, request
 from flask_login import user_logged_in, user_logged_out
@@ -107,12 +108,28 @@ def create_app(config_object=Config):
     register_constants(app)
     register_blueprints(app)
     register_extensions(app)
+    register_template_context(app)
     register_shellcontext(app)
     register_commands(app)
     register_signals(app)
     return app
 
 
+def register_template_context(app):
+    @app.context_processor
+    def locale_context():
+        locale = str(get_locale())
+        direction = (
+            "rtl"
+            if Locale.parse(locale.replace("-", "_")).character_order == "right-to-left"
+            else "ltr"
+        )
+        return {
+            "current_language": locale.replace("_", "-"),
+            "current_direction": direction,
+        }
+
+
 def register_extensions(app):
     """
     Register Flask extensions.
diff --git a/enferno/export/templates/export_drawer.html b/enferno/export/templates/export_drawer.html
index 31f624068..cf56df253 100644
--- a/enferno/export/templates/export_drawer.html
+++ b/enferno/export/templates/export_drawer.html
@@ -2,7 +2,7 @@
       v-model="exportDrawer"
       clipped
       fixed
-      location="right"
+      location="end"
       temporary
       width="520"
       app
@@ -25,4 +25,4 @@
                  :exp="eitem"></export-card>
 
   </div>
-    </v-navigation-drawer>
\ No newline at end of file
+    </v-navigation-drawer>
diff --git a/enferno/static/css/app.css b/enferno/static/css/app.css
index 4db89966f..4f366c4a6 100644
--- a/enferno/static/css/app.css
+++ b/enferno/static/css/app.css
@@ -305,6 +305,10 @@ button.swh {
     float: right;
 }
 
+[dir="rtl"] .vue-query-builder button.pull-right {
+    float: left;
+}
+
 
 .smaller {
     transform: scale(0.9);
@@ -863,7 +867,8 @@ div.jsondiffpatch-child-node-type-array:after {
 .overflow-unset { overflow: var(--v-overflow-unset); }
 .z-1 { z-index: var(--v-z-1); }
 .z-100 { z-index: var(--v-z-100); }
-.left-auto { left: var(--v-left-auto) !important; }
+.inset-inline-start-0 { inset-inline-start: 0 !important; }
+.inset-inline-end-0 { inset-inline-end: 0 !important; }
 .h-fit { height: var(--v-h-fit); }
 .pointer-events-none { pointer-events: var(--v-pointer-events-none) !important; }
 .pointer-events-auto { pointer-events: var(--v-pointer-events-auto) !important; }
diff --git a/enferno/static/img/bayanat-h-w-v2.svg b/enferno/static/img/bayanat-h-w-v2.svg
index 4e461d4a7..71df53a89 100644
--- a/enferno/static/img/bayanat-h-w-v2.svg
+++ b/enferno/static/img/bayanat-h-w-v2.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 388.4 55.5" style="enable-background:new 0 0 388.4 55.5;" xml:space="preserve">
+	 viewBox="14 10 159 41" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>
diff --git a/enferno/static/js/common/config.js b/enferno/static/js/common/config.js
index 0522469fd..89e3caf5c 100644
--- a/enferno/static/js/common/config.js
+++ b/enferno/static/js/common/config.js
@@ -155,9 +155,6 @@ const variables = {
     'z-1': '1',
     'z-100': '100',
 
-    // Position
-    'left-auto': 'auto',
-
     // Height
     'h-fit': 'fit-content',
 
@@ -166,6 +163,10 @@ const variables = {
     'pointer-events-auto': 'auto',
 }
 const vuetifyConfig = {
+    locale: {
+        locale: window.__lang__ || document.documentElement.lang,
+        fallback: 'en',
+    },
     defaults: {
         VRow: {
             dense: true,
diff --git a/enferno/static/js/components/ActorCard.js b/enferno/static/js/components/ActorCard.js
index 36506a745..d9b2441a8 100644
--- a/enferno/static/js/components/ActorCard.js
+++ b/enferno/static/js/components/ActorCard.js
@@ -152,7 +152,7 @@ const ActorCard = Vue.defineComponent({
                         target="_blank" 
                         label
                         append-icon="mdi-open-in-new"
-                        class="ml-1">
+                        class="ms-2">
                         {{ actor.originid }}
 
                     </v-chip>
@@ -160,12 +160,12 @@ const ActorCard = Vue.defineComponent({
                 {{ translations.originid_ }}
             </v-tooltip>
 
-            <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ml-2"
+            <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ms-2"
                   @click="$emit('edit',actor)">
               {{ translations.edit_ }}
             </v-btn>
 
-            <v-btn size="small" class="ml-2" variant="tonal" prepend-icon="mdi-graph-outline"
+            <v-btn size="small" class="ms-2" variant="tonal" prepend-icon="mdi-graph-outline"
                   @click.stop="$root.$refs.viz.visualize(actor)">
               {{ translations.visualize_ }}
             </v-btn>
@@ -244,7 +244,7 @@ const ActorCard = Vue.defineComponent({
                   variant="text"
                   append-icon="mdi-open-in-new"
                   label
-                  class="white--text ml-1">
+                  class="white--text ms-1">
                   {{ actor.source_link }}
                   
                 </v-chip>
diff --git a/enferno/static/js/components/BulletinCard.js b/enferno/static/js/components/BulletinCard.js
index 97a20ee40..92d29d521 100644
--- a/enferno/static/js/components/BulletinCard.js
+++ b/enferno/static/js/components/BulletinCard.js
@@ -144,7 +144,7 @@ const BulletinCard = Vue.defineComponent({
                       target="_blank" 
                       label
                       append-icon="mdi-open-in-new"
-                      class="ml-1">
+                      class="ms-2">
                       {{ bulletin.originid }}
 
                   </v-chip>
@@ -152,12 +152,12 @@ const BulletinCard = Vue.defineComponent({
               {{ translations.originid_ }}
           </v-tooltip>
 
-          <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ml-2"
+          <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ms-2"
                  @click="$emit('edit',bulletin)">
             {{ translations.edit_ }}
           </v-btn>
 
-          <v-btn size="small" class="ml-2" variant="tonal" prepend-icon="mdi-graph-outline"
+          <v-btn size="small" class="ms-2" variant="tonal" prepend-icon="mdi-graph-outline"
                  @click.stop="$root.$refs.viz.visualize(bulletin)">
             {{ translations.visualize_ }}
           </v-btn>
@@ -237,7 +237,7 @@ const BulletinCard = Vue.defineComponent({
                 variant="text"
                 append-icon="mdi-open-in-new"
                 label
-                class="white--text ml-1">
+                class="white--text ms-1">
                 {{ bulletin.source_link }}
                 
               </v-chip>
diff --git a/enferno/static/js/components/EventsSection.js b/enferno/static/js/components/EventsSection.js
index e0e9f9776..6814f4021 100644
--- a/enferno/static/js/components/EventsSection.js
+++ b/enferno/static/js/components/EventsSection.js
@@ -152,7 +152,7 @@ const EventsSection = Vue.defineComponent({
     </v-card>
 
 
-    <div :class="['position-fixed h-screen right-0 top-0 z-100', { 'pointer-events-none': !eventDialog }]" :style="$root?.rightDialogProps?.['content-props']?.style">
+    <div :class="['position-fixed h-screen inset-inline-end-0 top-0 z-100', { 'pointer-events-none': !eventDialog }]" :style="$root?.rightDialogProps?.['content-props']?.style">
     <div class="position-relative h-100 w-100">
     <v-dialog v-model="eventDialog" v-bind="dialogProps || { 'max-width': '880px' }">
         <v-card elevation="4">
diff --git a/enferno/static/js/components/ImageViewer.js b/enferno/static/js/components/ImageViewer.js
index 6a6609313..662bf3f8e 100644
--- a/enferno/static/js/components/ImageViewer.js
+++ b/enferno/static/js/components/ImageViewer.js
@@ -233,7 +233,7 @@ const ImageViewer = Vue.defineComponent({
         }
     },
     template: `
-        <div ref="imageViewer">
+        <div ref="imageViewer" dir="ltr">
             <a 
                 class="media-item h-100 block" 
                 :class="{ 'cursor-pointer': mode === 'click' }"
@@ -249,4 +249,4 @@ const ImageViewer = Vue.defineComponent({
             </a>
         </div>
     `,
-});
\ No newline at end of file
+});
diff --git a/enferno/static/js/components/IncidentCard.js b/enferno/static/js/components/IncidentCard.js
index 0eb74e3e3..3d2d4430e 100644
--- a/enferno/static/js/components/IncidentCard.js
+++ b/enferno/static/js/components/IncidentCard.js
@@ -120,12 +120,12 @@ const IncidentCard = Vue.defineComponent({
             {{ translations.id_ }} {{ incident.id }}
           </v-chip>
 
-          <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ml-2"
+          <v-btn variant="tonal" size="small" prepend-icon="mdi-pencil" v-if="editAllowed()" class="ms-2"
                  @click="$emit('edit',incident)">
             {{ translations.edit_ }}
           </v-btn>
 
-          <v-btn size="small" class="ml-2" variant="tonal" prepend-icon="mdi-graph-outline"
+          <v-btn size="small" class="ms-2" variant="tonal" prepend-icon="mdi-graph-outline"
                  @click.stop="$root.$refs.viz.visualize(incident)">
             {{ translations.visualize_ }}
           </v-btn>
diff --git a/enferno/static/js/components/InlineMediaRenderer.js b/enferno/static/js/components/InlineMediaRenderer.js
index 8ac9d3db2..86cfb664b 100644
--- a/enferno/static/js/components/InlineMediaRenderer.js
+++ b/enferno/static/js/components/InlineMediaRenderer.js
@@ -111,7 +111,7 @@ const InlineMediaRenderer = Vue.defineComponent({
                 disable-spacing
               ></uni-field>
               <div v-if="media.filename" class="cursor-pointer">
-                <v-list-item class="text-caption ml-1 py-0">
+                <v-list-item class="text-caption ms-1 py-0">
                   <template v-slot:prepend>
                     <v-tooltip location="bottom">
                       <template v-slot:activator="{ props }">
@@ -131,7 +131,7 @@ const InlineMediaRenderer = Vue.defineComponent({
                 </v-list-item>
               </div>
               <div v-if="media.etag" class="d-flex align-center cursor-pointer">
-                <v-list-item class="text-caption ml-1 py-0 text-truncate">
+                <v-list-item class="text-caption ms-1 py-0 text-truncate">
                   <template v-slot:prepend>
                     <v-tooltip location="bottom">
                       <template v-slot:activator="{ props }">
@@ -153,8 +153,8 @@ const InlineMediaRenderer = Vue.defineComponent({
             </div>
           </div>
           <v-spacer></v-spacer>
-          <v-btn @click="$emit('fullscreen')" icon="mdi-fullscreen" class="ml-2" size="small"></v-btn>
-          <v-btn v-if="hideClose === false" icon="mdi-close" class="ml-2" size="small" @click="$emit('close')"></v-btn>
+          <v-btn @click="$emit('fullscreen')" icon="mdi-fullscreen" class="ms-2" size="small"></v-btn>
+          <v-btn v-if="hideClose === false" icon="mdi-close" class="ms-2" size="small" @click="$emit('close')"></v-btn>
         </v-toolbar>
 
         <div :style="contentStyle">
diff --git a/enferno/static/js/components/MapVisualization.js b/enferno/static/js/components/MapVisualization.js
index 1da1dc1b2..69ef4dd32 100644
--- a/enferno/static/js/components/MapVisualization.js
+++ b/enferno/static/js/components/MapVisualization.js
@@ -83,6 +83,29 @@ const MapVisualization = Vue.defineComponent({
   },
 
   computed: {
+    isRtl() {
+      return document.documentElement.dir === 'rtl';
+    },
+    viewportPadding() {
+      return {
+        [this.isRtl ? 'left' : 'right']: this.drawerWidth,
+        top: 64,
+      };
+    },
+    drawerToggleStyle() {
+      return {
+        [this.isRtl ? 'right' : 'left']: '-48px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        borderRadius: this.isRtl ? '0 12px 12px 0' : '12px 0 0 12px',
+      };
+    },
+    drawerToggleIcon() {
+      if (this.isRtl) {
+        return this.entities.drawer ? 'mdi-chevron-left' : 'mdi-chevron-right';
+      }
+      return this.entities.drawer ? 'mdi-chevron-right' : 'mdi-chevron-left';
+    },
     selectedEntityMapData() {
       if (!this.entities.selected) return null;
       if (this.entityLoader) return null;
@@ -487,7 +510,7 @@ const MapVisualization = Vue.defineComponent({
   template: `
     <v-dialog fullscreen class="map-visualization-dialog" :model-value="open">
       <v-toolbar color="primary">
-        <div class="w-33 ml-4">
+        <div class="w-33 ms-4">
           <v-toolbar-title>
             {{ translations.mapVisualization_ }}
           </v-toolbar-title>
@@ -523,7 +546,7 @@ const MapVisualization = Vue.defineComponent({
                   icon="mdi-tag-multiple"
                   variant="text"
                   density="compact"
-                  class="ml-4"
+                  class="ms-4"
                 />
               </template>
               {{ translations.showOrHideEventTypes_ }}
@@ -552,7 +575,7 @@ const MapVisualization = Vue.defineComponent({
           </v-list>
         </v-menu>
 
-        <div class="w-33 mr-4 d-flex">
+        <div class="w-33 me-4 d-flex">
           <v-spacer></v-spacer>
           <v-btn
             icon="mdi-close"
@@ -569,7 +592,7 @@ const MapVisualization = Vue.defineComponent({
           :locations="computedMapData.locations"
           :flows="computedMapData.flows"
           class="w-100 h-100"
-          :viewport-padding="{ right: drawerWidth, top: 64 }"
+          :viewport-padding="viewportPadding"
           :disable-clustering="Boolean(entities.selected)"
           :mode="Boolean(entities.selected) ? 'event' : null"
           @node-clicked="onNodeClicked"
@@ -601,15 +624,15 @@ const MapVisualization = Vue.defineComponent({
         <!-- DRAWER -->
         <v-navigation-drawer
           v-model="entities.drawer"
-          location="right"
+          location="end"
           :width="drawerWidth"
           :scrim="false"
           temporary
         >
           <!-- Toggle button -->
-          <v-card class="position-absolute pa-1" :style="{ left: '-48px', top: '50%', transform: 'translateY(-50%)', borderRadius: '12px 0 0 12px' }">
+          <v-card class="position-absolute pa-1" :style="drawerToggleStyle">
             <v-btn icon size="small" @click="toggleEntityDrawer()">
-              <v-icon>{{ entities.drawer ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
+              <v-icon>{{ drawerToggleIcon }}</v-icon>
             </v-btn>
           </v-card>
 
@@ -621,12 +644,12 @@ const MapVisualization = Vue.defineComponent({
               <!-- Header with back button + location name -->
               <div class="d-flex align-center py-3">
                 <v-btn
-                  icon="mdi-arrow-left"
+                  :icon="isRtl ? 'mdi-arrow-right' : 'mdi-arrow-left'"
                   size="small"
                   variant="text"
                   @click="backToAllActors"
                 />
-                <div class="ml-2">
+                <div class="ms-2">
                   <div class="text-subtitle-1 font-weight-bold" style="max-width: 280px;">
                     {{ locationActors.label }}
                   </div>
@@ -748,7 +771,7 @@ const MapVisualization = Vue.defineComponent({
             <!-- ========== DEFAULT QUERY ACTORS MODE ========== -->
             <template v-else>
               <div class="d-flex align-center py-3">
-                <v-icon class="mr-2">mdi-account-group</v-icon>
+                <v-icon class="me-2">mdi-account-group</v-icon>
                 <div>
                   <div class="text-subtitle-1 font-weight-bold">
                     {{ translations.actors_ ?? 'Actors' }}
diff --git a/enferno/static/js/components/MediaRedactor.js b/enferno/static/js/components/MediaRedactor.js
index 24848bf0e..cad610806 100644
--- a/enferno/static/js/components/MediaRedactor.js
+++ b/enferno/static/js/components/MediaRedactor.js
@@ -351,13 +351,13 @@ const MediaRedactor = Vue.defineComponent({
       return boxes;
     },
     zoomIn() {
-      this.zoom = Math.min(+(this.zoom + 0.25).toFixed(2), REDACTOR_MAX_ZOOM);
+      this.applyZoom(Math.min(+(this.zoom + 0.25).toFixed(2), REDACTOR_MAX_ZOOM));
     },
     zoomOut() {
-      this.zoom = Math.max(+(this.zoom - 0.25).toFixed(2), 1);
+      this.applyZoom(Math.max(+(this.zoom - 0.25).toFixed(2), 1));
     },
     zoomFit() {
-      this.zoom = 1;
+      this.applyZoom(1);
     },
     pinchDistance(touches) {
       const dx = touches[0].clientX - touches[1].clientX;
@@ -431,10 +431,12 @@ const MediaRedactor = Vue.defineComponent({
     <v-dialog v-model="show" fullscreen scrollable persistent @keydown.esc.prevent no-click-animation>
       <v-card>
         <v-toolbar color="dark-primary">
-          <v-icon icon="mdi-marker" class="ml-3 mr-2" size="20"></v-icon>
+          <v-icon icon="mdi-marker" class="ms-3 me-2" size="20"></v-icon>
           <v-toolbar-title class="font-weight-medium">
             Redaction Tool
-            <span class="text-body-2 font-weight-regular opacity-70 ml-2">— {{ media?.title || media?.filename || 'document' }}</span>
+            <span class="text-body-2 font-weight-regular opacity-70 ms-2" dir="ltr">
+              <bdi>{{ media?.title || media?.filename || 'document' }}</bdi>
+            </span>
           </v-toolbar-title>
           <v-spacer></v-spacer>
           <v-text-field
@@ -457,7 +459,7 @@ const MediaRedactor = Vue.defineComponent({
                   :disabled="!canSubmit"
                   :loading="saving"
                   @click="submit(true)"
-                  class="mr-2"
+                  class="me-2"
                 >Save changes</v-btn>
                 <v-btn
                   :prepend-icon="isRedactedCopy ? 'mdi-content-save-plus-outline' : 'mdi-content-save-outline'"
@@ -465,7 +467,7 @@ const MediaRedactor = Vue.defineComponent({
                   :disabled="!canSubmit"
                   :loading="saving"
                   @click="submit(false)"
-                  class="mr-2"
+                  class="me-2"
                 >{{ isRedactedCopy ? 'Save as new copy' : 'Save redacted copy' }}</v-btn>
               </div>
             </template>
@@ -477,7 +479,7 @@ const MediaRedactor = Vue.defineComponent({
         </v-toolbar>
 
         <v-toolbar density="compact" class="border-b">
-          <v-chip size="small" variant="text" prepend-icon="mdi-cursor-default-click-outline" class="ml-2 text-caption opacity-70">Click &amp; drag to draw a black box</v-chip>
+          <v-chip size="small" variant="text" prepend-icon="mdi-cursor-default-click-outline" class="ms-2 text-caption opacity-70">Click &amp; drag to draw a black box</v-chip>
           <v-chip size="small" variant="text" prepend-icon="mdi-arrow-all" class="text-caption opacity-70">Drag box to reposition</v-chip>
           <v-chip size="small" variant="text" prepend-icon="mdi-delete-outline" class="text-caption opacity-70">Click box then Delete to remove</v-chip>
           <v-chip size="small" variant="text" prepend-icon="mdi-hand-back-right-outline" class="text-caption opacity-70">Hold Space + drag to pan</v-chip>
@@ -491,6 +493,7 @@ const MediaRedactor = Vue.defineComponent({
         <v-alert v-if="error" type="error" variant="tonal" class="ma-3">{{ error }}</v-alert>
         <v-card-text
           ref="scrollPane"
+          dir="ltr"
           class="pa-0 bg-grey-lighten-3"
           style="overflow: auto;"
           :style="{ touchAction: zoom > 1 ? 'pan-x pan-y' : 'pan-y', cursor: panning ? 'grabbing' : spaceDown ? 'grab' : 'default' }"
diff --git a/enferno/static/js/components/MediaTranscriptionDialog.js b/enferno/static/js/components/MediaTranscriptionDialog.js
index 39283c7be..91955d3e1 100644
--- a/enferno/static/js/components/MediaTranscriptionDialog.js
+++ b/enferno/static/js/components/MediaTranscriptionDialog.js
@@ -302,7 +302,7 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                           :use-metadata="true"
                         ></inline-media-renderer>
                       </div>
-                      <v-btn v-if="orientation.showSaveButton" @click="saveOrientation" prepend-icon="mdi-check" :loading="orientation.saving" class="ma-2 position-absolute right-0 bottom-0" color="primary" style="zIndex: 3002;">{{ translations.saveOrientation_ }}</v-btn>
+                      <v-btn v-if="orientation.showSaveButton" @click="saveOrientation" prepend-icon="mdi-check" :loading="orientation.saving" class="ma-2 position-absolute inset-inline-end-0 bottom-0" color="primary" style="zIndex: 3002;">{{ translations.saveOrientation_ }}</v-btn>
                     </div>
                   </v-card-text>
                 </v-card>
@@ -331,7 +331,7 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                             class="px-1"
                           >
                             #{{ media.bulletin.id }}
-                            <v-icon size="small" class="ml-1">mdi-open-in-new</v-icon>
+                            <v-icon size="small" class="ms-1">mdi-open-in-new</v-icon>
                           </v-btn>
                         </div>
 
@@ -433,7 +433,7 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                     <div class="flex-1-1 d-flex flex-column" style="min-height: 0;">
                       <div v-if="hasText || editing" class="text-subtitle-2 mb-2 d-flex align-center">
                         {{ translations.extractedText_ }}
-                        <v-chip v-if="editing" color="warning" size="x-small" variant="tonal" class="ml-2">{{ translations.editing_ || 'Editing' }}</v-chip>
+                        <v-chip v-if="editing" color="warning" size="x-small" variant="tonal" class="ms-2">{{ translations.editing_ || 'Editing' }}</v-chip>
                         <v-spacer></v-spacer>
 
                         <!-- Edit / Cancel button -->
@@ -441,14 +441,14 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                           v-if="canEdit && !editing"
                           prepend-icon="mdi-pencil"
                           variant="outlined"
-                          class="border-thin mr-2"
+                          class="border-thin me-2"
                           @click="enterEditMode"
                         >{{ translations.edit_ || 'Edit' }}</v-btn>
 
                         <v-btn
                           v-if="editing"
                           variant="text"
-                          class="mr-2"
+                          class="me-2"
                           @click="cancelEdit"
                         >{{ translations.cancel_ || 'Cancel' }}</v-btn>
 
@@ -563,7 +563,7 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                               density="compact"
                               hide-details
                               :disabled="loading || saving || translation.loading"
-                              class="mr-4"
+                              class="me-4"
                               @update:model-value="translateText()"
                             ></v-select>
 
@@ -585,7 +585,7 @@ const MediaTranscriptionDialog = Vue.defineComponent({
                   <v-expansion-panels v-if="revisionCount > 0" flat class="flex-0-0 mx-4 mb-2">
                     <v-expansion-panel>
                       <v-expansion-panel-title class="text-caption py-1" style="min-height: 36px;">
-                        <v-icon icon="mdi-history" size="small" class="mr-2"></v-icon>
+                        <v-icon icon="mdi-history" size="small" class="me-2"></v-icon>
                         {{ translations.revisions_ || 'Revisions' }} ({{ revisionCount }})
                       </v-expansion-panel-title>
                       <v-expansion-panel-text>
diff --git a/enferno/static/js/components/NotificationsList.js b/enferno/static/js/components/NotificationsList.js
index a381797dd..045e20a72 100644
--- a/enferno/static/js/components/NotificationsList.js
+++ b/enferno/static/js/components/NotificationsList.js
@@ -41,9 +41,9 @@ const NotificationsList = Vue.defineComponent({
             return date.isValid() ? date.format('MM/DD/YYYY HH:mm') : '-';
         },
         getLineClampStyles(lines) {
-            if (!lines) return 'white-space: normal;'
+            if (!lines) return 'white-space: normal; text-align: match-parent;'
 
-            return `overflow: hidden; display: -webkit-box; -webkit-line-clamp: ${lines}; -webkit-box-orient: vertical; white-space: normal;`
+            return `overflow: hidden; display: -webkit-box; -webkit-line-clamp: ${lines}; -webkit-box-orient: vertical; white-space: normal; text-align: match-parent;`
         },
         getListItemColorProps(notification) {
             if (!notification) return
@@ -125,6 +125,7 @@ const NotificationsList = Vue.defineComponent({
                             </template>
 
                             <v-list-item-title
+                                dir="auto"
                                 :class="{ 'font-weight-bold': (!notification?.read_status || notification?.is_urgent) }"
                                 class="text-body-1"
                                 :style="getLineClampStyles(config.maxTitleLines)"
@@ -132,6 +133,7 @@ const NotificationsList = Vue.defineComponent({
                             />
                             <v-list-item-subtitle class="mt-1" opacity="100">
                                 <div
+                                dir="auto"
                                 class="text-caption text-high-emphasis"
                                 :style="getLineClampStyles(config.maxSubtitleLines)"
                                 v-text="notification?.message"
@@ -143,7 +145,7 @@ const NotificationsList = Vue.defineComponent({
                                 v-text="translations.viewResults_"
                                 />
                                 <div class="d-flex justify-space-between align-center mt-2">
-                                    <span class="text-caption text-high-emphasis">{{ getDateFromNotification(notification) }}</span>
+                                    <span dir="ltr" class="text-caption text-high-emphasis">{{ getDateFromNotification(notification) }}</span>
                                 </div>
                             </v-list-item-subtitle>
 
diff --git a/enferno/static/js/components/ProfileDropdown.js b/enferno/static/js/components/ProfileDropdown.js
index 96f1af393..6a01a614e 100644
--- a/enferno/static/js/components/ProfileDropdown.js
+++ b/enferno/static/js/components/ProfileDropdown.js
@@ -64,7 +64,7 @@ const ProfileDropdown = Vue.defineComponent({
   },
 
   template: /* html */ `
-    <v-menu :close-on-content-click="false">
+    <v-menu :close-on-content-click="false" :z-index="3004">
       <template v-slot:activator="{ props: menu }">
         <v-tooltip location="top">
           <template v-slot:activator="{ props: tooltip }">
@@ -90,16 +90,16 @@ const ProfileDropdown = Vue.defineComponent({
         <v-list density="compact" nav>
             <v-list-subheader>{{ translations.theme_ }}</v-list-subheader>
 
-            <v-radio-group class="ml-5" hide-details v-model="$root.settings.dark" @update:model-value="$root.saveSettings" row>
+            <v-radio-group class="ms-5" hide-details v-model="$root.settings.dark" @update:model-value="$root.saveSettings" row>
                 <v-radio :value="0" true-icon="mdi-check-circle">
                     <template #label>
-                        <v-icon size="small" class="mr-2">mdi-weather-sunny</v-icon>
+                        <v-icon size="small" class="me-2">mdi-weather-sunny</v-icon>
                         <span class="text-body-2">{{ translations.light_ }}</span>
                     </template>
                 </v-radio>
                 <v-radio :value="1" true-icon="mdi-check-circle">
                     <template #label>
-                        <v-icon size="small" class="mr-2">mdi-weather-night</v-icon>
+                        <v-icon size="small" class="me-2">mdi-weather-night</v-icon>
                         <span class="text-body-2">{{ translations.dark_ }}</span>
                     </template>
                 </v-radio>
@@ -123,4 +123,4 @@ const ProfileDropdown = Vue.defineComponent({
       </v-card>
     </v-menu>
   `,
-});
\ No newline at end of file
+});
diff --git a/enferno/static/js/components/SplitView.js b/enferno/static/js/components/SplitView.js
index 5c76c7b49..6624b803c 100644
--- a/enferno/static/js/components/SplitView.js
+++ b/enferno/static/js/components/SplitView.js
@@ -44,6 +44,9 @@ const SplitView = Vue.defineComponent({
     isHandleHighlighted() {
       return this.isDragging || this.isHovering;
     },
+    isRtl() {
+      return document.documentElement.dir === 'rtl';
+    },
   },
   mounted() {
     this.ro = new ResizeObserver(() => {
@@ -82,10 +85,13 @@ const SplitView = Vue.defineComponent({
     leaveHandle() {
       this.isHovering = false;
     },
+    getInlineStartX(e) {
+      const bounds = this.$el.getBoundingClientRect();
+      return this.isRtl ? bounds.right - e.clientX : e.clientX - bounds.left;
+    },
     startDrag(e) {
       if (e.button !== 0) return;
-      const bounds = this.$el.getBoundingClientRect();
-      this.currentX = e.clientX - bounds.left;
+      this.currentX = this.getInlineStartX(e);
       this.isDragging = true;
       document.addEventListener('mousemove', this.queueDragFrame);
       document.addEventListener('mouseup', this.stopDrag);
@@ -103,8 +109,7 @@ const SplitView = Vue.defineComponent({
     },
     queueDragFrame(e) {
       if (!this.isDragging) return;
-      const bounds = this.$el.getBoundingClientRect();
-      this.currentX = e.clientX - bounds.left;
+      this.currentX = this.getInlineStartX(e);
       if (!this.frameRequested) {
         this.frameRequested = true;
         requestAnimationFrame(this.doDrag);
diff --git a/enferno/templates/account-security.html b/enferno/templates/account-security.html
index 00a35b373..44d588673 100644
--- a/enferno/templates/account-security.html
+++ b/enferno/templates/account-security.html
@@ -119,7 +119,7 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                     {{ _('Two factor authentication (2FA) adds an extra layer of protection to your Bayanat account by requiring a verification code from an authenticator app.') }}
                                                 </div>
                                             </div>
-                                            <v-btn variant="outlined" class="border-thin ml-4"
+                                            <v-btn variant="outlined" class="border-thin ms-4"
                                                 :disabled="authMethods.twoFactor.loading">
                                                 ${'{{ _('Edit') if primary_method != 'none' else _('Setup') }}'}
                                             </v-btn>
@@ -156,13 +156,17 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                             {% if primary_method == 'none' %}
                                             <div class="d-flex flex-column ga-6 py-2" style="max-width: 690px;">
                                                 <div>
-                                                    <span class="font-weight-medium mb-1">{{ _('Step 1') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis">{{ _('Open your authenticator app such as Google Authenticator, LastPass, or Authy.') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap mb-1">{{ _('Step 1') }}</span>
+                                                        <span class="text-medium-emphasis">{{ _('Open your authenticator app such as Google Authenticator, LastPass, or Authy.') }}</span>
+                                                    </div>
                                                 </div>
 
                                                 <div>
-                                                    <span class="font-weight-medium mb-1">{{ _('Step 2') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis mb-3">{{ _('Scan the QR code or enter the setup key manually.') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap mb-1">{{ _('Step 2') }}</span>
+                                                        <span class="text-medium-emphasis mb-3">{{ _('Scan the QR code or enter the setup key manually.') }}</span>
+                                                    </div>
                                                     <div id="qrcode" class="mt-6 mb-5 d-flex justify-center"></div>
                                                     <p class="text-body-2 text-medium-emphasis mb-1">{{ _('QR not working? Enter this code manually in your authenticator app.') }}</p>
                                                     <div class="d-flex align-center ga-2">
@@ -175,8 +179,10 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                 </div>
 
                                                 <div>
-                                                    <span class="font-weight-medium mb-1">{{ _('Step 3') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis mb-3">{{ _('Enter the six digit code from your authenticator app into Bayanat.') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap mb-1">{{ _('Step 3') }}</span>
+                                                        <span class="text-medium-emphasis mb-3">{{ _('Enter the six digit code from your authenticator app into Bayanat.') }}</span>
+                                                    </div>
                                                 </div>
 
                                                 <v-text-field
@@ -219,7 +225,7 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                     {{ _('Security keys and passkeys let you sign in using a physical device or built‑in biometric authentication. They provide strong protection against phishing and unauthorized access.') }}
                                                 </div>
                                             </div>
-                                            <v-btn variant="outlined" class="border-thin ml-4"
+                                            <v-btn variant="outlined" class="border-thin ms-4"
                                                 :disabled="authMethods.securityKeys.panel === 'open'">
                                                 ${'{{ _('Edit') if has_passkeys else _('Setup') }}'}
                                             </v-btn>
@@ -243,7 +249,7 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                 <div class="d-flex flex-column ga-2 mt-4">
                                                     {% for cred in registered_credentials %}
                                                     <v-card border flat class="pa-4 d-flex align-center">
-                                                        <v-icon icon="mdi-key" class="mr-3 text-medium-emphasis"></v-icon>
+                                                        <v-icon icon="mdi-key" class="me-3 text-medium-emphasis"></v-icon>
                                                         <div class="flex-grow-1">
                                                             <div class="text-body-1 font-weight-medium">{{ cred.name }}</div>
                                                             <div class="text-body-2 text-medium-emphasis">{{ _('Last Used') }}: {{ cred.lastuse }}</div>
@@ -271,8 +277,10 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                             <div v-if="authMethods.securityKeys.registering" style="max-width: 560px">
                                                 <div class="d-flex flex-column ga-6">
                                                     <div>
-                                                        <span class="font-weight-medium">{{ _('Step 1') }}</span>&nbsp;
-                                                        <span class="text-medium-emphasis">{{ _('Give your device a nickname (e.g., "My Laptop" or "USB Key") so you can recognize it later.') }}</span>
+                                                        <div class="d-flex align-baseline ga-2">
+                                                            <span class="font-weight-medium text-no-wrap">{{ _('Step 1') }}</span>
+                                                            <span class="text-medium-emphasis">{{ _('Give your device a nickname (e.g., "My Laptop" or "USB Key") so you can recognize it later.') }}</span>
+                                                        </div>
                                                         <v-text-field
                                                             v-model="authMethods.securityKeys.deviceName"
                                                             class="mt-4"
@@ -293,15 +301,19 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                         </div>
                                                     </div>
                                                     <div>
-                                                        <span class="font-weight-medium">{{ _('Step 2') }}</span>&nbsp;
-                                                        <span class="text-medium-emphasis">{{ _('After clicking Continue, follow your browser\'s prompt to scan your fingerprint, face, or tap your USB key.') }}</span>
+                                                        <div class="d-flex align-baseline ga-2">
+                                                            <span class="font-weight-medium text-no-wrap">{{ _('Step 2') }}</span>
+                                                            <span class="text-medium-emphasis">{{ _('After clicking Continue, follow your browser\'s prompt to scan your fingerprint, face, or tap your USB key.') }}</span>
+                                                        </div>
                                                         <div v-if="authMethods.securityKeys.loading" class="d-flex align-center ga-2 mt-4">
                                                             <v-progress-circular indeterminate color="info" size="20" width="2"></v-progress-circular>{{ _('Verifying your security key...') }}
                                                         </div>
                                                     </div>
                                                     <div>
-                                                        <span class="font-weight-medium">{{ _('Step 3') }}</span>&nbsp;
-                                                        <span class="text-medium-emphasis">{{ _('Once your device confirms your identity, the setup is complete and your account is secure.') }}</span>
+                                                        <div class="d-flex align-baseline ga-2">
+                                                            <span class="font-weight-medium text-no-wrap">{{ _('Step 3') }}</span>
+                                                            <span class="text-medium-emphasis">{{ _('Once your device confirms your identity, the setup is complete and your account is secure.') }}</span>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -323,7 +335,7 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
                                                     {{ _('Recovery codes allow you to regain access to your Bayanat account if you lose your authenticator app or security key. Store them somewhere safe and accessible.') }}
                                                 </div>
                                             </div>
-                                            <v-btn variant="outlined" class="border-thin ml-4"
+                                            <v-btn variant="outlined" class="border-thin ms-4"
                                                 :disabled="authMethods.recoveryCodes.panel === 'open'">
                                                 ${authMethods.recoveryCodes.hasExisting ? '{{ _('View') }}' : '{{ _('Setup') }}'}
                                             </v-btn>
@@ -340,8 +352,10 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
 
                                                 <!-- Step 1 -->
                                                 <div>
-                                                    <span class="font-weight-medium">{{ _('Step 1') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis">{{ _('Click the Generate Recovery Codes button to create a new set of backup codes.') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap">{{ _('Step 1') }}</span>
+                                                        <span class="text-medium-emphasis">{{ _('Click the Generate Recovery Codes button to create a new set of backup codes.') }}</span>
+                                                    </div>
                                                     <div class="d-flex ga-2 mt-4">
                                                         <v-btn variant="outlined" class="border-thin"
                                                             @click="toggleRecoveryCodesPanel(undefined)">
@@ -357,8 +371,10 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
 
                                                 <!-- Step 2 - codes appear here after generate/show -->
                                                 <div>
-                                                    <span class="font-weight-medium">{{ _('Step 2') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis">{{ _('Copy your codes and store them in a secure location (like a password manager or a locked physical safe).') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap">{{ _('Step 2') }}</span>
+                                                        <span class="text-medium-emphasis">{{ _('Copy your codes and store them in a secure location (like a password manager or a locked physical safe).') }}</span>
+                                                    </div>
                                                     
                                                     <div v-if="authMethods.recoveryCodes.codes.length" class="mt-4">
                                                         <div class="d-flex flex-wrap ga-2 mb-3">
@@ -390,8 +406,10 @@ <h1 class="text-h6 mb-5">{{ _('Account Security') }}</h1>
 
                                                 <!-- Step 3 -->
                                                 <div>
-                                                    <span class="font-weight-medium">{{ _('Step 3') }}</span>&nbsp;
-                                                    <span class="text-medium-emphasis">{{ _('Keep in mind that each code can only be used once. After a code is used, it becomes invalid.') }}</span>
+                                                    <div class="d-flex align-baseline ga-2">
+                                                        <span class="font-weight-medium text-no-wrap">{{ _('Step 3') }}</span>
+                                                        <span class="text-medium-emphasis">{{ _('Keep in mind that each code can only be used once. After a code is used, it becomes invalid.') }}</span>
+                                                    </div>
                                                 </div>
 
                                             </div>
diff --git a/enferno/templates/layout.html b/enferno/templates/layout.html
index cae303ec5..2ed85a43d 100644
--- a/enferno/templates/layout.html
+++ b/enferno/templates/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ current_language }}" dir="{{ current_direction }}">
 <head>
     <meta charset="utf-8"/>
     <title>{{ _('Bayanat') }}</title>
diff --git a/enferno/templates/login-layout.html b/enferno/templates/login-layout.html
index 05486369b..43426e4ee 100644
--- a/enferno/templates/login-layout.html
+++ b/enferno/templates/login-layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ current_language }}" dir="{{ current_direction }}">
 <head>
     <meta charset="utf-8"/>
     <title>{{ _('Bayanat') }}</title>
diff --git a/enferno/templates/notifications_drawer.html b/enferno/templates/notifications_drawer.html
index 15bb720f3..8af6047dc 100644
--- a/enferno/templates/notifications_drawer.html
+++ b/enferno/templates/notifications_drawer.html
@@ -1,6 +1,6 @@
 <v-navigation-drawer
         v-model="notifications.ui.drawerVisible"
-        location="right"
+        location="end"
         temporary
         width="624"
         :style="{ zIndex: 3000 }"
@@ -52,4 +52,4 @@
             :load-error="notifications.status.loadError"
         />
     </v-card>
-</v-navigation-drawer>
\ No newline at end of file
+</v-navigation-drawer>
diff --git a/enferno/templates/security/base.html b/enferno/templates/security/base.html
index f94a19d92..93c750b28 100644
--- a/enferno/templates/security/base.html
+++ b/enferno/templates/security/base.html
@@ -1,6 +1,6 @@
 {% block doc -%}
 <!DOCTYPE html>
-<html{% block html_attribs %}{% endblock html_attribs %}>
+<html lang="{{ current_language }}" dir="{{ current_direction }}"{% block html_attribs %}{% endblock html_attribs %}>
   {%- block html %}
   <head>
     {%- block head %}
diff --git a/enferno/templates/setup_wizard.html b/enferno/templates/setup_wizard.html
index a1aea5287..eabb0962e 100644
--- a/enferno/templates/setup_wizard.html
+++ b/enferno/templates/setup_wizard.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ current_language }}" dir="{{ current_direction }}">
 <head>
     <meta charset="utf-8"/>
     <title>{{ _(' Setup Bayanat') }}</title>
@@ -446,6 +446,10 @@ <h2 class="mt-1 subtitle-2 mb-2">{{ _('Two Factor Authentication Policies') }}</
         const {createVuetify} = Vuetify;
 
         const vuetify = createVuetify({
+            locale: {
+                locale: document.documentElement.lang,
+                fallback: 'en',
+            },
             theme: {
                 defaultTheme: 'light',
                 themes: {
diff --git a/tests/test_rtl.py b/tests/test_rtl.py
new file mode 100644
index 000000000..44f246ea2
--- /dev/null
+++ b/tests/test_rtl.py
@@ -0,0 +1,91 @@
+from pathlib import Path
+
+
+def test_arabic_layout_enables_rtl(app, anonymous_client, monkeypatch):
+    monkeypatch.setitem(app.config, "BABEL_DEFAULT_LOCALE", "ar")
+
+    response = anonymous_client.get("/login")
+
+    assert response.status_code == 200
+    assert '<html lang="ar" dir="rtl">' in response.text
+
+
+def test_english_layout_remains_ltr(anonymous_client):
+    response = anonymous_client.get("/login")
+
+    assert response.status_code == 200
+    assert '<html lang="en" dir="ltr">' in response.text
+
+
+def test_authenticated_layout_exposes_direction(admin_client, monkeypatch):
+    monkeypatch.setattr("enferno.app.get_locale", lambda: "ar")
+
+    response = admin_client.get("/admin/labels/")
+
+    assert response.status_code == 200
+    assert '<html lang="ar" dir="rtl">' in response.text
+
+
+def test_all_first_party_drawers_use_logical_locations():
+    roots = [
+        Path("enferno/templates"),
+        Path("enferno/admin/templates"),
+        Path("enferno/data_import/templates"),
+        Path("enferno/deduplication/templates"),
+        Path("enferno/export/templates"),
+    ]
+    hardcoded_right = []
+
+    for root in roots:
+        for path in root.rglob("*.html"):
+            source = path.read_text()
+            if "<v-navigation-drawer" in source and 'location="right"' in source:
+                hardcoded_right.append(str(path))
+
+    assert hardcoded_right == []
+
+
+def test_notification_payloads_detect_their_own_text_direction():
+    source = Path("enferno/static/js/components/NotificationsList.js").read_text()
+
+    assert source.count('dir="auto"') >= 2
+    assert 'dir="ltr"' in source
+
+
+def test_header_uses_logical_spacing():
+    source = Path("enferno/admin/templates/nav-bar.html").read_text()
+    logo = Path("enferno/static/img/bayanat-h-w-v2.svg").read_text()
+
+    assert "ml-0" not in source
+    assert "pl-2" not in source
+    assert "mr-2" not in source
+    assert "<v-toolbar-title" not in source
+    assert source.index("bayanat-h-w-v2.svg") < source.index("</template>")
+    assert 'viewBox="14 10 159 41"' in logo
+
+
+def test_split_dialogs_use_logical_edges():
+    bulletins = Path("enferno/admin/templates/admin/bulletins.html").read_text()
+    events = Path("enferno/static/js/components/EventsSection.js").read_text()
+    transcription = Path("enferno/static/js/components/MediaTranscriptionDialog.js").read_text()
+    styles = Path("enferno/static/css/app.css").read_text()
+
+    assert "'content-class': 'absolute inset-inline-start-0'" in bulletins
+    assert "'content-class': 'absolute inset-inline-end-0'" in bulletins
+    assert "position-fixed h-screen inset-inline-end-0 top-0 z-100" in events
+    assert "position-absolute inset-inline-end-0 bottom-0" in transcription
+    assert ".inset-inline-start-0" in styles
+    assert ".inset-inline-end-0" in styles
+    assert "'absolute left-0'" not in bulletins
+    assert "'absolute right-0 left-auto'" not in bulletins
+
+
+def test_map_drawer_and_controls_follow_text_direction():
+    source = Path("enferno/static/js/components/MapVisualization.js").read_text()
+
+    assert 'location="end"' in source
+    assert 'location="right"' not in source
+    assert "viewportPadding" in source
+    assert "drawerToggleStyle" in source
+    assert "drawerToggleIcon" in source
+    assert ':viewport-padding="viewportPadding"' in source