diff --git a/desk/index.html b/desk/index.html
index 8a6a1b34cc..df647eb490 100644
--- a/desk/index.html
+++ b/desk/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="{{boot.dir}}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/desk/package.json b/desk/package.json
index b6c5ce33b1..b55df8da4a 100644
--- a/desk/package.json
+++ b/desk/package.json
@@ -35,6 +35,7 @@
     "postcss": "^8.4.5",
     "prettier": "2.8.4",
     "tailwindcss": "^3.4.15",
+    "tailwindcss-rtl": "^0.9.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.9",
     "vite-plugin-pwa": "0.15.0"
diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
index aeedfa6a48..27cf8e11fb 100644
--- a/desk/src/components/CommentBox.vue
+++ b/desk/src/components/CommentBox.vue
@@ -11,9 +11,9 @@
           <span class="font-medium text-gray-800">
             {{ commenter }}
           </span>
-          <span> added a</span>
+          <span> &nbsp;{{ __("added a") }}</span>
           <span class="max-w-xs truncate font-medium text-gray-800">
-            comment
+            &nbsp;{{ __("comment") }}
           </span>
         </p>
       </div>
@@ -28,13 +28,13 @@
             :placement="'right'"
             :options="[
               {
-                label: 'Edit',
+                label: __('Edit'),
                 onClick: () => handleEditMode(),
                 icon: 'edit-2',
                 condition: () => !isTicketMergedComment,
               },
               {
-                label: 'Delete',
+                label: __('Delete'),
                 onClick: () => (showDialog = true),
                 icon: 'trash-2',
               },
diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
index 1d13961149..ceaf8f17b7 100644
--- a/desk/src/components/CommentTextEditor.vue
+++ b/desk/src/components/CommentTextEditor.vue
@@ -67,7 +67,7 @@
               </template>
             </FileUploader>
           </div>
-          <div class="flex items-center justify-end space-x-2 w-[40%]">
+          <div class="flex items-center justify-end space-s-2 w-[40%]">
             <Button
               label="Discard"
               @click="
diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
index 0ef730e5e6..d0ffe9a126 100644
--- a/desk/src/components/CommunicationArea.vue
+++ b/desk/src/components/CommunicationArea.vue
@@ -7,7 +7,7 @@
         <Button
           ref="sendEmailRef"
           variant="ghost"
-          label="Reply"
+          :label="__('Reply')"
           :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleEmailBox()"
         >
@@ -17,7 +17,7 @@
         </Button>
         <Button
           variant="ghost"
-          label="Comment"
+          :label="__('Comment')"
           :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleCommentBox()"
         >
@@ -38,7 +38,7 @@
       <EmailEditor
         ref="emailEditorRef"
         :label="
-          isMobileView ? 'Send' : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
+          isMobileView ? __('Send') : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
         "
         v-model:content="content"
         placeholder="Hi John, we are looking into this issue."
@@ -101,8 +101,8 @@ import { useDevice } from "@/composables";
 import { useScreenSize } from "@/composables/screen";
 import { useShortcut } from "@/composables/shortcuts";
 import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
-import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { ref, watch } from "vue";
 
 const emit = defineEmits(["update"]);
 const content = defineModel("content");
diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
index 48ca27386c..60f1569c51 100644
--- a/desk/src/components/EmailArea.vue
+++ b/desk/src/components/EmailArea.vue
@@ -57,7 +57,7 @@
           :placement="'right'"
           :options="[
             {
-              label: 'Split Ticket',
+              label: __('Split Ticket'),
               icon: LucideSplit,
               onClick: () => (showSplitModal = true),
             },
@@ -107,14 +107,14 @@
 <script setup lang="ts">
 import { AttachmentItem } from "@/components";
 import { useScreenSize } from "@/composables/screen";
+import { useAuthStore } from "@/stores/auth";
 import { dateFormat, dateTooltipFormat, timeAgo } from "@/utils";
 import { Dropdown } from "frappe-ui";
+import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import LucideSplit from "~icons/lucide/split";
 import { ReplyAllIcon, ReplyIcon } from "./icons";
 import TicketSplitModal from "./ticket/TicketSplitModal.vue";
