diff --git a/frontend/src/components/AttendanceCalendar.vue b/frontend/src/components/AttendanceCalendar.vue
index e8222f200d..cc725044f1 100644
--- a/frontend/src/components/AttendanceCalendar.vue
+++ b/frontend/src/components/AttendanceCalendar.vue
@@ -48,7 +48,7 @@
 				<div v-for="status in summaryStatuses" class="flex flex-col gap-1">
 					<div class="flex flex-row gap-1 items-center">
 						<span class="rounded full h-3 w-3" :class="`bg-${colorMap[status]}`" />
-						<span class="text-gray-600 text-sm font-medium leading-5"> {{ status }} </span>
+						<span class="text-gray-600 text-sm font-medium leading-5"> {{ __(status) }} </span>
 					</div>
 					<span class="text-gray-800 text-base font-semibold leading-6 mx-auto">
 						{{ summary[status] || 0 }}
@@ -76,6 +76,7 @@ const colorMap = {
 	Holiday: "gray-100",
 }
 
+// __("Present"), __("Half Day"), __("Absent"), __("On Leave"), __("Work From Home")
 const summaryStatuses = ["Present", "Half Day", "Absent", "On Leave"]
 
 const summary = computed(() => {
@@ -104,7 +105,17 @@ const getEventOnDate = (date) => {
 	return calendarEvents.data[firstOfMonth.value.date(date).format("YYYY-MM-DD")]
 }
 
-const DAYS = ["S", "M", "T", "W", "T", "F", "S"]
+const getFirstLetter = (s) => Array.from(s.trim())[0] // Unicode
+
+const DAYS = [
+	getFirstLetter(__("Sunday")),
+	getFirstLetter(__("Monday")),
+	getFirstLetter(__("Tuesday")),
+	getFirstLetter(__("Wednesday")),
+	getFirstLetter(__("Thursday")),
+	getFirstLetter(__("Friday")),
+	getFirstLetter(__("Saturday")),
+]
 
 //resources
 const calendarEvents = createResource({
diff --git a/frontend/src/components/AttendanceRequestItem.vue b/frontend/src/components/AttendanceRequestItem.vue
index 363fda46b3..c6c7d09930 100644
--- a/frontend/src/components/AttendanceRequestItem.vue
+++ b/frontend/src/components/AttendanceRequestItem.vue
@@ -10,15 +10,13 @@
 					<span>{{ props.doc.attendance_dates || getDates(props.doc) }}</span>
 					<span v-if="props.doc.to_date">
 						<span class="whitespace-pre"> &middot; </span>
-						<span class="whitespace-nowrap">{{
-							`${props.doc.total_attendance_days || getTotalDays(props.doc)}d`
-						}}</span>
+						<span class="whitespace-nowrap">{{ __("{0}d", [props.doc.total_attendance_days]) }}</span>
 					</span>
 				</div>
 			</div>
 		</template>
 		<template #right>
-			<Badge variant="outline" :theme="colorMap[status]" :label="status" size="md" />
+			<Badge variant="outline" :theme="colorMap[status]" :label="__(status)" size="md" />
 			<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 		</template>
 	</ListItem>
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 24f2dd5555..89f2bc669e 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -6,7 +6,7 @@
 					<div class="flex flex-row justify-between items-center">
 						<div class="flex flex-row items-center gap-2">
 							<h2 class="text-xl font-bold text-gray-900">
-								{{ props.pageTitle }}
+								{{ props.pageTitle || __("Frappe HR") }}
 							</h2>
 						</div>
 						<div class="flex flex-row items-center gap-3 ml-auto">
@@ -62,7 +62,7 @@ const props = defineProps({
 	pageTitle: {
 		type: String,
 		required: false,
-		default: "Frappe HR",
+		default: "",
 	},
 })
 </script>
diff --git a/frontend/src/components/BottomTabs.vue b/frontend/src/components/BottomTabs.vue
index 804aa30468..416dd787f4 100644
--- a/frontend/src/components/BottomTabs.vue
+++ b/frontend/src/components/BottomTabs.vue
@@ -31,33 +31,36 @@ import LeaveIcon from "@/components/icons/LeaveIcon.vue"
 import ExpenseIcon from "@/components/icons/ExpenseIcon.vue"
 import SalaryIcon from "@/components/icons/SalaryIcon.vue"
 import AttendanceIcon from "@/components/icons/AttendanceIcon.vue"
+import { inject } from "vue"
+
+const __ = inject("$translate")
 
 const route = useRoute()
 
 const tabItems = [
 	{
 		icon: HomeIcon,
-		title: "Home",
+		title: __("Home"),
 		route: "/home",
 	},
 	{
 		icon: AttendanceIcon,
-		title: "Attendance",
+		title: __("Attendance"),
 		route: "/dashboard/attendance",
 	},
 	{
 		icon: LeaveIcon,
-		title: "Leaves",
+		title: __("Leaves"),
 		route: "/dashboard/leaves",
 	},
 	{
 		icon: ExpenseIcon,
-		title: "Expenses",
+		title: __("Expenses"),
 		route: "/dashboard/expense-claims",
 	},
 	{
 		icon: SalaryIcon,
-		title: "Salary",
+		title: __("Salary"),
 		route: "/dashboard/salary-slips",
 	},
 ]
diff --git a/frontend/src/components/CheckInPanel.vue b/frontend/src/components/CheckInPanel.vue
index db748ebfab..2282ae40a7 100644
--- a/frontend/src/components/CheckInPanel.vue
+++ b/frontend/src/components/CheckInPanel.vue
@@ -1,10 +1,12 @@
 <template>
 	<div class="flex flex-col bg-white rounded w-full py-6 px-4 border-none">
-		<h2 class="text-lg font-bold text-gray-900">Hey, {{ employee?.data?.first_name }} 👋</h2>
+		<h2 class="text-lg font-bold text-gray-900">
+			{{ __("Hey, {0} 👋", [employee?.data?.first_name]) }}
+		</h2>
 
 		<template v-if="settings.data?.allow_employee_checkin_from_mobile_app">
 			<div class="font-medium text-sm text-gray-500 mt-1.5" v-if="lastLog">
-				<span>Last {{ lastLogType }} was at {{ formatTimestamp(lastLog.time) }}</span>
+				<span>{{ __("Last {0} was at {1}", [__(lastLogType), formatTimestamp(lastLog.time)]) }}</span>
 				<span class="whitespace-pre"> &middot; </span>
 				<router-link :to="{ name: 'EmployeeCheckinListView' }" v-slot="{ navigate }">
 					<span @click="navigate" class="underline">View List</span>
@@ -68,7 +70,7 @@
 			</template>
 
 			<Button variant="solid" class="w-full py-5 text-sm" @click="submitLog(nextAction.action)">
-				Confirm {{ nextAction.label }}
+				{{ __("Confirm {0}", [nextAction.label]) }}
 			</Button>
 		</div>
 	</ion-modal>
@@ -86,6 +88,7 @@ const DOCTYPE = "Employee Checkin"
 const socket = inject("$socket")
 const employee = inject("$employee")
 const dayjs = inject("$dayjs")
+const __ = inject("$translate")
 const checkinTimestamp = ref(null)
 const latitude = ref(0)
 const longitude = ref(0)
@@ -117,18 +120,18 @@ const lastLogType = computed(() => {
 
 const nextAction = computed(() => {
 	return lastLog?.value?.log_type === "IN"
-		? { action: "OUT", label: "Check Out" }
-		: { action: "IN", label: "Check In" }
+		? { action: "OUT", label: __("Check Out") }
+		: { action: "IN", label: __("Check In") }
 })
 
 function handleLocationSuccess(position) {
 	latitude.value = position.coords.latitude
 	longitude.value = position.coords.longitude
 
-	locationStatus.value = `
-		Latitude: ${Number(latitude.value).toFixed(5)}°,
-		Longitude: ${Number(longitude.value).toFixed(5)}°
-	`
+	locationStatus.value = [
+		__("Latitude: {0}°", [Number(latitude.value).toFixed(5)]),
+		__("Longitude: {0}°", [Number(longitude.value).toFixed(5)]),
+	].join(", ")
 }
 
 function handleLocationError(error) {
@@ -138,9 +141,9 @@ function handleLocationError(error) {
 
 const fetchLocation = () => {
 	if (!navigator.geolocation) {
-		locationStatus.value = "Geolocation is not supported by your current browser"
+		locationStatus.value = __("Geolocation is not supported by your current browser")
 	} else {
-		locationStatus.value = "Locating..."
+		locationStatus.value = __("Locating...")
 		navigator.geolocation.getCurrentPosition(handleLocationSuccess, handleLocationError)
 	}
 }
@@ -154,7 +157,7 @@ const handleEmployeeCheckin = () => {
 }
 
 const submitLog = (logType) => {
-	const action = logType === "IN" ? "Check-in" : "Check-out"
+	const actionLabel = logType === "IN" ? __("Check-in") : __("Check-out")
 
 	checkins.insert.submit(
 		{
@@ -168,8 +171,8 @@ const submitLog = (logType) => {
 			onSuccess() {
 				modalController.dismiss()
 				toast({
-					title: "Success",
-					text: `${action} successful!`,
+					title: __("Success"),
+					text: __("{0} successful!", [actionLabel]),
 					icon: "check-circle",
 					position: "bottom-center",
 					iconClasses: "text-green-500",
@@ -177,8 +180,8 @@ const submitLog = (logType) => {
 			},
 			onError() {
 				toast({
-					title: "Error",
-					text: `${action} failed!`,
+					title: __("Error"),
+					text: __("{0} failed!", [actionLabel]),
 					icon: "alert-circle",
 					position: "bottom-center",
 					iconClasses: "text-red-500",
diff --git a/frontend/src/components/EmployeeAdvanceBalance.vue b/frontend/src/components/EmployeeAdvanceBalance.vue
index 6a8a27098c..3b645be476 100644
--- a/frontend/src/components/EmployeeAdvanceBalance.vue
+++ b/frontend/src/components/EmployeeAdvanceBalance.vue
@@ -18,7 +18,7 @@
 		>
 			<div class="flex flex-col bg-white w-full py-5 px-3.5 mt-0 border-none">
 				<Button @click="navigate" variant="subtle" class="py-5 text-base">
-					Request an Advance
+					{{ __("Request an Advance") }}
 				</Button>
 			</div>
 		</router-link>
diff --git a/frontend/src/components/EmployeeAdvanceItem.vue b/frontend/src/components/EmployeeAdvanceItem.vue
index 0cc3b529d9..309d0aeaea 100644
--- a/frontend/src/components/EmployeeAdvanceItem.vue
+++ b/frontend/src/components/EmployeeAdvanceItem.vue
@@ -8,17 +8,18 @@
 			<EmployeeAdvanceIcon class="h-5 w-5 mt-[3px] text-gray-500" />
 			<div class="flex flex-col items-start gap-1">
 				<div v-if="props.doc.balance_amount" class="text-lg font-bold text-gray-800 leading-6">
-					{{ `${currency} ${props.doc.balance_amount} /` }}
+					{{ formatCurrency(props.doc.balance_amount, props.doc.currency) }}
+					/
 					<span class="text-gray-600">
-						{{ `${currency} ${props.doc.paid_amount}` }}
+						{{ formatCurrency(props.doc.paid_amount, props.doc.currency) }}
 					</span>
 				</div>
 				<div v-else class="text-lg font-bold text-gray-800 leading-6">
-					{{ `${currency} ${props.doc.advance_amount}` }}
+					{{ formatCurrency(props.doc.advance_amount, props.doc.currency) }}
 				</div>
 				<div class="text-xs font-normal text-gray-500">
 					<span>
-						{{ props.doc.purpose }}
+						{{ __(props.doc.purpose) }}
 					</span>
 					<span class="whitespace-pre"> &middot; </span>
 					<span class="whitespace-nowrap">
@@ -28,7 +29,7 @@
 			</div>
 		</template>
 		<template #right>
-			<Badge variant="outline" :theme="colorMap[status]" :label="status" size="md" />
+			<Badge variant="outline" :theme="colorMap[status]" :label="__(status, null, 'Employee Advance')" size="md" />
 			<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 		</template>
 	</ListItem>
@@ -38,10 +39,9 @@
 import { FeatherIcon, Badge } from "frappe-ui"
 import { computed, inject } from "vue"
 
-import { getCurrencySymbol } from "@/data/currencies"
-
 import ListItem from "@/components/ListItem.vue"
 import EmployeeAdvanceIcon from "@/components/icons/EmployeeAdvanceIcon.vue"
+import { formatCurrency } from "@/utils/formatters";
 
 const dayjs = inject("$dayjs")
 const props = defineProps({
@@ -66,8 +66,6 @@ const colorMap = {
 	"Partly Claimed and Returned": "orange",
 }
 
-const currency = computed(() => getCurrencySymbol(props.doc.currency))
-
 const postingDate = computed(() => {
 	return dayjs(props.doc.posting_date).format("D MMM")
 })
diff --git a/frontend/src/components/ExpenseAdvancesTable.vue b/frontend/src/components/ExpenseAdvancesTable.vue
index 06c17da7f7..5babbaba80 100644
--- a/frontend/src/components/ExpenseAdvancesTable.vue
+++ b/frontend/src/components/ExpenseAdvancesTable.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-row justify-between items-center">
 		<h2 class="text-base font-semibold text-gray-800">
-			Settle against Advances
+			{{ __("Settle against Advances") }}
 		</h2>
 	</div>
 
@@ -32,8 +32,10 @@
 						</div>
 						<div class="flex flex-row items-center gap-3 justify-between">
 							<div class="text-xs font-normal text-gray-500">
-								Unclaimed Amount:
-								{{ formatCurrency(advance.unclaimed_amount, currency) }}
+								{{ __("{0}: {1}", [
+									__("Unclaimed Amount"),
+									formatCurrency(advance.unclaimed_amount, currency),
+								]) }}
 							</div>
 						</div>
 					</div>
@@ -58,7 +60,7 @@
 		</div>
 	</div>
 
-	<EmptyState v-else message="No advances found" :isTableField="true" />
+	<EmptyState v-else :message="__('No advances found')" :isTableField="true" />
 </template>
 
 <script setup>
diff --git a/frontend/src/components/ExpenseClaimItem.vue b/frontend/src/components/ExpenseClaimItem.vue
index 6c7e820009..87499824f2 100644
--- a/frontend/src/components/ExpenseClaimItem.vue
+++ b/frontend/src/components/ExpenseClaimItem.vue
@@ -22,7 +22,7 @@
 			</div>
 		</template>
 		<template #right>
-			<Badge variant="outline" :theme="statusMap[status]" :label="status" size="md" />
+			<Badge variant="outline" :theme="statusMap[status]" :label="__(status, null, 'Expense Claim')" size="md" />
 			<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 		</template>
 	</ListItem>
@@ -39,6 +39,7 @@ import { getCompanyCurrency } from "@/data/currencies"
 import { formatCurrency } from "@/utils/formatters"
 
 const dayjs = inject("$dayjs")
+const __ = inject("$translate")
 const props = defineProps({
 	doc: {
 		type: Object,
@@ -80,11 +81,10 @@ const status = computed(() => {
 })
 
 const claimTitle = computed(() => {
-	let title = props.doc.expense_type
+	let title = __(props.doc.expense_type)
 	if (props.doc.total_expenses > 1) {
-		title += ` & ${props.doc.total_expenses - 1} more`
+		title = __("{0} & {1} more", [title, props.doc.total_expenses - 1])
 	}
-
 	return title
 })
 
diff --git a/frontend/src/components/ExpenseClaimSummary.vue b/frontend/src/components/ExpenseClaimSummary.vue
index 1203b804d3..71102bdab3 100644
--- a/frontend/src/components/ExpenseClaimSummary.vue
+++ b/frontend/src/components/ExpenseClaimSummary.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="flex flex-col w-full gap-5" v-if="summary.data">
-		<div class="text-lg text-gray-800 font-bold">Expense Claim Summary</div>
+		<div class="text-lg text-gray-800 font-bold">{{ __("Expense Claim Summary") }}</div>
 		<div
 			class="flex flex-col gap-4 bg-white py-3 px-3.5 rounded-lg border-none"
 		>
 			<div class="flex flex-col gap-1.5">
 				<span class="text-gray-600 text-base font-medium leading-5">
-					Total Expense Amount
+					{{ __("Total Expense Amount") }}
 				</span>
 				<span class="text-gray-800 text-lg font-bold leading-6">
 					{{ formatCurrency(total_claimed_amount, company_currency) }}
@@ -17,7 +17,7 @@
 				<div class="flex flex-col gap-1">
 					<div class="flex flex-row gap-1 items-center">
 						<span class="text-gray-600 text-sm font-medium leading-5">
-							Pending
+							{{ __("Pending") }}
 						</span>
 						<FeatherIcon name="alert-circle" class="text-yellow-500 h-3 w-3" />
 					</div>
@@ -33,7 +33,7 @@
 				<div class="flex flex-col gap-1">
 					<div class="flex flex-row gap-1 items-center">
 						<span class="text-gray-600 text-sm font-medium leading-5">
-							Approved
+							{{ __("Approved") }}
 						</span>
 						<FeatherIcon name="check-circle" class="text-green-500 h-3 w-3" />
 					</div>
@@ -50,7 +50,7 @@
 				<div class="flex flex-col gap-1">
 					<div class="flex flex-row gap-1 items-center">
 						<span class="text-gray-600 text-sm font-medium leading-5">
-							Rejected
+							{{ __("Rejected") }}
 						</span>
 						<FeatherIcon name="x-circle" class="text-red-500 h-3 w-3" />
 					</div>
diff --git a/frontend/src/components/ExpenseItems.vue b/frontend/src/components/ExpenseItems.vue
index 78a073d2fb..49f2117a1f 100644
--- a/frontend/src/components/ExpenseItems.vue
+++ b/frontend/src/components/ExpenseItems.vue
@@ -14,11 +14,14 @@
 					<div class="flex flex-row items-start gap-3 grow">
 						<div class="flex flex-col items-start gap-1.5">
 							<div class="text-base font-normal text-gray-800">
-								{{ item.expense_type }}
+								{{ __(item.expense_type) }}
 							</div>
 							<div class="text-xs font-normal text-gray-500">
 								<span>
-									{{ `Sanctioned: ${currency} ${item.sanctioned_amount || 0}` }}
+									{{ __("{0}: {1}", null, [
+										__("Sanctioned"),
+										formatCurrency(item.sanctioned_amount || 0, currency),
+									]) }}
 								</span>
 								<span class="whitespace-pre"> &middot; </span>
 								<span class="whitespace-nowrap" v-if="item.expense_date">
@@ -28,7 +31,7 @@
 						</div>
 					</div>
 					<span class="text-gray-700 font-normal rounded text-base">
-						{{ `${currency} ${item.amount}` }}
+						{{ formatCurrency(item.amount, currency) }}
 					</span>
 				</div>
 			</div>
@@ -39,7 +42,8 @@
 <script setup>
 import { computed, inject } from "vue"
 
-import { getCompanyCurrencySymbol } from "@/data/currencies"
+import { getCompanyCurrency } from "@/data/currencies"
+import { formatCurrency } from "@/utils/formatters";
 
 const props = defineProps({
 	doc: {
@@ -49,5 +53,5 @@ const props = defineProps({
 })
 
 const dayjs = inject("$dayjs")
-const currency = computed(() => getCompanyCurrencySymbol(props.doc.company))
+const currency = computed(() => getCompanyCurrency(props.doc.company))
 </script>
diff --git a/frontend/src/components/ExpenseTaxesTable.vue b/frontend/src/components/ExpenseTaxesTable.vue
index 4c93951027..984cbd56c5 100644
--- a/frontend/src/components/ExpenseTaxesTable.vue
+++ b/frontend/src/components/ExpenseTaxesTable.vue
@@ -1,7 +1,7 @@
 <template>
 	<template v-if="expenseClaim.expenses">
 		<div class="flex flex-row justify-between items-center pt-4">
-			<h2 class="text-base font-semibold text-gray-800">Taxes & Charges</h2>
+			<h2 class="text-base font-semibold text-gray-800">{{ __("Taxes & Charges") }} </h2>
 			<div class="flex flex-row gap-3 items-center">
 				<span class="text-base font-semibold text-gray-800">
 					{{ formatCurrency(expenseClaim.total_taxes_and_charges, currency) }}
@@ -74,7 +74,7 @@
 								v-for="field in taxesTableFields.data"
 								:key="field.fieldname"
 								class="w-full"
-								:label="field.label"
+								:label="__(field.label, null, 'Expense Claim Detail')"
 								:fieldtype="field.fieldtype"
 								:fieldname="field.fieldname"
 								:options="field.options"
@@ -101,7 +101,7 @@
 								<template #prefix>
 									<FeatherIcon name="trash" class="w-4" />
 								</template>
-								Delete
+								{{ __("Delete") }}
 							</Button>
 							<Button
 								variant="solid"
@@ -115,7 +115,7 @@
 										class="w-4"
 									/>
 								</template>
-								{{ editingIdx === null ? "Add Tax" : "Update Tax" }}
+								{{ editingIdx === null ? __("Add Tax") : __("Update Tax") }}
 							</Button>
 						</div>
 					</div>
@@ -215,9 +215,9 @@ const taxesTableFields = createResource({
 taxesTableFields.reload()
 
 const modalTitle = computed(() => {
-	if (props.isReadOnly) return "Expense Tax"
+	if (props.isReadOnly) return __("Expense Tax")
 
-	return editingIdx.value === null ? "New Expense Tax" : "Edit Expense Tax"
+	return editingIdx.value === null ? __("New Expense Tax") : __("Edit Expense Tax")
 })
 
 const addButtonDisabled = computed(() => {
diff --git a/frontend/src/components/ExpensesTable.vue b/frontend/src/components/ExpensesTable.vue
index d76f113147..7290874d2a 100644
--- a/frontend/src/components/ExpensesTable.vue
+++ b/frontend/src/components/ExpensesTable.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- Header -->
 	<div class="flex flex-row justify-between items-center mt-2">
-		<h2 class="text-base font-semibold text-gray-800">Expenses</h2>
+		<h2 class="text-base font-semibold text-gray-800">{{ __("Expenses") }} </h2>
 		<div class="flex flex-row gap-3 items-center">
 			<span class="text-base font-semibold text-gray-800">
 				{{ formatCurrency(expenseClaim.total_claimed_amount, currency) }}
@@ -33,12 +33,14 @@
 					<div class="flex flex-row items-start gap-3 grow">
 						<div class="flex flex-col items-start gap-1.5">
 							<div class="text-base font-normal text-gray-800">
-								{{ item.expense_type }}
+								{{ __(item.expense_type) }}
 							</div>
 							<div class="text-xs font-normal text-gray-500">
 								<span>
-									Sanctioned:
-									{{ formatCurrency(item.sanctioned_amount, currency) }}
+									{{ __("{0}: {1}", null, [
+										__("Sanctioned"),
+										formatCurrency(item.sanctioned_amount || 0, currency),
+									]) }}
 								</span>
 								<span class="whitespace-pre"> &middot; </span>
 								<span class="whitespace-nowrap" v-if="item.expense_date">
@@ -76,7 +78,7 @@
 							v-for="field in expensesTableFields.data"
 							:key="field.fieldname"
 							class="w-full"
-							:label="field.label"
+							:label="__(field.label, null, 'Expense Claim Detail')"
 							:fieldtype="field.fieldtype"
 							:fieldname="field.fieldname"
 							:options="field.options"
@@ -102,7 +104,7 @@
 							<template #prefix>
 								<FeatherIcon name="trash" class="w-4" />
 							</template>
-							Delete
+							{{ __("Delete") }}
 						</Button>
 						<Button
 							variant="solid"
@@ -116,7 +118,7 @@
 									class="w-4"
 								/>
 							</template>
-							{{ editingIdx === null ? "Add Expense" : "Update Expense" }}
+							{{ editingIdx === null ? __("Add Expense") : __("Update Expense") }}
 						</Button>
 					</div>
 				</div>
@@ -156,6 +158,7 @@ const emit = defineEmits([
 	"delete-expense-item",
 ])
 const dayjs = inject("$dayjs")
+const __ = inject("$translate")
 const expenseItem = ref({})
 const editingIdx = ref(null)
 
@@ -203,9 +206,9 @@ const expensesTableFields = createResource({
 expensesTableFields.reload()
 
 const modalTitle = computed(() => {
-	if (props.isReadOnly) return "Expense Item"
+	if (props.isReadOnly) return __("Expense Item")
 
-	return editingIdx.value === null ? "New Expense Item" : "Edit Expense Item"
+	return editingIdx.value === null ? __("New Expense Item") : __("Edit Expense Item")
 })
 
 const addButtonDisabled = computed(() => {
diff --git a/frontend/src/components/FilePreviewModal.vue b/frontend/src/components/FilePreviewModal.vue
index 170ec6fc9d..925dbe505b 100644
--- a/frontend/src/components/FilePreviewModal.vue
+++ b/frontend/src/components/FilePreviewModal.vue
@@ -1,9 +1,9 @@
 <template>
 	<ion-header>
 		<ion-toolbar>
-			<ion-title>{{ filename }} - File Preview</ion-title>
+			<ion-title>{{ filename }} - {{ __("File Preview") }}</ion-title>
 			<ion-buttons slot="end">
-				<ion-button @click="modalController.dismiss()">Close</ion-button>
+				<ion-button @click="modalController.dismiss()">{{ __("Close") }} </ion-button>
 			</ion-buttons>
 		</ion-toolbar>
 	</ion-header>
diff --git a/frontend/src/components/FileUploaderView.vue b/frontend/src/components/FileUploaderView.vue
index 6c9ce70981..fe9cd394fa 100644
--- a/frontend/src/components/FileUploaderView.vue
+++ b/frontend/src/components/FileUploaderView.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="flex flex-col gap-3 py-4">
 		<label class="file-select">
-			<h2 class="text-base font-semibold text-gray-800 pb-4">Attachments</h2>
+			<h2 class="text-base font-semibold text-gray-800 pb-4">{{ __("Attachments") }} </h2>
 			<div class="select-button cursor-pointer">
 				<div
 					class="flex flex-col w-full border shadow-sm items-center rounded p-3 gap-2"
 				>
 					<FeatherIcon name="upload" class="h-6 w-6 text-gray-700" />
 					<span class="block text-sm font-normal leading-5 text-gray-700">
-						Upload images or documents
+						{{ __("Upload images or documents") }}
 					</span>
 				</div>
 				<input
@@ -46,11 +46,11 @@
 
 			<Dialog v-model="showDialog">
 				<template #body-title>
-					<h2 class="text-lg font-bold">Delete Attachment</h2>
+					<h2 class="text-lg font-bold">{{ __("Delete Attachment") }} </h2>
 				</template>
 				<template #body-content>
 					<p>
-						Are you sure you want to delete the attachment
+						{{ __("Are you sure you want to delete the attachment") }}
 						<span class="font-bold">{{ selectedFile.file_name }}</span>
 						?
 					</p>
@@ -62,7 +62,7 @@
 							class="py-5 w-full"
 							@click="showDialog = false"
 						>
-							Cancel
+							{{ __("Cancel") }}
 						</Button>
 						<Button
 							variant="solid"
@@ -70,7 +70,7 @@
 							@click="handleFileDelete"
 							class="py-5 w-full"
 						>
-							Delete
+							{{ __("Delete") }}
 						</Button>
 					</div>
 				</template>
diff --git a/frontend/src/components/FormField.vue b/frontend/src/components/FormField.vue
index 9d04ba3913..ca92e9de29 100644
--- a/frontend/src/components/FormField.vue
+++ b/frontend/src/components/FormField.vue
@@ -16,7 +16,7 @@
 		<Autocomplete
 			v-if="props.fieldtype === 'Select' || props.documentList"
 			:class="isReadOnly ? 'pointer-events-none' : ''"
-			:placeholder="`Select ${props.label}`"
+			:placeholder="__('Select {0}', [props.label])"
 			:options="selectionList"
 			:modelValue="modelValue"
 			v-bind="$attrs"
@@ -39,7 +39,7 @@
 			v-else-if="['Text Editor', 'Small Text', 'Text', 'Long Text'].includes(props.fieldtype)"
 			type="textarea"
 			:value="modelValue"
-			:placeholder="`Enter ${props.label}`"
+			:placeholder="__('Enter {0}', [props.label])"
 			@input="(v) => emit('update:modelValue', v)"
 			@change="(v) => emit('change', v)"
 			v-bind="$attrs"
@@ -112,7 +112,7 @@
 		<DatePicker
 			v-else-if="props.fieldtype === 'Date'"
 			:value="modelValue"
-			:placeholder="`Select ${props.label}`"
+			:placeholder="__('Select {0}', [props.label])"
 			:formatter="(val) => dayjs(val).format('DD-MM-YYYY')"
 			@update:modelValue="(v) => emit('update:modelValue', v)"
 			v-bind="$attrs"
@@ -133,16 +133,18 @@
 			:disabled="isReadOnly"
 		/>
 
-		<ErrorMessage :message="props.errorMessage" />
+		<ErrorMessage :message="__(props.errorMessage)" />
 	</div>
 </template>
 
 <script setup>
 import { Autocomplete, DatePicker, DateTimePicker, ErrorMessage } from "frappe-ui"
-import { ref, computed, onMounted, inject } from "vue"
+import { computed, onMounted, inject } from "vue"
 
 import Link from "@/components/Link.vue"
 
+const __ = inject("$translate")
+
 const props = defineProps({
 	fieldtype: String,
 	fieldname: String,
@@ -194,7 +196,7 @@ const selectionList = computed(() => {
 	} else if (props.fieldtype == "Select" && props.options) {
 		const options = props.options.split("\n")
 		return options.map((option) => ({
-			label: option,
+			label: __(option),
 			value: option,
 		}))
 	}
diff --git a/frontend/src/components/FormView.vue b/frontend/src/components/FormView.vue
index c35b4752de..ab8624e57b 100644
--- a/frontend/src/components/FormView.vue
+++ b/frontend/src/components/FormView.vue
@@ -18,7 +18,7 @@
 					<h2
 						class="text-xl font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis"
 					>
-						{{ doctype }}
+						{{ __(props.doctype) }}
 					</h2>
 					<Badge
 						:label="id"
@@ -27,7 +27,7 @@
 					/>
 					<Badge
 						v-if="status"
-						:label="status"
+						:label="__(status, null, doctype)"
 						:theme="statusColor"
 						class="whitespace-nowrap text-[8px]"
 					/>
@@ -36,21 +36,21 @@
 						class="ml-auto"
 						:options="[
 							{
-								label: 'Delete',
+								label: __('Delete'),
 								condition: showDeleteButton,
 								onClick: () => (showDeleteDialog = true),
 							},
-							{ label: 'Reload', onClick: () => reloadDoc() },
+							{ label: __('Reload'), onClick: () => reloadDoc() },
 						]"
 						:button="{
-							label: 'Menu',
+							label: __('Menu'),
 							icon: 'more-horizontal',
 							variant: 'ghost',
 						}"
 					/>
 				</div>
 				<h2 v-else class="text-2xl font-semibold text-gray-900">
-					{{ `New ${doctype}` }}
+					{{ __('New {0}', [__(doctype)], props.doctype) }}
 				</h2>
 			</header>
 
@@ -72,7 +72,7 @@
 											: 'hover:text-gray-600 hover:border-gray-300',
 									]"
 								>
-									{{ tab.name }}
+									{{ __(tab.name, null, props.doctype) }}
 								</button>
 							</li>
 						</ul>
@@ -96,7 +96,7 @@
 									:fieldname="field.fieldname"
 									v-model="formModel[field.fieldname]"
 									:default="field.default"
-									:label="field.label"
+									:label="__(field.label, null, props.doctype)"
 									:options="field.options"
 									:linkFilters="field.linkFilters"
 									:documentList="field.documentList"
@@ -116,7 +116,7 @@
 								v-if="isFileUploading"
 							>
 								<LoadingIndicator class="w-3 h-3 text-gray-800" />
-								<span class="text-gray-900 text-sm">Uploading...</span>
+								<span class="text-gray-900 text-sm">{{ __("Uploading...") }} </span>
 							</div>
 
 							<FileUploaderView
@@ -137,7 +137,7 @@
 						:fieldname="field.fieldname"
 						v-model="formModel[field.fieldname]"
 						:default="field.default"
-						:label="field.label"
+						:label="__(field.label, null, props.doctype)"
 						:options="field.options"
 						:linkFilters="field.linkFilters"
 						:documentList="field.documentList"
@@ -155,7 +155,7 @@
 						v-if="isFileUploading"
 					>
 						<LoadingIndicator class="w-3 h-3 text-gray-800" />
-						<span class="text-gray-900 text-sm">Uploading...</span>
+						<span class="text-gray-900 text-sm">{{ __("Uploading...") }} </span>
 					</div>
 
 					<FileUploaderView
@@ -207,7 +207,7 @@
 						docList.insert.loading || documentResource?.setValue?.loading
 					"
 				>
-					{{ formButton }}
+					{{ __(formButton) }}
 				</Button>
 			</div>
 		</div>
@@ -216,11 +216,11 @@
 	<!-- Confirmation Dialogs -->
 	<Dialog v-model="showDeleteDialog">
 		<template #body-title>
-			<h2 class="text-xl font-bold">Delete {{ props.doctype }}</h2>
+			<h2 class="text-xl font-bold">{{ __("Delete {0}", [__(props.doctype)]) }}</h2>
 		</template>
 		<template #body-content>
 			<p>
-				Are you sure you want to delete the {{ props.doctype }}
+				{{ __("Are you sure you want to delete the {0}", [__(props.doctype)])  }}
 				<span class="font-bold">{{ formModel.name }}</span>
 				?
 			</p>
@@ -232,7 +232,7 @@
 					class="py-5 w-full"
 					@click="showDeleteDialog = false"
 				>
-					Cancel
+					{{ __("Cancel") }}
 				</Button>
 				<Button
 					variant="solid"
@@ -240,7 +240,7 @@
 					@click="handleDocDelete"
 					class="py-5 w-full"
 				>
-					Delete
+					{{__("Delete") }}
 				</Button>
 			</div>
 		</template>
@@ -248,11 +248,11 @@
 
 	<Dialog v-model="showSubmitDialog">
 		<template #body-title>
-			<h2 class="text-xl font-bold">Confirm</h2>
+			<h2 class="text-xl font-bold">{{ __("Confirm") }} </h2>
 		</template>
 		<template #body-content>
 			<p>
-				Permanently submit {{ props.doctype }}
+				{{ __("Permanently submit {0}", [__(props.doctype)]) }}
 				<span class="font-bold">{{ formModel.name }}</span>
 				?
 			</p>
@@ -264,14 +264,14 @@
 					class="py-5 w-full"
 					@click="showSubmitDialog = false"
 				>
-					No
+					{{ __("No") }}
 				</Button>
 				<Button
 					variant="solid"
 					@click="handleDocUpdate('submit')"
 					class="py-5 w-full"
 				>
-					Yes
+					{{ __("Yes") }}
 				</Button>
 			</div>
 		</template>
@@ -279,11 +279,11 @@
 
 	<Dialog v-model="showCancelDialog">
 		<template #body-title>
-			<h2 class="text-xl font-bold">Confirm</h2>
+			<h2 class="text-xl font-bold">{{ __("Confirm") }} </h2>
 		</template>
 		<template #body-content>
 			<p>
-				Permanently cancel {{ props.doctype }}
+				{{ __("Permanently cancel {0}", [__(props.doctype)]) }}
 				<span class="font-bold">{{ formModel.name }}</span
 				>?
 			</p>
@@ -295,14 +295,14 @@
 					class="py-5 w-full"
 					@click="showCancelDialog = false"
 				>
-					No
+					{{ __("No") }}
 				</Button>
 				<Button
 					variant="solid"
 					@click="handleDocUpdate('cancel')"
 					class="py-5 w-full"
 				>
-					Yes
+					{{ __("Yes") }}
 				</Button>
 			</div>
 		</template>
@@ -310,7 +310,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref, watch } from "vue"
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue"
 import { useRouter } from "vue-router"
 import {
 	ErrorMessage,
@@ -377,6 +377,7 @@ const props = defineProps({
 })
 const emit = defineEmits(["validateForm", "update:modelValue"])
 const router = useRouter()
+const __ = inject("$translate")
 let activeTab = ref(props.tabs?.[0].name)
 let fileAttachments = ref([])
 let statusColor = ref("")
@@ -509,8 +510,8 @@ const docList = createListResource({
 	insert: {
 		async onSuccess(data) {
 			toast({
-				title: "Success",
-				text: `${props.doctype} created successfully!`,
+				title: __("Success"),
+				text: __("{0} created successfully!", [__(props.doctype)]),
 				icon: "check-circle",
 				position: "bottom-center",
 				iconClasses: "text-green-500",
@@ -524,8 +525,8 @@ const docList = createListResource({
 		},
 		onError() {
 			toast({
-				title: "Error",
-				text: `Error creating ${props.doctype}`,
+				title: __("Error"),
+				text: __("Error creating {0}", [__(props.doctype)]),
 				icon: "alert-circle",
 				position: "bottom-center",
 				iconClasses: "text-red-500",
@@ -542,8 +543,8 @@ const documentResource = createDocumentResource({
 	setValue: {
 		onSuccess() {
 			toast({
-				title: "Success",
-				text: `${props.doctype} updated successfully!`,
+				title: __("Success"),
+				text: __("{0} updated successfully!", [__(props.doctype)]),
 				icon: "check-circle",
 				position: "bottom-center",
 				iconClasses: "text-green-500",
@@ -551,8 +552,8 @@ const documentResource = createDocumentResource({
 		},
 		onError() {
 			toast({
-				title: "Error",
-				text: `Error updating ${props.doctype}`,
+				title: __("Error"),
+				text: __("Error updating {0}", [__(props.doctype)]),
 				icon: "alert-circle",
 				position: "bottom-center",
 				iconClasses: "text-red-500",
@@ -564,8 +565,8 @@ const documentResource = createDocumentResource({
 		onSuccess() {
 			router.back()
 			toast({
-				title: "Success",
-				text: `${props.doctype} deleted successfully!`,
+				title: __("Success"),
+				text: __("{0} deleted successfully!", [__(props.doctype)]),
 				icon: "check-circle",
 				position: "bottom-center",
 				iconClasses: "text-green-500",
@@ -573,8 +574,8 @@ const documentResource = createDocumentResource({
 		},
 		onError() {
 			toast({
-				title: "Error",
-				text: `Error deleting ${props.doctype}`,
+				title: __("Error"),
+				text: __("Error deleting {0}", [__(props.doctype)]),
 				icon: "alert-circle",
 				position: "bottom-center",
 				iconClasses: "text-red-500",
diff --git a/frontend/src/components/FormattedField.vue b/frontend/src/components/FormattedField.vue
index db2909ecd4..4dadd3f225 100644
--- a/frontend/src/components/FormattedField.vue
+++ b/frontend/src/components/FormattedField.vue
@@ -5,7 +5,7 @@
 		v-else-if="props.fieldtype === 'Select'"
 		variant="outline"
 		:theme="colorMap[props.value]"
-		:label="props.value"
+		:label="__(props.value)"
 		size="md"
 	/>
 
diff --git a/frontend/src/components/Holidays.vue b/frontend/src/components/Holidays.vue
index 51875c74ec..966062023c 100644
--- a/frontend/src/components/Holidays.vue
+++ b/frontend/src/components/Holidays.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="flex flex-col gap-5 w-full">
 		<div class="flex flex-row justify-between items-center">
-			<div class="text-lg text-gray-800 font-bold">Upcoming Holidays</div>
+			<div class="text-lg text-gray-800 font-bold">{{ __("Upcoming Holidays") }}</div>
 			<div
 				v-if="holidays?.data?.length"
 				id="open-holiday-list"
 				class="text-sm text-gray-800 font-semibold cursor-pointer underline underline-offset-2"
 			>
-				View All
+				{{ __("View All") }}
 			</div>
 		</div>
 
@@ -41,7 +41,7 @@
 	>
 		<div class="bg-white w-full flex flex-col items-center justify-center pb-5">
 			<div class="w-full pt-8 pb-5 border-b text-center">
-				<span class="text-gray-900 font-bold text-lg">Holiday List</span>
+				<span class="text-gray-900 font-bold text-lg">{{ __("Holiday List") }}</span>
 			</div>
 			<div class="w-full flex flex-col items-center justify-center gap-5 p-4">
 				<div
@@ -52,7 +52,7 @@
 					<div class="flex flex-row items-center gap-3 grow">
 						<FeatherIcon name="calendar" class="h-5 w-5 text-gray-500" />
 						<div class="text-base font-normal text-gray-800">
-							{{ holiday.description }}
+							{{ __(holiday.description) }}
 						</div>
 					</div>
 					<div
diff --git a/frontend/src/components/InstallPrompt.vue b/frontend/src/components/InstallPrompt.vue
index ab4d7d530f..7c393714a4 100644
--- a/frontend/src/components/InstallPrompt.vue
+++ b/frontend/src/components/InstallPrompt.vue
@@ -2,15 +2,15 @@
 	<!-- Install PWA dialog -->
 	<Dialog v-model="showDialog">
 		<template #body-title>
-			<h2 class="text-lg font-bold">Install Frappe HR</h2>
+			<h2 class="text-lg font-bold">{{ __("Install Frappe HR") }} </h2>
 		</template>
 		<template #body-content>
-			<p>Get the app on your device for easy access & a better experience!</p>
+			<p>{{ __("Get the app on your device for easy access & a better experience!") }} </p>
 		</template>
 		<template #actions>
 			<Button variant="solid" @click="() => install()" class="py-5 w-full">
 				<template #prefix><FeatherIcon name="download" class="w-4" /></template>
-				Install
+				{{ __("Install") }}
 			</Button>
 		</template>
 	</Dialog>
@@ -25,7 +25,7 @@
 					class="flex flex-row text-center items-center justify-between mb-1 px-3"
 				>
 					<span class="text-base text-gray-900 font-bold">
-						Install Frappe HR
+						{{ __("Install Frappe HR") }}
 					</span>
 					<span class="inline-flex items-baseline">
 						<FeatherIcon
@@ -38,7 +38,7 @@
 				<div class="text-xs text-gray-800 px-3">
 					<span class="flex flex-col gap-2">
 						<span>
-							Get the app on your iPhone for easy access & a better experience
+							{{ __("Get the app on your iPhone for easy access & a better experience") }}
 						</span>
 						<span class="inline-flex items-start whitespace-nowrap">
 							<span>Tap&nbsp;</span>
diff --git a/frontend/src/components/LeaveBalance.vue b/frontend/src/components/LeaveBalance.vue
index 997e1807cb..7b1b46002d 100644
--- a/frontend/src/components/LeaveBalance.vue
+++ b/frontend/src/components/LeaveBalance.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col w-full">
 		<div class="flex flex-row justify-between items-center px-4">
-			<div class="text-lg text-gray-800 font-bold">Leave Balance</div>
+			<div class="text-lg text-gray-800 font-bold">{{ __("Leave Balance") }} </div>
 			<router-link
 				:to="{ name: 'LeaveApplicationListView' }"
 				v-slot="{ navigate }"
@@ -11,7 +11,7 @@
 					@click="navigate"
 					class="text-sm text-gray-800 font-semibold cursor-pointer underline underline-offset-2"
 				>
-					View Leave History
+					{{ __("View Leave History") }}
 				</div>
 			</router-link>
 		</div>
@@ -34,7 +34,7 @@
 					{{ `${allocation.balance_leaves}/${allocation.allocated_leaves}` }}
 				</div>
 				<div class="text-gray-600 font-normal text-sm w-24 leading-4">
-					{{ `${leave_type} balance` }}
+					{{ __("{0} balance", [__(leave_type, null, "Leave Type")]) }}
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/components/LeaveRequestItem.vue b/frontend/src/components/LeaveRequestItem.vue
index 5cd2f55483..3330d07255 100644
--- a/frontend/src/components/LeaveRequestItem.vue
+++ b/frontend/src/components/LeaveRequestItem.vue
@@ -8,17 +8,17 @@
 			<LeaveIcon class="h-5 w-5 text-gray-500" />
 			<div class="flex flex-col items-start gap-1.5">
 				<div class="text-base font-normal text-gray-800">
-					{{ props.doc.leave_type }}
+					{{ __(props.doc.leave_type, null, "Leave Type") }}
 				</div>
 				<div class="text-xs font-normal text-gray-500">
 					<span>{{ props.doc.leave_dates || getLeaveDates(props.doc) }}</span>
 					<span class="whitespace-pre"> &middot; </span>
-					<span class="whitespace-nowrap">{{ `${props.doc.total_leave_days}d` }}</span>
+					<span class="whitespace-nowrap">{{ __("{0}d", [props.doc.total_leave_days]) }}</span>
 				</div>
 			</div>
 		</template>
 		<template #right>
-			<Badge variant="outline" :theme="colorMap[status]" :label="status" size="md" />
+			<Badge variant="outline" :theme="colorMap[status]" :label="__(status, null, 'Leave Application')" size="md" />
 			<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 		</template>
 	</ListItem>
diff --git a/frontend/src/components/Link.vue b/frontend/src/components/Link.vue
index 0f661b94de..07ee359cea 100644
--- a/frontend/src/components/Link.vue
+++ b/frontend/src/components/Link.vue
@@ -3,7 +3,7 @@
 		ref="autocompleteRef"
 		size="sm"
 		v-model="value"
-		:placeholder="`Select ${doctype}`"
+		:placeholder="__('Select {0}', [__(doctype)])"
 		:options="options.data"
 		:class="disabled ? 'pointer-events-none' : ''"
 		:disabled="disabled"
diff --git a/frontend/src/components/ListFiltersActionSheet.vue b/frontend/src/components/ListFiltersActionSheet.vue
index d9600d3371..9b038b8db1 100644
--- a/frontend/src/components/ListFiltersActionSheet.vue
+++ b/frontend/src/components/ListFiltersActionSheet.vue
@@ -4,7 +4,7 @@
 		class="bg-white w-full flex flex-col items-center justify-center pb-5 max-h-[calc(100vh-5rem)]"
 	>
 		<div class="w-full pt-8 pb-5 border-b text-center sticky top-0 z-[100]">
-			<span class="text-gray-900 font-bold text-lg">Filters</span>
+			<span class="text-gray-900 font-bold text-lg">{{ __("Filters") }} </span>
 		</div>
 
 		<div class="w-full p-4 overflow-auto">
@@ -20,7 +20,7 @@
 						v-if="['status', 'approval_status'].includes(filter.fieldname)"
 					>
 						<div class="text-gray-800 font-semibold text-base">
-							{{ filter.label }}
+							{{ __(filter.label) }}
 						</div>
 						<div class="flex flex-row gap-2 mt-2 flex-wrap">
 							<Button
@@ -34,7 +34,7 @@
 										: '!font-normal',
 								]"
 							>
-								{{ option }}
+								{{ __(option) }}
 							</Button>
 						</div>
 					</div>
@@ -42,7 +42,7 @@
 					<!-- Field filters -->
 					<div v-else class="flex flex-col gap-2">
 						<div class="text-gray-800 font-semibold text-base">
-							{{ filter.label }}
+							{{ __(filter.label) }}
 						</div>
 						<div class="flex flex-row items-center gap-3">
 							<Autocomplete
@@ -73,14 +73,14 @@
 				variant="outline"
 				class="w-full py-5 text-sm"
 			>
-				Clear All
+				{{ __("Clear All") }}
 			</Button>
 			<Button
 				@click="emit('apply-filters')"
 				variant="solid"
 				class="w-full py-5 text-sm"
 			>
-				Apply Filters
+				{{ __("Apply Filters") }}
 			</Button>
 		</div>
 	</div>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index b73c50c656..5a37da7418 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -31,7 +31,7 @@
 							<template #prefix>
 								<FeatherIcon name="plus" class="w-4" />
 							</template>
-							New
+							{{ __("New", null, props.doctype) }}
 						</Button>
 					</router-link>
 				</div>
@@ -53,7 +53,7 @@
 				<TabButtons
 					v-if="props.tabButtons"
 					class="mt-5"
-					:buttons="[{ label: tabButtons[0] }, { label: tabButtons[1] }]"
+					:buttons="props.tabButtons"
 					v-model="activeTab"
 				/>
 
@@ -90,7 +90,7 @@
 					</div>
 				</div>
 				<EmptyState
-					:message="`No ${props.doctype?.toLowerCase()}s found`"
+					:message="__('No {0} found', [__(props.doctype)])"
 					v-else-if="!documents.loading"
 				/>
 
@@ -186,6 +186,8 @@ const props = defineProps({
 	},
 })
 
+const getButtonKey = (tab) => tab?.key ?? tab
+
 const listItemComponent = {
 	"Employee Checkin": markRaw(EmployeeCheckinItem),
 	"Attendance Request": markRaw(AttendanceRequestItem),
@@ -201,7 +203,7 @@ const dayjs = inject("$dayjs")
 const socket = inject("$socket")
 const employee = inject("$employee")
 const filterMap = reactive({})
-const activeTab = ref(props.tabButtons ? props.tabButtons[0] : undefined)
+const activeTab = ref(props.tabButtons ? getButtonKey(props.tabButtons[0]) : undefined)
 const areFiltersApplied = ref(false)
 const appliedFilters = ref([])
 const workflowStateField = ref(null)
@@ -221,7 +223,7 @@ const listOptions = ref({
 
 // computed properties
 const isTeamRequest = computed(() => {
-	return props.tabButtons && activeTab.value === props.tabButtons[1]
+	return props.tabButtons && activeTab.value === getButtonKey(props.tabButtons[1])
 })
 
 const formViewRoute = computed(() => {
diff --git a/frontend/src/components/QuickLinks.vue b/frontend/src/components/QuickLinks.vue
index 7a4b10095e..b09fee953f 100644
--- a/frontend/src/components/QuickLinks.vue
+++ b/frontend/src/components/QuickLinks.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-5 my-4 w-full">
-		<div class="text-lg font-medium text-gray-900">{{ title }}</div>
+		<div class="text-lg font-medium text-gray-900">{{ title || __("Quick Links") }}</div>
 		<div class="flex flex-col bg-white rounded">
 			<router-link
 				class="flex flex-row flex-start p-4 items-center justify-between"
@@ -28,7 +28,7 @@ const props = defineProps({
 	title: {
 		type: String,
 		required: false,
-		default: "Quick Links",
+		default: "",
 	},
 	items: {
 		type: Array,
diff --git a/frontend/src/components/RequestActionSheet.vue b/frontend/src/components/RequestActionSheet.vue
index 953e6fe95e..98248d1f44 100644
--- a/frontend/src/components/RequestActionSheet.vue
+++ b/frontend/src/components/RequestActionSheet.vue
@@ -8,7 +8,7 @@
 			class="w-full flex flex-row gap-2 pt-8 pb-5 border-b justify-center items-center sticky top-0 z-[100]"
 		>
 			<span class="text-gray-900 font-bold text-lg text-center">
-				{{ document?.doctype }}
+				{{ __(document?.doctype) }}
 			</span>
 			<FeatherIcon
 				v-if="props.showOpenForm"
@@ -33,7 +33,7 @@
 						'flex w-full',
 					]"
 				>
-					<div class="text-gray-600 text-base">{{ field.label }}</div>
+					<div class="text-gray-600 text-base">{{ __(field.label, null, props.modelValue?.doctype) }}</div>
 					<component
 						v-if="field.fieldtype === 'Table'"
 						:is="field.component"
@@ -52,7 +52,7 @@
 					class="flex flex-col gap-2 w-full"
 					v-if="attachedFiles?.data?.length"
 				>
-					<div class="text-gray-600 text-base">Attachments</div>
+					<div class="text-gray-600 text-base">{{ __('Attachments') }}</div>
 					<ul class="w-full flex flex-col items-center gap-2">
 						<li
 							class="bg-gray-100 rounded p-2 w-full"
@@ -93,7 +93,7 @@
 				<template #prefix>
 					<FeatherIcon name="x" class="w-4" />
 				</template>
-				Reject
+				{{ __("Reject") }}
 			</Button>
 
 			<Button
@@ -105,7 +105,7 @@
 				<template #prefix>
 					<FeatherIcon name="check" class="w-4" />
 				</template>
-				Approve
+				{{ __("Approve") }}
 			</Button>
 		</div>
 
@@ -123,7 +123,7 @@
 				class="w-full py-5"
 				variant="solid"
 			>
-				Submit
+				{{ __("Submit") }}
 			</Button>
 		</div>
 
@@ -140,7 +140,7 @@
 				<template #prefix>
 					<FeatherIcon name="x" class="w-4" />
 				</template>
-				Cancel
+				{{ __("Cancel") }}
 			</Button>
 		</div>
 
@@ -156,7 +156,7 @@
 </template>
 
 <script setup>
-import { computed, ref, defineAsyncComponent, onMounted } from "vue"
+import { computed, inject, ref, defineAsyncComponent, onMounted } from "vue"
 import { IonModal, modalController } from "@ionic/vue"
 import { useRouter } from "vue-router"
 import {
@@ -175,6 +175,8 @@ import { formatCurrency } from "@/utils/formatters"
 
 import useWorkflow from "@/composables/workflow"
 
+const __ = inject("$translate")
+
 const props = defineProps({
 	fields: {
 		type: Array,
@@ -274,18 +276,18 @@ const approvalField = computed(() => {
 })
 
 const getSuccessMessage = ({ status = "", docstatus = 0 }) => {
-	if (status) return `${status} successfully!`
+	if (status) return __([status], __('{0} successfully!'))
 	else if (docstatus)
-		return `Document ${
-			docstatus === 1 ? "submitted" : "cancelled"
-		} successfully!`
+		return __('Document {0}', [
+			docstatus === 1 ? __("submitted") : __("cancelled")]
+			, __('successfully!'))
 }
 
 const getFailureMessage = ({ status = "", docstatus = 0 }) => {
 	if (status)
-		return `${status === "Approved" ? "Approval" : "Rejection"} failed!`
+		return __([status === __("Approved") ? __("Approval") : __("Rejection")], '{0}failed!')
 	else if (docstatus)
-		return `Document ${docstatus === 1 ? "submission" : "cancellation"} failed!`
+		return __('Document {0} failed!', [docstatus === 1 ? __("submission") : __("cancellation")])
 }
 
 const updateDocumentStatus = ({ status = "", docstatus = 0 }) => {
@@ -301,7 +303,7 @@ const updateDocumentStatus = ({ status = "", docstatus = 0 }) => {
 				if (docstatus !== 0) modalController.dismiss()
 
 				toast({
-					title: "Success",
+					title: __("Success"),
 					text: getSuccessMessage({ status, docstatus }),
 					icon: "check-circle",
 					position: "bottom-center",
@@ -310,7 +312,7 @@ const updateDocumentStatus = ({ status = "", docstatus = 0 }) => {
 			},
 			onError() {
 				toast({
-					title: "Error",
+					title: __("Error"),
 					text: getFailureMessage({ status, docstatus }),
 					icon: "alert-circle",
 					position: "bottom-center",
diff --git a/frontend/src/components/RequestList.vue b/frontend/src/components/RequestList.vue
index 200ba43789..6ac70546df 100644
--- a/frontend/src/components/RequestList.vue
+++ b/frontend/src/components/RequestList.vue
@@ -24,11 +24,11 @@
 				@click="navigate"
 				class="w-full !text-gray-600 py-6 text-sm border-none bg-white hover:bg-white"
 			>
-				View List
+				{{ __("View List") }}
 			</Button>
 		</router-link>
 	</div>
-	<EmptyState :message="emptyStateMessage" v-else />
+	<EmptyState :message="emptyStateMessage || __('You have no requests')" v-else />
 
 	<ion-modal
 		ref="modal"
@@ -75,7 +75,7 @@ const props = defineProps({
 	},
 	emptyStateMessage: {
 		type: String,
-		default: "You have no requests",
+		default: "",
 	},
 })
 
diff --git a/frontend/src/components/RequestPanel.vue b/frontend/src/components/RequestPanel.vue
index 2ccf704532..83eaaa28e6 100644
--- a/frontend/src/components/RequestPanel.vue
+++ b/frontend/src/components/RequestPanel.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="w-full">
 		<TabButtons
-			:buttons="[{ label: 'My Requests' }, { label: 'Team Requests' }]"
+			:buttons="TAB_BUTTONS"
 			v-model="activeTab"
 		/>
 		<RequestList v-if="activeTab == 'My Requests'" :items="myRequests" />
@@ -33,6 +33,8 @@ import { useListUpdate } from "@/composables/realtime"
 const activeTab = ref("My Requests")
 const socket = inject("$socket")
 
+const TAB_BUTTONS = ["My Requests", "Team Requests"] // __("My Requests"), __("Team Requests")
+
 const myRequests = computed(() =>
 	updateRequestDetails(myLeaves, myClaims, myShiftRequests, myAttendanceRequests)
 )
diff --git a/frontend/src/components/SalarySlipItem.vue b/frontend/src/components/SalarySlipItem.vue
index 22e1a0d7ae..4455f2a7e8 100644
--- a/frontend/src/components/SalarySlipItem.vue
+++ b/frontend/src/components/SalarySlipItem.vue
@@ -8,7 +8,10 @@
 				</div>
 				<div class="text-xs font-normal text-gray-500">
 					<span>
-						{{ `Gross Pay: ${formatCurrency(doc.gross_pay, doc.currency)}` }}
+						{{ __("{0}: {1}", null, [
+								__("Gross Pay"),
+								formatCurrency(doc.gross_pay, doc.currency),
+							]) }}
 					</span>
 					<span class="whitespace-pre"> &middot; </span>
 				</div>
diff --git a/frontend/src/components/ShiftAssignmentItem.vue b/frontend/src/components/ShiftAssignmentItem.vue
index 1918034541..646dd00e54 100644
--- a/frontend/src/components/ShiftAssignmentItem.vue
+++ b/frontend/src/components/ShiftAssignmentItem.vue
@@ -9,9 +9,7 @@
 				<div class="text-xs font-normal text-gray-500">
 					<span>{{ props.doc.shift_dates || getShiftDates(props.doc) }}</span>
 					<span v-if="props.doc.end_date" class="whitespace-pre"> &middot; </span>
-					<span v-if="props.doc.end_date" class="whitespace-nowrap">{{
-						`${props.doc.total_shift_days || getTotalShiftDays(props.doc)}d`
-					}}</span>
+					<span v-if="props.doc.end_date" class="whitespace-nowrap">{{ __("{0}d", [props.doc.total_shift_days || getTotalShiftDays(props.doc)]) }}</span>
 				</div>
 			</div>
 		</template>
diff --git a/frontend/src/components/ShiftRequestItem.vue b/frontend/src/components/ShiftRequestItem.vue
index 1c5ca34af2..5ce732efc6 100644
--- a/frontend/src/components/ShiftRequestItem.vue
+++ b/frontend/src/components/ShiftRequestItem.vue
@@ -14,9 +14,7 @@
 					<span>{{ props.doc.shift_dates || getDates(props.doc) }}</span>
 					<span v-if="props.doc.to_date">
 						<span class="whitespace-pre"> &middot; </span>
-						<span class="whitespace-nowrap">{{
-							`${props.doc.total_shift_days || getTotalDays(props.doc)}d`
-						}}</span>
+						<span class="whitespace-nowrap">{{ __("{0}d", [props.doc.total_shift_days || getTotalDays(props.doc)]) }}</span>
 					</span>
 				</div>
 			</div>
diff --git a/frontend/src/components/TabButtons.vue b/frontend/src/components/TabButtons.vue
index c1e1461581..3b0bd4b0d1 100644
--- a/frontend/src/components/TabButtons.vue
+++ b/frontend/src/components/TabButtons.vue
@@ -2,16 +2,16 @@
 	<div class="flex p-1 bg-gray-200 rounded">
 		<button
 			v-for="button in buttons"
-			:key="button.label"
+			:key="button.key ?? button.label ?? button"
 			class="px-8 py-2.5 transition-all rounded-[7px] flex-auto font-medium text-base"
 			:class="
-				modelValue === button.label
+				modelValue === (button.key ?? button.label ?? button)
 					? 'bg-white drop-shadow text-gray-900'
 					: 'text-gray-600'
 			"
-			@click="$emit('update:modelValue', button.label)"
+			@click="$emit('update:modelValue', button.key ?? button.label ?? button)"
 		>
-			{{ button.label }}
+			{{ button.label ?? __(button) }}
 		</button>
 	</div>
 </template>
diff --git a/frontend/src/components/WorkflowActionSheet.vue b/frontend/src/components/WorkflowActionSheet.vue
index f1b662cdaa..343e0225fc 100644
--- a/frontend/src/components/WorkflowActionSheet.vue
+++ b/frontend/src/components/WorkflowActionSheet.vue
@@ -16,7 +16,7 @@
 			<template #prefix>
 				<FeatherIcon name="chevron-up" class="w-4" />
 			</template>
-			Actions
+			{{ __("Actions") }}
 		</Button>
 
 		<template v-else>
@@ -30,7 +30,7 @@
 				<template #prefix v-if="action.featherIcon">
 					<FeatherIcon :name="action.featherIcon" class="w-4" />
 				</template>
-				{{ action.text }}
+				{{ __(action.text, null, props.doc?.doctype) }}
 			</Button>
 		</template>
 	</div>
@@ -47,7 +47,6 @@
 import { IonActionSheet, modalController } from "@ionic/vue"
 import { computed, ref, onMounted } from "vue"
 import { FeatherIcon } from "frappe-ui"
-
 const props = defineProps({
 	doc: {
 		type: Object,
@@ -90,7 +89,7 @@ const getTransitions = async () => {
 		}
 
 		return {
-			text: transition,
+			text: __(transition, null, props.doc?.doctype),
 			role: role,
 			theme: theme,
 			variant: variant,
@@ -106,7 +105,7 @@ const showTransitions = () => {
 	if (actions.value?.length > 0) {
 		// always add last action for dismissing the modal
 		actions.value.push({
-			text: "Dismiss",
+			text: __("Dismiss"),
 			role: "cancel",
 		})
 	}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 07f1b522da..b7e22ea4c6 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -11,6 +11,7 @@ import {
 	resourcesPlugin,
 	FormControl,
 } from "frappe-ui"
+import { translationsPlugin } from "./plugins/translationsPlugin.js"
 import EmptyState from "@/components/EmptyState.vue"
 
 import { IonicVue } from "@ionic/vue"
@@ -37,6 +38,7 @@ const socket = initSocket()
 
 setConfig("resourceFetcher", frappeRequest)
 app.use(resourcesPlugin)
+app.use(translationsPlugin)
 
 app.component("Button", Button)
 app.component("Input", Input)
@@ -91,20 +93,19 @@ const registerServiceWorker = async () => {
 	}
 }
 
-router.isReady().then(() => {
+router.isReady().then(async () => {
 	if (import.meta.env.DEV) {
-		frappeRequest({
+		await frappeRequest({
 			url: "/api/method/hrms.www.hrms.get_context_for_dev",
-		}).then((values) => {
+		}).then(async (values) => {
 			if (!window.frappe) window.frappe = {}
 			window.frappe.boot = values
-			registerServiceWorker()
-			app.mount("#app")
 		})
-	} else {
-		registerServiceWorker()
-		app.mount("#app")
 	}
+
+	await translationsPlugin.isReady();
+	registerServiceWorker()
+	app.mount("#app")
 })
 
 router.beforeEach(async (to, _, next) => {
diff --git a/frontend/src/plugins/translationsPlugin.js b/frontend/src/plugins/translationsPlugin.js
new file mode 100644
index 0000000000..3bf142bdf1
--- /dev/null
+++ b/frontend/src/plugins/translationsPlugin.js
@@ -0,0 +1,79 @@
+function makeTranslationFunction() {
+	let messages = {};
+	return {
+		translate,
+		load: () => Promise.allSettled([
+			setup(),
+			// TODO: load dayjs locales
+		]),
+	}
+
+	async function setup() {
+		if (window.frappe?.boot?.__messages) {
+			messages = window.frappe?.boot?.__messages;
+			return;
+		}
+
+		const url = new URL("/api/method/frappe.translate.load_all_translations", location.origin);
+		url.searchParams.append("lang", window.frappe?.boot?.lang ?? navigator.language);
+		url.searchParams.append("hash", window.frappe?.boot?.translations_hash || window._version_number || Math.random()); // for cache busting
+		// url.searchParams.append("app", "hrms");
+
+		try {
+			const response = await fetch(url);
+			messages = await response.json() || {}
+		} catch (error) {
+			console.error("Failed to fetch translations:", error)
+		}
+	}
+
+	function translate(txt, replace, context = null) {
+		if (!txt || typeof txt != "string") return txt;
+
+		let translated_text = "";
+		let key = txt;
+		if (context) {
+			translated_text = messages[`${key}:${context}`];
+		}
+		if (!translated_text) {
+			translated_text = messages[key] || txt;
+		}
+		if (replace && typeof replace === "object") {
+			translated_text = format(translated_text, replace);
+		}
+
+		return translated_text;
+	}
+
+	function format(str, args) {
+		if (str == undefined) return str;
+
+		let unkeyed_index = 0;
+		return str.replace(
+			/\{(\w*)\}/g,
+			(match, key) => {
+				if (key === "") {
+					key = unkeyed_index;
+					unkeyed_index++;
+				}
+				if (key == +key) {
+					return args[key] !== undefined ? args[key] : match;
+				}
+			}
+		);
+	}
+}
+
+const { translate, load } = makeTranslationFunction();
+
+export const translationsPlugin = {
+	async isReady() {
+		await load();
+	},
+	install(/** @type {import('vue').App} */ app, options) {
+		const __ = translate;
+		// app.mixin({ methods: { __ } })
+		app.config.globalProperties.__ = __;
+		app.provide("$translate", __);
+	},
+}
diff --git a/frontend/src/utils/formatters.js b/frontend/src/utils/formatters.js
index bcf580f641..526d4edaf2 100644
--- a/frontend/src/utils/formatters.js
+++ b/frontend/src/utils/formatters.js
@@ -20,6 +20,7 @@ export const formatCurrency = (value, currency) => {
 		style: "currency",
 		currency: currency,
 		trailingZeroDisplay: "stripIfInteger",
+		currencyDisplay: "narrowSymbol",
 	})
 	return (
 		formatter
diff --git a/frontend/src/views/AppSettings.vue b/frontend/src/views/AppSettings.vue
index 293d1783c0..15bf90d7a3 100644
--- a/frontend/src/views/AppSettings.vue
+++ b/frontend/src/views/AppSettings.vue
@@ -14,7 +14,7 @@
 							>
 								<FeatherIcon name="chevron-left" class="h-5 w-5" />
 							</Button>
-							<h2 class="text-xl font-semibold text-gray-900">Settings</h2>
+							<h2 class="text-xl font-semibold text-gray-900">{{ __("Settings") }} </h2>
 						</div>
 					</header>
 
@@ -22,7 +22,7 @@
 						<div class="flex flex-col bg-white rounded">
 							<Switch
 								size="md"
-								label="Enable Push Notifications"
+								:label="__('Enable Push Notifications')"
 								:class="description ? 'p-2' : ''"
 								:model-value="pushNotificationState"
 								:disabled="disablePushSetting"
@@ -37,8 +37,7 @@
 						>
 							<LoadingIndicator class="w-3 h-3 text-gray-800" />
 							<span class="text-gray-900 text-sm">
-								{{ pushNotificationState ? "Disabling" : "Enabling" }} Push
-								Notifications...
+								{{ pushNotificationState ? __("Disabling Push Notifications...") : __("Enabling Push Notifications...") }}
 							</span>
 						</div>
 					</div>
@@ -53,10 +52,11 @@ import { IonPage, IonContent } from "@ionic/vue"
 import { useRouter } from "vue-router"
 import { FeatherIcon, Switch, toast, LoadingIndicator } from "frappe-ui"
 
-import { computed, ref } from "vue"
+import { computed, inject, ref } from "vue"
 
 import { arePushNotificationsEnabled } from "@/data/notifications"
 
+const __ = inject("$translate")
 const router = useRouter()
 const pushNotificationState = ref(
 	window.frappePushNotification?.isNotificationEnabled()
@@ -77,7 +77,7 @@ const description = computed(() => {
 		window.frappe?.boot.push_relay_server_url &&
 		arePushNotificationsEnabled.data
 	)
-		? "Push notifications have been disabled on your site"
+		? __("Push notifications have been disabled on your site")
 		: ""
 })
 
@@ -92,8 +92,8 @@ const togglePushNotifications = (newValue) => {
 				pushNotificationState.value = false // Disable the switch
 				// TODO: add commonfied toast util for success and error messages
 				toast({
-					title: "Success",
-					text: "Push notifications disabled",
+					title: __("Success"),
+					text: __("Push notifications disabled"),
 					icon: "check-circle",
 					position: "bottom-center",
 					iconClasses: "text-green-500",
@@ -101,8 +101,8 @@ const togglePushNotifications = (newValue) => {
 			})
 			.catch((error) => {
 				toast({
-					title: "Error",
-					text: error.message,
+					title: __("Error"),
+					text: __(error.message),
 					icon: "alert-circle",
 					position: "bottom-center",
 					iconClasses: "text-red-500",
@@ -124,8 +124,8 @@ const enablePushNotifications = () => {
 				pushNotificationState.value = true
 			} else {
 				toast({
-					title: "Error",
-					text: "Push Notification permission denied",
+					title: __("Error"),
+					text: __("Push Notification permission denied"),
 					icon: "alert-circle",
 					position: "bottom-center",
 					iconClasses: "text-red-500",
@@ -135,8 +135,8 @@ const enablePushNotifications = () => {
 		})
 		.catch((error) => {
 			toast({
-				title: "Error",
-				text: error.message,
+				title: __("Error"),
+				text: __(error.message),
 				icon: "alert-circle",
 				position: "bottom-center",
 				iconClasses: "text-red-500",
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 7c3a8fc407..7e29d62372 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -3,7 +3,7 @@
 		<template #body>
 			<div class="flex flex-col items-center my-7 p-4 gap-7">
 				<CheckInPanel />
-				<QuickLinks :items="quickLinks" title="Quick Links" />
+				<QuickLinks :items="quickLinks" :title="__('Quick Links')" />
 				<RequestPanel />
 			</div>
 		</template>
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { markRaw } from "vue"
+import { inject, markRaw } from "vue"
 
 import CheckInPanel from "@/components/CheckInPanel.vue"
 import QuickLinks from "@/components/QuickLinks.vue"
@@ -24,6 +24,8 @@ import ExpenseIcon from "@/components/icons/ExpenseIcon.vue"
 import EmployeeAdvanceIcon from "@/components/icons/EmployeeAdvanceIcon.vue"
 import SalaryIcon from "@/components/icons/SalaryIcon.vue"
 
+const __ = inject("$translate")
+
 const quickLinks = [
 	{
 		icon: markRaw(AttendanceIcon),
@@ -37,22 +39,22 @@ const quickLinks = [
 	},
 	{
 		icon: markRaw(LeaveIcon),
-		title: "Request Leave",
+		title: __("Request Leave"),
 		route: "LeaveApplicationFormView",
 	},
 	{
 		icon: markRaw(ExpenseIcon),
-		title: "Claim an Expense",
+		title: __("Claim an Expense"),
 		route: "ExpenseClaimFormView",
 	},
 	{
 		icon: markRaw(EmployeeAdvanceIcon),
-		title: "Request an Advance",
+		title: __("Request an Advance"),
 		route: "EmployeeAdvanceFormView",
 	},
 	{
 		icon: markRaw(SalaryIcon),
-		title: "View Salary Slips",
+		title: __("View Salary Slips"),
 		route: "SalarySlipsDashboard",
 	},
 ]
diff --git a/frontend/src/views/InvalidEmployee.vue b/frontend/src/views/InvalidEmployee.vue
index 6a42c06081..2afca0f30b 100644
--- a/frontend/src/views/InvalidEmployee.vue
+++ b/frontend/src/views/InvalidEmployee.vue
@@ -4,12 +4,12 @@
 			<div class="flex h-screen w-screen flex-col justify-center bg-white">
 				<Dialog
 					:options="{
-						title: 'Login Failed',
-						message: `No active employee found associated with the email ID ${session?.user}. Try logging in with your employee email ID or contact your HR manager for access.`,
+						title: __('Login Failed'),
+						message: __('No active employee found associated with the email ID {0}. Try logging in with your employee email ID or contact your HR manager for access.', [session?.user]),
 						size: 'lg',
 						actions: [
 							{
-								label: 'Go to Login',
+								label: __('Go to Login'),
 								variant: 'solid',
 								onClick: () => session.logout.submit(),
 							},
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 40495aee28..00cc7aa1b2 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -4,20 +4,22 @@
 			<div class="flex h-screen w-screen flex-col justify-center bg-white">
 				<div class="flex flex-col mx-auto gap-3 items-center">
 					<FrappeHRLogo class="h-8 w-8" />
-					<div class="text-3xl font-semibold text-gray-900 text-center">Login to Frappe HR</div>
+					<div class="text-3xl font-semibold text-gray-900 text-center">
+						{{ __("Login to Frappe HR") }}
+					</div>
 				</div>
 
 				<div class="mx-auto mt-10 w-full px-8 sm:w-96">
 					<form class="flex flex-col space-y-4" @submit.prevent="submit">
 						<Input
-							label="Email"
+							:label="__('Email')"
 							placeholder="johndoe@mail.com"
 							v-model="email"
 							type="text"
 							autocomplete="username"
 						/>
 						<Input
-							label="Password"
+							:label="__('Password')"
 							type="password"
 							placeholder="••••••"
 							v-model="password"
@@ -29,7 +31,7 @@
 							variant="solid"
 							class="disabled:bg-gray-700 disabled:text-white !mt-6"
 						>
-							Login
+							{{ __("Login") }}
 						</Button>
 					</form>
 
@@ -52,10 +54,12 @@
 
 			<Dialog v-model="resetPassword.showDialog">
 				<template #body-title>
-					<h2 class="text-lg font-bold">Reset Password</h2>
+					<h2 class="text-lg font-bold">{{ __("Reset Password") }} </h2>
 				</template>
 				<template #body-content>
-					<p>Your password has expired. Please reset your password to continue</p>
+					<p>
+						{{ __("Your password has expired. Please reset your password to continue") }}
+					</p>
 				</template>
 				<template #actions>
 					<a
@@ -63,7 +67,7 @@
 						:href="resetPassword.link"
 						target="_blank"
 					>
-						Go to Reset Password page
+						{{ __("Go to Reset Password page") }}
 					</a>
 				</template>
 			</Dialog>
diff --git a/frontend/src/views/Notifications.vue b/frontend/src/views/Notifications.vue
index f670509e8c..554378bc3c 100644
--- a/frontend/src/views/Notifications.vue
+++ b/frontend/src/views/Notifications.vue
@@ -14,7 +14,7 @@
 							>
 								<FeatherIcon name="chevron-left" class="h-5 w-5" />
 							</Button>
-							<h2 class="text-xl font-semibold text-gray-900">Notifications</h2>
+							<h2 class="text-xl font-semibold text-gray-900">{{ __("Notifications") }} </h2>
 						</div>
 					</header>
 
@@ -46,7 +46,7 @@
 									<template #prefix>
 										<FeatherIcon name="check-circle" class="w-4" />
 									</template>
-									Mark all as read
+									{{ __('Mark all as read') }}
 								</Button>
 							</div>
 						</div>
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 1ceff543f4..c9cd14a865 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -14,7 +14,7 @@
 							>
 								<FeatherIcon name="chevron-left" class="h-5 w-5" />
 							</Button>
-							<h2 class="text-xl font-semibold text-gray-900">Profile</h2>
+							<h2 class="text-xl font-semibold text-gray-900">{{ __("Profile") }}</h2>
 						</div>
 					</header>
 
@@ -84,7 +84,7 @@
 											class="h-5 w-5 text-gray-500"
 										/>
 										<div class="text-base font-normal text-gray-800">
-											Settings
+											{{ __("Settings") }}
 										</div>
 									</div>
 									<FeatherIcon
@@ -104,7 +104,7 @@
 							<template #prefix>
 								<FeatherIcon name="log-out" class="w-4" />
 							</template>
-							Log Out
+							{{ __("Log Out") }}
 						</Button>
 					</div>
 				</div>
@@ -155,13 +155,14 @@ const socket = inject("$socket")
 const session = inject("$session")
 const user = inject("$user")
 const employee = inject("$employee")
+const __ = inject("$translate")
 
 const router = useRouter()
 
 const profileLinks = [
 	{
 		icon: "user",
-		title: "Employee Details",
+		title: __("Employee Details"),
 		fields: [
 			"employee_name",
 			"employee_number",
@@ -173,7 +174,7 @@ const profileLinks = [
 	},
 	{
 		icon: "file",
-		title: "Company Information",
+		title: __("Company Information"),
 		fields: [
 			"company",
 			"department",
@@ -186,7 +187,7 @@ const profileLinks = [
 	},
 	{
 		icon: "book",
-		title: "Contact Information",
+		title: __("Contact Information"),
 		fields: [
 			"cell_number",
 			"personal_email",
@@ -196,7 +197,7 @@ const profileLinks = [
 	},
 	{
 		icon: "dollar-sign",
-		title: "Salary Information",
+		title: __("Salary Information"),
 		fields: [
 			"ctc",
 			"payroll_cost_center",
@@ -252,7 +253,7 @@ const getFieldInfo = (fieldname) => {
 	const field = employeeDocType.data.find(
 		(field) => field.fieldname === fieldname
 	)
-	return [field?.label, field?.fieldtype]
+	return [__(field?.label, null, "Employee"), field?.fieldtype]
 }
 
 const logout = async () => {
diff --git a/frontend/src/views/attendance/AttendanceRequestList.vue b/frontend/src/views/attendance/AttendanceRequestList.vue
index d41bea3209..71867a144c 100644
--- a/frontend/src/views/attendance/AttendanceRequestList.vue
+++ b/frontend/src/views/attendance/AttendanceRequestList.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Attendance Request"
-			pageTitle="Attendance Request History"
+			:pageTitle="__('Attendance Request History')"
 			:fields="ATTENDANCE_REQUEST_FIELDS"
 			:filterConfig="FILTER_CONFIG"
 		/>
@@ -18,10 +18,10 @@ const FILTER_CONFIG = [
 	{
 		fieldname: "shift",
 		fieldtype: "Link",
-		label: "Shift",
+		label: __("Shift"),
 		options: "Shift Type",
 	},
-	{ fieldname: "from_date", fieldtype: "Date", label: "From Date" },
-	{ fieldname: "to_date", fieldtype: "Date", label: "To Date" },
+	{ fieldname: "from_date", fieldtype: "Date", label: __("From Date") },
+	{ fieldname: "to_date", fieldtype: "Date", label: __("To Date") },
 ]
 </script>
diff --git a/frontend/src/views/attendance/Dashboard.vue b/frontend/src/views/attendance/Dashboard.vue
index 3a37215362..e4e4acdc17 100644
--- a/frontend/src/views/attendance/Dashboard.vue
+++ b/frontend/src/views/attendance/Dashboard.vue
@@ -6,38 +6,38 @@
 				<div class="w-full">
 					<router-link :to="{ name: 'AttendanceRequestFormView' }" v-slot="{ navigate }">
 						<Button @click="navigate" variant="solid" class="w-full py-5 text-base">
-							Request Attendance
+							{{ __("Request Attendance") }}
 						</Button>
 					</router-link>
 				</div>
 				<div>
-					<div class="text-lg text-gray-800 font-bold">Recent Attendance Requests</div>
+					<div class="text-lg text-gray-800 font-bold">{{ __("Recent Attendance Requests") }}</div>
 					<RequestList
 						:component="markRaw(AttendanceRequestItem)"
 						:items="myAttendanceRequests?.data?.slice(0, 5)"
 						:addListButton="true"
-						listButtonRoute="AttendanceRequestListView"
+						:listButtonRoute="__('AttendanceRequestListView')"
 					/>
 				</div>
 				<div>
-					<div class="text-lg text-gray-800 font-bold">Upcoming Shifts</div>
+					<div class="text-lg text-gray-800 font-bold">{{ __("Upcoming Shifts") }}</div>
 					<RequestList
 						:component="markRaw(ShiftAssignmentItem)"
 						:items="upcomingShifts"
 						:addListButton="true"
 						listButtonRoute="ShiftAssignmentListView"
-						emptyStateMessage="You have no upcoming shifts"
+						:emptyStateMessage="__('You have no upcoming shifts')"
 					/>
 				</div>
 				<div class="w-full">
 					<router-link :to="{ name: 'ShiftRequestFormView' }" v-slot="{ navigate }">
 						<Button @click="navigate" variant="solid" class="w-full py-5 text-base">
-							Request a Shift
+							{{ __("Request a Shift") }}
 						</Button>
 					</router-link>
 				</div>
 				<div>
-					<div class="text-lg text-gray-800 font-bold">Recent Shift Requests</div>
+					<div class="text-lg text-gray-800 font-bold">{{ __("Recent Shift Requests") }}</div>
 					<RequestList
 						:component="markRaw(ShiftRequestItem)"
 						:items="myShiftRequests?.data?.slice(0, 5)"
diff --git a/frontend/src/views/attendance/EmployeeCheckinList.vue b/frontend/src/views/attendance/EmployeeCheckinList.vue
index cd96587bb9..23e5bea253 100644
--- a/frontend/src/views/attendance/EmployeeCheckinList.vue
+++ b/frontend/src/views/attendance/EmployeeCheckinList.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Employee Checkin"
-			pageTitle="Employee Checkin History"
+			:pageTitle="__('Employee Checkin History')"
 			:fields="EMPLOYEE_CHECKIN_FIELDS"
 			:filterConfig="FILTER_CONFIG"
 		/>
@@ -19,13 +19,13 @@ const FILTER_CONFIG = [
 	{
 		fieldname: "log_type",
 		fieldtype: "Select",
-		label: "Log Type",
+		label: __("Log Type"),
 		options: "IN\nOUT",
 	},
 	{
 		fieldname: "shift",
 		fieldtype: "Link",
-		label: "Shift",
+		label: __("Shift"),
 		options: "Shift Type",
 	},
 ]
diff --git a/frontend/src/views/attendance/ShiftAssignmentForm.vue b/frontend/src/views/attendance/ShiftAssignmentForm.vue
index dd2205da43..71a1a43e38 100644
--- a/frontend/src/views/attendance/ShiftAssignmentForm.vue
+++ b/frontend/src/views/attendance/ShiftAssignmentForm.vue
@@ -72,7 +72,7 @@ function setFormReadOnly() {
 function validateDates(start_date, end_date) {
 	if (!(start_date && end_date)) return
 
-	const error_message = start_date > end_date ? "End Date cannot be before Start Date" : ""
+	const error_message = start_date > end_date ? __("End Date cannot be before Start Date") : ""
 
 	const start_date_field = formFields.data.find((field) => field.fieldname === "start_date")
 	start_date_field.error_message = error_message
diff --git a/frontend/src/views/attendance/ShiftAssignmentList.vue b/frontend/src/views/attendance/ShiftAssignmentList.vue
index d58fd8c719..ed659a8a60 100644
--- a/frontend/src/views/attendance/ShiftAssignmentList.vue
+++ b/frontend/src/views/attendance/ShiftAssignmentList.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Shift Assignment"
-			pageTitle="Shift Assignment History"
+			:pageTitle="__('Shift Assignment History')"
 			:fields="SHIFT_ASSIGNMENT_FIELDS"
 			:filterConfig="FILTER_CONFIG"
 		/>
@@ -18,10 +18,10 @@ const FILTER_CONFIG = [
 	{
 		fieldname: "shift_type",
 		fieldtype: "Link",
-		label: "Shift Type",
+		label: __("Shift Type"),
 		options: "Shift Type",
 	},
-	{ fieldname: "start_date", fieldtype: "Date", label: "Start Date" },
-	{ fieldname: "end_date", fieldtype: "Date", label: "End Date" },
+	{ fieldname: "start_date", fieldtype: "Date", label: __("Start Date") },
+	{ fieldname: "end_date", fieldtype: "Date", label: __("End Date") },
 ]
 </script>
diff --git a/frontend/src/views/attendance/ShiftRequestForm.vue b/frontend/src/views/attendance/ShiftRequestForm.vue
index a4f378d962..3f4dc8ca49 100644
--- a/frontend/src/views/attendance/ShiftRequestForm.vue
+++ b/frontend/src/views/attendance/ShiftRequestForm.vue
@@ -87,7 +87,7 @@ function setFormReadOnly() {
 function validateDates(from_date, to_date) {
 	if (!(from_date && to_date)) return
 
-	const error_message = from_date > to_date ? "To Date cannot be before From Date" : ""
+	const error_message = from_date > to_date ? __("To Date cannot be before From Date") : ""
 
 	const from_date_field = formFields.data.find((field) => field.fieldname === "from_date")
 	from_date_field.error_message = error_message
diff --git a/frontend/src/views/attendance/ShiftRequestList.vue b/frontend/src/views/attendance/ShiftRequestList.vue
index ca9ffd73eb..f6532b1489 100644
--- a/frontend/src/views/attendance/ShiftRequestList.vue
+++ b/frontend/src/views/attendance/ShiftRequestList.vue
@@ -31,28 +31,28 @@ const FILTER_CONFIG = [
 	{
 		fieldname: "status",
 		fieldtype: "Select",
-		label: "Status",
+		label: __("Status"),
 		options: STATUS_FILTER_OPTIONS,
 	},
 	{
 		fieldname: "shift_type",
 		fieldtype: "Link",
-		label: "Shift Type",
+		label: __("Shift Type"),
 		options: "Shift Type",
 	},
 	{
 		fieldname: "employee",
 		fieldtype: "Link",
-		label: "Employee",
+		label: __("Employee"),
 		options: "Employee",
 	},
 	{
 		fieldname: "department",
 		fieldtype: "Link",
-		label: "Department",
+		label: __("Department"),
 		options: "Department",
 	},
-	{ fieldname: "from_date", fieldtype: "Date", label: "From Date" },
-	{ fieldname: "to_date", fieldtype: "Date", label: "To Date" },
+	{ fieldname: "from_date", fieldtype: "Date", label: __("From Date") },
+	{ fieldname: "to_date", fieldtype: "Date", label: __("To Date") },
 ]
 </script>
diff --git a/frontend/src/views/employee_advance/List.vue b/frontend/src/views/employee_advance/List.vue
index 7b586ce52c..ea8c5885df 100644
--- a/frontend/src/views/employee_advance/List.vue
+++ b/frontend/src/views/employee_advance/List.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Employee Advance"
-			pageTitle="Employee Advances"
+			:pageTitle="__('Employee Advances')"
 			:tabButtons="TAB_BUTTONS"
 			:fields="EMPLOYEE_ADVANCE_FIELDS"
 			:filterConfig="FILTER_CONFIG"
@@ -14,7 +14,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Advances", "Team Advances"]
+const TAB_BUTTONS = ["My Advances", "Team Advances"] // __("My Advances"), __("Team Advances")
 const EMPLOYEE_ADVANCE_FIELDS = [
 	"name",
 	"employee",
diff --git a/frontend/src/views/expense_claim/Dashboard.vue b/frontend/src/views/expense_claim/Dashboard.vue
index 57a0adcfc4..2c788d1717 100644
--- a/frontend/src/views/expense_claim/Dashboard.vue
+++ b/frontend/src/views/expense_claim/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-	<BaseLayout pageTitle="Expense Claims">
+	<BaseLayout :pageTitle="__('Expense Claims')">
 		<template #body>
 			<div class="flex flex-col mt-7 mb-7 p-4 gap-7">
 				<ExpenseClaimSummary />
@@ -14,13 +14,13 @@
 							variant="solid"
 							class="w-full py-5 text-base"
 						>
-							Claim an Expense
+							{{ __("Claim an Expense") }}
 						</Button>
 					</router-link>
 				</div>
 
 				<div>
-					<div class="text-lg text-gray-800 font-bold">Recent Expenses</div>
+					<div class="text-lg text-gray-800 font-bold">{{ __("Recent Expenses") }}</div>
 					<RequestList
 						:component="markRaw(ExpenseClaimItem)"
 						:items="myClaims.data"
@@ -32,13 +32,13 @@
 				<div>
 					<div class="flex flex-row justify-between items-center">
 						<div class="text-lg text-gray-800 font-bold">
-							Employee Advance Balance
+							{{ __("Employee Advance Balance") }}
 						</div>
 						<router-link
 							:to="{ name: 'EmployeeAdvanceListView' }"
 							class="text-sm text-gray-800 font-semibold cursor-pointer underline underline-offset-2"
 						>
-							View List
+							{{ __("View List") }}
 						</router-link>
 					</div>
 
diff --git a/frontend/src/views/expense_claim/List.vue b/frontend/src/views/expense_claim/List.vue
index 77589c68b2..6500334e3a 100644
--- a/frontend/src/views/expense_claim/List.vue
+++ b/frontend/src/views/expense_claim/List.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Expense Claim"
-			pageTitle="Claim History"
+			:pageTitle="('Claim History')"
 			:tabButtons="TAB_BUTTONS"
 			:fields="EXPENSE_CLAIM_FIELDS"
 			groupBy="`tabExpense Claim`.name"
@@ -15,7 +15,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Claims", "Team Claims"]
+const TAB_BUTTONS = ["My Claims", "Team Claims"] // __("My Claims"), __("Team Claims")
 const EXPENSE_CLAIM_FIELDS = [
 	"`tabExpense Claim`.name",
 	"`tabExpense Claim`.employee",
diff --git a/frontend/src/views/leave/Dashboard.vue b/frontend/src/views/leave/Dashboard.vue
index f1a3c78076..153026c1cc 100644
--- a/frontend/src/views/leave/Dashboard.vue
+++ b/frontend/src/views/leave/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-	<BaseLayout pageTitle="Leaves &amp; Holidays">
+	<BaseLayout :pageTitle="__('Leaves & Holidays')">
 		<template #body>
 			<div class="flex flex-col items-center mt-7 mb-7 py-4">
 				<LeaveBalance />
@@ -14,11 +14,11 @@
 							variant="solid"
 							class="py-5 text-base w-full"
 						>
-							Request Leave
+							{{ __("Request a Leave") }}
 						</Button>
 					</router-link>
 					<div>
-						<div class="text-lg text-gray-800 font-bold">Recent Leaves</div>
+						<div class="text-lg text-gray-800 font-bold">{{ __('Recent Leaves') }} </div>
 						<RequestList
 							:component="markRaw(LeaveRequestItem)"
 							:items="myLeaves.data"
diff --git a/frontend/src/views/leave/Form.vue b/frontend/src/views/leave/Form.vue
index e6f7a1d3dc..95a508c308 100644
--- a/frontend/src/views/leave/Form.vue
+++ b/frontend/src/views/leave/Form.vue
@@ -24,6 +24,7 @@ import FormView from "@/components/FormView.vue"
 
 const dayjs = inject("$dayjs")
 const employee = inject("$employee")
+const __ = inject("$translate")
 const today = dayjs().format("YYYY-MM-DD")
 
 const props = defineProps({
@@ -161,7 +162,7 @@ function validateDates(from_date, to_date) {
 	if (!(from_date && to_date)) return
 
 	const error_message =
-		from_date > to_date ? "To Date cannot be before From Date" : ""
+		from_date > to_date ? __("To Date cannot be before From Date") : ""
 
 	const from_date_field = formFields.data.find(
 		(field) => field.fieldname === "from_date"
diff --git a/frontend/src/views/leave/List.vue b/frontend/src/views/leave/List.vue
index c87139b8fc..1526c2b541 100644
--- a/frontend/src/views/leave/List.vue
+++ b/frontend/src/views/leave/List.vue
@@ -2,7 +2,7 @@
 	<ion-page>
 		<ListView
 			doctype="Leave Application"
-			pageTitle="Leave History"
+			:pageTitle="__('Leave History')"
 			:tabButtons="TAB_BUTTONS"
 			:fields="LEAVE_FIELDS"
 			:filterConfig="FILTER_CONFIG"
@@ -14,7 +14,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Leaves", "Team Leaves"]
+const TAB_BUTTONS = ["My Leaves", "Team Leaves"] // __("My Leaves"), __("Team Leaves")
 const LEAVE_FIELDS = [
 	"name",
 	"employee",
diff --git a/frontend/src/views/salary_slip/Dashboard.vue b/frontend/src/views/salary_slip/Dashboard.vue
index 7abddbf219..80f0312fa7 100644
--- a/frontend/src/views/salary_slip/Dashboard.vue
+++ b/frontend/src/views/salary_slip/Dashboard.vue
@@ -1,11 +1,11 @@
 <template>
-	<BaseLayout pageTitle="Salary Slips">
+	<BaseLayout :pageTitle="__('Salary Slips')">
 		<template #body>
 			<div class="flex flex-col items-center my-7 p-4">
 				<div class="flex flex-col w-full bg-white rounded py-5 px-3.5 gap-5">
 					<div v-if="lastSalarySlip" class="flex flex-col w-full gap-1.5">
 						<span class="text-gray-600 text-sm font-medium leading-5">
-							Year To Date
+							{{ __("Year To Date") }}
 						</span>
 						<span class="text-gray-800 text-xl font-bold leading-6">
 							{{
@@ -18,9 +18,9 @@
 					</div>
 
 					<Autocomplete
-						label="Payroll Period"
+						:label="__('Payroll Period')"
 						class="w-full"
-						placeholder="Select Payroll Period"
+						:placeholder="__('Select Payroll Period')"
 						v-model="selectedPeriod"
 						:options="payrollPeriods.data"
 					/>
@@ -47,7 +47,7 @@
 							</router-link>
 						</div>
 					</div>
-					<EmptyState message="No salary slips found" v-else />
+					<EmptyState :message="__('No salary slips found')" v-else />
 				</div>
 			</div>
 		</template>
diff --git a/frontend/src/views/salary_slip/Detail.vue b/frontend/src/views/salary_slip/Detail.vue
index 328ceb9903..349db97d9d 100644
--- a/frontend/src/views/salary_slip/Detail.vue
+++ b/frontend/src/views/salary_slip/Detail.vue
@@ -36,7 +36,7 @@
 						variant="solid"
 						:loading="loading"
 					>
-						Download PDF
+						{{ __("Download PDF") }}
 					</Button>
 				</template>
 			</FormView>
diff --git a/hrms/www/hrms.py b/hrms/www/hrms.py
index 70efefb8f1..cc3ac3f25d 100644
--- a/hrms/www/hrms.py
+++ b/hrms/www/hrms.py
@@ -1,4 +1,5 @@
 import frappe
+from frappe.boot import load_translations
 
 no_cache = 1
 
@@ -20,9 +21,14 @@ def get_context_for_dev():
 
 
 def get_boot():
-	return frappe._dict(
+	bootinfo = frappe._dict(
 		{
 			"site_name": frappe.local.site,
 			"push_relay_server_url": frappe.conf.get("push_relay_server_url") or "",
 		}
 	)
+
+	bootinfo.lang = frappe.local.lang
+	load_translations(bootinfo)
+
+	return bootinfo