diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index 227ffd3c..12f6e2e8 100644
--- a/src/components/Alert.vue
+++ b/src/components/Alert.vue
@@ -22,7 +22,7 @@
       <div class="ml-2 w-full">
         <div class="flex flex-col md:flex-row md:items-baseline">
           <h3 class="text-lg font-medium text-ink-gray-9" v-if="title">
-            {{ title }}
+            {{ __(title) }}
           </h3>
           <div class="mt-1 md:ml-2 md:mt-0">
             <slot></slot>
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 
 interface AlertProps {
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 03030aa8..dc7d9f45 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -23,7 +23,7 @@
                   {{ displayValue(selectedValue) }}
                 </span>
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
-                  {{ placeholder || '' }}
+                  {{ __(placeholder) || '' }}
                 </span>
               </div>
               <FeatherIcon
@@ -62,7 +62,7 @@
                     "
                     :value="query"
                     autocomplete="off"
-                    placeholder="Search"
+                    :placeholder="__('Search')"
                   />
                   <button
                     class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
@@ -81,7 +81,7 @@
                   v-if="group.group && !group.hideLabel"
                   class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
                 >
-                  {{ group.group }}
+                  {{ __(group.group) }}
                 </div>
                 <ComboboxOption
                   as="template"
@@ -130,7 +130,7 @@
                           v-if="option?.description"
                           class="text-sm text-ink-gray-5"
                         >
-                          {{ option.description }}
+                          {{ __(option.description) }}
                         </div>
                       </slot>
                     </div>
@@ -141,7 +141,7 @@
                 v-if="groups.length == 0"
                 class="rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
               >
-                No results found
+                {{ __('No results found') }}
               </li>
             </ComboboxOptions>
 
@@ -175,6 +175,7 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/vue'
+import { __ } from '../utils/translation'
 import { nextTick } from 'vue'
 import Popover from './Popover.vue'
 import { Button } from './Button'
@@ -280,6 +281,9 @@ export default {
     },
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     rootRef() {
       return this.$refs['rootRef']
     },
@@ -317,7 +321,7 @@ export default {
     },
     getLabel(option) {
       if (isOptionOrValue(option) === 'value') return option
-      return option?.label || option?.value || 'No label'
+      return __(option?.label || option?.value || 'No label')
     },
     sanitizeOptions(options) {
       if (!options) return []
@@ -325,7 +329,7 @@ export default {
       return options.map((option) => {
         return isOptionOrValue(option) === 'option'
           ? option
-          : { label: option, value: option }
+          : { label: __(option), value: option }
       })
     },
     isOptionSelected(option) {
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index f3d4a72a..23d4308d 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -19,7 +19,7 @@
         <slot></slot>
       </div>
       <template v-else>
-        {{ label && label[0] }}
+        {{ label && __(label[0]) }}
       </template>
     </div>
     <div
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { ref, computed } from 'vue'
 
 const imgFetchError = ref(false)
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index 1bddce32..ca3f20f0 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -9,7 +9,7 @@
     >
       <slot name="prefix"></slot>
     </div>
-    <slot>{{ props.label?.toString() }}</slot>
+    <slot>{{ __(props.label?.toString() || '') }}</slot>
     <div
       :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 
 interface Label {
diff --git a/src/components/Billing/TrialBanner.vue b/src/components/Billing/TrialBanner.vue
index 1218fda9..9d680b85 100644
--- a/src/components/Billing/TrialBanner.vue
+++ b/src/components/Billing/TrialBanner.vue
@@ -23,6 +23,7 @@
 import LightningIcon from './LightningIcon.vue'
 import FeatherIcon from '../FeatherIcon.vue'
 import { Button } from '../Button'
+import { __ } from '../../utils/translation'
 import { createResource } from '../../resources'
 import { ref, computed } from 'vue'
 
@@ -38,11 +39,11 @@ const showBanner = ref(false)
 
 const trialTitle = computed(() => {
   return trialEndDays.value > 1
-    ? 'Trial ends in ' + trialEndDays.value + ' days'
-    : 'Trial will end tomorrow'
+    ? __('Trial ends in {0} days', [trialEndDays.value])
+    : __('Trial will end tomorrow')
 })
 
-const trialMessage = 'Upgrade to a paid plan for uninterrupted services'
+const trialMessage = __('Upgrade to a paid plan for uninterrupted services')
 
 createResource({
   url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
index f390431a..1e7f5f77 100644
--- a/src/components/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs.vue
@@ -43,7 +43,7 @@
         >
           <slot name="prefix" :item="item" />
           <span>
-            {{ item.label }}
+            {{ __(item.label) }}
           </span>
           <slot name="suffix" :item="item" />
         </router-link>
@@ -59,7 +59,7 @@
         >
           <slot name="prefix" :item="item" />
           <span>
-            {{ item.label }}
+            {{ __(item.label) }}
           </span>
           <slot name="suffix" :item="item" />
         </button>
@@ -75,6 +75,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { useWindowSize } from '@vueuse/core'
 import { computed } from 'vue'
 import { RouterLinkProps, useRouter } from 'vue-router'
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index bb5d978b..6f12663f 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -37,7 +37,7 @@
       <slot name="icon" v-else-if="$slots.icon" />
     </template>
     <span v-else :class="{ 'sr-only': isIconButton }">
-      <slot>{{ label }}</slot>
+      <slot>{{ __(label || '') }}</slot>
     </span>
 
     <slot name="suffix">
@@ -53,6 +53,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, useSlots, type Component } from 'vue'
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
 import { useRouter, type RouteLocation } from 'vue-router'
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index c9043960..029ebf6b 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -14,7 +14,7 @@
       <div class="mb-2 flex justify-between">
         <!-- left side  -->
         <!-- Year, Month -->
-        <span class="text-xl font-medium"> {{ currentMonthYear }}</span>
+        <span class="text-xl font-medium"> {{ __(currentMonthYear) }}</span>
         <!-- right side -->
         <!-- actions buttons for calendar -->
         <div class="flex gap-x-1">
@@ -88,6 +88,7 @@ import CalendarWeekly from './CalendarWeekly.vue'
 import CalendarDaily from './CalendarDaily.vue'
 import NewEventModal from './NewEventModal.vue'
 import useEventModal from './composables/useEventModal'
+import { __ } from '../../utils/translation'
 
 const props = defineProps({
   events: {
diff --git a/src/components/Calendar/CalendarEvent.vue b/src/components/Calendar/CalendarEvent.vue
index 25fb4171..8f135d64 100644
--- a/src/components/Calendar/CalendarEvent.vue
+++ b/src/components/Calendar/CalendarEvent.vue
@@ -37,7 +37,7 @@
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">
-          {{ props.event.title || 'New Event' }}
+          {{ __(props.event.title || 'New Event') }}
         </p>
         <p
           class="text-ellipsis text-xs font-normal text-gray-800"
@@ -85,7 +85,7 @@
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">
-          {{ props.event.title || 'New Event' }}
+          {{ __(props.event.title || 'New Event') }}
         </p>
         <p
           class="text-ellipsis text-xs font-normal text-gray-800"
@@ -117,6 +117,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 import EventModalContent from './EventModalContent.vue'
 import NewEventModal from './NewEventModal.vue'
diff --git a/src/components/Calendar/CalendarMonthly.vue b/src/components/Calendar/CalendarMonthly.vue
index 3590c60a..439ae04d 100644
--- a/src/components/Calendar/CalendarMonthly.vue
+++ b/src/components/Calendar/CalendarMonthly.vue
@@ -5,8 +5,9 @@
       <span
         v-for="day in daysList"
         class="text-center text-sm font-normal text-gray-600"
-        >{{ day }}</span
       >
+        {{ __(day) }}
+      </span>
     </div>
 
     <!-- Date Grid -->
@@ -34,7 +35,7 @@
                 date.toDateString() === new Date().toDateString() && 'font-bold'
               "
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate().toString()) }}
             </span>
             <span v-else class="z-10 w-full bg-white py-1 text-center">
               {{ parseDateEventPopupFormat(date, (showDay = false)) }}
@@ -80,6 +81,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import { parseDateEventPopupFormat, daysList, parseDate } from './calendarUtils'
 import { inject } from 'vue'
 import CalendarEvent from './CalendarEvent.vue'
diff --git a/src/components/Calendar/EventModalContent.vue b/src/components/Calendar/EventModalContent.vue
index 0ab07421..b895716d 100644
--- a/src/components/Calendar/EventModalContent.vue
+++ b/src/components/Calendar/EventModalContent.vue
@@ -13,7 +13,7 @@
     </div>
     <div class="flex flex-col gap-5">
       <div class="flex justify-between text-xl font-semibold">
-        <span>{{ calendarEvent.title || 'New Event' }}</span>
+        <span>{{ __(calendarEvent.title || 'New Event') }}</span>
       </div>
       <div class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
@@ -25,7 +25,7 @@
         <div class="flex items-center gap-2" v-if="calendarEvent.participant">
           <FeatherIcon name="user" class="h-4 w-4" />
           <span class="text-sm font-normal">
-            {{ calendarEvent.participant }}
+            {{ __(calendarEvent.participant) }}
           </span>
         </div>
         <div
@@ -40,7 +40,7 @@
         <div class="flex items-center gap-2" v-if="calendarEvent.venue">
           <FeatherIcon name="map-pin" class="h-4 w-4" />
           <span class="text-sm font-normal">
-            {{ calendarEvent.venue }}
+            {{ __(calendarEvent.venue) }}
           </span>
         </div>
       </div>
@@ -48,6 +48,7 @@
   </div>
 </template>
 <script setup>
+import { __ } from '../../utils/translation'
 import FeatherIcon from '../FeatherIcon.vue'
 
 import { parseDateEventPopupFormat } from './calendarUtils'
diff --git a/src/components/Calendar/ShowMoreCalendarEvent.vue b/src/components/Calendar/ShowMoreCalendarEvent.vue
index 6bbf7206..bf925ef1 100644
--- a/src/components/Calendar/ShowMoreCalendarEvent.vue
+++ b/src/components/Calendar/ShowMoreCalendarEvent.vue
@@ -11,10 +11,11 @@
     class="w-fit self-center rounded-sm p-[1px] text-sm font-bold text-gray-600 hover:cursor-pointer hover:bg-gray-200"
     @click="emit('showMoreEvents')"
   >
-    +{{ totalEventsCount - 1 }} more
+    {{ __('+{0} more', [totalEventsCount - 1]) }}
   </span>
 </template>
 <script setup>
+import { __ } from '../../utils/translation'
 import CalendarEvent from './CalendarEvent.vue'
 
 const props = defineProps({
diff --git a/src/components/Card.vue b/src/components/Card.vue
index a02edd1d..df50ae18 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -5,14 +5,14 @@
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
           <slot name="actions-left"></slot>
         </div>
-        <h2 class="text-xl font-semibold">{{ title }}</h2>
+        <h2 class="text-xl font-semibold">{{ __(title) }}</h2>
       </div>
       <div class="flex items-center space-x-2" v-if="$slots['actions']">
         <slot name="actions"></slot>
       </div>
     </div>
     <p class="mt-1.5 text-base text-gray-600" v-if="subtitle">
-      {{ subtitle }}
+      {{ __(subtitle) }}
     </p>
     <div
       v-if="loading"
@@ -25,23 +25,19 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { __ } from '../utils/translation'
 import LoadingText from './LoadingText.vue'
-export default {
-  name: 'Card',
-  props: {
-    title: {
-      type: String,
-    },
-    subtitle: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-    },
+
+const props = defineProps({
+  title: {
+    type: String,
   },
-  components: {
-    LoadingText,
+  subtitle: {
+    type: String,
   },
-}
+  loading: {
+    type: Boolean,
+  },
+})
 </script>
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 05e79168..e1317217 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -22,11 +22,12 @@
       v-bind="attrs"
     />
     <label class="block" :class="labelClasses" v-if="label" :for="htmlId">
-      {{ label }}
+      {{ __(label) }}
     </label>
   </div>
 </template>
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed, useAttrs } from 'vue'
 import { useId } from '../utils/useId'
 
diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue
index f2cc582f..a4cb3527 100644
--- a/src/components/CircularProgressBar.vue
+++ b/src/components/CircularProgressBar.vue
@@ -8,14 +8,15 @@
     }"
   >
     <div v-if="!isCompleted">
-      <p v-if="!showPercentage">{{ step }}</p>
-      <p v-else>{{ progress.toFixed(0) }}%</p>
+      <p v-if="!showPercentage">{{ __(step.toString()) }}</p>
+      <p v-else>{{ __(progress.toFixed(0)) }}%</p>
     </div>
     <FeatherIcon v-else name="check" class="check-icon" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 import FeatherIcon from './FeatherIcon.vue'
 
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
index 51ef07c3..bf0372b6 100644
--- a/src/components/ConfirmDialog.vue
+++ b/src/components/ConfirmDialog.vue
@@ -1,8 +1,12 @@
 <template>
-  <Dialog v-model="showDialog" :options="{ title }">
+  <Dialog v-model="showDialog" :options="{ title: __(title) }">
     <template #body-content>
       <div class="space-y-4">
-        <p class="text-p-base text-gray-800" v-if="message" v-html="message" />
+        <p
+          class="text-p-base text-gray-800"
+          v-if="message"
+          v-html="__(message)"
+        />
       </div>
     </template>
     <template #actions>
@@ -11,6 +15,7 @@
   </Dialog>
 </template>
 <script>
+import { __ } from '../utils/translation'
 import { Button } from './Button'
 import Dialog from './Dialog.vue'
 
@@ -40,6 +45,9 @@ export default {
     }
   },
   methods: {
+    __(message) {
+      return __(message)
+    },
     handleConfirmation() {
       try {
         this.onConfirm?.({
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 19060327..fe520f3b 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -33,7 +33,7 @@
             />
           </Button>
           <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
-            {{ formattedMonth }}
+            {{ __(formattedMonth) }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
             <FeatherIcon
@@ -74,7 +74,7 @@
               v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -100,7 +100,7 @@
                 }
               "
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate().toString()) }}
             </div>
           </div>
         </div>
@@ -132,6 +132,7 @@ import Popover from './Popover.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 
+import { __ } from '../utils/translation'
 import { getDate, getDateValue, luxonDate } from '../utils/dates'
 import { useDatePicker } from '../utils/useDatePicker'
 
diff --git a/src/components/DateRangePicker.vue b/src/components/DateRangePicker.vue
index 1969d42c..25faf1ee 100644
--- a/src/components/DateRangePicker.vue
+++ b/src/components/DateRangePicker.vue
@@ -33,7 +33,7 @@
             />
           </Button>
           <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
-            {{ formattedMonth }}
+            {{ __(formattedMonth) }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
             <FeatherIcon
@@ -60,7 +60,7 @@
               v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -85,7 +85,7 @@
               }"
               @click="() => handleDateClick(date)"
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate().toString()) }}
             </div>
           </div>
         </div>
@@ -128,6 +128,7 @@ import Popover from './Popover.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 
+import { __ } from '../utils/translation'
 import { getDate, getDateValue } from '../utils/dates'
 import { useDatePicker } from '../utils/useDatePicker'
 
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
index 234c3179..a72e920d 100644
--- a/src/components/DateTimePicker.vue
+++ b/src/components/DateTimePicker.vue
@@ -33,7 +33,7 @@
             />
           </Button>
           <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
-            {{ formattedMonth }}
+            {{ __(formattedMonth) }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
             <FeatherIcon
@@ -79,7 +79,7 @@
               v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
-              {{ d }}
+              {{ __(d) }}
             </div>
           </div>
           <div
@@ -105,7 +105,7 @@
                 }
               "
             >
-              {{ date.getDate() }}
+              {{ __(date.getDate().toString()) }}
             </div>
           </div>
         </div>
@@ -202,6 +202,7 @@ import {
   luxonDate,
 } from '../utils/dates'
 import { useDatePicker } from '../utils/useDatePicker'
+import { __ } from '../utils/translation'
 
 import type { DatePickerEmits, DatePickerProps } from './types/DatePicker'
 
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 73862413..2eed82d1 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -77,7 +77,7 @@
                               <h3
                                 class="text-2xl font-semibold leading-6 text-ink-gray-9"
                               >
-                                {{ options.title || 'Untitled' }}
+                                {{ __(options.title || 'Untitled') }}
                               </h3>
                             </slot>
                           </DialogTitle>
@@ -108,7 +108,7 @@
                           class="text-p-base text-ink-gray-7"
                           v-if="options.message"
                         >
-                          {{ options.message }}
+                          {{ __(options.message) }}
                         </p>
                       </slot>
                     </div>
@@ -126,9 +126,8 @@
                       v-for="action in actions"
                       :key="action.label"
                       v-bind="action"
-                    >
-                      {{ action.label }}
-                    </Button>
+                      :label="action.label"
+                    />
                   </div>
                 </slot>
               </div>
@@ -148,6 +147,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
+import { __ } from '../utils/translation'
 import { computed, reactive } from 'vue'
 import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 7fa6f28e..6c7cd133 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -8,9 +8,12 @@
       <template #target>
         <MenuButton as="div">
           <slot v-if="$slots.default" v-bind="{ open }" />
-          <Button v-else :active="open" v-bind="button">
-            {{ button ? button?.label || null : 'Options' }}
-          </Button>
+          <Button
+            v-else
+            :label="button ? button?.label || '' : 'Options'"
+            :active="open"
+            v-bind="button"
+          />
         </MenuButton>
       </template>
 
@@ -28,41 +31,43 @@
               v-if="group.group && !group.hideLabel"
               class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6"
             >
-              {{ group.group }}
+              {{ __(group.group) }}
             </div>
             <MenuItem
               v-for="item in group.items"
               :key="item.label"
               v-slot="{ active }"
             >
-              <component
-                v-if="item.component"
-                :is="item.component"
-                :active="active"
-              />
-              <button
-                v-else
-                :class="[
-                  active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
-                  'group flex h-7 w-full items-center rounded px-2 text-base',
-                ]"
-                @click="item.onClick"
-              >
-                <FeatherIcon
-                  v-if="item.icon && typeof item.icon === 'string'"
-                  :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
-                  aria-hidden="true"
-                />
+              <slot name="item" :item="item" :active="active">
                 <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
-                  v-else-if="item.icon"
-                  :is="item.icon"
+                  v-if="item.component"
+                  :is="item.component"
+                  :active="active"
                 />
-                <span class="whitespace-nowrap text-ink-gray-7">
-                  {{ item.label }}
-                </span>
-              </button>
+                <button
+                  v-else
+                  :class="[
+                    active ? 'bg-surface-gray-3' : 'text-ink-gray-6',
+                    'group flex h-7 w-full items-center rounded px-2 text-base',
+                  ]"
+                  @click="item.onClick"
+                >
+                  <FeatherIcon
+                    v-if="item.icon && typeof item.icon === 'string'"
+                    :name="item.icon"
+                    class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
+                    aria-hidden="true"
+                  />
+                  <component
+                    class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
+                    v-else-if="item.icon"
+                    :is="item.icon"
+                  />
+                  <span class="whitespace-nowrap text-ink-gray-7">
+                    {{ __(item.label) }}
+                  </span>
+                </button>
+              </slot>
             </MenuItem>
           </div>
         </MenuItems>
@@ -73,6 +78,7 @@
 
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { __ } from '../utils/translation'
 import Popover from './Popover.vue'
 import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index f2c24f7c..8888ee07 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -7,18 +7,22 @@
   ></div>
 </template>
 
-<script>
-export default {
-  name: 'ErrorMessage',
-  props: ['message'],
-  computed: {
-    errorMessage() {
-      if (!this.message) return ''
-      if (this.message instanceof Error) {
-        return this.message.messages || this.message.message
-      }
-      return this.message
-    },
+<script setup>
+import { __ } from '../utils/translation'
+import { computed } from 'vue'
+
+const props = defineProps({
+  message: {
+    type: [String, Error],
+    required: true,
   },
-}
+})
+
+const errorMessage = computed(() => {
+  if (!props.message) return ''
+  if (props.message instanceof Error) {
+    return props.message.messages || props.message.message
+  }
+  return __(props.message)
+})
 </script>
diff --git a/src/components/FormControl.vue b/src/components/FormControl.vue
index b105f327..640c4bbf 100644
--- a/src/components/FormControl.vue
+++ b/src/components/FormControl.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]">
     <label class="block" :class="labelClasses" v-if="label" :for="id">
-      {{ label }}
+      {{ __(label) }}
       <span class="text-ink-red-3" v-if="required">*</span>
     </label>
     <Select
@@ -38,7 +38,7 @@
       </template>
     </TextInput>
     <slot name="description">
-      <p v-if="description" :class="descriptionClasses">{{ description }}</p>
+      <p v-if="description" :class="descriptionClasses">{{ __(description) }}</p>
     </slot>
   </div>
   <Checkbox
@@ -49,6 +49,7 @@
 </template>
 <script setup lang="ts">
 import { useAttrs, computed } from 'vue'
+import { __ } from '../utils/translation'
 import { useId } from '../utils/useId'
 import TextInput from './TextInput.vue'
 import type { TextInputTypes } from './types/TextInput'
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 8254be19..6428e1ad 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -4,7 +4,7 @@
       v-if="label && type != 'checkbox'"
       class="mb-2 block text-sm leading-4 text-gray-700"
     >
-      {{ label }}
+      {{ __(label) }}
     </span>
     <div
       class="relative flex"
@@ -37,7 +37,7 @@
       <textarea
         v-if="type === 'textarea'"
         v-bind="inputAttributes"
-        :placeholder="placeholder"
+        :placeholder="__(placeholder)"
         class="placeholder-gray-500"
         :class="[
           'form-textarea block w-full resize-none',
@@ -74,12 +74,13 @@
       v-if="label && type == 'checkbox'"
       class="ml-2 inline-block text-base leading-4"
     >
-      {{ label }}
+      {{ __(label) }}
     </span>
   </label>
 </template>
 
 <script>
+import { __ } from '../utils/translation'
 import debounce from '../utils/debounce.ts'
 import FeatherIcon from './FeatherIcon.vue'
 
@@ -140,6 +141,9 @@ export default {
   },
   emits: ['input', 'change', 'update:modelValue'],
   methods: {
+    __(message) {
+      return __(message)
+    },
     focus() {
       this.$refs.input.focus()
     },
diff --git a/src/components/ListFilter/ListFilter.vue b/src/components/ListFilter/ListFilter.vue
index 83e2c202..3882282c 100644
--- a/src/components/ListFilter/ListFilter.vue
+++ b/src/components/ListFilter/ListFilter.vue
@@ -7,7 +7,7 @@
           <div
             class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-7 pt-[1px] text-2xs font-medium text-ink-white"
           >
-            {{ filters.size }}
+            {{ __(filters.size.toString()) }}
           </div>
         </template>
       </Button>
@@ -28,7 +28,7 @@
               <div
                 class="w-13 flex-shrink-0 pl-2 text-end text-base text-ink-gray-5"
               >
-                {{ i == 0 ? 'Where' : 'And' }}
+                {{ i == 0 ? __('Where') : __('And') }}
               </div>
               <div id="fieldname" class="!min-w-[140px] flex-1">
                 <Autocomplete
@@ -79,7 +79,7 @@
             v-else
             class="mb-3 flex h-7 items-center px-3 text-sm text-ink-gray-5"
           >
-            Empty - Choose a field to filter by
+            {{ __('Empty - Choose a field to filter by') }}
           </div>
           <div class="flex items-center justify-between gap-2">
             <Autocomplete
@@ -116,6 +116,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import { computed, h } from 'vue'
 import FilterIcon from './FilterIcon.vue'
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
index fc02eb2c..12a38e2b 100644
--- a/src/components/ListItem.vue
+++ b/src/components/ListItem.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center justify-between py-3">
     <div>
       <h3 class="text-base font-medium text-gray-900">
-        {{ title }}
+        {{ __(title) }}
       </h3>
       <div class="mt-1" v-if="secondaryText || $slots.subtitle">
         <template v-if="secondaryText">
@@ -14,15 +14,23 @@
     <slot name="actions"></slot>
   </div>
 </template>
-<script>
-export default {
-  name: 'ListItem',
-  props: ['title', 'subtitle'],
-  computed: {
-    secondaryText() {
-      let text = this.subtitle || ''
-      return text.replace('\n', '<br>')
-    },
+<script setup>
+import { __ } from '../utils/translation'
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-}
+  subtitle: {
+    type: String,
+    default: '',
+  },
+})
+
+const secondaryText = computed(() => {
+  let text = __(props.subtitle) || ''
+  return text.replace('\n', '<br>')
+})
 </script>
diff --git a/src/components/ListView/ListEmptyState.vue b/src/components/ListView/ListEmptyState.vue
index 85c81d72..921bfaa1 100644
--- a/src/components/ListView/ListEmptyState.vue
+++ b/src/components/ListView/ListEmptyState.vue
@@ -3,9 +3,11 @@
     class="flex h-full w-full flex-col items-center justify-center text-base"
   >
     <slot>
-      <div class="text-xl font-medium">{{ list.options.emptyState.title }}</div>
+      <div class="text-xl font-medium">
+        {{ __(list.options.emptyState.title) }}
+      </div>
       <div class="mt-1 text-base text-ink-gray-5">
-        {{ list.options.emptyState.description }}
+        {{ __(list.options.emptyState.description) }}
       </div>
       <Button
         v-if="list.options.emptyState.button"
@@ -17,6 +19,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import { inject } from 'vue'
 import { Button } from '../Button'
 
diff --git a/src/components/ListView/ListFooter.vue b/src/components/ListView/ListFooter.vue
index 5e6e333f..9a2ed946 100644
--- a/src/components/ListView/ListFooter.vue
+++ b/src/components/ListView/ListFooter.vue
@@ -16,9 +16,12 @@
           />
           <div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
           <div class="flex items-center gap-1 text-base text-ink-gray-5">
-            <div>{{ options.rowCount || '0' }}</div>
-            <div>of</div>
-            <div>{{ options.totalCount || '0' }}</div>
+            {{
+              __('{0} of {1}', [
+                options.rowCount || '0',
+                options.totalCount || '0',
+              ])
+            }}
           </div>
         </div>
       </slot>
@@ -26,6 +29,7 @@
   </div>
 </template>
 <script setup>
+import { __ } from '../../utils/translation'
 import TabButtons from '../TabButtons.vue'
 import { ref, computed } from 'vue'
 
diff --git a/src/components/ListView/ListGroupHeader.vue b/src/components/ListView/ListGroupHeader.vue
index 9f8e1a99..3d29599a 100644
--- a/src/components/ListView/ListGroupHeader.vue
+++ b/src/components/ListView/ListGroupHeader.vue
@@ -17,7 +17,7 @@
           v-bind="{ group }"
         />
         <span v-else class="text-base font-medium leading-6">
-          {{ group.group }}
+          {{ __(group.group) }}
         </span>
       </div>
     </slot>
@@ -26,6 +26,7 @@
 </template>
 <script setup>
 import { inject } from 'vue'
+import { __ } from '../../utils/translation'
 import DownSolid from '../../icons/DownSolid.vue'
 
 const props = defineProps({
diff --git a/src/components/ListView/ListHeaderItem.vue b/src/components/ListView/ListHeaderItem.vue
index 03de9a6a..bcc16ffb 100644
--- a/src/components/ListView/ListHeaderItem.vue
+++ b/src/components/ListView/ListHeaderItem.vue
@@ -11,7 +11,7 @@
       <slot name="prefix" v-bind="{ item }" />
       <slot>
         <div class="truncate">
-          {{ item.label }}
+          {{ __(item.label) }}
         </div>
       </slot>
       <slot name="suffix" v-bind="{ item }" />
@@ -31,6 +31,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import { alignmentMap } from './utils'
 import { useDebounceFn } from '@vueuse/core'
 import { ref, computed, inject } from 'vue'
diff --git a/src/components/ListView/ListRowItem.vue b/src/components/ListView/ListRowItem.vue
index 4e88e99a..ff1811d6 100644
--- a/src/components/ListView/ListRowItem.vue
+++ b/src/components/ListView/ListRowItem.vue
@@ -16,7 +16,7 @@
       </slot>
       <slot v-bind="{ label }">
         <div class="truncate text-base">
-          {{ column?.getLabel ? column.getLabel({ row }) : label }}
+          {{ column?.getLabel ? __(column.getLabel({ row })) : __(label) }}
         </div>
       </slot>
       <slot name="suffix" />
@@ -27,6 +27,7 @@
 import { computed, inject } from 'vue'
 import { Tooltip } from '../../index'
 import { alignmentMap } from './utils'
+import { __ } from '../../utils/translation'
 
 const props = defineProps({
   column: {
diff --git a/src/components/ListView/ListSelectBanner.vue b/src/components/ListView/ListSelectBanner.vue
index 01ab1bbf..47d063f7 100644
--- a/src/components/ListView/ListSelectBanner.vue
+++ b/src/components/ListView/ListSelectBanner.vue
@@ -53,9 +53,8 @@
               :class="list.allRowsSelected ? 'cursor-not-allowed' : ''"
               variant="ghost"
               @click="list.toggleAllRows(true)"
-            >
-              Select all
-            </Button>
+              label="Select all"
+            />
             <Button
               icon="x"
               variant="ghost"
@@ -69,6 +68,7 @@
 </template>
 
 <script setup>
+import { __ } from '../../utils/translation'
 import Checkbox from '../Checkbox.vue'
 import { Button } from '../Button'
 import { computed, inject } from 'vue'
@@ -81,6 +81,6 @@ const list = inject('list')
 
 let selectedText = computed(() => {
   let title = list.value.selections.size === 1 ? 'Row' : 'Rows'
-  return `${list.value.selections.size} ${title} selected`
+  return __('{0} {1} selected', [list.value.selections.size, title])
 })
 </script>
diff --git a/src/components/LoadingText.vue b/src/components/LoadingText.vue
index 2fb0f829..a54e049c 100644
--- a/src/components/LoadingText.vue
+++ b/src/components/LoadingText.vue
@@ -1,21 +1,16 @@
 <template>
   <div class="flex items-center text-base text-ink-gray-4">
-    <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ text }}
+    <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ __(text) }}
   </div>
 </template>
-<script>
+<script setup>
+import { __ } from '../utils/translation'
 import LoadingIndicator from './LoadingIndicator.vue'
 
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: 'Loading...',
-    },
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Loading...',
   },
-  components: {
-    LoadingIndicator,
-  },
-}
+})
 </script>
