diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index 9d962782..9a361c21 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -24,7 +24,7 @@
               >
                 <div class="flex items-center gap-2">
                   <DragIcon class="h-3.5" />
-                  <div>{{ element.label }}</div>
+                  <div>{{ __(element.label) }}</div>
                 </div>
                 <div class="flex cursor-pointer items-center gap-1">
                   <Button
@@ -56,7 +56,7 @@
                   class="w-full !justify-start !text-gray-600"
                   variant="ghost"
                   @click="togglePopover()"
-                  label="Add Column"
+                  :label="__('Add Column')"
                 >
                   <template #prefix>
                     <FeatherIcon name="plus" class="h-4" />
@@ -69,7 +69,7 @@
               class="w-full !justify-start !text-gray-600"
               variant="ghost"
               @click="reset(close)"
-              label="Reset Changes"
+              :label="__('Reset Changes')"
             >
               <template #prefix>
                 <ReloadIcon class="h-4" />
@@ -80,7 +80,7 @@
               class="w-full !justify-start !text-gray-600"
               variant="ghost"
               @click="resetToDefault(close)"
-              label="Reset to Default"
+              :label="__('Reset to Default')"
             >
               <template #prefix>
                 <ReloadIcon class="h-4" />
@@ -96,32 +96,32 @@
               <FormControl
                 type="text"
                 size="md"
-                label="Label"
+                :label="__('Label')"
                 v-model="column.label"
                 class="w-full"
-                placeholder="Column Label"
+                :placeholder="__('First Name')"
               />
               <FormControl
                 type="text"
                 size="md"
-                label="Width"
+                :label="__('Width')"
                 class="w-full"
                 v-model="column.width"
-                placeholder="Column Width"
-                description="Width can be in number, pixel or rem (eg. 3, 30px, 10rem)"
+                placeholder="10rem"
+                :description="__('Width can be in number, pixel or rem (eg. 3, 30px, 10rem)')"
                 :debounce="500"
               />
             </div>
             <div class="flex w-full gap-2 border-t pt-2">
               <Button
                 variant="subtle"
-                label="Cancel"
+                :label="__('Cancel')"
                 class="w-full flex-1"
                 @click="cancelUpdate"
               />
               <Button
                 variant="solid"
-                label="Update"
+                :label="__('Update')"
                 class="w-full flex-1"
                 @click="updateColumn(column)"
               />
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index e5e45c0e..41478728 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -24,14 +24,14 @@
           >
             <div class="flex items-center gap-2">
               <div class="w-13 pl-2 text-end text-base text-gray-600">
-                {{ i == 0 ? 'Where' : 'And' }}
+                {{ i == 0 ? __('Where') : __('And') }}
               </div>
               <div id="fieldname" class="!min-w-[140px]">
                 <Autocomplete
                   :value="f.field.fieldname"
                   :options="filterableFields.data"
                   @change="(e) => updateFilter(e, i)"
-                  placeholder="Filter by..."
+                  :placeholder="__('First Name')"
                 />
               </div>
               <div id="operator">
@@ -40,7 +40,7 @@
                   v-model="f.operator"
                   @change="(e) => updateOperator(e, f)"
                   :options="getOperators(f.field.fieldtype, f.field.fieldname)"
-                  placeholder="Operator"
+                  placeholder="Equals"
                 />
               </div>
               <div id="value" class="!min-w-[140px]">
@@ -48,7 +48,7 @@
                   :is="getValSelect(f)"
                   v-model="f.value"
                   @change="(v) => updateValue(v, f)"
-                  placeholder="Value"
+                  placeholder="John Doe"
                 />
               </div>
             </div>
@@ -58,21 +58,21 @@
             v-else
             class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
           >
-            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
               value=""
               :options="filterableFields.data"
               @change="(e) => setfilter(e)"
-              placeholder="Filter by..."
+              :placeholder="__('First name')"
             >
               <template #target="{ togglePopover }">
                 <Button
                   class="!text-gray-600"
                   variant="ghost"
                   @click="togglePopover()"
-                  label="Add Filter"
+                  :label="__('Add Filter')"
                 >
                   <template #prefix>
                     <FeatherIcon name="plus" class="h-4" />
