From 5c06c0d8133e5ee22bbc989590fd4fb4e6527f9f Mon Sep 17 00:00:00 2001
From: Mateusz Misztoft <mateusz.misztoft@gmail.com>
Date: Wed, 24 Jun 2026 00:08:22 +0200
Subject: [PATCH] Add frontend Weblate translations

Add runtime Weblate translation loading and replace hardcoded frontend strings with translation keys across the dashboard, admin panel, project views, dialogs, and notifications.
---
 web-app/package.json                          |   2 +-
 web-app/packages/admin-app/package.json       |   1 +
 web-app/packages/admin-app/src/App.vue        |  28 +-
 web-app/packages/admin-app/src/main.ts        |  47 +-
 .../src/modules/layout/components/Sidebar.vue |  19 +-
 web-app/packages/admin-lib/package.json       |   3 +-
 .../admin/components/AccountsTable.vue        |  25 +-
 .../admin/components/AdminProjectsTable.vue   |  60 +--
 .../admin/components/CheckForUpdates.vue      |  13 +-
 .../admin/components/CreateUserForm.vue       |  18 +-
 .../admin/components/ReportDownloadDialog.vue |  20 +-
 .../admin/components/ServerNotConfigured.vue  |  17 +-
 .../admin-lib/src/modules/admin/routes.ts     |  24 +-
 .../admin-lib/src/modules/admin/store.ts      |  26 +-
 .../modules/admin/views/AccountDetailView.vue | 107 +++--
 .../src/modules/admin/views/OverviewView.vue  |  20 +-
 .../modules/admin/views/ProjectFilesView.vue  |  13 +-
 .../admin/views/ProjectSettingsView.vue       |  31 +-
 .../admin/views/ProjectVersionView.vue        |  16 +-
 .../admin/views/ProjectVersionsView.vue       |   7 +-
 .../src/modules/admin/views/ProjectView.vue   |  20 +-
 .../src/modules/admin/views/SettingsView.vue  |  15 +-
 .../admin/views/SettingsViewTemplate.vue      |  48 +-
 .../layout/components/SidebarFooter.vue       |   2 +-
 web-app/packages/app/package.json             |   1 +
 web-app/packages/app/src/main.ts              |  44 +-
 .../src/modules/project/views/ProjectView.vue |   9 +-
 web-app/packages/lang/.eslintrc.cjs           |  19 +
 web-app/packages/lang/i18n.d.ts               |  12 +
 web-app/packages/lang/i18n.ts                 | 102 +++++
 web-app/packages/lang/runtime.ts              | 121 +++++
 web-app/packages/lang/translate.d.ts          |   2 +
 web-app/packages/lang/translate.ts            |  27 ++
 web-app/packages/lang/translations/EN.d.ts    | 396 +++++++++++++++++
 web-app/packages/lang/translations/EN.ts      | 412 ++++++++++++++++++
 web-app/packages/lib/package.json             |   1 +
 .../common/components/AppPasswordTooltip.vue  |  23 +-
 .../components/FullStorageWarningTemplate.vue |  15 +-
 .../lib/src/common/components/TipMessage.vue  |  14 +-
 web-app/packages/lib/src/common/date_utils.ts |  17 +-
 web-app/packages/lib/src/common/http.ts       |   7 +-
 .../lib/src/common/permission_utils.ts        |  67 +--
 .../components/DashboardAccessRequestsRow.vue |   4 +-
 .../dashboard/components/DashboardFooter.vue  |  11 +-
 .../components/DashboardProjectsRow.vue       |   5 +-
 .../lib/src/modules/dashboard/routes.ts       |   5 +-
 .../dialog/components/ConfirmDialog.vue       |  21 +-
 .../packages/lib/src/modules/dialog/store.ts  |   8 +-
 .../components/InstanceMaintenanceMessage.vue |   9 +-
 .../lib/src/modules/instance/store.ts         |   9 +-
 .../layout/components/AppHeaderTemplate.vue   |  16 +-
 .../layout/components/SideBarTemplate.vue     |   8 +-
 .../src/modules/layout/views/NotFoundView.vue |  12 +-
 .../components/AccessRequestTableTemplate.vue |  29 +-
 .../components/CloneDialogTemplate.vue        |  10 +-
 .../project/components/CommunityBanner.vue    |  12 +-
 .../project/components/DownloadFileLarge.vue  |  18 +-
 .../modules/project/components/DropArea.vue   |  12 +-
 .../components/FileChangesetSummaryTable.vue  |  15 +-
 .../project/components/FileDetailSidebar.vue  |  22 +-
 .../modules/project/components/FilesTable.vue |  14 +-
 .../components/ProjectAccessRequests.vue      |  24 +-
 .../project/components/ProjectForm.vue        |  19 +-
 .../components/ProjectMembersTable.vue        |  12 +-
 .../project/components/ProjectShareDialog.vue |  14 +-
 .../components/ProjectShareDialogTemplate.vue |   8 +-
 .../components/ProjectVersionChanges.vue      |  12 +-
 .../components/ProjectVersionsTable.vue       |  20 +-
 .../project/components/ProjectsTable.vue      |  18 +-
 .../components/ProjectsTableDataLoader.vue    |  23 +-
 .../project/components/UploadDialog.vue       |  35 +-
 .../project/components/UploadProgress.vue     |   6 +-
 .../components/VersionDetailSidebar.vue       |  16 +-
 .../packages/lib/src/modules/project/store.ts |  33 +-
 .../modules/project/views/FileBrowserView.vue |  24 +-
 .../project/views/FileVersionDetailView.vue   |  14 +-
 .../ProjectCollaboratorsViewTemplate.vue      |  12 +-
 .../views/ProjectSettingsViewTemplate.vue     |  54 ++-
 .../views/ProjectVersionsViewTemplate.vue     |   8 +-
 .../project/views/ProjectViewTemplate.vue     |  50 ++-
 .../views/ProjectsListViewTemplate.vue        |  54 ++-
 .../user/components/ChangePasswordForm.vue    |  29 +-
 .../user/components/DeleteAccountConfirm.vue  |  18 +-
 .../user/components/EditProfileForm.vue       |  16 +-
 .../components/ProfileAccessRequestsRow.vue   |   8 +-
 .../packages/lib/src/modules/user/routes.ts   |  11 +-
 .../packages/lib/src/modules/user/store.ts    |  35 +-
 .../modules/user/views/ChangePasswordView.vue |  30 +-
 .../modules/user/views/LoginViewTemplate.vue  |  31 +-
 .../user/views/ProfileViewTemplate.vue        |  65 +--
 .../modules/user/views/VerifyEmailView.vue    |  17 +-
 web-app/yarn.lock                             |  40 ++
 92 files changed, 2204 insertions(+), 663 deletions(-)
 create mode 100644 web-app/packages/lang/.eslintrc.cjs
 create mode 100644 web-app/packages/lang/i18n.d.ts
 create mode 100644 web-app/packages/lang/i18n.ts
 create mode 100644 web-app/packages/lang/runtime.ts
 create mode 100644 web-app/packages/lang/translate.d.ts
 create mode 100644 web-app/packages/lang/translate.ts
 create mode 100644 web-app/packages/lang/translations/EN.d.ts
 create mode 100644 web-app/packages/lang/translations/EN.ts

diff --git a/web-app/package.json b/web-app/package.json
index 241a0eed..e41aee2c 100755
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -36,7 +36,7 @@
     "watch:lib:types": "yarn workspace @mergin/lib build:types:watch",
     "watch:admin-lib": "yarn workspace @mergin/admin-lib build:lib:watch",
     "watch:admin-lib:types": "yarn workspace @mergin/admin-lib build:types:watch",
-    "lint:all": "yarn workspaces run lint",
+    "lint:all": "yarn workspaces run lint && eslint packages/lang --ext .ts",
     "lint:no-legacy": "yarn workspace @mergin/lib lint && yarn workspace @mergin/app lint"
   },
   "devDependencies": {
diff --git a/web-app/packages/admin-app/package.json b/web-app/packages/admin-app/package.json
index 08fea4d7..e7d57b07 100644
--- a/web-app/packages/admin-app/package.json
+++ b/web-app/packages/admin-app/package.json
@@ -25,6 +25,7 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "vue": "3.5.12",
+    "vue-i18n": "11",
     "vue-meta": "^3.0.0-alpha.10",
     "vue-router": "4.2.5"
   }
diff --git a/web-app/packages/admin-app/src/App.vue b/web-app/packages/admin-app/src/App.vue
index cc7dff16..eaa7a1b6 100644
--- a/web-app/packages/admin-app/src/App.vue
+++ b/web-app/packages/admin-app/src/App.vue
@@ -63,6 +63,10 @@ import { useToast } from 'primevue/usetoast'
 import { defineComponent, watchEffect } from 'vue'
 import { useMeta } from 'vue-meta'
 