diff --git a/src/components/Progress.vue b/src/components/Progress.vue
index 71da84c5..6b020094 100644
--- a/src/components/Progress.vue
+++ b/src/components/Progress.vue
@@ -5,7 +5,7 @@
       class="flex items-baseline justify-between"
     >
       <span v-if="props.label" class="text-base font-medium text-ink-gray-8">
-        {{ props.label }}
+        {{ __(props.label) }}
       </span>
       <!-- Empty for alignment -->
       <span v-else></span>
@@ -13,7 +13,7 @@
       <span class="self-end" v-if="props.hint || $slots.hint">
         <slot name="hint">
           <span class="text-base font-medium text-ink-gray-4">
-            {{ props.value }}%
+            {{ __(props.value.toString()) }}%
           </span>
         </slot>
       </span>
@@ -50,6 +50,7 @@
 </template>
 
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed } from '@vue/reactivity'
 
 const MIN_VALUE = 0
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index 00fa3c33..1196cafc 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-1">
     <label class="block text-xs text-ink-gray-5" v-if="label">
-      {{ label }}
+      {{ __(label) }}
     </label>
     <div class="flex text-center">
       <div
@@ -22,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../../utils/translation'
 import { ref, watch } from 'vue'
 import FeatherIcon from '../FeatherIcon.vue'
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
index c47269e9..c9efa1e4 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -16,7 +16,7 @@
       class="pointer-events-none absolute text-ink-gray-4"
       :class="[fontSizeClasses, paddingClasses]"
     >