@@ -84,7 +84,7 @@
               v-if="filters?.size"
               class="!text-gray-600"
               variant="ghost"
-              label="Clear all Filter"
+              :label="__('Clear all Filter')"
               @click="clearfilter(close)"
             />
           </div>
@@ -529,71 +529,71 @@ const oppositeOperatorMap = {
 
 const timespanOptions = [
   {
-    label: 'Last Week',
+    label: __('Last Week'),
     value: 'last week',
   },
   {
-    label: 'Last Month',
+    label: __('Last Month'),
     value: 'last month',
   },
   {
-    label: 'Last Quarter',
+    label: __('Last Quarter'),
     value: 'last quarter',
   },
   {
-    label: 'Last 6 Months',
+    label: __('Last 6 Months'),
     value: 'last 6 months',
   },
   {
-    label: 'Last Year',
+    label: __('Last Year'),
     value: 'last year',
   },
   {
-    label: 'Yesterday',
+    label: __('Yesterday'),
     value: 'yesterday',
   },
   {
-    label: 'Today',
+    label: __('Today'),
     value: 'today',
   },
   {
-    label: 'Tomorrow',
+    label: __('Tomorrow'),
     value: 'tomorrow',
   },
   {
-    label: 'This Week',
+    label: __('This Week'),
     value: 'this week',
   },
   {
-    label: 'This Month',
+    label: __('This Month'),
     value: 'this month',
   },
   {
-    label: 'This Quarter',
+    label: __('This Quarter'),
     value: 'this quarter',
   },
   {
-    label: 'This Year',
+    label: __('This Year'),
     value: 'this year',
   },
   {
-    label: 'Next Week',
+    label: __('Next Week'),
     value: 'next week',
   },
   {
-    label: 'Next Month',
+    label: __('Next Month'),
     value: 'next month',
   },
   {
-    label: 'Next Quarter',
+    label: __('Next Quarter'),
     value: 'next quarter',
   },
   {
-    label: 'Next 6 Months',
+    label: __('Next 6 Months'),
     value: 'next 6 months',
   },
   {
-    label: 'Next Year',
+    label: __('Next Year'),
     value: 'next year',
   },
 ]
diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index 218975cf..7dfb02db 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -33,15 +33,15 @@
                 :value="sort.fieldname"
                 :options="sortOptions.data"
                 @change="(e) => updateSort(e, i)"
-                placeholder="Sort by"
+                :placeholder="__('First Name')"
               />
               <FormControl
                 class="!w-32"
                 type="select"
                 v-model="sort.direction"
                 :options="[
-                  { label: 'Ascending', value: 'asc' },
-                  { label: 'Descending', value: 'desc' },
+                  { label: __('Ascending'), value: 'asc' },
+                  { label: __('Descending'), value: 'desc' },
                 ]"
                 @change="
                   (e) => {
@@ -49,7 +49,7 @@
                     apply()
                   }
                 "
-                placeholder="Sort by"
+                :placeholder="__('Ascending')"
               />
               <Button variant="ghost" icon="x" @click="removeSort(i)" />
             </div>
@@ -58,13 +58,13 @@
             v-else
             class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
           >
-            Empty - Choose a field to sort by
+            {{ __('Empty - Choose a field to sort by') }}
           </div>
           <div class="flex items-center justify-between gap-2">
             <Autocomplete
               :options="options"
               value=""
-              placeholder="Sort by"
+              :placeholder="__('First Name')"
               @change="(e) => setSort(e)"
             >
               <template #target="{ togglePopover }">
@@ -72,7 +72,7 @@
                   class="!text-gray-600"
                   variant="ghost"
                   @click="togglePopover()"
-                  label="Add Sort"
+                  :label="__('Add Sort')"
                 >
                   <template #prefix>
                     <FeatherIcon name="plus" class="h-4" />
@@ -84,7 +84,7 @@
               v-if="sortValues?.size"
               class="!text-gray-600"
               variant="ghost"
-              label="Clear Sort"
+              :label="__('Clear Sort')"
               @click="clearSort(close)"
             />
           </div>