+import returnTranslation from '@/../../lang/translate'
+
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'app',
   components: {
@@ -77,13 +81,15 @@ export default defineComponent({
       meta: [
         {
           name: 'description',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         {
           property: 'og:title',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         { property: 'og:site_name', content: 'Mergin Maps' }
       ]
@@ -122,20 +128,22 @@ export default defineComponent({
   },
   setup() {
     const { title } = useRouterTitle({
-      defaultTitle: 'Mergin Maps Admin Panel'
+      defaultTitle: t('MerginMapsAdminPanel')
     })
     useMeta({
-      title: 'Mergin Maps Admin Panel',
+      title: t('MerginMapsAdminPanel'),
       meta: [
         {
           name: 'description',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         {
           property: 'og:title',
-          content:
-            'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.'
+          content: t(
+            'StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork'
+          )
         },
         { property: 'og:site_name', content: 'Mergin Maps' }
       ]
diff --git a/web-app/packages/admin-app/src/main.ts b/web-app/packages/admin-app/src/main.ts
index f7095c64..6a5993d1 100644
--- a/web-app/packages/admin-app/src/main.ts
+++ b/web-app/packages/admin-app/src/main.ts
@@ -2,21 +2,6 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-import { AdminModule } from '@mergin/admin-lib'
-import {
-  DialogModule,
-  FormModule,
-  getHttpService,
-  InstanceModule,
-  LayoutModule,
-  moduleUtils,
-  NotificationModule,
-  ProjectModule,
-  UserModule,
-  useInstanceStore,
-  initCsrfToken
-} from '@mergin/lib'
-
 import 'primevue/resources/primevue.min.css'
 import 'primeflex/primeflex.min.css'
 import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
@@ -24,10 +9,34 @@ import '@tabler/icons-webfont/tabler-icons.min.css'
 import '@mergin/lib/dist/style.css'
 import '@mergin/admin-lib/dist/style.css'
 
-import { createMerginApp } from './app'
-import { createPiniaInstance, getPiniaInstance } from './store'
+import { initializeRuntimeI18n } from '@/../../lang/runtime'
 
 async function main() {
+  const i18n = await initializeRuntimeI18n()
+  const [
+    { AdminModule },
+    {
+      DialogModule,
+      FormModule,
+      getHttpService,
+      InstanceModule,
+      LayoutModule,
+      moduleUtils,
+      NotificationModule,
+      ProjectModule,
+      UserModule,
+      useInstanceStore,
+      initCsrfToken
+    },
+    { createMerginApp },
+    { createPiniaInstance, getPiniaInstance }
+  ] = await Promise.all([
+    import('@mergin/admin-lib'),
+    import('@mergin/lib'),
+    import('./app'),
+    import('./store')
+  ])
+
   createPiniaInstance()
   const pinia = getPiniaInstance()
   const httpService = getHttpService()
@@ -52,7 +61,9 @@ async function main() {
   const instanceStore = useInstanceStore(pinia)
   const response = await instanceStore.initApp()
   initCsrfToken(response)
-  createMerginApp().mount('#app')
+  const app = createMerginApp()
+  app.use(i18n)
+  app.mount('#app')
 }
 
 main()
diff --git a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue b/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
index 44f63887..bc38aa42 100644
--- a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
+++ b/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
@@ -4,35 +4,44 @@ Copyright (C) Lutra Consulting Limited
 SPDX-License-Identifier: LicenseRef-MerginMaps-Commercial
 -->
 
+<script lang="ts">
+export default {
+  name: 'AdminSidebar'
+}
+</script>
+
 <script setup lang="ts">
 import { AdminRoutes, SidebarFooter } from '@mergin/admin-lib'
 import { SideBarItemModel, SideBarTemplate } from '@mergin/lib'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
+
 const route = useRoute()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const sidebarItems = computed<SideBarItemModel[]>(() => [
   {
-    title: 'Overview',
+    title: t('Overview'),
     to: '/overview',
     icon: 'ti ti-layout-dashboard',
     active: route.matched.some((item) => item.name === AdminRoutes.OVERVIEW)
   },
   {
-    title: 'Accounts',
+    title: t('Accounts'),
     to: '/accounts',
     icon: 'ti ti-user-circle',
     active: route.matched.some((item) => item.name === AdminRoutes.ACCOUNTS)
   },
   {
-    title: 'Projects',
+    title: t('Projects'),
     to: '/projects',
     icon: 'ti ti-article',
     active: route.matched.some((item) => item.name === AdminRoutes.PROJECTS)
   },
   {
-    title: 'Settings',
+    title: t('Settings'),
     to: '/settings',
     icon: 'ti ti-settings',
     active: route.matched.some((item) => item.name === AdminRoutes.SETTINGS)
@@ -42,7 +51,7 @@ const sidebarItems = computed<SideBarItemModel[]>(() => [
 
 <template>
   <side-bar-template :sidebarItems="sidebarItems">
-    <template #subtitle>Admin panel</template>
+    <template #subtitle>{{ t('AdminPanel') }}</template>
     <template #footer>
       <sidebar-footer />
     </template>
diff --git a/web-app/packages/admin-lib/package.json b/web-app/packages/admin-lib/package.json
index 5cae27b4..701d4a52 100644
--- a/web-app/packages/admin-lib/package.json
+++ b/web-app/packages/admin-lib/package.json
@@ -47,7 +47,8 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "universal-cookie": "^4.0.4",
-    "vue": "3.5.12"
+    "vue": "3.5.12",
+    "vue-i18n": "11"
   },
   "peerDependencies": {
     "pinia": ">=2.x",
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue b/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
index 8f456d47..85a37aea 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
@@ -4,7 +4,7 @@
       <app-section ground>
         <template #header>
           <h1 class="headline-h3">
-            Accounts
+            {{ $t('Accounts') }}
             <span class="text-color-medium-green">({{ users.count }})</span>
           </h1>
         </template>
@@ -12,7 +12,7 @@
           <PButton
             icon="ti ti-users-plus"
             @click="createUserDialog"
-            label="Add user"
+            :label="$t('AddUser')"
           />
         </template>
       </app-section>
@@ -22,7 +22,7 @@
         <span class="p-input-icon-left w-full">
           <i class="ti ti-search paragraph-p3"></i>
           <PInputText
-            placeholder="Search accounts"
+            :placeholder="$t('SearchAccounts')"
             data-cy="search-members-field"
             v-model="searchByName"
             class="w-full"
@@ -105,11 +105,11 @@
 
 <script lang="ts">
 import {
+  AppContainer,
+  AppSection,
   PaginatedUsersParams,
-  useDialogStore,
   TableDataHeader,
-  AppContainer,
-  AppSection
+  useDialogStore
 } from '@mergin/lib'
 import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
@@ -120,10 +120,13 @@ import {
 } from 'primevue/datatable'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AdminRoutes } from '@/modules'
 import CreateUserForm from '@/modules/admin/components/CreateUserForm.vue'
 import { useAdminStore } from '@/modules/admin/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'AccountsTable',
   components: {
@@ -141,10 +144,10 @@ export default defineComponent({
       },
       searchByName: '',
       headers: [
-        { field: 'username', header: 'Username', sortable: true },
-        { field: 'email', header: 'Email', sortable: true },
-        { field: 'profile.name', header: 'Full name' },
-        { field: 'active', header: 'Active' }
+        { field: 'username', header: t('Username'), sortable: true },
+        { field: 'email', header: t('Email'), sortable: true },
+        { field: 'profile.name', header: t('FullName') },
+        { field: 'active', header: t('Active') }
       ] as TableDataHeader[]
     }
   },
@@ -207,7 +210,7 @@ export default defineComponent({
     },
 
     createUserDialog() {
-      const dialog = { maxWidth: 500, header: 'Create user' }
+      const dialog = { maxWidth: 500, header: t('CreateUser') }
       const listeners = {
         success: () => {
           this.resetPaging()
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
index 8ac2ea4f..9e843dd3 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <app-container>
       <app-section ground>
         <template #header>
-          <h1 class="headline-h3">Projects</h1>
+          <h1 class="headline-h3">{{ $t('Projects') }}</h1>
         </template>
       </app-section>
     </app-container>
@@ -20,8 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <PInputText
             :placeholder="
               showNamespace
-                ? 'Search by workspace name or project name'
-                : 'Search projects'
+                ? $t('SearchByWorkspaceNameOrProjectName')
+                : $t('SearchProjects')
             "
             v-model="search"
             class="w-full"
@@ -138,13 +138,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 >
                   <div class="flex align-items-center gap-1">
                     <PButton
-                      label="Restore"
+                      :label="$t('Restore')"
                       severity="secondary"
                       size="small"
                       @click="confirmRestore(slotProps.data)"
                     />
                     <PButton
-                      label="Delete"
+                      :label="$t('Delete')"
                       severity="danger"
                       size="small"
                       @click="confirmDelete(slotProps.data)"
@@ -180,14 +180,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <script lang="ts">
 import {
+  AppContainer,
+  AppSection,
   ConfirmDialog,
-  useDialogStore,
-  useNotificationStore,
+  ConfirmDialogProps,
   SortingOptions,
   TableDataHeader,
-  AppSection,
-  AppContainer,
-  ConfirmDialogProps
+  useDialogStore,
+  useNotificationStore
 } from '@mergin/lib'
 import { mapActions, mapState } from 'pinia'
 import {
@@ -197,8 +197,11 @@ import {
 } from 'primevue/datatable'
 import { PropType, defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AdminRoutes, useAdminStore } from '@/main'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'projects-table',
   components: {
@@ -231,17 +234,21 @@ export default defineComponent({
         ...(this.showNamespace
           ? [
               {
-                header: 'Workspace',
+                header: t('Workspace'),
                 field: 'workspace',
                 sortable: true
               }
             ]
           : []),
-        { header: 'Name', field: 'name', sortable: true },
-        { header: 'Last Update', field: 'updated', sortable: true },
-        { header: 'Size', field: 'disk_usage', sortable: true },
-        { header: 'Scheduled removal at', field: 'removed_at', sortable: true },
-        { header: 'Removed by', field: 'removed_by', sortable: true },
+        { header: t('Name'), field: 'name', sortable: true },
+        { header: t('LastUpdate'), field: 'updated', sortable: true },
+        { header: t('Size'), field: 'disk_usage', sortable: true },
+        {
+          header: t('ScheduledRemovalAt'),
+          field: 'removed_at',
+          sortable: true
+        },
+        { header: t('RemovedBy'), field: 'removed_by', sortable: true },
         { header: '', field: 'buttons', sortable: false }
       ]
     }
@@ -303,8 +310,10 @@ export default defineComponent({
 
     confirmRestore(item) {
       const props: ConfirmDialogProps = {
-        text: `Are you sure to restore project ${item.workspace}/${item.name}?`,
-        confirmText: 'Restore'
+        text: `${t('AreYouSureToRestoreProject')} ${item.workspace}/${
+          item.name
+        }?`,
+        confirmText: t('Restore')
       }
       const listeners = {
         confirm: async () => {
@@ -314,19 +323,20 @@ export default defineComponent({
       }
       this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { header: 'Restore project' } }
+        params: { props, listeners, dialog: { header: t('RestoreProject') } }
       })
     },
 
     confirmDelete(item) {
       const props: ConfirmDialogProps = {
-        text: `Are you sure you want to permanently delete this project?`,
-        description: `Deleting this project will remove it
-      and all its data. This action cannot be undone. Type in project name to confirm:`,
+        text: t('AreYouSureYouWantToPermanentlyDeleteThisProject'),
+        description: t(
+          'DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndoneTypeInProjectNameToConfirm'
+        ),
         hint: item.name,
-        confirmText: 'Delete permanently',
+        confirmText: t('DeletePermanently'),
         confirmField: {
-          label: 'Project name',
+          label: t('ProjectName'),
           expected: item.name
         },
         severity: 'danger'
@@ -339,7 +349,7 @@ export default defineComponent({
       }
       this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { header: 'Delete project' } }
+        params: { props, listeners, dialog: { header: t('DeleteProject') } }
       })
     },
 
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue b/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
index 9cf4cbf4..fb341811 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
@@ -7,17 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container v-if="adminStore.displayUpdateAvailable">
     <app-section-banner>
-      <template #title>Update available 🎉!</template>
-      <template #description
-        >A new version of Mergin Maps is available for users. Let's explore its
-        new features.</template
-      >
+      <template #title>{{ $t('UpdateAvailable') }}</template>
+      <template #description>{{
+        $t(
+          'ANewVersionOfMerginMapsIsAvailableForUsersLetsExploreItsNewFeatures'
+        )
+      }}</template>
       <template #header-actions
         ><PButton
           @click="openUpdateUrl"
           severity="secondary"
           data-cy="check-for-updates-btn"
-          label="Update"
+          :label="$t('Update')"
       /></template>
     </app-section-banner>
   </app-container>
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue b/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
index 8de69926..73ef91ac 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/CreateUserForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <form @submit.prevent="submit" class="flex flex-column pb-4">
     <span class="p-input-filled">
-      <label for="email">Email</label>
+      <label for="email">{{ $t('Email') }}</label>
       <PInputText
         id="email"
         v-model="email"
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
     <span class="p-input-filled">
       <app-password-tooltip for="newPassword"
-        ><template #label>Password</template>
+        ><template #label>{{ $t('Password') }}</template>
       </app-password-tooltip>
       <PPassword
         id="newPassword"
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         toggleMask
         :feedback="false"
         aria-describedby="password-error"
-        placeholder="Enter password"
+        :placeholder="$t('EnterPassword')"
       />
       <span class="p-error paragraph-p6" id="password-error">{{
         errors.password?.[0] || '&nbsp;'
@@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="profile-edit-close-btn"
-        >Cancel</PButton
+        >{{ $t('Cancel') }}</PButton
       >
 
       <PButton
@@ -58,7 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="flex w-12 lg:w-6 justify-content-center"
         data-cy="profile-edit-save-btn"
       >
-        Create
+        {{ $t('Create') }}
       </PButton>
     </div>
   </form>
@@ -78,6 +78,10 @@ import { defineComponent } from 'vue'
 
 import { AdminApi, CreateUserData } from '..'
 
+import returnTranslation from '@/../../lang/translate'
+
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   components: {
     AppPasswordTooltip
@@ -130,7 +134,7 @@ export default defineComponent({
           this.close()
           this.$emit('success')
           this.show({
-            text: 'User created'
+            text: t('UserCreated')
           })
         })
         .catch((err) => {
@@ -139,7 +143,7 @@ export default defineComponent({
             error: err,
             generalMessage: errorUtils.getErrorMessage(
               err,
-              'Failed to create user'
+              t('FailedToCreateUser')
             )
           })
         })
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/ReportDownloadDialog.vue b/web-app/packages/admin-lib/src/modules/admin/components/ReportDownloadDialog.vue
index 6ba72cc8..dcabc422 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/ReportDownloadDialog.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/ReportDownloadDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <form @submit.prevent="download" class="flex flex-column pb-4 gap-2">
     <span class="p-input-filled">
-      <label id="period-label">Period</label>
+      <label id="period-label">{{ $t('Period') }}</label>
       <app-dropdown
         aria-labelledby="period-label"
         v-model="period"
@@ -10,7 +10,7 @@
     </span>
 
     <span class="p-input-filled w-full">
-      <label for="range">Custom range</label>
+      <label for="range">{{ $t('CustomRange') }}</label>
       <PCalendar
         inputId="range"
         v-model="range"
@@ -18,7 +18,7 @@
         :disabled="Number(period) > -1"
         :max-date="maxDate"
         class="w-full"
-        placeholder="Select date range"
+        :placeholder="$t('SelectDateRange')"
       />
     </span>
 
@@ -31,12 +31,12 @@
         @click="close"
         class="w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6"
         data-cy="clone-dialog-close-btn"
-        label="Cancel"
+        :label="$t('Cancel')"
       />
       <PButton
         type="submit"
         class="w-12 lg:w-6"
-        label="Download"
+        :label="$t('Download')"
         :disabled="range.filter(Boolean).length < 2"
       />
     </div>
@@ -48,18 +48,20 @@ import { AppDropdown, DropdownOption, useDialogStore } from '@mergin/lib'
 import subMonths from 'date-fns/subMonths'
 import { ref, watchEffect } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { useAdminStore } from '@/main'
 
 const dialogStore = useDialogStore()
 const adminStore = useAdminStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const maxDate = ref<Date>(new Date())
 const period = ref<string>('3')
 const periodOptions = ref<DropdownOption[]>([
-  { label: 'Last 3 months', value: '3' },
-  { label: 'Last 6 months', value: '6' },
-  { label: 'Last 12 months', value: '12' },
-  { label: 'Custom range', value: '-1' }
+  { label: t('Last3months'), value: '3' },
+  { label: t('Last6months'), value: '6' },
+  { label: t('Last12months'), value: '12' },
+  { label: t('CustomRange'), value: '-1' }
 ])
 const range = ref<Array<Date>>([
   subMonths(new Date(), Number(period.value)),
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/ServerNotConfigured.vue b/web-app/packages/admin-lib/src/modules/admin/components/ServerNotConfigured.vue
index b2af8c8b..36d09259 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/ServerNotConfigured.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/ServerNotConfigured.vue
@@ -7,19 +7,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container v-if="displayBanner">
     <app-section-banner>
-      <template #title> Server is not properly configured</template>
+      <template #title>{{ $t('ServerIsNotProperlyConfigured') }}</template>
       <template #description
-        >Your server is not configured properly for use in the production
-        environment. Read more in the
-        <a :href="docsLinkDocumentation" target="_blank">documentation</a> how
-        to properly set up the deployment.</template
+        >{{
+          $t(
+            'YourServerIsNotConfiguredProperlyForUseInTheProductionEnvironmentReadMoreInThe'
+          )
+        }}
+        <a :href="docsLinkDocumentation" target="_blank">{{
+          $t('Documentation')
+        }}</a>
+        {{ $t('HowToProperlySetUpTheDeployment') }}.</template
       >
       <template #header-actions
         ><PButton
           @click="dismiss"
           severity="secondary"
           data-cy="dismiss-server-configured-btn"
-          label="Dismiss"
+          :label="$t('Dismiss')"
       /></template>
     </app-section-banner>
   </app-container>
diff --git a/web-app/packages/admin-lib/src/modules/admin/routes.ts b/web-app/packages/admin-lib/src/modules/admin/routes.ts
index 3439a561..6c81123d 100644
--- a/web-app/packages/admin-lib/src/modules/admin/routes.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/routes.ts
@@ -6,6 +6,10 @@ import { RouteLocationNormalizedLoaded, RouteRecord } from 'vue-router'
 
 import { AdminRouteParams } from './types'
 
+import returnTranslation from '@/../../lang/translate'
+
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export enum AdminRoutes {
   ACCOUNTS = 'accounts',
   ACCOUNT = 'account',
@@ -24,16 +28,16 @@ export enum AdminRoutes {
 export const getAdminTitle = (route: RouteLocationNormalizedLoaded) => {
   const params = route.params as AdminRouteParams
   const titles: Record<AdminRoutes, string | string[]> = {
-    [AdminRoutes.Login]: ['Sign in', 'Mergin Maps Admin Panel'],
-    [AdminRoutes.ACCOUNTS]: 'Accounts',
-    [AdminRoutes.ACCOUNT]: 'Account details',
-    [AdminRoutes.OVERVIEW]: 'Admin overview',
-    [AdminRoutes.PROJECTS]: 'Projects',
-    [AdminRoutes.PROJECT]: ['Details', params.projectName],
-    [AdminRoutes.SETTINGS]: 'Settings',
-    [AdminRoutes.ProjectTree]: ['Files', params.projectName],
-    [AdminRoutes.ProjectHistory]: ['History', params.projectName],
-    [AdminRoutes.ProjectSettings]: ['Settings', params.projectName],
+    [AdminRoutes.Login]: [t('SignIn'), t('MerginMapsAdminPanel')],
+    [AdminRoutes.ACCOUNTS]: t('Accounts'),
+    [AdminRoutes.ACCOUNT]: t('AccountDetails'),
+    [AdminRoutes.OVERVIEW]: t('Overview'),
+    [AdminRoutes.PROJECTS]: t('Projects'),
+    [AdminRoutes.PROJECT]: [t('ProjectDetails'), params.projectName],
+    [AdminRoutes.SETTINGS]: t('Settings'),
+    [AdminRoutes.ProjectTree]: [t('Files'), params.projectName],
+    [AdminRoutes.ProjectHistory]: [t('History'), params.projectName],
+    [AdminRoutes.ProjectSettings]: [t('Settings'), params.projectName],
     [AdminRoutes.ProjectVersion]: [params.version_id, params.projectName],
     [AdminRoutes.FileVersionDetail]: [params.path, params.version_id]
   }
diff --git a/web-app/packages/admin-lib/src/modules/admin/store.ts b/web-app/packages/admin-lib/src/modules/admin/store.ts
index a0544bbd..834da640 100644
--- a/web-app/packages/admin-lib/src/modules/admin/store.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/store.ts
@@ -20,6 +20,7 @@ import Cookies from 'universal-cookie'
 
 import { AdminRoutes } from './routes'
 
+import returnTranslation from '@/../../lang/translate'
 import { AdminApi } from '@/modules/admin/adminApi'
 import {
   LatestServerVersionResponse,
@@ -50,6 +51,7 @@ export interface AdminState {
 
 const cookies = new Cookies()
 const COOKIES_HIDE_SERVER_CONFIGURED_BANNER = 'hideServerConfiguredBanner'
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 export const useAdminStore = defineStore('adminModule', {
   state: (): AdminState => ({
@@ -138,8 +140,8 @@ export const useAdminStore = defineStore('adminModule', {
       try {
         const response = await AdminApi.fetchUserByName(payload.username)
         this.user = response.data
-      } catch (e) {
-        await notificationStore.error({ text: 'Failed to fetch user profile' })
+      } catch {
+        await notificationStore.error({ text: t('FailedToFetchUserProfile') })
       } finally {
         htmlUtils.waitCursor(false)
       }
@@ -154,7 +156,7 @@ export const useAdminStore = defineStore('adminModule', {
         await getActivePinia().router.push({ name: AdminRoutes.ACCOUNTS })
       } catch (err) {
         await notificationStore.error({
-          text: errorUtils.getErrorMessage(err, 'Unable to close account')
+          text: errorUtils.getErrorMessage(err, t('UnableToCloseAccount'))
         })
       } finally {
         htmlUtils.waitCursor(false)
@@ -178,7 +180,7 @@ export const useAdminStore = defineStore('adminModule', {
         await notificationStore.error({
           text: errorUtils.getErrorMessage(
             err,
-            'Unable to permanently remove account'
+            t('UnableToPermanentlyRemoveAccount')
           )
         })
       } finally {
@@ -197,7 +199,7 @@ export const useAdminStore = defineStore('adminModule', {
         await formStore.handleError({
           componentId: payload.componentId,
           error,
-          generalMessage: 'Failed to login'
+          generalMessage: t('FailedToLogin')
         })
       }
     },
@@ -280,9 +282,9 @@ export const useAdminStore = defineStore('adminModule', {
         const response = await AdminApi.getProjects(params)
         this.projects.items = response.data.items
         this.projects.count = response.data.count
-      } catch (e) {
+      } catch {
         notificationStore.error({
-          text: 'Failed to fetch projects'
+          text: t('FailedToFetchProjects')
         })
       } finally {
         this.projects.loading = false
@@ -295,9 +297,9 @@ export const useAdminStore = defineStore('adminModule', {
       try {
         this.projects.loading = true
         await AdminApi.restoreProject(payload.projectId)
-      } catch (e) {
+      } catch {
         notificationStore.error({
-          text: 'Failed to restore project'
+          text: t('FailedToRestoreProject')
         })
       } finally {
         this.projects.loading = false
@@ -311,11 +313,11 @@ export const useAdminStore = defineStore('adminModule', {
         await AdminApi.deleteProject(payload.projectId)
         await getActivePinia().router.push({ name: AdminRoutes.PROJECTS })
         notificationStore.show({
-          text: 'Project removed successfully'
+          text: t('ProjectRemovedSuccessfully')
         })
-      } catch (e) {
+      } catch {
         notificationStore.error({
-          text: 'Unable to remove project'
+          text: t('UnableToRemoveProject')
         })
       }
     },
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
index 9096e9bb..b348896c 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -3,7 +3,7 @@
     <app-container>
       <app-section ground>
         <template #header>
-          <h1 class="headline-h3">Account details</h1>
+          <h1 class="headline-h3">{{ $t('AccountDetails') }}</h1>
         </template>
       </app-section>
     </app-container>
@@ -37,24 +37,30 @@
               <i
                 v-if="!user?.verified_email"
                 v-tooltip.top="{
-                  value: 'Email verification status'
+                  value: $t('EmailVerificationStatus')
                 }"
                 class="ti ti-alert-circle-filled"
                 style="color: var(--grape-color)"
               ></i>
               {{ user?.email }}
             </p>
-            <dl class="profile-view-detail-list grid grid-nogutter paragraph-p5">
+            <dl
+              class="profile-view-detail-list grid grid-nogutter paragraph-p5"
+            >
               <div
                 class="col-6 flex flex-column align-items-start text-left flex-wrap"
               >
-                <dt class="paragraph-p6 opacity-80 mb-2">Last signed in</dt>
+                <dt class="paragraph-p6 opacity-80 mb-2">
+                  {{ $t('LastSignedIn') }}
+                </dt>
                 <dd class="font-semibold" data-cy="profile-last-signed-in">
                   {{ $filters.date(user.last_signed_in) || '-' }}
                 </dd>
               </div>
               <div class="col-6 flex flex-column align-items-end">
-                <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt>
+                <dt class="paragraph-p6 opacity-80 mb-2">
+                  {{ $t('Registered') }}
+                </dt>
                 <dd class="font-semibold" data-cy="profile-registered">
                   {{ $filters.date(user?.registration_date) }}
                 </dd>
@@ -65,7 +71,7 @@
       </app-container>
       <app-container v-if="userStore.loggedUser?.id !== user?.id">
         <app-section>
-          <template #title>Advanced</template>
+          <template #title>{{ $t('Advanced') }}</template>
 
           <app-settings :items="settingsItems">
             <template #notifications>
@@ -90,8 +96,8 @@
                     @click="switchAdminAccess"
                     :label="
                       !user?.is_admin
-                        ? 'Grant admin access'
-                        : 'Revoke admin access'
+                        ? $t('GrantAdminAccess')
+                        : $t('RevokeAdminAccess')
                     "
                   />
                 </div>
@@ -103,7 +109,9 @@
                   @click="changeStatusDialog"
                   :severity="user?.active ? 'warning' : 'secondary'"
                   :label="
-                    user?.active ? 'Deactivate account' : 'Activate account'
+                    user?.active
+                      ? $t('DeactivateAccount')
+                      : $t('ActivateAccount')
                   "
                   class="w-auto mr-1"
                 />
@@ -115,7 +123,7 @@
                   @click="confirmDeleteUser"
                   severity="danger"
                   data-cy="profile-close-account-btn"
-                  label="Delete account"
+                  :label="$t('DeleteAccount')"
                 />
               </div>
             </template>
@@ -141,6 +149,7 @@ import {
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 import { useAdminStore } from '@/modules/admin/store'
 
@@ -149,34 +158,40 @@ const adminStore = useAdminStore()
 const dialogStore = useDialogStore()
 const instanceStore = useInstanceStore()
 const userStore = useUserStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const settingsItems = computed<AppSettingsItemConfig[]>(() => [
   {
     key: 'notifications',
-    title: 'Receive notifications',
+    title: t('ReceiveNotifications'),
     description: profile?.value?.receive_notifications
-      ? 'User has enabled receiving notifications'
-      : 'User has disabled notifications.'
+      ? t('UserHasEnabledReceivingNotifications')
+      : t('UserHasDisabledNotifications')
   },
   {
     key: 'adminAccess',
-    title: 'Access to admin panel',
+    title: t('AccessToAdminPanel'),
     description: user.value?.is_admin
-      ? 'User has access to the admin panel.'
-      : 'User does not have access to the admin panel.'
+      ? t('UserHasAccessToTheAdminPanel')
+      : t('UserDoesNotHaveAccessToTheAdminPanel')
   },
   {
     key: 'accountActivation',
-    title: 'Account activation',
+    title: t('AccountActivation'),
     description: user?.value?.active
-      ? "The user's account is currently active. Deactivation will lead to a temporary ban from Mergin Maps usage."
-      : "The user's account is currently inactive. Activating it will allow access to Mergin Maps."
+      ? t(
+          'TheUsersAccountIsCurrentlyActiveDeactivationWillLeadToATemporaryBanFromMerginMapsUsage'
+        )
+      : t(
+          'TheUsersAccountIsCurrentlyInactiveActivatingItWillAllowAccessToMerginMaps'
+        )
   },
   {
     key: 'deleteAccount',
-    title: 'Delete account',
-    description:
-      'Deleting this user will remove them and all their data. This action cannot be undone.'
+    title: t('DeleteAccount'),
+    description: t(
+      'DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndone'
+    )
   }
 ])
 
@@ -202,17 +217,18 @@ watch(
 const changeStatusDialog = () => {
   const props: ConfirmDialogProps = user.value.active
     ? {
-        confirmText: 'Deactivate',
+        confirmText: t('Deactivate'),
         severity: 'warning',
-        text: 'Do you really want deactivate this account?',
-        description:
-          'Deactivating this account will lead to a temporary ban from Mergin Maps usage.'
+        text: t('DoYouReallyWantDeactivateThisAccount'),
+        description: t(
+          'DeactivatingThisAccountWillLeadToATemporaryBanFromMerginMapsUsage'
+        )
       }
     : {
-        text: 'Do you really want activate this account?',
-        confirmText: 'Activate'
+        text: t('DoYouReallyWantActivateThisAccount'),
+        confirmText: t('Activate')
       }
-  const dialog = { header: 'User activation' }
+  const dialog = { header: t('UserActivation') }
   const listeners = {
     confirm: async () => {
       await adminStore.updateUser({
@@ -235,13 +251,14 @@ const changeStatusDialog = () => {
 
 const confirmDeleteUser = () => {
   const props: ConfirmDialogProps = {
-    text: `Are you sure you want to permanently delete this account?`,
-    description: `Deleting this user will remove them
-      and all their data. This action cannot be undone. Type in username to confirm:`,
+    text: t('AreYouSureYouWantToPermanentlyDeleteThisAccount'),
+    description: t(
+      'DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndoneTypeInUsernameToConfirm'
+    ),
     hint: user.value.username,
-    confirmText: 'Delete permanently',
+    confirmText: t('DeletePermanently'),
     confirmField: {
-      label: 'Username',
+      label: t('Username'),
       expected: user.value.username
     },
     severity: 'danger'
@@ -252,30 +269,32 @@ const confirmDeleteUser = () => {
   }
   dialogStore.show({
     component: ConfirmDialog,
-    params: { props, listeners, dialog: { header: 'Delete user' } }
+    params: { props, listeners, dialog: { header: t('DeleteUser') } }
   })
 }
 
 const switchAdminAccess = async () => {
   const props: ConfirmDialogProps = !user.value?.is_admin
     ? {
-        text: `Are you sure to grant access to admin panel to this user?`,
-        description: `This person will have full management access to all data on the server. They will see all users and projects and can update or remove them.`,
+        text: t('AreYouSureToGrantAccessToAdminPanelToThisUser'),
+        description: t(
+          'ThisPersonWillHaveFullManagementAccessToAllDataOnTheServerTheyWillSeeAllUsersAndProjectsAndCanUpdateOrRemoveThem'
+        ),
         hint: user.value.username,
-        confirmText: 'Grant access',
+        confirmText: t('GrantAccess'),
         confirmField: {
-          label: 'Username',
+          label: t('Username'),
           expected: user.value.username
         },
         severity: 'warning'
       }
     : {
-        text: `Are you sure you want to revoke access to admin panel to this user?`,
-        description: `This person will no longer have access to the admin panel.`,
+        text: t('AreYouSureYouWantToRevokeAccessToAdminPanelToThisUser'),
+        description: t('ThisPersonWillNoLongerHaveAccessToTheAdminPanel'),
         hint: user.value.username,
-        confirmText: 'Revoke access',
+        confirmText: t('RevokeAccess'),
         confirmField: {
-          label: 'Username',
+          label: t('Username'),
           expected: user.value.username
         },
         severity: 'danger'
@@ -291,7 +310,7 @@ const switchAdminAccess = async () => {
   }
   dialogStore.show({
     component: ConfirmDialog,
-    params: { props, listeners, dialog: { header: 'Admin access' } }
+    params: { props, listeners, dialog: { header: t('AdminAccess') } }
   })
 }
 </script>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/OverviewView.vue b/web-app/packages/admin-lib/src/modules/admin/views/OverviewView.vue
index d90d4747..2d0881e1 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/OverviewView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/OverviewView.vue
@@ -8,14 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <admin-layout>
     <app-container>
       <app-section ground>
-        <template #header><h1 class="headline-h3">Overview</h1></template>
+        <template #header
+          ><h1 class="headline-h3">{{ $t('Overview') }}</h1></template
+        >
       </app-section>
     </app-container>
 
     <app-container>
       <div class="grid" v-if="usage">
         <usage-card class="col-12 sm:col-6 lg:col-3">
-          <template #heading>Contributors</template>
+          <template #heading>{{ $t('Contributors') }}</template>
           <div
             class="w-full"
             :style="{
@@ -29,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </usage-card>
         <usage-card class="col-12 sm:col-6 lg:col-3">
-          <template #heading>Used storage</template>
+          <template #heading>{{ $t('UsedStorage') }}</template>
           <div
             class="w-full"
             :style="{
@@ -45,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </usage-card>
         <usage-card class="col-12 sm:col-6 lg:col-3">
-          <template #heading>Registered accounts</template>
+          <template #heading>{{ $t('RegisteredAccounts') }}</template>
           <div
             class="w-full"
             :style="{
@@ -62,12 +64,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               severity="secondary"
               @click="$router.push({ name: AdminRoutes.ACCOUNTS })"
               class="w-full"
-              label="Manage users"
+              :label="$t('ManageUsers')"
             />
           </template>
         </usage-card>
         <usage-card class="col-12 sm:col-6 lg:col-3">
-          <template #heading>Projects</template>
+          <template #heading>{{ $t('Projects') }}</template>
           <div
             class="w-full"
             :style="{
@@ -84,12 +86,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               severity="secondary"
               @click="$router.push({ name: AdminRoutes.PROJECTS })"
               class="w-full"
-              label="Manage projects"
+              :label="$t('ManageProjects')"
             />
           </template>
         </usage-card>
         <usage-card v-if="showWorkspaces" class="col-12 sm:col-6 lg:col-3">
-          <template #heading>Workspaces</template>
+          <template #heading>{{ $t('Workspaces') }}</template>
           <div
             class="w-full"
             :style="{
@@ -106,7 +108,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               severity="secondary"
               @click="$router.push({ name: 'adminWorkspaces' })"
               class="w-full"
-              label="Manage workspaces"
+              :label="$t('ManageWorkspaces')"
             />
           </template>
         </usage-card>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectFilesView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectFilesView.vue
index 359eeb15..1b6a5897 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectFilesView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectFilesView.vue
@@ -9,7 +9,7 @@
           <span class="p-input-icon-left flex-grow-1">
             <i class="ti ti-search paragraph-p3"></i>
             <PInputText
-              placeholder="Search files"
+              :placeholder="$t('SearchFiles')"
               data-cy="search-files-field"
               v-model="searchFilter"
               class="w-full"
@@ -49,6 +49,8 @@ import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
+
 interface Props {
   namespace?: string
   projectName?: string
@@ -62,6 +64,7 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter()
 const projectStore = useProjectStore()
 const { project } = storeToRefs(projectStore)
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const options = ref({
   sortBy: 'name',
@@ -71,10 +74,10 @@ const searchFilter = ref('')
 
 const filterMenuItems = computed<MenuItem[]>(() => {
   const items = [
-    { label: 'Sort by name A-Z', key: 'name', sortDesc: 1 },
-    { label: 'Sort by name Z-A', key: 'name', sortDesc: -1 },
-    { label: 'Sort by last modified', key: 'mtime', sortDesc: -1 },
-    { label: 'Sort by file size', key: 'size', sortDesc: -1 }
+    { label: t('SortByNameAZ'), key: 'name', sortDesc: 1 },
+    { label: t('SortByNameZA'), key: 'name', sortDesc: -1 },
+    { label: t('SortByLastModified'), key: 'mtime', sortDesc: -1 },
+    { label: t('SortByFileSize'), key: 'size', sortDesc: -1 }
   ]
 
   return items.map((item) => ({
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectSettingsView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectSettingsView.vue
index 126e7b23..15a2a9ab 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectSettingsView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectSettingsView.vue
@@ -1,7 +1,7 @@
 <template>
   <app-container>
     <app-section>
-      <template #title>Advanced</template>
+      <template #title>{{ $t('Advanced') }}</template>
       <app-settings :items="settingsItems">
         <template #publicProject>
           <div class="flex-shrink-0 paragraph-p1">
@@ -14,7 +14,7 @@
               @click="confirmDelete"
               severity="danger"
               data-cy="project-delete-btn"
-              label="Delete project"
+              :label="$t('DeleteProject')"
             />
           </div>
         </template>
@@ -36,38 +36,41 @@ import {
 } from '@mergin/lib'
 import { computed } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { useAdminStore } from '@/modules/admin/store'
 
 const projectStore = useProjectStore()
 const dialogStore = useDialogStore()
 const adminStore = useAdminStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const project = computed(() => projectStore.project)
 
 const settingsItems = computed<AppSettingsItemConfig[]>(() => [
   {
     key: 'publicProject',
-    title: 'Public project',
-    description:
-      'The project will be visible to everyone if it is marked as public.'
+    title: t('PublicProject'),
+    description: t('TheProjectWillBeVisibleToEveryoneIfItIsMarkedAsPublic')
   },
   {
     key: 'deleteProject',
-    title: 'Delete project',
-    description:
-      'Deleting this project will remove it and all its data. This action cannot be undone.'
+    title: t('DeleteProject'),
+    description: t(
+      'DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndone'
+    )
   }
 ])
 
 const confirmDelete = () => {
   const props: ConfirmDialogProps = {
-    text: `Are you sure you want to permanently delete this project?`,
-    description: `Deleting this project will remove it
-      and all its data. This action cannot be undone. Type in project name to confirm:`,
+    text: t('AreYouSureYouWantToPermanentlyDeleteThisProject'),
+    description: t(
+      'DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndoneTypeInProjectNameToConfirm'
+    ),
     hint: project.value.name,
-    confirmText: 'Delete permanently',
+    confirmText: t('DeletePermanently'),
     confirmField: {
-      label: 'Project name',
+      label: t('ProjectName'),
       expected: project.value.name
     },
     severity: 'danger'
@@ -78,7 +81,7 @@ const confirmDelete = () => {
   }
   dialogStore.show({
     component: ConfirmDialog,
-    params: { props, listeners, dialog: { header: 'Delete project' } }
+    params: { props, listeners, dialog: { header: t('DeleteProject') } }
   })
 }
 </script>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionView.vue
index f4642a93..65015b56 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionView.vue
@@ -3,13 +3,13 @@
     <app-container>
       <app-section ground>
         <template #header>
-          <h1 class="headline-h3">Project version</h1>
+          <h1 class="headline-h3">{{ $t('ProjectVersion') }}</h1>
         </template>
         <template #headerActions>
           <PButton
             severity="secondary"
             @click="download"
-            label="Download"
+            :label="$t('Download')"
             icon="ti ti-download"
           />
         </template>
@@ -34,25 +34,25 @@
           </h2>
           <dl class="paragraph-p5 flex flex-column gap-3">
             <div>
-              <dt class="paragraph-p6 opacity-80">Author</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('Author') }}</dt>
               <dd class="font-semibold">
                 {{ data?.author }}
               </dd>
             </div>
             <div>
-              <dt class="paragraph-p6 opacity-80">Project size</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('ProjectSize') }}</dt>
               <dd class="font-semibold">
                 {{ $filters.filesize(data?.project_size) }}
               </dd>
             </div>
             <div>
-              <dt class="paragraph-p6 opacity-80">Created</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('Created') }}</dt>
               <dd class="font-semibold">
                 {{ $filters.datetime(data?.created) }}
               </dd>
             </div>
             <div>
-              <dt class="paragraph-p6 opacity-80">User agent</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('UserAgent') }}</dt>
               <dd class="font-semibold">
                 {{ data?.user_agent }}
               </dd>
@@ -85,6 +85,7 @@ import { useRoute } from 'vue-router'
 
 import { AdminRoutes } from '../routes'
 
+import returnTranslation from '@/../../lang/translate'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 
 defineProps<{
@@ -97,6 +98,7 @@ const route = useRoute()
 const projectStore = useProjectStore()
 const notificationStore = useNotificationStore()
 const data = ref<ProjectVersion>(null)
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 const project = computed(() => projectStore.project)
 const versionId = computed(() => route.params.version_id as string)
 const routeProjectName = computed(() => route?.params?.projectName as string)
@@ -120,7 +122,7 @@ async function fetchVersion() {
   } catch (err) {
     console.error(err)
     notificationStore.error({
-      text: errorUtils.getErrorMessage(err, 'Failed to fetch project version')
+      text: errorUtils.getErrorMessage(err, t('FailedToFetchProjectVersion'))
     })
   }
 }
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionsView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionsView.vue
index 5e248b17..808850fb 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionsView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectVersionsView.vue
@@ -41,6 +41,8 @@ import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
+
 interface Props {
   projectName?: string
   namespace?: string
@@ -49,6 +51,7 @@ interface Props {
 defineProps<Props>()
 
 const router = useRouter()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const options = ref<DataViewWrapperOptions>({
   sortDesc: true,
@@ -59,12 +62,12 @@ const options = ref<DataViewWrapperOptions>({
 const filterMenuItems = computed<MenuItem[]>(() => {
   return [
     {
-      label: 'Newest versions',
+      label: t('NewestVersions'),
       key: 'newest',
       sortDesc: true
     },
     {
-      label: 'Oldest versions',
+      label: t('OldestVersions'),
       key: 'oldest',
       sortDesc: false
     }
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
index 4a975d9a..d4c03d91 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
@@ -3,7 +3,7 @@
     <app-container>
       <app-section ground>
         <template #header>
-          <h1 class="headline-h3">Project details</h1>
+          <h1 class="headline-h3">{{ $t('ProjectDetails') }}</h1>
         </template>
         <template #headerActions>
           <PButton
@@ -12,7 +12,7 @@
             data-cy="project-download-btn"
             icon="ti ti-download"
             class="mr-2"
-            label="Download"
+            :label="$t('Download')"
             :disabled="projectStore.projectDownloading"
           />
           <PButton
@@ -20,7 +20,7 @@
             @click="openDashboard"
             data-cy="project-dashboard"
             icon="ti ti-external-link"
-            label="Open in dashboard"
+            :label="$t('OpenInDashboard')"
           />
         </template>
       </app-section>
@@ -46,19 +46,19 @@
             class="project-view-detail-list paragraph-p5 flex flex-column gap-3"
           >
             <div>
-              <dt class="paragraph-p6 opacity-80">Created</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('Created') }}</dt>
               <dd class="font-semibold" data-cy="project-owner">
                 {{ $filters.datetime(project?.created) }}
               </dd>
             </div>
             <div>
-              <dt class="paragraph-p6 opacity-80">Updated</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('Updated') }}</dt>
               <dd class="font-semibold" data-cy="project-created">
                 {{ $filters.datetime(project?.updated) }}
               </dd>
             </div>
             <div>
-              <dt class="paragraph-p6 opacity-80">Disk usage</dt>
+              <dt class="paragraph-p6 opacity-80">{{ $t('DiskUsage') }}</dt>
               <dd class="font-semibold" data-cy="project-created">
                 {{ $filters.filesize(project?.disk_usage, 'MB') }}
               </dd>
@@ -117,6 +117,7 @@ import {
 import { computed, watch, defineProps } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
 import { AdminRoutes } from '@/modules'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 
@@ -128,6 +129,7 @@ interface TabItem {
 const route = useRoute()
 const router = useRouter()
 const projectStore = useProjectStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 defineProps<{
   projectName: string
@@ -138,15 +140,15 @@ const tabs = computed(() => {
   const tabs: TabItem[] = [
     {
       route: AdminRoutes.ProjectTree,
-      header: 'Files'
+      header: t('Files')
     },
     {
       route: AdminRoutes.ProjectHistory,
-      header: 'History'
+      header: t('History')
     },
     {
       route: AdminRoutes.ProjectSettings,
-      header: 'Settings'
+      header: t('Settings')
     }
   ]
   return tabs
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue b/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
index 8204b41a..950e677b 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
@@ -11,14 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <template #description
         >{{ item.description
         }}<template v-if="item.key === 'usageInformation'">
-          Click
+          {{ $t('Click') }}
           <a
             class="font-semibold text-color-forest"
             :href="instanceStore.configData?.docs_url"
             target="_blank"
-            >here</a
+            >{{ $t('Here') }}</a
           >
-          for more information.</template
+          {{ $t('ForMoreInformation') }}</template
         ></template
       >
       <template #action>
@@ -41,15 +41,18 @@ import {
 } from '@mergin/lib'
 import { ref } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import SettingsViewTemplate from '@/modules/admin/views/SettingsViewTemplate.vue'
 
 const instanceStore = useInstanceStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const settingsItems = ref<AppSettingsItemConfig[]>([
   {
-    title: 'Collect statistics',
-    description:
-      'Help us improve Mergin Maps by sharing usage information. Mergin Maps collects anonymous usage information to make the service better overtime.',
+    title: t('CollectStatistics'),
+    description: t(
+      'HelpUsImproveMerginMapsBySharingUsageInformationMerginMapsCollectsAnonymousUsageInformationToMakeTheServiceBetterOvertime'
+    ),
     key: 'usageInformation'
   }
 ])
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue b/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
index 3956ffbc..c4333bf6 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
@@ -8,14 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <admin-layout>
     <app-container>
       <app-section ground>
-        <template #header><h1 class="headline-h3">Settings</h1></template>
+        <template #header
+          ><h1 class="headline-h3">{{ $t('Settings') }}</h1></template
+        >
       </app-section>
     </app-container>
 
     <app-container>
       <app-section>
-        <template #title>Advanced</template>
-        <app-settings :items="settingsItems">
+        <template #title>{{ $t('Advanced') }}</template>
+        <app-settings :items="resolvedSettingsItems">
           <template #items-start><slot /></template>
 
           <template #checkForUpdates
@@ -27,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             ><PButton
               severity="secondary"
               @click="downloadReport"
-              label="Download"
+              :label="$t('Download')"
           /></template>
         </app-settings>
       </app-section>
@@ -43,26 +45,34 @@ import {
   AppSettingsItemConfig,
   useDialogStore
 } from '@mergin/lib'
+import { computed } from 'vue'
 
 import ReportDownloadDialog from '../components/ReportDownloadDialog.vue'
 import { useAdminStore } from '../store'
 
+import returnTranslation from '@/../../lang/translate'
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 
-withDefaults(defineProps<{ settingsItems?: AppSettingsItemConfig[] }>(), {
-  settingsItems: () => [
-    {
-      title: 'Check for updates',
-      description: 'Let Mergin Maps automatically check for new updates',
-      key: 'checkForUpdates'
-    },
-    {
-      title: 'Server usage report',
-      description: 'Download usage statistics for your server deployment.',
-      key: 'downloadReport'
-    }
-  ]
-})
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
+const props = defineProps<{ settingsItems?: AppSettingsItemConfig[] }>()
+
+const defaultSettingsItems = computed<AppSettingsItemConfig[]>(() => [
+  {
+    title: t('CheckForUpdates'),
+    description: t('LetMerginMapsAutomaticallyCheckForNewUpdates'),
+    key: 'checkForUpdates'
+  },
+  {
+    title: t('ServerUsageReport'),
+    description: t('DownloadUsageStatisticsForYourServerDeployment'),
+    key: 'downloadReport'
+  }
+])
+
+const resolvedSettingsItems = computed(
+  () => props.settingsItems ?? defaultSettingsItems.value
+)
 
 const adminStore = useAdminStore()
 const dialogStore = useDialogStore()
@@ -76,7 +86,7 @@ function downloadReport() {
   dialogStore.show({
     component: ReportDownloadDialog,
     params: {
-      dialog: { header: 'Download report' }
+      dialog: { header: t('DownloadReport') }
     }
   })
 }
diff --git a/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue b/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue
index 75667f01..6e00faca 100644
--- a/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue
+++ b/web-app/packages/admin-lib/src/modules/layout/components/SidebarFooter.vue
@@ -4,7 +4,7 @@
     href="/"
     target="__blank"
     class="flex justify-content-between align-items-center title-t5 no-underline cursor-pointer"
-    >Dashboard <i class="title-t1 ti ti-external-link"
+    >{{ $t('Dashboard') }} <i class="title-t1 ti ti-external-link"
   /></a>
 </template>
 
diff --git a/web-app/packages/app/package.json b/web-app/packages/app/package.json
index 43de8339..aa17c980 100644
--- a/web-app/packages/app/package.json
+++ b/web-app/packages/app/package.json
@@ -25,6 +25,7 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "vue": "3.5.12",
+    "vue-i18n": "11",
     "vue-meta": "^3.0.0-alpha.10",
     "vue-router": "4.2.5"
   }
diff --git a/web-app/packages/app/src/main.ts b/web-app/packages/app/src/main.ts
index 7522f914..900bfd32 100644
--- a/web-app/packages/app/src/main.ts
+++ b/web-app/packages/app/src/main.ts
@@ -2,30 +2,38 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-import {
-  DialogModule,
-  FormModule,
-  UserModule,
-  NotificationModule,
-  moduleUtils,
-  getHttpService,
-  ProjectModule,
-  LayoutModule,
-  InstanceModule,
-  useInstanceStore,
-  initCsrfToken
-} from '@mergin/lib'
-
 import 'primevue/resources/primevue.min.css'
 import 'primeflex/primeflex.min.css'
 import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
 import '@tabler/icons-webfont/tabler-icons.min.css'
 import '@mergin/lib/dist/style.css'
 
-import { createMerginApp } from './app'
-import { createPiniaInstance, getPiniaInstance } from './store'
+import { initializeRuntimeI18n } from '@/../../lang/runtime'
 
 async function main() {
+  const i18n = await initializeRuntimeI18n()
+  const [
+    {
+      DialogModule,
+      FormModule,
+      UserModule,
+      NotificationModule,
+      moduleUtils,
+      getHttpService,
+      ProjectModule,
+      LayoutModule,
+      InstanceModule,
+      useInstanceStore,
+      initCsrfToken
+    },
+    { createMerginApp },
+    { createPiniaInstance, getPiniaInstance }
+  ] = await Promise.all([
+    import('@mergin/lib'),
+    import('./app'),
+    import('./store')
+  ])
+
   createPiniaInstance()
   const pinia = getPiniaInstance()
   const httpService = getHttpService()
@@ -49,7 +57,9 @@ async function main() {
   const instanceStore = useInstanceStore(pinia)
   const response = await instanceStore.initApp()
   initCsrfToken(response)
-  createMerginApp().mount('#app')
+  const app = createMerginApp()
+  app.use(i18n)
+  app.mount('#app')
 }
 
 main()
diff --git a/web-app/packages/app/src/modules/project/views/ProjectView.vue b/web-app/packages/app/src/modules/project/views/ProjectView.vue
index 4a856a86..78fa8310 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectView.vue
@@ -28,6 +28,8 @@ import {
 } from '@mergin/lib'
 import { computed, defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
+
 export default defineComponent({
   name: 'ProjectView',
   components: {
@@ -45,6 +47,7 @@ export default defineComponent({
 
     const canCreateProject = computed(() => userStore.isGlobalWorkspaceAdmin)
     const isProjectOwner = computed(() => projectStore.isProjectOwner)
+    const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
     function openCloneDialog() {
       const dialogProps = {
@@ -54,14 +57,14 @@ export default defineComponent({
       const dialog = {
         maxWidth: 580,
         persistent: true,
-        header: 'Clone project'
+        header: t('CloneProject')
       }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({
             componentId: data.merginComponentUuid,
             error,
-            generalMessage: 'Failed to clone project'
+            generalMessage: t('FailedToCloneProject')
           })
         }
       }
@@ -78,7 +81,7 @@ export default defineComponent({
     function openShareDialog() {
       const dialog = {
         maxWidth: 600,
-        header: 'Share project'
+        header: t('ShareProject')
       }
       dialogStore.show({
         component: ProjectShareDialog,
diff --git a/web-app/packages/lang/.eslintrc.cjs b/web-app/packages/lang/.eslintrc.cjs
new file mode 100644
index 00000000..946d963d
--- /dev/null
+++ b/web-app/packages/lang/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  ignorePatterns: ['*.d.ts'],
+  extends: ['../../.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['translations/*.ts'],
+      rules: {
+        'prettier/prettier': 'off'
+      }
+    }
+  ]
+}
diff --git a/web-app/packages/lang/i18n.d.ts b/web-app/packages/lang/i18n.d.ts
new file mode 100644
index 00000000..fb127e68
--- /dev/null
+++ b/web-app/packages/lang/i18n.d.ts
@@ -0,0 +1,12 @@
+export type LocaleMessages = Record<string, string>;
+export type LocaleMessagesMap = Record<string, LocaleMessages>;
+export interface MerginI18nOptions {
+    locale?: string;
+    messages?: LocaleMessagesMap;
+}
+export declare const DEFAULT_LOCALE = "en";
+export declare const normalizeLocale: (locale?: string) => string;
+export declare const getLocalTranslation: (key: string) => string;
+export declare const getRuntimeTranslation: (key: string, locale?: string) => string;
+export declare const createMerginI18n: ({ locale, messages }?: MerginI18nOptions) => import("vue-i18n").I18n<Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, unknown, boolean>;
+export declare const getMerginI18n: () => import("vue-i18n").I18n<Record<string, unknown>, Record<string, unknown>, Record<string, unknown>, unknown, boolean>;
diff --git a/web-app/packages/lang/i18n.ts b/web-app/packages/lang/i18n.ts
new file mode 100644
index 00000000..95f0f789
--- /dev/null
+++ b/web-app/packages/lang/i18n.ts
@@ -0,0 +1,102 @@
+import { createI18n } from 'vue-i18n'
+
+import EN from './translations/EN.js'
+
+export type LocaleMessages = Record<string, string>
+export type LocaleMessagesMap = Record<string, LocaleMessages>
+
+export interface MerginI18nOptions {
+  locale?: string
+  messages?: LocaleMessagesMap
+}
+
+interface RuntimeI18nState {
+  locale: string
+  fallbackLocale: string
+  messages: LocaleMessagesMap
+}
+
+export const DEFAULT_LOCALE = 'en'
+const RUNTIME_I18N_STATE_KEY = '__MERGIN_RUNTIME_I18N__'
+
+let merginI18n: ReturnType<typeof createI18n> | undefined
+
+export const normalizeLocale = (locale?: string) =>
+  locale?.trim().replace(/_/g, '-').toLowerCase() || undefined
+
+const localMessages: LocaleMessagesMap = {
+  [DEFAULT_LOCALE]: EN as LocaleMessages
+}
+
+export const getLocalTranslation = (key: string) =>
+  localMessages[DEFAULT_LOCALE]?.[key]
+
+const getRuntimeI18nState = () =>
+  (
+    globalThis as typeof globalThis &
+      Record<typeof RUNTIME_I18N_STATE_KEY, RuntimeI18nState | undefined>
+  )[RUNTIME_I18N_STATE_KEY]
+
+const setRuntimeI18nState = (state: RuntimeI18nState) => {
+  ;(
+    globalThis as typeof globalThis &
+      Record<typeof RUNTIME_I18N_STATE_KEY, RuntimeI18nState | undefined>
+  )[RUNTIME_I18N_STATE_KEY] = state
+}
+
+export const getRuntimeTranslation = (key: string, locale?: string) => {
+  const state = getRuntimeI18nState()
+
+  if (!state) {
+    return undefined
+  }
+
+  const normalizedLocale = normalizeLocale(locale) ?? state.locale
+
+  return (
+    state.messages[normalizedLocale]?.[key] ??
+    state.messages[state.locale]?.[key] ??
+    state.messages[state.fallbackLocale]?.[key]
+  )
+}
+
+export const createMerginI18n = ({
+  locale = DEFAULT_LOCALE,
+  messages = {}
+}: MerginI18nOptions = {}) => {
+  const resolvedLocale = normalizeLocale(locale) ?? DEFAULT_LOCALE
+  const resolvedMessages: LocaleMessagesMap = {
+    [DEFAULT_LOCALE]: localMessages[DEFAULT_LOCALE]
+  }
+
+  Object.entries(messages).forEach(([messageLocale, localeMessages]) => {
+    const normalizedLocale = normalizeLocale(messageLocale) ?? messageLocale
+    resolvedMessages[normalizedLocale] = {
+      ...(resolvedMessages[normalizedLocale] ?? {}),
+      ...localeMessages
+    }
+  })
+
+  const activeLocale = resolvedMessages[resolvedLocale]
+    ? resolvedLocale
+    : DEFAULT_LOCALE
+
+  setRuntimeI18nState({
+    locale: activeLocale,
+    fallbackLocale: DEFAULT_LOCALE,
+    messages: resolvedMessages
+  })
+
+  merginI18n = createI18n({
+    legacy: false,
+    locale: activeLocale,
+    fallbackLocale: DEFAULT_LOCALE,
+    messages: resolvedMessages,
+    missingWarn: false,
+    fallbackWarn: false
+  })
+
+  return merginI18n
+}
+
+export const getMerginI18n = () => merginI18n
diff --git a/web-app/packages/lang/runtime.ts b/web-app/packages/lang/runtime.ts
new file mode 100644
index 00000000..6f5f9384
--- /dev/null
+++ b/web-app/packages/lang/runtime.ts
@@ -0,0 +1,121 @@
+import {
+  createMerginI18n,
+  DEFAULT_LOCALE,
+  normalizeLocale,
+  type LocaleMessages
+} from './i18n'
+
+interface WeblateConfig {
+  baseUrl: string
+  project: string
+  component: string
+}
+
+interface ConfiguredLocale {
+  normalizedLocale: string
+}
+
+const DEFAULT_WEBLATE_TIMEOUT_MS = 1000
+
+const isMessagesMap = (value: unknown): value is LocaleMessages =>
+  typeof value === 'object' &&
+  value !== null &&
+  !Array.isArray(value) &&
+  Object.values(value).every((message) => typeof message === 'string')
+
+const getEnvString = (value: unknown) =>
+  typeof value === 'string' ? value.trim() : ''
+
+const getConfiguredLocale = (): ConfiguredLocale => {
+  const rawLocale = getEnvString(import.meta.env.VITE_LANG)
+
+  return {
+    normalizedLocale: normalizeLocale(rawLocale) ?? DEFAULT_LOCALE
+  }
+}
+
+const getWeblateTimeoutMs = () => {
+  const timeoutMs = Number(
+    getEnvString(import.meta.env.VITE_WEBLATE_TIMEOUT_MS)
+  )
+
+  return Number.isFinite(timeoutMs) && timeoutMs > 0
+    ? timeoutMs
+    : DEFAULT_WEBLATE_TIMEOUT_MS
+}
+
+const getWeblateBaseUrl = (configuredBaseUrl: string) => {
+  const baseUrl = configuredBaseUrl.replace(/\/+$/, '')
+
+  if (!baseUrl || baseUrl.startsWith('/') || /^https?:\/\//i.test(baseUrl)) {
+    return baseUrl
+  }
+
+  return `https://${baseUrl}`
+}
+
+const getWeblateConfig = (): WeblateConfig | undefined => {
+  const configuredBaseUrl = getEnvString(import.meta.env.VITE_WEBLATE_URL)
+  const baseUrl = getWeblateBaseUrl(configuredBaseUrl)
+  const project = getEnvString(import.meta.env.VITE_WEBLATE_PROJECT)
+  const component = getEnvString(import.meta.env.VITE_WEBLATE_COMPONENT)
+
+  if (!baseUrl || !project || !component) {
+    return undefined
+  }
+
+  return { baseUrl, project, component }
+}
+
+const buildWeblateFileUrl = (
+  { baseUrl, project, component }: WeblateConfig,
+  locale: string
+) =>
+  `${baseUrl}/api/translations/${encodeURIComponent(
+    project
+  )}/${encodeURIComponent(component)}/${encodeURIComponent(locale)}/file/`
+
+const fetchMessages = async (
+  locale: string,
+  config: WeblateConfig | undefined
+) => {
+  if (!config) {
+    return undefined
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), getWeblateTimeoutMs())
+
+  try {
+    const response = await fetch(buildWeblateFileUrl(config, locale), {
+      signal: controller.signal
+    })
+
+    if (!response.ok) {
+      return undefined
+    }
+
+    const messages = await response.json()
+
+    if (!isMessagesMap(messages)) {
+      return undefined
+    }
+
+    return messages
+  } catch {
+    return undefined
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+export const initializeRuntimeI18n = async () => {
+  const config = getWeblateConfig()
+  const { normalizedLocale } = getConfiguredLocale()
+  const requestedMessages = await fetchMessages(normalizedLocale, config)
+
+  return createMerginI18n({
+    locale: normalizedLocale,
+    messages: requestedMessages ? { [normalizedLocale]: requestedMessages } : {}
+  })
+}
diff --git a/web-app/packages/lang/translate.d.ts b/web-app/packages/lang/translate.d.ts
new file mode 100644
index 00000000..30603c6e
--- /dev/null
+++ b/web-app/packages/lang/translate.d.ts
@@ -0,0 +1,2 @@
+declare const returnTranslation: (_lang: string, key: string) => string;
+export default returnTranslation;
diff --git a/web-app/packages/lang/translate.ts b/web-app/packages/lang/translate.ts
new file mode 100644
index 00000000..92b0856c
--- /dev/null
+++ b/web-app/packages/lang/translate.ts
@@ -0,0 +1,27 @@
+import {
+  getLocalTranslation,
+  getMerginI18n,
+  getRuntimeTranslation
+} from './i18n'
+
+const returnTranslation = (_lang: string, key: string) => {
+  const i18n = getMerginI18n()
+
+  if (i18n) {
+    const translation = i18n.global.t(key)
+
+    if (typeof translation === 'string' && translation !== key) {
+      return translation
+    }
+  }
+
+  const runtimeTranslation = getRuntimeTranslation(key, _lang)
+
+  if (runtimeTranslation) {
+    return runtimeTranslation
+  }
+
+  return getLocalTranslation(key) ?? key
+}
+
+export default returnTranslation
diff --git a/web-app/packages/lang/translations/EN.d.ts b/web-app/packages/lang/translations/EN.d.ts
new file mode 100644
index 00000000..9aaf00f0
--- /dev/null
+++ b/web-app/packages/lang/translations/EN.d.ts
@@ -0,0 +1,396 @@
+declare const translations: {
+    ProfileHasBeenChanged: string;
+    FailedToChangeProfile: string;
+    FailedToFetchUsersProfile: string;
+    UnableToCloseAccount: string;
+    FailedToLogin: string;
+    FailedTologin: string;
+    EmailWithPasswordResetLinkWasSentToYourEmailAddress: string;
+    FailedToSendConfirmationEmail: string;
+    FailedToChangePassword: string;
+    EmailWasSentToAddress: string;
+    FailedToSendConfirmationEmailPleaseCheckYourAddressInUserProfileSettings: string;
+    PasswordHasBeenChanged: string;
+    FailedToLoadWorkspace: string;
+    FailedToLoadWorkspaces: string;
+    LoadingOfStoredUserWorkspaceIdHasFailed: string;
+    EmailConfirmation: string;
+    YourEmailAddressHasBeenVerified: string;
+    InvalidToken: string;
+    Continue: string;
+    AccountDetails: string;
+    EditAccount: string;
+    ChangePassword: string;
+    PleaseVerifyYourEmail: string;
+    WeSentYouAVerificationEmailToTheAccountYouProvidedDuringSignup: string;
+    SendConfirmationEmail: string;
+    FullName: string;
+    Registered: string;
+    Advanced: string;
+    ReceiveNotifications: string;
+    WeWillSendYouInformationAboutWorkspaceActivity: string;
+    CloseAccount: string;
+    YourAccountWillBeClosedInCaseYouAreAnOwnerOfAWorkspaceYouMightNeedToTransferTheOwnershipFirstOrCloseTheWorkspace: string;
+    ResetPassword: string;
+    SignIn: string;
+    Email: string;
+    BackToLogin: string;
+    UsernameOrEmail: string;
+    PleaseEnterUsernameOrEmail: string;
+    Password: string;
+    PleaseEnterYourPassword: string;
+    ForgotPassword: string;
+    NewPassword: string;
+    PasswordMustBeAtLeastCharactersLongAndIncludeAtLeastThreeOfTheFollowingLowercaseLettersUppercaseLettersNumbersOrSpecialCharacters: string;
+    ConfirmPassword: string;
+    PleaseEnterYourNewPassword: string;
+    Change: string;
+    YourPasswordWasChangedYouCanNow: string;
+    YouRequestedAccessToTheseProjects: string;
+    FirstName: string;
+    LastName: string;
+    Cancel: string;
+    SaveChanges: string;
+    PleaseNote: string;
+    DoYouReallyWishToCloseYourAccount: string;
+    ThisActionWillDeleteYourMerginMapsAccountIfYouAreAWorkspaceOwnerYouNeedToTransferTheOwnershipToSomebodyElseOrCloseTheWorkspace: string;
+    No: string;
+    Yes: string;
+    Username: string;
+    InOrderToDeleteYourAccountEnterYourUsernameInTheFieldAboveAndClickYes: string;
+    OldPassword: string;
+    MustBeAtLeastCharacters: string;
+    NoChangesDetectedFileAlreadyExists: string;
+    FailedToLoadProjects: string;
+    FailedToRemoveProject: string;
+    FailedToFetchProjectAccessRequests: string;
+    FailedToCancelAccessRequest: string;
+    FailedToLoadProjectData: string;
+    FailedToUnsubscribeFromProject: string;
+    FailedToLoadProjectAccessRequestsData: string;
+    FailedToFetchProjectVersions: string;
+    UnableToShareProjectWithTheFollowingUsers: string;
+    FollowingUsersHaveBeenAddedToTheProject: string;
+    UploadFinished: string;
+    FailedToGetProjectAccess: string;
+    FailedToGetProjectCollaborators: string;
+    FailedToUpdateProjectAccessForUser: string;
+    FailedToUpdateProjectAccess: string;
+    FailedToUpdateProjectCollaborator: string;
+    FailedToUpdatePublicFlag: string;
+    FailedToDisplayChangesetOfFile: string;
+    FailedToPushChanges: string;
+    Download: string;
+    Clone: string;
+    LeaveProject: string;
+    ThisIsAPrivateProject: string;
+    YouDontHavePermissionsToAccessThisProject: string;
+    RequestAccess: string;
+    ProjectNotFound: string;
+    PleaseCheckFfAddressIsWrittenCorrectly: string;
+    YouAlreadyRequestedAccess: string;
+    Files: string;
+    History: string;
+    Collaborators: string;
+    Settings: string;
+    AccessHasBeenRequested: string;
+    FailedToRequest: string;
+    AreYouSureToLeaveTheProject: string;
+    YouWillNotHaveAccessToItAnymore: string;
+    NewestVersions: string;
+    OldestVersions: string;
+    CreateProject: string;
+    SearchProjectsByName: string;
+    NamespaceNotFound: string;
+    PleaseCheckIfAddressIsWrittenCorrectly: string;
+    PublicProjects: string;
+    MyProjects: string;
+    SortByNameAZ: string;
+    SortByNameZA: string;
+    SortByLastUpdated: string;
+    SortByLastModified: string;
+    SortByFilesSize: string;
+    SortByFileSize: string;
+    NewProject: string;
+    ThisIsPublicProject: string;
+    ThisIsPrivateProject: string;
+    HideThisProjectFromEveryone: string;
+    MakeThisProjectVisibleToAnyone: string;
+    MakePrivate: string;
+    MakePublic: string;
+    DeleteProject: string;
+    AllDataWillBeLost: string;
+    AreYouSureToDeleteProject: string;
+    AllFilesWillBeLostTypeInProjectNameToConfirm: string;
+    Delete: string;
+    ProjectName: string;
+    ConfirmDeleteProject: string;
+    DoYouReallyWantToMakeThisProject: string;
+    Private: string;
+    Public: string;
+    Public2: string;
+    OnceYouMakeYourProjectPrivateItCanNotBeAccessedByTheCommunity: string;
+    OnceYouMakeYourProjectPublicItCanBeAccessedByTheCommunity: string;
+    PrivateProject: string;
+    PublicProject: string;
+    Requests: string;
+    SearchMembers: string;
+    Share: string;
+    NoChangesetForCurrentLayer: string;
+    ChangesCannotBeCalculated: string;
+    ForDetailsPleaseCheckThe: string;
+    Documentation: string;
+    Documentation2: string;
+    SearchFiles: string;
+    UploadFiles: string;
+    Recommended: string;
+    MerginMapsPluginForQGIS: string;
+    ThisIsTheEasiestAndRecommendedWay: string;
+    LearnHowToUseIt: string;
+    Version: string;
+    Author: string;
+    ProjectSize: string;
+    Created: string;
+    UserAgent: string;
+    FailedToFetchProjectVersion: string;
+    UploadingDataToProjects: string;
+    DataSync: string;
+    UpdateChanges: string;
+    OperationCanceledByTheUser: string;
+    ProjectUpdated: string;
+    AreYouReallySureYouWantToContinue: string;
+    ChangesFromOtherUsersMayGetLostWhenUploadingDataFromBrowserItIsHighlyRecommendedToUseMerginMapsQGISPluginInstead: string;
+    Update: string;
+    ConfirmContinueUpload: string;
+    Versions: string;
+    NoVersionsFound: string;
+    FilesAdded: string;
+    FilesEdited: string;
+    FilesRemoved: string;
+    Size: string;
+    ShowAdvanced: string;
+    DetailsNotAvailable: string;
+    WeCouldntFindAnyProjectsMatchingYourSearchCriteria: string;
+    YouDontHaveAnyProjectsYet: string;
+    LetsStartByCreatingAFirstOne: string;
+    CreateNewProject: string;
+    FailedToFetchListOfProjects: string;
+    FailedToFindAQGISProjectFile: string;
+    ConflictingFileInProject: string;
+    Updated: string;
+    ProjectPermission: string;
+    LearnMoreAboutPermissionSystem: string;
+    ShareWith: string;
+    SearchUsersByUsernameOrEmail: string;
+    NoMatchesFoundTryUsingTheirEmailsInstead: string;
+    NotTheRightPersonTryTypingTheirRmailInstead: string;
+    NoMembersFound: string;
+    Members: string;
+    Me: string;
+    EmailAddress: string;
+    ProjectPermissions: string;
+    Remove: string;
+    AGoodCandidateForAProjectNameIsNameOfTheLocationOrPurposeOfTheFieldSurvey: string;
+    AccessRequests: string;
+    User: string;
+    RequestedAnAccessToYourProject: string;
+    Expired: string;
+    ExpiringIn: string;
+    Disallow: string;
+    Accept: string;
+    NoAccessRequestsFound: string;
+    FailedToAcceptAccessRequest: string;
+    NoFilesFound: string;
+    Name: string;
+    Modified: string;
+    File: string;
+    New: string;
+    DeleteFile: string;
+    NewFile: string;
+    DeletedFile: string;
+    ModifiedFile: string;
+    FirstPageLinkPrevPageLinkPageLinksNextPageLinkLastPageLink: string;
+    Layer: string;
+    Inserts: string;
+    Updates: string;
+    Deletes: string;
+    DragAndDropFiles: string;
+    YouCanDropFilesFromYourComputerToStartUploading: string;
+    YouCannotUpdateFilesDuringUpload: string;
+    DropOnlyFilesOrFolders: string;
+    BrowseCommunityProjects: string;
+    CommunityProjects: string;
+    ExploreVariousTemplateProjectsWithinOurCommunity: string;
+    CloneProject: string;
+    YouRequestedAnAccessToProject: string;
+    InWorkspace: string;
+    AdminPanel: string;
+    Dashboard: string;
+    Projects: string;
+    YourProfile: string;
+    SignOut: string;
+    CommunityChat: string;
+    FailedToInitApplication: string;
+    FailedToFetchPingData: string;
+    FailedToFetchConfigData: string;
+    TheServiceIsCurrentlyInReadOnlyModeForMaintenanceUploadAndUpdateFunctionsAreNotAvailableAtThisTimePleaseTryAgainLater: string;
+    Action: string;
+    Ok: string;
+    RecentActiveProjects: string;
+    DownloadMerginMapsToYourPhone: string;
+    CaptureGeoInfoEasilyThroughYourMobileTabletWithOurMobileApp: string;
+    CloseSection: string;
+    Reader: string;
+    Editor: string;
+    Writer: string;
+    Owner: string;
+    CanViewProjectFiles: string;
+    CanCollectFeaturesInProject: string;
+    CanEditProjectFiles: string;
+    CanShareAndRemoveProject: string;
+    Year: string;
+    Years: string;
+    Month: string;
+    Months: string;
+    Week: string;
+    Weeks: string;
+    Day: string;
+    Days: string;
+    Hour: string;
+    Hours: string;
+    Minute: string;
+    Minutes: string;
+    Ago: string;
+    TipFromMerginMaps: string;
+    YourStorageIsAlmostFull: string;
+    SoonYouWillNotBeAbleToSyncYourProjects: string;
+    PasswordMustBeAtLeastCharactersLong: string;
+    PasswordMustContainAtLeastCharacterCategoriesAmongTheFollowing: string;
+    LowercaseCharactersAZ: string;
+    UppercaseCharactersAZ: string;
+    Digits09: string;
+    SpecialCharacters: string;
+    NoDataAvailable: string;
+    StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork: string;
+    FailedToCloneProject: string;
+    ShareProject: string;
+    FailedToCreateProject: string;
+    FailedToSaveProjectSettings: string;
+    FailedToFetchUserProfile: string;
+    UnableToPermanentlyRemoveAccount: string;
+    FailedToFetchProjects: string;
+    FailedToRestoreProject: string;
+    ProjectRemovedSuccessfully: string;
+    UnableToRemoveProject: string;
+    CheckForUpdates: string;
+    LetMerginMapsAutomaticallyCheckForNewUpdates: string;
+    ServerUsageReport: string;
+    DownloadUsageStatisticsForYourServerDeployment: string;
+    DownloadReport: string;
+    Click: string;
+    Here: string;
+    ForMoreInformation: string;
+    CollectStatistics: string;
+    HelpUsImproveMerginMapsBySharingUsageInformationMerginMapsCollectsAnonymousUsageInformationToMakeTheServiceBetterOvertime: string;
+    ProjectDetails: string;
+    OpenInDashboard: string;
+    DiskUsage: string;
+    ProjectVersion: string;
+    TheProjectWillBeVisibleToEveryoneIfItIsMarkedAsPublic: string;
+    DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndone: string;
+    AreYouSureYouWantToPermanentlyDeleteThisProject: string;
+    DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndoneTypeInProjectNameToConfirm: string;
+    DeletePermanently: string;
+    Overview: string;
+    Contributors: string;
+    UsedStorage: string;
+    RegisteredAccounts: string;
+    ManageUsers: string;
+    ManageProjects: string;
+    Workspaces: string;
+    ManageWorkspaces: string;
+    EmailVerificationStatus: string;
+    GrantAdminAccess: string;
+    RevokeAdminAccess: string;
+    DeactivateAccount: string;
+    ActivateAccount: string;
+    DeleteAccount: string;
+    UserHasEnabledReceivingNotifications: string;
+    UserHasDisabledNotifications: string;
+    AccessToAdminPanel: string;
+    UserHasAccessToTheAdminPanel: string;
+    UserDoesNotHaveAccessToTheAdminPanel: string;
+    AccountActivation: string;
+    TheUsersAccountIsCurrentlyActiveDeactivationWillLeadToATemporaryBanFromMerginMapsUsage: string;
+    TheUsersAccountIsCurrentlyInactiveActivatingItWillAllowAccessToMerginMaps: string;
+    DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndone: string;
+    Deactivate: string;
+    DoYouReallyWantDeactivateThisAccount: string;
+    DeactivatingThisAccountWillLeadToATemporaryBanFromMerginMapsUsage: string;
+    DoYouReallyWantActivateThisAccount: string;
+    Activate: string;
+    UserActivation: string;
+    AreYouSureYouWantToPermanentlyDeleteThisAccount: string;
+    DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndoneTypeInUsernameToConfirm: string;
+    DeleteUser: string;
+    AreYouSureToGrantAccessToAdminPanelToThisUser: string;
+    ThisPersonWillHaveFullManagementAccessToAllDataOnTheServerTheyWillSeeAllUsersAndProjectsAndCanUpdateOrRemoveThem: string;
+    GrantAccess: string;
+    AreYouSureYouWantToRevokeAccessToAdminPanelToThisUser: string;
+    ThisPersonWillNoLongerHaveAccessToTheAdminPanel: string;
+    RevokeAccess: string;
+    AdminAccess: string;
+    ServerIsNotProperlyConfigured: string;
+    YourServerIsNotConfiguredProperlyForUseInTheProductionEnvironmentReadMoreInThe: string;
+    HowToProperlySetUpTheDeployment: string;
+    Dismiss: string;
+    Period: string;
+    CustomRange: string;
+    SelectDateRange: string;
+    Last3months: string;
+    Last6months: string;
+    Last12months: string;
+    Create: string;
+    UserCreated: string;
+    FailedToCreateUser: string;
+    UpdateAvailable: string;
+    ANewVersionOfMerginMapsIsAvailableForUsersLetsExploreItsNewFeatures: string;
+    SearchByWorkspaceNameOrProjectName: string;
+    SearchProjects: string;
+    ScheduledForRemovalAt: string;
+    Restore: string;
+    Workspace: string;
+    LastUpdate: string;
+    ScheduledRemovalAt: string;
+    RemovedBy: string;
+    AreYouSureToRestoreProject: string;
+    RestoreProject: string;
+    SearchAccounts: string;
+    Active: string;
+    CreateUser: string;
+    Accounts: string;
+    TypeYourEmail: string;
+    AddUser: string;
+    Added: string;
+    Removed: string;
+    AddedL: string;
+    UpdatedL: string;
+    RemovedL: string;
+    EnterPassword: string;
+    year: string;
+    years: string;
+    month: string;
+    months: string;
+    week: string;
+    weeks: string;
+    day: string;
+    days: string;
+    hour: string;
+    hours: string;
+    minute: string;
+    minutes: string;
+    ago: string;
+    expired: string;
+    InvalidEmailAddress: string;
+};
+export default translations;
diff --git a/web-app/packages/lang/translations/EN.ts b/web-app/packages/lang/translations/EN.ts
new file mode 100644
index 00000000..ad511f15
--- /dev/null
+++ b/web-app/packages/lang/translations/EN.ts
@@ -0,0 +1,412 @@
+const translations = {
+  ProfileHasBeenChanged: 'Profile has been changed',
+  FailedToChangeProfile: 'Failed to change profile',
+  FailedToFetchUsersProfile: "Failed to fetch user's profile",
+  UnableToCloseAccount: 'Unable to close account',
+  FailedToLogin: 'Failed to login',
+  FailedTologin: 'Failed to login',
+  EmailWithPasswordResetLinkWasSentToYourEmailAddress: 'Email with password reset link was sent to your email address',
+  FailedToSendConfirmationEmail: 'Failed to send confirmation email',
+  FailedToChangePassword: 'Failed to change password',
+  EmailWasSentToAddress: 'Email was sent to address',
+  FailedToSendConfirmationEmailPleaseCheckYourAddressInUserProfileSettings: 'Failed to send confirmation email, please check your address in user profile settings',
+  PasswordHasBeenChanged: 'Password has been changed',
+  FailedToLoadWorkspace: 'Failed to load workspace',
+  FailedToLoadWorkspaces: 'Failed to load workspaces',
+  LoadingOfStoredUserWorkspaceIdHasFailed: 'Loading of stored user workspace id has failed.',
+  EmailConfirmation: 'Email confirmation',
+  YourEmailAddressHasBeenVerified: 'Your email address has been verified.',
+  InvalidToken: 'Invalid token',
+  Continue: 'Continue',
+  AccountDetails: 'Account details',
+  LastSignedIn: 'Last signed in',
+  EditAccount: 'Edit account',
+  ChangePassword: 'Change password',
+  PleaseVerifyYourEmail: 'Please verify your email',
+  WeSentYouAVerificationEmailToTheAccountYouProvidedDuringSignup: 'We sent you a verification email to the account you provided during signup.',
+  SendConfirmationEmail: 'Send confirmation email',
+  FullName: 'Full name',
+  Registered: 'Registered',
+  Advanced: 'Advanced',
+  ReceiveNotifications: 'Receive notifications',
+  WeWillSendYouInformationAboutWorkspaceActivity: 'We will send you information about workspace activity',
+  CloseAccount: 'Close account',
+  YourAccountWillBeClosedInCaseYouAreAnOwnerOfAWorkspaceYouMightNeedToTransferTheOwnershipFirstOrCloseTheWorkspace: 'Your account will be closed. In case you are an owner of a workspace, you might need to transfer the ownership first or close the workspace.',
+  ResetPassword: 'Reset password',
+  SignIn: 'Sign in',
+  Email: 'Email',
+  BackToLogin: 'Back to login',
+  UsernameOrEmail: 'Username or email',
+  PleaseEnterUsernameOrEmail: 'Please enter username or email',
+  Password: 'Password',
+  PleaseEnterYourPassword: 'Please enter your password',
+  ForgotPassword: 'Forgot password?',
+  NewPassword: 'New Password',
+  PasswordMustBeAtLeastCharactersLongAndIncludeAtLeastThreeOfTheFollowingLowercaseLettersUppercaseLettersNumbersOrSpecialCharacters: 'Password must be at least 8 characters long and include at least three of the following: lowercase letters, uppercase letters, numbers or special characters.',
+  ConfirmPassword: 'Confirm password',
+  PleaseEnterYourNewPassword: 'Please enter your new password',
+  Change: 'Change',
+  YourPasswordWasChangedYouCanNow: 'Your password was changed. You can now',
+  YouRequestedAccessToTheseProjects: 'You requested access to these projects',
+  FirstName: 'First name',
+  LastName: 'Last name',
+  Cancel: 'Cancel',
+  SaveChanges: 'Save changes',
+  PleaseNote: 'Please note',
+  DoYouReallyWishToCloseYourAccount: 'Do you really wish to close your account?',
+  ThisActionWillDeleteYourMerginMapsAccountIfYouAreAWorkspaceOwnerYouNeedToTransferTheOwnershipToSomebodyElseOrCloseTheWorkspace: 'This action will delete your Mergin Maps account. If you are a workspace owner, you need to transfer the ownership to somebody else or close the workspace.',
+  No: 'No',
+  Yes: 'Yes',
+  Username: 'Username',
+  InOrderToDeleteYourAccountEnterYourUsernameInTheFieldAboveAndClickYes: 'In order to delete your account, enter your username in the field above and click Yes.',
+  OldPassword: 'Old password',
+  MustBeAtLeastCharacters: 'Must be at least 8 characters',
+  NoChangesDetectedFileAlreadyExists: 'No changes detected. File already exists?',
+  FailedToLoadProjects: 'Failed to load projects',
+  FailedToRemoveProject: 'Failed to remove project',
+  FailedToFetchProjectAccessRequests: 'Failed to fetch project access requests',
+  FailedToCancelAccessRequest: 'Failed to cancel access request',
+  FailedToLoadProjectData: 'Failed to load project data',
+  FailedToUnsubscribeFromProject: 'Failed to unsubscribe from project',
+  FailedToLoadProjectAccessRequestsData: 'Failed to load project access requests data',
+  FailedToFetchProjectVersions: 'Failed to fetch project versions',
+  UnableToShareProjectWithTheFollowingUsers: 'Unable to share project with the following users',
+  FollowingUsersHaveBeenAddedToTheProject: 'Following users have been added to the project',
+  UploadFinished: 'Upload finished',
+  FailedToGetProjectAccess: 'Failed to get project access',
+  FailedToGetProjectCollaborators: 'Failed to get project collaborators',
+  FailedToUpdateProjectAccessForUser: 'Failed to update project access for user',
+  FailedToUpdateProjectAccess: 'Failed to update project access',
+  FailedToUpdateProjectCollaborator: 'Failed to update project collaborator',
+  FailedToUpdatePublicFlag: 'Failed to update public flag',
+  FailedToDisplayChangesetOfFile: 'Failed to display changeset of file',
+  FailedToPushChanges: 'Failed to push changes',
+  Download: 'Download',
+  Clone: 'Clone',
+  LeaveProject: 'Leave project',
+  ThisIsAPrivateProject: 'This is a private project',
+  YouDontHavePermissionsToAccessThisProject: "You don't have permissions to access this project.",
+  RequestAccess: 'Request access',
+  ProjectNotFound: 'Project not found',
+  PleaseCheckFfAddressIsWrittenCorrectly: 'Please check if address is written correctly',
+  YouAlreadyRequestedAccess: 'You already requested access',
+  Files: 'Files',
+  History: 'History',
+  Collaborators: 'Collaborators',
+  Settings: 'Settings',
+  AccessHasBeenRequested: 'Access has been requested',
+  FailedToRequest: 'Failed to request',
+  AreYouSureToLeaveTheProject: 'Are you sure to leave the project',
+  YouWillNotHaveAccessToItAnymore: 'You will not have access to it anymore.',
+  NewestVersions: 'Newest versions',
+  OldestVersions: 'Oldest versions',
+  CreateProject: 'Create project',
+  SearchProjectsByName: 'Search projects by name',
+  NamespaceNotFound: 'Namespace not found',
+  PleaseCheckIfAddressIsWrittenCorrectly: 'Please check if address is written correctly',
+  PublicProjects: 'Public projects',
+  MyProjects: 'My projects',
+  SortByNameAZ: 'Sort by name A-Z',
+  SortByNameZA: 'Sort by name Z-A',
+  SortByLastUpdated: 'Sort by last updated',
+  SortByLastModified: 'Sort by last modified',
+  SortByFilesSize: 'Sort by files size',
+  SortByFileSize: 'Sort by file size',
+  NewProject: 'New project',
+  ThisIsPublicProject: 'This is public project',
+  ThisIsPrivateProject: 'This is private project',
+  HideThisProjectFromEveryone: 'Hide this project from everyone',
+  MakeThisProjectVisibleToAnyone: 'Make this project visible to anyone.',
+  MakePrivate: 'Make private',
+  MakePublic: 'Make public',
+  DeleteProject: 'Delete project',
+  AllDataWillBeLost: 'All data will be lost',
+  AreYouSureToDeleteProject: 'Are you sure to delete project?',
+  AllFilesWillBeLostTypeInProjectNameToConfirm: 'All files will be lost. Type in project name to confirm:',
+  Delete: 'Delete',
+  ProjectName: 'Project name',
+  ConfirmDeleteProject: 'Confirm delete project',
+  DoYouReallyWantToMakeThisProject: 'Do you really want to make this project',
+  Private: 'private',
+  Public: 'public',
+  Public2: 'public',
+  OnceYouMakeYourProjectPrivateItCanNotBeAccessedByTheCommunity: 'Once you make your project private it can not be accessed by the community.',
+  OnceYouMakeYourProjectPublicItCanBeAccessedByTheCommunity: 'Once you make your project public it can be accessed by the community.',
+  PrivateProject: 'Private project',
+  PublicProject: 'Public project',
+  Requests: 'Requests',
+  SearchMembers: 'Search members',
+  Share: 'Share',
+  NoChangesetForCurrentLayer: 'No changeset for current layer',
+  ChangesCannotBeCalculated: 'Changes cannot be calculated',
+  ForDetailsPleaseCheckThe: 'For details please check the',
+  Documentation: 'documentation',
+  Documentation2: 'documentation',
+  SearchFiles: 'Search files',
+  UploadFiles: 'Upload files',
+  Recommended: 'Recommended',
+  MerginMapsPluginForQGIS: 'Mergin Maps plugin for QGIS',
+  ThisIsTheEasiestAndRecommendedWay: 'This is the easiest and recommended way.',
+  LearnHowToUseIt: 'Learn how to use it.',
+  Version: 'Version',
+  Author: 'Author',
+  ProjectSize: 'Project size',
+  Created: 'Created',
+  UserAgent: 'User agent',
+  FailedToFetchProjectVersion: 'Failed to fetch project version',
+  UploadingDataToProjects: 'Uploading data to projects',
+  DataSync: 'Data Sync',
+  UpdateChanges: 'Update Changeso',
+  OperationCanceledByTheUser: 'Operation canceled by the user.',
+  ProjectUpdated: 'Project updated',
+  AreYouReallySureYouWantToContinue: 'Are you really sure you want to continue?',
+  ChangesFromOtherUsersMayGetLostWhenUploadingDataFromBrowserItIsHighlyRecommendedToUseMerginMapsQGISPluginInstead: 'Changes from other users may get lost when uploading data from browser. It is highly recommended to use Mergin Maps QGIS plugin instead.',
+  Update: 'Update',
+  ConfirmContinueUpload: 'Confirm continue upload',
+  CoverForConfirmDialog: 'Cover for confirm dialog',
+  Versions: 'Versions',
+  NoVersionsFound: 'No versions found.',
+  FilesAdded: 'Files added',
+  FilesEdited: 'Files edited',
+  FilesRemoved: 'Files removed',
+  Size: 'Size',
+  ShowAdvanced: 'Show advanced',
+  DetailsNotAvailable: 'Details not available:',
+  FileTooLargeToPreviewDownloadToViewInstead: 'File too large to preview — download to view instead.',
+  ReadOurBlogForMoreDetails: 'Read our blog for more details',
+  TheProjectIsTooLargeToDownloadPleaseUseDirectDownloadWithOurPythonAPIClientOrQGISPluginInstead: 'The project is too large to download. Please use direct download with our Python API Client or QGIS plugin instead.',
+  TypeInProjectNameToConfirmDeletion: 'Type in project name to confirm deletion',
+  TypeInValueToConfirm: 'Type in value to confirm',
+  WeCouldntFindAnyProjectsMatchingYourSearchCriteria: "We couldn't find any projects matching your search criteria.",
+  YouDontHaveAnyProjectsYet: "You don't have any projects yet.",
+  LetsStartByCreatingAFirstOne: 'Let’s start by creating a first one!',
+  CreateNewProject: 'Create new project',
+  FailedToFetchListOfProjects: 'Failed to fetch list of projects',
+  FailedToFindAQGISProjectFile: 'Failed to find a QGIS project file',
+  ConflictingFileInProject: 'Conflicting file in project',
+  Updated: 'Updated',
+  ProjectPermission: 'Project permission',
+  LearnMoreAboutPermissionSystem: 'Learn more about permission system',
+  ShareWith: 'Share with',
+  SearchUsersByUsernameOrEmail: 'Search users by username or email',
+  NoMatchesFoundTryUsingTheirEmailsInstead: 'No matches found - Try using their emails instead',
+  NotTheRightPersonTryTypingTheirRmailInstead: 'Not the right person? Try typing their email instead',
+  NoMembersFound: 'No members found.',
+  Members: 'Members',
+  Me: '(me)',
+  EmailAddress: 'Email address',
+  ProjectPermissions: 'Project permissions',
+  Remove: 'Remove',
+  AGoodCandidateForAProjectNameIsNameOfTheLocationOrPurposeOfTheFieldSurvey: 'A good candidate for a project name is name of the location or purpose of the field survey.',
+  AccessRequests: 'Access requests',
+  User: 'User',
+  RequestedAnAccessToYourProject: 'requested an access to your project',
+  Expired: 'Expired',
+  ExpiringIn: 'Expiring in',
+  Disallow: 'Disallow',
+  Accept: 'Accept',
+  NoAccessRequestsFound: 'No access requests found',
+  FailedToAcceptAccessRequest: 'Failed to accept access request',
+  NoFilesFound: 'No files found.',
+  Name: 'Name',
+  Modified: 'Modified',
+  File: 'File',
+  New: 'new:',
+  DeleteFile: 'Delete file',
+  NewFile: 'New file',
+  DeletedFile: 'Deleted file',
+  ModifiedFile: 'Modified file',
+  FirstPageLinkPrevPageLinkPageLinksNextPageLinkLastPageLink: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+  Layer: 'Layer',
+  Inserts: 'Inserts',
+  Updates: 'Updates',
+  Deletes: 'Deletes',
+  DragAndDropFiles: 'Drag and drop files',
+  YouCanDropFilesFromYourComputerToStartUploading: 'You can drop files from your computer to start uploading',
+  YouCannotUpdateFilesDuringUpload: 'You cannot update files during upload',
+  DropOnlyFilesOrFolders: 'Drop only files or folders',
+  BrowseCommunityProjects: 'Browse community projects',
+  CommunityProjects: 'Community projects',
+  ExploreVariousTemplateProjectsWithinOurCommunity: 'Explore various template projects within our community.',
+  CloneProject: 'Clone project',
+  YouRequestedAnAccessToProject: 'You requested an access to project',
+  InWorkspace: 'in workspace',
+  AdminPanel: 'Admin Panel',
+  MerginMapsAdminPanel: 'Mergin Maps Admin Panel',
+  Dashboard: 'Dashboard',
+  Projects: 'Projects',
+  YourProfile: 'Your profile',
+  SignOut: 'Sign out',
+  CommunityChat: 'Community chat',
+  FailedToInitApplication: 'Failed to init application.',
+  FailedToFetchPingData: 'Failed to fetch ping data.',
+  FailedToFetchConfigData: 'Failed to fetch config data.',
+  TheServiceIsCurrentlyInReadOnlyModeForMaintenanceUploadAndUpdateFunctionsAreNotAvailableAtThisTimePleaseTryAgainLater: 'The service is currently in read-only mode for maintenance. Upload and update functions are not available at this time. Please try again later.',
+  Action: 'Action',
+  Ok: 'Ok',
+  BackToDashboard: 'Back to Dashboard',
+  Bulb: 'Bulb',
+  Exclamation: 'Exclamation',
+  Member: 'Member',
+  NoWorkspace: 'no workspace',
+  OoopsItSeemsTheGPSHasLostItsWay: 'Ooops, it seems the GPS has lost its way.',
+  ThisPageDoesNotExistCheckYourUrlForMistakesPlease: 'This page does not exist, check your url for mistakes, please.',
+  RecentActiveProjects: 'Recent active projects',
+  DownloadMerginMapsToYourPhone: 'Download Mergin Maps to your phone',
+  CaptureGeoInfoEasilyThroughYourMobileTabletWithOurMobileApp: 'Capture geo-info easily through your mobile/tablet with our mobile app.',
+  CloseSection: 'Close section',
+  Reader: 'Reader',
+  Editor: 'Editor',
+  Writer: 'Writer',
+  Owner: 'Owner',
+  CanViewProjectFiles: 'Can view project files',
+  CanCollectFeaturesInProject: 'Can collect features in project',
+  CanEditProjectFiles: 'Can edit project files',
+  CanShareAndRemoveProject: 'Can share and remove project',
+  Year: 'year',
+  Years: 'years',
+  Month: 'month',
+  Months: 'months',
+  Week: 'week',
+  Weeks: 'weeks',
+  Day: 'day',
+  Days: 'days',
+  Hour: 'hour',
+  Hours: 'hours',
+  Minute: 'minute',
+  Minutes: 'minutes',
+  Ago: 'ago',
+  TipFromMerginMaps: 'Tip from Mergin Maps',
+  YourStorageIsAlmostFull: 'Your storage is almost full',
+  SoonYouWillNotBeAbleToSyncYourProjects: 'Soon you will not be able to sync your projects.',
+  PasswordMustBeAtLeastCharactersLong: 'Password must be at least 8 characters long.',
+  PasswordMustContainAtLeastCharacterCategoriesAmongTheFollowing: 'Password must contain at least 3 character categories among the following:',
+  LowercaseCharactersAZ: 'Lowercase characters (a-z)',
+  UppercaseCharactersAZ: 'Uppercase characters (A-Z)',
+  Digits09: 'Digits (0-9)',
+  SpecialCharacters: 'Special characters',
+  NoDataAvailable: 'No data available',
+  StoreAndTrackChangesToYourGeoDataMerginMapsIsARepositoryOfGeoDataForCollaborativeWork: 'Store and track changes to your geo-data. Mergin Maps is a repository of geo-data for collaborative work.',
+  FailedToCloneProject: 'Failed to clone project',
+  ShareProject: 'Share project',
+  FailedToCreateProject: 'Failed to create project.',
+  FailedToSaveProjectSettings: 'Failed to save project settings',
+  FailedToFetchUserProfile: 'Failed to fetch user profile',
+  UnableToPermanentlyRemoveAccount: 'Unable to permanently remove account',
+  FailedToFetchProjects: 'Failed to fetch projects',
+  FailedToRestoreProject: 'Failed to restore project',
+  ProjectRemovedSuccessfully: 'Project removed successfully',
+  UnableToRemoveProject: 'Unable to remove project',
+  CheckForUpdates: 'Check for updates',
+  LetMerginMapsAutomaticallyCheckForNewUpdates: 'Let Mergin Maps automatically check for new updates',
+  ServerUsageReport: 'Server usage report',
+  DownloadUsageStatisticsForYourServerDeployment: 'Download usage statistics for your server deployment.',
+  DownloadReport: 'Download report',
+  Click: 'Click',
+  Here: 'here',
+  ForMoreInformation: 'for more information.',
+  CollectStatistics: 'Collect statistics',
+  HelpUsImproveMerginMapsBySharingUsageInformationMerginMapsCollectsAnonymousUsageInformationToMakeTheServiceBetterOvertime: 'Help us improve Mergin Maps by sharing usage information. Mergin Maps collects anonymous usage information to make the service better overtime.',
+  ProjectDetails: 'Project details',
+  OpenInDashboard: 'Open in dashboard',
+  DiskUsage: 'Disk usage',
+  ProjectVersion: 'Project version',
+  TheProjectWillBeVisibleToEveryoneIfItIsMarkedAsPublic: 'The project will be visible to everyone if it is marked as public.',
+  DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndone: 'Deleting this project will remove it and all its data. This action cannot be undone.',
+  AreYouSureYouWantToPermanentlyDeleteThisProject: 'Are you sure you want to permanently delete this project?',
+  DeletingThisProjectWillRemoveItAndAllItsDataThisActionCannotBeUndoneTypeInProjectNameToConfirm: 'Deleting this project will remove it and all its data. This action cannot be undone. Type in project name to confirm:',
+  DeletePermanently: 'Delete permanently',
+  Overview: 'Overview',
+  Contributors: 'Contributors',
+  UsedStorage: 'Used storage',
+  RegisteredAccounts: 'Registered accounts',
+  ManageUsers: 'Manage users',
+  ManageProjects: 'Manage projects',
+  Workspaces: 'Workspaces',
+  ManageWorkspaces: 'Manage workspaces',
+  EmailVerificationStatus: 'Email verification status',
+  GrantAdminAccess: 'Grant admin access',
+  RevokeAdminAccess: 'Revoke admin access',
+  DeactivateAccount: 'Deactivate account',
+  ActivateAccount: 'Activate account',
+  DeleteAccount: 'Delete account',
+  UserHasEnabledReceivingNotifications: 'User has enabled receiving notifications',
+  UserHasDisabledNotifications: 'User has disabled notifications.',
+  AccessToAdminPanel: 'Access to admin panel',
+  UserHasAccessToTheAdminPanel: 'User has access to the admin panel.',
+  UserDoesNotHaveAccessToTheAdminPanel: 'User does not have access to the admin panel.',
+  AccountActivation: 'Account activation',
+  TheUsersAccountIsCurrentlyActiveDeactivationWillLeadToATemporaryBanFromMerginMapsUsage: "The user's account is currently active. Deactivation will lead to a temporary ban from Mergin Maps usage.",
+  TheUsersAccountIsCurrentlyInactiveActivatingItWillAllowAccessToMerginMaps: "The user's account is currently inactive. Activating it will allow access to Mergin Maps.",
+  DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndone: 'Deleting this user will remove them and all their data. This action cannot be undone.',
+  Deactivate: 'Deactivate',
+  DoYouReallyWantDeactivateThisAccount: 'Do you really want deactivate this account?',
+  DeactivatingThisAccountWillLeadToATemporaryBanFromMerginMapsUsage: 'Deactivating this account will lead to a temporary ban from Mergin Maps usage.',
+  DoYouReallyWantActivateThisAccount: 'Do you really want activate this account?',
+  Activate: 'Activate',
+  UserActivation: 'User activation',
+  AreYouSureYouWantToPermanentlyDeleteThisAccount: 'Are you sure you want to permanently delete this account?',
+  DeletingThisUserWillRemoveThemAndAllTheirDataThisActionCannotBeUndoneTypeInUsernameToConfirm: 'Deleting this user will remove them and all their data. This action cannot be undone. Type in username to confirm:',
+  DeleteUser: 'Delete user',
+  AreYouSureToGrantAccessToAdminPanelToThisUser: 'Are you sure to grant access to admin panel to this user?',
+  ThisPersonWillHaveFullManagementAccessToAllDataOnTheServerTheyWillSeeAllUsersAndProjectsAndCanUpdateOrRemoveThem: 'This person will have full management access to all data on the server. They will see all users and projects and can update or remove them.',
+  GrantAccess: 'Grant access',
+  AreYouSureYouWantToRevokeAccessToAdminPanelToThisUser: 'Are you sure you want to revoke access to admin panel to this user?',
+  ThisPersonWillNoLongerHaveAccessToTheAdminPanel: 'This person will no longer have access to the admin panel.',
+  RevokeAccess: 'Revoke access',
+  AdminAccess: 'Admin access',
+  ServerIsNotProperlyConfigured: 'Server is not properly configured',
+  YourServerIsNotConfiguredProperlyForUseInTheProductionEnvironmentReadMoreInThe: 'Your server is not configured properly for use in the production environment. Read more in the',
+  HowToProperlySetUpTheDeployment: 'how to properly set up the deployment.',
+  Dismiss: 'Dismiss',
+  Period: 'Period',
+  CustomRange: 'Custom range',
+  SelectDateRange: 'Select date range',
+  Last3months: 'Last 3 months',
+  Last6months: 'Last 6 months',
+  Last12months: 'Last 12 months',
+  Create: 'Create',
+  UserCreated: 'User created',
+  FailedToCreateUser: 'Failed to create user',
+  UpdateAvailable: 'Update available 🎉!',
+  ANewVersionOfMerginMapsIsAvailableForUsersLetsExploreItsNewFeatures: "A new version of Mergin Maps is available for users. Let's explore its new features.",
+  SearchByWorkspaceNameOrProjectName: 'Search by workspace name or project name',
+  SearchProjects: 'Search projects',
+  ScheduledForRemovalAt: 'Scheduled for removal at',
+  Restore: 'Restore',
+  Workspace: 'Workspace',
+  LastUpdate: 'Last Update',
+  ScheduledRemovalAt: 'Scheduled removal at',
+  RemovedBy: 'Removed by',
+  AreYouSureToRestoreProject: 'Are you sure to restore project',
+  RestoreProject: 'Restore project',
+  SearchAccounts: 'Search accounts',
+  Active: 'Active',
+  CreateUser: 'Create user',
+  Accounts: 'Accounts',
+  TypeYourEmail: 'Type your email',
+  AddUser: 'Add user',
+  Added: 'Added',
+  Removed: 'Removed',
+  AddedL: 'added',
+  UpdatedL: 'updated',
+  RemovedL: 'removed',
+  EnterPassword: 'Enter password',
+  year: 'year',
+  years: 'years',
+  month: 'month',
+  months: 'months',
+  week: 'week',
+  weeks: 'weeks',
+  day: 'day',
+  days: 'days',
+  hour: 'hour',
+  hours: 'hours',
+  minute: 'minute',
+  minutes: 'minutes',
+  ago: 'ago',
+  expired: 'expired',
+  InvalidEmailAddress: 'Invalid email address.',
+}
+
+export default translations
diff --git a/web-app/packages/lib/package.json b/web-app/packages/lib/package.json
index 101c4cc2..bae1b101 100644
--- a/web-app/packages/lib/package.json
+++ b/web-app/packages/lib/package.json
@@ -48,6 +48,7 @@
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
     "vue": "3.5.12",
+    "vue-i18n": "11",
     "vue-router": "4.2.5"
   },
   "peerDependencies": {
diff --git a/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue b/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
index eac0d184..4fb9e257 100644
--- a/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
+++ b/web-app/packages/lib/src/common/components/AppPasswordTooltip.vue
@@ -18,17 +18,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
+import returnTranslation from '@/../../lang/translate'
+
 defineProps<{ for: string }>()
+
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 const tooltip = `
   <ul>
-    <li>Password must be at least 8 characters long.</li>
-    <li>Password must contain at least 3 character categories among the following:</li>
-      <ul>
-        <li>Lowercase characters (a-z)</li>
-        <li>Uppercase characters (A-Z)</li>
-        <li>Digits (0-9)</li>
-        <li>Special characters</li>
-      </ul>
+    <li>${t('PasswordMustBeAtLeastCharactersLong')}</li>
+    <li>${t(
+      'PasswordMustContainAtLeastCharacterCategoriesAmongTheFollowing'
+    )}</li>
+    <ul>
+      <li>${t('LowercaseCharactersAZ')}</li>
+      <li>${t('UppercaseCharactersAZ')}</li>
+      <li>${t('Digits09')}</li>
+      <li>${t('SpecialCharacters')}</li>
+    </ul>
   </ul>
 `
 </script>
diff --git a/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue b/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
index 542fdb2b..66234330 100644
--- a/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
+++ b/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
@@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </template>
         <p>
           <span class="font-semibold"
-            >Your storage is almost full ({{ usage }}%).</span
+            >{{ yourStorageIsAlmostFull }} ({{ usage }}%).</span
           >
-          Soon you will not be able to sync your projects.
+          {{ soonYouWillNotBeAbleToSyncYourProjects }}
         </p></PMessage
       >
     </slot>
@@ -25,9 +25,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer } from '@/common/components'
 import { useUserStore } from '@/main'
 
+const lang = import.meta.env.VITE_LANG
+const yourStorageIsAlmostFull = returnTranslation(
+  lang,
+  'YourStorageIsAlmostFull'
+)
+const soonYouWillNotBeAbleToSyncYourProjects = returnTranslation(
+  lang,
+  'SoonYouWillNotBeAbleToSyncYourProjects'
+)
+
 const userStore = useUserStore()
 
 const usage = computed(() =>
diff --git a/web-app/packages/lib/src/common/components/TipMessage.vue b/web-app/packages/lib/src/common/components/TipMessage.vue
index 628ca745..852dddd3 100644
--- a/web-app/packages/lib/src/common/components/TipMessage.vue
+++ b/web-app/packages/lib/src/common/components/TipMessage.vue
@@ -16,20 +16,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         width="50"
         height="50"
         src="@/assets/bulb.svg"
-        aria-label="Bulb"
+        :aria-label="t('Bulb')"
       />
       <img
         v-if="severity === 'danger'"
         width="50"
         height="50"
         src="@/assets/exclamation.svg"
-        aria-label="Exclamation"
+        :aria-label="t('Exclamation')"
       />
     </slot>
 
     <div class="md:pl-4 text-center md:text-left">
       <p :class="['tip-message-title title-t3']">
-        <slot name="title">Tip from Mergin Maps</slot>
+        <slot name="title">{{ tipFromMerginMaps }}</slot>
       </p>
       <p class="opacity-80 paragraph-p6">
         <slot name="description"></slot>
@@ -43,8 +43,16 @@ import { computed } from 'vue'
 
 import { TipMessageProps } from './types'
 
+import returnTranslation from '@/../../lang/translate'
+
 type Severity = 'info' | 'danger'
 
+const tipFromMerginMaps = returnTranslation(
+  import.meta.env.VITE_LANG,
+  'TipFromMerginMaps'
+)
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 const props = withDefaults(defineProps<TipMessageProps>(), {
   severity: 'info'
 })
diff --git a/web-app/packages/lib/src/common/date_utils.ts b/web-app/packages/lib/src/common/date_utils.ts
index 1dc40a2f..925db6db 100644
--- a/web-app/packages/lib/src/common/date_utils.ts
+++ b/web-app/packages/lib/src/common/date_utils.ts
@@ -11,6 +11,8 @@ import diffInYears from 'date-fns/differenceInYears'
 import isDate from 'date-fns/isDate'
 import isValid from 'date-fns/isValid'
 
+import returnTranslation from '@/../../lang/translate'
+
 const DurationKeys = {
   years: ['year', 'years'],
   months: ['month', 'months'],
@@ -20,6 +22,8 @@ const DurationKeys = {
   minutes: ['minute', 'minutes']
 }
 
+const lang = import.meta.env.VITE_LANG
+
 export function formatDateTime(isoString) {
   return isoString ? new Date(isoString).toUTCString() : ''
 }
@@ -29,11 +33,16 @@ export function formatDate(isoString) {
 }
 
 function formatDuration(num, unit) {
-  return `${num} ${DurationKeys[unit][num === 1 ? 0 : 1]} ago`
+  const duration = DurationKeys[unit][num === 1 ? 0 : 1]
+  return `${num} ${returnTranslation(lang, duration)} ${returnTranslation(
+    lang,
+    'ago'
+  )}`
 }
 
 function remainingFormatDuration(num, unit) {
-  return `${num} ${DurationKeys[unit][num === 1 ? 0 : 1]}`
+  const duration = DurationKeys[unit][num === 1 ? 0 : 1]
+  return `${num} ${returnTranslation(lang, duration)}`
 }
 
 function parseDate(date) {
@@ -87,12 +96,12 @@ export function formatRemainingTime(t2, t1 = new Date()) {
       return remainingFormatDuration(diffInWeeks(t2Parsed, t1Parsed), 'weeks')
     case days < 1:
       if (days < 0) {
-        return 'expired'
+        return returnTranslation(lang, 'expired')
       }
       if (hours < 1) {
         const minutes = diffInMinutes(t2Parsed, t1Parsed)
         if (minutes <= 0) {
-          return 'expired'
+          return returnTranslation(lang, 'expired')
         } else {
           return remainingFormatDuration(minutes, 'minutes')
         }
diff --git a/web-app/packages/lib/src/common/http.ts b/web-app/packages/lib/src/common/http.ts
index 20734626..232882c3 100644
--- a/web-app/packages/lib/src/common/http.ts
+++ b/web-app/packages/lib/src/common/http.ts
@@ -6,6 +6,7 @@ import axios, { AxiosInstance, AxiosResponse } from 'axios'
 import axiosRetry, { isNetworkError, isRetryableError } from 'axios-retry'
 import https from 'https'
 
+import returnTranslation from '@/../../lang/translate'
 import { CustomError } from '@/common/errors'
 
 export interface HttpService extends AxiosInstance {
@@ -58,8 +59,10 @@ export function initRequestInterceptors(
         // mimic regular response object, server will not be called
         const custError = new CustomError('reason', {
           data: {
-            detail:
-              'The service is currently in read-only mode for maintenance. Upload and update functions are not available at this time. Please try again later.'
+            detail: returnTranslation(
+              import.meta.env.VITE_LANG,
+              'TheServiceIsCurrentlyInReadOnlyModeForMaintenanceUploadAndUpdateFunctionsAreNotAvailableAtThisTimePleaseTryAgainLater'
+            )
           },
           status: 503
         })
diff --git a/web-app/packages/lib/src/common/permission_utils.ts b/web-app/packages/lib/src/common/permission_utils.ts
index 6905f90e..989bed81 100644
--- a/web-app/packages/lib/src/common/permission_utils.ts
+++ b/web-app/packages/lib/src/common/permission_utils.ts
@@ -4,6 +4,7 @@
 
 import { DropdownOption } from './components/types'
 
+import returnTranslation from '@/../../lang/translate'
 import { ProjectAccess } from '@/modules'
 
 export enum WorkspaceRole {
@@ -41,6 +42,13 @@ export type ProjectRoleName = keyof typeof ProjectRole
 
 export type ProjectPermissionName = keyof typeof ProjectPermission
 
+const PROJECT_ROLE_OPTIONS = [
+  ['reader', 'read', 'Reader', 'CanViewProjectFiles'],
+  ['editor', 'edit', 'Editor', 'CanCollectFeaturesInProject'],
+  ['writer', 'write', 'Writer', 'CanEditProjectFiles'],
+  ['owner', 'owner', 'Owner', 'CanShareAndRemoveProject']
+] as const
+
 export const USER_ROLE_NAME_BY_ROLE: Record<WorkspaceRole, WorkspaceRoleName> =
   {
     [WorkspaceRole.guest]: 'guest',
@@ -58,7 +66,6 @@ export const PROJECT_ROLE_NAME_BY_ROLE: Record<ProjectRole, ProjectRoleName> = {
   [ProjectRole.owner]: 'owner'
 }
 
-
 export function isAtLeastRole(
   roleName: WorkspaceRoleName,
   role: WorkspaceRole
@@ -93,53 +100,23 @@ export function isAtLeastGlobalRole(
 }
 
 export function getProjectRoleNameValues(): DropdownOption<ProjectRoleName>[] {
-  return [
-    {
-      value: 'reader',
-      label: 'Reader',
-      description: 'Can view project files'
-    },
-    {
-      value: 'editor',
-      label: 'Editor',
-      description: 'Can collect features in project'
-    },
-    {
-      value: 'writer',
-      label: 'Writer',
-      description: 'Can edit project files'
-    },
-    {
-      value: 'owner',
-      label: 'Owner',
-      description: 'Can share and remove project'
-    }
-  ]
+  const lang = import.meta.env.VITE_LANG
+
+  return PROJECT_ROLE_OPTIONS.map(([value, , label, description]) => ({
+    value,
+    label: returnTranslation(lang, label),
+    description: returnTranslation(lang, description)
+  }))
 }
 
 export function getProjectPermissionsValues(): DropdownOption<ProjectPermissionName>[] {
-  return [
-    {
-      value: 'read',
-      label: 'Reader',
-      description: 'Can view project files'
-    },
-    {
-      value: 'edit',
-      label: 'Editor',
-      description: 'Can collect features in project'
-    },
-    {
-      value: 'write',
-      label: 'Writer',
-      description: 'Can edit project files'
-    },
-    {
-      value: 'owner',
-      label: 'Owner',
-      description: 'Can share and remove project'
-    }
-  ]
+  const lang = import.meta.env.VITE_LANG
+
+  return PROJECT_ROLE_OPTIONS.map(([, value, label, description]) => ({
+    value,
+    label: returnTranslation(lang, label),
+    description: returnTranslation(lang, description)
+  }))
 }
 
 export function getProjectAccessKeyByRoleName(
diff --git a/web-app/packages/lib/src/modules/dashboard/components/DashboardAccessRequestsRow.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardAccessRequestsRow.vue
index eb13c380..db15c72c 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardAccessRequestsRow.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardAccessRequestsRow.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   >
     <app-section>
       <template #title
-        >Requests
+        >{{ t('Requests') }}
         <span class="text-color-medium-green"
           >({{ projectStore.accessRequestsCount }})</span
         ></template
@@ -29,10 +29,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer, AppSection } from '@/common/components'
 import { useUserStore } from '@/main'
 import { useProjectStore } from '@/modules/project/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 const projectStore = useProjectStore()
 const userStore = useUserStore()
 const workspaceId = computed(() => userStore.currentWorkspace?.id)
diff --git a/web-app/packages/lib/src/modules/dashboard/components/DashboardFooter.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardFooter.vue
index c6b087d0..c6f9e7f2 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardFooter.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardFooter.vue
@@ -30,11 +30,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
         <div class="col-12 xl:col-5 mb-2 xl:mb-0 text-center xl:text-left">
           <h2 class="text-color paragraph-p5">
-            Download Mergin Maps to your phone
+            {{ t('DownloadMerginMapsToYourPhone') }}
           </h2>
           <p class="opacity-60 paragraph-p6">
-            Capture geo-info easily through your mobile/tablet with our mobile
-            app.
+            {{
+              t('CaptureGeoInfoEasilyThroughYourMobileTabletWithOurMobileApp')
+            }}
           </p>
         </div>
 
@@ -60,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             text
             rounded
             plain
-            aria-label="Close section"
+            :aria-label="t('CloseSection')"
             @click="closeElement"
             class="text-2xl"
           />
@@ -72,9 +73,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer, AppSection } from '@/common'
 import { useLayoutStore } from '@/main'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 const elementId = ref('dashboard-footer')
 const layoutStore = useLayoutStore()
 function closeElement() {
diff --git a/web-app/packages/lib/src/modules/dashboard/components/DashboardProjectsRow.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardProjectsRow.vue
index a9d06f61..ac96dd29 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardProjectsRow.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardProjectsRow.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <!-- Projects -->
   <app-container>
     <app-section>
-      <template #title>Recent active projects</template>
+      <template #title>{{ t('RecentActiveProjects') }}</template>
       <slot>
         <projects-table-data-loader
           :show-namespace="false"
@@ -25,10 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script setup lang="ts">
 import { reactive } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer, AppSection } from '@/common'
 import ProjectsTableDataLoader from '@/modules/project/components/ProjectsTableDataLoader.vue'
 defineProps<{ canCreateProject: boolean }>()
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 const initialOptions = reactive({
   sortBy: 'updated',
   sortDesc: true,
diff --git a/web-app/packages/lib/src/modules/dashboard/routes.ts b/web-app/packages/lib/src/modules/dashboard/routes.ts
index 22b965e2..95b502dc 100644
--- a/web-app/packages/lib/src/modules/dashboard/routes.ts
+++ b/web-app/packages/lib/src/modules/dashboard/routes.ts
@@ -4,6 +4,8 @@
 
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
+
 /**
  * Enum for route names in the app's router.
  * Defines string constants for each route path used by project module.
@@ -18,9 +20,10 @@ export const getDashboardTitle = (
   extended?: { workspaceName: string }
 ) => {
   const name = route.name as DashboardRouteName
+  const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
   const titles: Record<DashboardRouteName, string | string[]> = {
     [DashboardRouteName.Dashboard]: [
-      'Dashboard',
+      t('Dashboard'),
       extended?.workspaceName
     ].filter(Boolean)
   }
diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index 634cfb47..88b81516 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -9,14 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <img
       v-if="severity === 'danger'"
       src="@/assets/trash.svg"
-      alt="Cover for confirm dialog"
+      :alt="t('CoverForConfirmDialog')"
     />
     <img
       v-else-if="severity === 'warning'"
       src="@/assets/warning-dialog.svg"
-      alt="Cover for confirm dialog"
+      :alt="t('CoverForConfirmDialog')"
     />
-    <img v-else src="@/assets/neutral.svg" alt="Cover for confirm dialog" />
+    <img v-else src="@/assets/neutral.svg" :alt="t('CoverForConfirmDialog')" />
     <span class="text-color-forest title-t1">{{ text }}</span>
     <span class="paragraph-p5 opacity-80">{{ description }}</span>
     <span v-if="hint" class="title-t2 my-2">{{ hint }}</span>
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :id="'confirmValue'"
           v-model="confirmValue"
           type="text"
-          :placeholder="confirmField.placeholder ?? 'Type in value to confirm'"
+          :placeholder="confirmField.placeholder ?? t('TypeInValueToConfirm')"
         />
       </span>
 
@@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="clone-dialog-close-btn"
-        >{{ cancelText }}</PButton
+        >{{ cancelLabel }}</PButton
       >
 
       <PButton
@@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         :severity="severity"
         class="flex w-12 lg:w-6 justify-content-center"
       >
-        {{ confirmText }}
+        {{ confirmLabel }}
       </PButton>
     </div>
   </div>
@@ -73,9 +73,12 @@ import { ref, computed, defineEmits, withDefaults } from 'vue'
 
 import { ConfirmDialogProps } from '../types'
 
+import returnTranslation from '@/../../lang/translate'
 import TipMessage from '@/common/components/TipMessage.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 const props = withDefaults(defineProps<ConfirmDialogProps>(), {
   confirmText: 'Ok',
   cancelText: 'Cancel',
@@ -90,6 +93,12 @@ const isConfirmed = computed(() => {
     ? props.confirmField.expected === confirmValue.value
     : true
 })
+const confirmLabel = computed(() =>
+  props.confirmText === 'Ok' ? t('Ok') : props.confirmText
+)
+const cancelLabel = computed(() =>
+  props.cancelText === 'Cancel' ? t('Cancel') : props.cancelText
+)
 
 const { close } = useDialogStore()
 
diff --git a/web-app/packages/lib/src/modules/dialog/store.ts b/web-app/packages/lib/src/modules/dialog/store.ts
index 8b4e15e1..090db9c2 100644
--- a/web-app/packages/lib/src/modules/dialog/store.ts
+++ b/web-app/packages/lib/src/modules/dialog/store.ts
@@ -7,6 +7,10 @@ import { Component, markRaw } from 'vue'
 
 import { DialogParams, DialogPayload } from './types'
 
+import returnTranslation from '@/../../lang/translate'
+
+const action = returnTranslation(import.meta.env.VITE_LANG, 'Action')
+
 export interface DialogState {
   isDialogOpen: boolean
   params: DialogParams
@@ -19,7 +23,7 @@ export const useDialogStore = defineStore('dialogModule', {
     params: {
       dialog: {
         maxWidth: 500,
-        header: 'Action'
+        header: action
       }
     },
     component: null
@@ -29,7 +33,7 @@ export const useDialogStore = defineStore('dialogModule', {
     dialogProps(state): DialogParams['dialog'] {
       return state.params
         ? state.params.dialog
-        : { header: 'Action', maxWidth: 500 }
+        : { header: action, maxWidth: 500 }
     }
   },
 
diff --git a/web-app/packages/lib/src/modules/instance/components/InstanceMaintenanceMessage.vue b/web-app/packages/lib/src/modules/instance/components/InstanceMaintenanceMessage.vue
index 5a94e5e0..47dd48a0 100644
--- a/web-app/packages/lib/src/modules/instance/components/InstanceMaintenanceMessage.vue
+++ b/web-app/packages/lib/src/modules/instance/components/InstanceMaintenanceMessage.vue
@@ -11,15 +11,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <i :class="[slotProps.class, 'ti ti-alert-triangle-filled']" />
       </template>
       <p>
-        The service is currently in read-only mode for maintenance. Upload and
-        update functions are not available at this time. Please try again later.
+        {{ maintenanceMessage }}
       </p></PMessage
     >
   </app-container>
 </template>
 
 <script setup lang="ts">
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer } from '@/common/components'
+
+const maintenanceMessage = returnTranslation(
+  import.meta.env.VITE_LANG,
+  'TheServiceIsCurrentlyInReadOnlyModeForMaintenanceUploadAndUpdateFunctionsAreNotAvailableAtThisTimePleaseTryAgainLater'
+)
 </script>
 
 <style scoped></style>
diff --git a/web-app/packages/lib/src/modules/instance/store.ts b/web-app/packages/lib/src/modules/instance/store.ts
index 49a9aa20..08ccee6b 100644
--- a/web-app/packages/lib/src/modules/instance/store.ts
+++ b/web-app/packages/lib/src/modules/instance/store.ts
@@ -4,6 +4,7 @@
 
 import { defineStore } from 'pinia'
 
+import returnTranslation from '@/../../lang/translate'
 import { GlobalRole } from '@/common/permission_utils'
 import { InstanceApi } from '@/modules/instance/instanceApi'
 import {
@@ -14,6 +15,8 @@ import {
 import { useNotificationStore } from '@/modules/notification/store'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export interface InstanceState {
   initData: InitResponse
   initialized: boolean
@@ -72,7 +75,7 @@ export const useInstanceStore = defineStore('instanceModule', {
         }
         return response
       } catch {
-        notificationStore.error({ text: 'Failed to init application.' })
+        notificationStore.error({ text: t('FailedToInitApplication') })
       }
     },
 
@@ -83,7 +86,7 @@ export const useInstanceStore = defineStore('instanceModule', {
         this.setPingData(response.data)
         return response
       } catch {
-        await notificationStore.error({ text: 'Failed to fetch ping data.' })
+        await notificationStore.error({ text: t('FailedToFetchPingData') })
       }
     },
 
@@ -94,7 +97,7 @@ export const useInstanceStore = defineStore('instanceModule', {
         this.setConfigData(response.data)
         return response
       } catch {
-        await notificationStore.error({ text: 'Failed to fetch config data.' })
+        await notificationStore.error({ text: t('FailedToFetchConfigData') })
       }
     }
   }
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 1d1501ef..0b8a888b 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 v-if="renderNamespace"
                 class="paragraph-p6 opacity-80 font-normal"
               >
-                {{ currentWorkspace?.name || 'no workspace' }}
+                {{ currentWorkspace?.name || t('NoWorkspace') }}
               </span>
             </div>
             <i class="ti ti-chevron-down"></i
@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             data-cy="app-header-profile-btn"
             @click="login"
             class="p-2 shadow-none"
-            label="Sign in"
+            :label="t('SignIn')"
           />
           <POverlayPanel
             v-if="loggedUser"
@@ -129,6 +129,7 @@ import { defineComponent, ref, PropType } from 'vue'
 
 import { AppBreadcrumbs } from '.'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppMenu, UserRouteName, useInstanceStore } from '@/main'
 import { useLayoutStore } from '@/modules/layout/store'
 import { useUserStore } from '@/modules/user/store'
@@ -176,7 +177,7 @@ export default defineComponent({
         ...(this.$router.hasRoute(UserRouteName.UserProfile)
           ? [
               {
-                label: 'Your profile',
+                label: this.t('YourProfile'),
                 icon: 'ti ti-user-circle',
                 command: () => {
                   this.$router.push({
@@ -187,7 +188,7 @@ export default defineComponent({
             ]
           : []),
         {
-          label: 'Sign out',
+          label: this.t('SignOut'),
           icon: 'ti ti-logout',
           command: () => {
             this.logout()
@@ -198,12 +199,12 @@ export default defineComponent({
     _helpMenuItems() {
       return [
         {
-          label: 'Documentation',
+          label: this.t('Documentation'),
           url: this.configData?.docs_url,
           target: '_blank'
         },
         {
-          label: 'Community chat',
+          label: this.t('CommunityChat'),
           url: import.meta.env.VITE_VUE_APP_JOIN_COMMUNITY_LINK,
           target: '_blank'
         },
@@ -228,6 +229,9 @@ export default defineComponent({
   methods: {
     ...mapActions(useLayoutStore, ['setDrawer']),
     ...mapActions(useUserStore, { logoutUser: 'logout' }),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     async logout() {
       try {
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
index d4ab084f..30c7f461 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               href="/admin"
               target="__blank"
               class="flex justify-content-between align-items-center title-t5 no-underline cursor-pointer"
-              >Admin Panel <i class="title-t1 ti ti-external-link"
+              >{{ t('AdminPanel') }} <i class="title-t1 ti ti-external-link"
             /></a>
           </template>
         </slot>
@@ -89,6 +89,7 @@ import { useRoute } from 'vue-router'
 
 import { SideBarItemModel } from '../types'
 
+import returnTranslation from '@/../../lang/translate'
 import defaultLogoUrl from '@/assets/mm-logo.svg'
 import { DashboardRouteName, useUserStore } from '@/main'
 import { useInstanceStore } from '@/modules/instance/store'
@@ -113,6 +114,7 @@ const logoUrl = computed(() =>
 const route = useRoute()
 const layoutStore = useLayoutStore()
 const userStore = useUserStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 const props = defineProps<{
   sidebarItems?: SideBarItemModel[]
 }>()
@@ -124,7 +126,7 @@ const initialSidebarItems = computed<SideBarItemModel[]>(() => {
         active: route.matched.some(
           (item) => item.name === DashboardRouteName.Dashboard
         ),
-        title: 'Dashboard',
+        title: t('Dashboard'),
         to: '/dashboard',
         icon: 'ti ti-home'
       },
@@ -134,7 +136,7 @@ const initialSidebarItems = computed<SideBarItemModel[]>(() => {
             item.name === ProjectRouteName.Projects ||
             item.name === ProjectRouteName.Project
         ),
-        title: 'Projects',
+        title: t('Projects'),
         to: '/projects',
         icon: 'ti ti-article'
       }
diff --git a/web-app/packages/lib/src/modules/layout/views/NotFoundView.vue b/web-app/packages/lib/src/modules/layout/views/NotFoundView.vue
index ee6ca251..0157af88 100644
--- a/web-app/packages/lib/src/modules/layout/views/NotFoundView.vue
+++ b/web-app/packages/lib/src/modules/layout/views/NotFoundView.vue
@@ -15,15 +15,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       class="not-found-view-container flex flex-column align-items-center text-center row-gap-4 p-4 lg:p-0"
     >
       <header>
-        <h1 class="headline-h1">Ooops, it seems the GPS has lost its way.</h1>
+        <h1 class="headline-h1">{{ t('OoopsItSeemsTheGPSHasLostItsWay') }}</h1>
       </header>
       <img src="@/assets/map-circle.svg" alt="Not found" />
-      This page does not exist, check your url for mistakes, please.
+      {{ t('ThisPageDoesNotExistCheckYourUrlForMistakesPlease') }}
       <PButton
         v-if="displayBackButton"
         data-cy="login-form-btn-back-dashboard"
         @click="$router.push({ name: 'dashboard' })"
-        >Back to Dashboard
+        >{{ t('BackToDashboard') }}
       </PButton>
     </div>
   </article>
@@ -33,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
@@ -42,6 +43,11 @@ export default defineComponent({
     displayBackButton() {
       return this.loggedUser
     }
+  },
+  methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    }
   }
 })
 </script>
diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 4239ea62..288757a4 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -18,7 +18,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     @page="onPage"
   >
     <template #header>
-      <h3 class="font-semibold paragraph-p6 text-color">Access requests</h3>
+      <h3 class="font-semibold paragraph-p6 text-color">
+        {{ t('AccessRequests') }}
+      </h3>
     </template>
     <template #list="slotProps">
       <template v-for="item in slotProps.items" :key="item.id">
@@ -30,15 +32,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             v-if="loggedUser.username === item.requested_by"
             class="w-12 lg:w-6 paragraph-p6"
           >
-            You requested an access to project
-            <span class="font-semibold">{{ item.project_name }}</span> in
-            workspace <span class="font-semibold">{{ item.namespace }}</span
+            {{ t('YouRequestedAnAccessToProject') }}
+            <span class="font-semibold">{{ item.project_name }}</span>
+            {{ t('InWorkspace') }}
+            <span class="font-semibold">{{ item.namespace }}</span
             >.
           </p>
           <p v-else class="w-12 lg:w-6 paragraph-p6">
-            User
+            {{ t('User') }}
             <span class="font-semibold">{{ item.requested_by }}</span>
-            requested an access to your project
+            {{ t('RequestedAnAccessToYourProject') }}
             <span class="font-semibold">{{ item.project_name }}.</span>
           </p>
           <div
@@ -48,10 +51,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               <span v-tooltip.right="{ value: $filters.datetime(item.expire) }">
                 <template
                   v-if="$filters.remainingtime(item.expire) === 'expired'"
-                  >Expired</template
+                  >{{ t('Expired') }}</template
                 >
                 <template v-else
-                  >Expiring in
+                  >{{ t('ExpiringIn') }}
                   {{ $filters.remainingtime(item.expire) }}</template
                 >
               </span>
@@ -68,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               <PButton
                 icon="ti ti-x"
                 rounded
-                aria-label="Disallow"
+                :aria-label="t('Disallow')"
                 severity="danger"
                 class="mr-2"
                 @click="cancelRequest(item)"
@@ -77,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 v-if="showAccept"
                 icon="ti ti-check"
                 rounded
-                aria-label="Accept"
+                :aria-label="t('Accept')"
                 severity="success"
                 :disabled="expired(item.expire)"
                 @click="acceptRequest(item)"
@@ -88,7 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </template>
     </template>
     <template #empty>
-      <p>No access requests found</p>
+      <p>{{ t('NoAccessRequestsFound') }}</p>
     </template>
   </PDataView>
 </template>
@@ -99,6 +102,7 @@ import { DataViewPageEvent } from 'primevue/dataview'
 import { DropdownChangeEvent } from 'primevue/dropdown'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppDropdown from '@/common/components/AppDropdown.vue'
 import { ProjectPermissionName } from '@/common/permission_utils'
 import { useUserStore } from '@/main'
@@ -161,6 +165,9 @@ export default defineComponent({
       'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     onPage(e: DataViewPageEvent) {
       this.options.page = e.page + 1
diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
index 5d6fa39a..2a8d81c0 100644
--- a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         data-cy="clone-dialog-project-name"
         class="flex-grow-1"
       />
-      <label for="name">Project name</label>
+      <label for="name">{{ t('ProjectName') }}</label>
     </span>
     <!-- Dynamic items to pass other inputs -->
     <slot name="dynamic-items"></slot>
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="clone-dialog-close-btn"
-        >Cancel</PButton
+        >{{ t('Cancel') }}</PButton
       >
 
       <PButton
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         data-cy="project-form-create-btn"
         class="flex w-12 lg:w-6 justify-content-center"
       >
-        Clone project
+        {{ t('CloneProject') }}
       </PButton>
     </div>
   </div>
@@ -50,6 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useFormStore } from '@/modules/form/store'
 import { useProjectStore } from '@/modules/project/store'
@@ -84,6 +85,9 @@ export default defineComponent({
     ...mapActions(useDialogStore, ['close']),
     ...mapActions(useFormStore, ['clearErrors', 'handleError']),
     ...mapActions(useProjectStore, ['cloneProject']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     successCloneCallback() {
       this.close()
diff --git a/web-app/packages/lib/src/modules/project/components/CommunityBanner.vue b/web-app/packages/lib/src/modules/project/components/CommunityBanner.vue
index df607c88..4e72d339 100644
--- a/web-app/packages/lib/src/modules/project/components/CommunityBanner.vue
+++ b/web-app/packages/lib/src/modules/project/components/CommunityBanner.vue
@@ -12,14 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </template>
       <template #header-actions
         ><PButton
-          label="Browse community projects"
+          :label="t('BrowseCommunityProjects')"
           @click.stop="click"
           data-cy="community-project-btn"
       /></template>
-      <template #title>Community projects</template>
-      <template #description
-        >Explore various template projects within our community.</template
-      >
+      <template #title>{{ t('CommunityProjects') }}</template>
+      <template #description>{{
+        t('ExploreVariousTemplateProjectsWithinOurCommunity')
+      }}</template>
     </app-section-banner>
   </app-container>
 </template>
@@ -29,10 +29,12 @@ import { useRouter } from 'vue-router'
 
 import { ProjectRouteName } from '../routes'
 
+import returnTranslation from '@/../../lang/translate'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppSectionBanner from '@/common/components/AppSectionBanner.vue'
 
 const router = useRouter()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 function click() {
   router.push({ name: ProjectRouteName.ProjectsExplore })
diff --git a/web-app/packages/lib/src/modules/project/components/DownloadFileLarge.vue b/web-app/packages/lib/src/modules/project/components/DownloadFileLarge.vue
index 4865dc66..6b785091 100644
--- a/web-app/packages/lib/src/modules/project/components/DownloadFileLarge.vue
+++ b/web-app/packages/lib/src/modules/project/components/DownloadFileLarge.vue
@@ -8,13 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <PToast group="download-large-error" position="top-center">
     <template #message>
       <p>
-        The project is too large to download. Please use direct download with
-        our Python API Client or QGIS plugin instead.
+        {{
+          t(
+            'TheProjectIsTooLargeToDownloadPleaseUseDirectDownloadWithOurPythonAPIClientOrQGISPluginInstead'
+          )
+        }}
         <a
           href="https://merginmaps.com/blog/support-tip-downloading-a-previous-version-of-your-project"
           target="_blank"
           class="font-semibold"
-          >Read our blog for more details</a
+          >{{ t('ReadOurBlogForMoreDetails') }}</a
         >.
       </p>
     </template>
@@ -24,9 +27,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
+
 // we need to use options api here , because useToast is not properly handled multiple toast services
 export default defineComponent({
-  name: 'DownloadFileLarge'
+  name: 'DownloadFileLarge',
+  methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    }
+  }
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/project/components/DropArea.vue b/web-app/packages/lib/src/modules/project/components/DropArea.vue
index cb675fbd..fe397fbb 100644
--- a/web-app/packages/lib/src/modules/project/components/DropArea.vue
+++ b/web-app/packages/lib/src/modules/project/components/DropArea.vue
@@ -40,10 +40,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <i class="ti ti-download" />
         </div>
         <h4 class="title-t1 font-semibold text-color-forest">
-          Drag and drop files
+          {{ t('DragAndDropFiles') }}
         </h4>
         <p class="paragraph-p6 opacity-80 m-0">
-          You can drop files from your computer to start uploading
+          {{ t('YouCanDropFilesFromYourComputerToStartUploading') }}
         </p>
       </div>
     </slot>
@@ -58,6 +58,7 @@ import Path from 'path'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { getFiles, checksum } from '@/common/mergin_utils'
 import { useInstanceStore } from '@/modules/instance/store'
 import { useNotificationStore } from '@/modules/notification/store'
@@ -94,6 +95,9 @@ export default defineComponent({
       'finishFileAnalysis',
       'analysingFiles'
     ]),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     setOver: debounce(function (isOver) {
       this.dragOver = isOver
@@ -110,7 +114,7 @@ export default defineComponent({
       }
       if (this.upload && this.upload.running) {
         return this.error({
-          text: 'You cannot update files during upload'
+          text: this.t('YouCannotUpdateFilesDuringUpload')
         })
       }
       // prepare all entries because they will be not accessible after this callback ends (after 'await')
@@ -119,7 +123,7 @@ export default defineComponent({
       ).map((i) => i.webkitGetAsEntry())
       if (entries.some((e) => e === null)) {
         return this.error({
-          text: 'Drop only files or folders'
+          text: this.t('DropOnlyFilesOrFolders')
         })
       }
       this.createUpload(entries)
diff --git a/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue b/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
index 3139be19..1205bdee 100644
--- a/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue
@@ -58,6 +58,8 @@ import { PropType, defineComponent } from 'vue'
 
 import { ChangesetSuccessSummaryItem } from '../types'
 
+import returnTranslation from '@/../../lang/translate'
+
 export default defineComponent({
   name: 'file-changeset-summary-table',
   props: {
@@ -66,14 +68,14 @@ export default defineComponent({
   data() {
     return {
       columns: [
-        { text: 'Layer', value: 'table' },
+        { text: this.t('Layer'), value: 'table' },
         {
-          text: 'Inserts',
+          text: this.t('Inserts'),
           icon: 'ti-plus',
           value: 'insert'
         },
-        { text: 'Updates', icon: 'ti-pencil', value: 'update' },
-        { text: 'Deletes', icon: 'ti-trash', value: 'delete' }
+        { text: this.t('Updates'), icon: 'ti-pencil', value: 'update' },
+        { text: this.t('Deletes'), icon: 'ti-trash', value: 'delete' }
       ],
       itemsPerPage: 10
     }
@@ -83,6 +85,11 @@ export default defineComponent({
       // Displayed changesets data into table data
       return this.changesets.filter((p) => p.table !== 'gpkg_contents')
     }
+  },
+  methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    }
   }
 })
 </script>
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index 4dcec5ee..20024b61 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
         <dl class="grid grid-nogutter row-gap-4">
           <div class="col-12">
-            <dt class="paragraph-p6 opacity-80">File</dt>
+            <dt class="paragraph-p6 opacity-80">{{ t('File') }}</dt>
             <dd class="font-semibold">
               <h3 class="headline-h3 mt-0">
                 <FileIcon :file="{ ...file, name: fileName }" />{{ fileName }}
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
           <PDivider class="m-0" />
           <div class="col-6">
-            <dt class="paragraph-p6 opacity-80">Modified</dt>
+            <dt class="paragraph-p6 opacity-80">{{ t('Modified') }}</dt>
             <dd class="font-semibold paragraph-p5">
               <span v-tooltip="$filters.datetime(file.mtime)">{{
                 $filters.timediff(file.mtime)
@@ -45,11 +45,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </dd>
           </div>
           <div class="col-6 flex flex-column align-items-end">
-            <dt class="paragraph-p6 opacity-80">Size</dt>
+            <dt class="paragraph-p6 opacity-80">{{ t('Size') }}</dt>
             <dd class="font-semibold paragraph-p5">
               {{ $filters.filesize(file.size) }}
               <span v-if="state === 'updated'"
-                >(new:
+                >({{ t('New') }}
                 {{ $filters.filesize(upload.files[file.path].size) }})</span
               >
             </dd>
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           v-if="isOverLimit"
           class="flex justify-content-center m-4 opacity-60"
         >
-          File too large to preview — download to view instead.
+          {{ t('FileTooLargeToPreviewDownloadToViewInstead') }}
         </p>
         <output
           v-else-if="mimetype"
@@ -88,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           class="flex justify-content-center w-full text-center"
           data-cy="file-detail-remove-btn"
         >
-          Delete file
+          {{ t('DeleteFile') }}
         </PButton>
       </template>
     </AppSidebarRight>
@@ -102,6 +102,7 @@ import { defineComponent } from 'vue'
 
 import FileIcon from './FileIcon.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppSidebarRight from '@/common/components/AppSidebarRight.vue'
 import { ProjectApi } from '@/modules/project/projectApi'
 import { useProjectStore } from '@/modules/project/store'
@@ -164,9 +165,9 @@ export default defineComponent({
     },
     stateText() {
       const stateText: Record<State, string> = {
-        added: 'New file',
-        removed: 'Deleted file',
-        updated: 'Modified file'
+        added: this.t('NewFile'),
+        removed: this.t('DeletedFile'),
+        updated: this.t('ModifiedFile')
       }
       return this.state && stateText[this.state]
     },
@@ -212,6 +213,9 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useProjectStore, ['deleteFiles']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     txtPreview() {
       if (this.isOverLimit) {
         this.content = null
diff --git a/web-app/packages/lib/src/modules/project/components/FilesTable.vue b/web-app/packages/lib/src/modules/project/components/FilesTable.vue
index 1409ccd7..999e8318 100644
--- a/web-app/packages/lib/src/modules/project/components/FilesTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/FilesTable.vue
@@ -56,7 +56,7 @@
           >
             {{ col.text }}
           </div>
-          <div class="col-12 flex lg:hidden">Files</div>
+          <div class="col-12 flex lg:hidden">{{ t('Files') }}</div>
         </div>
       </template>
       <template #list="slotProps">
@@ -95,7 +95,7 @@
       </template>
       <template #empty>
         <div class="w-full text-center p-4">
-          <span>No files found.</span>
+          <span>{{ t('NoFilesFound') }}</span>
         </div>
       </template>
     </PDataView>
@@ -108,6 +108,7 @@ import max from 'lodash/max'
 import Path from 'path'
 import { computed } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { dirname } from '@/common/path_utils'
 import { removeAccents } from '@/common/text_utils'
 import FileIcon from '@/modules/project/components/FileIcon.vue'
@@ -150,11 +151,12 @@ const emit = defineEmits<{
 const projectStore = useProjectStore()
 
 const ITEMS_PER_PAGE = 100
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const columns: Column[] = [
-  { text: 'Name', key: 'name', cols: 8 },
-  { text: 'Modified', key: 'mtime' },
-  { text: 'Size', key: 'size' }
+  { text: t('Name'), key: 'name', cols: 8 },
+  { text: t('Modified'), key: 'mtime' },
+  { text: t('Size'), key: 'size' }
 ]
 
 const breadcrumps = computed(() => {
@@ -172,7 +174,7 @@ const breadcrumps = computed(() => {
   return [
     {
       icon: 'ti ti-folder',
-      label: 'Files',
+      label: t('Files'),
       path: folderLink(''),
       active: parts.length === 0
     },
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 2771b53f..572e6222 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -18,7 +18,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     @page="onPage"
   >
     <template #header>
-      <h3 class="font-semibold paragraph-p6 text-color m-0">Access requests</h3>
+      <h3 class="font-semibold paragraph-p6 text-color m-0">
+        {{ t('AccessRequests') }}
+      </h3>
     </template>
     <template #list="slotProps">
       <template v-for="item in slotProps.items" :key="item.id">
@@ -27,9 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           class="flex flex-column lg:flex-row align-items-center justify-content-between px-4 py-2 mt-0 border-bottom-1 border-gray-200"
         >
           <p class="w-12 lg:w-6 paragraph-p6 m-0">
-            User
+            {{ t('User') }}
             <span class="font-semibold">{{ item.requested_by }}</span>
-            requested an access to your project
+            {{ t('RequestedAnAccessToYourProject') }}
             <span class="font-semibold">{{ item.project_name }}.</span>
           </p>
           <div
@@ -39,10 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               <span v-tooltip.right="{ value: $filters.datetime(item.expire) }">
                 <template
                   v-if="$filters.remainingtime(item.expire) === 'expired'"
-                  >Expired</template
+                  >{{ t('Expired') }}</template
                 >
                 <template v-else
-                  >Expiring in
+                  >{{ t('ExpiringIn') }}
                   {{ $filters.remainingtime(item.expire) }}</template
                 >
               </span>
@@ -57,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 :disabled="!canCancelAccessRequest()"
                 icon="ti ti-x"
                 rounded
-                aria-label="Disallow"
+                :aria-label="t('Disallow')"
                 severity="danger"
                 class="mr-2"
                 @click="cancelRequest(item)"
@@ -66,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 :disabled="!canAcceptAccessRequest(item.expire)"
                 icon="ti ti-check"
                 rounded
-                aria-label="Accept"
+                :aria-label="t('Accept')"
                 severity="success"
                 @click="acceptRequest(item)"
               />
@@ -76,7 +78,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </template>
     </template>
     <template #empty>
-      <p class="text-center p-4 m-0">No access requests found</p>
+      <p class="text-center p-4 m-0">{{ t('NoAccessRequestsFound') }}</p>
     </template>
   </PDataView>
 </template>
@@ -86,6 +88,7 @@ import { mapActions, mapState } from 'pinia'
 import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppDropdown from '@/common/components/AppDropdown.vue'
 import { getErrorMessage } from '@/common/error_utils'
 import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
@@ -128,6 +131,9 @@ export default defineComponent({
       'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     onUpdateOptions(options) {
       this.options = options
@@ -163,7 +169,7 @@ export default defineComponent({
         await this.updatePaginationOrFetch()
       } catch (err) {
         this.error({
-          text: getErrorMessage(err, 'Failed to accept access request')
+          text: getErrorMessage(err, this.t('FailedToAcceptAccessRequest'))
         })
       }
     },
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectForm.vue b/web-app/packages/lib/src/modules/project/components/ProjectForm.vue
index d9f200d9..76706165 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectForm.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectForm.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           data-cy="project-form-name"
           class="flex-grow-1"
         />
-        <label for="name">Project name</label>
+        <label for="name">{{ t('ProjectName') }}</label>
         <small class="p-error" id="text-error">{{
           errors.detail || '&nbsp;'
         }}</small>
@@ -26,10 +26,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </div>
 
     <tip-message class="mb-6">
-      ><template #description
-        >A good candidate for a project name is name of the location or purpose
-        of the field survey.</template
-      ></tip-message
+      ><template #description>{{
+        t(
+          'AGoodCandidateForAProjectNameIsNameOfTheLocationOrPurposeOfTheFieldSurvey'
+        )
+      }}</template></tip-message
     >
 
     <div
@@ -39,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         severity="secondary"
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
-        >Cancel</PButton
+        >{{ t('Cancel') }}</PButton
       >
 
       <PButton
@@ -49,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         data-cy="project-form-create-btn"
         class="flex w-12 lg:w-6 justify-content-center"
       >
-        Create project
+        {{ t('CreateProject') }}
       </PButton>
     </div>
   </div>
@@ -59,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { TipMessage } from '@/common/components'
 import { useUserStore } from '@/main'
 import { useDialogStore } from '@/modules/dialog/store'
@@ -92,6 +94,9 @@ export default defineComponent({
     ...mapActions(useDialogStore, ['close']),
     ...mapActions(useFormStore, ['clearErrors']),
     ...mapActions(useProjectStore, ['createProject']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     async create() {
       // TODO: add types
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectMembersTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectMembersTable.vue
index ef994b92..d3e2b659 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectMembersTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectMembersTable.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         :columns="columns"
         :paginator="searchedItems.length > itemsPerPage"
         :loading="projectStore.accessLoading"
-        :empty-message="'No members found.'"
+        :empty-message="t('NoMembersFound')"
         :row-cursor-pointer="false"
         :options="{
           itemsPerPage,
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           sortDesc: projectStore.accessSorting?.sortDesc
         }"
       >
-        <template #header-title>Members</template>
+        <template #header-title>{{ t('Members') }}</template>
         <template #actions="{ item }">
           <PButton
             icon="ti ti-trash"
@@ -76,6 +76,7 @@ import ProjectMemberItem from '../../../common/components/UserSummary.vue'
 import { useProjectStore } from '../store'
 import { ProjectCollaborator } from '../types'
 
+import returnTranslation from '@/../../lang/translate'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppDropdown from '@/common/components/AppDropdown.vue'
 import AppSection from '@/common/components/AppSection.vue'
@@ -93,22 +94,23 @@ import { useInstanceStore, useUserStore } from '@/main'
 const projectStore = useProjectStore()
 const userStore = useUserStore()
 const instanceStore = useInstanceStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const itemsPerPage = ref(10)
 const columns = ref<DataViewWrapperColumnItem[]>([
   {
-    text: 'Member',
+    text: t('Member'),
     value: 'member',
     textClass: 'font-semibold',
     cols: 10
   },
   {
-    text: 'Project permissions',
+    text: t('ProjectPermissions'),
     value: 'roles',
     cols: 2
   },
   {
-    text: 'Remove',
+    text: t('Remove'),
     value: 'remove',
     fixed: true
   }
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
index 9fac8ecc..40c0e16b 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareDialog.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     @submit="share"
   >
     <template #accountsInput
-      ><label for="accounts">Share with</label
+      ><label for="accounts">{{ t('ShareWith') }}</label
       ><PAutoComplete
         @complete="search"
         v-model="data.selectedUsers"
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         optionLabel="label"
         :suggestions="data.users"
         :placeholder="
-          data.selectedUsers.length ? '' : 'Search users by username or email'
+          data.selectedUsers.length ? '' : t('SearchUsersByUsernameOrEmail')
         "
         input-id="accounts"
         data-key="key"
@@ -57,14 +57,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </template>
         <template #empty>
           <p class="p-2">
-            <i class="text-color-forest ti ti-info-circle-filled"></i
-            >{{ ' ' }}No matches found - Try using their emails instead
+            <i class="text-color-forest ti ti-info-circle-filled"></i>{{ ' '
+            }}{{ t('NoMatchesFoundTryUsingTheirEmailsInstead') }}
           </p></template
         >
         <template v-if="data.users.length" #footer
           ><p class="px-2">
-            <i class="text-color-forest ti ti-info-circle-filled"></i
-            >{{ ' ' }}Not the right person? Try typing their email instead
+            <i class="text-color-forest ti ti-info-circle-filled"></i>{{ ' '
+            }}{{ t('NotTheRightPersonTryTypingTheirRmailInstead') }}
           </p></template
         >
         <template #removetokenicon="slotProps"
@@ -88,6 +88,7 @@ import { reactive } from 'vue'
 
 import ProjectShareTemplate from './ProjectShareDialogTemplate.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { ProjectRoleName } from '@/common/permission_utils'
 import { AutoCompleteItem, useUserStore } from '@/main'
 import { useDialogStore } from '@/modules/dialog/store'
@@ -115,6 +116,7 @@ const emit = defineEmits<{
 const projectStore = useProjectStore()
 const userStore = useUserStore()
 const dialogStore = useDialogStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const search = async (e: AutoCompleteCompleteEvent) => {
   if (data.isPending) {
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
index c25bc181..0b7cceb1 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareDialogTemplate.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </div>
 
       <div class="flex flex-column p-input-filled">
-        <label>Project permission</label>
+        <label>{{ t('ProjectPermission') }}</label>
         <app-dropdown :options="permissions" v-model="permission" />
       </div>
     </div>
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="text-color-forest w-12 lg:w-8 font-semibold flex align-items-center"
         ><i class="ti ti-info-circle-filled mr-2 paragraph-p4" /><span
           class="underline"
-          >Learn more about permission system</span
+          >{{ t('LearnMoreAboutPermissionSystem') }}</span
         ></a
       >.
 
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         data-cy="project-form-create-btn"
         class="flex w-12 lg:w-4 justify-content-center"
       >
-        Share
+        {{ t('Share') }}
       </PButton>
     </div>
   </aside>
@@ -49,11 +49,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppDropdown from '@/common/components/AppDropdown.vue'
 import { ProjectRoleName } from '@/common/permission_utils'
 import { DropdownOption, useInstanceStore } from '@/main'
 
 const instanceStore = useInstanceStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 const props = defineProps<{
   modelValue: ProjectRoleName
   disabled: boolean
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectVersionChanges.vue b/web-app/packages/lib/src/modules/project/components/ProjectVersionChanges.vue
index bd60642f..9443f664 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectVersionChanges.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectVersionChanges.vue
@@ -47,7 +47,7 @@
                 path: change?.path
               }
             }"
-            >Show advanced</router-link
+            >{{ t('ShowAdvanced') }}</router-link
           >
           <file-changeset-summary-table
             :changesets="changesets?.[change.path]['summary']"
@@ -59,7 +59,7 @@
           "
           class="text-center"
         >
-          Details not available:
+          {{ t('DetailsNotAvailable') }}
           {{ changesets?.[change.path].error }}
         </div>
       </div>
@@ -71,12 +71,14 @@
 import { ProjectVersion } from '@mergin/lib'
 import { computed, ref, defineProps } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppCircle from '@/common/components/AppCircle.vue'
 import FileChangesetSummaryTable from '@/modules/project/components/FileChangesetSummaryTable.vue'
 
 const props = defineProps<{
   version: ProjectVersion
 }>()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const changeTabs = ref<
   {
@@ -89,19 +91,19 @@ const changeTabs = ref<
   {
     key: 'added',
     severity: 'success',
-    text: 'Files added',
+    text: t('FilesAdded'),
     icon: 'ti-plus'
   },
   {
     key: 'updated',
     severity: 'warn',
-    text: 'Files edited',
+    text: t('FilesEdited'),
     icon: 'ti-pencil'
   },
   {
     key: 'removed',
     severity: 'danger',
-    text: 'Files removed',
+    text: t('FilesRemoved'),
     icon: 'ti-trash'
   }
 ])
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectVersionsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectVersionsTable.vue
index 40d3eed5..eea3b7a4 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectVersionsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectVersionsTable.vue
@@ -15,9 +15,9 @@
       showPagination && options && versionsCount > options.itemsPerPage
     "
     data-cy="project-version-table"
-    :empty-message="'No versions found.'"
+    :empty-message="t('NoVersionsFound')"
   >
-    <template #header-title>Versions</template>
+    <template #header-title>{{ t('Versions') }}</template>
 
     <template #actions="{ item }">
       <PButton
@@ -75,6 +75,7 @@
 import { storeToRefs } from 'pinia'
 import { ref, computed, StyleValue, watch } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import DataViewWrapper from '@/common/components/data-view/DataViewWrapper.vue'
 import {
   DataViewWrapperColumnItem,
@@ -106,20 +107,21 @@ const emit = defineEmits<{
 const projectStore = useProjectStore()
 const { versions, versionsLoading, versionsCount, project } =
   storeToRefs(projectStore)
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const columns = ref<DataViewWrapperColumnItem[]>([
   {
-    text: 'Version',
+    text: t('Version'),
     value: 'name',
     textClass: 'white-space-normal',
     cols: 1
   },
-  { text: 'Created', value: 'created' },
-  { text: 'Author', value: 'author' },
-  { text: 'Files added', value: 'changes.added' },
-  { text: 'Files edited', value: 'changes.updated' },
-  { text: 'Files removed', value: 'changes.removed' },
-  { text: 'Size', value: 'project_size', cols: 1 },
+  { text: t('Created'), value: 'created' },
+  { text: t('Author'), value: 'author' },
+  { text: t('FilesAdded'), value: 'changes.added' },
+  { text: t('FilesEdited'), value: 'changes.updated' },
+  { text: t('FilesRemoved'), value: 'changes.removed' },
+  { text: t('Size'), value: 'project_size', cols: 1 },
   { text: '', value: 'archived', fixed: true }
 ])
 
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 00796693..7d63e50c 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -47,12 +47,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 v-if="slotProps.data.access.public && !onlyPublic"
                 severity="success"
                 :pt="{ root: { class: 'ml-1' } }"
-                >Public</PTag
+                >{{ t('Public') }}</PTag
               >
               <i
                 v-if="!slotProps.data.tags.includes('valid_qgis')"
                 v-tooltip.right="{
-                  value: 'Failed to find a QGIS project file'
+                  value: t('FailedToFindAQGISProjectFile')
                 }"
                 class="ti ti-alert-circle-filled ml-1"
                 data-cy="project-form-missing-project"
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               <i
                 v-if="slotProps.data.has_conflict"
                 v-tooltip.right="{
-                  value: 'Conflicting file in project'
+                  value: t('ConflictingFileInProject')
                 }"
                 class="ti ti-alert-triangle-filled ml-1"
                 style="margin-right: 20px"
@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               }"
               class="opacity-80 m-0 paragraph-p7"
             >
-              Updated {{ $filters.timediff(slotProps.data.updated) }}
+              {{ t('Updated') }} {{ $filters.timediff(slotProps.data.updated) }}
             </span>
           </template>
         </PColumn>
@@ -130,6 +130,7 @@ import { defineComponent, PropType } from 'vue'
 
 import { useProjectStore } from '../store'
 
+import returnTranslation from '@/../../lang/translate'
 import { PaginatedGridOptions, TableDataHeader } from '@/common'
 import { ProjectListItem } from '@/modules/project/types'
 
@@ -167,9 +168,9 @@ export default defineComponent({
     ...mapState(useProjectStore, ['projectsSearch', 'projectsSorting']),
     columns(): TableDataHeader[] {
       return [
-        { header: 'Project name', field: 'name' },
-        { header: 'Versions', field: 'version' },
-        { header: 'Size', field: 'meta.size' }
+        { header: this.t('ProjectName'), field: 'name' },
+        { header: this.t('Versions'), field: 'version' },
+        { header: this.t('Size'), field: 'meta.size' }
         // {
         //   header: 'Collaborators',
         //   field: 'access.readers'
@@ -194,6 +195,9 @@ export default defineComponent({
     this.filterData()
   },
   methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     fetchProjects() {
       this.loading = true
       this.$emit(
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
index 9e79484b..9057ffd7 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
@@ -18,17 +18,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <div class="flex flex-column align-items-center p-4 text-center">
           <img src="@/assets/map-circle.svg" alt="No projects" />
           <p class="title-t2 m-0 p-4">
-            <template v-if="projectsSearch"
-              >We couldn't find any projects matching your search
-              criteria.</template
-            >
-            <template v-else>You don't have any projects yet.</template>
+            <template v-if="projectsSearch">{{
+              t('WeCouldntFindAnyProjectsMatchingYourSearchCriteria')
+            }}</template>
+            <template v-else>{{ t('YouDontHaveAnyProjectsYet') }}</template>
           </p>
           <template v-if="canCreateProject">
             <p class="paragraph-p6 opacity-80 pb-4">
-              Let’s start by creating a first one!
+              {{ t('LetsStartByCreatingAFirstOne') }}
             </p>
-            <PButton @click="newProjectDialog">Create new project</PButton>
+            <PButton @click="newProjectDialog">{{
+              t('CreateNewProject')
+            }}</PButton>
           </template>
         </div>
       </template>
@@ -40,6 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapState, mapActions } from 'pinia'
 import { defineComponent, PropType } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { PaginatedGridOptions } from '@/common'
 import { ProjectForm, useDialogStore } from '@/modules'
 import { useNotificationStore } from '@/modules/notification/store'
@@ -100,6 +102,9 @@ export default defineComponent({
     ...mapActions(useProjectStore, ['getProjects']),
     ...mapActions(useNotificationStore, ['error']),
     ...mapActions(useDialogStore, ['show']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     async fetchProjects(
       projectGridState: ProjectGridState,
       additionalGridOptions: PaginatedGridOptions,
@@ -147,11 +152,11 @@ export default defineComponent({
         if (onFinish) {
           onFinish()
         }
-        await this.error({ text: 'Failed to fetch list of projects' })
+        await this.error({ text: this.t('FailedToFetchListOfProjects') })
       }
     },
     newProjectDialog() {
-      const dialog = { persistent: true, header: 'New project' }
+      const dialog = { persistent: true, header: this.t('NewProject') }
       this.show({
         component: ProjectForm,
         params: {
diff --git a/web-app/packages/lib/src/modules/project/components/UploadDialog.vue b/web-app/packages/lib/src/modules/project/components/UploadDialog.vue
index f3a81b8e..7a73c04b 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadDialog.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadDialog.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   >
     <template #header>
       <p class="font-semibold">
-        Data Sync
+        {{ t('DataSync') }}
         <span v-if="upload.diff" class="text-color-secondary"
           >({{ $filters.filesize(uploadSize) }})</span
         >
@@ -28,7 +28,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <app-circle :severity="circleSeverity[key]" class="mr-2"
           ><i :class="['ti', `${diffIcon[key]}`]"></i
         ></app-circle>
-        <span class="paragraph-p5 opacity-80 capitalize">{{ key }}</span>
+        <span class="paragraph-p5 opacity-80 capitalize">{{
+          t(diffLabel[key])
+        }}</span>
         <app-circle class="ml-auto">{{ upload.diff[key].length }}</app-circle>
       </div>
       <PButton
@@ -36,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="confirmUpload"
         :disabled="upload.running || remainingAnalyzingFiles > 0"
         class="mt-2 w-full my-4"
-        label="Update Changes"
+        :label="t('UpdateChanges')"
       />
     </div>
   </PDialog>
@@ -48,6 +50,7 @@ import pick from 'lodash/pick'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppCircle from '@/common/components/AppCircle.vue'
 import { CHUNK_SIZE, isVersionedFile } from '@/common/mergin_utils'
 import {
@@ -106,6 +109,14 @@ export default defineComponent({
       }
       return icons
     },
+    diffLabel() {
+      const labels: Record<DiffKeys, string> = {
+        removed: 'RemovedL',
+        added: 'AddedL',
+        updated: 'UpdatedL'
+      }
+      return labels
+    },
     circleSeverity() {
       const severities: Record<DiffKeys, 'success' | 'warn' | 'danger'> = {
         removed: 'danger',
@@ -127,6 +138,9 @@ export default defineComponent({
       'pushFinishTransaction',
       'pushCancelTransaction'
     ]),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     resetUpload() {
       this.discardUpload({ projectPath: this.project.path })
       if (this.source) {
@@ -158,7 +172,7 @@ export default defineComponent({
       if (!transaction) {
         this.discardUpload({ projectPath })
         await this.show({
-          text: 'Project updated'
+          text: this.t('ProjectUpdated')
         })
         this.setProject({ project: resp.data })
         return
@@ -203,11 +217,12 @@ export default defineComponent({
     },
     confirmUpload() {
       const props: ConfirmDialogProps = {
-        text: `Are you really sure you want to continue?`,
-        description:
-          'Changes from other users may get lost when uploading data from browser. It is highly recommended to use Mergin Maps QGIS plugin instead.',
-        confirmText: 'Update',
-        cancelText: 'Cancel'
+        text: this.t('AreYouReallySureYouWantToContinue'),
+        description: this.t(
+          'ChangesFromOtherUsersMayGetLostWhenUploadingDataFromBrowserItIsHighlyRecommendedToUseMerginMapsQGISPluginInstead'
+        ),
+        confirmText: this.t('Update'),
+        cancelText: this.t('Cancel')
       }
       const listeners = {
         confirm: () => this.uploadChanges()
@@ -218,7 +233,7 @@ export default defineComponent({
           params: {
             props,
             listeners,
-            dialog: { maxWidth: 500, header: 'Confirm continue upload' }
+            dialog: { maxWidth: 500, header: this.t('ConfirmContinueUpload') }
           }
         })
       } else {
diff --git a/web-app/packages/lib/src/modules/project/components/UploadProgress.vue b/web-app/packages/lib/src/modules/project/components/UploadProgress.vue
index 05f71d00..9185534b 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadProgress.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadProgress.vue
@@ -31,6 +31,7 @@ import debounce from 'lodash/debounce'
 import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
@@ -48,11 +49,14 @@ export default defineComponent({
     uploading: 'updateVisibility'
   },
   methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     open() {
       this.$toast.add({
         group: 'upload-progress',
         severity: 'info',
-        summary: 'Uploading data to project.'
+        summary: this.t('UploadingDataToProjects')
       })
     },
     close() {
diff --git a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
index 503f7746..e283a7b3 100644
--- a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ></template>
       <dl class="grid grid-nogutter row-gap-4">
         <div class="col-12">
-          <dt class="paragraph-p6 opacity-80">Version</dt>
+          <dt class="paragraph-p6 opacity-80">{{ t('Version') }}</dt>
           <dd>
             <h3 class="headline-h3 mt-0">
               {{ version.name }}
@@ -31,25 +31,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </div>
         <PDivider class="m-0" />
         <div class="col-6">
-          <dt class="paragraph-p6 opacity-80">Author</dt>
+          <dt class="paragraph-p6 opacity-80">{{ t('Author') }}</dt>
           <dd class="font-semibold paragraph-p5">
             {{ version.author }}
           </dd>
         </div>
         <div class="col-6 flex flex-column align-items-end">
-          <dt class="paragraph-p6 opacity-80">Project size</dt>
+          <dt class="paragraph-p6 opacity-80">{{ t('ProjectSize') }}</dt>
           <dd class="font-semibold paragraph-p5">
             {{ $filters.filesize(version.project_size) }}
           </dd>
         </div>
         <div class="col-12">
-          <dt class="paragraph-p6 opacity-80">Created</dt>
+          <dt class="paragraph-p6 opacity-80">{{ t('Created') }}</dt>
           <dd class="font-semibold paragraph-p5">
             {{ $filters.datetime(version.created) }}
           </dd>
         </div>
         <div class="col-12">
-          <dt class="paragraph-p6 opacity-80">User agent</dt>
+          <dt class="paragraph-p6 opacity-80">{{ t('UserAgent') }}</dt>
           <dd class="font-semibold paragraph-p5">
             {{ version.user_agent }}
           </dd>
@@ -66,6 +66,7 @@ import { defineComponent } from 'vue'
 
 import ProjectVersionChanges from './ProjectVersionChanges.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppSidebarRight from '@/common/components/AppSidebarRight.vue'
 import { getErrorMessage } from '@/common/error_utils'
 import { ProjectVersion } from '@/modules'
@@ -114,6 +115,9 @@ export default defineComponent({
   methods: {
     ...mapActions(useNotificationStore, ['error']),
     ...mapActions(useProjectStore, ['downloadArchive']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     async getVersion() {
       try {
         const response = await ProjectApi.getProjectVersion(
@@ -123,7 +127,7 @@ export default defineComponent({
         this.version = response.data
       } catch (err) {
         this.error({
-          text: getErrorMessage(err, 'Failed to fetch project version')
+          text: getErrorMessage(err, this.t('FailedToFetchProjectVersion'))
         })
       }
     },
diff --git a/web-app/packages/lib/src/modules/project/store.ts b/web-app/packages/lib/src/modules/project/store.ts
index 1edf1ae7..2ba2a222 100644
--- a/web-app/packages/lib/src/modules/project/store.ts
+++ b/web-app/packages/lib/src/modules/project/store.ts
@@ -8,6 +8,7 @@ import keyBy from 'lodash/keyBy'
 import omit from 'lodash/omit'
 import { defineStore, getActivePinia } from 'pinia'
 
+import returnTranslation from '@/../../lang/translate'
 import { DropdownOption, permissionUtils } from '@/common'
 import { getErrorMessage } from '@/common/error_utils'
 import { waitCursor } from '@/common/html_utils'
@@ -49,6 +50,8 @@ import {
 } from '@/modules/project/types'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 interface File {
   chunks: unknown
 }
@@ -218,7 +221,7 @@ export const useProjectStore = defineStore('projectModule', {
       // Check if there are any changes to upload
       if (upload.diff.changes < 1) {
         notificationStore.error({
-          text: 'No changes detected. File already exists?'
+          text: t('NoChangesDetectedFileAlreadyExists')
         })
         this.discardUpload({ projectPath: this.project.path })
         return
@@ -300,7 +303,7 @@ export const useProjectStore = defineStore('projectModule', {
         })
       } catch (_err) {
         await notificationStore.error({
-          text: 'Failed to load projects'
+          text: t('FailedToLoadProjects')
         })
       }
       return response
@@ -370,7 +373,7 @@ export const useProjectStore = defineStore('projectModule', {
         })
       } catch {
         await notificationStore.error({
-          text: 'Failed to fetch project access requests'
+          text: t('FailedToFetchProjectAccessRequests')
         })
       }
     },
@@ -406,7 +409,7 @@ export const useProjectStore = defineStore('projectModule', {
         })
       } catch {
         await notificationStore.error({
-          text: 'Failed to fetch project access requests'
+          text: t('FailedToFetchProjectAccessRequests')
         })
       }
     },
@@ -432,7 +435,7 @@ export const useProjectStore = defineStore('projectModule', {
         await ProjectApi.cancelProjectAccessRequest(payload.itemId, true)
       } catch (err) {
         await notificationStore.error({
-          text: getErrorMessage(err, 'Failed to cancel access request')
+          text: getErrorMessage(err, t('FailedToCancelAccessRequest'))
         })
       } finally {
         waitCursor(false)
@@ -485,7 +488,7 @@ export const useProjectStore = defineStore('projectModule', {
         )
         this.setProject({ project: projectResponse.data })
       } catch {
-        await notificationStore.error({ text: 'Failed to load project data' })
+        await notificationStore.error({ text: t('FailedToLoadProjectData') })
       }
     },
 
@@ -499,7 +502,7 @@ export const useProjectStore = defineStore('projectModule', {
         waitCursor(false)
       } catch (err) {
         await notificationStore.error({
-          text: getErrorMessage(err, 'Failed to unsubscribe from project')
+          text: getErrorMessage(err, t('FailedToUnsubscribeFromProject'))
         })
         waitCursor(false)
       }
@@ -518,7 +521,7 @@ export const useProjectStore = defineStore('projectModule', {
       } catch (e) {
         if (!axios.isAxiosError(e)) {
           notificationStore.error({
-            text: 'Failed to load project data'
+            text: t('FailedToLoadProjectData')
           })
           return
         }
@@ -526,7 +529,7 @@ export const useProjectStore = defineStore('projectModule', {
 
         if (e.response.status !== 404 && e.response.status !== 403) {
           notificationStore.error({
-            text: 'Failed to load project data'
+            text: t('FailedToLoadProjectData')
           })
         } else if (e.response.status === 403 && !isLoggedUser) {
           await getActivePinia().router.push(
@@ -545,7 +548,7 @@ export const useProjectStore = defineStore('projectModule', {
             })
             .catch(() => {
               notificationStore.error({
-                text: 'Failed to load project access requests data'
+                text: t('FailedToLoadProjectAccessRequestsData')
               })
             })
         }
@@ -566,7 +569,7 @@ export const useProjectStore = defineStore('projectModule', {
         this.versionsCount = response.data?.count
       } catch {
         await notificationStore.error({
-          text: 'Failed to fetch project versions'
+          text: t('FailedToFetchProjectVersions')
         })
       } finally {
         this.versionsLoading = false
@@ -601,7 +604,7 @@ export const useProjectStore = defineStore('projectModule', {
         if (code === 'UpdateProjectAccessError') {
           notificationStore.warn({
             life: 1000000,
-            text: 'Unable to share project with the following users',
+            text: t('UnableToShareProjectWithTheFollowingUsers'),
             detail: (error.response.data?.invalid_usernames ?? []).join(', ')
           })
         }
@@ -646,7 +649,7 @@ export const useProjectStore = defineStore('projectModule', {
       })
 
       notificationStore.show({
-        text: 'Following users have been added to the project',
+        text: t('FollowingUsersHaveBeenAddedToTheProject'),
         detail: userNames.join(', ')
       })
     },
@@ -797,7 +800,7 @@ export const useProjectStore = defineStore('projectModule', {
         this.access = response.data
       } catch {
         notificationStore.error({
-          text: 'Failed to get project access'
+          text: t('FailedToGetProjectAccess')
         })
       } finally {
         this.accessLoading = false
@@ -813,7 +816,7 @@ export const useProjectStore = defineStore('projectModule', {
         this.collaborators = response.data
       } catch {
         notificationStore.error({
-          text: 'Failed to get project collaborators'
+          text: t('FailedToGetProjectCollaborators')
         })
       } finally {
         this.accessLoading = false
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index ba808257..fa8e88a0 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -10,13 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-if="project && $route.name === 'project-tree' && isProjectWriter"
     >
       <app-panel-toggleable :collapsed="dataTableOpen">
-        <template #title>Upload files</template>
+        <template #title>{{ t('UploadFiles') }}</template>
         <div class="flex flex-column lg:flex-row">
           <div
             class="flex flex-column text-center align-items-center w-12 lg:w-6 mb-4 lg:mb-0 lg:mr-4 border-round-xl surface-ground p-4 row-gap-3"
           >
             <div class="w-full flex justify-content-end mb-0">
-              <PTag>Recommended</PTag>
+              <PTag>{{ t('Recommended') }}</PTag>
             </div>
 
             <div
@@ -26,15 +26,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </div>
 
             <h4 class="title-t1 text-color-forest">
-              Mergin Maps plugin for QGIS
+              {{ t('MerginMapsPluginForQGIS') }}
             </h4>
             <p class="paragraph-p6 opacity-80 m-0">
-              This is the easiest and recommended way.
+              {{ t('ThisIsTheEasiestAndRecommendedWay') }}
               <a
                 target="_blank"
                 class="text-color-forest font-semibold no-underline"
                 :href="docsLinkManageCreateProject"
-                >Learn how to use it.</a
+                >{{ t('LearnHowToUseIt') }}</a
               >
             </p>
           </div>
@@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <span class="p-input-icon-left flex-grow-1">
             <i class="ti ti-search paragraph-p3"></i>
             <PInputText
-              placeholder="Search files"
+              :placeholder="t('SearchFiles')"
               data-cy="search-files-field"
               v-model="searchFilter"
               class="w-full"
@@ -89,6 +89,7 @@ import { mapState } from 'pinia'
 import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import {
   AppSection,
   AppContainer,
@@ -147,22 +148,22 @@ export default defineComponent({
     filterMenuItems(): MenuItem[] {
       return [
         {
-          label: 'Sort by name A-Z',
+          label: this.t('SortByNameAZ'),
           key: 'name',
           sortDesc: 1
         },
         {
-          label: 'Sort by name Z-A',
+          label: this.t('SortByNameZA'),
           key: 'name',
           sortDesc: -1
         },
         {
-          label: 'Sort by last modified',
+          label: this.t('SortByLastModified'),
           key: 'mtime',
           sortDesc: -1
         },
         {
-          label: 'Sort by file size',
+          label: this.t('SortByFileSize'),
           key: 'size',
           sortDesc: -1
         }
@@ -178,6 +179,9 @@ export default defineComponent({
     }
   },
   methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     rowClick(file) {
       this.$router.push({ path: file.link })
     },
diff --git a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
index a41c7f32..b387a399 100644
--- a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
@@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </template>
             <template #empty>
               <div class="flex flex-column align-items-center p-4 text-center">
-                <p>No changeset for current layer</p>
+                <p>{{ t('NoChangesetForCurrentLayer') }}</p>
               </div>
               console.log('getChangeset', this.namespace, this.projectName,
               this.version_id, this.path)
@@ -84,14 +84,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <app-container v-else-if="!versionsChangesetLoading">
       <app-section class="p-4">
         <div class="flex flex-column align-items-center text-center">
-          <h3>Changes cannot be calculated</h3>
+          <h3>{{ t('ChangesCannotBeCalculated') }}</h3>
           <p>
-            For details please check the
+            {{ t('ForDetailsPleaseCheckThe') }}
             <a
               class="font-semibold text-underline text-color-forest"
               :href="docsLinkManageSynchronisation"
               target="_blank"
-              >documentation</a
+              >{{ t('Documentation') }}</a
             >.
           </p>
         </div>
@@ -106,6 +106,7 @@ import isArray from 'lodash/isArray'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppCircle from '@/common/components/AppCircle.vue'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppSection from '@/common/components/AppSection.vue'
@@ -153,6 +154,9 @@ export default defineComponent({
   methods: {
     ...mapActions(useNotificationStore, ['error']),
     ...mapActions(useProjectStore, ['getVersionChangeset']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     // TODO: refactor to pinia action
     async getChangeset() {
       const changesetData = await this.getVersionChangeset({
@@ -170,7 +174,7 @@ export default defineComponent({
       for (const [key, value] of Object.entries(changeset)) {
         _this.tables[key] = {}
         const headers = [
-          { text: 'Change', value: 'operationTypeHeader', width: 50 }
+          { text: this.t('Change'), value: 'operationTypeHeader', width: 50 }
         ]
         const changes = []
         if (isArray(value)) {
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectCollaboratorsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectCollaboratorsViewTemplate.vue
index 808d5889..c331e9a4 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectCollaboratorsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectCollaboratorsViewTemplate.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     >
       <app-section
         ><template #title
-          >Requests
+          >{{ t('Requests') }}
           <span class="text-color-medium-green"
             >({{ projectStore.accessRequestsCount }})</span
           ></template
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <span class="p-input-icon-left flex-grow-1">
             <i class="ti ti-search paragraph-p3"></i>
             <PInputText
-              placeholder="Search members"
+              :placeholder="t('SearchMembers')"
               data-cy="search-members-field"
               v-model="projectStore.accessSearch"
               class="w-full"
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             v-if="allowShare"
             @click="$emit('share')"
             icon="ti ti-send"
-            label="Share"
+            :label="t('Share')"
             data-cy="project-share-btn"
           />
           <AppMenu :items="filterMenuItems" />
@@ -58,6 +58,7 @@ import { ProjectMembersTable } from '../components'
 import ProjectAccessRequests from '../components/ProjectAccessRequests.vue'
 import { useProjectStore } from '../store'
 
+import returnTranslation from '@/../../lang/translate'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppMenu from '@/common/components/AppMenu.vue'
 import AppSection from '@/common/components/AppSection.vue'
@@ -74,17 +75,18 @@ withDefaults(
 
 const projectStore = useProjectStore()
 const userStore = useUserStore()
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 const filterMenuItems = computed<MenuItem[]>(() =>
   [
     {
-      label: 'Sort by name A-Z',
+      label: t('SortByNameAZ'),
       key: 'username',
       value: 'username',
       sortDesc: false
     },
     {
-      label: 'Sort by name Z-A',
+      label: t('SortByNameZA'),
       key: 'name-desc',
       value: 'username',
       sortDesc: true
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 2312a62a..137441a0 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -11,17 +11,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <app-settings>
           <app-settings-item>
             <template #title>
-              <template v-if="project.access.public"
-                >This is public project</template
-              >
-              <template v-else>This is private project</template>
+              <template v-if="project.access.public">{{
+                t('ThisIsPublicProject')
+              }}</template>
+              <template v-else>{{ t('ThisIsPrivateProject') }}</template>
             </template>
 
             <template #description>
               <template v-if="project.access.public">
-                Hide this project from everyone
+                {{ t('HideThisProjectFromEveryone') }}
               </template>
-              <template v-else>Make this project visible to anyone.</template>
+              <template v-else>{{
+                t('MakeThisProjectVisibleToAnyone')
+              }}</template>
             </template>
 
             <template #action>
@@ -31,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   severity="secondary"
                   data-cy="settings-public-btn"
                   :label="
-                    project.access.public ? 'Make private' : 'Make public'
+                    project.access.public ? t('MakePrivate') : t('MakePublic')
                   "
                 />
               </div>
@@ -39,15 +41,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </app-settings-item>
           <slot name="operations"></slot>
           <app-settings-item>
-            <template #title>Delete project</template>
-            <template #description>All data will be lost</template>
+            <template #title>{{ t('DeleteProject') }}</template>
+            <template #description>{{ t('AllDataWillBeLost') }}</template>
             <template #action
               ><div class="flex-shrink-0">
                 <PButton
                   @click="confirmDelete"
                   severity="danger"
                   data-cy="settings-delete-btn"
-                  label="Delete project"
+                  :label="t('DeleteProject')"
                 /></div
             ></template>
           </app-settings-item>
@@ -61,6 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppSettings from '@/common/components/app-settings/AppSettings.vue'
 import AppSettingsItem from '@/common/components/app-settings/AppSettingsItem.vue'
 import AppContainer from '@/common/components/AppContainer.vue'
@@ -97,6 +100,9 @@ export default defineComponent({
   methods: {
     ...mapActions(useProjectStore, ['deleteProject', 'updatePublicFlag']),
     ...mapActions(useDialogStore, { showDialog: 'show' }),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     togglePublicPrivate() {
       this.updatePublicFlag({
         projectId: this.project.id,
@@ -107,15 +113,15 @@ export default defineComponent({
     },
     confirmDelete() {
       const props: ConfirmDialogProps = {
-        text: `Are you sure to delete project?`,
-        description: 'All files will be lost. Type in project name to confirm:',
+        text: this.t('AreYouSureToDeleteProject'),
+        description: this.t('AllFilesWillBeLostTypeInProjectNameToConfirm'),
         hint: `${this.projectName}`,
         severity: 'danger',
-        confirmText: 'Delete',
+        confirmText: this.t('Delete'),
         confirmField: {
-          label: 'Project name',
+          label: this.t('ProjectName'),
           expected: this.projectName,
-          placeholder: 'Type in project name to confirm deletion'
+          placeholder: this.t('TypeInProjectNameToConfirmDeletion')
         }
       }
       const listeners = {
@@ -126,20 +132,22 @@ export default defineComponent({
         params: {
           props,
           listeners,
-          dialog: { header: 'Confirm delete project' }
+          dialog: { header: this.t('ConfirmDeleteProject') }
         }
       })
     },
     confirmPublicPrivate() {
       const props: ConfirmDialogProps = {
         text: `Do you really want to make this project ${
-          this.project?.access.public ? 'private' : 'public'
+          this.project?.access.public ? this.t('Private') : this.t('Public')
         }?`,
-        confirmText: 'Yes',
-        cancelText: 'No',
+        confirmText: this.t('Yes'),
+        cancelText: this.t('No'),
         description: this.project?.access.public
-          ? 'Once you make your project private it can not be accessed by the community.'
-          : 'Once you make your project public it can be accessed by the community.'
+          ? this.t(
+              'OnceYouMakeYourProjectPrivateItCanNotBeAccessedByTheCommunity'
+            )
+          : this.t('OnceYouMakeYourProjectPublicItCanBeAccessedByTheCommunity')
       }
       const listeners = {
         confirm: () => this.togglePublicPrivate()
@@ -151,8 +159,8 @@ export default defineComponent({
           listeners,
           dialog: {
             header: this.project?.access.public
-              ? 'Private project'
-              : 'Public project'
+              ? this.t('PrivateProject')
+              : this.t('PublicProject')
           }
         }
       })
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index b9dfc3ee..68de46f8 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -30,6 +30,7 @@ import { defineComponent, PropType } from 'vue'
 
 import VersionDetailSidebar from '../components/VersionDetailSidebar.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppSection, AppContainer } from '@/common/components'
 import AppMenu from '@/common/components/AppMenu.vue'
 import { DataViewWrapperOptions } from '@/common/components/data-view/types'
@@ -67,12 +68,12 @@ export default defineComponent({
     filterMenuItems(): MenuItem[] {
       return [
         {
-          label: 'Newest versions',
+          label: this.t('NewestVersions'),
           key: 'newest',
           sortDesc: true
         },
         {
-          label: 'Oldest versions',
+          label: this.t('OldestVersions'),
           key: 'oldest',
           sortDesc: false
         }
@@ -84,6 +85,9 @@ export default defineComponent({
     }
   },
   methods: {
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
     rowClick(item) {
       this.$router.push({
         query: {
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index e8ea5b63..c2a3538b 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             data-cy="project-download-btn"
             icon="ti ti-download"
             class="mr-2"
-            label="Download"
+            :label="t('Download')"
             :disabled="projectDownloading"
           />
           <PButton
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             v-if="canCloneProject"
             data-cy="project-clone-btn"
             icon="ti ti-copy"
-            label="Clone"
+            :label="t('Clone')"
             class="mr-2"
           />
           <PButton
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             @click="leaveDialog"
             data-cy="project-leave-btn"
             icon="ti ti-logout"
-            label="Leave project"
+            :label="t('LeaveProject')"
             v-if="canLeaveProject"
           />
         </div>
@@ -80,21 +80,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <app-section v-if="fetchProjectsResponseStatus === 403">
         <div class="flex flex-column align-items-center p-4 text-center gap-4">
           <img src="@/assets/map-circle.svg" alt="No project" />
-          <p class="font-semibold">This is a private project</p>
+          <p class="font-semibold">{{ t('ThisIsAPrivateProject') }}</p>
           <p class="paragraph-p5 opacity-80 mt-2 mb-4">
-            You don't have permissions to access this project.
+            {{ t('YouDontHavePermissionsToAccessThisProject') }}
           </p>
-          <PButton id="request-access-btn" @click="createAccessRequest"
-            >Request access</PButton
-          >
+          <PButton id="request-access-btn" @click="createAccessRequest">{{
+            t('RequestAccess')
+          }}</PButton>
         </div>
       </app-section>
       <app-section v-else-if="fetchProjectsResponseStatus === 404">
         <div class="flex flex-column align-items-center p-4 text-center gap-4">
           <img src="@/assets/map-circle.svg" alt="No project" />
-          <p class="font-semibold">Project not found</p>
+          <p class="font-semibold">{{ t('ProjectNotFound') }}</p>
           <p class="paragraph-p5 opacity-80 mt-2 mb-4">
-            Please check if address is written correctly
+            {{ t('PleaseCheckIfAddressIsWrittenCorrectly') }}
           </p>
         </div>
       </app-section>
@@ -102,10 +102,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <div class="flex flex-column align-items-center p-4 text-center gap-4">
           <img src="@/assets/map-circle.svg" alt="No project" />
           <p class="font-semibold">
-            You don't have permission to access this project
+            {{ t('YouDontHavePermissionsToAccessThisProject') }}
           </p>
           <p class="paragraph-p5 opacity-80 mt-2 mb-4">
-            You already requested access
+            {{ t('YouAlreadyRequestedAccess') }}
           </p>
         </div>
       </app-section>
@@ -125,6 +125,7 @@ import { defineComponent, PropType } from 'vue'
 import DownloadFileLarge from '../components/DownloadFileLarge.vue'
 import DownloadProgress from '../components/DownloadProgress.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer, AppSection } from '@/common'
 import { waitCursor } from '@/common/html_utils'
 import {
@@ -184,7 +185,7 @@ export default defineComponent({
       const tabs: TabItem[] = [
         {
           route: ProjectRouteName.ProjectTree,
-          header: 'Files'
+          header: this.t('Files')
         }
       ]
 
@@ -198,17 +199,17 @@ export default defineComponent({
         if (this.showHistory) {
           tabs.push({
             route: ProjectRouteName.ProjectHistory,
-            header: 'History'
+            header: this.t('History')
           })
         }
         if (this.showSettings) {
           tabs.push({
             route: ProjectRouteName.ProjectCollaborators,
-            header: 'Collaborators'
+            header: this.t('Collaborators')
           })
           tabs.push({
             route: ProjectRouteName.ProjectSettings,
-            header: 'Settings'
+            header: this.t('Settings')
           })
         }
       }
@@ -288,6 +289,9 @@ export default defineComponent({
     ...mapActions(useProjectStore, ['setProject']),
     ...mapActions(useDialogStore, { showDialog: 'show' }),
     ...mapActions(useNotificationStore, ['error', 'show']),
+    t(key: string) {
+      return returnTranslation(import.meta.env.VITE_LANG, key)
+    },
 
     setFetchProjectResponseStatus(status) {
       this.fetchProjectsResponseStatus = status
@@ -313,7 +317,7 @@ export default defineComponent({
         .then(() => {
           waitCursor(false)
           this.show({
-            text: 'Access has been requested'
+            text: this.t('AccessHasBeenRequested')
           })
           this.$router.push({
             name: 'projects'
@@ -321,18 +325,18 @@ export default defineComponent({
         })
         .catch(() => {
           this.error({
-            text: 'Failed to request'
+            text: this.t('FailedToRequest')
           })
           waitCursor(false)
         })
     },
     leaveDialog() {
       const props: ConfirmDialogProps = {
-        text: `Are you sure to leave the project ${this.projectName}?`,
-        description: 'You will not have access to it anymore.',
+        text: `${this.t('AreYouSureToLeaveTheProject')} ${this.projectName}?`,
+        description: this.t('YouWillNotHaveAccessToItAnymore'),
         severity: 'danger',
-        confirmText: 'Yes',
-        cancelText: 'No'
+        confirmText: this.t('Yes'),
+        cancelText: this.t('No')
       }
       const listeners = {
         confirm: async () => {
@@ -347,7 +351,7 @@ export default defineComponent({
         params: {
           props,
           listeners,
-          dialog: { header: 'Leave project' }
+          dialog: { header: this.t('LeaveProject') }
         }
       })
     },
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index afa28bed..7dc860b0 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -20,14 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               v-if="canCreateProject && loggedUser && loggedUser.email"
               @click="newProjectDialog"
               data-cy="action-button-create"
-              label="Create project"
+              :label="CreateProject"
             />
           </template>
           <div class="flex align-items-center justify-content-between mt-3">
             <span class="p-input-icon-left flex-grow-1">
               <i class="ti ti-search paragraph-p3"></i>
               <PInputText
-                placeholder="Search projects by name"
+                :placeholder="SearchProjectsByName"
                 v-model="projectsStore.projectsSearch"
                 class="w-full"
               />
@@ -42,8 +42,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <!-- TODO: Do not understand logic here :() -->
       <AppSection v-else>
         <span>
-          <b>Namespace not found</b><br />
-          Please check if address is written correctly
+          <b>{{ NamespaceNotFound }}</b>
+          <br />
+          {{ PleaseCheckIfAddressIsWrittenCorrectly }}
         </span>
       </AppSection>
     </app-container>
@@ -52,12 +53,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts">
+const lang = import.meta.env.VITE_LANG
+
 import { mapActions, mapState } from 'pinia'
 import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent, ref } from 'vue'
 
 import CommunityBanner from '../components/CommunityBanner.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import { AppContainer, AppSection } from '@/common'
 import AppMenu from '@/common/components/AppMenu.vue'
 import { useDialogStore, useProjectStore } from '@/modules'
@@ -65,6 +69,14 @@ import { useLayoutStore } from '@/modules/layout/store'
 import ProjectForm from '@/modules/project/components/ProjectForm.vue'
 import { useUserStore } from '@/modules/user/store'
 
+const CreateProject = returnTranslation(lang, 'CreateProject')
+const SearchProjectsByName = returnTranslation(lang, 'SearchProjectsByName')
+const NamespaceNotFound = returnTranslation(lang, 'NamespaceNotFound')
+const PleaseCheckIfAddressIsWrittenCorrectly = returnTranslation(
+  lang,
+  'PleaseCheckIfAddressIsWrittenCorrectly'
+)
+
 export default defineComponent({
   name: 'ProjectsListView',
   components: { AppContainer, AppSection, AppMenu, CommunityBanner },
@@ -76,14 +88,24 @@ export default defineComponent({
     const projectsStore = useProjectStore()
     const menu = ref()
 
-    return { menu, projectsStore }
+    return {
+      CreateProject,
+      NamespaceNotFound,
+      PleaseCheckIfAddressIsWrittenCorrectly,
+      SearchProjectsByName,
+      menu,
+      projectsStore
+    }
   },
   computed: {
     ...mapState(useUserStore, ['loggedUser']),
     ...mapState(useLayoutStore, ['drawer']),
     ...mapState(useProjectStore, ['projectsSorting', 'projectsCount']),
     header() {
-      return this.onlyPublic ? 'Public projects' : 'My projects'
+      const lang = import.meta.env.VITE_LANG
+      return this.onlyPublic
+        ? returnTranslation(lang, 'PublicProjects')
+        : returnTranslation(lang, 'MyProjects')
     },
     onlyPublic() {
       return this.$route.name === 'explore' || !this.loggedUser?.email
@@ -91,25 +113,31 @@ export default defineComponent({
     filterMenuItems(): MenuItem[] {
       return [
         {
-          label: 'Sort by name A-Z',
+          label: returnTranslation(import.meta.env.VITE_LANG, 'SortByNameAZ'),
           key: 'name-asc',
           value: 'name',
           sortDesc: false
         },
         {
-          label: 'Sort by name Z-A',
+          label: returnTranslation(import.meta.env.VITE_LANG, 'SortByNameZA'),
           key: 'name-desc',
           value: 'name',
           sortDesc: true
         },
         {
-          label: 'Sort by last updated',
+          label: returnTranslation(
+            import.meta.env.VITE_LANG,
+            'SortByLastUpdated'
+          ),
           key: 'updated',
           value: 'updated',
           sortDesc: true
         },
         {
-          label: 'Sort by files size',
+          label: returnTranslation(
+            import.meta.env.VITE_LANG,
+            'SortByFilesSize'
+          ),
           key: 'meta.size',
           value: 'meta.size',
           sortDesc: true
@@ -130,7 +158,11 @@ export default defineComponent({
     ...mapActions(useProjectStore, ['setProjectsSorting']),
 
     newProjectDialog() {
-      const dialog = { persistent: true, header: 'New project' }
+      const lang = import.meta.env.VITE_LANG
+      const dialog = {
+        persistent: true,
+        header: returnTranslation(lang, 'NewProject')
+      }
       this.show({
         component: ProjectForm,
         params: {
diff --git a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
index 46232e6d..56b140d7 100644
--- a/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
+++ b/web-app/packages/lib/src/modules/user/components/ChangePasswordForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <div class="flex flex-column pb-4">
     <span class="p-input-filled">
-      <label for="oldPassowrd">Old password</label>
+      <label for="oldPassowrd">{{ t('OldPassword') }}</label>
       <PPassword
         id="oldPassowrd"
         v-model="oldPassword"
@@ -15,8 +15,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         :class="[errors.old_password ? 'p-invalid' : '']"
         toggleMask
         :feedback="false"
+        :prompt-label="t('EnterPassword')"
         aria-describedby="old-password-error"
-        placeholder="Must be at least 8 characters"
+        :placeholder="t('MustBeAtLeastCharacters')"
       />
       <span class="p-error paragraph-p6" id="old-password-error">{{
         errors.old_password?.[0] || '&nbsp;'
@@ -25,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
     <span class="p-input-filled">
       <app-password-tooltip for="newPassword"
-        ><template #label>New password</template>
+        ><template #label>{{ t('NewPassword') }}</template>
       </app-password-tooltip>
 
       <PPassword
@@ -36,12 +37,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         aria-describedby="password-error"
         toggleMask
         :feedback="false"
-        placeholder="Must be at least 8 characters"
+        :prompt-label="t('EnterPassword')"
+        :placeholder="t('MustBeAtLeastCharacters')"
       />
       <span class="p-error paragraph-p6" id="password-error">{{
         errors.password?.[0]
           ? errors.password?.[0].startsWith('Password')
-            ? 'Password must be at least 8 characters long and include at least three of the following: lowercase letters, uppercase letters, numbers or special characters.'
+            ? t(
+                'PasswordMustBeAtLeastCharactersLongAndIncludeAtLeastThreeOfTheFollowingLowercaseLettersUppercaseLettersNumbersOrSpecialCharacters'
+              )
             : errors.password[0]
           : '&nbsp;'
       }}</span>
@@ -49,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
     <span class="p-input-filled">
       <app-password-tooltip for="confirm">
-        <template #label>Confirm password</template>
+        <template #label>{{ t('ConfirmPassword') }}</template>
       </app-password-tooltip>
 
       <PPassword
@@ -60,7 +64,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         aria-describedby="confirm-password-error"
         toggleMask
         :feedback="false"
-        placeholder="Must be at least 8 characters"
+        :prompt-label="t('EnterPassword')"
+        :placeholder="t('MustBeAtLeastCharacters')"
       />
 
       <span class="p-error paragraph-p6" id="confirm-password-error">{{
@@ -77,7 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="user-change-password-close-btn"
-        >Cancel</PButton
+        >{{ t('Cancel') }}</PButton
       >
 
       <PButton
@@ -86,7 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="flex w-12 lg:w-6 justify-content-center"
         data-cy="user-change-password-change-btn"
       >
-        Save changes
+        {{ t('SaveChanges') }}
       </PButton>
     </div>
   </div>
@@ -96,13 +101,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppPasswordTooltip from '@/common/components/AppPasswordTooltip.vue'
 import { waitCursor } from '@/common/html_utils'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useFormStore } from '@/modules/form/store'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
+  setup() {
+    return { t }
+  },
   data() {
     return {
       oldPassword: '',
diff --git a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
index b1f58f9b..18a719c6 100644
--- a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
+++ b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
@@ -6,15 +6,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <ConfirmDialog
-    text="Do you really wish to close your account?"
-    description="This action will delete your Mergin Maps account. If you are a workspace owner, you need to transfer the ownership to somebody else or close the workspace."
-    cancelText="No"
-    confirmText="Yes"
+    :text="t('DoYouReallyWishToCloseYourAccount')"
+    :description="
+      t(
+        'ThisActionWillDeleteYourMerginMapsAccountIfYouAreAWorkspaceOwnerYouNeedToTransferTheOwnershipToSomebodyElseOrCloseTheWorkspace'
+      )
+    "
+    :cancelText="t('No')"
+    :confirmText="t('Yes')"
     :hint="username"
     :confirmField="{
-      label: 'Username',
+      label: t('Username'),
       expected: username,
-      placeholder: 'Type in your username to confirm deletion'
+      placeholder: t('Username')
     }"
     severity="danger"
     @confirm="confirm"
@@ -22,11 +26,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script setup lang="ts">
+import returnTranslation from '@/../../lang/translate'
 import { DeleteAccountConfirmProps } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 
 defineProps<DeleteAccountConfirmProps>()
 const emit = defineEmits(['confirm'])
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
 
 function confirm() {
   emit('confirm')
diff --git a/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue b/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
index f8227939..d4d42ea6 100644
--- a/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
+++ b/web-app/packages/lib/src/modules/user/components/EditProfileForm.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <form @submit.prevent="submit" class="flex flex-column pb-4">
     <span class="p-input-filled">
-      <label for="first-name">First name</label>
+      <label for="first-name">{{ t('FirstName') }}</label>
       <PInputText
         id="first-name"
         v-model="editedProfile.first_name"
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label for="last-name">Last name</label>
+      <label for="last-name">{{ t('LastName') }}</label>
       <PInputText
         id="last-name"
         v-model="editedProfile.last_name"
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </span>
 
     <span class="p-input-filled">
-      <label for="email">Email</label>
+      <label for="email">{{ t('Email') }}</label>
       <PInputText
         id="email"
         v-model="editedProfile.email"
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="profile-edit-close-btn"
-        >Cancel</PButton
+        >{{ t('Cancel') }}</PButton
       >
 
       <PButton
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="flex w-12 lg:w-6 justify-content-center"
         data-cy="profile-edit-save-btn"
       >
-        Save changes
+        {{ t('SaveChanges') }}
       </PButton>
     </div>
   </form>
@@ -83,11 +83,17 @@ import { PropType, defineComponent } from 'vue'
 
 import { EditUserProfileParams } from '../types'
 
+import returnTranslation from '@/../../lang/translate'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useFormStore } from '@/modules/form/store'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
+  setup() {
+    return { t }
+  },
   props: {
     profile: Object as PropType<EditUserProfileParams>
   },
diff --git a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
index be384a8d..cc0a3a7f 100644
--- a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
+++ b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <app-section v-if="accessRequests && accessRequestsCount > 0">
-    <template #title>You requested access to these projects</template>
+    <template #title>{{ t('YouRequestedAccessToTheseProjects') }}</template>
     <access-request-table />
   </app-section>
 </template>
@@ -15,12 +15,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppSection from '@/common/components/AppSection.vue'
 import AccessRequestTable from '@/modules/project/components/AccessRequestTable.vue'
 import { useProjectStore } from '@/modules/project/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'ProfileAccessRequestsRow',
+  setup() {
+    return { t }
+  },
   components: { AccessRequestTable, AppSection },
   computed: {
     ...mapState(useProjectStore, ['accessRequests', 'accessRequestsCount'])
diff --git a/web-app/packages/lib/src/modules/user/routes.ts b/web-app/packages/lib/src/modules/user/routes.ts
index d2a52edd..5ea2b282 100644
--- a/web-app/packages/lib/src/modules/user/routes.ts
+++ b/web-app/packages/lib/src/modules/user/routes.ts
@@ -6,8 +6,11 @@ import { RouteLocationNormalizedLoaded, RouteRecord } from 'vue-router'
 
 import { UserRouteParams } from './types'
 
+import returnTranslation from '@/../../lang/translate'
 import { DEFAULT_PAGE_TITLE } from '@/common/route_utils'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 /**
  * Enum for user routes names
  * Feel free to use it in application router as name attribute and in redirects from lib or app
@@ -24,12 +27,12 @@ export const getUserTitle = (route: RouteLocationNormalizedLoaded) => {
   const params = route.params as UserRouteParams
   const titles: Record<UserRouteName, string | string[]> = {
     [UserRouteName.Login]: [
-      params.reset ? 'Reset password' : 'Sign in',
+      params.reset ? t('ResetPassword') : t('SignIn'),
       DEFAULT_PAGE_TITLE
     ],
-    [UserRouteName.ConfirmEmail]: ['Confirm email address', DEFAULT_PAGE_TITLE],
-    [UserRouteName.ChangePassword]: ['Change password', DEFAULT_PAGE_TITLE],
-    [UserRouteName.UserProfile]: ['Your profile']
+    [UserRouteName.ConfirmEmail]: [t('EmailConfirmation'), DEFAULT_PAGE_TITLE],
+    [UserRouteName.ChangePassword]: [t('ChangePassword'), DEFAULT_PAGE_TITLE],
+    [UserRouteName.UserProfile]: [t('YourProfile')]
   }
   return titles[name]
 }
diff --git a/web-app/packages/lib/src/modules/user/store.ts b/web-app/packages/lib/src/modules/user/store.ts
index 34da4d98..1b8c025a 100644
--- a/web-app/packages/lib/src/modules/user/store.ts
+++ b/web-app/packages/lib/src/modules/user/store.ts
@@ -5,6 +5,7 @@
 import { defineStore, getActivePinia } from 'pinia'
 import { isNavigationFailure } from 'vue-router'
 
+import returnTranslation from '@/../../lang/translate'
 import { getErrorMessage } from '@/common/error_utils'
 import { waitCursor } from '@/common/html_utils'
 import { createStorage, StorageProxy } from '@/common/local_storage'
@@ -30,6 +31,8 @@ import {
 } from '@/modules/user/types'
 import { UserApi } from '@/modules/user/userApi'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export interface UserState {
   loggedUser?: UserDetailResponse
   workspaces: WorkspaceResponse[]
@@ -155,12 +158,12 @@ export const useUserStore = defineStore('userModule', {
           loggedUser: payload.editedUser
         })
         await this.fetchUserProfile()
-        await notificationStore.show({ text: 'Profile has been changed' })
+        await notificationStore.show({ text: t('ProfileHasBeenChanged') })
       } catch (error) {
         await formStore.handleError({
           componentId: payload.componentId,
           error,
-          generalMessage: 'Failed to change profile'
+          generalMessage: t('FailedToChangeProfile')
         })
       } finally {
         waitCursor(false)
@@ -179,7 +182,7 @@ export const useUserStore = defineStore('userModule', {
         })
       } catch {
         await notificationStore.error({
-          text: "Failed to fetch user's profile"
+          text: t('FailedToFetchUsersProfile')
         })
       }
       return resp?.data
@@ -198,7 +201,7 @@ export const useUserStore = defineStore('userModule', {
         location.href = '/'
       } catch (err) {
         await notificationStore.error({
-          text: getErrorMessage(err, 'Unable to close account')
+          text: getErrorMessage(err, t('UnableToCloseAccount'))
         })
       } finally {
         waitCursor(false)
@@ -246,7 +249,7 @@ export const useUserStore = defineStore('userModule', {
         await formStore.handleError({
           componentId: payload.componentId,
           error,
-          generalMessage: 'Failed to login'
+          generalMessage: t('FailedToLogin')
         })
       }
     },
@@ -259,13 +262,13 @@ export const useUserStore = defineStore('userModule', {
         await UserApi.resetPassword({ email: payload.email })
         await getActivePinia().router.push({ path: '/login' })
         await notificationStore.show({
-          text: 'Email with password reset link was sent to your email address'
+          text: t('EmailWithPasswordResetLinkWasSentToYourEmailAddress')
         })
       } catch (error) {
         await formStore.handleError({
           componentId: payload.componentId,
           error,
-          generalMessage: 'Failed to send confirmation email'
+          generalMessage: t('FailedToSendConfirmationEmail')
         })
       }
     },
@@ -286,7 +289,7 @@ export const useUserStore = defineStore('userModule', {
         await formStore.handleError({
           componentId: payload.componentId,
           error: e,
-          generalMessage: 'Failed to change password'
+          generalMessage: t('FailedToChangePassword')
         })
       }
     },
@@ -297,11 +300,13 @@ export const useUserStore = defineStore('userModule', {
       try {
         await UserApi.resendEmail()
         await notificationStore.show({
-          text: `Email was sent to address: ${payload.email}`
+          text: `${t('EmailWasSentToAddress')}: ${payload.email}`
         })
       } catch (err) {
         await notificationStore.error({
-          text: 'Failed to send confirmation email, please check your address in user profile settings'
+          text: t(
+            'FailedToSendConfirmationEmailPleaseCheckYourAddressInUserProfileSettings'
+          )
         })
       }
     },
@@ -315,12 +320,12 @@ export const useUserStore = defineStore('userModule', {
       try {
         await UserApi.changePassword(payload.data, true)
         dialogStore.close()
-        await notificationStore.show({ text: 'Password has been changed' })
+        await notificationStore.show({ text: t('PasswordHasBeenChanged') })
       } catch (error) {
         await formStore.handleError({
           componentId: payload.componentId,
           error,
-          generalMessage: 'Failed to change password'
+          generalMessage: t('FailedToChangePassword')
         })
       } finally {
         waitCursor(false)
@@ -347,7 +352,7 @@ export const useUserStore = defineStore('userModule', {
         })
       } catch (_err) {
         await notificationStore.error({
-          text: 'Failed to load workspace'
+          text: t('FailedToLoadWorkspace')
         })
       }
       return newWorkspace
@@ -363,7 +368,7 @@ export const useUserStore = defineStore('userModule', {
         this.setWorkspaces({ workspaces: workspacesResponse.data })
       } catch (_err) {
         await notificationStore.error({
-          text: 'Failed to load workspaces'
+          text: t('FailedToLoadWorkspaces')
         })
       } finally {
         this.workspacesLoading = false
@@ -471,7 +476,7 @@ export const useUserStore = defineStore('userModule', {
           await this.cleanupLastSeenWorkspaces()
         }
       } catch (e) {
-        console.warn('Loading of stored user workspace id has failed.', e)
+        console.warn(t('LoadingOfStoredUserWorkspaceIdHasFailed'), e)
       }
     },
 
diff --git a/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue b/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
index 1854764b..2cbbe459 100644
--- a/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
+++ b/web-app/packages/lib/src/modules/user/views/ChangePasswordView.vue
@@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <app-onboarding-page>
-    <template #header><h1 class="headline-h1">Change password</h1></template>
+    <template #header
+      ><h1 class="headline-h1">{{ t('ChangePassword') }}</h1></template
+    >
 
     <form
       v-if="!success"
@@ -15,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     >
       <span>
         <app-password-tooltip for="newPassword"
-          ><template #label>New Password</template>
+          ><template #label>{{ t('NewPassword') }}</template>
         </app-password-tooltip>
         <PPassword
           id="newPassword"
@@ -24,13 +26,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :class="['w-full', errors.old_password ? 'p-invalid' : '']"
           toggleMask
           :feedback="false"
+          :prompt-label="t('EnterPassword')"
           aria-describedby="password-error"
-          placeholder="Please enter your password"
+          :placeholder="t('PleaseEnterYourPassword')"
         />
         <span class="p-error paragraph-p6" id="password-error">{{
           errors.password?.[0]
             ? errors.password?.[0].startsWith('Password')
-              ? 'Password must be at least 8 characters long and include at least three of the following: lowercase letters, uppercase letters, numbers or special characters.'
+              ? t(
+                  'PasswordMustBeAtLeastCharactersLongAndIncludeAtLeastThreeOfTheFollowingLowercaseLettersUppercaseLettersNumbersOrSpecialCharacters'
+                )
               : errors.password[0]
             : '&nbsp;'
         }}</span>
@@ -38,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
       <span>
         <app-password-tooltip for="confirm">
-          <template #label>Confirm password</template>
+          <template #label>{{ t('ConfirmPassword') }}</template>
         </app-password-tooltip>
 
         <PPassword
@@ -49,7 +54,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           aria-describedby="confirm-password-error"
           toggleMask
           :feedback="false"
-          placeholder="Please enter your new password"
+          :prompt-label="t('EnterPassword')"
+          :placeholder="t('PleaseEnterYourNewPassword')"
         />
 
         <span class="p-error paragraph-p6" id="confirm-password-error">{{
@@ -62,17 +68,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="mt-6"
         data-cy="change-password-btn"
         :disabled="!password || !confirm"
-        label="Change"
+        :label="t('Change')"
       />
     </form>
 
     <div v-else class="flex flex-column align-items-center">
       <span
-        >Your password was changed. You can now
+        >{{ t('YourPasswordWasChangedYouCanNow') }}
         <router-link
           class="text-color-forest title-t3 align-self-center"
           :to="{ name: 'login' }"
-          >Sign in</router-link
+          >{{ t('SignIn') }}</router-link
         ></span
       >
     </div>
@@ -83,13 +89,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppOnboardingPage from '@/common/components/AppOnboardingPage.vue'
 import AppPasswordTooltip from '@/common/components/AppPasswordTooltip.vue'
 import { useFormStore } from '@/modules/form/store'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'ChangePasswordView',
+  setup() {
+    return { t }
+  },
   components: { AppPasswordTooltip, AppOnboardingPage },
   data() {
     return {
diff --git a/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
index 7c8f7161..d737dcb9 100644
--- a/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/LoginViewTemplate.vue
@@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <app-onboarding-page>
     <template #header>
       <h1 class="headline-h1">
-        <template v-if="forgotPassword">Reset password</template
-        ><template v-else>Sign in</template>
+        <template v-if="forgotPassword">{{ t('ResetPassword') }}</template
+        ><template v-else>{{ t('SignIn') }}</template>
       </h1>
     </template>
 
@@ -23,9 +23,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       class="flex flex-column"
     >
       <div>
-        <label for="login">Email</label>
+        <label for="login">{{ t('Email') }}</label>
         <PInputText
-          placeholder="Type your email"
+          :placeholder="t('TypeYourEmail')"
           name="email"
           color="inputColor"
           data-cy="reset-form-email"
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <router-link
         class="text-color-forest align-self-center font-semibold"
         :to="{ name: 'login' }"
-        >Back to login</router-link
+        >{{ t('BackToLogin') }}</router-link
       >
 
       <PButton
@@ -48,12 +48,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         data-cy="reset-form-btn"
         :disabled="!email"
         @click="reset"
-        label="Reset password"
+        :label="t('ResetPassword')"
       />
     </form>
     <form v-else @submit.prevent="loginUser" class="flex flex-column">
       <div>
-        <label for="login">Username or email</label>
+        <label for="login">{{ t('UsernameOrEmail') }}</label>
         <PInputText
           id="login"
           name="login"
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           data-cy="login-form-login"
           :class="['w-full', errors.login ? 'p-invalid' : '']"
           aria-describedby="login-error"
-          placeholder="Please enter username or email"
+          :placeholder="t('PleaseEnterUsernameOrEmail')"
           :inputProps="{ autocomplete: 'on' }"
           autofocus
         />
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </div>
 
       <div>
-        <label for="password">Password</label>
+        <label for="password">{{ t('Password') }}</label>
         <PPassword
           id="password"
           name="password"
@@ -81,7 +81,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           aria-describedby="password-error"
           toggleMask
           :feedback="false"
-          placeholder="Please enter your password"
+          :prompt-label="t('EnterPassword')"
+          :placeholder="t('PleaseEnterYourPassword')"
           :pt="{
             input: {
               root: {
@@ -99,7 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <router-link
         class="text-color-forest title-t3 align-self-center"
         :to="{ name: 'login', params: { reset: 'reset' } }"
-        >Forgot password?</router-link
+        >{{ t('ForgotPassword') }}</router-link
       >
 
       <PButton
@@ -109,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         id="login-btn"
         class="mt-6 w-full"
         size="large"
-        label="Sign in"
+        :label="t('SignIn')"
       />
     </form>
     <div class="flex flex-column align-items-center">
@@ -121,12 +122,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 
+import returnTranslation from '@/../../lang/translate'
 import AppOnboardingPage from '@/common/components/AppOnboardingPage.vue'
 import { useFormStore } from '@/modules/form/store'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default {
   name: 'LoginViewTemplate',
+  setup() {
+    return { t }
+  },
   props: {
     presetLogin: {
       type: String,
diff --git a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
index 86191186..b02f7fef 100644
--- a/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/user/views/ProfileViewTemplate.vue
@@ -11,7 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class="flex flex-column lg:flex-row lg:align-items-center row-gap-3"
       >
         <!-- Title with buttons -->
-        <h1 class="headline-h3 text-color font-semibold">Profile</h1>
+        <h1 class="headline-h3 text-color font-semibold">
+          {{ t('AccountDetails') }}
+        </h1>
         <div
           v-if="loggedUser?.can_edit_profile"
           class="flex flex-grow-1 align-items-center lg:justify-content-end"
@@ -19,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <PButton
             @click="editProfileDialog"
             icon="ti ti-pencil"
-            label="Edit profile"
+            :label="t('EditAccount')"
             class="w-auto mr-1"
             data-cy="profile-edit-btn"
           />
@@ -29,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             data-cy="profile-change-password-btn"
             class="w-auto"
             icon="ti ti-lock"
-            label="Change password"
+            :label="t('ChangePassword')"
           />
         </div></section
     ></app-container>
@@ -41,17 +43,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <template #header-image
           ><img width="50" height="50" src="@/assets/warning.svg"
         /></template>
-        <template #title>Please verify your email</template>
-        <template #description
-          >We sent you a verification email to the account you provided during
-          signup.</template
-        >
+        <template #title>{{ t('PleaseVerifyYourEmail') }}</template>
+        <template #description>{{
+          t('WeSentYouAVerificationEmailToTheAccountYouProvidedDuringSignup')
+        }}</template>
         <template #header-actions
           ><PButton
             @click="resendConfirmationEmail"
             severity="secondary"
             data-cy="profile-send-email-btn"
-            label="Send confirmation email"
+            :label="t('SendConfirmationEmail')"
         /></template>
       </app-section-banner>
     </app-container>
@@ -78,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <i
               v-if="!loggedUser?.verified_email"
               v-tooltip.top="{
-                value: 'Your email is not verified.'
+                value: t('EmailVerificationStatus')
               }"
               class="ti ti-alert-circle-filled"
               data-cy="project-form-missing-project"
@@ -90,13 +91,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <div
               class="col-6 flex flex-column align-items-start text-left flex-wrap"
             >
-              <dt class="paragraph-p6 opacity-80 mb-2">Full name</dt>
+              <dt class="paragraph-p6 opacity-80 mb-2">
+                {{ t('FullName') }}
+              </dt>
               <dd class="font-semibold" data-cy="profile-name">
                 {{ loggedUser?.name || '-' }}
               </dd>
             </div>
             <div class="col-6 flex flex-column align-items-end">
-              <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt>
+              <dt class="paragraph-p6 opacity-80 mb-2">
+                {{ t('Registered') }}
+              </dt>
               <dd class="font-semibold" data-cy="profile-registered">
                 {{ $filters.date(loggedUser?.registration_date) }}
               </dd>
@@ -107,7 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     </app-container>
     <app-container>
       <app-section>
-        <template #title>Advanced</template>
+        <template #title>{{ t('Advanced') }}</template>
         <div class="flex flex-column row-gap-3 paragraph-p5 px-4 pb-4">
           <div
             v-if="loggedUser?.can_edit_profile"
@@ -118,10 +123,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             ]"
           >
             <div class="flex-grow-1">
-              <p class="title-t3">Receive notifications</p>
-              <span class="paragraph-p6 opacity-80"
-                >We will send you information about workspace activity</span
-              >
+              <p class="title-t3">{{ t('ReceiveNotifications') }}</p>
+              <span class="paragraph-p6 opacity-80">{{
+                t('WeWillSendYouInformationAboutWorkspaceActivity')
+              }}</span>
             </div>
             <div
               class="flex align-items-center flex-shrink-0"
@@ -141,19 +146,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             ]"
           >
             <div class="flex-grow-1">
-              <p class="title-t3">Close account</p>
-              <span class="paragraph-p6 opacity-80"
-                >Your account will be closed. In case you are an owner of a
-                workspace, you might need to transfer the ownership first or
-                close the workspace.</span
-              >
+              <p class="title-t3">{{ t('CloseAccount') }}</p>
+              <span class="paragraph-p6 opacity-80">{{
+                t(
+                  'YourAccountWillBeClosedInCaseYouAreAnOwnerOfAWorkspaceYouMightNeedToTransferTheOwnershipFirstOrCloseTheWorkspace'
+                )
+              }}</span>
             </div>
             <div class="flex-shrink-0">
               <PButton
                 @click="confirmDeleteUser"
                 severity="danger"
                 data-cy="profile-close-account-btn"
-                label="Close account"
+                :label="t('CloseAccount')"
               />
             </div>
           </div>
@@ -170,6 +175,7 @@ import { defineComponent } from 'vue'
 
 import DeleteAccountDialog from '../components/DeleteAccountConfirm.vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppContainer from '@/common/components/AppContainer.vue'
 import AppSection from '@/common/components/AppSection.vue'
 import AppSectionBanner from '@/common/components/AppSectionBanner.vue'
@@ -179,8 +185,13 @@ import ChangePasswordForm from '@/modules/user/components/ChangePasswordForm.vue
 import EditProfileForm from '@/modules/user/components/EditProfileForm.vue'
 import { useUserStore } from '@/modules/user/store'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'ProfileViewTemplate',
+  setup() {
+    return { t }
+  },
   props: {
     name: String
   },
@@ -221,12 +232,12 @@ export default defineComponent({
         params: {
           props,
           listeners,
-          dialog: { header: 'Close account' }
+          dialog: { header: t('CloseAccount') }
         }
       })
     },
     changePasswordDialog() {
-      const dialog = { persistent: true, header: 'Change password' }
+      const dialog = { persistent: true, header: t('ChangePassword') }
       this.show({
         component: ChangePasswordForm,
         params: {
@@ -236,7 +247,7 @@ export default defineComponent({
     },
     editProfileDialog() {
       const props = { profile: this.loggedUser }
-      const dialog = { header: 'Edit profile' }
+      const dialog = { header: t('EditAccount') }
       this.show({
         component: EditProfileForm,
         params: {
diff --git a/web-app/packages/lib/src/modules/user/views/VerifyEmailView.vue b/web-app/packages/lib/src/modules/user/views/VerifyEmailView.vue
index 03c3994d..e9c2de3b 100644
--- a/web-app/packages/lib/src/modules/user/views/VerifyEmailView.vue
+++ b/web-app/packages/lib/src/modules/user/views/VerifyEmailView.vue
@@ -7,24 +7,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-onboarding-page>
     <template #header>
-      <h1 class="headline-h1">Email confirmation</h1>
+      <h1 class="headline-h1">{{ t('EmailConfirmation') }}</h1>
     </template>
     <div class="flex flex-column gap-4 align-items-center">
       <template v-if="verified"
         ><img src="@/assets/neutral.svg" alt="MerginMaps neutral" /><span
           class="opacity-80 paragraph-p5"
-          >Your email address has been verified.</span
+          >{{ t('YourEmailAddressHasBeenVerified') }}</span
         ></template
       >
       <template v-else
-        ><img src="@/assets/negative.svg" alt="MerginMaps negative" />Invalid
-        token</template
+        ><img src="@/assets/negative.svg" alt="MerginMaps negative" />{{
+          t('InvalidToken')
+        }}</template
       >
       <PButton
         data-cy="verify-email-btn"
         @click="$router.push({ name: 'home' })"
         class="w-full"
-        label="Continue"
+        :label="t('Continue')"
       />
     </div>
   </app-onboarding-page>
@@ -33,11 +34,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import returnTranslation from '@/../../lang/translate'
 import AppOnboardingPage from '@/common/components/AppOnboardingPage.vue'
 import { UserApi } from '@/modules/user/userApi'
 
+const t = (key: string) => returnTranslation(import.meta.env.VITE_LANG, key)
+
 export default defineComponent({
   name: 'VerifyEmailView',
+  setup() {
+    return { t }
+  },
   data() {
     return {
       verified: false
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index 7f31032c..38516630 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -225,6 +225,36 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@intlify/core-base@11.3.2":
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-11.3.2.tgz#185d0e3259be5afc1888c2d2e1a636be09ad2dae"
+  integrity sha512-cgsUaV/dyD6aS49UPgerIblrWeXAZHNaDWqm4LujOGC7IafSyhghGXEiSVvuDYaDPiQTP+tSFSTM1HIu7Yp1nA==
+  dependencies:
+    "@intlify/devtools-types" "11.3.2"
+    "@intlify/message-compiler" "11.3.2"
+    "@intlify/shared" "11.3.2"
+
+"@intlify/devtools-types@11.3.2":
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-types/-/devtools-types-11.3.2.tgz#983e3c12340b36a41648fda451aeebc4f3ade812"
+  integrity sha512-q96G2ZZw0FNoXzejbjIf9dbfgz1xyYBZu6ZT4b5TE/55j8d1O9X5jv0k+U+L3fVe7uebPcqRQFD0ffm30i5mJA==
+  dependencies:
+    "@intlify/core-base" "11.3.2"
+    "@intlify/shared" "11.3.2"
+
+"@intlify/message-compiler@11.3.2":
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-11.3.2.tgz#3e53e5f71995a2ef7d385554185852f5139d4eb3"
+  integrity sha512-d/awyHUkNSaGPxBxT/qlUpfRizxHX9dt55CnW03xx5p1KmMyfYHKupCnvzINX+Na8JR8LAR7y32lPKjoeQGmzA==
+  dependencies:
+    "@intlify/shared" "11.3.2"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@11.3.2":
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-11.3.2.tgz#589d0a7d5448fb042b9553be28aca4467898368d"
+  integrity sha512-x66fjdH6i+lNYPae5URSQGTjBL68Av6hi09jvC5Ci96iTkwfqrPhCj46aylQZmgMaG89rOZCIKqS7ApC8ZDVjg==
+
 "@jridgewell/sourcemap-codec@^1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
@@ -3646,6 +3676,16 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@11:
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-11.3.2.tgz#8f774a4e680be7e0c7a939ff04663cf26886fb85"
+  integrity sha512-gmFrvM+iuf2AH4ygligw/pC7PRJ63AdRNE68E0GPlQ83Mzfyck6g6cRQC3KzkYXr+ZidR91wq+5YBmAMpkgE1A==
+  dependencies:
+    "@intlify/core-base" "11.3.2"
+    "@intlify/devtools-types" "11.3.2"
+    "@intlify/shared" "11.3.2"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-meta@^3.0.0-alpha.10:
   version "3.0.0-alpha.10"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-3.0.0-alpha.10.tgz#8aa7dee8ef43edda2633d52d2d4ca0ae03352222"