-      {{ placeholder }}
+      {{ __(placeholder) }}
     </div>
     <select
       :class="selectClasses"
@@ -33,13 +33,14 @@
         :disabled="option.disabled || false"
         :selected="modelValue === option.value"
       >
-        {{ option.label }}
+        {{ __(option.label) }}
       </option>
     </select>
   </div>
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed, useSlots, useAttrs } from 'vue'
 
 defineOptions({
diff --git a/src/components/Switch.vue b/src/components/Switch.vue
index 5b795ba4..1a0209da 100644
--- a/src/components/Switch.vue
+++ b/src/components/Switch.vue
@@ -6,15 +6,15 @@
     :class="switchGroupClasses"
   >
     <span :class="labelContainerClasses">
-      <SwitchLabel v-if="props.label" as="span" :class="switchLabelClasses">{{
-        props.label
-      }}</SwitchLabel>
+      <SwitchLabel v-if="props.label" as="span" :class="switchLabelClasses">
+        {{ __(props.label) }}
+      </SwitchLabel>
       <SwitchDescription
         v-if="props.description"
         as="span"
         :class="switchDescriptionClasses"
       >
-        {{ props.description }}
+        {{ __(props.description) }}
       </SwitchDescription>
     </span>
     <Switch
@@ -29,6 +29,7 @@
 </template>
 
 <script lang="ts" setup>
+import { __ } from '../utils/translation'
 import { computed } from 'vue'
 import {
   Switch,
diff --git a/src/components/TabButtons.vue b/src/components/TabButtons.vue
index ebe754f1..7f3bdc38 100644
--- a/src/components/TabButtons.vue
+++ b/src/components/TabButtons.vue
@@ -28,44 +28,35 @@
             as="span"
             class="flex h-4 items-center"
             v-show="button.label && !button.hideLabel"
-            >{{ button.label }}</RadioGroupLabel
           >
+            {{ __(button.label) }}
+          </RadioGroupLabel>
         </button>
       </RadioGroupOption>
     </div>
   </RadioGroup>
 </template>
-<script>
+<script setup>
+import { __ } from '../utils/translation'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
 
-export default {
-  name: 'TabButtons',
-  props: {
-    buttons: {
-      type: Array,
-      required: true,
-    },
-    modelValue: {
-      type: [String, Boolean, Number],
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true,
   },
-  emits: ['update:modelValue'],
-  components: {
-    FeatherIcon,
-    RadioGroup,
-    RadioGroupOption,
-    RadioGroupLabel,
+  modelValue: {
+    type: [String, Boolean, Number],
+    default: null,
   },
-  computed: {
-    value: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-  },
-}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
 </script>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index e8f3ce41..dc1be362 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -26,7 +26,7 @@
             :class="{ 'text-ink-gray-9': selected }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="size-4" />
-            {{ tab.label }}
+            {{ __(tab.label) }}
           </button>
         </slot>
       </Tab>
@@ -49,6 +49,7 @@
 </template>
 
 <script setup>
+import { __ } from '../utils/translation'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import { ref, watch, computed, onMounted, nextTick } from 'vue'
 
diff --git a/src/components/TextEditor/TextEditorFloatingMenu.vue b/src/components/TextEditor/TextEditorFloatingMenu.vue
index 4510e04d..6dfae545 100644
--- a/src/components/TextEditor/TextEditorFloatingMenu.vue
+++ b/src/components/TextEditor/TextEditorFloatingMenu.vue
@@ -19,41 +19,44 @@
     >
       <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
       <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
-        {{ button.text }}
+        {{ __(button.text) }}
       </span>
     </button>
   </FloatingMenu>
 </template>
-<script>
+<script setup>
+import { __ } from '../../utils/translation'
 import { FloatingMenu } from '@tiptap/vue-3'
 import { createEditorButton } from './utils'
+import { computed, inject } from 'vue'
 
-export default {
-  name: 'TextEditorFloatingMenu',
-  props: ['buttons'],
-  components: { FloatingMenu },
-  inject: ['editor'],
-  computed: {
-    floatingMenuButtons() {
-      if (!this.buttons) return false
-
-      let buttons
-      if (Array.isArray(this.buttons)) {
-        buttons = this.buttons
-      } else {
-        buttons = [
-          'Paragraph',
-          'Heading 2',
-          'Heading 3',
-          'Bullet List',
-          'Numbered List',
-          'Blockquote',
-          'Code',
-          'Horizontal Rule',
-        ]
-      }
-      return buttons.map(createEditorButton)
-    },
+const props = defineProps({
+  buttons: {
+    type: Array,
+    default: null,
   },
-}
+})
+
+const editor = inject('editor')
+
+const floatingMenuButtons = computed(() => {
+  if (!props.buttons) return false
+
+  let buttons
+  if (Array.isArray(props.buttons)) {
+    buttons = props.buttons
+  } else {
+    buttons = [
+      'Paragraph',
+      'Heading 2',
+      'Heading 3',
+      'Bullet List',
+      'Numbered List',
+      'Blockquote',
+      'Code',
+      'Horizontal Rule',
+    ]
+  }
+  return buttons.map(createEditorButton)
+})
 </script>
diff --git a/src/components/TextInput.vue b/src/components/TextInput.vue
index 594ac6f2..d6e9dc66 100644
--- a/src/components/TextInput.vue
+++ b/src/components/TextInput.vue
@@ -17,7 +17,7 @@
     <input
       ref="inputRef"
       :type="type"
-      :placeholder="placeholder"
+      :placeholder="__(placeholder || '')"
       :class="inputClasses"
       :disabled="disabled"
       :id="id"
@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed, useSlots, useAttrs, ref } from 'vue'
 import type { TextInputTypes } from './types/TextInput'
 import debounce from '../utils/debounce'
diff --git a/src/components/Textarea.vue b/src/components/Textarea.vue
index c243b4cb..0c3db406 100644
--- a/src/components/Textarea.vue
+++ b/src/components/Textarea.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="space-y-1.5">
     <label class="block" :class="labelClasses" v-if="label" :for="id">
-      {{ label }}
+      {{ __(label) }}
     </label>
     <textarea
       ref="textareaRef"
-      :placeholder="placeholder"
+      :placeholder="__(placeholder || '')"
       :class="inputClasses"
       :disabled="disabled"
       :id="id"
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import { __ } from '../utils/translation'
 import { computed, useAttrs, ref } from 'vue'
 import debounce from '../utils/debounce'
 
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index e7c16f6a..16b8fcc4 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -13,9 +13,13 @@
             class="text-base font-medium text-ink-gray-9"
             :class="{ 'mb-1': text }"
           >
-            {{ title }}
+            {{ __(title) }}
           </p>
-          <p v-if="text" class="text-base text-ink-gray-5" v-html="text"></p>
+          <p
+            v-if="text"
+            class="text-base text-ink-gray-5"
+            v-html="__(text)"
+          ></p>
         </slot>
       </div>
       <div class="ml-auto pl-2">
@@ -31,51 +35,41 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { __ } from '../utils/translation'
 import FeatherIcon from './FeatherIcon.vue'
-const positions = [
-  'top-right',
-  'top-center',
-  'top-left',
-  'bottom-right',
-  'bottom-center',
-  'bottom-left',
-]
+import { onMounted } from 'vue'
 
-export default {
-  name: 'Toast',
-  props: {
-    position: {
-      type: String,
-      default: 'top-center',
-    },
-    icon: {
-      type: String,
-    },
-    iconClasses: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    timeout: {
-      type: Number,
-      default: 5,
-    },
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'top-center',
+  },
+  icon: {
+    type: String,
+  },
+  iconClasses: {
+    type: String,
   },
-  emits: ['close'],
-  components: {
-    FeatherIcon,
+  title: {
+    type: String,
   },
-  mounted() {
-    if (this.timeout > 0) {
-      setTimeout(() => {
-        this.$emit('close')
-      }, this.timeout * 1000)
-    }
+  text: {
+    type: String,
   },
-}
+  timeout: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const emit = defineEmits(['close'])
+
+onMounted(() => {
+  if (props.timeout > 0) {
+    setTimeout(() => {
+      emit('close')
+    }, props.timeout * 1000)
+  }
+})
 </script>
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 09b80ff9..b64ae529 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { __ } from '../../utils/translation'
 import { type HTMLAttributes } from 'vue'
 import {
   TooltipProvider,
@@ -53,7 +54,7 @@ const delayDuration = computed(() => props.hoverDelay * 1000)
             <div
               class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl"
             >
-              <div>{{ props.text }}</div>
+              <div>{{ __(props.text) }}</div>
             </div>
           </slot>
           <TooltipArrow :class="props.arrowClass" :width="8" :height="4" />
diff --git a/src/components/Tree/Tree.vue b/src/components/Tree/Tree.vue
index d6566643..9e84719c 100644
--- a/src/components/Tree/Tree.vue
+++ b/src/components/Tree/Tree.vue
@@ -28,7 +28,7 @@
       <!-- slot to only override the label -->
       <slot name="label" v-bind="{ node, hasChildren, isCollapsed }">
         <div class="text-base truncate" :class="hasChildren ? '' : 'pl-3.5'">
-          {{ node.label }}
+          {{ __(node.label) }}
         </div>
       </slot>
     </div>
@@ -69,6 +69,7 @@
 import { ref, computed, onMounted } from 'vue'
 import FeatherIcon from '../FeatherIcon.vue'
 import type { TreeNode, TreeOptions } from '../types/Tree'
+import { __ } from '../../utils/translation'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/index.js b/src/index.js
index e03a4d21..eab36522 100644
--- a/src/index.js
+++ b/src/index.js
@@ -100,3 +100,4 @@ export { setConfig, getConfig } from './utils/config.js'
 export { default as pageMetaPlugin } from './utils/pageMeta.js'
 export { default as FrappeUI } from './utils/plugin.js'
 export { confirmDialog } from './utils/confirmDialog.js'
+export { default as translationPlugin } from './utils/translation.ts'
diff --git a/src/utils/translation.ts b/src/utils/translation.ts
new file mode 100644
index 00000000..a46b26c9
--- /dev/null
+++ b/src/utils/translation.ts
@@ -0,0 +1,72 @@
+import { createResource } from '../resources'
+import { App } from 'vue'
+
+type Replace = { [key: string]: string }
+type TranslatedMessages = Replace
+
+declare global {
+  interface Window {
+    __: (message: string, replace?: Replace, context?: string | null) => string
+    translatedMessages?: TranslatedMessages
+  }
+}
+
+export default function translationPlugin(app: App) {
+  app.config.globalProperties.__ = translate
+  window.__ = translate
+  if (!window.translatedMessages) fetchTranslations()
+}
+
+function format(message: string, replace?: Replace) {
+  if (!replace) return message
+  return message.replace(/{(\d+)}/g, function (match, number) {
+    return typeof replace[number] != 'undefined' ? replace[number] : match
+  })
+}
+
+export function translate(
+  message: string,
+  replace?: Replace,
+  context: string | null = null,
+) {
+  let translatedMessages = window.translatedMessages || {}
+  let translatedMessage = ''
+
+  if (context) {
+    let key = `${message}:${context}`
+    if (translatedMessages[key]) {
+      translatedMessage = translatedMessages[key]
+    }
+  }
+
+  if (!translatedMessage) {
+    translatedMessage = translatedMessages[message] || message
+  }
+
+  const hasPlaceholders = /{\d+}/.test(message)
+  if (!hasPlaceholders) {
+    return translatedMessage
+  }
+
+  return format(translatedMessage, replace)
+}
+
+function fetchTranslations() {
+  createResource({
+    url: 'frappe.translate.get_app_translations',
+    cache: 'translations',
+    auto: true,
+    transform: (messages: TranslatedMessages) => {
+      window.translatedMessages = messages
+    },
+  })
+}
+
+export function __(
+  message: string,
+  replace?: Replace,
+  context: string | null = null,
+): string {
+  if (!window.__) return message
+  return translate(message, replace, context)
+}