-import { useAuthStore } from "@/stores/auth";
-import { storeToRefs } from "pinia";
 
 const props = defineProps({
   activity: {
diff --git a/desk/src/components/EmailContent.vue b/desk/src/components/EmailContent.vue
index 85e650ea69..6043dfb270 100644
--- a/desk/src/components/EmailContent.vue
+++ b/desk/src/components/EmailContent.vue
@@ -129,7 +129,7 @@ function replaceReplyToContent(
 const htmlContent = computed(
   () => `
   <!DOCTYPE html>
-  <html>
+  <html dir="${window.dir}">
   <head>
     <link rel="stylesheet" href="${cssHref.value}" />
     <base target="_blank" />
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index dfb3dd2303..6f2f3674fc 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -17,7 +17,7 @@
   >
     <template #top>
       <div class="mx-6 md:mx-10 flex items-center gap-2 border-y py-2.5">
-        <span class="text-xs text-gray-500">TO:</span>
+        <span class="text-xs text-gray-500">{{ __("TO") }}:</span>
         <MultiSelectInput
           v-model="toEmailsClone"
           class="flex-1"
@@ -25,12 +25,12 @@
           :error-message="(value) => `${value} is an invalid email address`"
         />
         <Button
-          :label="'CC'"
+          :label="__('CC')"
           :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
           @click="toggleCC()"
         />
         <Button
-          :label="'BCC'"
+          :label="__('BCC')"
           :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
           @click="toggleBCC()"
         />
@@ -132,14 +132,14 @@
           <TextEditorFixedMenu class="ml-1" :buttons="textEditorMenuButtons" />
         </div>
         <div
-          class="flex items-center justify-end space-x-2 sm:mt-0 w-[40%] mr-9"
+          class="flex items-center justify-end space-s-2 sm:mt-0 w-[40%] mr-9"
         >
-          <Button label="Discard" @click="handleDiscard" />
+          <Button :label="__('Discard')" @click="handleDiscard" />
           <Button
             variant="solid"
             :disabled="emailEmpty"
             :loading="sendMail.loading"
-            :label="label"
+            :label="__(label)"
             @click="
               () => {
                 submitMail();
diff --git a/desk/src/components/HistoryBox.vue b/desk/src/components/HistoryBox.vue
index c03f72ce7e..6939449d94 100644
--- a/desk/src/components/HistoryBox.vue
+++ b/desk/src/components/HistoryBox.vue
@@ -7,9 +7,9 @@
         v-if="relatedActivities.length > 1"
         class="inline-flex flex-wrap gap-1.5 text-ink-gray-8 font-medium w-4/5"
       >
-        <span>{{ `${show_others ? "Hide " : "Show "}` }}</span>
+        <span>{{ `${show_others ? __("Hide ") : __("Show ")}` }}</span>
         <span>+{{ relatedActivities.length }} </span>
-        <span>changes from </span>
+        <span>{{ __("changes from") }}</span>
         <span>{{ user }}</span>
 
         <Button
@@ -26,7 +26,7 @@
         <span class="font-medium text-gray-800">
           {{ user }}
         </span>
-        <span> {{ content }}</span>
+        <span> {{ __(content) }}</span>
       </div>
 
       <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
@@ -45,7 +45,7 @@
           <span class="font-medium text-gray-800">
             {{ relatedActivity.user }}
           </span>
-          <span> {{ relatedActivity.content }}</span>
+          <span> {{ __(relatedActivity.content) }}</span>
         </div>
         <Tooltip
           :text="dateFormat(relatedActivity.creation, dateTooltipFormat)"
@@ -69,6 +69,7 @@ const props = defineProps({
     required: true,
   },
 });
+console.log(props.activity);
 
 const { user, content, creation, relatedActivities } = props.activity;
 
diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
index a3c1bf07a1..ad20b9f5aa 100644
--- a/desk/src/components/ListViewBuilder.vue
+++ b/desk/src/components/ListViewBuilder.vue
@@ -7,7 +7,7 @@
     <QuickFilters v-if="!isMobileView" class="flex-1" />
     <div class="flex items-start gap-2 justify-end h-full" v-if="!isMobileView">
       <Button
-        label="Save Changes"
+        :label="__('Save Changes')"
         v-if="isViewUpdated && canSaveView"
         @click="handleViewUpdate"
       />
@@ -164,6 +164,7 @@ import {
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import { __ } from "@/translation";
 import EmptyState from "./EmptyState.vue";
 import ListRows from "./ListRows.vue";
 
@@ -222,15 +223,18 @@ const defaultOptions = reactive({
   },
   selectBannerActions: [
     {
-      label: "Delete",
+      label: __("Delete"),
       icon: "trash-2",
       onClick: (selections: Set<string>) => {
         $dialog({
-          title: "Delete",
-          message: `Are you sure you want to delete ${selections.size} item(s)?`,
+          title: __("Delete"),
+          message: __(
+            "Are you sure you want to delete {0} item(s)?",
+            ...[selections.size]
+          ),
           actions: [
             {
-              label: "Confirm",
+              label: __("Confirm"),
               variant: "solid",
               onClick({ close }) {
                 handleBulkDelete(close, selections);
@@ -250,7 +254,7 @@ function handleBulkDelete(hide: Function, selections: Set<string>) {
     items: JSON.stringify(Array.from(selections)),
     doctype: props.options.doctype,
   }).then(() => {
-    toast.success("Item(s) deleted successfully");
+    toast.success(__("Item(s) deleted successfully"));
     hide();
     reset();
   });
@@ -272,7 +276,7 @@ const { isMobileView } = useScreenSize();
 
 const defaultEmptyState = {
   icon: "",
-  title: "No Data Found",
+  title: __("No Data Found"),
 };
 
 const defaultParams = reactive({
diff --git a/desk/src/components/Settings/settingsModal.ts b/desk/src/components/Settings/settingsModal.ts
index 3b236c9d55..6115237a49 100644
--- a/desk/src/components/Settings/settingsModal.ts
+++ b/desk/src/components/Settings/settingsModal.ts
@@ -1,29 +1,29 @@
+import { FieldDependencyIcon, PhoneIcon } from "@/components/icons";
+import { useAuthStore } from "@/stores/auth";
+import { __ } from "@/translation";
+import { Avatar } from "frappe-ui";
 import { computed, h, markRaw, ref } from "vue";
-import Agents from "./Agents.vue";
-import EmailConfig from "./EmailConfig.vue";
-import TeamsConfig from "./Teams/TeamsConfig.vue";
-import Sla from "./Sla/Sla.vue";
-import HolidayList from "./Holiday/Holiday.vue";
-import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
-import InviteAgents from "./InviteAgents.vue";
+import Briefcase from "~icons/lucide/briefcase";
 import LucideMail from "~icons/lucide/mail";
 import LucideMailOpen from "~icons/lucide/mail-open";
+import SettingsGear from "~icons/lucide/settings";
+import Settings from "~icons/lucide/settings-2";
+import ShieldCheck from "~icons/lucide/shield-check";
 import LucideUser from "~icons/lucide/user";
 import LucideUserPlus from "~icons/lucide/user-plus";
 import LucideUsers from "~icons/lucide/users";
-import ShieldCheck from "~icons/lucide/shield-check";
-import Briefcase from "~icons/lucide/briefcase";
+import Agents from "./Agents.vue";
 import AssignmentRules from "./Assignment Rules/AssignmentRules.vue";
-import Settings from "~icons/lucide/settings-2";
-import { FieldDependencyIcon, PhoneIcon } from "@/components/icons";
-import Telephony from "./Telephony/Telephony.vue";
+import EmailConfig from "./EmailConfig.vue";
 import { EmailNotifications } from "./EmailNotifications";
-import { __ } from "@/translation";
-import Profile from "./Profile/Profile.vue";
-import { Avatar } from "frappe-ui";
-import { useAuthStore } from "@/stores/auth";
+import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
 import General from "./General/General.vue";
-import SettingsGear from "~icons/lucide/settings";
+import HolidayList from "./Holiday/Holiday.vue";
+import InviteAgents from "./InviteAgents.vue";
+import Profile from "./Profile/Profile.vue";
+import Sla from "./Sla/Sla.vue";
+import TeamsConfig from "./Teams/TeamsConfig.vue";
+import Telephony from "./Telephony/Telephony.vue";
 
 const auth = useAuthStore();
 
diff --git a/desk/src/components/SidebarLink.vue b/desk/src/components/SidebarLink.vue
index 02e54b7172..498cca4c08 100644
--- a/desk/src/components/SidebarLink.vue
+++ b/desk/src/components/SidebarLink.vue
@@ -33,7 +33,7 @@
     </span>
 
     <div
-      class="-all ml-2 flex shrink-0 grow items-center justify-between text-sm duration-300 ease-in-out"
+      class="-all ms-2 flex shrink-0 grow items-center justify-between text-sm duration-300 ease-in-out"
       :class="{
         'opacity-100': isExpanded,
         'opacity-0': !isExpanded,
diff --git a/desk/src/components/TicketField.vue b/desk/src/components/TicketField.vue
index 7515853b47..2c99bda0c3 100644
--- a/desk/src/components/TicketField.vue
+++ b/desk/src/components/TicketField.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex gap-2 px-5 pb-1 leading-5 first:mt-3 items-center">
     <div class="w-[106px] shrink-0 truncate text-sm text-gray-600">
-      <Tooltip :text="field.label">
-        <span>{{ field.label }}</span>
+      <Tooltip :text="__(field.label)">
+        <span>{{ __(field.label) }}</span>
       </Tooltip>
       <span v-if="field.required" class="text-red-500"> * </span>
     </div>
diff --git a/desk/src/components/UserMenu.vue b/desk/src/components/UserMenu.vue
index ae53f03d1a..31156d995e 100644
--- a/desk/src/components/UserMenu.vue
+++ b/desk/src/components/UserMenu.vue
@@ -10,16 +10,16 @@
           class="flex flex-1 flex-col text-left duration-300 ease-in-out overflow-hidden"
           :class="
             !sidebarStore.isExpanded
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
+              ? 'ms-0 w-0 overflow-hidden opacity-0'
+              : 'ms-2 w-auto opacity-100'
           "
         >
           <div
-            class="text-base font-medium leading-none text-gray-900 truncate"
+            class="text-base font-medium leading-none text-gray-900 truncate rtl:text-right"
           >
             {{ config.brandName || "Helpdesk" }}
           </div>
-          <div class="mt-1 text-sm leading-none text-gray-700">
+          <div class="mt-1 text-sm leading-none text-gray-700 rtl:text-right">
             {{ authStore.userName }}
           </div>
         </div>
@@ -43,11 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { Dropdown, Avatar } from "frappe-ui";
+import BrandLogo from "@/components/BrandLogo.vue";
 import { useAuthStore } from "@/stores/auth";
-import { useSidebarStore } from "@/stores/sidebar";
 import { useConfigStore } from "@/stores/config";
-import BrandLogo from "@/components/BrandLogo.vue";
+import { useSidebarStore } from "@/stores/sidebar";
+import { Dropdown } from "frappe-ui";
 
 const config = useConfigStore();
 
diff --git a/desk/src/components/ViewBreadcrumbs.vue b/desk/src/components/ViewBreadcrumbs.vue
index c94a088d20..6c340568e2 100644
--- a/desk/src/components/ViewBreadcrumbs.vue
+++ b/desk/src/components/ViewBreadcrumbs.vue
@@ -4,7 +4,7 @@
       :to="{ name: routeName }"
       class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-5 hover:text-ink-gray-7 flex items-center justify-center"
     >
-      {{ isMobileView ? "..." : label }}
+      {{ isMobileView ? "..." : __(label) }}
     </router-link>
     <span class="mx-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     <Dropdown :options="options">
@@ -12,7 +12,7 @@
         <Button
           variant="ghost"
           class="text-lg font-medium text-nowrap"
-          :label="currentView.label"
+          :label="__(currentView.label)"
         >
           <template #prefix>
             <component
diff --git a/desk/src/components/ViewModal.vue b/desk/src/components/ViewModal.vue
index a955870408..d46af39ff2 100644
--- a/desk/src/components/ViewModal.vue
+++ b/desk/src/components/ViewModal.vue
@@ -2,11 +2,13 @@
   <Dialog
     v-model="viewDialog.show"
     :options="{
-      title: modalInfo.modalTitle,
+      title: __(modalInfo.modalTitle),
     }"
   >
     <template #body-content>
-      <div class="mb-1.5 block text-base text-ink-gray-5">View Name</div>
+      <div class="mb-1.5 block text-base text-ink-gray-5">
+        {{ __("View Name") }}
+      </div>
       <div class="flex gap-2">
         <IconPicker v-model="view.icon" v-slot="{ togglePopover }">
           <Button
@@ -20,14 +22,14 @@
           class="flex-1"
           size="md"
           type="text"
-          placeholder="My Open Tickets"
+          :placeholder="__('My Open Tickets')"
           v-model="view.label"
         />
       </div>
     </template>
     <template #actions>
       <Button
-        :label="modalInfo.buttonLabel"
+        :label="__(modalInfo.buttonLabel)"
         variant="solid"
         @click="emit('update', view, modalInfo.action)"
         class="w-full"
@@ -41,6 +43,7 @@ import { ref } from "vue";
 import { Dialog } from "frappe-ui";
 import IconPicker from "@/components/IconPicker.vue";
 import { computed } from "vue";
+import { __ } from "@/translation";
 
 let viewDialog = defineModel();
 
diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue
index 5902806608..32cc024cb7 100644
--- a/desk/src/components/layouts/Sidebar.vue
+++ b/desk/src/components/layouts/Sidebar.vue
@@ -9,7 +9,7 @@
     <UserMenu class="mb-2" :options="profileSettings" />
     <SidebarLink
       v-if="!isCustomerPortal"
-      label="Search"
+      :label="__('Search')"
       class="my-0.5"
       :icon="LucideSearch"
       :on-click="() => openCommandPalette()"
@@ -25,7 +25,7 @@
     <SidebarLink
       v-if="!isCustomerPortal"
       class="relative my-0.5 min-h-7"
-      label="Dashboard"
+      :label="__('Dashboard')"
       :icon="LucideLayoutDashboard"
       :to="'Dashboard'"
       :is-active="isActiveTab('Dashboard')"
@@ -40,7 +40,7 @@
       />
       <SidebarLink
         class="relative my-0.5"
-        label="Notifications"
+        :label="__('Notifications')"
         :icon="LucideBell"
         :on-click="() => notificationStore.toggle()"
         :is-expanded="isExpanded"
@@ -117,7 +117,7 @@
       <SidebarLink
         v-if="isOnboardingStepsCompleted && !isCustomerPortal"
         :icon="HelpIcon"
-        :label="'Help'"
+        :label="__('Help')"
         :is-expanded="isExpanded"
         @click="
           () => {
@@ -131,7 +131,7 @@
         :icon="isExpanded ? LucideArrowLeftFromLine : LucideArrowRightFromLine"
         :is-active="false"
         :is-expanded="isExpanded"
-        :label="isExpanded ? 'Collapse' : 'Expand'"
+        :label="isExpanded ? __('Collapse') : __('Expand')"
         :on-click="() => (isExpanded = !isExpanded)"
       />
     </div>
@@ -208,6 +208,7 @@ import {
 
 import { useShortcut } from "@/composables/shortcuts";
 import { useTelephonyStore } from "@/stores/telephony";
+import { __ } from "@/translation";
 import LucideArrowLeftFromLine from "~icons/lucide/arrow-left-from-line";
 import LucideArrowRightFromLine from "~icons/lucide/arrow-right-from-line";
 import LucideBell from "~icons/lucide/bell";
@@ -262,7 +263,7 @@ const allViews = computed(() => {
   ];
   if (publicViews.value?.length && !isCustomerPortal.value) {
     options.push({
-      label: "Public Views",
+      label: __("Public Views"),
       opened: true,
       hideLabel: false,
       views: parseViews(publicViews.value),
@@ -270,7 +271,7 @@ const allViews = computed(() => {
   }
   if (pinnedViews.value?.length) {
     options.push({
-      label: "Private Views",
+      label: __("Private Views"),
       opened: true,
       hideLabel: false,
       views: parseViews(pinnedViews.value),
diff --git a/desk/src/components/layouts/layoutSettings.ts b/desk/src/components/layouts/layoutSettings.ts
index 1c0b6fd352..6b969b333f 100644
--- a/desk/src/components/layouts/layoutSettings.ts
+++ b/desk/src/components/layouts/layoutSettings.ts
@@ -1,3 +1,4 @@
+import { __ } from "@/translation";
 import LucideBookOpen from "~icons/lucide/book-open";
 import LucideCloudLightning from "~icons/lucide/cloud-lightning";
 import LucideContact2 from "~icons/lucide/contact-2";
@@ -7,32 +8,32 @@ import PhoneIcon from "../icons/PhoneIcon.vue";
 
 export const agentPortalSidebarOptions = [
   {
-    label: "Tickets",
+    label: __("Tickets"),
     icon: LucideTicket,
     to: "TicketsAgent",
   },
   {
-    label: "Knowledge Base",
+    label: __("Knowledge Base"),
     icon: LucideBookOpen,
     to: "AgentKnowledgeBase",
   },
   {
-    label: "Canned responses",
+    label: __("Canned Responses"),
     icon: LucideCloudLightning,
     to: "CannedResponses",
   },
   {
-    label: "Customers",
+    label: __("Customers"),
     icon: OrganizationsIcon,
     to: "CustomerList",
   },
   {
-    label: "Contacts",
+    label: __("Contacts"),
     icon: LucideContact2,
     to: "ContactList",
   },
   {
-    label: "Call Logs",
+    label: __("Call Logs"),
     icon: PhoneIcon,
     to: "CallLogs",
   },
@@ -40,12 +41,12 @@ export const agentPortalSidebarOptions = [
 
 export const customerPortalSidebarOptions = [
   {
-    label: "Tickets",
+    label: __("Tickets"),
     icon: LucideTicket,
     to: "TicketsCustomer",
   },
   {
-    label: "Knowledge Base",
+    label: __("Knowledge Base"),
     icon: LucideBookOpen,
     to: "CustomerKnowledgeBase",
   },
diff --git a/desk/src/components/ticket-agent/TicketActivityPanel.vue b/desk/src/components/ticket-agent/TicketActivityPanel.vue
index 27a5476329..cf8672667f 100644
--- a/desk/src/components/ticket-agent/TicketActivityPanel.vue
+++ b/desk/src/components/ticket-agent/TicketActivityPanel.vue
@@ -23,7 +23,7 @@
       <div v-else class="flex items-center justify-center flex-col mt-20">
         <LoadingIndicator :scale="8" class="text-ink-gray-5" />
         <p class="text-xl font-medium text-ink-gray-5 absolute top-[50%]">
-          Loading...
+          {{ __("Loading...") }}
         </p>
       </div>
     </TabPanel>
@@ -54,6 +54,7 @@ import {
 } from "@/components/icons";
 import { useActiveTabManager } from "@/composables/useActiveTabManager";
 import { useTelephonyStore } from "@/stores/telephony";
+import { __ } from "@/translation";
 import {
   ActivitiesSymbol,
   FeedbackActivity,
@@ -82,17 +83,17 @@ const tabs: ComputedRef<TabObject[]> = computed(() => {
   const _tabs: TabObject[] = [
     {
       name: "activity",
-      label: "Activity",
+      label: __("Activity"),
       icon: ActivityIcon,
     },
     {
       name: "email",
-      label: "Emails",
+      label: __("Emails"),
       icon: EmailIcon,
     },
     {
       name: "comment",
-      label: "Comments",
+      label: __("Comments"),
       icon: CommentIcon,
     },
   ];
@@ -100,7 +101,7 @@ const tabs: ComputedRef<TabObject[]> = computed(() => {
   if (isCallingEnabled.value) {
     _tabs.push({
       name: "call",
-      label: "Calls",
+      label: __("Calls"),
       icon: PhoneIcon,
     });
   }
diff --git a/desk/src/components/ticket-agent/TicketContactTab.vue b/desk/src/components/ticket-agent/TicketContactTab.vue
index 1de3a06838..6c155ea698 100644
--- a/desk/src/components/ticket-agent/TicketContactTab.vue
+++ b/desk/src/components/ticket-agent/TicketContactTab.vue
@@ -25,7 +25,7 @@
             @click="
               copyToClipboard(
                 contact.data.email_id,
-                `'${contact.data.email_id}' copied to clipboard`
+                __('{0} copied to clipboard', [contact.data.email_id])
               )
             "
           />
@@ -62,18 +62,18 @@
       <div class="px-5 border-t pb-2.5" v-for="section in sections">
         <Section
           :key="section.label"
-          :label="section.label"
+          :label="__(section.label)"
           :hideLabel="section.hideLabel"
           :opened="section.opened"
         >
           <template #header="{ opened, hide, toggle }">
             <div class="flex gap-2.5 items-center py-[13px] justify-between">
-              <Tooltip :text="section.tooltipMessage">
+              <Tooltip :text="__(section.tooltipMessage)">
                 <span
                   class="text-ink-gray-8 font-medium text-base cursor-pointer select-none"
                   @click="toggle"
                 >
-                  {{ section.label }}
+                  {{ __(section.label) }}
                 </span>
               </Tooltip>
               <LucideChevronDown
@@ -91,7 +91,7 @@
               @click="openTicket(ticket.name)"
             >
               <p class="text-base text-ink-gray-8 max-w-[60%] truncate">
-                {{ ticket.subject }}
+                {{ __(ticket.subject) }}
               </p>
               <div class="flex items-end justify-between">
                 <p class="text-base text-ink-gray-5">
@@ -104,7 +104,7 @@
                   class="px-1.5 py-[3px] text-sm rounded-sm max-w-[80px] text-center truncate h-5"
                   :class="getStatusColor(ticket.status)"
                 >
-                  {{ ticket.status }}
+                  {{ __(ticket.status) }}
                 </p>
               </div>
             </li>
@@ -118,6 +118,7 @@
 <script setup lang="ts">
 import { useTelephonyStore } from "@/stores/telephony";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
+import { __ } from "@/translation";
 import { RecentSimilarTicketsSymbol, TicketContactSymbol } from "@/types";
 import { copyToClipboard } from "@/utils";
 import dayjs from "dayjs";
diff --git a/desk/src/components/ticket-agent/TicketDetailsTab.vue b/desk/src/components/ticket-agent/TicketDetailsTab.vue
index 7f516ce7b3..cc98288aab 100644
--- a/desk/src/components/ticket-agent/TicketDetailsTab.vue
+++ b/desk/src/components/ticket-agent/TicketDetailsTab.vue
@@ -23,8 +23,8 @@
               :id="field.fieldname"
               :class="section.group ? 'flex-1' : 'w-full'"
               :page-length="10"
-              :label="field.label"
-              :placeholder="field.placeholder"
+              :label="__(field.label)"
+              :placeholder="__(field.placeholder)"
               :doctype="field.doctype"
               :modelValue="field.value"
               :required="field.required"
diff --git a/desk/src/components/ticket-agent/TicketHeader.vue b/desk/src/components/ticket-agent/TicketHeader.vue
index 8d6a300fd4..26f7e11361 100644
--- a/desk/src/components/ticket-agent/TicketHeader.vue
+++ b/desk/src/components/ticket-agent/TicketHeader.vue
@@ -28,7 +28,7 @@
           <Button
             v-for="action in normalActions"
             :key="action.label"
-            :label="action.label"
+            :label="__(action.label)"
             @click="action.onClick()"
           >
             <template v-if="action.icon" #prefix>
@@ -53,7 +53,7 @@
         <!-- Status -->
         <Dropdown :options="statusDropdown" placement="right">
           <template #default="{ open }">
-            <Button :label="ticket.doc.status" ref="statusRef">
+            <Button :label="__(ticket.doc.status)" ref="statusRef">
               <template #prefix>
                 <IndicatorIcon
                   :class="
@@ -94,6 +94,7 @@ import { useShortcut } from "@/composables/shortcuts";
 import { useView } from "@/composables/useView";
 import { globalStore } from "@/stores/globalStore";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
+import { __ } from "@/translation";
 import {
   ActivitiesSymbol,
   CustomizationSymbol,
@@ -165,12 +166,12 @@ const statusDropdown = computed(() => {
   }));
 });
 const breadcrumbs = computed(() => {
-  let items = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
+  let items = [{ label: __("Tickets"), route: { name: "TicketsAgent" } }];
   if (route.query.view) {
     const currView: ComputedRef<View> = findView(route.query.view as string);
     if (currView) {
       items.push({
-        label: currView.value?.label,
+        label: __(currView.value?.label),
         icon: getIcon(currView.value?.icon),
         route: { name: "TicketsAgent", query: { view: currView.value?.name } },
       });
diff --git a/desk/src/components/ticket-agent/TicketNavigation.vue b/desk/src/components/ticket-agent/TicketNavigation.vue
index 4900e149dc..5e05068e9b 100644
--- a/desk/src/components/ticket-agent/TicketNavigation.vue
+++ b/desk/src/components/ticket-agent/TicketNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-1">
+  <div class="flex gap-1 rtl:flex-row-reverse">
     <Tooltip
       :text="
         getPreviousTicket()
diff --git a/desk/src/components/ticket-agent/TicketSLA.vue b/desk/src/components/ticket-agent/TicketSLA.vue
index 66f8810196..7cb853c356 100644
--- a/desk/src/components/ticket-agent/TicketSLA.vue
+++ b/desk/src/components/ticket-agent/TicketSLA.vue
@@ -10,7 +10,7 @@
           @click="
             copyToClipboard(
               ticket.doc.name,
-              `Ticket #${ticket.doc.name} copied to clipboard`
+              __(`Ticket #{0} copied to clipboard`, [ticket.doc.name])
             )
           "
           class="cursor-copy"
@@ -22,22 +22,22 @@
           v-if="!ticket.doc.via_customer_portal"
           class="text-ink-gray-4 flex items-center"
         >
-          <span class="text-ink-gray-4 mr-[6px]">via</span>
+          <span class="text-ink-gray-4 mr-[6px]">{{ __("via") }}</span>
           <EmailIcon class="size-4 inline-block mr-1" />
-          <span class="">Email</span>
+          <span class="">{{ __("Email") }}</span>
         </div>
         <!-- Via Portal -->
         <div v-else class="text-ink-gray-4 flex items-center">
-          <span class="text-ink-gray-4 mr-[6px]">via</span>
+          <span class="text-ink-gray-4 mr-[6px]">{{ __("via") }}</span>
           <GlobeIcon class="size-4 inline-block mr-1" />
-          <span class="font-medium">Portal</span>
+          <span class="font-medium">{{ __("Portal") }}</span>
         </div>
       </div>
       <!-- divider -->
       <div class="border-l border-outline-gray-2 h-[13px]" />
       <!-- First Response -->
       <div class="flex items-center gap-1">
-        <span>First Response</span>
+        <span>{{ __("First Response") }}</span>
         <Tooltip
           :text="dateFormat(firstResponse.date, dateTooltipFormat)"
           :hover-delay="0.25"
@@ -54,7 +54,7 @@
       <div class="border-l border-outline-gray-2 h-[13px]" />
       <!-- Resolution by -->
       <div class="flex items-center gap-1">
-        <span>Resolution </span>
+        <span>{{ __("Resolution") }}</span>
         <Tooltip
           :text="dateFormat(resolutionBy.date, dateTooltipFormat)"
           :hover-delay="0.25"
@@ -77,6 +77,7 @@
 
 <script setup lang="ts">
 import { useShortcut } from "@/composables/shortcuts";
+import { __ } from "@/translation";
 import { TicketSymbol } from "@/types";
 import {
   copyToClipboard,
@@ -111,7 +112,7 @@ const firstResponse = computed(() => {
       ticket.value.doc.creation
     );
     return {
-      label: `Fulfilled in ${responseBy}`,
+      label: __("Fulfilled in {0}", ...[responseBy]),
       color: "green",
       date: ticket.value.doc.first_responded_on,
     };
diff --git a/desk/src/components/ticket-agent/TicketSidebar.vue b/desk/src/components/ticket-agent/TicketSidebar.vue
index 37a1f04b39..ea6c0c0d07 100644
--- a/desk/src/components/ticket-agent/TicketSidebar.vue
+++ b/desk/src/components/ticket-agent/TicketSidebar.vue
@@ -1,5 +1,8 @@
 <template>
-  <Resizer class="flex flex-col justify-between border-l" side="right">
+  <Resizer
+    class="flex flex-col justify-between border-l rtl:border-r"
+    side="right"
+  >
     <TabButtons
       :buttons="tabs"
       v-model="currentTab"
diff --git a/desk/src/components/ticket/ActivityHeader.vue b/desk/src/components/ticket/ActivityHeader.vue
index 308cca3de1..7ffbda0687 100644
--- a/desk/src/components/ticket/ActivityHeader.vue
+++ b/desk/src/components/ticket/ActivityHeader.vue
@@ -13,17 +13,17 @@
       <template #prefix>
         <FeatherIcon name="plus" class="h-4 w-4" />
       </template>
-      <span>{{ "New Email" }}</span>
+      <span>{{ __("New Email") }}</span>
     </Button>
     <Button
-      v-else-if="title == 'Comments'"
+      v-else-if="title == __('Comments')"
       variant="solid"
       @click="communicationAreaRef?.toggleCommentBox() ?? toggleCommentBox()"
     >
       <template #prefix>
         <FeatherIcon name="plus" class="h-4 w-4" />
       </template>
-      <span>{{ "New Comment" }}</span>
+      <span>{{ __("New Comment") }}</span>
     </Button>
     <Dropdown v-else-if="title == 'Calls'" :options="callActions" @click.stop>
       <template v-slot="{ open }">
@@ -31,7 +31,7 @@
           <template #prefix>
             <FeatherIcon name="plus" class="h-4 w-4" />
           </template>
-          <span>{{ "New" }}</span>
+          <span>{{ __("New") }}</span>
           <template #suffix>
             <FeatherIcon
               :name="open ? 'chevron-up' : 'chevron-down'"
@@ -47,7 +47,7 @@
           <template #prefix>
             <FeatherIcon name="plus" class="h-4 w-4" />
           </template>
-          <span>{{ "New" }}</span>
+          <span>{{ __("New") }}</span>
           <template #suffix>
             <FeatherIcon
               :name="open ? 'chevron-up' : 'chevron-down'"
@@ -68,8 +68,9 @@
 <script setup lang="ts">
 import { CommentIcon, EmailIcon, PhoneIcon } from "@/components/icons";
 import CallLogModal from "@/pages/call-logs/CallLogModal.vue";
-import { useTelephonyStore } from "@/stores/telephony";
 import { toggleCommentBox, toggleEmailBox } from "@/pages/ticket/modalStates";
+import { useTelephonyStore } from "@/stores/telephony";
+import { __ } from "@/translation";
 import { Dropdown } from "frappe-ui";
 import { storeToRefs } from "pinia";
 import { computed, h, inject, ref, Ref } from "vue";
@@ -91,13 +92,13 @@ const defaultActions = computed(() => {
   let actions = [
     {
       icon: h(EmailIcon, { class: "h-4 w-4" }),
-      label: "Email",
+      label: __("Email"),
       onClick: () =>
         communicationAreaRef?.value?.toggleEmailBox() ?? toggleEmailBox(),
     },
     {
       icon: h(CommentIcon, { class: "h-4 w-4" }),
-      label: "Comment",
+      label: __("Comment"),
       onClick: () =>
         communicationAreaRef?.value?.toggleCommentBox() ?? toggleCommentBox(),
     },
@@ -114,12 +115,12 @@ const callActions = computed(() => {
   let actions = [
     {
       icon: h(PhoneIcon, { class: "h-4 w-4" }),
-      label: "Make a Call",
+      label: __("Make a Call"),
       onClick: () => makeCall(),
     },
     {
       icon: "edit-3",
-      label: "Log a Call",
+      label: __("Log a Call"),
       onClick: () => {
         showCallLogModal.value = true;
       },
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index 82011f6f8c..1828f0cf6c 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -1,5 +1,5 @@
 <template>
-  <ActivityHeader :title="title" />
+  <ActivityHeader :title="__(title)" />
   <FadedScrollableDiv
     class="flex flex-col flex-1 overflow-y-scroll"
     :mask-length="20"
diff --git a/desk/src/pages/ticket/TicketAgent.vue b/desk/src/pages/ticket/TicketAgent.vue
index afcea75acb..e02e48a5ab 100644
--- a/desk/src/pages/ticket/TicketAgent.vue
+++ b/desk/src/pages/ticket/TicketAgent.vue
@@ -28,6 +28,7 @@ import { useTicket } from "@/composables/useTicket";
 import { ticketsToNavigate } from "@/composables/useTicketNavigation";
 import { globalStore } from "@/stores/globalStore";
 import { useTelephonyStore } from "@/stores/telephony";
+import { __ } from "@/translation";
 import {
   ActivitiesSymbol,
   AssigneeSymbol,
@@ -139,7 +140,9 @@ onMounted(() => {
   $socket.on("ticket_update", (data: TicketUpdateData) => {
     if (data.ticket_id === ticket.value?.name) {
       // Notify the user about the update
-      toast.info(`User ${data.user} updated ${data.field} to ${data.value}`);
+      toast.info(
+        __(`User ${data.user} updated ${data.field} to ${data.value}`)
+      );
     }
   });
 });
diff --git a/desk/src/pages/ticket/Tickets.vue b/desk/src/pages/ticket/Tickets.vue
index 2a8855bbd1..78d55d5851 100644
--- a/desk/src/pages/ticket/Tickets.vue
+++ b/desk/src/pages/ticket/Tickets.vue
@@ -3,7 +3,7 @@
     <LayoutHeader>
       <template #left-header>
         <ViewBreadcrumbs
-          label="Tickets"
+          :label="__('Tickets')"
           :route-name="isCustomerPortal ? 'TicketsCustomer' : 'TicketsAgent'"
           :options="dropdownOptions"
           :dropdown-actions="viewActions"
@@ -71,6 +71,7 @@ import { dayjs } from "@/dayjs";
 import { useAuthStore } from "@/stores/auth";
 import { globalStore } from "@/stores/globalStore";
 import { useTicketStatusStore } from "@/stores/ticketStatus";
+import { __ } from "@/translation";
 import { View } from "@/types";
 import { getIcon, isCustomerPortal } from "@/utils";
 import { Badge, FeatherIcon, toast, Tooltip, usePageMeta } from "frappe-ui";
@@ -101,7 +102,7 @@ const { getStatus } = useTicketStatusStore();
 const listSelections = ref(new Set());
 const selectBannerActions = [
   {
-    label: "Export",
+    label: __("Export"),
     icon: "download",
     onClick: (selections: Set<string>) => {
       listSelections.value = new Set(selections);
@@ -117,8 +118,8 @@ const options = {
       custom: ({ item }) => {
         const status = getStatus(item);
         const label = isCustomerPortal.value
-          ? status?.["label_customer"]
-          : status?.["label_agent"];
+          ? __(status?.["label_customer"])
+          : __(status?.["label_agent"]);
         return h(
           "div",
           { class: "flex items-center space-x-2 justify-start w-full" },
@@ -132,7 +133,7 @@ const options = {
     agreement_status: {
       custom: ({ item }) => {
         return h(Badge, {
-          label: item,
+          label: __(item),
           theme: slaStatusColorMap[item],
           variant: "outline",
         });
@@ -165,20 +166,20 @@ const options = {
 function handle_response_by_field(row: any, item: string) {
   if (!row.first_responded_on && dayjs(item).isBefore(new Date())) {
     return h(Badge, {
-      label: "Failed",
+      label: __("Failed"),
       theme: "red",
       variant: "outline",
     });
   }
   if (row.first_responded_on && dayjs(row.first_responded_on).isBefore(item)) {
     return h(Badge, {
-      label: "Fulfilled",
+      label: __("Fulfilled"),
       theme: "green",
       variant: "outline",
     });
   } else if (dayjs(row.first_responded_on).isAfter(item)) {
     return h(Badge, {
-      label: "Failed",
+      label: __("Failed"),
       theme: "red",
       variant: "outline",
     });
@@ -197,19 +198,19 @@ function handle_resolution_by_field(row: any, item: string) {
   const status = getStatus(row.status) || {};
   if (status.category === "Paused") {
     return h(Badge, {
-      label: "Paused",
+      label: __("Paused"),
       theme: "blue",
       variant: "outline",
     });
   } else if (row.resolution_date && dayjs(row.resolution_date).isBefore(item)) {
     return h(Badge, {
-      label: "Fulfilled",
+      label: __("Fulfilled"),
       theme: "green",
       variant: "outline",
     });
   } else if (dayjs(row.resolution_date).isAfter(item)) {
     return h(Badge, {
-      label: "Failed",
+      label: __("Failed"),
       theme: "red",
       variant: "outline",
     });
@@ -281,7 +282,7 @@ const dropdownOptions = computed(() => {
       group: "Default Views",
       items: [
         {
-          label: "List View",
+          label: __("List View"),
           icon: "align-justify",
           onClick: () =>
             router.push({
@@ -295,29 +296,29 @@ const dropdownOptions = computed(() => {
   // Saved Views
   if (getCurrentUserViews.value?.length !== 0) {
     items.push({
-      group: "Saved Views",
+      group: __("Saved Views"),
       items: parseViews(getCurrentUserViews.value),
     });
   }
   if (pinnedViews.value?.length !== 0) {
     items.push({
-      group: "Private Views",
+      group: __("Private Views"),
       items: parseViews(pinnedViews.value),
     });
   }
   if (publicViews.value?.length !== 0) {
     items.push({
-      group: "Public Views",
+      group: __("Public Views"),
       items: parseViews(publicViews.value),
     });
   }
 
   items.push({
-    group: "Create View",
+    group: __("Create View"),
     hideLabel: true,
     items: [
       {
-        label: "Create View",
+        label: __("Create View"),
         icon: "plus",
         onClick: () => {
           resetState();
@@ -337,11 +338,11 @@ const viewActions = (view) => {
 
   let actions = [
     {
-      group: "Default Views",
+      group: __("Default Views"),
       hideLabel: true,
       items: [
         {
-          label: "Duplicate",
+          label: __("Duplicate"),
           icon: h(FeatherIcon, { name: "copy" }),
           onClick: () => {
             viewDialog.view.label = _view.label + " (New)";
@@ -357,7 +358,7 @@ const viewActions = (view) => {
   ];
   if (!_view.public || isManager) {
     actions[0].items.push({
-      label: "Edit",
+      label: __("Edit"),
       icon: h(EditIcon, { class: "h-4 w-4" }),
       onClick: () => {
         viewDialog.view.label = _view.label;
@@ -369,7 +370,7 @@ const viewActions = (view) => {
     });
     if (!_view.public) {
       actions[0].items.push({
-        label: _view?.pinned ? "Unpin View" : "Pin View",
+        label: _view?.pinned ? __("Unpin View") : __("Pin View"),
         icon: h(_view?.pinned ? UnpinIcon : PinIcon, { class: "h-4 w-4" }),
         onClick: () => {
           const newView = {
@@ -382,7 +383,7 @@ const viewActions = (view) => {
     }
     if (isManager && !isCustomerPortal.value) {
       actions[0].items.push({
-        label: _view?.public ? "Make Private" : "Make Public",
+        label: _view?.public ? __("Make Private") : __("Make Public"),
         icon: h(FeatherIcon, {
           name: _view?.public ? "lock" : "unlock",
           class: "h-4 w-4",
@@ -396,11 +397,12 @@ const viewActions = (view) => {
           if (_view.public) {
             $dialog({
               title: `Make ${_view.label} private?`,
-              message:
-                "This view is currently public. Changing it to private will hide it for all the users.",
+              message: __(
+                "This view is currently public. Changing it to private will hide it for all the users."
+              ),
               actions: [
                 {
-                  label: "Confirm",
+                  label: __("Confirm"),
                   variant: "solid",
                   onClick({ close }) {
                     close();
@@ -416,11 +418,11 @@ const viewActions = (view) => {
       });
     }
     actions.push({
-      group: "Delete View",
+      group: __("Delete View"),
       hideLabel: true,
       items: [
         {
-          label: "Delete",
+          label: __("Delete"),
           icon: "trash-2",
           onClick: () => {
             $dialog({
@@ -433,7 +435,7 @@ const viewActions = (view) => {
               }`,
               actions: [
                 {
-                  label: "Confirm",
+                  label: __("Confirm"),
                   variant: "solid",
                   onClick({ close }) {
                     if (route.query.view === _view.name) {
diff --git a/desk/src/translation.ts b/desk/src/translation.ts
index f5407afd41..bf94ab548c 100644
--- a/desk/src/translation.ts
+++ b/desk/src/translation.ts
@@ -7,15 +7,15 @@ function getTranslatedMessage(message: string): string {
 }
 
 function translate(message: string): string;
-function translate(message: string, ...args: string[]): string;
-function translate(message: string, ...args: string[]): string {
-    const translatedMessage = getTranslatedMessage(message)
-    if (args.length === 0) {
-        return translatedMessage;
-    }
-    return translatedMessage.replace(/{(\d+)}/g, function (match, index) {
-        return typeof args[index] != 'undefined' ? args[index] : match;
-    });
+function translate(message: string, ...args: any[]): string;
+function translate(message: string, ...args: any[]): string {
+  const translatedMessage = getTranslatedMessage(message);
+  if (args.length === 0) {
+    return translatedMessage;
+  }
+  return translatedMessage.replace(/{(\d+)}/g, function (match, index) {
+    return typeof args[index] != "undefined" ? args[index] : match;
+  });
 }
 
 export const __ = translate;
diff --git a/desk/src/utils.ts b/desk/src/utils.ts
index f625fd23e5..1dcb53e189 100644
--- a/desk/src/utils.ts
+++ b/desk/src/utils.ts
@@ -7,6 +7,7 @@ import { h, markRaw, ref } from "vue";
 import zod from "zod";
 import TicketIcon from "./components/icons/TicketIcon.vue";
 import { getMeta } from "./stores/meta";
+import { __ } from "./translation";
 /**
  * Wrapper to create toasts, supplied with default options.
  * https://frappeui.com/components/toast.html
@@ -51,7 +52,7 @@ export function dateFormat(date, format?: string) {
 }
 
 export function timeAgo(date) {
-  return useTimeAgo(date).value;
+  return __(useTimeAgo(date).value);
 }
 
 export const dateTooltipFormat = "ddd, MMM D, YYYY h:mm A";
diff --git a/desk/tailwind.config.js b/desk/tailwind.config.js
index 6738d90863..229cc6aa3e 100644
--- a/desk/tailwind.config.js
+++ b/desk/tailwind.config.js
@@ -27,6 +27,7 @@ export default {
   },
   plugins: [
     require("@tailwindcss/typography"),
+    require("tailwindcss-rtl"),
     function ({ addUtilities }) {
       addUtilities({
         ".hide-scrollbar": {
diff --git a/desk/tsconfig.json b/desk/tsconfig.json
index 3760afec5e..bad2b0c09c 100644
--- a/desk/tsconfig.json
+++ b/desk/tsconfig.json
@@ -1,5 +1,19 @@
 {
-	"extends": "frappe-ui/tsconfig.base.json",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"target": "es2022",
+		"module": "esnext",
+		"moduleResolution":"node",
+		"jsx": "preserve",
+		"paths": {
+			"@/*": ["./src/*"]
+		},
+		"types": [
+			"unplugin-icons/types/vue",
+			"vite/client"
+		],
+	},
 	"include": ["src","src/*","src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx","src/**/*.vue"],
 	"exclude": ["node_modules"]
 }
diff --git a/helpdesk/www/helpdesk/index.py b/helpdesk/www/helpdesk/index.py
index b119522252..3fd995d127 100644
--- a/helpdesk/www/helpdesk/index.py
+++ b/helpdesk/www/helpdesk/index.py
@@ -2,6 +2,7 @@
 from frappe import _
 from frappe.integrations.frappe_providers.frappecloud_billing import is_fc_site
 from frappe.utils import cint
+from frappe.utils.jinja_globals import is_rtl
 from frappe.utils.telemetry import capture
 
 no_cache = 1
@@ -25,6 +26,7 @@ def get_context_for_dev():
 
 
 def get_boot():
+    print("\n\n", is_rtl(), "\n\n")
     return frappe._dict(
         {
             "default_route": get_default_route(),
@@ -36,6 +38,7 @@ def get_boot():
             "session_user": frappe.session.user,
             "date_format": frappe.get_system_settings("date_format"),
             "time_format": frappe.get_system_settings("time_format"),
+            "dir": "rtl" if is_rtl() else "ltr",
         }
     )
 
diff --git a/yarn.lock b/yarn.lock
index ae544c7ecf..2e6332ce3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6067,6 +6067,11 @@ tagged-tag@^1.0.0:
   resolved "https://registry.yarnpkg.com/tagged-tag/-/tagged-tag-1.0.0.tgz#a0b5917c2864cba54841495abfa3f6b13edcf4d6"
   integrity sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==
 
+tailwindcss-rtl@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-rtl/-/tailwindcss-rtl-0.9.0.tgz#270da04492081620478ebf73819fc285fe724a54"
+  integrity sha512-y7yC8QXjluDBEFMSX33tV6xMYrf0B3sa+tOB5JSQb6/G6laBU313a+Z+qxu55M1Qyn8tDMttjomsA8IsJD+k+w==
+
 tailwindcss@^3.2.7, tailwindcss@^3.4.15:
   version "3.4.18"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.18.tgz#9fa9650aace186644b608242f1e57d2d55593301"
